<!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. lock free数据结构内存回收技术-hazard pointer

    lock free数据结构一般来说拥有比基于lock实现的数据结构更高的性能,但是其实现比基于lock的实现更为复杂,需要处理的难题包括预防ABA问题,内存如何重用和回收等.通常,最简单最有效的处理A ...

  2. Entity Framework工具POCO Code First Generator的使用

    在使用Entity Framework过程中,有时需要借助工具生成Code First的代码,而Entity Framework Reverse POCO Code First Generator是一 ...

  3. show tables from information_schema/performance_schema/sys;

    root@localhost:3306.sock [performance_schema]>select version();+------------+| version()  |+----- ...

  4. 显示iOS所有系统字体

    显示iOS所有系统字体 源码地址: https://github.com/YouXianMing/UI-Component-Collection 效果图: 便于你开发中寻找适合自己的字体, demo中 ...

  5. sudo实例--企业生产环境用户权限集中管理方案实例

    根据角色的不同,给不同的用户分配不同的角色1.创建初级工程师3个,网络工程师1个,中级工程师1个,经理1个      #  批量创建用户 for user in chuji{01..03} net01 ...

  6. Linux rpm命令详解

    rpm命令是RPM软件包的管理工具.rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他发行版的采用.RPM ...

  7. 铁乐学python_day18-19_面向对象编程1

    以下笔记绝大部分(百分之80或以上)摘自我的授课老师之一:老男孩教育中的景老师. 她上课讲的知识点由浅入深,引人入胜,听她的课完全不会感觉到困阿,而且不知不觉中就感觉掌握了. 她的博客是: http: ...

  8. MySql5.7.* 多实例安装部署

    参考文献: http://blog.csdn.net/tornadojava/article/details/53318773 http://blog.csdn.net/u013948858/arti ...

  9. PHP设计模式系列 - 单例

    单例模式 通过提供自身共享实例的访问,单例设计模式用于限制特定对象只能被创建一次. 使用场景 例如数据库实例,一般都会走单例模式. 单例模式可以减少类的实例化 代码:来源InitPHP框架,先检测类有 ...

  10. Python简单实现多级菜单

    # -*- coding: utf-8 -*- # @Time : 2018-06-01 13:40 # @Author : 超人 # @Email : huxiaojiu111@gmail.com ...