<!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="https://www.imooc.com/static/lib/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选择器之属性筛选选择器

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型 ...

  2. jQuery的筛选选择器

    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...

  3. jQuery选择器之表单对象属性筛选选择器

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

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

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

  5. jquery 内容筛选选择器

    基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上 注意事项: :contains与:has都 ...

  6. 【转】jQuery属性过滤选择器

    属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素. [attribute]    选取用次属性的元素 [attribute=value]   选取属性值为value的元素 [attribute ...

  7. jquery属性值选择器

    $("[attribute|='value']") 选择指定属性值等于给定字符串或改字符串为前缀(该字符串后跟一个连字符“-”)的元素. attribute: 一个属性名 valu ...

  8. jquery属性过滤选择器

    http://www.jb51.net/article/46279.htm   $("div[id]").addClass("highlight"); //查找 ...

  9. jQuery基本筛选选择器

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

随机推荐

  1. JAVA中try、catch、finally带return的执行顺序总结

    异常处理中,try.catch.finally的执行顺序,大家都知道是按顺序执行的.即,如果try中没有异常,则顺序为try→finally,如果try中有异常,则顺序为try→catch→final ...

  2. OCR（Optical Character Recognition）算法总结

    https://zhuanlan.zhihu.com/p/84815144 最全OCR资料汇总,awesome-OCR

  3. [原创]K8Cscan for Python 2.0

    0x000 简介 K8Cscan扫描器Python版支持Windows和Linux系统 详情参考:https://www.cnblogs.com/k8gege/p/10519321.html 0x00 ...

  4. 【转帖】极简Docker和Kubernetes发展史

    极简Docker和Kubernetes发展史 https://www.cnblogs.com/chenqionghe/p/11454248.html 2013年 Docker项目开源 2013年,以A ...

  5. netcore 步骤

    1.创建工程目录 d:\project 2.进入目录,创建解决方案 dotnet new sln 3.确定开发版本 dotnet --list-sdks //列出sdk版本 dotnet new gl ...

  6. 数论 - 同余 + BFS (Find The Multiple)

    Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 16995   Accepted: 692 ...

  7. MySQL表关系--外键

    一.外键前戏 如果我们把所有的信息都记录在一张表中会带来的问题: 1.表的结构不清晰 2.浪费磁盘空间 3.表的扩展性极差 所以我们要把这种表拆成几张不同的表,分析表与表之间的关系. 确定表与表之间的 ...

  8. Python之路【第十九篇】:前端CSS

    CSS 一.CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠式样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 学CSS后我们需要掌握的技能: 1. ...

  9. leetcode的Hot100系列--347. 前 K 个高频元素--hash表+直接选择排序

    这个看着应该是使用堆排序,但我图了一个简单,所以就简单hash表加选择排序来做了. 使用结构体: typedef struct node { struct node *pNext; int value ...

  10. ASP.NET WebApi 学习与实践系列(2)---WebApi 路由请求的理解

    目录 写在前面 WebApi Get 请求 1.无参数的请求 2.一个参数的请求 3.多个参数的请求 4.实体参数的请求 WebApi Post 请求 1.键值对请求 2.dynamic 动态类型请求 ...