36.DOM操作

内部插入

$(function() {
    $("#append").click(function()     {//返回值,jQuery
        //append(content)     父.append(子)作为小弟
        
        //string
        //$("#div1").append("哈哈哈哈");
        
        //element
        /*var span =     document.getElementById("span");
        $("#div1").append(span);*/
        
        //jQuery
        $("#div1").append($("span"));
    });
    $("#appendTo").click(function()     {//返回值:jQuery
        //appendTo 子.appendTo(父)
        $("#span").appendTo($("#div1"));
    });
    $("#prepend").click(function() {
        //prepend(content)     父.append(子)作为大哥
        $("#div1").prepend($("#span"));
    });
    $("#prependTo").click(function() {
        //prependTo(content)     子.appendTo(父)
        $("#span").prepend($("#div1"));
    });
});

外部插入

$(function() {
    $("#after").click(function() {
        //在匹配的元素之后插入内容
        $("#div1").after($("#span"));
    });
    $("#before").click(function() {
        //在匹配的元素之前插入内容
        $("#div2").before($("#span"));
    });
    $("#insertAfter").click(function() {
        //把内容插入到匹配的元素之后
        $("#div2").insertAfter($("#span"));
    });
    $("#insertBefore").click(function() {
        //把内容插入到匹配的元素之前
        $("#div2").insertBefore($("#span"));
    });
});

删除节点

$(function() {
    $("#empty").click(function() {
        //删除所有子节点
        $("ul").empty();
    });
    $("#remove").click(function() {//会删除符合匹配的所有节点
        //删除选中的节点
        $("#btn").remove();
    });
});

克隆/替换节点

$(function() {
    $("#btn").click(function() {
        alert("克隆按钮");
        /*var clone = $(this).clone();
        clone.insertAfter($("#btn"));*/
    });
    
    $("#clone").click(function() {
        //克隆节点
        //将id=btn button元素克隆后插入到div1后面
        //没有参数表示仅仅是克隆元素,不克隆元素中的事件
        //$("#btn").clone().insertAfter($("#div1"));
        
        //有参数表示克隆元素和元素中的事件
        $("#btn").clone(true).insertAfter($("#div1"));
    });
    $("#replaceWith").click(function() {
        //$(源).replaceWith(目标)
        $(":button").replaceWith("替换成功");
    });
    $("#replaceAll").click(function() {
        //$(目标).replaceAll(源)
        $("替换成功").replaceAll($(":button"));
    });
});

属性操作

$(function() {
    $("#getAttr").click(function() {
        //获取div标签title属性
        console.log($("#div1").attr("title"));
        
        //jQuery中查询只查询第一个对象的值
        console.log($("div").attr("title"));
    });
    $("#setAttr").click(function() {
        //jQuery中设置值则是操作所有匹配的元素
        //console.log($(":button").text("小了个林"));
        
        //给所有div统一设置title属性
        //$("div").attr("title","newTitle1");
        
        //给所有div有区别的设置属性
        //参数1:$("div"),数组的索引
        //参数2:每一个div title属性值
        $("div").attr("title",function(index,item){
            //返回的是title属性值,更改之后的
            return index+"--"+item;
        });
    });
});

CSS操作

$(function() {
    $("#addClass").click(function() {
        //给元素添加样式
        $(":button").addClass("myBtn");
        $(":button").addClass("other");
    });
    $("#removeClass").click(function() {
        //删除元素样式
        $(":button").removeClass("myBtn");
    });
    $("#toggleClass").click(function() {
        //切换元素样式
        $(":button").toggleClass("myBtn");
    });
    $("#hasClass").click(function() {
        //判断是否有某样式
        console.log($(":button").hasClass("myBtn"));
    });
});