jQuery选择器详细介绍：基本选择器，层次选择器，属性选择器

最新推荐文章于 2022-04-02 10:18:23 发布

woaijianjiandandande

最新推荐文章于 2022-04-02 10:18:23 发布

阅读量3.7k

点赞数 8

分类专栏： jQuery 文章标签：基本选择器层次选择器属性选择器

本文链接：https://blog.csdn.net/woaijianjiandandande/article/details/52846488

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery选择器的格式： $("选择器")

一、基础选择器

1、基本选择器

使用范围：在jQuery中，基本选择器是使用最频繁的选择器。

（1）元素选择器；

（2）id选择器；

（3）class选择器；

（4）群组选择器；

（5）*选择器

（1）元素选择器；
语法：$("元素名")

<span style="font-family:Arial;"><span style="color:#1a1a1a;"><pre name="code" class="java"><!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
          </span><strong style="background-color: rgb(255, 255, 255);"><span style="color:#1a1a1a;"> </span><span style="color:#ff0000;"> </span>$("div").css("color","red");   $("span").css("color","yello"); </strong><span style="background-color: rgb(255, 255, 255);"><strong>  </strong> //方法是jQuery操作CSS样式的方法因此使用点运算符来调用:$("div").css()</span><span style="color:#1a1a1a;">
        })
    </script>
</head>
<body>
    <div>我爱简简单单的</div>
    <span>我爱简简单单的</span>
</body>
</html></span></span>

在浏览器预览效果如下：

注意：CSS选择器和jQuery选择器的转换关系：只需要把CSS选择器的写法套进$("")中，就变成了jQuery选择器
（2）id选择器；

语法：$("#id名")
说明：id名前面必须加上前缀“#”，否则该选择器无法生效

<span style="font-family:Arial;font-size:10px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
                        $("div").css("color","red");
			$("span").css("color","yello");
			</span><span style="color:#ff0000;">$("#a").css("color","blue");</span><span style="color:#1a1a1a;">
        })
	</script>

</head>
<body>
    <div>我爱简简单单的</div>
 </span><span style="color:#ff0000;">   <div id="a">我爱简简单单的</div></span><span style="color:#1a1a1a;">
    <span>我爱简简单单的</span>
</body></span></span>

在浏览器预览效果如下：

（3）class选择器；

语法：$(".类名")
说明：id名前面必须加上前缀“.”，否则该选择器无法生效

<span style="font-family:Arial;font-size:10px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
            $("div").css("color","red");
			$("span").css("color","yello");
			$("#a").css("color","blue");
			</span><span style="color:#ff0000;">$(".b").css("color","green");</span><span style="color:#1a1a1a;">
        })
	</script></span></span><span style="color: rgb(26, 26, 26); font-family: SimHei; font-size: 15px;">
</span><span style="font-size:12px;"><span style="color: rgb(26, 26, 26); font-family: SimHei;"></head>
<body>
    <div>我爱简简单单的</div>
    <div id="a">我爱简简单单的</div>
    <span>我爱简简单单的</span>
    </span><span style="font-family: SimHei;"><span style="color:#ff0000;"><div class="b">我爱简简单单的</div></span></span><span style="color: rgb(26, 26, 26); font-family: SimHei;">
</body>
</html></span></span>

在浏览器预览效果如下：

（4）群组选择器；

语法：$("选择器1,选择器2,...,选择器n")
说明：选择器之间必须用英文逗号“,”隔开，否则该选择器无法生效

<span style="font-family:Arial;font-size:12px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
            </span><span style="color:#ff0000;">$("div,span,#a,.b").css("color","green");</span><span style="color:#1a1a1a;">
        })
	</script>

</head>
<body>
    <div>我爱简简单单的</div>
    <div id="a">我爱简简单单的</div>
    <span>我爱简简单单的</span>
    <div class="b">我爱简简单单的</div>
</body>
</html></span></span>

在浏览器预览效果如下：

（5）*选择器

语法：*{padding:0;margin:0;}
说明：*选择器，也称为全选选择器，用于选择所有的元素。在CSS中，常用*选择器去除默认的padding和margin的值

<span style="font-family:Arial;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
           <span style="color:#ff0000;"> $("#c *").css("color","green");</span>
        })
	</script>

