jQuery选择器的分类和使用_关于选择器(分类,使用)jq-CSDN博客

本文链接：https://blog.csdn.net/weixin_53731984/article/details/121112293

本文详细介绍了CSS选择器的各类用法，包括基本选择器、层次选择器和属性选择器等，并提供了丰富的示例代码帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选择器目录

选择器的分类

通过css选择器选取元素
- 基本选择器
  - 标签选择器 $(“h1”);
  - 类选择器 $(".span");
  - id选择器 $("#id");
  - 全局选择器 $("*")
  - 并集选择器 $(“h1,.class,#id,…”);
- 层次选择器
  - 后代选择器 $(“ul li”);
  - 子类选择器 $(“ul>li”);
  - 相邻选择器 $(“h3+p”);
  - 同辈选择器 $(“h3~p”);
  - 所有兄弟选择器 .siblings;
- 属性选择器
  - 包含某属性 $(" a[href]");
  - 包含某属性并且属性值等于绝对值 $(“a[href=‘abc’]”);
  - 包含某属性并且属性质不等于绝对值 $(“a[href!=‘abc’]”)
  - 属性值以XXXXX开头 $(“a[href^=‘xxx’]”);
  - 属性值以XXXXX结尾 $(" a [h r e f$ =‘xxx’]");
  - 包含某属性的绝对值 $(“a[href*=‘xxx’]”);
通过过滤选择器选取元素
- 基本过滤选择器
  - 第一个元素 $(“ul:first”);
  - 最后一个元素 $(“ul:last”);
  - 选取指定的元素 $(“li:eq(2)”); //从0开始选取
  - 大于某索引的元素 $(“li:gt(3)”);
  - 小于某索引的元素 $(“li:lt(3)”);
  - 获得焦点的元素 $(":focus")
  - 正在执行的动画元素 $(":animated")
  - 所有的标题元素 $(":header")
  - 所有偶数元素 $(“li:even”)
  - 所有奇数元素 $(“li:odd”)
  - 不包含指定元素 $(“li:not(.three)”)
- 可见性过滤选择器
  - 所有可见元素 $(“p:hidden”)
  - 所有不可见元素 $(“p:visible”)
选择器注意事项
- 空格不要随便写：空格代表后代
- 转义符的使用： \\
  - <a id = "#i%*[o]">a标签</a>
  - $("#\\#i\\%\\*\\[o\\]")....

示例：

通过css选择器选取元素

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <!--导包-->
    <script src="../../lib/jquery-1.8.3.js"></script>
</head>
<body>
<h1>jkladsklj</h1>
<h2 id="h2">asd asd</h2>
<h3 class="h3">h33hh3h3h3h3h</h3>
<script type="text/javascript">
    $(function () {
        //标签选择器
        $("h1").css("background","red");
        //id选择器
        $("#h2").css("background","green");
        //类选择器
        $(".h3").css("background","yellow");
        //并集选择器
        $("h1,#h2,.h3").css("color","pink");
        //全局选择器
        $("*").css("color","#ffff12");
    })
</script>
</body>
</html>

层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2</title>
    <!--导包-->
    <script src="../../lib/jquery-1.8.3.js"></script>
</head>
<body>
<ul>
    <li>h5css3</li>
    <li class="java">java</li>
    <li>js</li>
    <li>jq</li>
    <li>OOP</li>
</ul>
<script type="text/javascript">
    $(function () {
        //后代选择器
        $("ul li").css("color","#fff134");
        //子选择器
        $("ul>li").css("background","#5ce3b5")
        //相邻选择器
        $(".java+li").css("color","#fff")
        //同辈选择器
        $(".java~li").css("background","#77afd2")
        //所有兄弟选择器
        $(".java").siblings().css("font-size","50px")
    })
</script>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导包-->
    <script src="../../lib/jquery-1.8.3.js"></script>
</head>
<body>
<a href="#">包含href属性</a>
<a>不包含href属性</a>
<a href="abc">包含href属性</a>
<a href="www.baidu.com">baidu</a>
<a href="www.4399.com">4399</a>
<a href="www.7k7k.html">7k7k</a>
<script type="text/javascript">
    $(function () {
        //建议一个一个注释查看效果
        //包含
        $("a[href]").css("color","#3f1");
        // 包含某属性 并且属性值等于绝对值
        $("a[href='abc']").css("background","#ade");
        //包含某属性并且属性质不等于绝对值
        $("a[href!='abc']").css("color","#0e333f");
        //属性值以www开头的
        $("a[href^='www']").css("color","#e1c940");
        //属性值以html结尾的
        $("a[href$='html']").css("background","#eb86ff")
        //属性值包含某个值的
        $("a[href*='a']").css("font-size","50px")
    })
</script>
</body>
</html>

通过过滤选择器选取元素

基本过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本动画选择器</title>
    <!--导包-->
    <script src="../../lib/jquery-1.8.3.js"></script>
</head>
<body>
<div style="background: blue" id="div">动起来</div>
<input type="button" value="点击切换北京颜色">
<p><input type="text" placeholder="账号"></p>
<p><input type="password" placeholder="pwd"></p>
<h1>h1标题元素</h1>
<h2>h2标题元素</h2>
<ul>
    <li>h5css3</li>
    <li>java</li>
    <li>js</li>
    <li>jq</li>
    <li>OOP</li>
</ul>

<script type="text/javascript">
    $(function (){
        //制作动画
        function run(){
            $("#div").animate({width:"500px"},"slow");
            $("#div").animate({width:"1000px"},"slow",run);
        }
        run();
        $("input[type = 'button']").click(function (){
            //选择正在动的动画进行改变
            $(":animated").css("background","pink")
        })
        //- 选取指定的元素   $("li:eq(2)");
        $("li:eq(1)").css("color","red");
        //第一个元素
        $("li:first").css("color","blue");
        //最后一个元素
        $("li:last").css("color","yellow");
        // - 大于某索引的元素  $("li:gt(3)");
        $("li:gt(2)").css("background","#123");
        // - 小于某索引的元素  $("li:lt(3)");
        $("li:lt(2)").css("background","#321");
        // - 所有偶数元素  $("li:even")
        $("li:even").css("font-size","30px");
        //- 所有奇数元素   $("li:odd")
        $("li:odd").css("font-size","5px");
        //- 获得焦点的元素   $(":focus")
        //补充：.focus()获得焦点
        $("input[type = 'text']").focus();
        $(":focus").css("background","#ccc")
        //- 所有的标题元素   $(":header")  (h1-h2)
        $(":header").css("color","#888");
        //- 不包含指定元素   $("li:not(.three)")
        $("li:not(li:eq(2))").css("text-align","center")
    })
    /*
    - 正在执行的动画元素    $(":animated")
    - 选取指定的元素       $("li:eq(2)");
    - 第一个元素   		 $("ul:first");
    - 最后一个元素  		$("ul:last");
    - 大于某索引的元素  	$("li:gt(3)");
    - 小于某索引的元素  	$("li:lt(3)");
    - 所有偶数元素   	$("li:even")
    - 所有奇数元素  		 $("li:odd")
    - 获得焦点的元素  	 $(":focus")
    - 所有的标题元素  	 $(":header")
    - 不包含指定元素  	 $("li:not(.three)")
    */
</script>
</body>
</html>

可见性过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可见性元素</title>
    <script src="../../lib/jquery-1.8.3.js"></script>
</head>
<body>
<p style="">99 little bugs in the code</p>
<input type="button" value="显示">
<input type="button" value="隐藏">
<script type="text/javascript">
    $(function () {
        $("p").hide();//隐藏p元素
        $("input[value = '显示']").click(function (){
            $("p:hidden").show();
        })
        $("input[value = '隐藏']").click(function () {
            $("p:visible").hide();
        })
    })
</script>
</body>
</html>