jQuery

jQuery 知识量:7 - 32 - 105

2.3 DOM遍历方法><

常用的遍历方法- 2.3.1 -

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对象,而且通常返回当前对象自身。

访问DOM元素- 2.3.2 -

多数的jQuery方法返回的都是jQuery对象,如果要直接访问DOM元素,可以使用.get()方法。

var theTagName = $('#hero').get(0).tagName;

这段代码的意思是:选择id为“hero”的所有元素,找到其中的第一个元素的标签名,将其赋值给theTagName。注意因为$()函数以集合的方式选择的元素,因此尽管id为“hero”的元素一般就是一个,也要通过索引值“0”来访问。