Jquery入门——选择器

 

Jquery入门——选择器

1基本选择器

2层次选择器

3过滤选择器

4表单选择器

 

1.基本选择器：

(1)根据给定的ID匹配一个元素 :$(“#id”)

(2)根据给定的类名匹配元素：$(“.class”)

(3)根据给定的元素名匹配元素：$(“p”) 选取所有<P>元素

(4)匹配所有元素：$(“*”)

(5)将每一个选择器匹配到的元素合并到一起：$(“div,span,p.myClass”) 选取所有<div>,<span>和class为myClass的<p>标签的一组元素。

 

2.层次选择器

（1）选取 A元素 里的所有后代元素:$(“div span”) 选择div里所有<span>元素

（2）选取parent元素下的child(子元素) $(“div > span”) 选取<div>下元素名是<span>的子元素。

（3）选取紧接在prev元素后的next元素：$(“.one+div”) 选取class为one 的下一个<div>y元素    $(“.one”).next(“div”)

（4）选取prev之后的所有元素：$(“#two~div”) 或$(“#two”).nextAll

 

3.过滤选择器

（1）选取第一个元素。 $(“div:first”) 选取所有<div>元素中第一个<div>元素

(2)选取最后一个元素。  $(“div:last”) 选取所有<div>元素中最后一个<div>元素

（3）去除所有与给定元素匹配的元素。 $(“input:not(.myClass)”) 选取class不是myclassd <input>元素。

（4）选取索引是偶数的元素。 $(“input:even”)

(5)选取索引是奇数的元素。$(“input:odd”);

(6)选取索引等于index的元素：$(“input:eq(1)”)  索引等于1的元素。

（7）选取索引大于index的元素。$(“input:gt(3)”) 索引大于3的元素，不包括3

（8）选取索引小于index的元素。 $(“input:lt(4)”) 索引小于4的元素，不包括4.

（9）选取所有标题元素：$(“:header”)  h1,h2,h3….

(10)选取正在执行动画的所有元素： $(“div:animated”)

 

内容过滤选择器

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

（2）    选取不包含子元素，或者文本的空元素。$(“div:empty”)

（3）    选取含有选择器所匹配的元素的元素。 $(“div:has(p)”) 选取含有<p>元素的<div>

（4）    选取含有子元素或者文本的元素。$(“div:parent”)

可见性过滤器

（1）    选取所有不可见元素 ：$(“:hidden”) 包括 <input type=hidden>

（2）    选取所有可见元素：$(“div:visble”)

属性过滤选择器

（1）    选取拥有此属性的元素 $(“div[id]”)

（2）    选取属性值为Value的元素 $(“div[title=test]”)

（3）    选取属性的值不等于value的元素 $(“div[title!=test]”)

（4）    选取属性的值以value开头的元素。$(“div[title^=t]”)

（5）    选取属性的值以value结尾的元素。$(“div[title$=t]”)

（6）    选取属性的值含有value的元素。 $(“div[title*=test]”)

（7）    用属性选择器合并成一个复合属性选择器。 $(“div[id][title^=t]”) 包含id属性，并且 title首字符 为 t

 子元素过滤选择器

（1）:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素  :eq(index)只匹配一个元素。

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

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

（4）:only-child   $(“ul li:only-child”)在<ul>中选取是唯一子元素的<li>元素。

表单对象属性过滤选择器

（1）    $(“#form1 :enabled”) 选取id为form1表单中的所有可用元素

（2）    $(“#form1 :disabled”) 选取id为form1的表单内的所有不可用元素。

（3）    $(“input:checked”) 选取所有被选择中的 <input>元素

（4）    $(“select :select”) 选取所有被选中的选项元素。

4.表单选择器

（1）：input  选取所有input元素

(2) :text    选取单行文本框

(3) :password 选取密码框  $(“:password”)

(4) :radio    单选框

(5) :checkbox 多选框

(6) :submit    提交按钮

(7) :image     图片

(8) :reset     重置

(9) :button    按钮

(10) :file     上传

(11) :hidden    不可见元素