JQuery选择器

前言：

页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。

jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。

jQuery几乎支持主流的css1~css3选择器的写法。

JQuery选择器之id选择器

id选择器：一个用来查找的ID，即元素的id属性

$("#id")

id选择器也是基本的选择器，jQuery内部使用JavaScript函数 document.getElementById() 来处理ID的获取。

原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器。

注：

id是唯一的，每个id值在一个页面中只能使用一次。
如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。
但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的。

示例源码：

<!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.1/jquery.js"></script>
</head>

<body>   
     <div id="aaron">
        <p>id="aaron"</p>
        <p>选中</p>
    </div>
    <div id="imooc">
        <p>id="imooc"</p>
        <p>jQuery选中</p>
    </div>
    <div id="imooc">
        <p>id="imooc"</p>
        <p>jQuery未选中</p>
    </div>

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

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

</body>
</html>

效果预览：

JQuery选择器之类选择器

类选择器，即通过class样式类名来获取节点。

$( ".class" )

类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选。

同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生 getElementsByClassName() 函数来实现的。

jQuery除了选择上的简单，而且没有再次使用循环处理。

示例源码：

<!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.1/jquery.min.js"></script>
</head>
<body>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>

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

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

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


</body>
</html>

效果预览：

JQuery选择器之元素选择器

元素选择器：根据给定（html）标记名称选择所有的元素

$("element")

搜索指定元素标签名的所有节点，这个是一个集合的操作。同样的也有原生方法 getElementsByTagName() 函数支持。

1、通过 getElementsByTagName() 方法得到页面所有的<div>元素。

var divs = document.getElementByTagName('div');

divs是dom集合对象，通过循环给每一个合集中的<div>元素赋予新的boder样式。

2、同样的效果，$("p")选取所有的<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.1/jquery.min.js"></script>
</head>
<body>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</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选择器之全选择器（*选择器）

在CSS中，经常会在第一行写下这样一段样式

* {padding: 0; margin: 0;}

通配符*意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递*选择器来选中文档页面中的元素。

$( "*" )

抛开jQuery，如果要获取文档中所有的元素，通过 document.getElementsByTagName() 中传递"*"同样可以获取到。

id、class、tag都可以通过原生的方法获取到对应的节点，但是我们还需要考虑一个兼容性的问题。比如:

IE会将注释节点实现为元素，所以在IE中调用 getElementsByTagName 里面会包含注释节点，这个通常是不应该的。
getElementById 的参数在IE8及较低的版本不区分大小写。
IE7及较低的版本中，表单元素中，如果表单A的 name 属性名用了另一个元素B的ID名并且A在B之前，那么 getElementById 会选中A。
IE8及较低的版本，浏览器不支持 getElementsByClassName 。

示例源码：

<!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.1/jquery.js"></script>
</head>
<body>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</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>

效果预览：

jQuery选择器之层级选择器

文档中的所有的节点之间都是有这样或者那样的关系。

如果把节点之间的关系用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系。

选择器中的层级选择器就是用来处理这种关系：

子元素后代元素兄弟元素相邻元素

对比层级选择器的区别：

仔细观察层级选择器之间还是有很多相似与不同点

层级选择器都有一个参考节点。
后代选择器包含子选择器的选择的内容。
一般兄弟选择器包含相邻兄弟选择的内容。
相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下。

示例源码：

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>子选择器与后代选择器</h2>
    <div class="left">
        <div class="aaron">
            <p>div下的第一个p元素</p>
        </div>
        <div class="aaron">
            <p>div下的第一个p元素</p>
        </div>
    </div>
    <div class="right">
        <div class="imooc">
            <article>
                <p>div下的article下的p元素</p>
            </article>
        </div>
        <div class="imooc">
            <article>
                <p>div下的article下的p元素</p>
            </article>
        </div>
    </div>

    <script type="text/javascript">
        //子选择器
        //$('div > p') 选择所有div元素里面的子元素P
        $('div > p').css("border", "1px groove red");
    </script>

    <script type="text/javascript">
        //后代选择器
        //$('div  p') 选择所有div元素里面的p元素
       $('div p').css("border", "1px groove red");
    </script>


    <h2>相邻兄弟选择器与一般兄弟选择器</h2>
    <div class="bottom">
        <div>兄弟节点div, +~选择器不能向前选择</div>
        <span class="prev">选择器span元素</span>
        <div>span后第一个兄弟节点div</div>
        <div>兄弟节点div
            <div class="small">子元素div</div>
        </div>
        <span>兄弟节点span,不可选</span>
        <div>兄弟节点div</div>
    </div>

    <script type="text/javascript">
        //相邻兄弟选择器
        //选取prev后面的第一个的div兄弟节点
        $(".prev+div").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
        //一般相邻选择器
        //选取prev后面的所有的div兄弟节点
        $(".prev~div").css("border", "3px groove blue");
    </script>

</body>
</html>

CSS：

.left,
    .right {
        width: 300px;
        height: 120px;
    }
    
    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    
    .bottom {
        width: 800px;
    }
    
    .bottom div,
    .bottom span {
        display: block;
        width: 80px;
        height: 80px;
        margin: 5px;
        background: #bbffaa;
        float: left;
        font-size: 14px;
    }
    .bottom .small {
        width      : 60px;
        height     : 25px;
        font-size  : 12px;
        background : #fab;
    }

效果预览：

posted @ 2017-05-19 13:39 Lucky锦阅读(191) 评论(0) 收藏举报

刷新页面返回顶部

Lucky锦

学习=What/How/Why

JQuery选择器

JQuery选择器之id选择器

JQuery选择器之类选择器

JQuery选择器之元素选择器

jQuery选择器之全选择器（*选择器）

jQuery选择器之层级选择器

公告