jQuery常用选择器总结

2019-05-17 本文已影响0人 Leophen

$("*")：选取所有元素

ID选择器

$("#lastname")：选取id="lastname" 的元素

类选择器

$(".intro")：选取所有 class="intro" 的元素

$(".intro.demo")：选取所有 class="intro" 且class="demo" 的元素

后代选择器

$("div> span") ：选取 <div> 元素的直接子元素的 <span> 元素

属性选择器

$("[href]")：选取所有带有 href 属性的元素

$("[href='#']")：选取所有 href 属性的值等于 "#" 的元素

$("[href!='#']")：选取所有 href 属性的值不等于 "#" 的元素

$("[href$='.jpg']")：选取所有 href 属性的值包含以 ".jpg" 结尾的元素

$("input[name^='news']")：选取所有的 name 属性以'news'开头的 input 元素

$("input[id][name$='man']")：选取所有的含有 id 属性并且那么属性以 man 结尾的元素

位置筛选器

$("p:first")：选取第一个 <p> 元素

$("p:last")：选取最后一个 <p> 元素

$("tr:even")：选取所有偶数 <tr> 元素

$("tr:odd")：选取所有奇数 <tr> 元素

$("ul li:eq(3)") ：选取列表中的第四个元素（index 从 0 开始）

$("ul li:gt(3)") ：列出 index 大于 3 的元素

$("ul li:lt(3)") ：列出 index 小于 3 的元素

子元素筛选器

$("div span:first-child") ：选取所有的 div 元素的第一个子节点的数组

$("div span:last-child") ：选取所有的 div 元素的最后一个节点的数组

$("div button:only-child") ：选取所有的 div 中只有唯一一个子节点的所有子节点的数组

$("p:first-of-type")：选取属于其父元素的第一个 <p> 元素的每个 <p> 元素

$("p:last-of-type")：选取属于其父元素的最后一个 <p> 元素的每个 <p> 元素

$("p:nth-child(3)")：选取属于其父元素的第三个子元素的每个 <p> 元素

$("p:nth-last-child(3)")：选取属于其父元素的倒数第三个子元素的 <p> 元素

$("p:nth-of-type(3)")：选取属于其父元素的第三个 <p> 元素的每个 <p> 元素

$("p:nth-last-of-type(3)")：选取属于其父元素的倒数第三个 <p> 元素的每个 <p> 元素

$("p:only-of-type")：选取属于其父元素的唯一 <p> 元素的每个 <p> 元素

表单筛选器

$(":input")：选取所有 <input> 元素

$(":text")：选取所有 type="text" 的 <input> 元素

$(":password")：选取所有 type="password"的 <input> 元素

$(":radio")：选取所有 type="radio" 的 <input> 元素

$(":checkbox")：选取所有 type="checkbox"的 <input> 元素

$(":submit")：选取所有 type="submit" 的 <input> 元素

$(":reset")：选取所有 type="reset" 的 <input> 元素

$(":button")：选取所有 type="button" 的 <input> 元素

$(":image")：选取所有 type="image" 的 <input> 元素

$(":file")：选取所有 type="file" 的 <input> 元素

$(":enabled")：选取所有激活的 input 元素

$(":disabled")：选取所有禁用的 input 元素

$(":selected")：选取所有被选取的input 元素

$(":focus")：选取当前具有焦点的元素

$(":checked")：选取所有被选中的 input 元素

内容筛选器

$(":empty")：选取无子（元素）节点的所有元素

$("p:has(span)")：选取所有包含有 <span> 元素在其内的 <p> 元素

$("td:parent")：选取所有带有子元素且包含文本的 <td> 元素

$(":contains('W3School')")：选取包含指定字符串的所有元素

其他筛选器

$("p:lang(it)")：选取所有 lang 属性为 "it" 的 <p> 元素

$("input:not(:empty)")：选取所有不为空的 input 元素

$("p:hidden")：选取所有隐藏的 <p> 元素

$("table:visible")：选取所有可见的表格

$(":header")：选取所有标题元素

$(":animated")：选取所有动画元素