jquery选择器--基本，层次选择器

最新推荐文章于 2023-01-04 15:09:22 发布

努力学习的小蜗牛

最新推荐文章于 2023-01-04 15:09:22 发布

阅读量220

点赞数

本文链接：https://blog.csdn.net/weixin_45806273/article/details/106217447

版权

一.基本选择器
介绍：

基本选择器是JQuery最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名来查找DOM元素（在网页中id只能使用一次，class允许重复使用）。所谓的网页中id只能使用一次的意思是说，一个网页中的id是不可以重复的，也就是具有唯一性。

用法：

1、#id
用法: $("#myDiv"); 返回值单个元素的组成的集合
说明: 这个就是直接选择html中的id=“myDiv”

2、Element
用法: $(“div”) 返回值集合元素
说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如div,
input, a等等.

3、class
用法: $(".myClass") 返回值集合元素
说明: 这个标签是直接选择html代码中class="myClass"的元素或元素组(因为在同一html页面中
class是可以存在多个同样值的)

4、*
用法: $("*") 返回值集合元素
说明: 匹配所有元素,多用于结合上下文来搜索

5、selector1, selector2, selectorN
用法: $(“div,span,p.myClass”) 返回值集合元素
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合
并到一个结果内。其中p.myClass是表示匹配元素
p class=“myClass”
实例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //入口函数
        jQuery(document).ready(function () {

            //三种方式获取jquery对象
            var jqBox1 = $("#box");
            var jqBox2 = $(".box");
            var jqBox3 = $("div");

            //操作标签选择器
            jqBox3.css("width", 100);
            jqBox3.css("height", 100);
            jqBox3.css("margin", 10);
            jqBox3.css("background", "pink");

            //操作类选择器(隐式迭代，不用一个一个设置)
            jqBox2.css("background", "red");

            //操作id选择器
            jqBox1.css("background", "yellow");

        });
    </script>
</head>
<body>

<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>

</body>
</html>

**二. 层级选择器 **
介绍：

只有这个方法返回的是JQuery对象才能进行链式操作。如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素,
相邻元素, 兄弟元素等, 则需要使用层次选择器。

1 、ancestor descendant
用法: $(“form input”) ; 返回值集合元素
说明: 在给定的祖先元素下匹配所有后代元素.这个要和"arent > child"区分开。
祖先元素中查找，包含子元素和子元素的子元素。

2、parent > child
用法: $(“form > input”) ; 返回值集合元素
说明: 在给定的父元素下匹配所有子元素。注意:要区分好后代元素与子元素
父元素中查找，只包含子元素，不包含子元素的子元素。

3、prev + next
用法: $(“label + input”) ; 返回值集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素

4、prev ~ siblings
用法: $(“form ~ input”) ; 返回值集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且JQuery的siblings方法匹配的是和prev同辈的元素,其后辈元素不被匹配.
注意: (“prev ~ div”) 选择器只能选择 "# prev"元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

实例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //获取ul中的li设置为粉色
            //后代：儿孙重孙曾孙玄孙....
            var jqLi = $("ul li");
            jqLi.css("margin", 5);
            jqLi.css("background", "pink");

            //子代：亲儿子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>

努力学习的小蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery选择器--基本，层次选择器

一.基本选择器介绍：基本选择器是JQuery最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名来查找DOM元素（在网页中id只能使用一次，class允许重复使用）。所谓的网页中id只能使用一次的意思是说，一个网页中的id是不可以重复的，也就是具有唯一性。用法：1、#id用法: $("#myDiv"); 返回值单个元素的组成的集合说明: 这个就是直接选择html中的id=“myDiv”2、Element用法: $(“div”) 返回值集合元素说明
复制链接

扫一扫