jQuery--选择器

最新推荐文章于 2024-08-09 07:06:21 发布

_Lilly

最新推荐文章于 2024-08-09 07:06:21 发布

阅读量302

点赞数

CC 4.0 BY-SA版权

分类专栏： # jQuery Javascript 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/qq_37331119/article/details/72794977

Javascript 同时被 2 个专栏收录

34 篇文章

订阅专栏

jQuery

7 篇文章

订阅专栏

本文详细介绍了jQuery中的基本筛选选择器、内容筛选选择器及可见性筛选选择器的应用方法，并通过实例展示了如何使用这些选择器来操作DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本筛选选择器

应用举例

$(".div:first")
$(".div:last")
$(".div:even")
$(".div:odd")
$(".aaron:eq(2)")
$(".aaron:gt(3)")
$(".aaron:lt(2)")

<div class="left">
        <div>
            <input type="checkbox" name="a" />
            <p>Aaron</p>
        </div>
        <div>
            <input type="checkbox" name="b" />
            <p>慕课</p>
        </div>
        <div>
            <input type="checkbox" name="c" checked="checked" />
            <p>其他</p>
        </div>
    </div>
    <script type="text/javascript">
        //:not 选择所有元素去除不匹配给定的选择器的元素
        //选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
        $("input:not(:checked)+p").css("background-color", "#CD00CD");
    </script>

内容筛选选择器
哈哈哈

注意事项：

1、:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
2、如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
3、:parent与:empty是相反的，两者所涉及的子元素，包括文本节点

$(".div:contains(':contains')")
$(".div:has(span)")
$("a:parent")
$("a:empty")

可见性筛选选择器
这里写图片描述

隐藏元素的方式如下

CSS display的值是none
type=“hidden”的表单元素
宽度和高度都是显示设置为0
一个祖先元素是隐藏的，该元素不会在页面上显示
CSS visibility的值是hidden
CSS opacity的值是0

如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

不在文档中的元素是被认为不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式