<!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. 简单工厂(二)——coding

    public abstract class Video { public abstract void produce(); } public class JavaVideo extends Video ...

  2. 【Spring Boot学习之十二】mybatis3 分页打印sql日志

    环境 eclipse 4.7 jdk 1.8 Spring Boot 1.5.2 参考: mybatis手册 Mybatis的插件 PageHelper 分页查询使用方法MyBatis中Like语句使 ...

  3. eclipse不提示

    1.菜单window->Preferences->Java->Editor->Content Assist->Enable auto activation 选项要打上勾 ...

  4. Intellij IDEA设置类注释和方法注释

    背景:工欲善其事必先利其器,如果不能把工具用熟练了, 感觉很是别扭. 参考:IntelliJ IDEA设置类注释和方法注释 IntelliJ IDEA 中创建类的时候,可以直接自动给类加注释的设置,以 ...

  5. 【记录】【springboot】动态定时任务ScheduledFuture，可添加、修改、删除

    这里只演示添加和删除任务的,因为修改就是删除任务再添加而已. 方便演示,任务就是每3秒打印 1.没有任务 后台 2.添加一个任务 3.再添加一个任务 4.删除一个任务 5.再添加一个任务 6.代码 运 ...

  6. 在Vcl和FireMonkey应用程序中启用TXMLDocument 的XPath（selectNode，selectNodes）方法

    该TXMLDocument的类让你来操作VCL和FireMonkey应用程序的XML文件,但这个类没有实现直接的方式来调用XPath的相关方法(selectNode,的selectNodes),所以你 ...

  7. 山峰和山谷 Ridges and Valleys

    题目描述 思路 一开始看这道题目,也不是很会,谁会把统计之类的问题和bfs联系在一起,没有开始的状态,没有结束的状态,题目中连一个最短之类的词也没有出现. 然后统计嘛,题目中说了方格高度都相同,就把周 ...

  8. liunx下Oracle安装

    1. 引言 将近一个月没有更新博客了,最近忙着数据库数据迁移工作:自己在服务器上搭建了oracle数据库,一步步走下来遇见很多BUG:现在自己记录下,方便以后有用上的地方: 2. 准备工作 oracl ...

  9. HTTP协议的认识

    1.内容回顾 1.HTTP协议消息的格式: 1.请求(request) 请求方法 路径 HTTP/1.1 \r\n k1:v1\r\n ...\r\n \r\n 请求体 <--这里可以有可以没有 ...

  10. 使用@Async注解创建多线程，自定义线程池

    说明 使用@Async注解创建多线程非常的方便,还可以通过配置,实现线程池.比直接使用线程池简单太多.而且在使用上跟普通方法没什么区别,加上个@Async注解即可实现异步调用. 用法 AsyncTas ...