js的Dom操作

1，outerwidth(bool)

object.outerwidth(true) =width+border+padding+magin;

object.outerwidth(false) =width+border+padding;

magin值是不算进宽度的

2，get()方法

//get()方法就是将jq元素转化成js元素，但是get()方法之后返回一个数组，所以需要对索引值进行注意

//jq js 对length属性兼容

3，outerwidth()：

<div class="div" style="display: none;width: 100px;height: 100px;background: red;">王瑞睿</div>

console.log($(".div").get(0).offsetWidth); //0 原生的offsetwidith()不能获取隐形的元素的边框

console.log($(".div").outerwidth()); //100

4,remove()，detech()函数

5，clone()函数：

6，append appendTo clone()函数

<div class="box">box</div>

<div class="box1">box1</div>

$(".box").clone().appendTo($(".box1"));===$(".box1").append($(".box").clone());

但是针对于clone函数：

clone后的元素不具备之前元素所具有的事件：但是可以通过为clone函数传一个true的参数，实现事件的clone；默认为false，不复制事件。

 $(".box").click(function(){

                alert("Sss");

      })

$(".box1").append($(".box").clone(false));

7，object.warp(element) 包装函数--使用element包装object

<span></span>

<span></span>

$("span").wrap("<div class='con'></div>");

div.con 包装分别所有的span；

 

object.warpAll(element):整体包装；

$("span").wrapAll("<div class='con'></div>");

所有的span被一个div.con 包装；

 

当span元素之间掺杂了其他元素的时候，自动调换位置

<span></span>

<p>sss</p>

<span></span>  //span的位置自动被调换到了div.con的后边，并且div.con包裹着所有的span元素。 

$("span").wrapAll("<div class='con'></div>");

 

object.wrapInner(element):内部包装：

element将内部包装object中的所有内容

<span>

        <p>111</p>

        <h2>2222</h2>

</span>

$("span").find("p").wrapInner("<div class='con'></div>");

 

object.unwrap()函数：解除包装；

8，array.add(element)添加元素到一个集合之中

<div>div</div>

<span>span</span>

var $div=$("div");

$div.css("background","red");

var $divspan=$div.add("span");

$divspan.css("background","red");

9,form数据的serialize() serializeArray();

数据的串联化，在提交表单的时候就可以直接用,serialize()函数把所有的表单数据串联化serializeArray()函数把所有的表单数据转化成一个json数据的数组

<form>

            <input name="id" type="text"  value=""/>

            <input name="password" type="password"  value=""/>

            <input name="tel" type="tel"  value=""/>

            <button type="button">serilalize</button>

</form>

$("button").click(function(){

                console.log($("form").serializeArray());

})