jQuery学习-属性选择器

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
        $(function(){
            
        //选择input标签 下类型属性为text和password的输入框
         $("input[type='text']").css("border","1px solid red");    
         $("input[type='password']").click(function(){
             alert("点击事件!")
         });
         
         
        //利用尾匹配完成对.cn结尾的超链接筛选 
        //$=代表以XXX结尾的情况
        $("a[href$='.cn']").css("border","1px solid green");    
        
        //^=代表头匹配,筛选http://开头的超链接
        $("a[href^='http://']").css("border","1px solid red");    
        
        //*=代表任意属性匹配,标签中任意属性值包含有'input'都会被选中
        $("*[value*='input']").css("border","2px solid red");
        
        //选择拥有rows属性的组建
        $("*[rows]").css("border","2px solid red");
        
        //选择 选中的单选框 多条件组合
        $("input[type='radio'][checked='checked']").css("width","100px");
        $("input[type='checkbox'][checked='checked']").css("width","100px");
        
        
        //被禁用的文本框
        $("input[type='text'][disabled='disabled']").css("border","1px solid blue");
        
        });
       </script>
    </head>
    <body>
        <div>
            <input type="text"  value="123"></input>
            <br>
            <input type="text"  value="input111"></input>
            <br>
            <input type="text"  value="333"></input>
            <br>
            <input type="password"  ></input>
            <br>
            <input type="text"  disabled="disabled"  value="diididid"></input>
            <br>
            <br><!--[if IE]>
                
            <![endif]-->
            <a href="www.sina.com.cn">sina</a>
            <br />
                <a href="http://baidu.com">baidu</a>
                    <br />
             <textarea rows="2" ></textarea>    
                 <br />
             <input type="radio"  checked="checked" /><input type="radio" /><br />
             <input type="checkbox"  checked="checked" />1
             <input type="checkbox" />2
             <input type="checkbox" />3
        </div> 
        
    </body>
</html>

 

posted @ 2016-11-14 18:02  whzym111  阅读(169)  评论(0编辑  收藏  举报