一、Jquery的基本过滤选择器：

基本过滤选择器： 
1、 :first 选取第一个元素 
2、 :last 选取最后一个元素 
3、:not(selector) 去除所有与给定的选择器匹配的元素 
4、:even 选取索引时偶数的所有元素,索引从0开始 
5、:odd 选取索引时奇数的所有元素,索引从0开始 
6、:eq(index) 选取索引等于index的元素,索引从0开始 
7、:gt(index) 选取索引大于index的元素,索引从0开始 
8、:lt(index) 选取索引小于index的元素,索引从0开始 
9、:header 选取所有的标题元素 如：h1 ,h2等 
10、:animated 选取当前执行 动画的所有元素

效果：

源码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jquery 学习1</title>
  6. <!--  导入jquery库 -->
  7. <script type="text/javascript" src="jquery/jquery.js"></script>
  8. <script type="text/javascript">
  9. $(function(){
  10.     function sanmatt(){
  11.         $("#d5").slideToggle("fast",sanmatt);
  12.     }
  13.     sanmatt();
  14.  
  15.     $("#btn1").click(function(){
  16.         $("div:first").css("background","#FFBBAA");
  17.     });
  18.     $("#btn2").click(function(){
  19.         $("div:last").css("background","#FFBBAA");
  20.     });
  21.  
  22.     $("#btn3").click(function(){
  23.         $("div:even").css("background","#FFBBAA");
  24.     });
  25.     $("#btn4").click(function(){
  26.         $("div:odd").css("background","#FFBBAA");
  27.     });
  28.     $("#btn5").click(function(){
  29.         $("div:eq(2)").css("background","#FFBBAA");
  30.     });
  31.     $("#btn6").click(function(){
  32.         $("div:gt(2)").css("background","#FFBBAA");
  33.     });
  34.     $("#btn7").click(function(){
  35.         $("div:lt(2)").css("background","#FFBBAA");
  36.     });
  37.     $("#btn8").click(function(){//选取不等于某个元素的所有
  38.         $("div:not('#d1')").css("background","#FFBBAA");
  39.     });
  40.     $("#btn9").click(function(){//选取所有的header元素
  41.         $(":header").css("background","#FFBBAA");
  42.     });
  43.     $("#btn10").click(function(){//选取所有的header元素
  44.         $(":animated").css("background","#FFBBAA");
  45.     });
  46.  
  47. })
  48.  
  49. </script>
  50.  
  51. </head>
  52. <body>
  53. Jquery的基本过滤器：
  54.  
  55. 基本过滤器选择：
  56. <br>
  57. 1、 :first     选取第一个元素
  58. <br>
  59. 2、  :last      选取最后一个元素
  60. <br>
  61. 3、:not(selector)   去除所有与给定的选择器匹配的元素
  62. <br/>
  63. 4、:even        选取索引时偶数的所有元素,索引从0开始
  64. <br/>
  65. 5、:odd         选取索引时奇数的所有元素,索引从0开始
  66. <br/>
  67. 6、:eq(index)         选取索引等于index的元素,索引从0开始
  68. <br/>
  69.  
  70. 7、:gt(index)         选取索引大于index的元素,索引从0开始
  71. <br/>
  72.  
  73. 8、:lt(index)         选取索引小于index的元素,索引从0开始
  74. <br/>
  75.  
  76. 9、:header            选取所有的标题元素 如：h1 ,h2等
  77. <br/>
  78.  
  79. 10、:animated         选取当前执行 动画的所有元素
  80. <br/>
  81.  
  82. <hr>
  83. <button id="btn1">获取第一个div</button>
  84. <button id="btn2">获取最后一个div</button>
  85. <button id="btn3">选取偶数列</button>
  86. <button id="btn4">选取奇数列</button>
  87. <button id="btn5">索引等于2(从0开始)</button>
  88. <button id="btn6">索引大于2的div</button>
  89. <button id="btn7">索引小于2的div</button>
  90. <button id="btn8">不等于某个选择器的所有元素</button>
  91. <button id="btn9">选取所有的标题header</button>
  92. <button id="btn10">选取当前执行的动画</button>
  93.  
  94. <p>
  95. 子层
  96. <div id="d1"> 孙子层d1  </div>
  97. <span>  这是一个行信息</span>
  98. <div>
  99. div 孙子层
  100. </div>
  101. </p>
  102. <h1>这是h1 不在div内</h1>
  103. <hr>
  104. <div  id="d3"> 
  105.  
  106. <h2>这是h2 在div内</h2>
  107.  
  108. 子层2
  109. <div style="background:#FFFFFF"> 孙子层2   </div>
  110. <br/>
  111. <span> 这是一个行信息2</span>
  112. <div id="d2">
  113. div 孙子层2
  114. </div>
  115. </div>
  116.  
  117. <br/>
  118. <div>
  119. 这是第三个div层
  120. </div>
  121.  
  122. <br/>
  123.  
  124. <span>这是第四个span</span>
  125.  
  126. <p>
  127. <div id="d5"> 这是第5个层</div>
  128.  
  129. </p>
  130.  
  131. </body>
  132. </html>

