jQuery选择器

最新推荐文章于 2024-01-14 11:54:30 发布

ldh_lyf

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量67

点赞数

分类专栏： JS/HTML

本文链接：https://blog.csdn.net/lyf_ldh/article/details/80907729

版权

JS/HTML 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

层级选择器;

A B ----> 获取 A 下面的所有的 B（重点）
A>B ----> 获取A的直接子级 B（重点）
A+B ----> 获取A的第一个B兄弟元素

A~B ----> 获取A的所有B兄弟元素

$(function(){
                var ds = $("#main div");
               alert(ds.length);

                var ds = $("#main>div");
               alert(ds.length);

                var d = $("#header+div");
               alert(d.html());

               var ds = $("#header~div");
               alert(ds.length);

})

<body>
       <div id="main">
           <div id="header">
               <div>1</div>
               <div>2</div>
               <div>3</div>
           </div>
           <div id="product">
               product
           </div>
           <div id="footer">
               footer
           </div>
       </div>

</body>

过滤选择器：

$(function(){
               // 需求1：获取 main div 下面的第一个子级div
                var first = $("#main :first");//空格有自己特有含义，不能随便使用
               alert(first.html());

                获取最后一个
                var last = $("#main :last");
               alert(last.html());

                获取main div 的所有子级(偶数)
                var ds = $("#main :even");//根据索引计算，索引从0开始
               alert(ds.length);

               //获取main div 的所有子级(奇数)
               var ds = $("#main>:odd");//根据索引计算，索引从0开始

alert(ds.length);

属性选择器
[属性名] ---- 获取具有该属性的元素
[属性 = 值] -- 获取属性为某个具体值的元素

[属性 != 值] -- 获取属性不是这个值的元素，可以写多个，值用单引号''

var d = $("div[id = 'header']")

表单选择器;

:disabled --- 不可以
:enabled ---- 可用
:checked ---- 被选定 --- 复选框单选按钮

:selected --- 被选定 --- 下拉列表

$(function(){
                var is = $("input:enabled");//注意空格的使用
               alert(is.length);

                var is = $("input:disabled");//注意空格的使用
               alert(is.length);

               //相同的效果，思路不同，可能选择器书写也不同
                var cs = $("input:checked");
             var cs = $("input[type='checkbox']:checked");
                alert(cs.length);

                var s = $("#city option:selected");
               alert(s.length);

               var s = $("#city2 option:selected");
               alert(s.length);
           })

ldh_lyf

关注

0
点赞
踩
0

收藏

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

层级选择器;A B ----&gt; 获取 A 下面的所有的 B（重点）A&gt;B ----&gt; 获取A的直接子级 B（重点）A+B ----&gt; 获取A的第一个B兄弟元素A~B ----&gt; 获取A的所有B兄弟元素$(function(){ var ds = $("#main div"); alert(ds.length)...
复制链接

扫一扫