JQuery学习笔记(2)操作 DOM

本文全面介绍了使用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>

四、复制对象 

 JS: div.cloneNode(true); JQuery: div.clone(true)

五、替换节点

JS:nodeObject.replaceChild(new_node,old_node);

JQuery:replaceWith(newContent/function); 

六、包裹元素

  1.外包:$("a").wrap("<li></li>");所有a标签用li包裹

  2.内包:$("body").wrapInner("<ul></ul>")

  3.总包:wrapAll() 4.卸包 unwrap()删除父级元素,位置不变

七、操作属性

  1.prop({}) 为匹配的元素设置多个属性

  2.attr()也能为匹配的元素设置一个或者多个属性

(1)访问属性

3.prop(propertyName)只能获得JQuery对象中的第一个匹配元素的属性值

4.attr() 同prop()如果想获取对个属性值,可以通过map或者each()循环

(2)删除属性 

5.DOM:removeAttribute(name) 删除属性              JQuery :removeProp(propertyName);

八:操作类

 1、添加类样式 addClass("");

 2、删除类样式 removeClass();

 3、切换类样式 toggleClass(classname)  toggleClass(classname,switch); toggleClass(function(){},switch)

 4、操作HTML $("p").html();

 5、读写文本 

text(textString)不设置索引的话会覆盖原来的所有文本内容

text(function(){index,text})

 6 、读写值

val()不包含参数时,表示将读取指定表单元素的值,

val(value)表示向指定表单写入值 
val(function({index,value}))

 7、读写CSS样式

CSS(propertyName)CSS(propertyName,value)CSS(propertyName,function(){index,value}) CSS(map)

demo:CSS(''color,'red')

CSS({'color':'red','background-color':'black'})

九 、遍历文档 

children()获取当前元素包含的所有子元素。

next()获取下一个同级元素

prev()获取上一个同级元素

parent()获取当前的父级元素

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值