博客列表 >jQuery进阶:常用的过滤函数——2018年4月3日22点30分上传

jQuery进阶:常用的过滤函数——2018年4月3日22点30分上传

泰礴松的博客
泰礴松的博客原创
2018年04月03日 22:57:06502浏览

今天主要学习了jquery的过滤函数,通过老师的讲解,对过滤函数有了一定的认识,对下一步做好学习打下了一定的基础。

下面,选取6个常用的函数进行介绍

一、基本选择器

  1. 标签选择器:tag

使用方法:选取页面中的td标签,更改其背景颜色为红色

代码:

$('td').css('background','red')

2.id选择器:#id

使用方法:选取页面中id为title的标签,并将其背景颜色改为红色

$('#title').css('background','red')

3.class选择器:.class

使用方法:选取页面中class为mark的标签,更改其css属性为bg-color

$('.mark').addClass('bg-color')

4.通配符选择器:*

使用方法:将页面中第三个列表项后的列表字体颜色改为红色

$('li:nth-child(3)~*').css('color','red')

二、层级选择器

5、后代选择器  空格

使用方法:将所有li标签的子标签a的背景颜色改为绿色

$('li a').css('background','green')

6、相邻兄弟选择器 +

使用方法:将第五个li标签的后一li标签的背景色变成白色

$('li:nth-child(5)+li').css('background','white')

三、内容过滤器

7、选择包含指定内容的元素:contains

使用方法:选择包含有"春"字的P标签,并将他的字体颜色改为红色

$('p:contains("春")').css('color','red')

8、选择有某个子标签的元素:has

使用方法:选择含有img标签的P元素,并更改其css类为pg-color

$('p:has("img")').addClass('pg-color')

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议