JQuery入门(1)

1、jQuery的优势:
轻量级。jQuery非常轻巧,最新的jQuery版本压缩后,大小保持在80k左右。
强大的选择器。jQuery允许使用从CSS1到CSS3几乎所有的选择器,以及jQuery自己的高级而复杂的选择器。甚至你可以编写属于自己的选择器。出色的DOM操作的封装;jQuery封装了大量常用的DOM操作,让你能轻松地完成各种原本非常复杂的操作。可靠的事件处理机制; 完善的Ajax;jQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax的时候能够专心处理业务漏极而无需关系复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。 出色的浏览器兼容性等等。但是jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

2、什么是选择器:
jQuery选择器是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法快速轻松地对页面进行设置。了解jQuery选择器是打开jQuery之门的钥匙。
典型的jQuery选择器句法形式:
$(selector).methodName();
selector是一个字符串表达式,由于识别DOM中的元素,然后使用jQuery提供的方法集合加以设置。
根据所获取页面中元素的不同,可以将jQuery选择器分为几类:
1)基本选择器
2)层次选择器
3)过滤选择器
- 简单过滤选择器
- 内容过滤选择器
- 可见性过滤选择器
- 属性过滤选择器
- 子元素过滤选择器
- 表单对象属性过滤选择器
4)表单选择器
3、基础选择器
基础选择器是jQuery中使用最频繁的选择器,它由元素id、class、多个选择符组成,通过基本选择器可以实现大多数页面元素的查找,如下表格:
选择器 功能 返回值
[#id] 根据给定的id匹配一个元素 单个元素
[element] 根据给定的元素名匹配所有元素 元素集合
[.class] 根据给定的类匹配元素 元素集合
[*] 匹配所有元素 元素集合
[selector1,selectorN] 将每一个选择器匹配到的元素合并后一起返回 元素集合
示例如下:
(1)描述
所有的元素标记全部显示,然后通过jQuery基础选择器隐藏相对应的页面标记。
(2)代码实现

    <script type="text/javascript">
        $(function(){ //id匹配元素
        $("#divOne").css("display","none");
    })
    $(function(){ //元素名匹配元素
            $("div span").css("display","none");
    })
    $(function(){ //类匹配元素
        $(".clsFrame .clsOne").css("display","none");
    })
    $(function(){ //匹配所有元素
        $("*").css("display","none");
    })
    $(function(){ //合并匹配元素
        $("#divOne,span").css("display","none");
    })
    </script>
    ...jQuery控制的代码
    <div class="clsFrame">
        <div id="divOne">ID</div>
    <div class="clsOne">CLASS</div>
    <span>SPAN</span>
    </div>
时间: 2024-11-05 14:59:02

JQuery入门(1)的相关文章

jquery入门菜鸟的疑问

问题描述 jquery入门菜鸟的疑问 $(document).ready(function(){ alert("asdasdasd"); });这段代码没有生效,不只是否是js类库没有加载到 我是在myeclipse里做的,jquery-1.7.2.js是放在/WebRoot/WEB-INF/js/jquery-1.7.2.js jsp文件时放在/WebRoot/index.jsp 解决方案 解决方案二: 问题不清楚,不知道你是否引入了js

jquery入门教程

jQuery入门(1) 概述 jQuery入门(2) 基本语法 jQuery入门(3) Selectors jQuery入门(4) Events jQuery入门(5) 显示/隐藏内容 jQuery入门(6) 淡入淡出效果 jQuery入门(7) 滑动效果 jQuery入门(8) 动画效果 jQuery入门(9) 终止动画 jQuery入门(10) 回调函数 jQuery入门(11) 方法链 jQuery入门(12) HTML Get jQuery入门(13) HTML Set jQuery入门

jQuery入门[1]-构造函数

体积小(v1.2.315kb) 丰富的DOM选择器(CSS1-3+XPath) 跨浏览器(IE6,FF,Safari,Opera) 链式代码 强大的事件.样式支持 强大的AJAX功能 易于扩展,插件丰富 jQuery的构造函数接收四种类型的参数: jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式(ID,DOM元素名,CSS表达式,XPath表达式)找出文档中的元素,并组装成一个 jQuery对

jQuery入门(13) HTML Set

上篇介绍HTML Get,jQuery其实使用上面同样的三个方法来赋值. text() – 设置或取得指 定元素的文本内容. html() – 设置或取得指定元素的内容(包括HTML标记) val() – 设置或 取得表单某个输入域的值. 比如下面代码就是使用上面三种方法给HTML元素或Form赋值 $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("

jQuery入门(12) HTML Get

jQuery库包含了很多用来改变和操作HTML元素及其属性的方法. 其中一个非常重要的部分就是 jQuery可以用来操作DOM. 本篇介绍使用jQuery来取得DOM节点元素的值或属性. 其中三个简单而 有用的方法如下: text() – 设置或取得指定元素的文本内容. html() – 设置或取得指定 元素的内容(包括HTML标记) val() – 设置或取得表单某个输入域的值. 例如,下面代码 使用html()和text()方法取得HTML元素的内容: $("#btn1").cli

jQuery入门(11) 方法链

jQuery支持将多个方法链接在一起,比如介绍的多个animation(),这个链接也可以应用到其它方法 ,构成一个方法链. 使用这个方法,对于同一个元素,链接多个方法,浏览器无需多次查找HTML元 素. 下面的方法,可以把css,slideUp,slideDown串接在一起: $("#p1") .css("color","red") .slideUp(2000) .slideDown(2000); 以上是小编为您精心准备的的内容,在的博客.问答

jQuery入门(5) 显示/隐藏内容

jQuery的hide()和show()可以用来显示和隐藏内容.比如下面的例子:jQuery的hide()和show()可 以用来显示和隐藏内容.比如下面的例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JQuery Demo</title> <script src="scripts/jquery-1.9.1.js&qu

jQuery入门(4) Events

学习了jQuery的选择器,就可以针对选择的HMTL标记或是元素添加事件处理,事件包括按键,鼠标 ,单击按钮等. 下面为常见的DOM事件: 鼠标事件 键盘事件 表单事件 文档/窗口事 件 click keypress submit load dblc lick keydown change resize mouseenter key up focus scroll mouseleave   blur unload jQuery事件处理的语法 在jQuery中 ,大部分的DOM事件都有对应的jQu

jQuery入门(3) Selectors

jQuery Selector 是jQuery库中非常重要的一个组成部分. jQuery Selector 用来选择某个 HTML元素,其基本语句和CSS的选择器(Selector)是一样的,所有jQuery selector 都是以$()开始. 选择HTML标记 选择某个HTML元素的方法是直接使用该元素的标记名称,比如选择所有 <p>元素 $("p") 下面的例子当用户点击一个按钮时,隐藏所有的<p>元 素 $(document).ready(functio

jQuery入门(1) 概述

jQuery是一套跨浏览器的JavaScript函式库,简化HTML与JavaScript之间的操作,下面为摘自 Wikepedia上的jQuery说明: jQuery 是开源软件,使用MIT许可证授权.[4] jQuery的语法设计 使得许多操作变得容易,如操作文档对象(document).选择DOM元素.创建动画效果.处理事件.以 及开发Ajax程序.jQuery 也提供了给开发人员在其上创建插件的能力.这使开发人员可以对底层交互 与动画.高级效果和高级主题化的组件进行抽象化.模块化的方式使