jQuery的常用选择器

最新推荐文章于 2021-11-30 22:26:23 发布

小小小菜鸟1997

最新推荐文章于 2021-11-30 22:26:23 发布

阅读量218

点赞数

本文链接：https://blog.csdn.net/HuLuWa1997/article/details/103181880

版权

一、id选择器
id选择器是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理id的获取（原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽量考虑用这个选择器另外注意id是唯一的）
例如下面这段代码中所示

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>id选择器的练习</title>
    <style>
    div {
        width: 100px;
        height: 90px;
        float: left;
        padding: 5px;
        margin: 5px;
        background-color: #EEEEEE;
    }
    </style>
    <script src=></script>
</head>

<body>   
	 <div id="world">
    	<p>id="world"</p>
    	<p>选中</p>
    </div>
    <div id="hello">
        <p>id="hello"</p>
        <p>jQuery选中</p>
    </div>
    <div id="hello">
        <p>id="hello"</p>
        <p>jQuery未选中</p>
    </div>

    <script type="text/javascript">
       //通过原生方法处理
        var div = document.getElementById('world');
        div.style.border = "3px solid blue";
    </script>

    <script type="text/javascript">
    	//通过jQuery直接传入id
    	//id的唯一，只选择到了第一个匹配的id为hello的div节点
        $("#hello").css("border", "3px solid red");
    </script>

</body>

</html>

实现效果如下图所示：
在这里插入图片描述
二、类选择器
类选择器，相对于id选择器来说，效率相对会低一点，但是优势就是可以多选，同样在jQuery的实现上，对于类选择器，如果浏览器支持的话，jQuery使用javascript的原生getElementByClassName()函数来实现的
下面来说明一个原生getElementByClassName()函数实现代码与jQuery实现代码的比较

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>class选择器的练习</title>
    <style>
        div {
            width: 100px;
            height: 90px;
            float: left;
            padding: 5px;
            margin: 5px;
            background-color: #EEEEEE;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>   
	 <div class="world">
    	<p>class="world"</p>
    	<p>选中</p>
    </div>   
     <div class="world">
        <p>class="world"</p>
        <p>选中</p>
    </div>

    <div class="hello">
        <p>class="hello"</p>
        <p>jQuery选中</p>
    </div>
    <div class="hello">
        <p>class="hello"</p>
        <p>jQuery选中</p>
    </div>

    <script type="text/javascript">
        //通过原生方法处理
        //样式是可以多选的，所以得到的是一个合集
        //需要通过循环给合集中每一个元素修改样式
        var divs = document.getElementsByClassName('world');
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.border = "3px solid blue";
        }
    </script>

    <script type="text/javascript">
        //通过jQuery直接传入class
        //class选择器可以选择多个元素
        $(".hello").css("border", "3px solid red");
    </script>
</body>

</html>

实现效果如下：
在这里插入图片描述
三、元素选择器
根据给定（html）标记名称选择所有的元素
描述：
$(" e l e m e n t ") 搜索指定元素标签名的所有节点，这个是一个合集的操作。同样也有原生方法 g e t E l e m e n t s B y T a g N a m e () 函数支持在下面代码中有两种实现方式第一种：通过 g e t E l e m e n t s B y T a g N a m e 方法得到页面所有的 < d i v > 元素 v a r d i v s = d o c u m e n t . g e t E l e m e n t s B y T a g N a m e (^{'} d i v^{'}); d i v s 是 d o m 合集对象，通过循环给每一个合集中的 < d i v > 元素赋予新的 b o r d e r 样式第二种：$ (“p”)选取所有的

元素，通过css方法直接赋予样式

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    div {
        width: 100px;
        height: 90px;
        float: left;
        padding: 5px;
        margin: 5px;
        background-color: #EEEEEE;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
    <div class="world">
        <p>class="world"</p>
        <p>选中</p>
    </div>
    <div class="world">
        <p>class="world"</p>
        <p>选中</p>
    </div>
    <div class="hello">
        <p>class="hello"</p>
        <p>jQuery选中</p>
    </div>
    <div class="hello">
        <p>class="hello"</p>
        <p>jQuery选中</p>
    </div>

    <script type="text/javascript">
    //通过原生方法处理
    //获取到所有的节点标记名为div的元素
    //给每一个div加上蓝色的边框
    var divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.border = "3px solid blue";
    }
    </script>
    <script type="text/javascript">
    //通过jQuery直接传入标签名p
    //标签是可以多个的，所以得到的同样也是一个合集
    $("p").css("border", "3px solid red");
    </script>
</body>

</html>

效果图如下：
在这里插入图片描述
四、全选择器
$("*")
抛开jQuery，如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递可以获取到(但是这种方法实现，就需要考虑浏览器的兼容性)

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>allselect</title>
    <style>
    div {
        width: 100px;
        height: 90px;
        float: left;
        padding: 5px;
        margin: 5px;
        background-color: #EEEEEE;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
    <div class="world">
        <p>class="world"</p>
        <p>选中</p>
    </div>
    <div class="world">
        <p>class="world"</p>
        <p>选中</p>
    </div>
    <div class="hello">
        <p>class="hello"</p>
        <p>jQuery选中</p>
    </div>
    <div class="hello">
        <p>class="hello"</p>
        <p>jQuery选中</p>
    </div>

    <script type="text/javascript">
        //获取页面中所有的元素
        var elements1 = document.getElementsByTagName('*');
    </script>
    <script type="text/javascript">
        //获取页面中所有的元素
       var elements2 = $("*")      ;
        //原生与jQuery方法比较
        //===表示数据和类型都相等
        if(elements2.length === elements1.length){
           elements2.css("border","1px solid red");
        }
    </script>
</body>

</html>

效果图如下：
在这里插入图片描述