jQuery使用之处理页面元素用法实例
本文实例讲述了jQuery使用之处理页面元素用法。分享给大家供大家参考。具体分析如下：
对于页面的元素，在DOM编程中可以通过各种查询、修改手段进行管理，非常麻烦。jQuery提供了一整套的方法来处理页面的元素。包括元素的内容、复制、移动和替换等。这里将介绍一些常用的内容。
1.直接获取、编辑内容。
在jQuery中，主要是通过html()和text()两个方法来获取和编辑页面的内容。其中html()相当于获取节点的innerHTML属性，添加参数html(text)，则为设置innerHtml;而text()则用来获取元素的纯文本，text(content)为设置纯文本。
这两种方法有时配合着使用，text()通过用来过滤页面中的标记，而html(text)用来设置节点中的innerHtml。例如：
$(function(){
varsString=$("p:first").text();//获取纯文本
$("p:last").html(sString);
});利用text()的方法获取第一个P的文本，然后用html()方法赋给最后一个<p>。
text()和html()方法的巧用。
<scripttype="text/javascript">
$(function(){
$("p").click(function(){
varsHtmlStr=$(this).html();//获取innerHTML
$(this).text(sHtmlStr);//将代码做为纯文本传入
});
});
</script>
<p><b>文本</b>段落<em>示</em>例</p>
鼠标一次点击、二次点击、三次点击这些可以用在代码获取转移上。
2.移动和复制元素
在普通的DOM中，如果希望在某个元素后面添加一个元素，通常是使用父元素的appendChild()或者inserBefore()方法，很多时候需要反复需找节点的位置。十分麻烦，jQuery中提供了append()方法，可以直接为某个元素添加新的子元素。
<scripttype="text/javascript">
$(function(){
//直接添加HTML代码
$("p:last").append("<b>直接添加</b>");
});
</script>
<p>11<emtitle="huge,gigantic">22</em>...</p>
<p>33<emtitle="running">44</em>...</p>
除了直接添加html代码，append()方法还可以用来添加固定的节点，例如
$("p").append($("a"));这个情况会有一些不同，倘若添加的<p>是唯一的一个元素，那么$("a")就会被移动到该元素的所有子元素的后面，而如果目标<p>，是多个元素，那么$("a")将会以复制的形式，在每个P中都添加一个子元素，而自身保持不变。例：使用append()方法复制和移动元素。
<scripttype="text/javascript">
$(function(){
$("p").append($("a:eq(0)"));//添加目标为多个<p>
$("p:eq(1)").append($("a:eq(1)"));//添加目标是唯一的<p>
}) </script> <ahref="#">链接1</a> <ahref="#">链接2</a> <p>文字1</p> <p>文字2</p>