JQuery选择器

简介

选择器：用于选取页面上的元素对象。jQuery选择器完全继承了CSS选择器的方式。(学会了css的选择器就会jQuery的选择器了)

jQuery选择器是学习jQuery的基础。

在此之前Dom中如何获取页面元素呢？

document.getElementById(‘id’);

document.getElementsByTagName(‘input’);

document.getElementsByName(‘gender’);

是不是很麻烦呢？

选择器介绍

1.ID选择器

$(‘#id’);

2.类名选择器 

$( '.cls' );

3.标签选择器 

$(‘input’)【$(‘*’);选择页面上的所有元素。】

4.属性过滤选择器

$(‘*[name=gender]’)或$(‘[name=gender]’)

5.多条件选择器 

多条件选择器：$(“p,div,span.cls”)，同时选择p标签、div标签和拥有cls样式的span标签元素。

5.层次选择器 

（1）后代:            $('div li').css('backgroundColor', 'red')

                           获取div下的所有li元素（后代，子、子的子……）

（2）子元素:         $('div>li').css('backgroundColor', 'red');

       获取div下的直接li子元素 【必须是直接子元素】

（3）相邻元素1:    $('div+span').css('backgroundColor', 'red');

       这个元素后紧跟着的第一个元素

（4）相邻元素2:    $('div~span').css('backgroundColor', 'red');

       这个元素后跟着的所有元素

注意：选择器表达式中的空格不能多不能少。易错！过滤器与表单选择器时注意。

6.基本过滤选择器

（1） :first 选取第一个元素。$("div:first")选取第一个<div>

（2） :last 选取最后一个元素。$("div:last")选取最后一个<div>

（3） :not(选择器) 选取不满足“选择器”条件的元素，

$("input:not(.myClass)")   选取样式名不是myClass的<input>

（4） :even、:odd，选取索引是偶数、奇数的元素：

$("input:even")选取索引是奇数的<input>

（5） :eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素，

          $("input:lt(5)")选取索引小于5的<input>

（6） $(":header")选取所有的h1……h6元素（*）

7.表单对象属性过滤选择器

属性过滤选择器：

$('#dv input[name]');得到所有有name属性的元素

$('#dv input[name=txt1]');得到name为txt1的元素

$('#dv input[name!=txt1]');得到name不为txt1的元素

还可以选择开头【name^=值】、结束【 name$=值】、包含【 name*=值】等，条件还可以复合。【[属性1=a][属性2=b]…】（*）

表单对象属性选择器（过滤器）：

$("#form1 :enabled")选取id为form1的表单内所有启用的元素

$("#form1 :disabled")选取id为form1的表单内所有禁用的元素

$(“input:checked”)选取所有选中的元素（Radio、CheckBox）,这个中间不能加空格.

$("select :selected")选取所有选中的选项元素（下拉列表）

$(“:input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得<input>

$(“:text”)选取所有单行文本框，等价于

$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);

$(“:password”)选取所有密码框。

同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

代替了$(‘input[type=***]’);

8.子元素过滤器

:first-child,与:fisrt的区别,:first只能选取第一个，而:first-child，则能选取每个子元素的第一个元素。

$(‘ul li:first’);只返回一个li元素。

$(‘ul li:first-child’);//为每个父元素（ul）都返回一个li。

:last-child

:only-child,匹配当前父元素中只有一个子元素的元素。

:nth-child,对比eq()来理解，eq()值匹配一个，nth-child()为每个父元素都要匹配一个子元素。

:nth-child(index),index从1开始。

:nth-child(even)

:nth-child(odd)

:nth-child(3n),选取3的倍数的元素

:nth-child(3n+1),满足3的倍数+1的元素。

.children()方法,只考虑子元素，不考虑后代元素。

9.其他过滤器

可见性过滤器：

:hidden

选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….)

1.表单元素type=“hidden”(表示的是隐藏域)

2.设置css的display:none

3.高度和宽度明确设置为0的元素。

4.父元素时隐藏的，所以子元素也是隐藏的

visibility: hidden 与opacity为0不算，因为还占位所以不认为是hidden:visible选取所有可见元素

内容过滤器：

:contains(text),过滤出包含给定文本的元素。(innerText中包含。)

:empty,过滤出所有不包含子元素或者文本的空元素。

:has(selector),过滤出元素中包含（即子元素中）selector选择器能选择到的元素。

:parent,过滤出可以当做父元素的元素（即该元素有子元素或者元素中包含文本。）

获取兄弟元素的几个方法

1.下一个

next();      //当前元素之后的紧邻着的第一个兄弟元素（下一个）

2.下一堆 

nextAll();  //当前元素之后的所有兄弟元素

3.上一个 

prev();      //当前元素之前的紧邻着的兄弟元素（上一个）

4.上一堆 

prevAll();  //当前元素之前的所有兄弟元素

5.所有兄弟 

siblings();//当前元素的所有兄弟元素