【JQuery】熟能生巧JQuery（四）——基本选择器

最新推荐文章于 2022-09-03 14:37:55 发布

置顶你个佬六

最新推荐文章于 2022-09-03 14:37:55 发布

阅读量702

点赞数

文章标签： jquery 博客 class 宏

本文链接：https://blog.csdn.net/kisscatforever/article/details/68930425

版权

➤ C/S起步篇同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

------【JQuery】

9 篇文章 0 订阅

订阅专栏

一、前言

在上一篇博客中宏观向大家介绍了JQuery的选择器，“【JQuery】熟能生巧JQuery（三）——选择器”，一共分了四种。每一种都有各自不同的功能。在这篇博客中，小编向大家介绍第一种选择器——基本选择器。

二、基本选择器

基本选择器是JQuery中使用最频繁的。它由id，class，元素名，多个选择符，通过基本选择器可以实现大多页面的查找。

关键字	说明	示例
id	根据id选择元素	$(“#title”).css(“background-color”,”aqua”);
.class	根据类属性选择元素	$(“.clsOne “).css(“background-color”,”aqua”);
element	根据元素名选择	$(“div span “).css(“background-color”,”aqua”);
*	选择全部的元素	$(” *”).css(“background-color”,”aqua”);
selector1,selectorN	将每个选择器匹配到的元素合并后一起返回	$(“#title,span”).css(“background-color”,”aqua”);

三、例子展示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件的链式写法</title>
        <script type="text/javascript" src="js/jquery-3.2.0.min.js" ></script>
        <style type="text/css">
            .iframe{border:solid 1px #888;font-size:13px;}
            .iframe div span{padding:8px;font-size: 12px;}

        </style>
        <script type="text/javascript">
            $(function(){ //ID匹配元素
                $("#title").css("background-color","aqua");
            });

            $(function(){ //元素名匹配元素
                $("div span ").css("background-color","aqua");
            });

            $(function(){ //类匹配元素
                $(".clsOne ").css("background-color","aqua");
            });

            $(function(){ //匹配所有元素
                $("*").css("background-color","aqua");
            });

            $(function(){ //合并匹配元素
                $("#title,span").css("background-color","aqua");
            });

        </script>
    </head>
    <body>
        <div class="iframe">
            <div id="title">ID</div>
            <div class="clsOne">Class</div>
            <span>span</span>
        </div>
    </body>
</html>