jQuery选择器

一、jQuery选择器——CSS选择器:

1、基本选择器:

jQuery选择器_第1张图片

1)id选择器

jQuery选择器_第2张图片

jQuery选择器_第3张图片

2)类选择器:

jQuery选择器_第4张图片

3)标签选择器:

jQuery选择器_第5张图片

4)逗号选择器:

jQuery选择器_第6张图片

5)通配符选择器:

jQuery选择器_第7张图片

 2、层级选择器:

jQuery选择器_第8张图片

jQuery选择器_第9张图片jQuery选择器_第10张图片

1)ul的子代li

jQuery选择器_第11张图片

2)所有后代选择器

jQuery选择器_第12张图片

3)+选择器:下一个兄弟节点

4)~选择器:后面的所有兄弟节点

jQuery选择器_第13张图片

二、jQuery选择器

1、基本选择器

jQuery选择器_第14张图片

jQuery选择器_第15张图片

1)first 第一个     last 最后一个 

jQuery选择器_第16张图片

2)eq相等(下标,从0开始)

jQuery选择器_第17张图片

3)even所有偶数行发生变化:(下标,从0开始)

      odd所有奇数行发生变化

jQuery选择器_第18张图片

4)lt:less than小于多少         gt:大于多少

jQuery选择器_第19张图片

5):root  指的是HTML

jQuery选择器_第20张图片

2、内容

jQuery选择器_第21张图片 jQuery选择器_第22张图片

1)contains 包含什么内容

3、过滤选择器

jQuery选择器_第23张图片

1)eq() 函数  相等,下标从0开始

两个代码效果一样。第一个是一次性到位,第二个是作两次筛选(是方法)

jQuery选择器_第24张图片

2)first()    last()函数

jQuery选择器_第25张图片

4、查找

jQuery选择器_第26张图片

jQuery选择器_第27张图片 jQuery选择器_第28张图片

1)parent()           选到ul:

jQuery选择器_第29张图片

选到body:

jQuery选择器_第30张图片

2)parents()

注意:不要使用颜色,都会改变

jQuery选择器_第31张图片

3)children()

选中所有的孩子节点(不包括孙子)

jQuery选择器_第32张图片

4)next()

5)nextAll()

jQuery选择器_第33张图片

jQuery选择器_第34张图片

jQuery选择器_第35张图片

6)prev()

7)prevAll()

8)siblings()

除自身,其他兄弟节点都选:

提供的方法:

jQuery选择器_第36张图片

9) find和filter函数的使用

jQuery选择器_第37张图片

jQuery选择器_第38张图片

jQuery选择器_第39张图片

jQuery选择器_第40张图片

jQuery选择器_第41张图片

你可能感兴趣的:(jquery,前端,javascript,css)