jQuery 知识量:7 - 32 - 105
jQuery的$()函数确实十分强大,可以轻松的获取筛选后的元素集合,那么,如何在这个集合里面继续筛选或定位某个元素就是jQuery遍历方法要做的事了。
1、常用的筛选函数如下:
.filter()是jQuery的筛选函数,可以像使用$()函数那样向它传入CSS选择符表达式以更加具体的筛选元素,也可以向它传入一个函数,.filter()函数会自动对集合中的每个元素调用传入的函数进行测试,符合条件的元素才会保留在集合中。
$('p').filter(function () { return $(this).prop('id') == 'hello'; });
这段代码的意思是:在选中的所有p元素中进一步过滤,超出其id值为“hello”的p元素。
2、常用的定位函数如下:
.next()方法可以用于选择下一个最接近当前元素的同辈元素。
.nextAll()方法可以用于选择当前元素后面所有的同辈元素。
.prev()方法可以用于选择上一个最接近当前元素的同辈元素。
.prevAll()方法可以用于选择当前元素前面所有的同辈元素。
.siblings()方法可以用于选择当前元素前后所有的同辈元素,但不包括当前元素自己。
.andSelf()方法可以用于遍历完其他元素后再选中自己。
.parent()方法可以用于选择当前元素的父元素。
.children()方法可以用于选择当前元素的所有子元素。
$('p.hello').next().children().addClass('light');
这段代码的意思是:找到类为“hello”的p元素,然后定位到下一个最接近的同辈元素,然后选择这个同辈元素所有的子元素,为它们添加新类“light”。
这一段代码同时也展示了jQuery的连缀功能,也就是通过“.”在一行代码中取得多个元素集合,并对它们进行多次操作,这都是因为jQuery方法总是返回一个jQuery对象,而且通常返回当前对象自身。
多数的jQuery方法返回的都是jQuery对象,如果要直接访问DOM元素,可以使用.get()方法。
var theTagName = $('#hero').get(0).tagName;
这段代码的意思是:选择id为“hero”的所有元素,找到其中的第一个元素的标签名,将其赋值给theTagName。注意因为$()函数以集合的方式选择的元素,因此尽管id为“hero”的元素一般就是一个,也要通过索引值“0”来访问。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6