在这么多属性选择器中[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. codeforces 436A. Feed with Candy 解题报告

    题目链接:http://codeforces.com/contest/436/problem/A 题目意思:给出 n 颗只有两种类型:fruit 和 caramel的candies,这些candies ...

  2. 小米2在Eclipse 调试，要注意下列步骤。（转）

    小米2在Eclipse 调试,要注意下列步骤.1.连接线,打开设置:USB线连接小米2,在设置-->开发者选项->USB 调是打开.如果这一步,就业在Eclipse中真机调试,下面的步骤不 ...

  3. Intel® Media Server Studio Support

    复制自网址:https://software.intel.com/en-us/intel-media-server-studio-support/code-samples Code Samples M ...

  4. NOIP2008题解

    传送门 考查题型 二分图 暴力枚举 判断素数 dp T1 传纸条 题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和 ...

  5. JAVA线程同步 （一）wait(), notify()和notifyAll()使用

    wait(),notify()和notifyAll()都是java.lang.Object的方法: wait(): Causes the current thread to wait until an ...

  6. bzoj1996

    区间dp 其实我们发现对于一段区间我们是这样构造的,每次我们会向两端放数,这样就有四种情况,且必须满足题意,初值是dp[i][i][0]=1,因为第一个人只有一种放法,不分左右.其实看见dp[i][i ...

  7. 插入符的创建（MFC）

    int CDrawRectangleDlg::OnCreate(LPCREATESTRUCT lpCreateStruct) { ) ; // TODO: 在此添加您专用的创建代码 CreateSol ...

  8. centos7环境变量配错导致命令不能用

    吓得我都不知道挖掘机哪家强了, centos7由于配置环境变量的时候少打了$PATH,导致很多命令不能用了,吓了一跳 解决办法: 1.直接在命令行输入: export PATH=/usr/local/ ...

  9. python 合集set,交集,并集,差集,对称差集别搞混

    有集合 x与y x = {1,2,3,4,5}y = {4,5,6,7,8} x和y的交集为 {4,5} x和y的对称差集{1, 2, 3, 6, 7, 8} x和y的并集{1, 2, 3, 4, 5 ...

  10. 第四篇 .NET高级技术之结构体及值类型引用类型

    结构体 在平时的开发中很少自己去写结构体,他是一种值类型的数据.对于结构,不像类那样存在继承,一个结构体不能从另一个结构或类继承.但是结构体从基类Object继承. 语法: //struct是定义结构 ...