zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    面试问题之C++语言:C++中指针和引用的区别
    手撕代码:最长回文子串
    手撕代码:求字符串最长回文子序列
    手撕代码:用宏来实现获取数组的大小
    手撕代码之线程:thread类简单使用
    面试问题之计算机网络:OSI七层网络模型及相关协议
    C++各种输入
    C printf格式化输出
    记一次mac 安装MySQL-python 的惨痛经历
    记一次tomcat程序运行慢的处理过程
  • 原文地址:https://www.cnblogs.com/whzym111/p/6062775.html
Copyright © 2011-2022 走看看