jQuery选择器

1、jQuery选择器基本结构

$('选择器')
$('选择器 上下文')

• 1
• 2
• 3

2、使用基本css选择器

关于基本的css选择器可以看一下css选择器详解。这里列出几种最基本的使用css选择器的用法。

2.1 元素选择器

$('a'); //选择所有a元素
$('div');  //选择所有div元素
$('p');  //选择所有p元素

• 1
• 2
• 3
• 4

当然，如果你愿意，jQuery也允许我们使用逗号将多个选择器合并为一个选择器：

$('a,div,p');

• 1
• 2

这样得到了和上面3行代码相同的效果。

2.2 类选择器

$('div.myClass');  //所有拥有myClass类的div元素
$('p.myClass');  //所有拥有myClass类的p元素
$('*.myClass');  //拥有myClass类的所有类型元素

• 1
• 2
• 3
• 4

通常情况下，要选择拥有某一类的所有元素时，会省略掉通配符*，如下：

$('.myClass');  //拥有myClass类的所有类型元素

• 1
• 2

这样不会有任何不妥，也是我们常用的写法。

另外，某些元素可能拥有不止一个类:

$('div.myClass1.myClass2');

• 1
• 2

这样会选择同时拥有myClass1以及myClass2类的div元素。当然，被选中的div元素可能还拥有其他类，也就是说，以下div会毫无疑问地被选中：

<div class="myClass1 myClass2 myClass3">...</div>

• 1
• 2

2.3 ID选择器

$('table#myID');  //id为myID的table元素

• 1
• 2

通常在一个html页面中，一个元素只能拥有一个id，一个id也只能出现一次。

3、结合使用上下文选择器

3.1 后代选择器

从这里开始，开始一些稍有难度的选择，例如：

$('ul.myUl li');

• 1
• 2

这样会选择所有拥有myUl类的ul元素的li子元素。听起来很拗口。看下面的代码：

html

<ul class="myUl">
  <li><a href="#"></a>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
<ul>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

这里，通过$('ul.myUl li')，所有的li元素都将被选中，注意是所有的！因为所有的li元素均是<ul class="muUl">...</ul>的后代。不论你是直接后代，孙子代还是重孙子代。

事实上，上例还不足以完全说明所有拥有myUl类的ul元素的li子元素的含义。因为拥有myUl类的ul元素可能不止一个，如下：

html

<ul class="myUl">
  <li><a href="#"></a>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
<ul>

<ul class="myUl">
  <li>
    <ul>
      <li>一</li>
      <li>二</li>
      <li>三</li>
    </ul>
  </li>
<ul>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

$('ul.myUl li')同样会选择以上代码中所有的li元素。因为上述代码中所有li元素均是ul.myUl的子元素，虽然ul.myUl有2个。现在应该能理解所有拥有myUl类的ul元素的li子元素的含义了吧！

后代选择器其实不止能够选择某元素的后代，也可以选择某元素后代的后代(听起怎么有点别扭)，如下：

$('ul.myUl li a');

• 1
• 2

这样就选择了所有拥有myUl类的ul元素的所有li后代元素的所有a后代元素。虽然又多了一个xx的后代，不过和上面的分析是一个道理，就不赘述了。

3.2 直接子节点选择器

参考3.1中的代码。

$('ul.myUl > li');

• 1
• 2

选择所有拥有myUl类的ul元素的直接li元素。注意，这里不是所有而是直接子元素。孙子，重孙子li元素将不会被选取。

3.3 两种兄弟节点选择器

参考下面的代码：

html

<ul class="myUl">
  <li class="myLi1">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li class="myLi2">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </li>
  <li class="myLi3">
    <ul>
      <li>一</li>
      <li>二</li>
      <li>三</li>
    </ul>
  </li>
<ul>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

$('li.myLi1 + li');

• 1
• 2

选择拥有myLi1类的li元素后面的第一个兄弟li元素节点。选择的结果为<li class="myLi2">...</li>

对于某元素后面的第一个兄弟节点，有些方便的应用，比如在css选择器详解曾经说过的例如你想在一个h2标题后面的段落应用某种独到的样式或者希望在某类p段落后的table上添加一个额外的边距等等。

如果你想拥有更加灵活的兄弟节点选择方式，可以使用以下的语法：

$('li.myLi1 ~ li[class="myLi3"]');

• 1
• 2

这样，我们就选择到了[<li class="myLi3">...</li>]。

上面的中括号看起来有些陌生，就是我们下面要说的特性选择器。

如果没有给上面的兄弟选择器指定条件，则会选择其后所有兄弟节点：

$('li.myLi1 ~ li');

• 1
• 2

会选择[<li class="myLi2">...</li>,<li class="myLi3">...</li>]。

4、使用特性选择器

特性选择器十分强大，它的语法是用一个中括号表示的。例如:

$('img[alt]');  //拥有alt特性的img元素节点
$('form[method]');  //拥有method特性的form元素节点

• 1
• 2
• 3

如果你希望指定这些特性的具体值来精确化选择，可以使用以下的方法：

$('input[type="text"]');  //type特性值为text的所有input元素
$('a[href="http://jquery.com"]');  //href为"http://jquery.com"的a元素

• 1
• 2
• 3

如果你想进一步，使用部分匹配的方式进行节点选择，请看下面的例子：

头匹配：

$('a[href^="http://"]');  

• 1
• 2

href以”http://”开头的a元素节点。

$('div[title^="my"]');  

• 1
• 2

所有title特性以”my”开头的div元素。

尾匹配：

$('a[href$=".pdf"]');  

• 1
• 2

href以”.pdf”结尾的a元素节点。

$('div[title$="ed"]');  

• 1
• 2

所有title特性以”ed”结尾的div元素。

