jQuery之选择器

87384559

2017-05-07

页面的任何操作都需要节点的支撑，而jQuery提供的选择器可以方便高效的帮助我们找到节点。

为了方便理解后面的例子，我们这里写好一个HTML的文，如下：

<html>
<head>
    <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>
</body>
</html>

1.jQuery选择器之ID选择器

一个用来查找ID，即元素的id属性。

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

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

在开头写好的HTML文件中加如以下的代码，显示效果：

<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>

2.jQuery选择器之类选择器

语法：$(".class")

类选择器相对id选择器效率要第一些，但有点是可以多选。

jQuery 使用js中的原生getElementsByClassName()函数来实现

jQuery除了选择上的简单，而且没有再次使用循环处理，内部带有隐室的循环处理

html代码

3.jQuery选择器之元素选择器

根据指定的html标记名称选择所有的元素

语法：$("element")

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

HTML代码

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

通配符*意味给所有的元素添加样式。

语法：$("*")

<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>

5.jQuery选择器之层选择器

文档之中会存在这样或那样的关系，我们把这种关系通常称做：父子，兄弟，子孙关系

层级选择器就是用来处理这种关系的：子元素，后代元素，兄弟元素，相邻元素

通过一个列表来对比层级选择器之间的区别：

选择器	描述
$（“parent>child”）	子选择器：选择parent元素中的child子元素
$("ancestor descendent")	后代选择器：指定祖先元素的后代
$("prev + next')	相邻兄弟选择器：选择紧邻在prev元素后的next元素
$("prev～siblings")	一般兄弟选择器：匹配“prev”元素之后的所有兄弟元素，具有相同的父元素

例子如下：

<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文件中的一些元素稍做解释：

<article>标签：代表了文档页面或者是应用程序中的独立完整的部分可以被外部引用的内容，所以作为一个独立的插件，通常还会有自己的标题及脚注

<span>标签：对文档中的行内元素进行组合，应用时产生视觉上的效果

87384559

0 关注 0 粉丝 0 动态

关注关注

安科网

jQuery之选择器

87384559

87384559

87384559