（28）HTML5-jQuery的Dom操作

最新推荐文章于 2024-07-05 14:21:58 发布

梧桐下的四叶草

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量320

点赞数

分类专栏： HTML5 文章标签： jquery css html html5 javascript

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/52440285

版权

HTML5 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

所谓的DOM操作是指对标签的内容进行添加，修改或删除。例如有个HTML标签如下，则“你好”就是<div>标签的内容部分。

<div>你好</div>

了解了DOM操作的控制对象后，接着就来看看jQuery中有哪些可以帮助开发人员控制这个区块。

{函数html}

此函数类似javascript中的innerHTML功能，可以直接获取或设置标签的内容。

//获取<div>标签的HTML内容

$(div).html();

//设置<div>标签的HTML内容

$(div).html("hello");

//得到结果

<div>hello</div>

{函数append，prepend}

这两种函数具备插入的功能，可以保留原有的标签内容的情况下，在原内容的后面（append）或前面（prepend）插入新的内容。

<html>
 <head>
     <meta charset="utf-8"/>
     <style>
     </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
     
 </head>
 <body>
    <!--原始<p>标签内容-->
    <p>hello</p>
    加入函数append
    <script>
        $("p").append("<b> I am Tom</b>");
     </script>
    
 </body>
</html>

接下来再示范使用prepend函数插入新的标签内容的做法，请比较加亮的部分来观察与append函数的差异。

<html>
 <head>
     <meta charset="utf-8"/>
     <style>
     </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
     
 </head>
 <body>
    <!--原始<p>标签内容-->
    <p>hello</p>
    加入函数preppend
    <script>
        $("p").prepend("<b> I am Tom</b>");
     </script>
     <!--得到结果是<p><b>I am Tom</b>hello</p>-->
 </body>
</html>

{函数before，after}

此组函数同样也是插入功能，但是其插入的位置是在所选标签的“外面”，因此可称为“外部插入”。

<html>
 <head>
     <meta charset="utf-8"/>
     <style>
     </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
     
 </head>
 <body>
    <!--原始<p>标签内容-->
    <p>hello</p>
    加入函数before
    <script>
        $("p").before("<b> I am Tom</b>");
     </script>
     <!--得到结果是<b>I am Tom</b><p>hello</p>-->
 </body>
</html>

从函数before的效果便可看出“外部插入”的意义，我们所添加的内容出现在<p>标签的外面。再来看看after的效果：

<html>
 <head>
     <meta charset="utf-8"/>
     <style>
     </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
     
 </head>
 <body>
    <!--原始<p>标签内容-->
    <p>hello</p>
    加入函数after
    <script>
        $("p").after("<b> I am Tom</b>");
     </script>
     <!--得到结果是<p>hello</p><b>I am Tom</b>-->
 </body>
</html>

函数wrap

此函数可声明一个新标签，并将原有的标签内容包括在新标签里面。

<html>
 <head>
     <meta charset="utf-8"/>
     <style>
     </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
     
 </head>
 <body>
    <!--原始<p>标签内容-->
    <p>hello</p>
    加入函数wrap
    <script>
        $("p").wrap("<div></div>");
     </script>
     <!--得到结果是<div><p>hello</p></div>-->
 </body>
</html>

函数empty，remove

此组函数可以删除标签的内容，但是删除的方法稍有些差异，函数empty可删除指定标签的内容；函数remove则是将整个标签删除。

<html>
 <head>
     <meta charset="utf-8"/>
     <style>
     </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
     
 </head>
 <body>
    <!--原始<p>标签内容-->
    <p>hello</p><b>I am Tom</b>
    加入函数empty
    <script>
        $("p").empty();
     </script>
  
 </body>
</html>

函数empty把<p>标签的内容“hello”删除了，再来remove的效果，将会发现整个<p>都不见了。

<html>
 <head>
     <meta charset="utf-8"/>
     <style>
     </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
     
 </head>
 <body>
    <!--原始<p>标签内容-->
    <p>hello</p><b>I am Tom</b>
    加入函数remove
    <script>
        $("p").remove();
     </script>
 </body>
</html>

梧桐下的四叶草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（28）HTML5-jQuery的Dom操作

所谓的DOM操作是指对标签的内容进行添加，修改或删除。例如有个HTML标签如下，则“你好”就是标签的内容部分。你好了解了DOM操作的控制对象后，接着就来看看jQuery中有哪些可以帮助开发人员控制这个区块。{函数html}此函数类似javascript中的innerHTML功能，可以直接获取或设置标签的内容。//获取>标签的HTML内容$(div).html();/
复制链接

扫一扫

专栏目录