您的位置：首页 > Web前端 > JQuery

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

2016-10-18 10:18 1061 查看
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>

在浏览器预览效果如下：



拓展：

$("#a")等价于$("[id='a']")
$(".a")等价于$("[class='a']")
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                基本选择器
                                                层次选择器
                                                属性选择器
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航