现在的位置: 首页 > 综合 > 正文

learning jQuery 学习笔记二(+jQuery 1.4.1 API)–DOM遍历方法

2017年12月03日 ⁄ 综合 ⁄ 共 3762字 ⁄ 字号 评论关闭

注:本笔记内容摘自《jQuery基础教程》+ jQuery 1.4.1中文参考

DOM遍历方法

用于添加odd类的代码$(‘tr:odd’).addClass(‘odd’);可以通过filter()方法重写成下面这样:

$(‘tr’).filter(‘:odd’).addClass(‘odd’);

这两种取得元素的方式字很大程度上可以互补。

 

为标题栏添加样式

$(document).ready(function(){

       $(‘th’).parent().addClass(‘table-heading’);

       $(‘tr:not([th]):even’).addClass(‘even’);

       $(‘tr:not([th]):odd’).addClass(‘odd’);

$(‘td:contains(“Henry”)’).addClass(‘highlight’);

});

 

next()--找到每个段落的后面紧邻的同辈元素。

$(document).ready(function(){

       $(‘th’).parent().addClass(‘table-heading’);

       $(‘tr:not([th]):even’).addClass(‘even’);

       $(‘tr:not([th]):odd’).addClass(‘odd’);

$(‘td:contains(“Henry”)’).next().addClass(‘highlight’);

});

Example 1

描述:

找到每个段落的后面紧邻的同辈元素。

HTML 代码:

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

jQuery 代码:

$("p").next()

结果:

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

 

Example 2:

描述:

找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

HTML 代码:

<p>Hello</p><pclass="selected">Hello Again</p><div><span>AndAgain</span></div>

jQuery 代码:

$("p").next(".selected")

结果:

[ <p class="selected">HelloAgain</p> ]

 

 

Siblings()--取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

//取得包含Henry的单元格,然后取得该元素的所有单元格的所有同辈元素(不仅仅是下一个同辈元素)。最后添加类:

$(‘td:contains(“Henry”)’).siblings().addClass(‘highlight’);

Example 1:

描述:

找到每个div的所有同辈元素。

HTML 代码:

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

jQuery 代码:

$("div").siblings()

结果:

[ <p>Hello</p>, <p>And Again</p> ]

 

Example 2:

描述:

找到每个div的所有同辈元素中带有类名为selected的元素。

HTML 代码:

<div><span>Hello</span></div><pclass="selected">Hello Again</p><p>And Again</p>

jQuery 代码:

$("div").siblings(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

 

 

find()--搜索所有与指定表达式匹配的元素

//取得包含Henry的单元格,再取得它的父元素,然后找到该元素中包含的所有编号大于0(0是第一单元格)的单元格。最后添加类:

$(‘td:contains(“Henry”)’).parent().find(‘td:gt(0)’).addClass(‘highlight’);

Example 1:

描述:

从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同。

HTML 代码:

<p><span>Hello</span>, howare you?</p>

jQuery 代码:

$("p").find("span")

结果:

[ <span>Hello</span> ]

 

//取得包含Henry的单元格,再取得它的父元素,找到该元素中包含的所有单元格,然后过滤这些单元格排除包含Henry的那一个。最后添加类:

$(‘td:contains(“Henry”)’).parent().find(‘td:eq(1)’).addClass(‘highlight’).end().find(‘td:eq(2)’).addClass(‘highlight’);

 

//取得包含Henry的单元格,在取得它的父元素,找到该元素包含的子元素中的第2个单元格,添加类;取消最后一次.find(),再查找该元素包含的子元素中的第3个单元格,添加类:

$(‘td:contains(“Henry”)’).parent().find(‘td:eq(1)’).addClass(‘highlight’).end().find(‘td:eq(2)’).addClass(‘highlight’);

 

连缀

连缀就像是一口气说出一大段话----虽然效率很高,但对别人来说可能会难于理解。而将它分开放到多行并添加明确的注释,从长远来看可以节省更多的时间。

$(‘td:contains(“Henry”)’)           //取得包含“Henry”的所有单元格

.parent()                                            //取得它的父元素

.find(‘td:eq(1)’)                                 //在父元素中查找第2个单元格

.addClass(‘highlight’)                         //为该单元格添加“highlight”类

.end()                                                //恢复到包含“Henry”的单元格的父元素

.find(‘td:eq(2)’)                                 //在父元素中查找第3个单元格

.addClass(‘highlight’);                        //为该单元格添加“highlight”类

访问DOM

jQuery提供了,get()方法。要访问jQuery对象引用的第1个DOM元素,可以使用.get(0)。如果需要再循环中使用DOM元素,那么应该使用.get(index)。因而,如果想知道带有id=”my-element”属性的元素的标签名,那么使用如下代码:

         var myTag = $(‘#my-element’).get(0).tagName;

并且jQuery还为.get()方法提供了一种简写方式。比如:

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


jQueryAPI 1.4.1 参考:get()

get()     返回值:Array<Element>

概述

         取得所有匹配的 DOM 元素集合。

         这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,而实际上是元素数组)。

         如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。

示例

描述:

         选择文档中所有图像作为元素数组,并用数组内建的 reverse 方法将数组反向。

HTML 代码:

         <img src="test1.jpg"/><img src="test2.jpg"/>

jQuery 代码:

         $("img").get().reverse();

结果:

         [ <img src="test2.jpg"/><img src="test1.jpg"/> ]

 

jQueryAPI 1.4.1 参考: get(index)

返回值:Elementget(index)

概述

         取得其中一个匹配的元素。 num表示取得第几个匹配的元素。

         这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。

参数

         Index      Number

         取得第 index 个位置上的元素

示例

描述:

HTML 代码:

         <img src="test1.jpg"/><img src="test2.jpg"/>

jQuery 代码:

         $("img").get(0);

结果:

         [ <img src="test1.jpg"/> ]

抱歉!评论已关闭.