码迷,mamicode.com
首页 > Web开发 > 详细

jquery里面的DOM操作(查找,创建,添加,删除节点)

时间:2018-08-19 20:08:15      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:移除   append   并且   ogg   参数   addclass   ===   app   bsp   

一:创建元素节点(添加)
    创建元素节点并且把节点作为元素的子节点添加到DOM树上

    1.append(): 在元素下添加元素
      用法:$("id").append("定义的节点"); 例如:var li1 = $("<li>橘子</li>");
      添加属性节点:$("<li class=‘test‘>草莓</li>")

    2.appendTo(): 将元素添加到元素里面
      用法: $(li3).appendTo("#box1");
    
    3.prepend(): 添加节点到元素的最上面

    4.prependTo():将节点添加给指定元素的最上面
      用法:$(li3).prependTo("#box1");
   
    5.before():将节点添加到指定元素的前面(外层)
      用法: $("#div1").before(div1);

    6.insertBefore():将新建元素添加到目标节点前面左右目标元素的兄弟元素

    7.after():将节点添加到指定元素的后面(外层)
      用法: $("#div1").after(div1);

    8.insertAfer(): 将新建的元素添加到目标节点后面作为兄弟元素
      用法:$(element).insertAfter("目标节点")

二:删除节点
   
    remove(): 删除所有匹配到的元素,这个方法能够删除元素的所有子节点
      用法:$(element).remove();

    empty(): empty原则上来讲它并不是删除元素,它只是清空节点,它能清空指定元素的所有子节点
     用法: $(element).empty();

三:修改节点(替换节点,包裹节点,复制节点)
    
    包裹节点:wrap()    warpAll()
      用法:$(element).wrap("html")
      注意:wrap()方法是将所有元素进行单独的包裹,而warpAll()是用一个元素来包裹所有匹配的元素

    复制节点:clone(true) 完全复制某一个元素  :true复制元素的同时也复制它的行为,如果不需要复制行为的时候就不加参数
      用法:$(element).clone(true);
    
四:属性操作(获取属性,设置属性,删除属性)

    获取属性:1.var $para=$("p");//获取<p>节点
                2.varp_txt=$para.attr("title");//获取<p>元素节点属性

    设置属性:1.$("p").attr("title","标题");//设置单个的属性值
              2.$("p").attr({"title":"标题","class":"highlignt"});//为同一元素一次设置多个属性

    删除属性:removeAttr()
      用法:$("p").removeAttr("title");//删除<p>元素的属性‘title’

五:样式操作(获取样式,设置样式,追加样式,移除样式,切换样式,判断是否存在样式)

    获取样式和设置样式:attr()
    用法:1.var p_class=$("p").attr("class");//获取<p>元素的class
            2.$("p").attr("class","high");//设置<p>元素的class为“high”

    追加样式:addClass()
    用法:$("p").addClass("anthor");//给<p>元素的追加“anthor”类

    移除样式:removeClass()
    用法:$("p").removeClass("anthor");//移除<p>元素中值为“anthor”的class

    移除样式:toggleClass()(切换即添加和删除)
    用法:$("p").toggleClass("high");//重复切换<p>元素中名为“high”的class

    判断是否存在样式:hasClass()
    用法:$("p").hasClass("high");//判断<p>元素中是否存在值为“anthor”的class
        $("p").hasClass("high") ===》$("p").is(".high");   //is("."+class)

jquery里面的DOM操作(查找,创建,添加,删除节点)

标签:移除   append   并且   ogg   参数   addclass   ===   app   bsp   

原文地址:https://www.cnblogs.com/Mr-Cpp/p/9502206.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!