jQuery之超详尽的DOM操作

超详尽的DOM操作讲解，每一个函数都给出了具体实现。

1.创建节点

var $p_node = $("<p></p>")    //创建节点
var $p_node = $("<p>helloworld</>")  //创建带有文本的节点
var $div_node = $("<div id='div1'></div>")    //创建带有属性的节点
$("#p1").append($p_node)    //用append方法添加节点

2.插入内容

2.1内部插入

内部插入，顾名思义，就是指向目标元素的内部插入节点，插入的内容在元素内部，类似于一种父子关系；与之向对应的是外部插入，外部插入指的是在元素外部插入，插入后的内容在元素外部，更像是一种兄弟关系。

方法	说明
append()	向匹配元素内部追加内容
appendTo()	颠倒的append用法，将匹配的元素追加到指定元素中
prepend()	向匹配元素内部添加前置内容
prependTo()	颠倒的prepend用法

append方法和appendTo方法

$("#div1").append($p_node)  //以下结果是相同的
$($p_node).appendTo("#div1")

prepend和prepend方法

$("#div1").prepend($p_node)  //一线结果也是一样的
$($p_node).prependTo("#div1")  //不过与append不同，元素插入的是，目标元素内部的前部分

2.2外部插入

方法	说明
after()	在匹配的元素之后插入
before()	在匹配的元素之前插入
insertAfter()	将所有匹配的元素插入到另一个指定的元素集合的后面
insertBefore()	将所有匹配的元素插入到另一个指定的元素集合的前面

after方法和insertAfter方法

$("#div1").after("<p>helloworld</p>")    //以下效果是一样的
$("<p>helloworld</p>").insertAfter("#div1")

before()和insertBofore()方法：

$("#div1").before("<p>helloworld</p>")   //以下效果是一样的
$("<p>helloworld</p>").insertBefore("#div1")

3删除内容

方法	说明
remove()	从DOM移除所有匹配的元素
empty()	删除所有匹配的元素中所有子节点
detach()	从DOM删除所有匹配的元素

remove方法：

//remove
$("button").click(function(){  //点击button移除div2
    $("#div2").remove();
})

empty方法：

//empty
$("button").click(function(){  //清空div2的内部包含的内容
    $("#div2").empty()
})

​ remove和empty的不同：通过上边的两个例子，remove移除的是匹配到的元素的所以内容（包括该元素自身），而empty移除的仅是匹配元素的内部元素，而它本身被保留了下来

detach方法：

p.on{     //定义p的一个状态
    background-color: red;     
}
$("p").click(function(){     //对p绑定一个事件
    $(this).toggleClass("on")  //切换状态
})
var state
$("#detach_button").click(function(){
    if(state){
        state.appendTo("body")   //将state暂存的内容添加到body中
        state=null
    }else{
        state=$("p").detach();  //对p使用detach方法，返回值暂存state中
    }
})

​ 在上面的程序中，我们对p标签添加了一个点击事件，效果是切换p的背景，当我们对p使用detach方法时，将detach分离出的内容暂存在state中，当再次将state添加到body后，发现p的click事件仍然存在，这就是detach与remove的不同之处

4.克隆内容

clone([withDataAndEvents],[deepWithDataAndEnents])

参数说明：

• withDataAndEvents 是否保留事件处理函数和数据，默认为false
• deepWithDataAndEvents 是否设置是否对子元素也保留处理函数和数据，默认值与第一个参数匹配

$("#para1").click(function(){
    $(this).toggleClass("on")
})
$("#clone").click(function(){
    $("#para1").clone(false).insertAfter("#clone")
})

当withDataAndEvents值为false时，点击button会添加一个p标签，但是点击p并没有反映，而当值为true时，clone方法会复制处理函数，所以此时点击p标签时就会出现样式的变换

5.替换内容

replaceWith方法：

$("#replace").click(function(){
    $(this).replaceWith("<div>"+$(this).text()+"</div>")
})

​ replaceWIth方法是将选中的元素替换为目标元素，此操作是移动，不是复制。

replaceAll方法：

$("#replaceAll").click(function(){
    $("<div>"+$(this).text()+"</div>").replaceAll(this)
})

​ 两个方法实际上是一对相反的操作，上面两个程序结果相同

6.包裹内容

6.1外包

wrap方法：

$("p").wrap("<li></li>")为p标签外包裹li标签

6.2内包

wrapInner方法：

$("div").wrapInner("<li></li>")为div内包裹一个li标签

6.3总包

wrapAll

其效果在所有元素外包一层结构。

$("div").wrapAll("<li></li>")

6.4卸包

$("div").unwrap();

删除父级元素

7.属性操作

使用prop方法来设置属性：

$("input[checked='checked']").prop({
    disabled:true
})               //设置被选中的checkbox为不可用状态

当prop只有一个参数时，此时表示读取元素的属性，该方法返回的是元素的属性：

console.log($("input[checked='checked']").prop("disabled"))
//result : true

使用attr方法来设置属性：

$("#link").attr("href","https://www.baidu.com")
//使用attr方法改变a标签的href

同理，当函数参数只有一个时，返回的同样是元素的属性

console.log($("#link").attr("href"))
//result : https://www.baidu.com

​ attr方法和prop方法的不同：使用prop的原则，1.只添加属性名，而不添加属性值就会生效。2.只要属性为true/false

removeProp方法：

$("a").prop("size","10");  //给a设置一个自定义属性size
console.log($("a").prop("size"))  //10
$("a").removeProp("size")   //使用removeProp方法删除属性
console.log($("a").prop("size"))  //undefined

removeAttr方法：

$("input").removeAttr("disabled")  

8.类操作

addClass: 添加类

$("p").addClass("blue size")   //为p标签添加两个类
p.blue{
    background-color: blue;
}
p.size{
    font-size: 30px;
}

removeClass: 移除类

//removeClass
$("#removeClass").click(function(){   //点击removeClass按钮删除p标签的两个类
    $("p").removeClass("blue size")
})

toggleClass: 切换类

//toggleClass
$("#toggleClass").click(function(){    //点击toggleClass按钮 
    $("p").toggleClass("red smallSize",true)  //第二个参数为true,原先的类被移除
    $("p").toggleClass("blue size",false)  //第二个参数为false，添加新类
})

hasClass:判断是否存在该类

//hasClass
console.log($("p").hasClass("blue"))
//result: true

9.读写文本和值

1.使用html方法读写HTML

//html
var d=$("#div1").html()
$("#div2").html(d)

2.用text方法读写文本

//text
console.log($("p").text());  //读取p标签的文本

3.用val方法读写值

$("#getVal").click(function(){  //点击getVal按钮使用val方法获取文本框的值
    console.log($("input[type='text']").val())
})

10样式表操作

css方法操作样式表

$("p").css({   //为p标签设置CSS属性
    "font-size":"20px",
    "background-color":"gray"
})

使用height和width方法设置元素大小

$("#div1").height(100)
$("#div1").width("80%")

11.访问文档树

jQuery定义了children(),next(),prev(),parent()四种基本方法来遍历元素

方法	说明
children()	获取当前元素子元素
next()	获取当前元素下一个同级元素
prev()	获取当前元素上一个同级元素
parent()	获取当前元素的父元素