一、jQuery版本
1、1.x版本：兼容老版本IE、文件更大。
2、2.x版本：部分IE8及以下不支持、文件小，执行效率更高。
3、3.x版本：完全不再支持IE8及以下版本、提供了一些新的API、提供不包含ajax/动画API的版本。
二、jQuery对象
1、jQuery对象就是通过jQuery($ ())包装DOM对象后产生的对象。
2、jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法：$ ("#persontab").html(); 。
3、jQuery对象无法使用DOM对象的任何方法，同样DOM对象也不能使用jQuery里的任何方法。
4、约定：如果获取的是jQuery对象，那么要在变量前面加上$
——var $variable = jQuery对象
——var variable = DOM对象
三、jQuery对象转化为DOM对象
1、jQuery对象不能使用DOM中的方法，但如果jQuery没有封装想要的方法，不得不使用DOM对象的时候，有如下两种处理方法：
①jQuery对象是一个数组对象，可以通过[index]的方法来得到对应的DOM对象。
var $cr = $("#cr");
var cr = $cr[0];
②使用jQuery中的get(index)方法得到相应的DOM对象
var $cr = $("#cr");
var cr = $cr.get(0);
四、DOM对象转化为jQuery对象
对于一个DOM对象，只需要用 $()把DOM对象包装起来（jQuery对象就是通过jQuery包装DOM对象后产生的对象），就可以获得一个jQuery对象。
var cr = document.getElementById("cr");
var $cr = $(cr);
转换后就可以使用jQuery中的方法了。
五、jQuery选择器
在jQuery中，对事件处理，遍历DOM和Ajax操作都依赖于选择器。
jQuery选择器的优点：
①简洁的写法：
$("#id") //document.getElementById("id");
$("tagName") //document.getElementByTagName("tagName");
②完善的事件处理机制：使用jQuery获取网页中的元素即使不存在也不会报错。
1、基本选择器
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名来查找DOM元素（在网页中id只能使用一次，class允许重复使用）。
| 基本选择器 | 描述 | 返回 |
|---|---|---|
| #id | 根据给定的id匹配一个元素 | 每个元素组成的集合 |
| .class | 根据给定的类名匹配元素 | 集合元素 |
| element | 根据给定的元素名来匹配元素 | 集合元素 |
| * | 匹配所有的元素 | 集合元素 |
| selector1,selector2,...selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 |
2、层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等，则需要使用层次选择器。
| 层次选择器 | 描述 | 返回 |
|---|---|---|
| $("ancestor descendant") | 选取 ancestor 的所有的 descendant（后代）元素 | 集合元素 |
| $("parent > child") | 选取 parent 元素下的child（子）元素，与$("ancestor descendant")有区别，$("ancestor descendant")选择的是后代元素 | 集合元素 |
| $("prev + next") | 选取紧挨在 prev 元素后的下一个 next 元素 | 集合元素 |
| $("prev ~ sinlings") | 选取紧挨在 prev 元素后的所有 siblings 元素（兄弟元素） | 集合元素 |
注意：("prev ~ div") 选择器只能选择"#prev"元素后面的同辈元素；而jQuery中的方法 siblings() 与前后位置无关，只要是同辈节点就可以选取。
3、基本过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素，该选择器都以“:”开头。按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。
| 基本过滤选择器 | 描述 | 返回 |
|---|---|---|
| :first | 选取第一个元素 | 单个元素组成的集合 |
| :last | 选取最后一个元素 | 集合元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 |
| :even | 选取索引时偶数的所有元素，索引从0开始 | 集合元素 |
| :odd | 选取索引时奇数的所有元素，索引从0开始 | 集合元素 |
| :eq(index) | 选取索引等于index的元素，索引从0开始 | 集合元素 |
| :gt(index) | 选取索引大于 index 的元素，索引从0开始 | 集合元素 |
| :lt(index) | 选取索引小于 index 的元素，索引从0开始 | 集合元素 |
| :header | 选取所有的标题元素，如 h1、h2 等 | 集合元素 |
| :animated | 选取当前正在执行动画的所有元素 | 集合元素 |
4、内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上。
| 内容过滤选择器 | 描述 | 返回 |
|---|---|---|
| :contains(text) | 选取含有文本内容为 text 的元素 | 集合元素 |
| :empty | 选取不包含子元素或者文本的空元素 | 集合元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 |
| :parent | 选取含有子元素或文本的元素 | 集合元素 |
5、可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。
| 可见性过滤选择器 | 描述 | 返回 |
|---|---|---|
| :hidden | 选取所有不可见的元素 | 集合元素 |
| :visible | 选取所有可见的元素 | 集合元素 |
*可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素，也包含文本隐藏域 (<input type="hidden">) 和 visible:hidden 之类的元素。
6、属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
| 属性过滤选择器 | 描述 | 返回 |
|---|---|---|
| [attribute] | 选取拥有此属性的元素 | 集合元素 |
| [attribute=value] | 选取指定属性的值为 value 的元素 | 集合元素 |
| [attribute!=value] | 选取指定属性的值不为 value 的元素 | 集合元素 |
| [attribute^=value] | 选取指定属性的值以 value 开始的元素 | 集合元素 |
| [attribute$=value] | 选取指定属性的值以 value 结束的元素 | 集合元素 |
| [attribute*=value] | 选取指定属性的值含有 value 的元素 | 集合元素 |
| [attribute1][selector2]....[selectorN] | 用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次，缩小一次范围。 | 集合元素 |
7、子元素过滤选择器
| 子元素过滤选择器 | 描述 | 返回 |
|---|---|---|
| :nth-child(index/even/odd/equation) | 选取每个父元素下的第index个子元素或者奇偶元素(index从1算起) | 集合元素 |
| :first-child | 选取每个父元素的第一个子元素 | 集合元素 |
| :last-child | 选取每个父元素的最后一个子元素 | 集合元素 |
| :only-child | 如果某个元素就是它父元素中唯一的子元素，那么将被匹配 | 集合元素 |
*nth-child()选择器详解如下：
——(1):nth-child(even/odd)：能选取每个父元素下的索引值为偶（奇）数的元素。
——(2):nth-child(2)：能选取每个父元素下的索引值为2的元素。
——(3):nth-child(3n)：能选取每个父元素下的索引值是3的倍数的元素。
——(4):nth-child(3n+1)：能选取每个父元素下的索引值为3n+1的元素。
8、表单对象属性过滤选择器
此选择器主要对所选择的表单元素进行过滤。
| 表单对象属性过滤选择器 | 描述 | 返回 |
|---|---|---|
| :enabled | 选取所有可用元素 | 集合元素 |
| :disabled | 选取所有不可用的元素 | 集合元素 |
| :checked | 选取所有被选中的元素（单选框、复选框） | 集合元素 |
| :selected | 选取所有被选中的选项元素（下拉对象） | 集合元素 |
9、表单选择器
| 表单选择器 | 描述 | 返回 |
|---|---|---|
| :input | 选取所有的<input>/<textarea>/<select>/<button>元素（使用较少） | 集合元素 |
| :text | 选取所有的单行文本框 | 集合元素 |
| :password | 选取所有的密码框元素 | 集合元素 |
| :radio | 选取所有的单选框 | 集合元素 |
| :checkbox | 选取所有的多选框 | 集合元素 |
| :submit | 选取所有的提交按钮 | 集合元素 |
| :image | 选取所有的图像按钮 | 集合元素 |
| :reset | 选取所有的重置按钮 | 集合元素 |
| :button | 选取所有的按钮 | 集合元素 |
| :file | 选取所有的文件元素 | 集合元素 |
| :hidden | 选取所有不可见元素 | 集合元素 |
小结
1. jQuery是JavaScript的一个函数库。
2. 利用jQuery开发的步骤。
3. jQuery对象 VS DOM对象。
1). jQuery对象不能使用DOM对象的属性和方法，DOM对象也不能属于jQuery对象的属性和方法。
2). jQuery对象是一个DOM数组对象，所有可以使用下标的方式转为DOM对象。
var $btn = $("button");
var btn = $btn[0];
3). jQuery对象是使用$()包装到对象后产生的对象:
$("select :selected").each(function(){
alert($(this).value);
});
4. jQuery的选择器
1). 选取被选中的select的option需要使用选取子节点的方式
//实际被选中的不是select，而是select的option子节点
//所以要加一个空格
$(select[name='test'] :selected").each(function(){});
2). jQuery选择器可以综合使用。
3). 如果选择器搞不定，可以借助方法。
5. jQuery对象的几个方法:
1). val():获取或设置表单元素的value属性值
设置 --- $(":text:enabled").val("jQuery");
获取 --- alert($(":text:enabled").val();
2). attr():和val()类似
attr(name, val):为name属性赋值为val
attr(name):获取name的属性值
3). each():用来对jQuery对象进行遍历,参数为function,函数内部的this是正在遍历的DOM对象
$("select :selected").each(function(){
alert(this.value);
});
4). text():和val()方法类似
text():获取元素节点的文本子节点的值
text(str):设置元素节点的文本子节点的值
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
