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. 洛谷 P2047 [NOI2007]社交网络 解题报告

    P2047 [NOI2007]社交网络 题目描述 在社交网络(\(social\) \(network\))的研究中,我们常常使用图论概念去解释一些社会现象.不妨看这样的一个问题.在一个社交圈子里有\ ...

  2. 【hdu3842】 Machine Works

    http://acm.hdu.edu.cn/showproblem.php?pid=3842 (题目链接) 题意 一个公司使用一个厂房$D$天,希望获利最大.有$n$台机器,每一台可以在第$D_i$天 ...

  3. faster rcnn 详解

    转自:https://zhuanlan.zhihu.com/p/31426458 经过R-CNN和Fast RCNN的积淀,Ross B. Girshick在2016年提出了新的Faster RCNN ...

  4. Hadoop生态圈-Azkaban实现文件上传到hdfs并执行MR数据清洗

    Hadoop生态圈-Azkaban实现文件上传到hdfs并执行MR数据清洗 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 如果你没有Hadoop集群的话也没有关系,我这里给出当时我 ...

  5. Hadoop基础-MapReduce的Partitioner用法案例

    Hadoop基础-MapReduce的Partitioner用法案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Partitioner关键代码剖析 1>.返回的分区号 ...

  6. sql语句解析顺序和执行顺序

    sql语句执行顺序1.from子句组装来自不同数据源的数据2.where子句基于指定的条件对记录行进行筛选3.group by子句将数据划分为多个分组4.使用聚集函数进行计算5.使用having子句筛 ...

  7. meeting，symposium，seminar 等区别

    meeting,symposium,seminar 等区别 会议分类的方式可说是不胜枚举,这点初步由英文对会议名称的写法,就可看出端倪,像是Assembly,Caucus,Colloquium, Co ...

  8. js调试系列: 调试基础与技巧

    js调试系列目录: - 昨天我们见识到了断点的强悍,在断点的配合下进行动态调试,让读代码变的轻松不少,特别是ajax之类的.在昨天的课后练习中,确实增加了不少难度,因为 提交评论 按钮是用 jQuer ...

  9. html5 canvas在线文本第二步设置（字体边框）等我全部写完，我会写在页面底部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. Linux - sed 常用操作

    sed 文本常用操作方式 sed 10q # 显示文件中的前10行 (模拟"head") sed -n '$=' # 计算行数(模拟 "wc -l") sed ...