锋利的jQuery学习笔记-write less do more-内容、可见性过滤选择器

最新推荐文章于 2023-07-19 11:23:10 发布

FightingITPanda

最新推荐文章于 2023-07-19 11:23:10 发布

阅读量154

点赞数

文章标签： jquery 内容过滤选择器可见性过滤选择器

本文链接：https://blog.csdn.net/FightingITPanda/article/details/80329574

版权

1.内容过滤选择器

<!--页面格式-->
<head>
        <script src = "jquery.js"></script>
        <script src = "test.js"></script>
        <style>
            span{
                width:140px;
                height:140px;
                margin:5px;
                background:orchid;
                border:#000 1px solid;
                float :left;
                font-size :17px;
                font-family :verdana;
            }
            div.min {
                width:55px;
                height:55px;
                background-color: #aaa;
                font-size:12px;
            }
            div.hide {
                display:none;
            }
            .one{
                width:140px;
                height:140px;
                margin:5px;
                background:greenyellow;
                border:royalblue 5px solid;
                float :left;
                font-size :17px;
                font-family :verdana;
            }
            .min{
                width:140px;
                height:140px;
                margin:5px;
                background:#aaa;
                border:#000 2px solid;
                float :left;
                font-size :17px;
                font-family :verdana;
            }
        </style>
    </head>
<body>
    <h1>过滤选择器</h1>
    <h2>基本过滤选择器</h2>
    <div class= one id = one >
        id为one、class为one的div
        <div class =min>class 为min的div</div>
    </div>
    <div class = one id = two title = test>
        id为two class为one title为test的div
        <div class = min title=other>class为min title为other的div</div>
        <div class = min title = test>class 为min title为test的div</div>
    </div>
    <div class =one >
        <div class = min>class 为min的div</div>
        <div class = min>class为min的div</div>
        <div class = min>class 为min的div</div>
        <div class = min></div>
    </div>
    <div class =one >
        <div class = min>class 为min的div</div>
        <div class = min>class为min的div</div>
        <div class = min>class 为min的div</div>
        <div class = min title=test> class为min title为test的div</div>
    </div>
    <div style = "display :none;" class = none>
        style的display为none的div
    </div>
    <div class = hide>class 为hide的div</div>
    <div>
        包含input的type为hideen的div<input type =hidden size=8/>

    </div>
    <span id = mover>正在执行动画的span元素</span>
    <div class = one></div>
    <button onclick="panda3()">点我 点我</button>

</body>

这里写图片描述

//函数响应部分
function panda3(){
     //内容过滤选择器   子元素或者文本内容
    //$("div:contains(min)").css("background","black");//获取div文本内容包含min的div  包括外层div
    //$("div:empty").css("background","antiquewhite");//获取只有个<div></div>框，其它啥也没有的元素
    //$("div:has('.min')").css("background","#4169E1");
    $("div:parent").css("background","#4169E1");//获取不是div框架的所有div
}

Tip:
1.

$("div:contains(嘎嘎)") 获取的是div后面的文本内容包含嘎嘎的所有div，包含意味着是模糊查询，
<div>
    <div> 嘎嘎 呱呱</div>
</div>
<!--这个子div的所有内容都是外层div的文本 所以$("div:contains(嘎嘎)")会把子div和外层div都获取到-->

$("div:empty") 获取空的div 也就是说只有div框架<div></div>,没有子div也没有文本的div，就是啥也没有只有框的div
$("div:parent")和$("div:empty")是一对，获取不是只有框的div，至少有文本

$("div:has('.min')") 这个获取的是div下有class为min的元素的div，has明显是有的意思，有啥呢?有class为min的元素在div里的div

2.可见性过滤选择器

function panda3(){
    $("div:visible").css("background","aqua");//获取所有可见的div
    $("div:hidden").css("background","aqua");//获取所有不可见的div
}

tip:
$(“:hidden”) 获取所有不可见元素，
包括：<input type ="hidden"/>

<div style="display:one;">

<div style = "visibility:none;">

FightingITPanda

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