jQuery读书笔记（二）——jQuery选择器

jQuery读书笔记（二）——jQuery选择器

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

 

1. 基本选择器

 

       基本选择器是jQuery最常用的选择器。也是最简单的选择器，他通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能使用一次，class允许重复使用。

 

       （1）#id

              $(‘#one’).css(“background”,”#bbffaa”);

 

       （2）.class

              $(‘.mini’).css(“background”,”#bbffaa”);     

 

       （3）element 根据给定的元素名匹配元素

              $(‘div’).css(“background”,”#bbffaa”);

 

       （4）* 匹配所有元素

              $(‘div’).css(“background”,”#bbffaa”);

 

       （5）selector1，selector2，……，selectorN 将每一个选择器匹配到的元素合并后一起返回

              $(‘span, #two’).css(“background”,”#bbffaa”);

 

2. 层次选择器

 

       （1）$（“ancestor descendant”）选取ancestor元素里的所有descendant（后代）元素

$(‘body div’).css(“background”,”#bbffaa”);

 

       （2）$（“parent > child”） 选取parent元素下的child（子）元素，与$（“ancestor descendant”）有区别，$（“ancestor descendant”）选择的是后代元素

$(‘body > div’).css(“background”,”#bbffaa”);

 

       （3）$（’prev + next’） 选取紧接在prev元素后的next元素

$(‘.one + div’).css(“background”,”#bbffaa”);

              说明：改变class为one的下一个<div>兄弟元素背景颜色

              可以使用next（）方法来代替$（’prev + next’）选择器。

              $(‘.one + div’)与$(‘.one’).next(“div”)是等价的。

 

       （4）$（’prev ~ siblings’）选取prev元素之后的所有siblings元素

$(‘#two ~ div’).css(“background”,”#bbffaa”);

说明：改变id为two的元素后面的所有<div>兄弟元素背景颜色

              可以使用nextAll（）方法来代替$（’prev ~ siblings’）选择器。

$(‘#prev ~ div’)与$(‘#prev’).nextAll(“div”)是等价的。

注：$(‘#prev ~ div’)选择器只能选择“#prev ”元素后面的同辈<div>元素。而siblings()方法与前后位置无关，只要是同辈节点就都能匹配。

 

3. 过滤选择器

 

       3.1 基本过滤选择器

 

       过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。

 

       （1）:first 选取第1个元素

$(‘div:first’).css(“background”,”#bbffaa”);

 

       （2）:last 选取最后一个元素

$(‘div:last’).css(“background”,”#bbffaa”);

 

（3）:not(selector) 去除所有与给定选择器匹配的元素

$(‘div:not(.one)’).css(“background”,”#bbffaa”);

 

（4）:even 选取索引是偶数的所有元素，索引从0开始

$(‘div:even’).css(“background”,”#bbffaa”);

 

（5）:odd 选取索引是奇数的所有元素，索引从0开始

$(‘div:odd’).css(“background”,”#bbffaa”);

 

（6）:eq(index) 选取索引等于index的元素（index 从0开始）

$(‘div:eq(3)’).css(“background”,”#bbffaa”);

 

（7）:gt(index) 选取索引大于index的元素（index 从0开始）

$(‘div:gt(3)’).css(“background”,”#bbffaa”);

 

（8）:lt(index) 选取索引小于index的元素（index 从0开始）

$(‘div:lt(3)’).css(“background”,”#bbffaa”);

 

（9）:header 选取所有的标题元素，例如h1,h2,h3等等

$(‘:header’).css(“background”,”#bbffaa”);

 

（10）:animated 选取当前正在执行动画的所以元素

$(‘:animated’).css(“background”,”#bbffaa”);

 

3.2 内容过滤选择器

 

内容过滤选择器的过滤规则主要体现在它所包含的字元素或文本内容上。

 

（1）:contains(text) 选取含有文本内容为“text”的元素

$(‘div: :contains(di)’).css(“background”,”#bbffaa”);

 

（2）:empty 选取不包含子元素或者文本的空元素

$(‘div:empty’).css(“background”,”#bbffaa”);

 

（3）:has(selector) 选取含有选择器所匹配的元素的元素

$(‘div:has(.mini)’).css(“background”,”#bbffaa”);

 

（4）:parent 选取含有子元素或者文本的元素

$(‘div:parent’).css(“background”,”#bbffaa”);

 

3.3 可见性过滤选择器

 

（1）:hidden 选取所有不可见的元素

$(‘div:visible’).css(“background”,”#bbffaa”);

 

（2）:visible 选取所有可见的元素

$(‘div:hidden’).show(3000);

       在可见性选择器中，需要注意选择器:hidden，它不仅包括样式属性display为“none”的元素，也包括文本隐藏域（<input type=”hidden”/>）和visibility：hidden之类的元素。

 

       3.4属性过滤选择器

 

       （1）[attribute] 选取拥有此属性的元素

$(‘div[title]’).css(“background”,”#bbffaa”);

 

       （2）[attribute=value] 选取属性的值为value的元素

$(‘div[title = test]’).css(“background”,”#bbffaa”);

 

       （3）[attribute！=value] 选取属性的值不等于value的元素

$(‘div[title! = test]’).css(“background”,”#bbffaa”);

 

       （4）[attribute^=value] 选取属性的值以value开始的元素

$(‘div[title^ = test]’).css(“background”,”#bbffaa”);

 

       （5）[attribute$=value] 选取属性的值以value结束的元素

$(‘div[title$= test]’).css(“background”,”#bbffaa”);

 

       （6）[attribute*=value] 选取属性的值含有value的元素

$(‘div[title*= test]’).css(“background”,”#bbffaa”);

 

（7） [selector1] [selector2] [selectorN] 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围。

$(‘div[id] [title*=es]’).css(“background”,”#bbffaa”);

 

3.5 子元素过滤选择器

 

（1）:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素.(index从1算起)

$(‘ :nth-child(2)’).css(“background”,”#bbffaa”);

 

（2）:first-child 选取每个父元素的第1个子元素

$(‘:first-child’).css(“background”,”#bbffaa”);

 

（3）:last-child 选取每个父元素的最后一个子元素

$(‘:last-child’).css(“background”,”#bbffaa”);

 

（4）:only-child 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配

$(‘:only-child’).css(“background”,”#bbffaa”);

 

注意：eq(index)只匹配一个元素，nth-child(index)可以匹配多个。eq(index)中的index从0开始，nth-child(index)中的index从1开始。同理，:first和:first-child, :last和:last-child也类似。

 

       3.6 表单对象属性过滤选择器

 

       （1）:enabled 选取所有可用元素

$(“#form1 input:enabled”).val(“这里变化了”);

 

       （2）:disabled 选取所有不可用元素

$(“#form1 input:disabled”).val(“这里变化了”);

 

       （3）:checked 选取所有被选中的元素（单选框，复选框）

              $(“input:checked”).length;

 

       （4）:selected 选取所有被选中的选项元素（下拉列表）

$(“#select : selected”).text();

 

4. 表单选择器

 

       （1）:input 选取所有的<input>、<textarea>、<select>和<button>元素。$(“:input”)

 

       （2）:text 选取所有的单行文本框

 

       （3）:password 选取所有的密码框

 

       （4）:radio 选取所有的单选框

 

       （5）:checkbox 选取所有的多选框

 

       （6）:submit 选取所有的提交按钮

 

       （7）:image 选取所有的图像按钮

 

       （8）:reset 选取所有的重置按钮

 

       （9）:button 选取所有的按钮

 

       （10）:file 选取所有的上传域

 

       （11）:hidden 选取所有不可见元素

       <input type=”botton/checkbox/radio/submit……”>

 

5.选择器中的一些注意事项

 

       5.1选择器中含有“.”、“#”、“（”或“]”等特殊字符

 

       需要转译：$(‘#id[1]’);需要转译为$(‘#id\[1\]’);

 

       5.2 属性选择器的@符号问题

 

       使用1.3.1以上的版本，不需要在属性前添加@符号。

 

       5.3 选择器中含有空格的注意事项

 

       选择器中的空格是不容忽视的，多一个或者少一个也许会得到截然不同的效果。

 

       var $t_a = $(‘.text :hidden’); //带空格的

       选取class为“text”的元素里面的隐藏元素。

var $t_a = $(‘.text:hidden’); //不带空格的

       选取隐藏的class为“text”的元素。