JQuery选择器总结

浏览数：21 / 时间：2015年06月09日

JQuery选择器：

一、Basic（基础选择器）

"*"所有元素
"#id"有指定ID的元素
".class"有指定class的元素、".class.class"有指定的2个class的元素
"element"选取指定的element(元素)
"selector1, selector2, selector3"复合选择器

例如：

HTML：

  
    1
    <div 
id="one" 
class="menu">123</div>


  
    2
    <div 
id="two" 
class="menu">456</div>


  
    3
    <p 
class="title1 title2">0</p>

JQuery代码：

  
    1
    $("*")

    2
    $("#one")

    3
    $(".menu")

    4
    $(".title1.title2")

    5
    $("div")

    6
    $("#one,.title1.title2")

结果：

  
    1
    [<div id="one" 
class="menu">123</div>,<div id="two" 
class="menu">456</div>,<p class="title1 title2">0</p>]

    2
    [<div id="one" 
class="menu">123</div>]

    3
    [<div id="one" 
class="menu">123</div>,<div id="two" 
class="menu">456</div>]

    4
    [<p class="title1 title2">0</p>]

    5
    [<div id="one" 
class="menu">123</div>,<div id="two" 
class="menu">456</div>]

    6
    [<div id="one" 
class="menu">123</div>,<p class="title1 title2">0</p>]

二、

":first"获取第一个元素
":last"获取最后一个元素
":even"获取奇数行的元素
":odd"获取偶数行的元素
":eq(index)"获取给定索引值的元素
":gt(no)"获取大于给定索引值(从0开始)的元素
":lt"获取所有小于给定索引值(从0开始)的元素
":not(selector)"获取去除所有与给定选择器匹配的元素

例如：

HTML：

  
    1
    <table>

    2
      <tr><td>Value 1</td></tr>

    3
      <tr><td>Value 2</td></tr>

    4
      <tr><td>Value 3</td></tr>

    5
      <tr><td>Value 4</td></tr>

    6
      <input 
name="apple"/>

    7
      <input 
name="orange" 
checked="checked" 
/>

    8
    </table>

JQuery代码：

  
    1
    $("tr:first")

    2
    $("tr:last")

    3
    $("tr:even")

    4
    $("tr:odd")

    5
    $("tr:eq(3)")

    6
    $("tr:gt(0)")

    7
    $("tr:lt(2)")

    8
    $("input:not(:checked)")

结果：

  
    1
    [<tr><td>Value 1</td></tr>]

    2
    [<tr><td>Value 4</td></tr>]

    3
    [<tr><td>Value 1</td></tr>,<tr><td>Value 3</td></tr>]

    4
    [<tr><td>Value 2</td></tr>,<tr><td>Value 4</td></tr>]

    5
    [<tr><td>Value 3</td></tr>]

    6
    [<tr><td>Value 2</td></tr>,<tr><td>Value 3</td></tr>,<tr><td>Value 4</td></tr>]

    7
    [<tr><td>Value 1</td></tr>,<tr><td>Value 2</td></tr>]

    8
    [<input name="apple"/>]

三、

"[attribute]"获取包含给定属性的元素
"[attribute = value]"获取给定的属性是某个特定值的元素
"[attribute != value]"获取所有不含有指定的属性，或者属性不等于特定值的元素
"[attribute ^= value]"获取给定的属性是以某些值开始的元素
"[attribute $= value]"获取给定的属性是以某些值结尾的元素
"[attribute *= value]"获取给定的属性是以包含某些值的元素
"[selector1][selector2][selector3]"复合属性选择器
"[attribute |= value]"获取指定的属性等于"value"值的元素，或者给定值value后面紧跟着"-"的元素（例子待增加）
"[attribute ~= value]"获取指定的属性等于"value"值的元素，且是被空格划分开的（例子待增加）

例如：

HTML：

  
    1
    <input 
id="lily" 
name="abcd"/>

    2
    <input 
name="12345"/>

    3
    <input 
id="jose"/>

JQuery代码：

  
    1
    $("input[name]")

    2
    $("input[name=‘abcd‘]")

    3
    $("input[name!=‘abcd‘]")

    4
    $("input[name^=‘ab‘]")

    5
    $("input[name$=‘345‘]")

    6
    $("input[name*=‘os‘]")

    7
    $("input[id][name]")

结果：

  
    1
    [<input id="lily" 
name="abcd"/>,<input name="12345"/>]

    2
    [<input id="lily" 
name="abcd"/>]

    3
    [<input name="12345"/>]

    4
    [<input id="lily" 
name="abcd"/>]

    5
    [<input name="12345"/>]

    6
    [<input id="jose"/>]

    7
    [<input id="lily" 
name="abcd"/>]

四、

":input"获取所有 input, textarea, select 和 button 元素
":text"获取所有的单行文本框
":password"获取所有密码框
":radio"获取所有单选按钮
":checkbox"获取所有复选框
":submit"获取所有提交按钮
":reset"获取所有重置按钮
":image"获取所有图像域
":button"获取所有按钮
":file"获取所有文件域

五、

