[随记]锋利的jQuery 第三章 jQuery中的DOM操作

 

第三章 jQuery中的DOM操作

 

DOM解决了Netscape的JavaScript和Microsoft的JScript之间的冲突，给予了Web设计师和开发者事与一套标准的方法，让他们能够轻松获取和操作网页中的数据、脚本和表现层对象。

 

3.1 DOM操作的分类
一般来说，DOM操作分为3个方面，即DOM Core(核心)、HTML-DOM和CSS-DOM。

1. DOM Core
JavaScript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。

 

2. HTML_DOM
提供一些更简明的记号来描述各种HTML元素的属性。
例如：
使用HTML-DOM来获取表单对象的方法：
document.forms  //获取一个forms对象
element.src   //获取元素的src属性

HTML_DOM的代码通常比较简短，不过它只能用来处理Web文档。

 

3. CSS_DOM
CSS_DOM是针对CSS的操作。在JavaScript中，CSS_DOM技术的主要作用是获取和设置style对象的各种属性。
例如：
element.style.color = "red";

 

3.2 jQuery中的DOM操作
每一张网页都能用DOM表示出来，而每一份DOM都可以看作一棵DOM树。对DOM的各种操作都围绕DOM树而展开。

 

3.2.1 查找节点
1. 查找元素节点
使用jQuery在文档树上查找节点可能通过jQuery选择器来完成。

 

2. 查找属性节点
使用attr()方法完成。

 

3.2.2 创建节点
创建节点可以使用jQuery的工厂函数$()来完成。格式如下：
$(html);

 

$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

无论$(html)中HTML代码多么复杂，都要使用相同的方式来创建。

 

例如：
var $li_ = $("<li title='雪梨'>雪梨</li>");

3.2.3 插入节点
append()
appendTo()

prepend()
prependTo()

after()
insertAfter()

before()
insertBefore()

 
3.2.4 删除节点
jQuery提供了两种删除节点的方法，即remove()和empty()。
//$li.remove();  //删除整个节点
//$li.empty();  //只是清空节点文本,不删除节点

 

3.2.5 复制节点
jQuery提供clone()方法来完成节点复制。
在clone()方法中传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件。

 

3.2.6 替换节点
如果要替换某个节点，jQuery提供了相应的方法，即replaceWith()和replaceAll()。

 

replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。
如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会替换的元素一起消失，需要在新元素上重新绑定事件。

 

3.2.7 包裹节点
如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()。

包裹节点操作还有其他两个方法，即wrapAll()和wrapInner()。
wrap()是将所有的元素进行单独的包裹，而wrapAll()是将所有元素包裹在一起。wrapInner()将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。

 

例如：
wrapAll()效果：
<strong title="选择你喜欢的水果">
 <p title="选择你喜欢的水果">选择你喜欢的水果</p>
 <p title="选择你喜欢的水果">选择你喜欢的水果</p>
</strong>

 

wrap()效果：
<strong title="选择你喜欢的水果">
 <p title="选择你喜欢的水果">选择你喜欢的水果</p>
</strong>
<strong title="选择你喜欢的水果">
 <p title="选择你喜欢的水果">选择你喜欢的水果</p>
</strong>

 

wrapInner()效果：
<p title="选择你喜欢的水果">
 <strong title="选择你喜欢的水果">选择你喜欢的水果</strong>
</p>
<p title="选择你喜欢的水果">
 <strong title="选择你喜欢的水果">选择你喜欢的水果</strong>
</p>

3.2.8 属性操作
在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

 

如果要获取元素属性，只需要给attr()方法传递一个参数，即属性名称。
如果要设置元素属性，需要给attr()方法传递二个参数，即属性名称和对应的值。

使用removeAttr()方法删除文档特定属性。

 

3.2.9 样式操作
addClass()追加样式

 
removeClass()移除样式
toggle(fn,fn,...)：交替执行代码，主要是控制行为上的重复切换。
toggleClass()：控制样式的重复切换。如果类名存在则删除它，如果类名不存在则添加它。
hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false。实际jQuery内部是调用了is()方法来完成这个功能的。

例如：
$("p").hasClass("another")等价于$("p").is(".another") //is("." + class)

 

3.2.10 设置和获取HTML、文本和值
html()类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个元素中上的HTML内容。
可以用于XHTML文档，但是不能用于XML文档。

 

text()类似于JavaScript中的innerText属性，可以用来读取或者设置某个元素中的文本内容。

1)JavaScript中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text()方法支持所有的浏览器。
2)text()方法对HTML文档和XML文档都有效。

 

 

 

 

val()类似于Javascript中的value属性，可以用来设置和获取元素的值。如果元素为多选，则返回一个包含所有有选择的值的数组。
val()还能使得select、checkbox、radio相应的选项被选中。

 

focus()和blur()方法相当于JavaScript中的onfocus()方法和onblur()方法。

 

defaultValue属性包含表单元素的初始值。

 

3.2.11 遍历节点
children()用来取得匹配元素的“直接”子元素集合。只考虑直接子元素而不考虑任何后代元素。

next()取得匹配元素后面紧邻的同辈元素。

prev()取得匹配元素前面紧邻的同辈元素。

silibings()取得匹配元素前后面所有的同辈元素。

 

3.2.12 CSS-DOM操作
CSS-DOM技术简单来说就是读取和设置style对象的各种属性。style无法提取到通过外部CSS设置的样式信息，然而在jQuery中，用css()可以完成。

在css()方法中，如果属性中带有"-"符号，则该符号后面的单词要大写代替"-"。
建议都加上引号，养成良好的习惯。

例如：
$("p").css("font-size", "30px")
$("p").css("fontSize", "30px")

$("p").css(fontSize: "30px")   //错误，不存在这样的函数
$("p").css(fontSize, "30px")   //错误，css(name) //name类型为String

$("p").css({"font-size": "30px"})  //驼峰法 css(properties)
$("p").css({fontSize: "30px"})   //驼峰法 css(properties) //大写代替"-"

height()方法可以用来获取window和document的高度。

css("height")获取的高度值与样式的设置有关，可能会得到"auto"，也可能得到"10px"之类的字符串；而height()方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，并且不带单位。

 

 

 

 

offset()获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。

 

position()获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性，即top和left。

 

scrollTop()和scrollLeft()
这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。
可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。

 

3.3 案例研究 某网站的超链接和图片提示效果
几个问题：
1. 首先是当鼠标滑过后，<a>标签中的title属性的提示也会出现；
解决方法：
在鼠标滑入时，保存对象title属性值，然后置空title属性值或者移除title属性。
在鼠标滑出时，再重新设置对象title属性值。

 

2. 其次是设置x坐标和y坐标的问题,由于自制的提示与鼠标的距离太近,有时候会引起无法提示的问题(鼠标焦点变化引起mouseout事件)。
解决办法：
重新设置提示元素的top和left值，为top增加了10px，为left增加了20px。

 

3. 最后当鼠标在超链接上移动时，提示效果跟随问题。为超链接添加一个mousemove事件。