jQuery - 筛选选择器

其他 2018-07-19 00:26:56 阅读次数: 0

jQuery选择器之基本筛选选择器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>基本筛选器</h2>
    <h3>:first/:last/:even/:odd</h3>
    <div class="left">
        <div class="div"><p>div:first</p><p>:even</p></div>
        <div class="div"><p>:odd</p></div>
        <div class="div"><p>:even</p></div>
        <div class="div"><p>:odd</p></div>
        <div class="div"><p>:even</p></div>
        <div class="div"><p>div:last</p><p>:odd</p></div>
    </div>
    <script type="text/javascript">
        //找到第一个div
        $(".left div:first").css("color", "red");

        //找到最后一个div
        $(".left div:last").css("color", "blue");

        //:even 选择所引值为偶数的元素，从 0 开始计数
        $(".left div:even p").css("background-color", "yellow");
        
        //:odd 选择所引值为奇数的元素，从 0 开始计数
        $(".left div:odd p").css("background-color", "green");
    </script>
    
    
    <h3>:eq/:gt/:lt</h3>
    <div class="left">
        <div class="vegeta"><p>:lt(3)</p></div>
        <div class="vegeta"><p>:lt(3)</p></div>
        <div class="vegeta"><p>:eq(2)</p></div>
        <div class="vegeta"></div>
        <div class="vegeta"><p>:gt(3)</p></div>
        <div class="vegeta"><p>:gt(3)</p></div>
    </div>
    <script type="text/javascript">
        //:eq
        //选择单个,数组索引从0开始
        $(".left .vegeta").eq(2).css("color", "blue");
        // $(".left .vegeta:eq(2)").css("color", "blue");

        //:gt 选择匹配集合中所有索引值大于给定index参数的元素
        $(".left .vegeta:gt(2)").css("color", "red");

        //:lt 选择匹配集合中所有索引值小于给定index参数的元素
        //与:gt相反
        $(".left .vegeta:lt(2)").css("color", "pink");
    </script>
    
    <h3>:not</h3>
    <div class="left">
        <div><input type="checkbox" name="a" /><p>vegeta</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元素，赋予颜色
        $(".left div input:not(:checked)+p").css("background-color", "#f5f5f5");
    </script>
</body>

</html>

jQuery选择器之内容筛选选择器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>内容筛选器</h2>
    <h3>:contains/:has</h3>
    <div class="left">
        <div class="div"><p>:vegeta</p></div>
        <div class="div"><p>:vegeta</p></div>
        <div class="div"><p><span>:has</span></p></div>
        <div class="div"><p>:vegeta</p></div>
    </div>

    <script type="text/javascript">
        //查找所有class='div'中DOM元素中包含"vegeta"的元素节点
        //并且设置颜色
        $(".div:contains(':vegeta')").css("color", "red");

        //查找所有class='div'中DOM元素中包含"span"的元素节点
        //并且设置颜色
        $(".div:has(span)").css("color", "blue");
    </script>


    <h3>:parent/:empty</h3>
    <div class="left">
        <div class="aaron"><a>:vegeta</a></div>
        <div class="aaron"><a>:vegeta</a></div>
        <div class="aaron"><a>:vegeta</a></div>
        <div class="aaron"><a></a></div>
    </div>
    <script type="text/javascript">
       //选择所有包含子元素或者文本的a元素
       //增加一个蓝色的边框
       $("a:parent").css("border", "1px dashed blue");

       //找到a元素下面的所有空节点(没有子元素)
       //文本颜色设置为red
       $("a:empty").text(":empty").css("color", "red"); 
    </script>
</body>
</html>

