jQuery学习笔记（三）使用选择器二

简单的伪类选择器也被称为定位过滤器，因为它们主要根据编号和排位筛选特定位置上的元素，或者过滤掉特定元素

简单的伪类选择器 说明
:first 匹配找到的第一个元素
:last 匹配找到的最后一个元素
:not 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从0开始计数
:odd 匹配所有索引值为奇数的元素，从0开始计数
:eq 匹配一个给定索引值的元素，从0开始计数
:gt 匹配所有大于给定索引值的元素，从0开始计数
:lt 匹配所有小于给定索引值的元素，从0开始计数
:header 匹配如h1、h2、h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素

特定位置选择器主要包括 :first  :last  :eq(index) 语法：jQuery("selector:first") jQuery("selector:last") jQuery("selector:eq(index)") 注意，特定位置选择器是针对伪类分隔符前面的选择器所匹配的结果基础上进行第2轮过滤的，如果没有指定匹配的范围，则将视为是整个文档范围

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="jquery-1.11.3.js" type="text/javascript"></script>
 6 <script type="text/javascript">
 7 $(function(){
 8     $("tr:first").css({"background":"blue","color":"white"});
 9     $("tr:eq(1)").css("background","#F1F5FB");
10     $("tr:last").css("background","#ff9");
11     })
12 </script>
13 </head>
14 <body>
15 <table>
16   <tr>
17     <th>选择器</th>
18     <th>说明</th>
19   </tr>
20   <tr>
21     <td>:first</td>
22     <td>匹配找到的第一个元素</td>
23   </tr>
24   <tr>
25     <td>:last</td>
26     <td>匹配找到的最后一个元素</td>
27   </tr>
28 </table>
29 </body>
30 </html>

特定范围选择器主要包括：even :odd :ge(index) :lt(index)四种，语法：jQuery("selector:even") jQuery("selector:odd") jQuery("selector:gt(index)")

jQuery("selector:lt(index)")

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="jquery-1.11.3.js" type="text/javascript"></script>
 6 <script type="text/javascript">
 7 $(function(){
 8     //$("tr:even").css("background","#F1F5FB");
 9     //$("tr:odd").css("background","#ff9");
10     $("tr:gt(2)").css("background","#F1F5FB");
11     $("tr:lt(1)").css("background","#ff9");
12     })
13 </script>
14 </head>
15 <body>
16 <table>
17   <tr>
18     <th>选择器</th>
19     <th>说明</th>
20   </tr>
21   <tr>
22     <td>:even</td>
23     <td>匹配所有索引值为偶数的元素，从0开始计数</td>
24   </tr>
25   <tr>
26     <td>:odd</td>
27     <td>匹配所有索引值为奇数的元素，从0开始计数</td>
28   </tr>
29   <tr>
30     <td>:gt</td>
31     <td>匹配所有大于给定索引值的元素，从0开始计数</td>
32   </tr>
33   <tr>
34     <td>:lt</td>
35     <td>匹配所有小于给定索引值的元素，从0开始计数</td>
36   </tr>
37 </table>
38 </body>
39 </html>

排除选择器 :not能够在匹配元素集合中排除符合特定匹配规则的元素，语法：jQuery("selector:not(selector2)")

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="jquery-1.11.3.js" type="text/javascript"></script>
 6 <script type="text/javascript">
 7 $(function(){
 8     $("tr:not(tr:lt(2))").css({"background":"white","color":"blue"});
 9     })
10 </script>
11 </head>
12 <body>
13 <table>
14   <tr>
15     <th>选择器</th>
16     <th>说明</th>
17   </tr>
18   <tr>
19     <td>:even</td>
20     <td>匹配所有索引值为偶数的元素，从0开始计数</td>
21   </tr>
22   <tr>
23     <td>:odd</td>
24     <td>匹配所有索引值为奇数的元素，从0开始计数</td>
25   </tr>
26   <tr>
27     <td>:gt</td>
28     <td>匹配所有大于给定索引值的元素，从0开始计数</td>
29   </tr>
30   <tr>
31     <td>:lt</td>
32     <td>匹配所有小于给定索引值的元素，从0开始计数</td>
33   </tr>
34 </table>
35 </body>
36 </html>

特殊选择器 :animated和:header是两个比较特殊的选择器，它们分别用来匹配动画元素和标题元素，语法：jQuery("selector:animated")  jQuery("selector:header")

内容伪类选择器主要是根据元素包含内容作为筛选条件进行匹配

内容伪类选择器 说明
:contains 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素

匹配包含文本选择器 :contains(text)是一个比较实用的针对网页文本过滤的选择器，它能够根据指定的文本在所能匹配的元素集合中搜索包含特定关键字的元素，语法：

jQuery("selector:contains(text)") 注意，在contains()过滤函数中必须使用单引号包含文本关键字，否则jQuery将无法进行识别和解析

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="jquery-1.11.3.js" type="text/javascript"></script>
 6 <script type="text/javascript">
 7 $(function(){
 8     $("tr:contains(‘大于‘)").css("background","blue");
 9     })
