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

今天主要学习了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')