</head>
<body>
<span style="color:#ff0000;"><div id="c"></span>
    <div>我爱简简单单的</div>
    <div id="a">我爱简简单单的</div>
    <span>我爱简简单单的</span>
    <div class="b">我爱简简单单的</div>
<span style="color:#ff0000;"></div></span>
</body>
</html></span>

在浏览器预览效果如下：

CSS规定了如下优先级：

行内样式->id样式->class样式->标记样式

2、层次选择器

（1）后代选择器
语法：$("M N")
说明：选择M元素内部后代N元素，包括所有后代元素。
（2）子代选择器
- 语法：$("M>N")
- 说明：选择M元素内部某一个子元素，只限子元素。
（3）兄弟选择器
- 语法：$("M～N")
- 说明：选择M元素后面（不包括前面）的（所有的）某一类兄弟元素N。
（4）相邻选择器

语法：$("M+N")
说明：选择M元素后面（不包括前面）的（相邻的）某一类兄弟元素N。

<span style="font-family:Arial;font-size:12px;"><span style="color:#1a1a1a;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <style type="text/css">
		*{padding:0;margin:0}/*去除所有元素默认的padding和margin*/
        ul{list-style-type:none;}/*去除列表项默认符号*/
		li{height:30px;}/*去除列表项默认符号*/
	</style>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
            </span><span style="color:#ff0000;">$("li*li").css("border-top","3px solid green");</span><span style="color:#1a1a1a;">
        })
	</script>

</head>
<body>
	<ul>
    	<li>我爱简简单单的</li>
        <li>我爱简简单单的</li>
        <li>我爱简简单单的</li>
        <li>我爱简简单单的</li>
        <li>我爱简简单单的</li>
        <li>我爱简简单单的</li>
        <li>我爱简简单单的</li>
    </ul>
</body>
</html></span></span>

在浏览器预览效果如下：

分析：

$("li+li")使用的是相邻选择器，表示“选择li元素相邻的下一个li元素”。由于最后一个li元素没有相邻的下一个li元素，所以对于最后一个li元素，它是没有下一个li元素可以选取的。$("li+li").css("border-top", "2px solid red")达到在两两li元素之间添加一个边框的效果。这是一个非常棒的技巧，在实际开发中如果我们想要在两两元素之间实现什么效果，我们经常会用到这个技巧！大家请一定不要浪费这个强大的技巧！

3、属性选择器

使用范围：在jQuery中，属性选择器最常见于表单操作。

选择器	说明
$("selector[attr]")	选择包含给定属性的元素
$("selector[attr='value']")	选择给定的属性是某个特定值的元素
$("selector[attr != 'value']")	选择所有含有指定的属性，但属性不等于特定值的元素
$("selector[attr *= 'value']")	选择给定的属性是以包含某些值的元素
$("selector[attr ^= 'value']")	选择给定的属性是以某些值开始的元素（比较少用）
$("selector[attr $= 'value']")	选择给定的属性是以某些值结尾的元素（比较少用）
$("selector[selector1][selector2]…[selectorN]")	复合属性选择器，需要同时满足多个条件时使用

注：selector指的是选择器，attr指的是属性（attribute），value指的是属性值。

<span style="font-family:Arial;font-size:12px;"><!DOCTYPE html>
<html>
<head>
    <title>JSON Object Example</title>
    <meta charset="utf-8">
    <style type="text/css">
		*{padding:0;margin:0}/*去除所有元素默认的padding和margin*/
        ul{list-style-type:none;}/*去除列表项默认符号*/
		li{height:30px;}/*去除列表项默认符号*/
	</style>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
           <span style="color:#ff0000;"> $("input[type='checkbox']").attr("checked","checked");</span>//<span style="color: rgb(26, 26, 26); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 27px; text-indent: 30px;">表示把所有复选框的checked属性值设置为checked（即被选中）。</span>
        })
	</script>

</head>
<body>
<br>
	<h3>请选择以下需要购买的蔬菜</h3><br>
    <div id="list">
    	<input type="checkbox" />黄瓜
        <input type="checkbox" />西红柿
        <input type="checkbox" />土豆
        <input type="checkbox" />茄子
    </div>
</body>
</html></span>

在浏览器预览效果如下：