jQuery选择器一、jQuery选择器的特点 1、 JQ选择器继承了CSS选择器的优点,CSS选择器是找到元素后加样式

jQuery选择器是jQuery的根基，对事件处理、DOM遍历都离不开JQ选择器

一、jQuery选择器的特点

1、 JQ选择器继承了CSS选择器的优点,CSS选择器是找到元素后加样式，JQ选择器找到元素后加行为，JQ选择器完全支持CSS1,CSS2,CSS3的所有特性。

2、完善的处理机制。

二、jquery选择器

One、基本选择器

1.1、id选择器(指定id元素) $("#idName").css(...)

1.2、class选择器(遍历css类元素) $(".className").css(...)

1.3、element选择器(遍历html元素) $("p").css(...)

1.4、* 号选择器(遍历所有元素) $("*").css(...)

1.5、并列选择器(群组选择器) $("p,div,ul,li").css(...)

Two、层次选择器

2.1、parent>child (直系子元素) $("ul>li").css(...)

2.2、prev + next (下一个兄弟元素等同于next( )方法)

例如: $(".item + div").css(...) 等同于 $(".item").next("div").css(...)

2.3、prev ~ siblings (元素后面的所有兄弟元素，等同于 nextAll( )方法)

例如: $(".item ~ div").css(...) 等同于 $(".item").nextAll("div").css(...)

Three、过滤选择器

3.1、基本过滤选择器

1.1、:first 和 :last (取第一个元素或最后一个元素)

例如: $("li:first").css("color","white")

例如: $("li:last").css("color","white")

1.2、:not (取非...的元素)

例如: $("div:not(.wrap)").css("color","white")

1.3、:even 和 :odd (取奇偶元素，索引值从 0 开始， even 偶数，odd 奇数)

例如: $("tr:odd").css("color","red");//奇数行字体颜色

例如: $("tr:even").css("color","blue");//偶数行字体颜色

1.4、:eq(x) (取指定索引的颜色)

例如: $("li:eq(0)").css("color","blue");//第一个li的字体颜色为蓝色

1.5、:gt(x) 和 :lt(x) (取大于 x 和小于 x 索引的元素)

例如: $("li:gt(5)").hide()

例如: $("li:lt(5)").show()

1.6、 :header (取 h1 - h6 的元素)

例如: $(":header").css("background","blue")

3.2、内容过滤选择器

2.1、:contains(text) (取包含 text 文本的元素)

例如: $("li:contains("JavaScript")").css("display","block")

2.2、:empty (取不包含子元素或文本为空的元素)

例如: $("li:empty").html("没有内容")

2.3、:has(selector) (取选择器匹配的元素)

例如: $("div:has(span)").css("display","none")

2.4、:parent(取包含子元素或文本的元素)

例如: $("ol li:parent").css("border","1px solid black")

1  <ol>
2    <li></li>
3    <li>A</li>
4    <li></li>
5    <li>D</li>
6  </ol>

3.3、可见性过滤选择器

3.1、:hidden(取不可见的元素)

例如: $("div:hidden").show() //display:none;或者<input type="hidden">

3.2、visible(取可见的元素) //dispaly:block;

例如: $("div:visible").hide()

3.4、属性过滤选择器

4.1、[attribule] (取拥有 attribute 属性的元素)

例如: $("a[title]").css("display","block")

4.2、[attribute = value] 和 [attribute ！= value] (取 attribute 属性值等于或不等于 value 的元素)

例如: $("a[class=item]").css(...)

例如: $("a[class!=item]").css(...)

4.3、[attribute ^= value], [attribute $= value] 和 [attribute *= value]（^attribute 属性值以 value 开始，以 value 结束，或包含 value 值）

例如: $('a[title^=jQuery]').css('font-weight', 'bold');

$('a[title$=jQuery]').css('font-size', '24px');

$('a[title*=jQuery]').css('text-decoration', 'line-through');

4.4、[selector1][selector2] （复合型属性过滤器，同时满足多个条件）

如: $('a[title^=jQuery][class=item]').hide();

3.5、子元素过滤选择器

5.1、:first-child 和:last-child 取第一个/最后一个元素

5.2、:only-child 当某个元素是父元素唯一的子元素时...

如： $('div:only-child').css('border','1px solid #FF0000').css('width','200px');

5.3、:nth-child

:nth-child 有三种用法：

:nth-child(x)，获取第 x 个子元素
:nth-child(even)和:nth-child(odd)，从 1 开始，获取第偶数个元素或第奇数\个元素
:nth-child(xn+y)，x>=0，y>=0。例如 x = 3, y = 0 时就是 3n，表示取第\3n 个元素（n>=0）。实际上 xn+y 是上面两种的通项式。（当 x=0,y>=0 时，\等同于:hth-child(x)；当 x=2,y=0 时，等同于nth-child(even)；当 x=2,y=1 时，\等同于:nth-child(odd)）

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

6.1、:enabled 和:disabled（取可用或不可用元素）

:enabled 和:diabled 的匹配范围包括 input, select, textarea

$(':disabled').css('border', '1px solid #0000FF');

6.2、:checked （取选中的单选框或复选框元素）

更改边框或背景色仅在 IE 下有效果，chrome 和 firefox 不会改变，但是 alert 都会弹出来

6.3、:selected （取下拉列表被选中的元素）

如alert($(':selected').val());

四、表单选择器

4.1、:input （取 input,textarea,select,button 元素）

如alert($(':input).val());

4.2、:text（取单行文本框元素）同$('input[type=text]')

:password（取密码框元素）同$('input[type=password]')

4.3、:radio（取单选框元素）

4.4、:checkbox（取复选框元素）

:checkbox 选择器和属性选择器$('input[type=checkbox]')等同

4.5、:submit（取提交按钮元素）

:submit 选择器和属性选择器$('input[type=submit]')等同

4.6、:reset（取重置按钮元素）

:reset 选择器和属性选择器$('input[type=reset]')等同

4.7、:button（取按钮元素）

:button 选择器和属性选择器$('input[type=button]')等同

4.8、:file（取上传域元素）

:file 选择器和属性选择器$('input[type=file]')等同

4.9、:hidden（取不可见元素）

:hidden 选择器和属性选择器$('input[type=hidden]')等同