jquery基础入门之jq选择器

JQ选择器

1、id选择器

$('#box').css('backgroundColor','pink');

2、类名选择器

  $('.box').css('backgroundColor','pink')

3、通用选择器

选取所有元素

 $('*').css('color','red')

4、标签选择器

选取页面中所有div标签

 $('div').css('color','blue')

5、多标签选择器

选取页面中的div和p标签

$('div,p').css('color','red')

6、交集选择器

选取ul 下面类名为item的元素

  $('ul .item').css('color','red')

7、子代选择器

选取ul的亲儿子li的元素，不包括孙子级别的元素。

 $('ul>li').css('color','red')

8、后代选择器

获取ul下所有的li元素，包括子孙级别。

 $('ul li').css('color','blue')

筛选选择器

1、选取第一个元素

修改的是ul下面第一个li。

 $('ul li:first').css('color', 'blue');

2、选取最后一个元素

修改的是ul下面最后一个li。

 $('ul li:last').css('backgroundColor', 'blue');

3、选取第n个元素

下标从0开始，这里选取的是第二个元素。

$('ul li:eq(1)').css('color', 'yellow')

4、选取奇数的元素

$('ul li:odd').css('color', 'yellow')

5、选取偶数的元素

$('ul li:even').css('color', 'yellow')

筛选方法

1、父

• $(‘子元素’).parent()：返回的是最亲一级的父亲

2、子

• $(‘父元素’).children(‘子元素’)：返回父元素下面直系子元素，也就是亲儿子，类似子代选择器。 2）

• $(‘父元素’).find(‘子元素’)：返回父元素下面所有的子元素，类似后代选择器。

3、兄

1. $(‘元素’).sibings(’ ') ：返回的是元素的亲兄弟，但是不包括自己本身。

4、返回元素后面的所有兄弟元素

$(‘元素’).nextAll(）

5、返回元素前面的所有兄弟元素

$(‘元素’).prevtAll():

6、返回元素的索引

• 1）利用选择器
  $(‘元素：eq(索引)’)的方式

• 2）利用选择的方式（推荐）
  $(‘元素’).eq(索引)