• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

2.2 基本选择器

从上一节我们知道,jQuery选择器的功能就是把元素选中,然后我们才能对选中的元素进行各种操作。其中,jQuery选择器的格式如下:

 
$("选择器")

这一节,我们先来介绍jQuery最基本的几个选择器。所谓的基本选择器,指的是在jQuery中使用最频繁的选择器。在jQuery中,基本选择器共有5种:

  • (1)元素选择器;
  • (2)id选择器;
  • (3)class选择器;
  • (4)群组选择器;
  • (5)*选择器

一、元素选择器

元素选择器,就是“选中”相同的元素,然后对相同的元素进行操作。

语法:

 
$("元素名")

举例:

 
<!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 () {
            $("div").css("color","red");
        })
    </script>
</head>
<body>
    <div>绿叶学习网</div>
    <p>绿叶学习网</p>
    <span>绿叶学习网</span>
    <div>绿叶学习网</div>
</body>
</html>

在浏览器预览效果如下:

分析:

 
$(function () {
    //这里是你的jQuery代码
}

这句代码功能类似于JavaScript中的window.onload = function(){},也就是在文档加载完成之后执行的代码。以后我们写jQuery代码都在$(function(){})里面写。在“jQuery页面载入事件”这一节我们会详细介绍。不过在这里建议大家先去看看这一节的内容,然后再回到这一节学习。

在这个例子中,$("div")表示选中所有的div元素,css("color","red")表示将选中的元素的color属性设置为红色。css()方法是jQuery操作CSS样式的方法,这个知识我们会在“CSS属性操作”这一节会详细讲解到。由于css()是“对象的一个方法”,因此我们使用点运算符来调用,如$(“div”).css()。

在这一节的学习中,我们会发现jQuery选择器是跟CSS选择器完全一样的!我们只需要把CSS选择器的写法套进$("")中,就变成了jQuery选择器,非常简单!

没错,这么简单一步,jQuery选择器就诞生了!对于其他jQuery选择器也可以这样得到。

二、id选择器

id选择器,就是选中某个id的元素,然后对该元素进行各种操作。有一定要注意的就是:同一页面不允许出现相同id的元素。

语法:

 
$("#id名")

说明:

id名前面必须要加上前缀“#”,否则该选择器无法生效。id名前面加上“#”,表明这是一个id选择器。

举例:

 
<!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 () {
            $("#lvye").css("color","red");
        })
    </script>
</head>
<body>
    <div>绿叶学习网</div>
    <div id="lvye">绿叶学习网</div>
    <div>绿叶学习网</div>
</body>
</html>

在浏览器预览效果如下:

分析:

$("#lvye").css("color","red")表示选中id为lvye的元素,然后设置该元素的color属性值为red。

把CSS的id选择器插入$("")中就变成了jQuery中的id选择器,很简单。

三、class选择器

class选择器,就是我们常说的“类选择器”。我们可以对“相同的元素”或者“不同的元素”设置一个class(类名),然后针对这个class的元素进行各种操作。

语法:

 
$(".类名")

说明:

class名前面必须要加上前缀“.”(英文点号),否则该选择器无法生效。类名前面加上“.”,表明这是一个class选择器。

举例:

 
<!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 () {
            $(".lv").css("color","red");
        })
    </script>
</head>
<body>
    <div>绿叶学习网</div>
    <p class="lv">绿叶学习网</p>
    <span class="lv">绿叶学习网</span>
    <div>绿叶学习网</div>
</body>
</html>

在浏览器预览效果如下:

分析:

$(".lv").css("color","red")表示选中class为lv的所有元素,然后设置这些元素设置color属性值为red。

p元素和span元素是两个不同的元素,但是我们可以为这两个不同的元素设置相同的class,这样就可以同时为这两个不同的元素进行相同的操作了。

四、群组选择器

群组选择器,就是同时对几个选择器进行相同的操作。

语法:

 
$("选择器1 , 选择器2 ,……,选择器n")

说明:

对于群组选择器,两个选择器之间必须用“,”(英文逗号)隔开,不然群组选择器无法生效。

举例:

 
<!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 () {
            $("h3,div,p,span").css("color","red");
        })
    </script>
</head>
<body>
    <h3>绿叶学习网</h3>
    <div>绿叶学习网</div>
    <p>绿叶学习网</p>
    <span>绿叶学习网</span>
</body>
</html>

在浏览器预览效果如下:

分析:

$("h3,div,p,span").css("color","red")表示选中所有的h3元素、div元素、p元素和span元素,然后设置这些元素的字体颜色为red。

 
$(function () {
    $("h3,div,p,span").css("color","red");
})

上面这句代码等价于:

 
$(function () {
    $("h3").css("color","red");
    $("div").css("color","red");
    $("p").css("color","red");
    $("span").css("color","red");
})

综上所述,我们可以知道,当我们为多个选择器定义相同的操作(样式定义、DOM操作等)时,使用群组选择器来得更加方便高效。

五、*选择器

*选择器,也成为“全选选择器”,用于选择所有的元素。在CSS中,我们常常用*选择器来去除所有元素默认的padding和margin。

 
*{padding:0;margin:0;}

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#list *").css("color","red");
        })
    </script>
</head>
<body>
    <h3>前端核心技术</h3>
    <div id="list">
        <div>(1)HTML</div>
        <p>(2)CSS</p>
        <span>(3)JavaScript</span>
    </div>
</body>
</html>

在浏览器预览效果如下:

分析:

$("#list *")表示选择id为list的元素下面的所有元素。

这一节跟我们之前学过的CSS选择器在内容上是一致的。如果是绿叶的老熟人,相信看这一节都不用5分钟。之所以我还那么仔细地讲解一遍,这是为了照顾那些没有看过我们CSS入门教程的新人。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部