<!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=""></input>

            <br>

            <input type="text"  value="input111"></input>

            <br>

            <input type="text"  value=""></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="" ></textarea>

                 <br />

             <input type="radio"  checked="checked" />女

                 <input type="radio" />男

                 <br />

             <input type="checkbox"  checked="checked" />

             <input type="checkbox" />

             <input type="checkbox" />

        </div> 

    </body>

</html>

jQuery学习-属性选择器的更多相关文章

  1. jquery 学习(一) - 选择器

    基本选择器(html) <div>123</div> <div id="n1">123</div> <span>321& ...

  2. jquery学习：选择器&dom操作

    分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值" ...

  3. jQuery学习(三)——选择器总结

    1.基本选择器 id选择器:$(“#id名称”); 元素选择器:$(“元素名称”); 类选择器:$(“.类名”); 通配符:* 多个选择器共用(并集) 案例代码: <!DOCTYPE html& ...

  4. jquery学习--属性操作

    学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...

  5. jQuery学习之------选择器

    a.id选择器 <div id=”test1”></div> var div1=$(“#test1”);                //同css的写法一样id选择器用#号实 ...

  6. jQuery学习- 子选择器与可见性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. jQuery学习- 内容选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. jQuery学习- 层叠选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. jQuery学习- 位置选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. java基础——队列

    目录 前言 基础 实现: 两个队列模拟一个堆栈 前言 java已经提供了堆和栈的相对应的类,这里只是模拟一下队列. 队列是一种先进先出的线性表. 基础 java5中新增加了java.util.Queu ...

  2. PowerShell小技巧 算术表达式求值

    前几天要统计一个组虚拟机使用的硬盘容量,只希望得到一个大概的值,计算的值截图如下: 写成算术表达式的话大概是:60 * 3 + 80 * 2 + 90 * 3 + 120 * 6 + 140 * 2 ...

  3. Oracle EBS 启用关于此页

    FND:诊断英文为FND: Diagnostics,用于设置是否显示“关于此页”个性化自助定义英文为Personalize Self-Service Defn,用户设置在登录后,OAF页面是否显示“个 ...

  4. SQL Server ->> 条件筛选做法之 -- IN(VALUE1,VALUE2,...)与INNER JOIN STRING_SPLIT()性能对比

    在以逗号拼接而成的字符串,传入给IN字句的元素字符串中包涵了1400多个元素 两种做法分别为 AND e.ssPfCityId IN ( SELECT CAST(value AS INT) FROM ...

  5. MySQL字符存储：charset-unicode-sets

    https://dev.mysql.com/doc/refman/8.0/en/charset-unicode-sets.html 10.10.1 Unicode Character Sets MyS ...

  6. [翻译] CSStickyHeaderFlowLayout

    CSStickyHeaderFlowLayout https://github.com/jamztang/CSStickyHeaderFlowLayout Parallax, Sticky Heade ...

  7. js 获取后缀参数

    function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...

  8. mongodb的学习-3-在Mac上的安装配置

    1.使用homebrew安装: brew install mongodb 查看安装好的版本: mongo --version MongoDB shell version v3.6.4 git vers ...

  9. JFinal 部署在 Tomcat 下推荐方法(转载)

    经常有人在群里问 tomcat 下项目部署的问题,现写个简单的博文,希望能帮助到有需要的人. 首先明确一下 JFinal 项目是标准的 java web 项目,其部署方式与普通 java web 项目 ...

  10. PAT乙级1021

    1021 个位数统计 (15 分)   给定一个 k 位整数 N=d​k−1​​10​k−1​​+⋯+d​1​​10​1​​+d​0​​ (0≤d​i​​≤9, i=0,⋯,k−1, d​k−1​​& ...