[javascript]Dom操作笔记

1.为一个节点同时设置多个属性

$("div[aria-describedby='F53_batch_history']").attr({"display":"none","position":"absolute")
//[div.ui-draggable.ui-resizable.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.wijmo-wijdialog]

2.同时取得一个节点的多个css值

$("div[aria-describedby='F53_batch_history']").css(["display","position"])//Object {display: "block", position: "absolute"}
//Object=>Json
JSON.stringify($("div[aria-describedby='F53_batch_history']").css(["display","position"]))//"{"display":"block","position":"absolute"}"

3.为一个节点同时设置多个css

$("div[aria-describedby='F53_batch_history']").css({"display":"none","position":"absolute"})
//[div.ui-draggable.ui-resizable.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.wijmo-wijdialog]

4.css()等方法可以传入回调函数赋值

$("div[aria-describedby='F53_batch_history']").css("display",function(nodeIndex, oldValue){if (nodeIndex==0){return "none"};})

5.切换toggle(),toggleClass()

toggle() :切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

toggleClass():切换class是否添加

如果class已经存在，则删除class，如果class不存在，则添加

6.unwrap(),wrapInner(),wrap(),wrapAll()

6.1unwrap():删除被选元素的父元素。

 <article>
   <div>
    <p>test</p>
   </div>
  </article>

执行$(p).unwrap()后：

<article>
   <p>test</p>
</article>

6.2wrapInner():在元素内容插入包裹元素；

<div>
   <p>test</p>
</div>

执行$(p).wrapInner(<b></b>)后：

<div>
   <p> <b>test</b> </p>
</div>

6.3wrap()：在每个元素外插入包裹元素；

<p>test</p>
<p>test2</p>

执行$(p).wrap(<div></div>)后：

  <div>
   <p>test</p>
  </div>
  <div>
   <p>test2</p>
  </div>

6.4wrapAll()：在所有元素外插入包裹元素；

<p>test</p>
<p>test2</p> 

执行$(p).wrap(<div></div>)后：

<div>
   <p>test</p>
   <p>test2</p>
</div>

7.clone(includeEvents)

clone() ：复制元素

includeEvents：规定是否复制元素的所有事件处理，默认为false