10 </script>
11 </head>
12 <body>
13 <table>
14   <tr>
15     <th>选择器</th>
16     <th>说明</th>
17   </tr>
18   <tr>
19     <td>:even</td>
20     <td>匹配所有索引值为偶数的元素，从0开始计数</td>
21   </tr>
22   <tr>
23     <td>:odd</td>
24     <td>匹配所有索引值为奇数的元素，从0开始计数</td>
25   </tr>
26   <tr>
27     <td>:gt</td>
28     <td>匹配所有大于给定索引值的元素，从0开始计数</td>
29   </tr>
30   <tr>
31     <td>:lt</td>
32     <td>匹配所有小于给定索引值的元素，从0开始计数</td>
33   </tr>
34 </table>
35 </body>
36 </html>

匹配包含元素选择器 :has(selector)主要搜索匹配元素所包含的元素进行过滤，语法：jQuery("selector1:has(selector2)")  注意 :has(contains)选择器是对冒号前面的选择器所匹配的元素进行二次过滤

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="jquery-1.11.3.js" type="text/javascript"></script>
 6 <script type="text/javascript">
 7 $(function(){
 8     //$("a>img").css({"border":"solid 5px","background":"orange"});
 9     $("a:has(img)").css("background","red");
10     })
11 </script>
12 </head>
13 <body>
14 <a href="#"><img src="1.jpg" width="250" height="250"/></a> <a href="#"><img src="2.jpg" width="250" height="250"/></a> <a href="#"><img src="3.jpg" width="250" height="250"/></a>
15 </body>
16 </html>

包含判断选择器 :empty和:parent专门用来检测匹配元素是否包含内容，语法：jQuery("selector:empty") jQuery("selector:parent")

时间： 2024-10-14 03:16:19

jQuery学习笔记（三）使用选择器二的相关文章

网页开发学习笔记三: HTML选择器

选择器是一个选择标签的过程 标签选择器 标签{属性: 值; 属性:值;} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Document</title> <style type="text/css"> /*样式表内容 */ div{ font-size: 50px; color: orange; backgro

jQuery学习笔记(三)jQuery中的动画

1 show() 方法和hide() 方法  (显示和隐藏) show() 方法和hide() 方法是jQuery中基本的动画方法.在HTML文档里,为一个元素调用hide() 方法,会将该元素的display样式改为“none”. $("element").hide(); //通过hide()方法将element元素隐藏 $("element").css("display","none"); //通过css()方法将elem

jquery学习笔记(一)：选择器

1.1 基础选择器 选择器 功能 返回值 #id 根据给定的id匹配一个元素 单个元素 element 根据给定的元素名匹配所有元素 元素集合 .class 根据给定的类匹配元素 元素集合 * 匹配所有元素 元素集合 selector1,selectorN 将每一个选择器匹配到的元素合并后一起返回 元素集合 1.2 层次选择器 选择器 功能 返回值 ancestor descendant 根据祖先元素匹配所有的后代元素 元素集合 parent > child 根据父元素匹配所有的子元素 元素集合

jQuery学习笔记之过滤器之二

向下查找后代元素:children方法.find方法.contents方法  向上查找祖先元素:parents方法.parent方法.parentsUtil方法.offsetParent方法.closest方法 向下查找后代元素 1.children方法 2. contents方法 3. find方法 4. children方法.find方法.contents方法对比 向上查找祖先元素 1.parents方法 2.parent方法 3.parentsUtil方法 4.offsetParent方法

jQuery学习笔记——jQuery常规选择器

一．简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了.#box {//使用 ID 选择器的 CSS 规则color:red;//将 ID 为 box 的元素字体颜色变红}在 jQuery 选择器里,我们使用如下的方式获取同样的结果:$('#box').css('color', 'red

jQuery学习笔记之过滤器三（向上查找兄弟元素、向下查找兄弟元素）

向上查找兄弟元素的方法:prev方法.prevAll方法.prevUntil方法 向下查找兄弟元素:next方法.nextAll方法.nextUntil方法 向上查找兄弟元素 1.prev方法 2.prevAll方法 3.prevUntil方法 向下查找兄弟元素 1.next方法 2.nextAll方法 3.nextUntil方法 jQuery学习笔记之过滤器三(向上查找兄弟元素.向下查找兄弟元素)

马哥学习笔记三十二——计算机及操作系统原理

缓存方式: 直接映射 N路关联 缓存策略: write through:通写 write back:回写 进程类别: 交互式进程(IO密集型) 批处理进程(CPU密集型) 实时进程(Real-time) CPU: 时间片长,优先级低IO:时间片短,优先级高 Linux优先级:priority 实时优先级: 1-99,数字越小,优先级越低 静态优先级:100-139,数据越小,优先级越高 实时优先级比静态优先级高 nice值:调整静态优先级   -20,19:100,139   0:120 ps

【Unity 3D】学习笔记三十二：游戏元素——游戏光源

游戏光源 在3D游戏中,光源是一个非常具有特色的游戏组件.用来提升游戏画面质感的.如果没有加入光源,游戏场景可能就会显得很昏暗.在unity中提供了三种不同的光源类型:点光源,聚光灯,平行光. 点光源 顾名思义,点光源是从一个点向周围散发出光的光源,就像电灯一样.创建点光源在hierarchy视图中点击create--point light: 创建完以后,点击点光源对象,在右侧inspector视图中可以看到点光源的所有信息: type:光源的类型.有point(点光源),directional

Jquery的学习（三）选择器

1.Jquery中最重要的就是选择器了. 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 ①简单选择器. 最简单的也就是最常用的,最常用的一般也是最简单的. 在使用 jQuery 选择器时,我们首先必须使用"$()"函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了. #box { //使用 ID 选择器的 CSS 规则 color

jQuery学习笔记（一）：入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开