JQuery学习笔记（2）操作 DOM

最新推荐文章于 2024-04-19 15:27:04 发布

原创最新推荐文章于 2024-04-19 15:27:04 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文全面介绍了使用JavaScript和jQuery进行DOM操作的方法，包括节点创建、插入、删除、复制、替换及属性、类、文本等的修改，同时展示了如何遍历文档结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创建节点

js创建节点：document.createElement("tagName");

           window.onload=function(){
               var div =document.createElement("div");
               document.body.append(div);
           }

1.JQuery创建节点：$(html)

JQuery简化了DOM操作，直接使用jQuery构造函数$()创建元素对象。

           $(function(){
           var $div=$("<div></div>");
           $("body").append($div);
           })

2.创建文本

JS: var div=document.createElement("div");

var text= docuemnt.createTextNode("dom");

div.appendChild(text);

JQuery: $(function(){
           var $div=$("<div>DOM</div>");
           $("body").append($div);
           })

3.创建属性：

JS: div.setAttribute("title","盒子"); JQuery: var $div= $("<div title='盒子'>DOM</div>")

二、插入节点：

1 JQuery定义了4个方法用来在元素中插入内容

append（）向每个匹配的元素内部追加内容

appendTo（）把所有匹配的元素追加到另一个指定的元素集合中，实际上，该方法颠倒了append（）的用法

$(A).append（B）== $(B).appendTo(A);

prepend() 向每个匹配的元素内部前置内容

prependTo（）同上颠倒了 prepend（）方法

2，外部插入

after（content） after（function（index）{}）content 表示一个元素，HTML字符串，或者JQuery对象

函数表示一个返回HTML字符串的函数。这个字符串会被插入到每个匹配元素的后面

insertAfter（target）

before（content ） before（function（index）{}）

insertBefore（target）

三、删除节点

remove（）删除匹配的所有节点

empty（）删除匹配节点中的所有子节点

detach（）分离并返回该节点的DOM对象，注意返回的不是JQuery对象

demo:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           p{
               background: yellow;
               margin: 6px;
               cursor: pointer;
           }
           p.off{
               background: red;
           }
       </style>
       <script type="text/javascript" src="../jquery-3.3.1.js" ></script>
       <script type="text/javascript">
           $(function(){
               $("p").click(function(){
                   $(this).toggleClass("off");
               });
           })

           var p;
           $(function(){
               $("button").click(function(){
                   if(p){
                       p.appendTo("body");
                       p=null;
                   }else{
                       p=$("p").detach();
                   }
               });
           })
       </script>
   </head>
   <body>
       <p>春眠不觉晓</p>
       <div>处处蚊子咬</div>
       <p>一咬一个包</p>
       <button>再咬不得了</button>
   </body>
</html>