jQuery学习笔记2:选择器

1    简单选择器

               $(‘#box>p‘).css(‘color‘,‘red‘)                      //直接相邻儿子p标签

返回选择器选择元素个数方法:length属性或size()方法。

   jQuery具有容错功能:

if (document.getElementById(‘pox‘)) {
   document.getElementById(‘pox‘).style.color = ‘red‘;
}

等效于
if ($(‘#pox‘).size() > 0) {
   $(‘#pox‘).css(‘color‘, ‘red‘);
}

也可以转换为DOM对象方式来判断,有值时返回值为object对象,无值时返回值为undefined
if ($(‘#pox‘).get(0)) {
   ...
}
if ($(‘#pox‘)[0]) {
   ...
}


2    进阶选择器

(1)群组选择器:

   $(‘div, p, strong‘).css(‘color‘, ‘red‘);

(2)后代选择器

   $(‘ul li a‘).css(‘color‘, ‘orange‘);

(3)通配符选择器

   $(‘*‘).css(‘color‘, ‘red‘);

备注:在全局范围使用*号,会极大的消耗资源,所以不建议在全局使用。通配选择器一般运用在局部的环境内。

   $(‘ul li *‘).css(‘color‘, ‘red‘);

(4)在ID和class中指明元素前缀
   $(‘div.box‘).css(‘color‘, ‘red‘);   //限定必须是.box元素,获取必须是div

(5)在同一个DOM节点声明多个类

   $(‘.box.pox‘).css(‘color‘, ‘green‘);    // <div class="box pox"></div>


3    高级选择器

(1)后代选择器

   $(‘#box p‘).css(‘color‘, ‘red‘);

等效于(find()方法)

   $(‘#box‘).find(‘p‘).css(‘color‘, ‘red‘);

(2)子选择器(孙子后失明)

   $(‘#box > p‘).css(‘color‘, ‘red‘);

等效于(children()方法)

   $(‘#box‘).children(‘p‘).css(‘color‘, ‘red‘);

(3)next选择器(下一个同级节点)

   $(‘#box + p‘).css(‘color‘, ‘blue‘);

等效于(next()方法)

   $(‘#box‘).next(‘p‘).css(‘color‘, ‘blue‘);

(4)nextAll选择器(后面所有同级节点)

$(‘#box ~ p‘).css(‘color‘, ‘orange‘);

等效于(nextAll()方法)

   $(‘#box‘).nextAll(‘p‘).css(‘color‘, ‘orange‘);

备注:在find()、children()、next()和nextAll()方法,若不传递参数,相当于传递了“*”,即任何节点,建议不要使用。

   $(‘#box‘).next(‘‘)       //等效于$(‘#box‘).next(‘*‘)

(5)同级上一个元素prev()
   $(‘#box‘).prev(‘p‘).css(‘color‘, ‘red‘);
(6)同级所有上面的元素prevAll()
   $(‘#box‘).prevAll(‘p‘).css(‘color‘, ‘red‘);

(7)上下同级所有元素siblings()

   $(‘#box‘).siblings(‘p‘).css(‘color‘, ‘red‘);

等效于

   $(‘#box‘).prevAll(‘p‘).css(‘color‘, ‘red‘);

   $(‘#box‘).nextAll(‘p‘).css(‘color‘, ‘red‘);

(8)同级下直到指定元素终止的所有同级元素nextUntil()
   $(‘#box‘).nextUntil(‘p‘).css(‘color‘, ‘red‘);
(9)同级上直到指定元素终止的所有同级元素prevUntil()
   $(‘#box‘).prevUntil(‘p‘).css(‘color‘, ‘red‘);

(10)执行速度

   $(‘#box‘).find(‘p‘).css(‘color‘, ‘red‘);     //最快

等效于

   $(‘#box p‘).css(‘color‘, ‘red‘);  

   $(‘p‘, ‘#box‘).css(‘color‘, ‘red‘);


本文出自 “IT技术学习与交流” 博客,谢绝转载!

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。