笔记6,使用jQuery操作DOM

时间:2022-09-15 23:33:23
DOM操作分为三类:
   DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById()
   HTML-DOM:用于处理HTML文档,如document.forms
    CSS-DOM:用于操作CSS,如element.style.color="green"

JavaScript用于对(x)html文档进行操作,它对这三类DOM操作都提供了支持

1, jQuery中的DOM操作可分为:
    样式操作
    内容及Value属性值操作
    节点操作
    节点属性操作
   节点遍历 CSS-DOM操作

Query对JavaScript中的DOM操作进行了封装,使用起来也更简便

     直接设置样式值
        使用css()为指定的元素设置样式值
        css(name,value) 或 css({name:value, name:value,name:value…})
     追加和移除样式
      追加样式:  addClass(class)或addClass(class1 class2 … classN)
      移除样式:  removeClass(“style2 ”)或removeClass("style1 style2 ")
     切换样式
        toggleClass()模拟了addClass()与removeClass()实现样式切换的过程
        toggleClass(class)  如果存在(不存在)就删除(添加)一个类。

    html代码操作
        html()可以对HTML代码进行操作,类似于JS中的innerHTML
    文本操作
        text()可以获取或设置元素的文本内容
     html()和text()区别
     笔记6,使用jQuery操作DOM


     Value值操作
        val()可以获取或设置元素的value属性值  例如:$(this).val();

2,节点操作

    jQuery中节点操作主要分为:
        查找节点
        创建节点
        插入节点
       删除节点
        替换节点
        复制节点

     插入节点
        插入内部节点
        
        笔记6,使用jQuery操作DOM
        

         替换节点
        replaceWith()和replaceAll()用于替换某个节点
        $("ul li:eq(1)").replaceWith($newNode1); 或
        $newNode1.replaceAll("ul li:eq(1)");

         复制节点
        clone()用于复制某个节点
        $("ul li:eq(1)").clone(true).appendTo("ul");
        可以使用clone()实现输出DOM元素本身的HTML
        $("<div></div>").append($(DOM元素).clone()).html();

         删除节点
        jQuery提供了三种删除节点的方法
            remove():删除整个节点
            detach():删除整个节点,保留元素的绑定事件、附加的数据
            empty():清空节点内容
         获取与设置节点属性
        attr()用来获取与设置元素属性
        removeAttr()用来删除元素的属性
        $newNode4.attr("alt"); 或 $("img").attr({width:"50",height:"100"});
        $newNode2.removeAttr("title");

3,遍历子元素
    
        children()方法可以用来获取元素的所有子元素
        $("body").children();

     遍历同辈元素
        jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
         笔记6,使用jQuery操作DOM

    遍历前辈元素
            jQuery中可以遍历前辈元素,方法如下:
                parent():获取元素的父级元素
                parents():元素元素的祖先元素
                jQuery中提供了each()、find()、filter()等节点操作方法

    CSS-DOM操作
        除css()外,还有获取和设置元素高度、宽度、相对位置等的样式操作方法
         笔记6,使用jQuery操作DOM

笔记6,使用jQuery操作DOM