JQuery 选择器

只谈情不闲聊 提交于 2021-01-13 15:53:14

简单选择器:

  1、#id:匹配 id 属性为 id 的元素

  2、.class:匹配 class 属性含有 class 单词的所有元素

  3、[attr]:匹配拥有 attr 属性的所有元素

  4、[attr = val]:匹配拥有 attr 属性且值为 val 的所有元素

  5、[attr != val]:匹配没有 attr 属性或 attr 属性的值不为 val 的所有元素

  6、[attr ^= val]:匹配 attr 属性值以 val 开头的元素

  7、[attr $= val]:匹配 attr 属性值以 val 结尾的元素

  8、[attr *= val]:匹配 attr 属性值含有 val 的元素

  9、[attr ~= val]:当 attr 属性为一个由空格分隔的单词列表时,匹配其中包含单词 val 的元素

  10、[attr |= val]:匹配 attr 属性值以 val 开头且其后没有其他字符或其他字符是以连字符开头的元素

  11、:animated:匹配由 JQuery 产生动画且正在动画中的元素

  12、:button:匹配 <button type = "button"> 和 <input type = "button"> 元素

  13、:checkbox:匹配 <input type = "checkbox"> 元素

  14、:checked:匹配选中的 input 元素

  15、:contains(text):匹配包含指定 text 文本的元素,圆括号确定了文本的范围,无需添加引号

  16、:disabled:匹配禁用元素

  17、:empty:匹配没有子节点、没有文本内容的元素

  18、:enabled:匹配没有禁用的元素

  19、:eq(n):匹配基于文档顺序、序号从 0 开始的选中列表中的第 n 个元素

  20、:gt(n):匹配基于文档顺序、序号从 0 开始的选中列表中序号大于 n 的元素

  21、:lt(n):匹配基于文档顺序、序号从 0 开始的选中列表中序号小于 n 的元素

  22、:even:匹配列表中偶数序号的元素,序号从 0 开始

  23、:odd:匹配列表中奇数序号的元素,序号从 0 开始

  24、:file:匹配 <input type = "file"> 元素

  25、:first:匹配列表中第一个元素,和 :eq(0) 相同 

  26、:first-child:匹配的元素是其父节点的第一个子元素

  27、:last:匹配列表中最后一个元素

  28、:last-child:匹配的元素是其父节点的最后一个子元素

  29、:has(sel):匹配的元素拥有匹配内嵌选择器 sel 的子孙元素

  30、:not(sel):匹配的元素不匹配内嵌选择器 sel

  31、:header:匹配所有标题元素 <h1>...<h6>

  32、:hidden:匹配所有在屏幕上不可见的元素,大体可以认为这些元素的 offsetWidth 和 offsetHeight 为 0

  33、:image:匹配 <input type = "image"> 元素,但不匹配 <img> 元素

  34、:input:匹配用户输入元素:<input>、<textarea>、<select> 和 <button>

  35、:nth(n):与 ”:eq(n)“ 相同

  36、:nth-child(n):匹配的元素是其父节点的第 n 个子元素(n 可以是数值、单词 even、单词 odd 或计算公式),该过滤器的序号从 1 开始

  37、:only-child:匹配那些是其父节点唯一子节点的元素

  38、:parent:匹配是父节点的元素

  39、:password:匹配 <input type = "password"> 元素,即用户输入密码区域

  40、:radio:匹配 <input type = "radio"> 元素

  41、:reset:匹配 <input type = "reset"> 和 <button type = "" reset> 元素

  42、:selected:匹配选中的 <option> 元素,使用 ":checked" 来选择选中的复选框和单选框

  43、:submit:匹配 <input type = "sumit"> 和 <button type = "sumit"> 元素

  44、:text:匹配 <input type = "text"> 元素

  45、:visible:匹配所有当前可见元素

注:通常 指定标签类型前缀可以让过滤器的运行更加高效,如 "input:radio" 比  ":radio" 更好,但 ID 过滤器是个例外,它不带标签前缀会更加高效

 

组合选择器:

  1、A B:从匹配选择器 A 的元素的子孙元素中选择匹配选择器 B 的文档元素(组合符是空白符)

  2、A > B:从匹配选择器 A 的元素的子元素中选择匹配选择器 B 的文档元素

  3、A + B:从匹配选择器 A 的元素的下一个兄弟元素(忽略文本节点和注释)中选择匹配选择器 B 的文档元素

  4、A ~ B:从匹配选择器 A 的元素后面的兄弟元素中选择匹配选择器 B 的文档元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <!--导入 jquery 库-->
    <script src="http://libs.baidu.com//jquery/2.1.1//jquery.min.js"></script>
    <script>
        $(function(){
            $("tr:even").css("background-color","yellow");  // 使下标为偶数的 tr,并让他的背景为黄色
            $("tr:odd").css("background-color", "pink");
            $("#tdOne").css("text-align", "center");    // 选取 id = "tdOne" 的元素
            $(".tdClass").css("color", "green");    // 选取 class = "tdClass" 的元素
            $("#trId:first-child").css("font-size", "1.5em");   // 选取 id = "#trId" 的第一个子元素
            $(".trClass>td").css("font-family", "楷体");  // 选取 class = "trClass" 的所有 td 元素
            $(":submit").css("color", "purple");    // 选取类型为 submit 的 input 和 button
            $(":button").css("color", "purple");    // 选取类型为 button 的 input 和 button
        });
    </script>
</head>
<body>
<h1>欢迎访问我的主页</h1>
<form>
<table border="1">
    <tr>
        <th>网站名</th>
        <th>网址</th>
    </tr>
    <tr>
        <td id="tdOne">Google</td>
        <td>http://www.google.com</td>
    </tr>
    <tr>
        <td class="tdClass">Baidu</td>
        <td>http://www.baidu.com</td>
    </tr>
    <tr id="trId">
        <td>淘宝</td>
        <td>http://www.taobao.com</td>
    </tr>
    <tr class="trClass">
        <td>Facebook</td>
        <td>http://www.facebook.com</td>
    </tr>
</table>
    <input type="submit" value="提交">&nbsp;&nbsp;&nbsp;<button type="reset">重置</button>
</form>
</body>
</html>

 

选择器组:

  传递给 $() 函数(或在样式表中使用)的选择器就是选择器组,这是一个逗号分隔得列表,由一个或多个简单选择器或组合选择器构成

$("h1, h2, h3");    // 匹配 <h1>、<h2> 和 <h3> 元素
$("body>p, div.note>a");    // 匹配 <body> 的子元素 <p> 和 <div class="note"> 的子元素 <a>

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!