根据标签的属性id,class的值或者是标签的名字查找文档元素的功能称之为选择器。
选择器是jquery的根基,在jquery中,对事件的处理,遍历DOM,ajax操作等都依赖于选择器,熟练使用选择器,不仅能简化代码,而且可以达到事半功倍的效果。
jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。
通过Javascript改变html中元素效果之前首先要找到元素,采用jQuery选择器寻找元素简单快捷.
原生javascript代码:document.getElementById(‘myId’);
jQuery代码:$(‘#myId’)
遇到有循环的情况,优势更加明显:
例如:改变页面中所有的p标签的背景颜色为红色.
原生里面的做法:
jQuery里面的做法:
选择器的设计思想源于CSS,jQuery的选择器借鉴了CSS选择符号的语法规范.
不同的选择符号作用于不同的html元素.
jQuery借鉴了css选择器的用法。以下截图是jQuery全部的选择器:
根据标签名字,css类名或者id的名字查找符合条件的元素.
1.#id id选择器 2.Element 元素选择器 3..class class选择器 4.* 通配符选择器 5.selector1, selector2, selectorN 联合选择器,多个选择器使用,隔开
以上三种为最常见的选择器,其中ID选择器是效率最高的,在可能的情况下应该尽量使用它。
ancestor descendant(派生选择器) 在给定的祖先元素(ancestor)下匹配所有的后代元素(descendant).返回所有的后代元素. parent > child 在给定的父元素(parent)下匹配所有直接子元素(child),返回所有的直接子元素. prev + next 匹配紧接在 所有prev 元素后的 next(下一个) 元素,返回紧接的下一个元素.
prev ~ siblings 等同于nextAll()
匹配 prev 元素之后的所有 siblings 元素.返回之后的所有兄弟节点
根据给定的条件查找符合该条件的元素.
语法:
:first 用法: $(”tr:first”) ; 单个元素的组成的集合 匹配找到的第一个元素 :last 匹配找到的最后一个元素 :not(selector) 去除所有与给定选择器匹配的元素,not后面括号里面是一个选择的节点 :even 匹配所有索引值为偶数的元素,从 0 开始计数 :odd 匹配所有索引值为奇数的元素,从 0 开始计数 :eq(index) 匹配一个给定索引值的元素,从 0 开始计数 :gt(index) 匹配所有大于给定索引值的元素,从 0 开始计数 :lt(index) 匹配所有小于给定索引值的元素,从 0 开始计数 :header 匹配如 h1, h2, h3之类的标题元素
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本上.
语法:
:contains(text) 用法: $(”div:contains(’John’)”) 匹配包含给定文本的元素 :empty 用法: $(”td:empty”) 匹配所有不包含子元素或者文本的空元素 :has(selector) 用法: $(”div:has(p)”).addClass(”test”) 匹配含有选择器所匹配的元素的元素 :parent 用法: $(”td:parent”) 匹配含有子元素或者文本的元素 (空白的文本也算是有子元素)
查找隐藏或者显示的标签元素
:hidden
用法: $(”input:hidden”)
说明: 匹配所有的不可见元素
:visible
用法: $(”input:visible”)
匹配所有的可见元素
<style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> 代码如下: <body> <div> <p>Hello</p> </div> <div id="test">ID为test的DIV</div> <input type="checkbox" id="s1" name="football" value="足球" />足球 <input type="checkbox" name="volleyball" value="排球" />排球 <input type="checkbox" id="s3" name="basketball" value="篮球" />篮球 <input type="checkbox" id="s4" name="other" value="其他" />其他 </body>
1. [attribute]用法 定义:匹配包含给定属性的元素 代码如下: //查找所有含有ID属性的div元素 $("div[id]").addClass("highlight"); 2. [attribute=value]用法 定义:匹配给定的属性是某个特定值的元素 代码如下: //name属性值为basketball的input元素选中 $("input[name='basketball']").attr("checked",true); 3. [attribute!=value]用法 定义:匹配给定的属性是不包含某个特定值的元素 代码如下: //name属性值不为basketball的input元素选中 $("input[name!='basketball']").attr("checked",true); //此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]) $("input:not(input[name='basketball'])").attr("checked",true); 4. [attribute^=value]用法 定义:匹配给定的属性是以某些值开始的元素 代码如下: //查找所有 name 以 'foot' 开始的 input 元素 $("input[name^='foot']").attr("checked",true); 5. [attribute$=value]用法 定义:匹配给定的属性是以某些值结尾的元素 代码如下: //查找所有 name 以 'ball' 结尾的 input 元素 $("input[name$='ball']").attr("checked",true); 6. [attribute*=value]用法 定义:匹配给定的属性是以包含某些值的元素 代码如下: //查找所有 name 包含 'sket' 的 input 元素 $("input[name*='sket']").attr("checked",true); 7. [selector1][selector2][selectorN]用法 定义:复合属性选择器,需要同时满足多个条件时使用 代码如下: //找到所有含有 id属性,并且它的 name属性是以 ball结尾的 $("input[id][name$='ball']").attr("checked",true);
这里值得一提的是:nth-child(),这个选择器的详细功能如下
1、nth-child(even) 能选取每个父元素下的索引值是偶数的元素 2、nth-child(odd) 能选取每个父元素下的索引值是奇数的元素 3、nth-child(2) 能选取每个父元素下的索引值等于2的元素 4、nth-child(3n) 能选取每个父元素下的索引值等于3的倍数的元素,n从0开始 5、nth-child(3n+1) 能选取每个父元素下的索引值等于 (3n+1) 的的元素,n从0开始 6、特别注意系数为负数的情况:nth-child(-3n+8). 选择的包括第8 、第5、第2 个子元素,当3=3的时候 ,-3*3+8=-1,就结束选择了。
css选择器中:first-child与:first-of-type的区别 :first-child是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码: p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素; h1:first-child 匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个; span:first-child 匹配不到任何元素,因为在这里两个span元素都不是div的第一个子元素; :first-of-type是css3中定义的选择器,这个跟:first-child有什么区别呢?还是看那段代码: p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个; h1:first-of-type 匹配到的是h1元素,因为h1是div的所有类型为h1的子元素中的第一个; span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素,匹配到的是它们中的第一个。 所以,通过以上两个例子可以得出结论: :first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。 :first-of-type 匹配的是某父元素下某个类型的子元素中的第一个,比如 p:first-of-type,就是指某个盒子下的所有p元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。 同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。
根据表单对象的属性操作查找符合条件的表单元素对象.