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