jQuery选择器之可见性筛选选择器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>可见性筛选选择器</h2>
    <h3>:visible/:hidden</h3>
    <div class="left">
        <div class="div">
            <a>display</a><p id="div1" style="display:none;">display</p>
        </div>
        <div class="div">
            <a>width</a><a>height</a><p id="div2" style="width:0;height:0">width/height</p>
        </div>
        <div class="div">
            <a>visibility</a><a>opacity</a><p id="div3" style="visibility:hidden;opacity:0">visibility</p>
        </div>
    </div>
    
    <!-- 用来显示信息的p标签 -->
    <p id="show"></p>

    <script type="text/javascript">
        function show (ele) {
            if (ele instanceof jQuery) {
                $("#show").html('元素的长度（个数）的 = ' + ele.length)
            } else {
                alert(ele+' 不是jQuery对象')
            }
        }

        //查找id = div1的DOM元素,是否可见
        show($("#div1:visible"));

        //查找id = div2的DOM元素,是否可见
        show($("#div2:visible"));

        //查找id = div3的DOM元素,是否可见
        show($("#div3:visible"));

        //查找id = div1的DOM元素,是否隐藏
        show($('#div1:hidden'));

        //查找id = div2的DOM元素,是否隐藏
        show($("#div2:hidden"));

        //查找id = div3的DOM元素,是否隐藏
        show($("#div3:hidden"));
    </script>
</body>
</html>

jQuery选择器之属性筛选选择器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>属性筛选选择器</h2>
    <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
    <div class="left" testattr="true" >
        <div class="div" testattr="true" name='p1'>
            <a>[att=val]</a>
        </div>
        <div class="div" testattr="true" p2>
            <a>[att]</a>
        </div>
        <div class="div" testattr="true" name="-">
            <a>[att|=val]</a>
        </div>
        <div class="div" testattr="true" name="a b">
            <a>[att~=val]</a>
        </div>
    </div>
    <script type="text/javascript">
        //查找所有div中，属性name=p1的div元素
        $('div[name=p1]').css("color", "red"); 

        //查找所有div中，有属性p2的div元素
        $('div[p2]').css("color", "blue"); 

        //查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
        $('div[name|="-"]').css("color", "pink"); 

        //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
        $('div[name~="a"]').css("color", "#eee"); 
    </script>


    <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
    <div class="left" testattr="true" >
        <div class="div" testattr="true"  name='imooc-aaorn'>
            <a>[att^=val]</a>
        </div>
        <div class="div" testattr="true"  name='aaorn-imooc'>
            <a>[att$=val]</a>
        </div>
        <div class="div" testattr="true"  name="attr-test-selector">
            <a>[att*=val]</a>
        </div>
        <div class="div" name="a b">
            <a>[att!=val]</a>
        </div>
    </div>
    <script type="text/javascript">
        //查找所有div中，属性name的值是用imooc开头的
        $('div[name^=imooc]').css("background-color", "red"); 

        //查找所有div中，属性name的值是用imooc结尾的
        $('div[name$=imooc]').css("background-color", "blue"); 

        //查找所有div中，有属性name中的值包含一个test字符串的div元素
        $('div[name*="test"]').css("background-color", "pink"); 

        //查找所有div中，有属性testattr中的值没有包含"true"的div
        $('div[testattr!="true"]').css("background-color", "#eee"); 
    </script>
</body>
</html>

jQuery选择器之子元素筛选选择器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>子元素筛选选择器</h2>
    <h3>:first-child、:last-child、:only-child</h3>
    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>
    </div>
    <script type="text/javascript">
        //查找class="first-div"下的第一个a元素
        //针对所有父级下的第一个
        $('.first-div a:first-child').css("color", "red");

        //查找class="first-div"下的最后一个a元素
        //针对所有父级下的最后一个
        //如果只有一个元素的话，last也是第一个元素
        $('.first-div a:last-child').css("color", "blue");

        //查找class="first-div"下的只有一个子元素的a元素
        $('.first-div a:only-child').css("color", "blue");
    </script>

    <h3>:nth-child、:nth-last-child</h3>
    <div class="left last-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>第三个元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>第三个元素</a>
            <a>:last-child</a>
        </div>
    </div>
    <script type="text/javascript">
        //查找class="last-div"下的第二个a元素
        $('.last-div a:nth-child(2)').css("color", "#CD00CD");

        //查找class="last-div"下的倒数第二个a元素
        $('.last-div a:nth-last-child(2)').css("color", "red");
    </script>
