JQuery之选择器

Posted 2023-03-20

参考技术A 一、普通选择器

1.标签选择器：$('p').css('background','red')；

2.类选择器：$('.p1').css('background','red')；

3.id选择器：唯一的 只要有一个id选择器其他同名的就不生效了$('#p1').css('background','red')；

4.并集选择器：$('#p1,.p1').css('background','red') /* 等同于下面 */ $('#p1').css('background','red') $('.p1').css('background','red')；

既要有.p1 又要有.p2   $('.p1.p2').css('background','red')；

5.全局选择器*:

属性值 支持数字和字符串 $('*').css(margin:0,padding:0)

二、层次选择器

1.后代选择器 ：

$('ul p').css('background','red');

2.子集选择器>：

$('ul > p').css('background','red');

3.相邻选择器+：用来选取紧邻目标元素的下一个元素

$('p+li').css('background','red');

4.同辈选择器：用来选取目标元素之后的所有同辈元素

$('p ~ li').css('background','red');

三、属性选择器：属性选择器可以根据是否包含某属性来选取元素

1.[]表示属性 选取属性是href的a标签

$('a[href]').css('color','red')；

2.根据属性的值来选取元素

$('a[class=a1]').css('color','red')；

3.选取不等于属性是某个特定值的元素

$('a[class!=a1]').css('color','red')；

4.指定属性值以指定值开头的元素^;

$('a[href^=www]').css('background','red');

5.指定属性值以指定值结尾的元素$:

$('a[href$=com]').css('background','red');

6.指定属性值包含指定值的元素*;

$('a[href*=baidu]').css('background','red')