jQuery之常用的选择器

最新推荐文章于 2022-08-01 14:22:34 发布

頑張ってちしじょ

最新推荐文章于 2022-08-01 14:22:34 发布

阅读量125

点赞数 1

本文链接：https://blog.csdn.net/weixin_45170547/article/details/93225805

版权

jQuery获取元素的方法：通过各种选择器来获取

根据id来获取 --id选择器 $("#id的值"); 一个
根据class来获取 --类选择器 $(".class的值"); 多个
根据标签来获取 --标签选择器 $(“标签的名字”); 多个
$("*"):获取所有的元素

<body>
     <input id="btn" type="button" value="这是一个层">
     <div id="box"></div>
     <p>小窝</p>
     <p>派大星</p>
     <p>章鱼哥</p>
     <p>蟹老板</p>
     <span class="span">都是海洋家族</span>
     <script src="js/jquery-1.12.2.js"></script>
     <script>
        //点击按钮，设置层中的显示内容为：这是一个层，同时设置这个层的背景颜色(id选择器)；
        //点击按钮 是多个p标签里的内容改变(标签选择器)；
        //页面加载事件
        $(function () {
            //获取按钮
            $("#btn").click(function () {
                //设置div里的内容
                $("#box").text("这是div");   //text:DOM中的innerText或者是textContent;
                $("#box").css("backgroundColor","green");  //设置元素的样式

                $("p").text("都是海绵宝宝的朋友");
                $("span").text("离开水都不行");
            });
        });
     </script>

标签+类选择器：$(li.cls) ：li底下有class=“cls”;
多条件选择器：每个中间用逗号隔开
层次标签：后代选择器：中间加空格;
子代选择器：中间加> （直接的所有子元素）；
匹配所有跟在 label 后面的 input 元素：中间加+；
获取父元素后所有与p标签元素同辈的：中间加~

<!--匹配所有跟在 label 后面的 input 元素：中间加+；-->
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />


//结果为[ <input name="name" />, <input name="newsletter" /> ]

过滤选择器：
获取的是下标（下标从零开始）
:even:偶数
:odd:奇数
:eq(index)：指定下标为index的
:gt(index):选中大于下标为index的
:lt(index）：选中小于下标为index的

筛选选择器（方法）

children():取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合，不考虑所有后代元素。
parents()：查找所有祖辈元素
find():搜索所有与指定表达式匹配的元素.（找后代）
prev():查找当前元素之前所有的同辈元素。
next():查找当前元素之后所有的同辈元素。
sibling():查找兄弟，不包括自己

頑張ってちしじょ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之常用的选择器

jQuery获取元素的方法：通过各种选择器来获取根据id来获取 --id选择器 $("#id的值"); 一个根据class来获取 --类选择器 $(".class的值"); 多个根据标签来获取 --标签选择器 $(“标签的名字”); 多个$("*"):获取所有的元素<body> <input id="btn" type="button" ...
复制链接

扫一扫