选择元素

本文详细对比了JavaScript数组与CSS选择符在编号方式上的差异,并阐述了两者在选择元素时的不同方法。此外,介绍了jQuery的自定义选择符、筛选函数filter()的使用,以及如何通过next()、nextAll()、siblings()等方法选择元素。最后,展示了如何通过.get()方法访问DOM元素,以及jQuery对象与DOM对象之间的转换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. padding-right: 30px;/*在对象的内容与对象的右边框之间插入空间(18px)*/

 

2.css选择符是从1开始的,Javascript数组是从0开始的

$('tr:nth-child(even)').addClass('alt');/*这个选择符相对于元素的父元素而非当前选择的所有元素来计算位置*/

 

3.区别:JavaScript数组采用从0开始的编号方式,而CSS则是从1开始的,因此CSS选择符$('div:nth-child(1)')取得的是作为其父元素的第1个子元素

a. jquery自定义选择符:odd和:even。

$('tr:even');//取得偶数行,从0开始编号

b. css选择符:nth-child()

$('tr:nth-child(even)');//取得偶数行,从1开始编号

 

4.jQuery自定义选择符

:odd, :even, :contains(),自定义表单选择符

值得注意的是:contains()选择符区分大小写

 

5.筛选函数filter(),实现隐式迭代能力,保持代码的简洁。

如果没有筛选函数filter(),就必须显示地遍历每个元素,对它们单独进行测试

filter()函数会迭代所有匹配的元素,对每个元素都调用传入的函数并测试函数的返回值。如果函数返回false,则从匹配

集合中删除相应元素;如果返回true,则保留相应元素

 

6,$('a').filter(function(){

  return this.hostname && this.hostname != location.hostname;有字符串返回为true。返回"",则为false

}).addClass('external');

 

7.next()方法只选择下一个最接近的同辈元素(1,同辈元素,2.最接近)。与其相反的是prev()只选择上一个最接近的同辈元素

 

8.nextAll()方法只选择后面所有同辈元素, 与其相反的是prevAll()

 

9.siblings()能够选择处于相同DOM层次的所有其他元素(1,相同DOM层,eg:head与body,2.所有元素),无论这些元素处于当前元素之前

还是之后

 

10.访问DOM元素

jQuery对象能够提供隐式迭代和联缀能力。

尽管如此,我们仍然有很能需要在代码中直接访问DOM元素。Eg:可能需要为另一个JavaScript库提供一组元素的结果集合。或者可能不得不访问某个元素的标签名——通过DOM元素的属性,对于这些少见但合理的情形,jQuery提供了.get()方法。要访问jQuery对象的第一个DOM元素,可以使用.get(0)。

var  $myTagObj = $(‘my-element’);// jQuery对象

var myTagObj = $myTag.get(0); //DOM对象,将jQuery对象转换为DOM对象

var myTag = myTagObj.tagName;//获取标签名

 

为了进一步简化这些代码,jQuery还为.get()方法提供了一种简写方式。比如,可以将

$(‘my-element’).get(0)简写为$(‘my-element’)[0]

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值