锋利的jQuery学习笔记-write less do more -属性选择器、表单对象属性过滤选择器

<head>
        <script src = "jquery.js"></script>
        <meta charset="UTF-8">
        <title></title>
        <style>

            div{
            font-size:18px;
            border:groove;
        }
        </style>

    </head>
    <body>
        <div title = en>title为en的div</div>
        <div title = en-uk>title为en-uk的div</div>
        <div title = english>title 为English的div</div>
        <div title = 'en uk'> title 为en uk的div</div>
        <div title = uken>title 为uken的div</div>
        <button onclick="panda()"  >点我 点我</button>
        <form id = form1 action = "#" style = display:none>
            可用元素<input name = add value = "可用文本框" /></br>
            不可用元素：<input name = email disabled = disabled value ="不可用文本框"/><br/>
            可用元素<input name = add value = "可用文本框" /></br>
            不可用元素：<input name = email disabled = disabled value ="不可用文本框"/><br/>
        多选框：<br/>
        <input type = "checkbox" name = newsletter checked = checked value= test1 />test1
        <input type = "checkbox" name = newsletter  value= test2 />test2
        <input type = "checkbox" name = newsletter  value= test3 />test3
        <input type = "checkbox" name = newsletter  value= test4 />test4
        <input type = "checkbox" name = newsletter  value= test5 />test5
        <br/><br/>
        下拉列表1：<br />
        <select name=test multiple = multiple style=height:100px;>
            <option>浙江</option>
            <option selected = selected>湖南</option>
            <option>北京</option>
            <option selected = selected>天津</option>
            <option>广州</option>
            <option>湖北</option>
        </select>
        <br/><br/>
        下拉列表1：<br />
        <select name=test2 >
            <option>浙江</option>
            <option >湖南</option>
            <option>北京</option>
            <option selected = selected>天津</option>
            <option>广州</option>
            <option>湖北</option>
        </select>
        <div></div>
        </form>
            </body>
    <script>

        function panda(){
            //属性选择器
            //$("div[title^=en]").css("background","pink");//获取title属性值以en为开头的div  
            //$("div[title$=sh]").css("background","blue");//获取title属性值以en为结尾的div
            //$("div[title*=en]").css("background","orange");//title属性值包含en的div都获取到
            //$('div[title|"en"]').css("background","green");//title=en 或者en-*的div都被获取到
            //$("div[title~'uk']").css("background","#CCCCCC");//空格
            //表单对象属性过滤选择器
            //$("#form1 input:enabled").val("啦啦啦 我是卖报小行家");//获取id=form表单下可用的input  并将其value值置为啦啦啦 我是卖报小行家
        //$("#form1 input:disabled").val("kongfu panda");//获取form表单中不可用的input 将value值置为kongfu panda
        //alert("多选框选中的个数为："+$("#form1 input:checked").length);//获取表单中选中的多选框的长度
        //alert("下拉框中选中的文本内容为"+$("#form1 select :selected").text())//获取form表单中所有下拉框选中的文本

        }
    </script>

Tip：
1.$("div[title^=en]") 相当于模糊查询，首先div有属性title，并且title的值是以en开头的所有div都获取到
2.$("div[title$=sh]") 和上面是一对，title值以sh结尾的div都获取到
3.$("div[title*=en]") *是通配符，所以title的值只要包含en这样的div都被获取到
4.$('div[title|"en"]') title=en或者title=en- 后面随便接啥，这样的div全部获取
5.$("div[title~'uk']")跟上面差不多 title=en 或者title=en空格后面随便接，这样的div被获取到

锋利的jQuery学习笔记-write less do more -属性选择器、表单对象属性过滤选择器

猜你喜欢