jquery操作DOM

一、DOM模型

• 文档对象模型：document object model

• 可以把整个html文档理解为dom树

• DOM编程就是为了动态的给dom树添加或删除节点，或修改节点的属性值

二、jquery操作dom的内容

• jquery对JavaScript种dom的操作进行了封装

• jquery操作dom的内容

  • 内容操作

  • 样式操作

  • 属性操作

  • 节点操作

三、内容操作

$(function () {
    //1.html代码操作
    //html()：可以对html代码进行操作，类似于js中的innerHTML
    //获取元素中的html代码
    console.log($("#div01").html());
    //动态的设置元素中的html代码，会覆盖掉div中原有的内容
    $("#div01").html("<h3>我是新的内容</h3>");
​
    //2.标签内容操作
    //text()：可以对元素的文本内容进行操作，类似于js中的innerText
    //获取元素的文本内容，获取不到标签
    console.log($("#div01").text());
    //动态的设置元素的文本内容，不能解析标签
    $("#div01").text("<p>通过text设置的新文本</p>")
})

• html()和text()的区别

  • html()是操作dom元素的html内容，能够解析标签

  • text()是操作dom元素的文本内容，不能识别标签

  • html()和text()，如果传参，代表为dom元素设置值

  • html()和text()，如果不传参，代表获取dom元素的值

四、属性操作

//文档准备函数

$(function () {
    //1.获取或设置表单元素的value属性值：val()
    $("[name=uname]").blur(function () {
        if ($(this).val() == "") {//不传参代表获取表单元素的value属性值
            $(this).val("刘备");//传参代表设置表单元素的value属性值
        } else {
            alert($(this).val());
        }
    })
​
    //2.获取或设置元素属性值：attr()
    //点击按钮显示图片：给图片添加src属性
    //格式：如果只添加一个属性，可以使用：$(selector).attr("属性名","属性值")
    //如果添加一个或多个属性，以对象的形式添加：$(selector).attr({name1:value1, name2,value2,...nameN:valueN})
    //获取属性值：$(selector).attr("属性名")
    let obj = {id: 1, name: "张三"};
    $("#showBtn").click(function () {
        /*$("img").attr("src","../imgs/a.jpg").css("width","200px")//给img设置src属性
        //获取图片的src属性
        console.log($("img").attr("src"));*/
        //给img设置src属性，title属性
        $("img").attr({"src":"../imgs/b.jpg","title":"提示文字"});
        //获取图片的src属性值和title属性值
        console.log($("img").attr("src"));
        console.log($("img").attr("title"))
    })
})

五、样式操作

//1.获取与设置元素的样式 css()
    //获取元素的样式：$(selector).css("样式属性名");
    //设置元素的样式：
        //如果只设置一个样式，可以使用：$(selector).css("属性名","属性值")
        //如果设置一个或多个样式，可以使用对象的形式
            //$(selector).css({name1:value1,name2:value2,...nameN:valueN})
    //给div设置宽高、背景色及字体大小
    $("#div01").css({"width":"200px", "height":"200px","background-color":"yellow","font-size":"36px"})
    //获取div的样式
    console.log("div的宽为：" + $("#div01").css("width"))
    console.log("div的高为：" + $("#div01").css("height"))
    console.log("div的背景色为：" + $("#div01").css("background-color"))
    console.log("div的字体大小为：" + $("#div01").css("font-size"))
​
    //2.追加和移除样式：addClass()和removeClass()
    /*$("ul li").mouseover(function () {
        $(this).addClass("ul01")
    }).mouseout(function () {
        $(this).removeClass("ul01")
    })*/
​
    //简写为toggleClass()
    $("ul li").mousemove(function () {
        $(this).toggleClass("ul01")
    })
​
})

六、节点操作

• 查看节点

• 创建节点

• 插入节点

• 删除节点

• 替换节点

• 复制节点

七、查看节点

//通过id属性值获取节点
let $mydiv = $("#div01")

八、创建节点和插入节点

$(function () {
    //1.创建节点
    //语法：$(html代码)，使用html创建节点
    let $myLi = $("<li>小乔</li>")
    //2.插入节点
    //在元素内部插入节点
    //语法
        //把B追加到A中(插入在A最后)：$(A).append(B)或B.appendTo(A)
    //案例：将$myLi插入到ul最后
    let $myUl = $("#myUl")
    //$myUl.append($myLi)
    $myLi.appendTo($myUl);
​
    //2.2 在元素内部前面插入节点
    //语法：
        //把B追加到A中(插入在A最前面)：$(A).prepend(B)或B.prependTo(A)
    //案例：将$myLi插入到ul前面
    //$myUl.prepend($myLi)
    $myLi.prependTo($myUl)
​
    //2.3在元素外部后面插入节点
    //语法：将B插入到A之后：A.after(B)或B.insertAfter(A)
    let $img = $("<img src='../imgs/b.jpg'>")
    //$myUl.after($img);
    $img.insertAfter($myUl)
​
    //2.4 在元素外部前面插入节点
    //语法：将B插入A之前：A.before(B)或B.insertBefore(A)
    //$myUl.before($img);
    $img.insertBefore($myUl)
})

九、删除节点

$("#removeBtn").click(function () {
    //点击按钮删除节点(没有removeAll方法)
    //$("li:eq(1)").remove();//删除整个节点，自杀
    $("li:eq(1)").empty();//清空节点，清理门户
})

十、替换节点

$("#replaceBtn").click(function () {
    //替换节点
    //创建新节点
    let $li = $("<li>周瑜</li>")
    //$("li:last").replaceWith($li)
    //可互换为
    $li.replaceAll($("li:last"))
})
$("#removeBtn").click(function () {
    //点击按钮删除节点(没有removeAll方法)
    //$("li:eq(1)").remove();//删除整个节点，自杀
    $("li:eq(1)").empty();//清空节点，清理门户
})

十一、复制节点

$("#cloneBtn").click(function () {
    //复制节点并将节点追加在url后面
    //clone()：参数为空或false，只会复制节点本身，节点的事件不会被复制；参数为true，节点的事件也会被复制
    $("li:last").clone(true).appendTo($("ul"));
})

十二、json

• json是一种轻量级的数据交换格式

• json由两种格式组成

  • json对象

  • json对象数组

    //用json对象存储一个学生的基本信息
    let student = {
        id: 1,
        name: "张三",
        age: 18,
        sex: "男"
    }
    ​
    //用json对象数组存储一个班的学生信息
    let students = [
        {
            id: 1,
            name: "张三",
            age: 18,
            sex: "男"
        },
        {
            id: 2,
            name: "李四",
            age: 19,
            sex: "男"
        },
        {
            id: 3,
            name: "王五",
            age: 17,
            sex: "女"
        }
    ]