</body>
</html>

jQuery选择器之表单元素选择器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>input{display: block;margin: 10px;padding:10px;}</style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>子元素筛选选择器</h2>
    <h3>input、text、password、radio、checkbox</h3>
    <h3>submit、image、reset、button、file</h3>
    <div class="left first-div">
        <form>
            <input type="text" value="text类型"/>
            <input type="password" value="password"/>
            <input type="radio"/>
            <input type="radio"/> 
            <input type="radio"/> 
            <input type="checkbox"/>
            <input type="checkbox"/>
            <input type="checkbox"/>
            <input type="submit" />
            <input type="image" />
            <input type="reset" />
            <input type="button" value="Button" />
            <input type="file" />
        </form>
    </div>
    <script type="text/javascript">
        //查找所有 input, textarea, select 和 button 元素
        //:input 选择器基本上选择所有表单控件
        $(':input').css("border", "1px dashed green"); 

        //匹配所有input元素中类型为text的input元素
        $('input:text').css("background", "pink");

        //匹配所有input元素中类型为password的input元素
        $('input:password').css("background", "yellow");

        //匹配所有input元素中的单选按钮,并选中
        $('input:radio').attr('checked','true');

        //匹配所有input元素中的复选按钮,并选中
        $('input:checkbox').attr('checked','true');

        //匹配所有input元素中的提交的按钮,修改背景颜色
        $('input:submit').css("background", "#C6E2FF");

        //匹配所有input元素中的图像类型的元素,修改背景颜色
        $('input:image').css("background", "#F4A460");

        //匹配所有input元素中类型为按钮的元素
        $('input:button').css("background", "red");

        //匹配所有input元素中类型为file的元素
        $('input:file').css("background", "blue");
    </script>
</body>
</html>

jQuery选择器之表单对象属性筛选选择器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>input {display: block;margin: 10px;padding: 10px;}</style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>表单对象属性筛选选择器器</h2>
    <h3>enabled、disabled</h3>
    <form>
        <input type="text" value="未设置disabled" />
        <input type="text" value="设置disabled" disabled="disabled" />
        <input type="text" value="未设置disabled" />
    </form>
    <script type="text/javascript">
        //查找所有input所有可用的（未被禁用的元素）input元素。
        $('input:enabled').css("border", "2px groove red");

        //查找所有input所有不可用的（被禁用的元素）input元素。
        $('input:disabled').css("border", "2px groove blue");
    </script>

    <h3>checked、selected</h3>
    <form>
        <input type="checkbox" checked="checked">
        <input type="checkbox">
        <input type="radio" checked>       
        <input type="radio">
        
        <select name="garden" multiple="multiple">
            <option>imooc</option>
            <option selected="selected">慕课网</option>
            <option>aaron</option>
            <option selected="selected">博客园</option>
          </select>

    </form>
    <script type="text/javascript">
         //查找所有input所有勾选的元素(单选框,复选框)
         //移除input的checked属性
        $('input:checked').removeAttr('checked')

         //查找所有option元素中,有selected属性被选中的选项
         //移除option的selected属性
        $('option:selected').removeAttr('selected')
    </script>
</body>
</html>

jQuery选择器之特殊选择器this

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>特殊选择器this</h2>
    <p id="test1">点击测试：通过原生DOM处理</p>
    <p id="test2">点击测试：通过原生jQuery处理</p>

    <script type="text/javascript">
        var p1 = document.getElementById('test1')
        p1.addEventListener('click',function(){
            //直接通过dom的方法改变颜色
            this.style.color = "red"; 
        },false);

        $('#test2').click(function(){
            //通过包装成jQuery对象改变颜色
            $("#test2").css('color','blue');
        })
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/cai181191/article/details/81060260
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022