1.介绍

　　

2.常见基本过滤器

　　

3.程序

 <!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">

     $(document).ready(function(){

         //动画

         function anmateIt() {

             $("#mover").slideToggle("slow", anmateIt);

         }

         anmateIt();

         //选择第一个 div 元素

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

             $("div:first").css("background", "#ffbbaa");

         });

         //选择最后一个 div 元素

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

             $("div:last").css("background", "#ffbbaa");

         });

         //选择class不为 one 的所有 div 元素

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

             $("div:not(.one)").css("background", "#ffbbaa");

         });

         //选择索引值为偶数的 div 元素

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

             $("div:even").css("background", "#ffbbaa");

         });

         //选择索引值为奇数的 div 元素

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

             $("div:odd").css("background", "#ffbbaa");

         });

         //选择索引值为大于 3 的 div 元素

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

             $("div:gt(3)").css("background", "#ffbbaa");

         });

         //选择索引值为等于 3 的 div 元素

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

             $("div:eq(3)").css("background", "#ffbbaa");

         });

         //选择索引值为小于 3 的 div 元素

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

             $("div:lt(3)").css("background", "#ffbbaa");

         });

         //选择所有的标题元素

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

             $(":header").css("background", "#ffbbaa");

         });

         //选择当前正在执行动画的所有元素

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

             $(":animated").css("background", "#ffbbaa");

         });

         //择 id 为 two 的下一个 span 元素

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

             $("#two").nextAll("span:first").css("background", "#ffbbaa");

         });

     });

 </script>

 </head>

 <body>

     <input type="button" value="选择第一个 div 元素" id="btn1" />

     <input type="button" value="选择最后一个 div 元素" id="btn2" />

     <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />

     <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />

     <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />

     <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />

     <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />

     <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />

     <input type="button" value="选择所有的标题元素" id="btn9" />

     <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />

     <input type="button" value="选择 id 为 two 的下一个 span 元素" id="btn11" />

     <h3>基本选择器.</h3>

     <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" size="8">

     </div>

     <span id="span">^^span元素 111^^</span>

     <span id="span">^^span元素 222^^</span>

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

 </body>

 </html>

004 jquery过滤选择器-----------（基本过滤选择器）的更多相关文章

  1. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  2. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

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

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

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

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

  5. jQuery表单对象属性过滤选择器

    jQuery表单对象属性过滤选择器 <div id="p1" attr="p1"> <input type="text" ...

  6. 黑马day16 jquery&amp;内容过滤选择器&amp;可见度选择器

    内容过滤选择器的过滤规则主要体如今它所包括的子元素和文本内容上 .:contains(text) 使用方法: $("div:contains('John')")    返回值  集 ...

  7. jQuery事件篇---过滤选择器 & 表单选择器

    内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...

  8. JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器

    1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...

  9. Jquery | 基础 | jQuery表单对象属性过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...

  10. 深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器

    × 目录 [1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态 前面的话 过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器 焦点状态 :focus :focus选择器选择当 ...

随机推荐

  1. 【BZOJ1434】[ZJOI2009]染色游戏（博弈论）

    [BZOJ1434][ZJOI2009]染色游戏(博弈论) 题面 BZOJ 洛谷 题解 翻硬币的游戏我似乎原来在博客里面提到过,对于这类问题,当前局面的\(SG\)函数就是所有反面朝上的硬币单一存在时 ...

  2. 【bzoj3932】 CQOI2015—任务查询系统

    http://www.lydsy.com/JudgeOnline/problem.php?id=3932 (题目链接) 题意 给出$m$个区间,每个区间有一个权值,$n$组询问,每次询问在位置$x$权 ...

  3. 解析word公式的解决方案(office插入和wps插入不同的解决方案)

    这几天在公司的项目有个需求就是数学公式的导入,而对于word来说,插入的公式xml格式,需要转换为mathML,借用插件MathJax来进行展示,而对于wps插入的公式来说,获取到的是一个wmf图片, ...

  4. [学习笔记]nim游戏

    普通nim游戏: n堆石子,每个人每次对着一堆拿若干个.不能拿者判输. 只有两种情况,先手必胜,先手必败. 先手必胜当且仅当:a1^a2^...^an!=0 证明: 设=x(x不为0),选择最高位和x ...

  5. Controller、Service、Dao进行Junit单元

    原文链接:http://blog.csdn.net/u013041642/article/details/71430293 Spring对Controller.Service.Dao进行Junit单元 ...

  6. Java基础-JVM调优策略简介

    Java基础-JVM调优策略简介 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.JVM结构分析 1>.JVM结构图 2>.JVM运行时数据区功能说明 JVM管理的内 ...

  7. 使用Python的turtle（海龟）模块画图

    第一步:让Python引入turtle模块,引入模块就是告诉Python你想要用它. import turtle 第二步:创建画布.调用turtle中的Pen函数 t = turtle.Pen() 第 ...

  8. bzoj千题计划236：bzoj2300: [HAOI2011]防线修建

    http://www.lydsy.com/JudgeOnline/problem.php?id=2300 维护动态凸包,人懒用的set 用叉积判断,不要用斜率 #include<set> ...

  9. SQL Server 的字段不为NULL时唯一

    CREATE UNIQUE NONCLUSTERED INDEX 索引名称ON 表名(字段) WHERE 字段 is not null SQL Server 2008+ 支持

  10. 【整理】HTML5游戏开发学习笔记（2）- 弹跳球

    1.预备知识(1)在画布上绘制外部图片资源(2)梯度(gradient):HTML5中的对象类型,包括线性梯度和径向梯度.如createLinearGradient,绘制梯度需要颜色组http://w ...