2015年12月23日

jQuery

• get()

  get()方法就是把JQ转成原生JS。

   $('#div1').get(0).innerHTML
   //document.getElementById('div1').innerHTML
  
   for(var i=0;i<$('li').length;i++){
       $('li').get(i).style.background = 'red';
   }

  get([index])取得第 index 个位置上的元素。

  get()取得所有匹配的 DOM 元素集合。

  取得其中一个匹配的元素。num表示取得第几个匹配的元素。从0开始，返回的是DOM对象，类似的有eq(index),不过eq(index)返回的是jQuery对象。

• outerWidth()

   $('div').width() //width
  
   // $('div').width(200);  //width=200
  
   $('div').innerWidth();  //width + padding
  
   $('div').outerWidth();  //width + padding + border
  
   $('div').outerWidth(true);  //width + padding + border + margin

offsetWidth():是获取不到隐藏元素的值。

• text()

  text()取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。

• remove() detach()

  remove()从DOM中删除所有匹配的元素。 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

  detach()与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

  ```js $(function(){

   $('div').click(function(){
       alert(123);
   });
  
   var oDiv = $('div').remove();
  
   $('body').append( oDiv );

});
```

• $:$(document).ready(function(){})

  完整版：

   $(document).ready(function(){});

  简略版：

   $(function(){});
   //DOMContentLoaded，DOM加载完就触发的事件。

等DOM加载完就可以执行了，性能要好。

window.onload=function(){}:整个页面文档加载完才触发。

• parents()

parents()方法返回被选元素的所有祖先元素,参数就是筛选功能。

parent()方法返回被选元素的直接父元素。

closest()方法返回被选元素的第一个祖先元素(包括当前元素自身),必须要写筛选的参数,只能找到一个元素。

• siblings()

siblings():找所有的兄弟节点，参数也是筛选功能。

nextAll() :下面所有的兄弟节点，参数也是筛选功能。

prevAll() : 上面所有的兄弟节点。

• parentsUntil() nextUntil() prevUntil()

parentsUntil([expr|element][,filter])查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

nextUntil([exp|ele][,fil])查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。

prevUntil([exp|ele][,fil])查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。

$('span').nextUntil('h2').css('background','red');
//查找当前元素之后所有的同辈元素，直到h2标签为止。

[ expr][,filter]	String,String

expr: 用于筛选祖先元素的表达式 filter: 一个字符串，其中包含一个选择表达式匹配元素。

[element][,filter]	DOMElement,String

element:用于筛选祖先元素的DOM元素 filter: 一个字符串，其中包含一个选择表达式匹配元素。

• clone()

clone() 克隆匹配的DOM元素并且选中这些克隆的副本,在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

可以加一个参数（true 或者 false，默认值是：false），指示事件处理函数是否会被复制。

• wrap()

wrap() : 包装,把所有匹配的元素用其他元素的结构化标记包裹起来。

wrapAll(): 整体包装，将所有匹配的元素用单个元素包裹起来

wrapInner() : 内部包装,将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

unwrap() : 删除包装 ( 删除父级 : 不包括body ),这个方法将移出元素的父元素

• add()

add() 方法把元素添加到已存在的元素组合中。

var elem = $('div');

var elem2 = elem.add('span');

elem.css('color','red');

elem2.css('background','yellow');
//elem2包括div、span元素。

• slice()

slice() 选取一个匹配的子集;

$('li').slice(1,4).css('background','red');

• serialize() serializeArray()

serialize()序列化表格内容为字符串。

serializeArray()序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

    console.log($('form').serialize());  
    //string : a=1&b=2&c=3


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

    //[{ name : 'a' , value : '1' },{ name : 'b' , value : '2' },{ name : 'c' , value : '3' ]

注意，此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。