jQuery选择器(二)(基本过滤器,内容过滤器,可见过滤器)

发布时间:2023-02-28 12:00

写在前面

jQuery是一个快速、简洁的 JavaScript 框架,是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess,DoMore”,即倡导写更少的代码,做 更多的事情。jQuery封装了 JavaScript 常用的功能代码,提供一种简便的 JavaScript 设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

目录

jQuery选择器

过滤器

1.基本过滤器                   

2.内容过滤器

3.可见过滤器

☕️4.属性过滤器

5.子元素过滤器


jQuery选择器

过滤器

过滤器主要是通过特定的过滤规则筛选出所需的DOM元素,该选择器以冒号开头。按照不同的过滤规则,过滤器又可分为基本过滤器、内容过滤器、可见性过滤器、属性过滤器、子元素过滤器和表单对象属性过滤器。

1.基本过滤器                   

选择器 说明
:first  匹配找到的第一个元素
:last  匹配找到的最后一个元素
:not(selector)  去除所有与给定选择器匹配的元素
:even  匹配所有索引值为偶数的元素,例如$(\"tr:even\")
:odd  匹配所有索引值为奇数的元素,例如$(\"tr:odd\")
:eq(index) 匹配一个给定索引值的元素
:gt(index)  匹配所有大于给定索引值的元素
:It(index)   匹配所有小于给定索引值的元素
:header  匹配所有标题
:animated  匹配所有正在执行动画效果的元素

    
   例如:


(1)改变class不为one的所有div的背景颜色。

$(\"div:not(.one)\").css(\"background\",\"red\");

(2)改变索引为奇数的div的背景颜色。

$(\"div:odd\").css(\"background\",\"red\");

(3)改变索引为偶数的div的背景颜色。

$(\"div:even\").css(\"background\",\"red\");

(4)改变索引为大于某数的div的背景颜色。

$(\"div:gt(3)\").css(\"background\",\"red\");

(5)改变索引为等于某数的div的背景颜色。

$(\"div:eq(3)\").css(\"background\",\"red\");

(6)改变索引为小于某数的div。

$(\"div:lt(3)\").css(\"background\",\"red\");


 

2.内容过滤器

选择器 说明
:contains(text) 匹配包含给定文本的元素
:empty() 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配含有选择器所匹配的元素的元素
:parent() 匹配含有子元素或者文本的元素,与:empty()相反

 在例1中放置四个div块,分别根据每个div块的不同特点改变其背景颜色,在浏览器中的显示结果如图1所示,单击“显示效果”按钮后,在浏览器中的显示结果如图2所示。
 

【例1】



  
   
   jQuery内容过滤器
   
   
   
  

   
   
hahha
heihei

\"jQuery选择器(二)(基本过滤器,内容过滤器,可见过滤器)_第1张图片\"

 图1 内容过滤器                      

\"jQuery选择器(二)(基本过滤器,内容过滤器,可见过滤器)_第2张图片\"

 图2 内容过滤器改变属性     

3.可见过滤器


可见性过滤器可以根据元素的可见性进行选择,可见性过滤器包括“:hidden”和“:visible”。其中可见性过滤器“:hidden”不仅包含样式属性display为none的元素,也包含文本隐藏域()和visible:hidden之类的元素;可见性过滤器“:visible”可以匹配所有可见的元素。

例2制作的页面上有两个按钮,一个按钮是改变可见性元素的背景颜色的属性,另一个按钮是利用jQuery的show()方法让不可见元素显示出来。

【例2】



  
  
  jQuery可见性过滤器
  
   
  
 
   

可见性过滤器.



Hello World!
style的display为\"none\"的div

\"jQuery选择器(二)(基本过滤器,内容过滤器,可见过滤器)_第3张图片\"

 图3 可见性过滤器                 

\"jQuery选择器(二)(基本过滤器,内容过滤器,可见过滤器)_第4张图片\"

 图4 改变属性                     

☕️4.属性过滤器

属性过滤器的过滤规则是通过元素的属性来获取相应的元素。

选择器 说明
[attribute] 匹配包含给定属性的元素
[attribute=value] 匹配给定属性为特定值的元素
[attribute!=value] 匹配给定属性不等于特定值的元素
[attribute^=value] 匹配给定属性是以特定值开头的元素
[attribute$=value] 匹配给定属性是以特定值结尾的元素
[attribute*=value] 匹配给定属性包含特定值的元素
[attributeFilterl][attributeFilter2][…] 复合属性选择器,匹配属性同时满足多个条件的元素

例3在制作的页面上选择超链接中带有title属性的元素,修改这些元素的背景色、字体大小、下划线等属性。
【例3】



 
 
 jQuery属性过滤器
 
 
 

   第一个包含title属性的a元素
第一个不包含title属性的a元素
第二个包含title属性的a元素
第二个不包含title属性的a元素
第三个包含title属性的a元素

5.子元素过滤器

使用子元素过滤器可以根据某个元素的子元素对该元素进行过滤。表4列出子元素过滤器及其说明。

选择器 说明
:first-child 获取第一个子元素
:last-child 获取最后一个子元素
:nth-child() 通过相关指数获取子元素
:only-child 获取子元素唯一的元素

其中,nth-child()选择器的说明如下:

(1):nth-child(even/odd): 选取每个父元素下的索引值为偶(奇)数的元素。
(2):nth-child(2): 选取每个父元素下的索引值为2的元素。
(3):nth-child(3n): 选取每个父元素下的索引值是3的倍数的元素。
(4):nth-child(3n+1): 选取每个父元素下的索引值是3n+1的元素。

在例4制作的页面上选择偶数列表元素,让其背景色发生改变,在浏览器的显示结果如图5所示。

【例4】
 



  
  
  jQuery子元素过滤器
  
  
   
 
   
  • 音乐
  • 羽毛球
  • 足球
  • 篮球

\"jQuery选择器(二)(基本过滤器,内容过滤器,可见过滤器)_第5张图片\"

 注:本文通过 CDN(内容分发网络)引用jQuery,用户可以不下载存放 jQuery。




\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号