jQuery技术

jQuery学习笔记使用jQuery选择DOM元素(2)

字号+ 作者:H5之家 来源:H5之家 2017-05-20 15:00 我要评论( )

取得某个元素的父元素或者祖先元素都是基本的操作,而这里正是需要用到jQuery的DOM遍历方法的地方。通过这些方法,我们可以轻而易举地在DOM树中上下左右地自由漫步。 3.1 .filter(expr|obj|ele|fn) 语法:Queryfilt

  取得某个元素的父元素或者祖先元素都是基本的操作,而这里正是需要用到jQuery的DOM遍历方法的地方。通过这些方法,我们可以轻而易举地在DOM树中上下左右地自由漫步。

<3.1>  .filter(expr|obj|ele|fn)

  语法:Queryfilter(expr|obj|ele|fn)

  定义:筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式

示例:

HTML代码:

>And Again</p>

jQuery代码:

).filter()

结果:

>And Again</p> ]

更详细的说明查看具体API

<3.2>  .next()和.nextAll

  语法:next([expr])  nextAll([expr])

  定义:取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。

示例:

HTML代码:

1 <p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery代码:

).next()

结果:

1 [ <p>Hello Again</p>, <div><span>And Again</span></div> ]

<3.3>  .prev()和.prevAll

  语法:prev([expr])  prevAll([expr])

  定义:取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素(prevAll)。

  示例:

HTML代码:

1 <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery代码:

).prev()

结果:

1 [ <div><span>Hello Again</span></div> ]

<3.4>  .siblings()

  语法:siblings([expr])

  定义:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

  示例:

HTML代码:

>Hello Again</p><p>And Again</p>

jQuery代码:

).siblings()

结果:

>Hello Again</p> ]

<3.5>  .andSelf()

  语法:andSelf()

  定义:加入先前所选的加入当前元素中,对于筛选或查找后的元素,要加入先前所选元素时将会很有用。

示例:(选取所有div以及内部的p,并加上border类)

HTML代码:

1 <div><p>First Paragraph</p><p>Second Paragraph</p></div>

jQuery代码:

).find().andSelf().addClass();

结果:

> >First Paragraph</p> >Second Paragraph</p> 4 </div>

<3.6>  .parent([expr]) 和 .children([expr])

  定义:

  parents()将查找所有祖辈元素,而children()只考虑子元素而不考虑所有后代元素。

  .parent([expr])  ——  取得一个包含着所有匹配元素的唯一父元素的元素集合。(可以使用可选的表达式来筛选。)

  .children([expr])  ——  取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。(可以使用可选的表达式来筛选。)

 示例1:(查找每个段落的父元素)

HTML代码:

1 <div><p>Hello</p><p>Hello</p></div>

jQuery代码:

).parent()

结果:

1 [ <div><p>Hello</p><p>Hello</p></div>]

示例2:(查找DIV中的每个子元素。)

HTML代码:

1 <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery代码:

).children()

结果:

1 [ <span>Hello Again</span> ]

4.访问DOM元素

  有时候我们可能需要在代码中直接访问DOM元素(get(index)),例如,获取id="my-element"属性的元素的标签名

)[0].tagName;

参考资料:

《jQuery基础教程(第三版)》

jQuery 1.8.0 API文档 (点击下载)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 菜鸟的jQuery源码学习笔记(一)

    菜鸟的jQuery源码学习笔记(一)

    2017-05-20 16:00

  • jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

    jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

    2017-05-20 14:11

  • jQuery学习简要笔记

    jQuery学习简要笔记

    2017-05-19 11:00

  •  Demo学习: Basic jQuery

    Demo学习: Basic jQuery

    2017-05-19 10:03

网友点评