任意匹配：

$('a[href*="jquery"]');  

• 1
• 2

所有herf特性中包含jquery字符串的a元素。

不等匹配：

$('img[alt!="frontImg"]');  

• 1
• 2

所有alt特性不等于frontImg的img元素。

5、使用过滤选择器

过滤选择器是通过过滤一个基础选择器来实现的。它的基本语法用一个冒号表示。我们来看具体的例子。

5.1 位置过滤器

有的时候，希望根据元素在页面中的位置或者其相对于其他元素的位置来选择元素。这时将会用到位置选择器。

$('div.myClass a:first');  

• 1
• 2

选择所有div.myClass所有子节点中的第一个a元素。

$('div.myClass a:last');  

• 1
• 2

选择所有div.myClass所有子节点中的最后一个a元素。

$('div.muClass p:odd');  

• 1
• 2

选择所有div.myClass所有子节点中奇数段落元素。

$('div.myClass p:even');  

• 1
• 2

选择所有div.myClass所有子节点中偶数段落元素。

注意，这里如果省略掉前面的基础选择器，它会默认为*。

接下来内容我们结合一小段代码来看：

html

<table id="myTable">    
  <thead>
    <tr>
      <th>Language</th>
      <th>Type</th>
      <th>Invented</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Java</td>
      <td>CS</td>
      <td>2010</td>
    </tr>
    <tr>
      <td>English</td>
      <td>Lang</td>
      <td>2015</td>
    </tr>
    <tr>
      <td>Calculus</td>
      <td>Math</td>
      <td>2011</td>
    </tr>
  </tbody>
</table>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

$('table#myTable td:first-child');

• 1
• 2

选取以上所有作为第一个子节点的td元素。也就是[<td>Java</td>,<td>English</td>],<td>Calculus</td>

$('table#myTable td:last-child');

• 1
• 2

选取以上所有作为最后一个子节点的td元素。也就是[<td>2010</td>,<td>2015</td>],<td>2011</td>

$('table#myTable td:nth-child(1)');

• 1
• 2

选取以上所有作为第1个子节点的td元素。也就是[<td>Java</td>,<td>English</td>],<td>Calculus</td>

特别强调nth-child(1)的下标从1开始！再比如：

$('table#myTable td:nth-child(3)');

• 1
• 2

选取以上所有作为第3个子节点的td元素。也就是[<td>2010</td>,<td>2015</td>],<td>2011</td>

$('table#myTable td:nth-child(even)');

• 1
• 2

选取以上所有作为偶数子节点的td元素。也就是[<td>CS</td>,<td>Lang</td>],<td>Math</td>

$('table#myTable td:nth-child(even)');

• 1
• 2

选取以上所有作为奇数子节点的td元素。

还有一个特别有意思的位置选择器:nth-child(Xn+Y):

$('table#myTable td:nth-child(3n)');

• 1
• 2

选取以上所有能被3整除的子td元素。即作为第3n个子节点存在的td元素。注意，没有0号元素！

$('table#myTable tr:nth-child(2n+1)');

• 1
• 2

作为第2n+1个子节点存在的td元素。注意这里包含第1个元素。

$('table#myTable tr:eg(0)');

• 1
• 2

table#myTable子元素中第1个tr元素。注意，这里的下标是从0开始的！不同于上面的nth-child(n)。另外要注意，这里结果为<td>Java</td>而不是[<td>Java</td>,<td>English</td>],<td>Calculus</td>，也就是说它只会选取table#myTable子元素中第1个tr元素。

$('table#myTable tr:gt(1)');

• 1
• 2

table#myTable子元素中第2个tr元素之后的所有tr元素。不包含第2个tr。

$('table#myTable tr:lt(1)');

• 1
• 2

table#myTable子元素中第2个tr元素之前的所有tr元素。不包含第2个tr。也就是<td>Java</td>。

5.2 css及部分jQuery自定义过滤器

$(':button');  //所有按钮元素
$(':checkbox');  //所有复选框元素
$(':radio');  //所有单选框元素
$(':reset');  //所有input[type=reset]元素
$(':submit');  //所有input[type=submit]元素
$(':text');  //所有input[type=text]元素
$(':password');  //所有input[type=password]的元素
$(':image');  //所有图片输入元素input[type=image]
$(':file');  //所有文件输入元素input[type=file]
$(':visible');  //所有可见元素
$(':checked');  //所有处于选中状态的复选框或单选按钮元素
$(':contains(hello)');  //所有包含文本hello的元素
$(':animated');  //所有处于动画状态的元素
$(':disabled');  //所有处于禁用状态的元素
$(':enabled');  //所有处于启用状态的元素
$(':header');  //所有标题元素h1~h6
$(':hidden');  //所有隐藏元素
$(':input');  //所有表单元素
$(':parent');  //所有拥有子节点的元素
$(':selected');  //所有处于选中状态的option元素

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

示例:

$('form#register input:checkbox');

• 1
• 2

id为register的form中的复选框元素。

事实上，以上过滤器可以组合使用：

$('form#register input:checkbox:checked');

• 1
• 2

id为register的form的复选框元素中被选中的按钮元素。

$('form#register input:contains(my)');

• 1
• 2

form#register中包含文本”my”的input元素。

5.3 :has过滤器

选择拥有某种特性的元素。

$('tr:has(a)');

• 1
• 2

选取所有包含a子元素的tr行元素。

$('div:has(img[href*="beauty"])');

• 1
• 2

选取包含img[href*="beauty"]的div元素。

5.4 :not过滤器

$("img:not([src*=beauty])");

• 1
• 2

选取所有src中不包含字符串”beauty”的img元素。

$(input:not(:checkbox));

选取所有非复选框的input元素。