Jquery | 基础 | 属性过滤选择器

Posted 2021-01-08 如有一味绝境，非历十方生死

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery | 基础 | 属性过滤选择器相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <title>使用jQuery 属性过滤选择器</title>
    <style type="text/css">
        body {
            font-size: 12px;
            text-align: center
        }

        div {
            float: left;
            border: solid 1px #ccc;
            margin: 8px;
            width: 65px;
            height: 65px;
            display: none
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#button1").click(function () { // 显示所有含有name 属性的元素
                $("div[name]").show(1000);
                
            })
            $("#button2").click(function(){ 
                //显示所有属性title的值是"A"的元素             
                 $("div[title=‘n‘]").show(1000);            
             })
            $("#button3").click(function(){
                //显示属性title的值不是"n"的元素
                 $("div[title!=‘n‘]").show(1000);
            })
            $("#button4").click(function(){
                //显示所有属性title的值以"n"开始的元素
                $("div[title^=‘n‘]").show(1000);
            })
            $("#button5").click(function(){
                //显示所有属性title的值以"e"结束的元素
                $("div[title$=‘e‘]").show(1000);
            })
            $("#button6").click(function(){
                //显示所有属性title的值中含有"e"的元素
                 $("div[title*=‘e‘]").show(1000);
            })
            $("#button7").click(function(){
               //显示所有属性title的值中含有"e",且属性id的值是"div2"的元素
                $("div[id=‘div2‘][title*=‘e‘]").show(1000);
            })
        })
    </script>
</head>

<body>

    <div id="div1" name="n1">hello</div>
    <div title="n" name="n2">world</div>
    <div id="div2" title="ne">good morning</div>
    <div title="nef">good afternoon</div>


    <button id="button1">显示所有含有name 属性的元素</button>
    <button id="button2">显示所有属性title的值是"A"的元素 </button>
    <button id="button3">显示属性title的值不是"n"的元素</button>
    <button id="button4">显示所有属性title的值以"n"开始的元素</button>
    <button id="button5">显示所有属性title的值以"e"结束的元素</button>
    <button id="button6">显示所有属性title的值中含有"e"的元素</button>
    <button id="button7">显示所有属性title的值中含有"e",且属性id的值是"div2"的元素</button>
</body>

</html>

以上是关于Jquery | 基础 | 属性过滤选择器的主要内容，如果未能解决你的问题，请参考以下文章

JQuery

使用jQuery函数：选择器工具类 Ajax

jQuery 基本选择器层次选择器过滤选择器内容过滤选择器可见过滤选择器属性过滤选择器表单对象属性过滤选择器

jquery过滤选择器-----------（表单对象属性过滤选择器与表单选择器）

深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

jquery基础入门