jQuery的选择器

最新推荐文章于 2022-11-03 22:33:30 发布

钢伢仔

最新推荐文章于 2022-11-03 22:33:30 发布

阅读量554

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/liu537192/article/details/77281522

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery的选择器

1.1 基本选择器

jQuery语法	JS语法/解释
`$('#id属性值')`	`document.getElementById()`
`$('tag标签名称')`	`document.getElementsByTagName()`
`$('.clsss属性值')`	`class属性值选择器`
`$('*')`	`通配符选择器，表示选择所有节点`
`$('s1,s2,s3')`	`联合选择器`

示例：

jQuery代码	解释
`$('#username').css('color', 'red');`	`id为username的节点的color属性值设置为red`
`$('input').css('background-color', 'blue');`	`input标签节点的background-color属性值设置为blue`
`$('.apple').css('background-color', 'green');`	`class属性值为apple的节点的background-color属性值设置为green`
`$('*').css('background-color', 'gray');`	`所有节点的background-color属性值设置为gray`
`$('input,#username,.apple').css('font-size', '25px')`	`input标签、id为username的节点、class属性值为apple的节点的font-size属性值设置为25px`

1.2 层次选择器

1.$(s1 s2) 派生选择器，获取s1内部的所有s2节点(不考虑层次)

<div>
    <span></span>①
    <p>
        <span></span>②
    </p>
</div>
<span></span>③

$('div span')获取的节点为①和②

2.$(s1>s2) 直接子元素选择器，获取s1内部的直接子元素节点s2

<div>
    <span></span>①
    <p>
        <span></span>②
    </p>
    <span></span>③
</div>
<span></span>④

$('div>span')获取的节点为①和③

3.$(s1+s2) 直接兄弟选择器，获取s1后边紧挨着的第一个兄弟关系的s2节点

<div>
    <span></span>①
    <p>
        <span></span>②
    </p>
    <span></span>③
</div>
<span></span>④
<span></span>⑤

$('div+span')获取的节点为④

4.$(s1~s2) 后续全部兄弟节点选择器，获取s1后边全部兄弟关系的s2节点

<div>
    <span></span>①
    <p>
        <span></span>②
    </p>
    <span></span>③
</div>
<span></span>④
<span></span>⑤
<p></p>
<span></span>⑥

$('div~span')获取的节点为④⑤⑥

1.3 并且(过滤)选择器

jQuery语法	解释
`:first`	匹配找到的第一个元素
`:last`	匹配找到的最后一个元素
`:not(selector)`	去除所有给定选择器匹配的元素
`:even`	匹配所有索引值为偶数的元素，从0开始计数
`:odd`	匹配所有索引值为奇数的元素，从0开始计数
`:eq(index)`	匹配一个给定索引值的元素，从0开始计数
`:gt(index)`	匹配所有大于给定索引值的元素，从0开始计数
`:lt(index)`	匹配所有小于给定索引值的元素，从0开始计数
`:header`	匹配如h1、h2、h3之类的标题元素

<body>
    <h1 class="hero">一级标题</h1>①
    <h2>二级标题</h2>②
    <h3>三级标题</h3>③

    <li>刘备</li>④
    <li id="zhang">张飞</li>⑤
    <li>关羽</li>⑥
    <li id="zhao">赵云</li>⑦

    <li>孙权</li>⑧
    <li class="hero">周瑜</li>⑨
    <li>黄盖</li>⑩
    <li>吕蒙</li>⑪    
</body>

jQuery表达式	获取的元素
`$("li:first")`	④
`$("li:last")`	⑪
`$("li:eq(4)")`	⑧
`$("li:gt(4)")`	⑨⑩⑪
`$("li:lt(3)")`	④⑤⑥
`$("li:even")`	④⑥⑧⑩
`$("li:odd")`	⑤⑦⑨⑪
`$("li:not(#zhao,#zhang)")`	④⑥⑧⑨⑩⑪
`$(":header")`	①②③

联合选择器 和 并且选择器

联合选择器使用逗号”,”分隔，比如$('#zhang,#zhao,.hero')获取的元素为①⑤⑦⑨
并且选择器无需分隔，但使用时要保证不会产生歧义。比如:$(":header.hero")和$(".hero:header")获取的结果一样，都是①；但$("li.hero")和$(".heroli")获取的结果不一样，因为$(".heroli")有歧义

1.4 内容过滤选择器

jQuery语法	解释
`:contains`	节点必须包含指定的内容
`:empty`	节点内容为空
`:has`	节点内部包含指定的选择器
`:parent`	寻找的节点必须作为父元素节点存在

<div>linken love beijing</div>①
<div class="apple">jack love shanghai</div>②
<div></div>③
<div><img/></div>④
<div>      </div>⑤

jQuery表达式	获取的元素
`$("div:contains(beijing)")`	①
`$("div:empty")`	③
`$("div:has(#apple)")`	②
`$("div:parent")`	①②④⑤

1.5 表单域选中选择器

这里用一个Demo来演示：

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script type="text/javascript" src="jquery-1.4.4.js"></script>

    <script type="text/javascript">

        function f1() {
            // 获得复选框的选中情况
            console.log($("input:lt(4):checked"));
            // 获得下拉列表的选中情况
            console.log($("option:selected"));

            // 每个过滤选择器使用之前，已经获得的元素节点的下表进行归为(从0开始重新计算)
            console.log($("input:gt(3):lt(2)"));// 结果:男、女
            console.log($("input:gt(1):lt(3)"));// 结果:足球、乒乓球、男
            console.log($("input:even:gt(1)"));// 结果:男、保密
        }

    </script>
</head>
<body>

    <h1>表单域选中选择器</h1>

    爱好:
    <input type="checkbox" name="hobby[]" value="篮球"/>篮球&nbsp;&nbsp;
    <input type="checkbox" name="hobby[]" value="排球"/>排球&nbsp;&nbsp;
    <input type="checkbox" name="hobby[]" value="足球"/>足球&nbsp;&nbsp;
    <input type="checkbox" name="hobby[]" value="乒乓球"/>乒乓球&nbsp;&nbsp;

    </br>

    性别:
    <input type="radio" name="sex" value="男">男&nbsp;&nbsp;
    <input type="radio" name="sex" value="女">女&nbsp;&nbsp;
    <input type="radio" name="sex" value="保密">保密&nbsp;&nbsp;

    </br>

    学历:
    <select>
        <option value="0">请选择</option>
        <option value="1">小学</option>
        <option value="2">中学</option>
        <option value="3">大学</option>
    </select>

    </br>

    <input type="button" value="触发" onclick="f1()"/>

</body>
</html>

钢伢仔

关注

0
点赞
踩
0

收藏

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

jQuery的选择器1.1 基本选择器 jQuery语法 JS语法/解释 $('#id属性值') document.getElementById() $('tag标签名称') document.getElementsByTagName() $('.clsss属性值') class属性值选择器 $('*') 通配符选择器，表示选择所有节点 $('s1,s2,s
复制链接

扫一扫

专栏目录