jquery和原生dom對象的轉換&經常使用函數方法

1、jquery和原生dom對象的轉換

一、新建jquery對象和長度

var $p= $('p')新建一個jquery對象，通常在新建jquery對象的時候，加上一個$，以便好認。

返回的是一個相似數組對象，jquery能夠經過$p[0]下標來獲取對應的對象，也能夠獲取$p
的長度

頁面上沒有id=abc的元素，選中原生js對象時，返回的是null，咱們能夠知道選中這個元素不存在。但選中這個jquery對象，返回的仍是類數組，咱們分辨不了，咱們只能經過length來分辨jquery對象是否不存在

二、jquery轉換爲dom對象

jquery能夠經過$p[0]下標來轉換爲對應的dom對象

若是咱們只是想要獲取對應的子jquery對象，不想轉換成dom對象，就直接用$('#p1').eq(2)
獲得的仍是jquery對象

get方法獲取指定index的DOM對象，也就是咱們說的jQuery對象轉DOM對象。get()不寫參數把全部對象轉爲DOM對象返回

三、dom對象轉換成jquery對象

dom對象轉換成jquery對象，只須要加上一個#號

2、jquery對象的方法

一、.each( function(index, Element) )

//each的參數順序和js的參數順序相反
遍歷一個jQuery對象，爲每一個匹配元素執行一個函數

$('li').each(function(ind,e){
console.log(('ind+':'+$(e).text()') } //text方法是取出jquery對象的值，

jQuery對象裏面回調函數，通常來講對應的元素都是原生dom,要執行jQuery的text方法須要加$轉換成jquery對象

二、jQuery.each( collection, callback(indexInArray, valueOfElement) )

在jquery中有一種用法\$.each()，其中$==jQuery對象。

each通用的迭代函數，它能夠用來無縫迭代對象和數組。數組和相似數組的對象經過一個長度屬性（如一個函數的參數對象）來迭代數字索引，從0到length - 1。其餘對象經過其屬性名進行迭代
注意，函數對應的是element的值，而不是element自己

var obj = {
  "flammable": "inflammable",
  "duh": "no duh"
};
$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

三、.map( callback(index, domElement) )

經過一個函數匹配當前集合中的每一個元素,產生一個包含新的jQuery對象

$('div').map(function(i, ele){
    return this.id;
});

$('.child').map(function(index,e){
return  $(e).text()})

四、jQuery.extend([deep,] target [, object1 ] [, objectN ] )

1）將兩個或更多對象的內容合併到第一個對象。目標對象（第一個參數）將被修改，而且將經過$.extend()返回。然而，若是咱們想保留原對象，咱們能夠經過傳遞一個空對象做爲目標對象：

var object = $.extend({}, object1, object2);
在默認狀況下，經過$.extend()合併操做不是遞歸的;

2）deep類型: Boolean
若是是 true，合併成爲遞歸（又叫作深拷貝）。不支持給這個參數傳遞 false，若是第一個對象的屬性不寫，就不會實現深拷貝

3)不深拷貝的例子

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

結果：{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

4）深拷貝的例子

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
 
$.extend( true, object1, object2 );

結果：{"apple":0,"banana"{"weight":52,"price":200},"cherry":97,"durian":100}

五、.clone( [withDataAndEvents ] )

.clone()方法深度複製全部匹配的元素集合，包括全部匹配元素、匹配元素的下級元素、文字節點

一般咱們將頁面上一個元素插入到DOM裏另外一個地方，它會被從老地方移走，相似剪切的效果

$('.hello').appendTo('.goodbye');

<div class="container">
<div class="goodbye">

Goodbye
<div class="hello">Hello</div>

</div>
</div>
可是咱們若是須要的是複製而不是剪切，咱們能夠像下面這樣寫代碼：

$('.hello').clone().appendTo('.goodbye');

六、.index() / .index(selector)/ .index(element)

.get() 接受一個索引值參數並返回對應的DOM節點， .index() 與其正好相反，接受一個DOM節點而後返回其索引值

建議直接看jquery文檔

七、.ready( handler )

當DOM準備就緒時，指定一個函數來執行。

雖然JavaScript提供了load事件，當頁面呈現時用來執行這個事件，直到全部的東西，如圖像已被徹底接收前，此事件不會被觸發。

在大多數狀況下，只要DOM結構已徹底加載時，腳本就能夠運行。傳遞處理函數給.ready()方法，能保證DOM準備好後就執行這個函數，所以，這裏是進行全部其它事件綁定及運行其它 jQuery 代碼的最佳地方。

若是執行的代碼須要在元素被加載以後才能使用時，（例如，取得圖片的大小須要在圖片被加載完後才能知道），就須要將這樣的代碼放到 load 事件中。

下面兩種語法所有是等價的：

$(document).ready(handler)
$(handler)
咱們常常這麼使用

$(function(){

console.log('ready');

});
這三種寫法都表示一個意思