jQuery核心

1jQuery中each方法的應用

jQuery中有個很重要的核心方法each，大部分jQuery方法在內部都會調用each，其主要的緣由的就是jQuery的實例是一個元素合集

以下：找到全部的div，而且都設置樣式，css只是一個方法，因此內部會調用each處理這個div的合集，給每一個div都設置style屬性

$('div').css(...)

jQuery的大部分方法都是針元素合集的操做，因此jQuery會提供$(selector).each()來遍歷jQuery對象

.each只是處理jQuery對象的方法，jQuery還提供了一個通用的jQuery.each方法，用來處理對象和數組的遍歷

語法

jQuery.each(array, callback )
jQuery.each( object, callback )

第一個參數傳遞的就是一個對象或者數組，第二個是回調函數

$.each(["Aaron", "慕課網"], function(index, value) {
   //index是索引,也就是數組的索引
   //value就是數組中的值了
});

each就是for循環方法的一個包裝，內部就是經過for遍歷數組與對象，經過回調函數返回內部迭代的一些參數，第一個參數是當前迭代成員在對象或數組中的索引值(從0開始計數)，第二個參數是當前迭代成員(與this的引用相同

jQuery.each()函數還會根據每次調用函數callback的返回值來決定後續動做。若是返回值爲false，則中止循環(至關於普通循環中的break)；若是返回其餘任何值，均表示繼續執行下一個循環。

$.each(["Aaron", "慕課網"], function(index, value) {
    return false; //中止迭代
});

 

jQuery方法能夠很方便的遍歷一個數據，不須要考慮這個數據是對象仍是數組

2jQuery中查找數組中的索引inArray

在PHP有in_array()判斷某個元素是否存在數組中，JavaScript卻沒有，可是jQuery封裝了inArray()函數判斷元素是否存在數組中。注意了：在ECMAScript5已經有數據的indexOf方法支持了，可是jQuery保持了版本向下兼容，因此封裝了一個inArray方法

jQuery.inArray()函數用於在數組中搜索指定的值，並返回其索引值。若是數組中不存在該值，則返回 -1。

語法：

jQuery.inArray( value, array ,[ fromIndex ] )

用法很是簡單，傳遞一個檢測的目標值，而後傳遞原始的數組，能夠經過fromIndex規定查找的起始值，默認數組是0開始

例如：在數組中查找值是5的索引

$.inArray(5,[1,2,3,4,5,6,7]) //返回對應的索引：4

注意：

若是要判斷數組中是否存在指定值，你須要經過該函數的返回值不等於(或大於)-1來進行判斷

3jQuery中去空格神器trim方法

頁面中，經過input能夠獲取用戶的輸入值，例如常見的登陸信息的提交處理。用戶的輸入不必定是標準的，輸入一段密碼：'  1123456  "，注意了： 密碼的先後會留空，這多是用戶的無意的行爲，可是密碼確實又沒錯，針對這樣的行爲，開發者應該要判斷輸入值的先後是否有空白符、換行符、製表符這樣明顯的無心義的輸入值。

jQuery.trim()函數用於去除字符串兩端的空白字符

這個函數很簡單，沒有多餘的參數用法

須要注意：

• 移除字符串開始和結尾處的全部換行符，空格(包括連續的空格)和製表符（tab）
• 若是這些空白字符在字符串中間時，它們將被保留，不會被移除

4jQuery中DOM元素的獲取get方法

jQuery是一個合集對象，若是須要單獨操做合集中的的某一個元素，能夠經過.get()方法獲取到

如下有3個a元素結構：

<a>1</a>
<a>2</a>
<a>3</a>

經過jQuery獲取全部的a元素合集$("a")，若是想進一步在合集中找到第二2個dom元素單獨處理，能夠經過get方法

語法：

.get( [index ] )

注意2點

1. get方法是獲取的dom對象，也就是經過document.getElementById獲取的對象
2. get方法是從0開始索引

因此第二個a元素的查找： $(a).get(1)

負索引值參數

get方法還能夠從後往前索引，傳遞一個負索引值，注意的負值的索引發始值是-1

一樣是找到第二元素，能夠傳遞 $(a).get(-2)

5jQuery中DOM元素的獲取index方法

get方法是經過已知的索引在合集中找到對應的元素。若是反過來，已知元素如何在合集中找到對應的索引呢？

.index()方法，從匹配的元素中搜索給定元素的索引值，從0開始計數。

語法：參數接受一個jQuery或者dom對象做爲查找的條件

.index()
.index( selector )
.index( element )

• 若是不傳遞任何參數給 .index() 方法，則返回值就是jQuery對象中第一個元素相對於它同輩元素的位置
• 若是在一組元素上調用 .index() ，而且參數是一個DOM元素或jQuery對象， .index() 返回值就是傳入的元素相對於原先集合的位置
• 若是參數是一個選擇器， .index() 返回值就是原先元素相對於選擇器匹配元素的位置。若是找不到匹配的元素，則 .index() 返回 -1

簡單來講：

<ul>
    <a></a>
    <li id="test1">1</li>
    <li id="test2">2</li>
    <li id="test3">3</li>
</ul>

$("li").index() 沒有傳遞參數，反正的結果是1，它的意思是返回同輩的排列循序，第一個li以前有a元素,同輩元素是a開始爲0，因此li的開始索引是1

若是要快速找到第二個li在列表中的索引,能夠經過以下2種方式處理

$("li").index(document.getElementById("test2")) //結果：1
$("li").index($("#test2"))  //結果:1