0403jQuery选择器

一、基本选择器

1.jquery中的选择器与css中基本上是一致的,便于熟悉css的开发人员快速掌握
2.绝大多数css选择器可以在jquery中直接使用
3.基本选择器,也叫基础选择器,或者入口选择器,简单选择器,功能就是向jquery提供
一级元素,供后面的过滤器进行操作,最主要的有四类: tag,id,class,*

3.1. tag标签选择器
  $('td').css('backgroundColor','wheat')
3.2.id选择器
 把td上的背景去掉,否则会层叠覆盖
$('#title').css('backgroundColor','lightgreen')
3.3.class类选择器
$('.mark').addClass('bg-orange')
3.4.*通配选择符
$('tr:nth-child(3) ~ *').css('backgroundColor', 'pink')

二、层级选择器

1. 后代:空格
   

$('li a').addClass('green')

2. 所有子元素 >

$('ul > *').addClass('red')

3. 相邻兄弟元素 +

将第5个li的下一个兄弟:第6个li前景色变更为绿色

$('li:nth-child(5) + li').addClass('green')

4. 全部兄弟元素 ~

$('li:nth-child(5) ~ li').addClass('green')

5.第一个与最后一个元素

$('li:first-child').addClass('green')
$('li:first').addClass('green')

$('li:last-child').css('color','red')
$('li:last').css('color','red')

6.直接选中某一个元素

$('li:nth-child(6)').addClass('red')
jquery使用eq(i),i从0开始,注意与css中的不一样
$('li:eq(5)').addClass('red')

7选中大于或小于某个序号的元素

选中序号大于4的所有元素,注意从0开始计算
 $('li:gt(3)').addClass('red')
选中序号小于8的所有元素
 $('li:lt(7)').addClass('red')

8.去掉所有元素上的class
$('*').removeClass()
仅去掉li,不包括li下面的a,链接仍为绿色
$('li').removeClass()

9.根据序号特征来选择元素

 选中所有序号为偶数的元素even

$('li:even').addClass('red')

选择奇数用是odd

$('li:odd').addClass('red')

三.内容过滤

1.选择包含指定文本内容的元素

实例

$('p:contains("春")').addClass('bg-wheat')
$('p:contains("风")').addClass('bg-green')

 2.选择内容为空的标签,空是指没有子标签,甚至连文本内容都不能有

实例

$(':empty').text('作者:孟浩然')

 3.选择有img标签(图片)的p元素,给它加个背景

实例

$('p:has("img")').addClass('bg-pink')

4.选择所有以p为父元素的节点,添加绿背景

实例

$('p:parent').addClass('bg-green')

5.取反过滤器not,选择页面中所有内容不为空的元素,前景色变更为红色

实例

$(':not(:empty)').css('color','red')

四、表单过滤器

1.根据类型选择表单控件元素
css写法,仅选到到所有的input,其它的控件选不上
 $('input').css('background-color', 'lightgreen')
jquery写法,前面加上冒号即可,除了input,select,button,textarea全部可以选上
 $(':input').css('background-color', 'lightgreen')
如果只想选input标签,在:input之前加上标签限定:input即可,此时与css语法效果完全一致
$('input:input').css('background-color', 'lightgreen')

:input:本意就是选择全部的表单控件的意思,后面可以用css属性进行限制,例如获取密码框
 $(':input[type="password"]').css('background-color', 'lightgreen')
后面除了可以用css属性进行限制外,更推荐使用jquery的过滤器,例如密码框过滤器就是:password
 $(':input:password').css('background-color', 'lightgreen')
换个颜色以示区别,从这里可以看出,过滤器之间也支持链式操作
$(':input:password').css('background-color', 'skyblue')

2.根据表单控件的特征来选择元素

只选择file类型
$(':file').css('background-color', 'lightgreen')
只选择文本框:type="text"
$(':text').css('color',"red")

五、常用的过滤方法

1:get()将jquery对象转为DOM对象:将第二个文本的前景色设置为红色

实例

$('li').get(1).style.color = 'red'

2.eq():获取指定序号的元素,注意,返回的是jQuery对象

实例

$('li').eq(4).css('color','red')

3.first():返回第一个元素,不需要参数

实例

$('li').first().css('color','red')

4.last():返回最后一个元素,不需要参数

实例

$('li').last().css('color','red')

5.toArray(),返回DOM数组,注意不是jquery对象

实例

var li = $('li').toArray()
for(var i=0; i<li.length; i++){
    li[i].style.color = 'green'
}

6.find():返回所有的后代元素,包括子,孙...

实例

$('ul').find('li').css('color','coral')
$('ul').find('a').css('color','cyan')

7.children()返回所有的直接子元素

实例

$('ul').children().css('color','deeppink')
$('ul').children('p').css('color','deeppink')

8.对每个元素执行回调函数

实例

$('li').each(function(){
$(this).css('background-color','wheat')
$(this).css('color','black')
$(this).css('font-size','1.3em')

})

9.元素遍历方法

实例

//next()下一个同级元素
$('li').eq(2).next().css('color','blue')
//nextAll()后面全部的同级元素
$('li').eq(2).nextAll().css('color','blue')
//siblings():返回所选元素的所有同级元素,除它自己
$('li').eq(2).siblings().css('color','blue')

//向前遍历
//prev():前一个同级元素
$('li').eq(6).prev().css('color','coral')

//prevAll():您一定猜到了,对,是前面的所有同级元素
$('li').eq(6).prevAll().css('color','coral')

10. add(selector),将元素添加到所选的集合中

实例

//先去掉所有元素上面的自定义样式,将元素打回原型,素颜模样
$('*').removeAttr('style')

//将所有li文本设置为红色,你会发现有一个p没有选上,这也正常
$('li').css('color','red')
//那么如何才能选上p元素呢,只有加大选区,把p元素放进这个选区中就可以了
//使用add()方法就可以做到
$('li').add('p').css('color','red')

11. filter()从结果中返回符合条件的元素

实例

//仅仅返回第6个元素
$('li').filter(':eq(5)').css('background-color','lightgreen')

12. not()与filter()功能正好相反,去掉满足条件的元素

实例

$('li').not(':eq(5)').css('background-color','lightgreen')

13. slice(start, end),返回指定范围的元素

实例

//包括起始位置,不包括结束位置,返回的结果数量是5-2=3
$('li').slice(2,5).css('background-color','lightgreen')

//获取前4个元素
$('li').slice(0,4).css('background-color','lightgreen')

//省略第二个参数,默认从当前开始直到结尾
$('li').slice(4).css('background-color','lightgreen')