JQuery选择器总结

jopen 10年前

JQuery选择器：

一、

  1. "*"所有元素

  2. "#id"有指定ID的元素

  3. ".class"有指定class的元素、".class.class"有指定的2个class的元素

  4. "element"选取指定的element(元素)

  5. "selector1, selector2, selector3"复合选择器

例如：

HTML：

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

JQuery代码：

$("*")  $("#one")  $(".menu")  $(".title1.title2")  $("div")  $("#one,.title1.title2")

结果：

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

 

二、

  1. ":first"获取第一个元素

  2. ":last"获取最后一个元素

  3. ":even"获取奇数行的元素

  4. ":odd"获取偶数行的元素

  5. ":eq(index)"获取给定索引值的元素

  6. ":gt(no)"获取大于给定索引值(从0开始)的元素

  7. ":lt"获取所有小于给定索引值(从0开始)的元素

  8. ":not(selector)"获取去除所有与给定选择器匹配的元素

例如：

HTML：

<table>    <tr><td>Value 1</td></tr>    <tr><td>Value 2</td></tr>    <tr><td>Value 3</td></tr>    <tr><td>Value 4</td></tr>    <input name="apple"/>    <input name="orange" checked="checked" />  </table>

JQuery代码：

$("tr:first")  $("tr:last")  $("tr:even")  $("tr:odd")  $("tr:eq(3)")  $("tr:gt(0)")  $("tr:lt(2)")  $("input:not(:checked)")

结果：

[<tr><td>Value 1</td></tr>]  [<tr><td>Value 4</td></tr>]  [<tr><td>Value 1</td></tr>,<tr><td>Value 3</td></tr>]  [<tr><td>Value 2</td></tr>,<tr><td>Value 4</td></tr>]  [<tr><td>Value 3</td></tr>]  [<tr><td>Value 2</td></tr>,<tr><td>Value 3</td></tr>,<tr><td>Value 4</td></tr>]  [<tr><td>Value 1</td></tr>,<tr><td>Value 2</td></tr>]  [<input name="apple"/>]


三、

  1. "[attribute]"获取包含给定属性的元素

  2. "[attribute = value]"获取给定的属性是某个特定值的元素

  3. "[attribute != value]"获取所有不含有指定的属性，或者属性不等于特定值的元素

  4. "[attribute ^= value]"获取给定的属性是以某些值开始的元素

  5. "[attribute $= value]"获取给定的属性是以某些值结尾的元素

  6. "[attribute *= value]"获取给定的属性是以包含某些值的元素

  7. "[selector1][selector2][selector3]"复合属性选择器

例如：

HTML：

<input id="lily" name="abcd"/>  <input name="12345"/>  <input id="jose"/>

JQuery代码：

$("input[name]")  $("input[name='abcd']")  $("input[name!='abcd']")  $("input[name^='ab']")  $("input[name$='345']")  $("input[name*='os']")  $("input[id][name]")

结果：

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


四、

  1. ":input"获取所有 input, textarea, select 和 button 元素

  2. ":text"获取所有的单行文本框

  3. ":password"获取所有密码框

  4. ":radio"获取所有单选按钮

  5. ":checkbox"获取所有复选框

  6. ":submit"获取所有提交按钮

  7. ":reset"获取所有重置按钮

  8. ":image"获取所有图像域

  9. ":button"获取所有按钮

  10. ":file"获取所有文件域

 

五、

  1. ":hidden"获取所有隐藏元素

  2. ":visible"匹配所有的可见元素

  3. ":enabled"获取所有可用元素

  4. ":disabled"获取所有不可用元素

  5. ":checked"获取所有选中的被选中元素(复选框、单选框等，不包括select中的option)

  6. ":selected"获取所有选中的option元素

例如：

HTML：

<input type="hidden" name="12345"/>  <input disabled="disabled" name="12345"/>  <input type="checkbox" checked="checked" name="12345"/>  <select>    <option value="1">1111</option>    <option value="2" selected="selected">2222</option>  </select>

JQuery代码：

$("input:hidden")  $("input:visible")  $("input:enabled")  $("input:disabled")  $("input[type='checkbox']:checked")  $("select option:selected")

结果：

[<input type="hidden" name="12345"/>]  [<input disabled="disabled" name="12345"/>,<input type="checkbox" checked="checked" name="12345"/>]  [<input type="hidden" name="12345"/>,<input type="checkbox" checked="checked" name="12345"/>]  [<input disabled="disabled" name="12345"/>]  [<input type="checkbox" checked="checked" name="12345"/>]  [<option value="2" selected="selected">2222</option>]


六

  1. "ancestor descendant"在给定的祖先元素下匹配所有的后代元素

  2. "parent > child"在给定的父元素下匹配所有的子元素

  3. "prev + next"匹配所有紧接在 prev 元素后的 next 元素

  4. "prev ~ siblings"匹配 prev 元素之后的所有 siblings 元素

 

七、

  1. ":header"匹配如 h1, h2, h3之类的标题元素

  2. ":animated"匹配所有正在执行动画效果的元素

  3. ":focus"匹配当前获取焦点的元素

  4. ":contains(text)"匹配包含给定文本的元素

  5. ":empty"匹配所有不包含子元素或者文本的空元素

  6. "has(selector)"匹配含有选择器所匹配的元素的元素

  7. ":parent"匹配含有子元素或者文本的元素

 

八

  1. ":nth-child"匹配其父元素下的第N个子或奇偶元素

  2. ":first-child"匹配第一个子元素

  3. ":last:child"匹配最后一个子元素

  4. ":only-child"如果某个元素是父元素中唯一的子元素，那将会被匹配；如果不是，则不会被匹配