在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的

[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等

[attr*="value"]能在网站中帮助我们匹配不同类型的文件

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

    <h2>属性筛选选择器</h2>

    <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>

    <div class="left" testattr="true" >

        <div class="div" testattr="true" name='p1'>

            <a>[att=val]</a>

        </div>

        <div class="div" testattr="true" p2>

            <a>[att]</a>

        </div>

        <div class="div" testattr="true" name="-">

            <a>[att|=val]</a>

        </div>

        <div class="div" testattr="true" name="a b">

            <a>[att~=val]</a>

        </div>

    </div>

    <script type="text/javascript">

         //查找所有div中，属性name=p1的div元素

         $("div[name = p1]").css("border", "3px groove red");

    </script>

    <script type="text/javascript">

        //查找所有div中，有属性p2的div元素

        $("div[p2]").css("border", "3px groove blue");

    </script>

    <script type="text/javascript">

        //查找所有div中，有属性name中的值只包含一个连字符“-”的div元素

        $("div[name|='-']").css("border", "3px groove #00FF00");

    </script>

    <script type="text/javascript">

        //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素

        $("div[name~='a']").css("border", "3px groove #668B8B");

    </script>

    <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>

    <div class="left" testattr="true" >

        <div class="div" testattr="true"  name='imooc-aaorn'>

            <a>[att^=val]</a>

        </div>

        <div class="div" testattr="true"  name='aaorn-imooc'>

            <a>[att$=val]</a>

        </div>

        <div class="div" testattr="true"  name="attr-test-selector">

            <a>[att*=val]</a>

        </div>

        <div class="div" name="a b">

            <a>[att!=val]</a>

        </div>

    </div>

    <script type="text/javascript">

         //查找所有div中，属性name的值是用imooc开头的

         $("div[name ^= imooc]").css("border", "3px groove red");

    </script>

    <script type="text/javascript">

         //查找所有div中，属性name的值是用imooc结尾的

         $("div[name $= imooc]").css("border", "3px groove blue");

    </script>

    <script type="text/javascript">

        //查找所有div中，有属性name中的值包含一个test字符串的div元素

        $("div[name*='test']").css("border", "3px groove #00FF00");

    </script>

    <script type="text/javascript">

        //查找所有div中，有属性testattr中的值没有包含"true"的div

        $("div[testattr != 'true']").css("border", "3px groove #668B8B");

    </script>

</body>

</html>

jQuery选择器之属性筛选选择器的更多相关文章

  1. jQuery选择器之基本筛选选择器

    <h2>基本筛选器</h2> <h3>:first/:last/:even/:odd</h3> <div class="left&quo ...

  2. jquery选择器之属性过滤选择器

    <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> ...

  3. jquery选择器之属性过滤选择器详解

    代码如下: <style type="text/css">  /*高亮显示*/  .highlight{       } </style> 复制代码代码如下 ...

  4. jquery选择器之基本筛选选择

    1.基本选择器 2.内容筛选选择器 3.可见性筛选选择器 4.属性筛选选择器 5.子元素筛选选择器 6.表单元素选择器 7.表单对象属性筛选器

  5. jquery 表单对象属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  6. jQuery选择器之子元素选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  7. jQuery选择器之属性选择器Demo

    测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  8. jquery选择器之属性选择器

    [attribute]   匹配指定属性名的所有元素 [attribute=value] 匹配给定的属性名是某个特定值的属性 [attribute!=value] 匹配给定的属性名不是某个特定值的属性 ...

  9. jQuery选择器之内容过滤选择器Demo

    测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

随机推荐

  1. js生成随机编码并赋值给input文本框

    效果图如下: 页面代码: <div class="form-item form-width-in fr"> <label>产 品 编 码</label ...

  2. codeforces C. Magic Formulas 解题报告

    题目链接:http://codeforces.com/problemset/problem/424/C 题目意思:给出 n 个数:p1, p2, ..., pn,定义: q1 = p1 ^ (1 mo ...

  3. Oracle：impdb导入

    最近有现场给我一份用expdp导出dmp文件,我用imp导入时,报错.因为导出dmp的数据库是11g,导入的数据库也是11g, 但客户端安装的是10g,不能用imp导入:所以只能试着用impdp导入: ...

  4. ASP.NET统计图表控件

    近来客户需要将前段时间开发的统计信息用图表展示出来,还要多个图表类型,例如:柱状图.饼图.曲线图.三维图等等.在网上google了一下,发现了三个(也许更多)可以使用的控件.下面我们一起看看这三个控件 ...

  5. phpMVC框架的核心启动类定义

    <?php//核心启动类class Framework { //定义一个run方法 public static function run(){ // echo "hello,wrold ...

  6. Eclipse慢慢学会的快捷键

    Java编辑器 添加单个import Ctrl+Shift+M Java编辑器 组织多个import Ctrl+Shift+O Ctrl+M切换窗口的大小 Ctrl+D删除当前行 ---------- ...

  7. 理解Objective-C Runtime （五）协议与分类

    Objective-C中的分类允许我们通过给一个类添加方法来扩充它(但是通过category不能添加新的实例变量),并且我们不需要访问类中的代码就可以做到. Objective-C中的协议是普遍存在的 ...

  8. Watir: 应用Watir，调用AutoIT清空IE浏览器的Cookies

    require 'win32ole'ai = WIN32OLE.new("AutoItX3.Control")ai.RunWait("RunDll32.exe InetC ...

  9. 内部锁之一：锁介绍（偏向锁 & 轻量级锁 & 重量级锁 & 各自优缺点及场景）

    一.内部锁介绍 上篇文章<Synchronized之二:synchronized的实现原理>中向大家介绍了Synchronized原理及优化锁.现在我们应该知道,Synchronized是 ...

  10. C：static 关键字、静态变量、跨类访问数据

    static 在OC中的使用 参考1   参考2   参考3   参保4    参考5 跨类访问成员 参考 +号方法就是类方法(静态方法),说明不用创建对象,可以直接通过类型去直接调用这个方法,在OC ...