您的位置：首页 > Web前端 > JQuery

jQuery系列(三）：操作DOM

2013-03-13 21:54 471 查看

1、向DOM添加HTML

.html()方法内部使用原生的innerHTML属性，它既能直接调用.html()方法获取某个元素内的HTML文本，又可以传递HTML代码参数给.html()方法以设定其内部的HTML。

<script type="text/javascript">

$(document).ready(function(){
$('.content').html('<div class="main">Hei,jQuery!</div>');

});

</script>
<body>
<div class="content">
<p>I run 4 times a week.</p>
<p>I lift weights 3 times a week.</p>
</div>
</body>

显示为：Hei,jQuery!

2、设置DOM元素文本

.text()方法和.html()方法非常相似，只不过它仅抓取匹配元素内的字符串形式的文本。没有参数时获取元素文本，提供参数时设定元素文本。参数只能是字符串，不能是HTML代码。

<script type="text/javascript">

$(document).ready(function(){
//$('.content').html('<div class="main">Hei,jQuery!</div>');
alert($('.content').text());
//输出：
//I run 4 times a week.
//I lift weights 3 times a week.

$('.content').text("Hi,change Text!");
//显示：
//Hi,change Text!
});

</script>
<body>
<div class="content">
<p>I run 4 times a week.</p>
<p>I lift weights 3 times a week.</p>
</div>
</body>

3、在一个元素内追加或在其最前面插入HTML

如果打算在某个元素内添加一些HTML，可以使用.append()方法将它追加到目标元素内容之后，也可以使用.prepend()方法将它插入到目标元素内容之前。.prepend()方法总是将参数插入到目标元素内第一个子元素之前，而.append()则总是将参数追加到目标元素内最后一个子元素之后。

$(document).ready(function(){
$('.content').append("<p>I am a student!</p>");
//显示：
//I run 4 times a week.
//I lift weights 3 times a week.
//I am a student!
});

4、在DOM某个元素之前或之后添加HTML

.before()和.after()方法与.append()和.prepend()方法非常相似，他们的区别主要是在HTML插入位置。.before()和.after()并不是把HTML插入到目标元素内部，而是将HTML插入到目标元素之前或之后。

$(document).ready(function(){
$('.content').after("<p>I am a student!</p>");
//显示：
//I run 4 times a week.
//I lift weights 3 times a week.
//I am a student!
});

firebug下的显示：

5、从DOM中删除HTML元素

.remove()方法用来从DOM中删除元素。不过很多人倾向通过css隐藏这些元素。

$(document).ready(function(){
$('.content').remove();
//显示为空
});

6、克隆HTML元素

.clone()方法复制克隆选中的任何元素。当一个元素克隆之后，就可以使用.append()之类的方法将克隆的元素放置到任何地方。

$(document).ready(function(){
$('.content').append($('.content').clone());
//firebug下显示:
//               <div class="content">
//                   <p>I run 4 times a week.</p>
//                   <p>I lift weights 3 times a week.</p>
//                       <div class="content">
//                           <p>I run 4 times a week.</p>
//                           <p>I lift weights 3 times a week.</p>
//                       </div>
//               </div>
//               </body>
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航