":hidden"获取所有隐藏元素
":visible"匹配所有的可见元素
":enabled"获取所有可用元素
":disabled"获取所有不可用元素
":checked"获取所有选中的被选中元素(复选框、单选框等，不包括select中的option)
":selected"获取所有选中的option元素

例如：

HTML：

  
    1
    <input 
type="hidden" 
name="12345"/>

    2
    <input 
disabled="disabled" 
name="12345"/>

    3
    <input 
type="checkbox" 
checked="checked" 
name="12345"/>

    4
    <select>

    5
      <option 
value="1">1111</option>

    6
      <option 
value="2" 
selected="selected">2222</option>

    7
    </select>

JQuery代码：

  
    1
    $("input:hidden")

    2
    $("input:visible")

    3
    $("input:enabled")

    4
    $("input:disabled")

    5
    $("input[type=‘checkbox‘]:checked")

    6
    $("select option:selected")

结果：

  
    1
    [<input type="hidden" 
name="12345"/>]

    2
    [<input disabled="disabled" 
name="12345"/>,<input type="checkbox" 
checked="checked" 
name="12345"/>]

    3
    [<input type="hidden" 
name="12345"/>,<input type="checkbox" 
checked="checked" 
name="12345"/>]

    4
    [<input disabled="disabled" 
name="12345"/>]

    5
    [<input type="checkbox" 
checked="checked" 
name="12345"/>]

    6
    [<option value="2" 
selected="selected">2222</option>]

六

"ancestor descendant"在给定的祖先元素下匹配所有的后代元素
"parent > child"在给定的父元素下匹配所有的子元素
"prev + next"匹配所有紧接在 prev 元素后的 next 元素
"prev ~ siblings"匹配 prev 元素之后的所有 siblings(兄弟姐妹一家亲) 元素

例如：

HTML：

  
    1
    <form>

    2
        <label>Name:</label>

    3
        <input 
name="first" 
/>

    4
        <div>

    5
            <label>Age:</label>

    6
            <input 
name="age" 
/>

    7
        </div>

    8
    </form>

    9
    <input 
name="outter" 
/>

JQuery代码：

  
    1
    $("form input")

    2
    $("form > input")

    3
    $("label + input")

    4
    $("form ~ input")

结果：

  
    1
    [<input name="first" 
/>,<input name="age" 
/>]

    2
    [<input name="first" 
/>]

    3
    [ <input name="first" 
/>,<input name="age" 
/>]

    4
    [<input name="outter" 
/>]

七、

":header"匹配如 h1, h2, h3之类的标题元素
":animated"匹配所有正在执行动画效果的元素
":focus"匹配当前获取焦点的元素
":contains(text)"匹配包含给定文本的元素
":empty"匹配所有不包含子元素或者文本的空元素
"has(selector)"匹配含有选择器所匹配的元素的元素
":parent(selector)"匹配含有子元素或者文本的元素，注意不要和parent()方法混淆

例如：

HTML：

  
    1
    <div>

    2
        <h1>Header 1 Zhao</h1>

    3
        <p>Contents 1 Qian</p>

    4
    </div>

    5
    <h2></h2>

    6
    <p></p>

JQuery代码：

  
    1
    $(":header")

    2
    $("h1:contains(‘Zhao‘)")

    3
    $("p:empty")

    4
    $("div:has(h1)")

    5
    $("h1:parent")

结果：

  
    1
    [<h1>Header 1 Zhao</h1>,<h2></h2>]

    2
    [<h1>Header 1 Zhao</h1>]

    3
    [<p></p>]

    4
    [<div><h1>Header 1 Zhao</h1><p>Contents 1 Qian</p></div>]

    5
    [<h1>Header 1 Zhao</h1>]

八

":nth-child(no)"匹配其父元素下的第n个子或奇偶元素

备注：":eq(index)" 只匹配一个元素，而":nth-child"将为每一个父元素匹配子元素。":nth-child()"从1开始，而":eq(index)"是从0算起的！可以使用":nth-child(even)"、":nth-child(odd)"、":nth-child(3n)"、":nth-child(2)"、":nth-child(3n+1)"、":nth-child(3n+2)"
":first-child"匹配第一个子元素
":last:child"匹配最后一个子元素
":only-child"如果某个元素是父元素中唯一的子元素，那将会被匹配；如果不是，则不会被匹配

例如：

HTML：

  
    01
    <ul>

    02
        <li>1111</li>

    03
        <li>2222</li>

    04
        <li>3333</li>

    05
    </ul>

    06
    <ul>

    07
        <li>4444</li>

    08
        <li>5555</li>

    09
        <li>6666</li>

    10
    </ul>

    11
    <ul>

    12
        <li>0000</li>

    13
    </ul>

JQuery代码：

  
    1
    $("ul li:nth-child(2)")

    2
    $("ul li:first-child")

    3
    $("ul li:last-child")

    4
    $("ul li:only-child")

结果：

  
    1
    [<li>2222</li>,<li>5555</li>]

    2
    [<li>1111</li>,<li>4444</li>]

    3
    [<li>3333</li>,<li>6666</li>]

    4
    [ <li>0000</li>]