JQuery选择器总结
JQuery选择器:
一、
-
"*"所有元素
-
"#id"有指定ID的元素
-
".class"有指定class的元素、".class.class"有指定的2个class的元素
-
"element"选取指定的element(元素)
-
"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>]
二、
-
":first"获取第一个元素
-
":last"获取最后一个元素
-
":even"获取奇数行的元素
-
":odd"获取偶数行的元素
-
":eq(index)"获取给定索引值的元素
-
":gt(no)"获取大于给定索引值(从0开始)的元素
-
":lt"获取所有小于给定索引值(从0开始)的元素
-
":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"/>]
三、
-
"[attribute]"获取包含给定属性的元素
-
"[attribute = value]"获取给定的属性是某个特定值的元素
-
"[attribute != value]"获取所有不含有指定的属性,或者属性不等于特定值的元素
-
"[attribute ^= value]"获取给定的属性是以某些值开始的元素
-
"[attribute $= value]"获取给定的属性是以某些值结尾的元素
-
"[attribute *= value]"获取给定的属性是以包含某些值的元素
-
"[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"/>]
四、
-
":input"获取所有 input, textarea, select 和 button 元素
-
":text"获取所有的单行文本框
-
":password"获取所有密码框
-
":radio"获取所有单选按钮
-
":checkbox"获取所有复选框
-
":submit"获取所有提交按钮
-
":reset"获取所有重置按钮
-
":image"获取所有图像域
-
":button"获取所有按钮
-
":file"获取所有文件域
五、
-
":hidden"获取所有隐藏元素
-
":visible"匹配所有的可见元素
-
":enabled"获取所有可用元素
-
":disabled"获取所有不可用元素
-
":checked"获取所有选中的被选中元素(复选框、单选框等,不包括select中的option)
-
":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>]
六
-
"ancestor descendant"在给定的祖先元素下匹配所有的后代元素
-
"parent > child"在给定的父元素下匹配所有的子元素
-
"prev + next"匹配所有紧接在 prev 元素后的 next 元素
-
"prev ~ siblings"匹配 prev 元素之后的所有 siblings 元素
七、
-
":header"匹配如 h1, h2, h3之类的标题元素
-
":animated"匹配所有正在执行动画效果的元素
-
":focus"匹配当前获取焦点的元素
-
":contains(text)"匹配包含给定文本的元素
-
":empty"匹配所有不包含子元素或者文本的空元素
-
"has(selector)"匹配含有选择器所匹配的元素的元素
-
":parent"匹配含有子元素或者文本的元素
八
-
":nth-child"匹配其父元素下的第N个子或奇偶元素
-
":first-child"匹配第一个子元素
-
":last:child"匹配最后一个子元素
-
":only-child"如果某个元素是父元素中唯一的子元素,那将会被匹配;如果不是,则不会被匹配