(6)Jquery1.8.3快速入门_过滤选择器的更多相关文章

  1. (8)Jquery1.8.3快速入门_可见性选择器

    一.Jquery的可见性选择器: 可见性选择器: 1.:visable 筛选可以见的元素 2. :hidden 筛选不可见的元素 效果: 源码: <!DOCTYPE html> <h ...

  2. (5)Jquery1.8.3快速入门_层次选择器

    一.Jquery的选择器: 层级选择器: 1.空格                div    span              div中的包含的所有span后代元素 2. >        ...

  3. (4)Jquery1.8.3快速入门_基本选择器

    一.Jquery选择器: 基本选择器: 1.id                           #id      根据元素的id获取的唯一元素. 2.class                  ...

  4. (7)Jquery1.8.3快速入门_内容过滤选择器

    一.Jquery的内容过滤选择器: 内容过滤选择器: 1.:contains(text) 选取含有文本内容为text的元素 2. :empty 选取不包含子元素或者文本为空的元素 3.:has(sel ...

  5. Spring_MVC_教程_快速入门_深入分析

    Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门  资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...

  6. 【笔记目录2】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总

    当前标签: ASP.NET Core快速入门 共2页: 上一页 1 2  任务27:Middleware管道介绍 GASA 2019-02-12 20:07 阅读:15 评论:0 任务26:dotne ...

  7. (1)Jquery1.8.3快速入门_helloworld

    jquery 快速入门 学习记录 1.第一个jquery程序 helloworld: 需要导入Jquery1.8.3的库 ,下载地址: jQuery1.8.3   代码令另存到本地 保存为jquery ...

  8. Robot Framework 快速入门_中文版

    目录 介绍 概述 安装 运行demo 介绍样例应用程序 测试用例 第一个测试用例 高级别测试用例 数据驱动测试用例 关键词keywords 内置关键词 库关键词 用户定义关键词 变量 定义变量 使用变 ...

  9. 【笔记目录1】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总

    当前标签: ASP.NET Core快速入门 共2页: 1 2 下一页  任务50:Identity MVC:DbContextSeed初始化 GASA 2019-03-02 14:09 阅读:16 ...

随机推荐

  1. HttpServletRequest.getContextPath()取得的路径

    如果项目名称为test,你在浏览器中输入请求路径:http://localhost:8080/test/pc/list.jsp 执行下面向行代码后打印出如下结果: 1. System.out.prin ...

  2. Codeforces Round #421 (Div. 2)

    A: 题意:给你一本书共c页,第一天看v0页,第二天看v0+a,第二天看v0+2a以此类推,每天最多看v1页,但是后一天要重复看前一天的后l页. 代码: #include<stdio.h> ...

  3. SQL Server 存储过程的运用

    概述 最近因为业务的需求写了一段时间存储过程,发现之前写的存储过程存在一些不严谨的地方,特别是TRY...CATCH中嵌套事务的写法:虽然之前写的并没有错,但是还是埋藏着很大的隐患在里面.希望这篇文章 ...

  4. 亲子编程玩Micro:bit-动力小车“麦昆”

    少儿编程之风已经吹进各大城市,编程猫.乐博机器人.童程童美等专业培训机构逐渐进入大家的视野,年龄段已经从K12逐渐降低到幼儿园中班.其实,少儿编程的门槛并不高,它不会让孩子一上手就去接触代码,而是会通 ...

  5. Flutter介绍 - Flutter,H5,React Native之间的对比

    Flutter介绍 Flutter是Google推出的开源移动应用开发框架.开发者可以通过开发一套代码同时运行在iOS和Android平台. 它使用Dart语言进行开发,并且最终编译成各个平台的Nat ...

  6. libgdx学习记录3——动画Animation

    libgdx动画采用Animation实现,即通过帧动画实现. 代码如下: package com.fxb.newtest; import com.badlogic.gdx.ApplicationAd ...

  7. win7中调试Hotspot

    预置: 1.Visual Studio 2010 2.CYGWIN(设置到path中) 3.jdk(设置到path中) 4.Framework4(系统如果有就不需要安装) 5.win7 sdk 7.1 ...

  8. 2016 安全圈玩起了直播，“学霸”带你玩转CTF_i春秋学院

    2016安全圈玩起了直播,“学霸”带你玩转CTF_i春秋学院 从小就很羡慕学霸的脑子,总有很简单很便捷的方法解出难题来,所以对于他们的笔记总会疯狂地想占有和copy.那么,对CTF大神自己总结出来的赛 ...

  9. 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件

    微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> ...

  10. Python开发网站目录扫描器

    有人问为什么要去扫描网站目录:懂的人自然懂 这个Python脚本的特点: 1.基本完善 2.界面美观(只是画了个图案) 3.可选参数增加了线程数 4.User Agent细节处理 5.多线程显示进度 ...