1.介紹

　　

2.程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <style type="text/css">

         div, span, p {

             width: 140px;

             height: 140px;

             margin: 5px;

             background: #aaa;

             border: #000 1px solid;

             float: left;

             font-size: 17px;

             font-family: Verdana;

         }

         div.mini {

             width: 55px;

             height: 55px;

             background-color: #aaa;

             font-size: 12px;

         }

         div.hide {

             display: none;

         }

 </style>

 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

 <script type="text/javascript">

     $(function(){

         //选取含有 属性title 的div元素.

         $("#btn1").click(function(){

             $("div[title]").css("background","#abf");

         });

         //选取 属性title值等于'test'的div元素.

         $("#btn2").click(function(){

             $("div[title='test']").css("background","#fab");

         });

         //选取 属性title值不等于'test'的div元素(没有属性title的也将被选中).

         $("#btn3").click(function(){

             $("div[title!='test']").css("background","#ffa");

         });

         //选取 属性title值 以'te'开始 的div元素

         $("#btn4").click(function(){

             $("div[title^='te']").css("background","#ffc");

         });

         //选取 属性title值 以'est'结束 的div元素

         $("#btn5").click(function(){

             $("div[title$='est']").css("background","#ffc");

         });

         //选取 属性title值 含有'es'的div元素.

         $("#btn6").click(function(){

             $("div[title*='es']").css("background","#ffa");

         });

         //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素

         $("#btn7").click(function(){

             $("div[id][title*='es']").css("background","#ffa");

         });

         //选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素

         $("#btn8").click(function(){

             $("div[title][title!='test']").css("background","#ffa");

         });

     })

 </script>

 </head>

 <body>

     <input type="button" value="选取含有 属性title 的div元素." id="btn1" />

     <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />

     <input type="button" value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />

     <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />

     <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />

     <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />

     <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素." id="btn7" />

     <input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />

     <br>

     <br>

     <div class="one" id="one">

         id 为 one,class 为 one 的div

         <div class="mini">class为mini</div>

     </div>

     <div class="one" id="two" title="test">

         id为two,class为one,title为test的div

         <div class="mini" title="other">class为mini,title为other</div>

         <div class="mini" title="test">class为mini,title为test</div>

     </div>

     <div class="one">

         <div class="mini">class为mini</div>

         <div class="mini">class为mini</div>

         <div class="mini">class为mini</div>

         <div class="mini"></div>

     </div>

     <div class="one">

         <div class="mini">class为mini</div>

         <div class="mini">class为mini</div>

         <div class="mini">class为mini</div>

         <div class="mini" title="tesst">class为mini,title为tesst</div>

     </div>

     <div style="display: none;" class="none">style的display为"none"的div</div>

     <div class="hide">class为"hide"的div</div>

     <div>

         包含input的type为"hidden"的div<input type="hidden" value="123456789"

             size="8">

     </div>

     <div id="mover">正在执行动画的div元素.</div>

 </body>

 </html>

007 jquery过滤选择器-----------（屬性过滤选择器）的更多相关文章

  1. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  2. jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...

  3. jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

  4. jQuery总结01_jq的基本概念+选择器

    jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果. 为什么要学习jQuery? [01-让div显示与设置内容.html] 使 ...

  5. jquery学习（3）--高级选择器

    自己手写的学习笔记.常规选择器: /****************学习--高级选择器(1)****************/---高级选择器:ie7+ 层次选择器: 后代选择器     ul li ...

  6. jQuery学习笔记（简介，选择器）

    jQuery优势 1. 强大的选择器.jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器. 2. 出色的DOM操作封装 3. 可靠的事件处理机制 ...

  7. JQuery（一）---- JQ的选择器，属性，节点，样式，函数等操作详解

    JQuery的基本概念 JQuery是一个javascript库,JQuery凭借着简洁的语法和跨平台的兼容性,极大的简化了js操作DOM.处理事件.执行动画等操作.JQuery强调的理念是:'wri ...

  8. jquery总结01-基本概念和选择器

    dom元素和jquery元素的区别 dom元素支持dom元素自带的属性和方法,jquery元素支持jquery元素自带的属性和方法 dom                  var div = doc ...

  9. 基于jQuery带备忘录功能的日期选择器

    今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...

随机推荐

  1. LJ 5月6日A组考试考试题解

    [题目] T1(L2837) 晚餐队列安排 [题面] 为了避免餐厅过分拥挤,FJ要求奶牛们分2批就餐.每天晚饭前,奶牛们都会在餐厅前排队入内,按FJ的设想,所有第2批就餐的奶牛排在队尾,队伍的前半部分 ...

  2. Problem C Dist 解题报告

    Problem C Dist Description 有一个\(n\)个点带边权的连通无向图,边集用\(k\)个集合\(s_1,s_2,\dots,s_k\)和\(k\)个整数\(w_1,w_2,\d ...

  3. 扩展中国剩余定理学习笔记+模板（洛谷P4777）

    题目链接: 洛谷 题目大意:求同余方程组 $x\equiv b_i(mod\ a_i)$ 的最小正整数解. $1\leq n\leq 10^5,1\leq a_i\leq 10^{12},0\leq ...

  4. 开发常用镜像资源替换为国内开源镜像(yum,compose,maven,docker,android sdk,npm,国内开源镜像汇总)

    一.国内开源镜像站点汇总 阿里云开源镜像站 (http://mirrors.aliyun.com/)网易开源镜像站 (http://mirrors.163.com/)中国科学技术大学开源镜像站 (ht ...

  5. [SDOI2009]Bill的挑战——全网唯一 一篇容斥题解

    全网唯一一篇容斥题解 Description Solution 看到这个题,大部分人想的是状压dp 但是我是个蒟蒻没想到,就用容斥切掉了. 并且复杂度比一般状压低, (其实这个容斥的算法,提出来源于y ...

  6. 20181103 Nginx(布尔教育)

    nginx介绍 对标Apache服务器 目录介绍 conf 配置文件 html 网页文件 logs 日志文件 sbin 主要二进制程序 控制命令 ./nginx # 启动 nginx -t # 测试配 ...

  7. Java基础-零拷贝技术应用案例

    Java基础-零拷贝技术应用案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 零拷贝技术在Hadoop生态圈中很多组件得到应用,典型的比如kafka组件,它就很成功的应用了零拷贝 ...

  8. python命名空间与闭包函数详解

    python命名空间与闭包函数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客主要介绍的知识点如下: 1>.三元运算 2>.命名空间 3>.globa ...

  9. INF文件详解

    安装信息(Setup Information)文件是Windows系统支持的一种安装信息存放文件,一般以INF作为扩展名,因此也叫INF文件.安装信息INF文件与Windows内建的安装服务引擎(AP ...

  10. 在angularJs实现批量删除

    原理:在js中定义一个数组,然后给每个复选框一个点击事件,点击事件的方法参数有两个,一个是事件源$event,一个是id.点击复选框根据事件源判断是否被选中,然后进而是向这个数组增加或者删除id. $ ...