呃，貌似是广告哈？呵呵，不过的确是这样，jQuery为我们提供了丰富的DOM操作方法，使这些复杂的DOM操作变得简单。
继上一回写jQuery的笔记貌似已经过去很长时间了，这一节也确实有必要写一下了，呵呵，Let"s Go~
操作属性：
之前，我们说过.addClass（）及.removeClass（）方法，更改的其实也是DOM的属性：className。
说到这就得再提一下，为啥元素的类名叫做className而不是直接叫class，因为class是js的保留字。嗯。
那么除了class，DOM元素的其它属性，如：id、rel及href之类的，对于这些属性我们咋操作？
别急，jQuery提供了.attr（）和.removeAttr（）方法。
甚至，你也可以用这两个方法来替代.class（）方法——如果你想给自己找点麻烦的话，呵呵。。
下面，让我们把红色的字，变成绿色的，而且，我喜欢GOOGLE，但是有一些人喜欢百度，那么好，让我们选择自己喜欢的。
复制代码 代码如下:
这里有个超链接，超链接的地址为<a href="http:/www.baidu.com" target="_blank" class="link">百度</a>
<br/>
点击这个按钮，让百度变GOOGLE,再点一下就让它再变回百度<input type="button" value="变GOOGLE吧" id="but_link"/>
<br/><br/>
这里有几个字，字的颜色呢，是红色的，<font color="red" class="font">我是红色，我是红色</font>
<br/>
点击这个按钮，让红色变绿色<input type="button" value="变绿色吧" id="but_color"/>
复制代码 代码如下:
$（document）.ready（function（）{
$（"#but_link"）.toggle（function（）{
$（".link"）.attr（"href","http://www.google.com"）;
$（".link"）.text（"GOOGLE"）;
$（this）.attr（"value","变BAIDU吧"）;
},function（）{
$（".link"）.attr（"href","http://www.baidu.com"）;
$（".link"）.text（"百度"）;
$（this）.attr（"value","变GOOGLE吧"）;
}）;
$（"#but_color"）.toggle（function（）{
$（".font"）.attr（"color","green"）;
$（".font"）.text（"我是绿色，我是绿色"）;
$（this）.attr（"value","变红色吧"）;
},function（）{
$（".font"）.attr（"color","red"）;
$（".font"）.text（"我是红色，我是红色"）;
$（this）.attr（"value","变绿色吧"）;
}）;
}）;
如果想要循环对一些DOM对象做处理，比如书中的例子，想要对一个DIV下的每个A标签都给其一个唯一的ID
那么就可以用到jQuery的.each（）方法，其类似于一个迭代器，有点像PHP的foreach
复制代码 代码如下:
$（document）.ready（function（） {
$（"div.chapter a"）.each（function（index） {
$（this）.attr（{
"id": "wikilink-" + index,
}）;
}）;
}）;
这个index参数类似于一个计数器，对第一个链接它的值为0，然后对每个后续的链接它的值会递增1。依此类推。
呃，稍候这些例子，我一起给出演示地址。不过很无奈的是，我国外空间的那个地址被墙了。嗯。
深入理解$（）工厂函数：
其实，从刚开始记这个笔记我们就在用这个工厂函数。
在某种意义上来说，这个函数在jQuery库中牌最核心的位置，因为无论在添加效果、事件
还是为匹配的元素集合添加属性时，都离不开它。
然而，除了选择元素之外，$（）函数的圆括号内还有另一个玄机——这个强大的特性使得$（）函数不仅能够改变页面的视觉外观，
更能改变页面中实际的内容。只要在这对圆括号中放入一组HTML元素，就能轻而易举地改变整个DOM结构。
例如，书中的例子是很恰当的，因为我确实写过FAQ。。。
而FAQ总是一问一答型的（自问自答型的）。那么，因为有的答案太长，所以要在其后面加一个Back to top
可以这样写
复制代码 代码如下:
$（document）.ready（function）{
$（"<a href="#top">back to top</a>"）;
$（"<a id="top"></a>"）;
}）;
这样就为每个段落后面加了一个超链接“Back to top”，并且也添加了一个”top”锚。
啥？你说你没看见？呃，好吧。。我承认因为我还没有插入这个新元素至DOM中，只是创建了出来。
插入新元素：
jQuery提供了两种将元素插入到其他元素前面的方法：.insertBefore（）和.before（）。
这两个方法作用相同，它们的区别取决于如何将它们与其他方法进行连缀。
那么，很自然的，聪明的你一定会想到，插入到其他元素后面的方法就是.insertAfter（）和.after（）。
对于刚才的”back to top”我们使用.insertAfter（）方法，原因就是我们要在每个答案后面加上这个链接。。嗯。
复制代码 代码如下:
$（document）.ready（function）{
$（"<a href="#top">back to top</a>"）.insertAfter（"div.chapter p"）;
$（"<a id="top"></a>"）;
}）;
通过.after（）方法也能完成与.insertAfter（）相同的任务，只不过必须把选择符表达式放在这个方法的前面，而不是后面。
在使用.after（）方法时，$（document）.ready（）中的第一行代码可以改写成如下所示：
$（"div.chapter p"）.after（"<a href="#top">back to top</a>"）;
使用.insertAfter（），可以通过连缀更多方法连续地对所创建的<a>元素进行操作。
而使用.after（），连缀的其他方法的操作对象就变成了$（"div.chapter p"）中选择符匹配的元素。
那么，要在元素内插入新的元素咋办啊？刚才说的这些都是使其成为兄弟元素。而怎么插入子元素呢？
别急，有.prependTo（）方法呢。
复制代码 代码如下:
$（"<a id="top" name="top"></a>"）.prependTo（"body"）;
.prependTo（）方法插入了作为目标的描，我们就为页面添加了一组功能完备的back to top链接。
同样，jQuery还提供了一个方法是.prepend（），看API其作用为：
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
例如：
复制代码 代码如下:
<p>I would like to say: </p>
<！-- 执行完效果 -->
<！--
<p>I would like to say: <b>Hello</b></p>
-->$（"p"）.append（"<b>Hello</b>"）;
包装元素：
jQuery中用于将元素包装在其他元素中的方法，被贴切地命名为：.wrap（）。
如果，要将一个
<p>Test Paragraph.</p><div id="content"></div>
里面的<p>标签包在div里面，
<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>
就可以这样来写
$（"p"）.wrap（document.getElementById（"content"））;
复制元素：
重头戏终于出来了。。嗯。复制元素。。
现年头都实行克隆，不过最近好像很少喊了。喊的最多的就是要克隆人。想想都奇怪。 克隆完后抢你老婆咋办？
呃。闲话少说吧。。jQuery的克隆方法就是.clone（）。嗯。相对于插入方法，相当于复制和粘贴。
默认情况下，.clone（）方法不仅会复制匹配的元素，也会复制其所有的后代元素。
书上说这个方法也是接受参数的，如果参数值为false，那么就只会复制匹配的元素，而不复制其子元素。
不过我试验后不是这样的。。嗯。
复制代码 代码如下:
<div id="xxx"><p>我可是有内容的DIV</p></div>
<input type="button" id="but_clone" value="复制嘿嘿" /> $（"#but_clone"）.click（function（）{
$（"#xxx"）.clone（false）.insertAfter（$（"#xxx"））;
}）;
书上说clone（false）不会复制子标签里的内容，但是我的实验是仍然会复制子标签内容。。这是一处不同。
另外，书上说clone（）不会复制元素的事件。这个我试验后也是可以的。。嗯。。还是奇怪。。唉。
当需要多次引用一个jQuery对象时，最佳方式就是把它们保存到变量中。
这样，通过减少对jQuery的$（）工厂函数的调用，能够提高遍历DOM的速度。。
呃，这一章就简单的记录完了。有些遗憾，因为没办法按书中的例子来给大伙讲解。那样就是在抄这本书了。
断断续续的，因为中等要吃饭。所以这节写了很长时间，总体效果嘛，自己还算满意哈。呵呵。
下面，把书中的这一段抄下来吧。嗯。就是
DOM操作方法的简单归纳：
要在每个匹配的元素中插入新元素，使用：
.append（）
.appendTo（）
.prepend（）
.prependTo（）
要在每个匹配的元素相信的位置上插入新元素，使用：
.after（）
.insertAfter（）
.before（）
.insertBefore（）
要在每个匹配的元素外部插入新元素，使用：
.wrap（）
要用新元素或文本替换每个匹配的元素，使用：
.html（）
.text（）
要移除每个匹配的元素中的元素，使用：
.empty（）
要从文档中移除每个匹配的元素及其后代元素，但不实际删除它们，使用：
.remove（）
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
代码打包下载
易网时代-编程资源站