jQuery常用工具方法

前面的話

　　jQuery提供一些與元素無關的工具方法，不必選取元素，就可以直接使用這些方法。如果理解原生javascript的繼承原理，那麼就能理解工具方法的實質內容。它是定義在jQuery建構函式上的方法，即jQuery.method()，所以可以直接使用。而那些操作元素的方法，就是定義在建構函式的prototype物件上的方法，也就是jQuery.prototype.method()，所以必須產生實例(即選取元素)後使用。把工具方法理解成像javascript原生函數那樣可以直接使用的方法就行了。以下將詳細介紹jQuery的常用工具方法

 

元素相關

#【each()】

　　它是一個通用的迭代函數，可以用來無縫迭代物件和數組。數組和類似數組的物件透過一個長度屬性（如一個函數的參數物件）來迭代數字索引，從0到 length - 1。其他物件透過其屬性名稱進行迭代

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

　　jQuery.each()函數和 jQuery(selector).each()不一樣，後者專門用來遍歷一個jQuery物件。 jQuery.each()函數可用於迭代任何集合，無論是「名稱/值」物件（JavaScript物件）或陣列。在迭代數組的情況下，回呼函數每次傳遞一個數組索引和對應的數組值作為參數。 （該值也可以透過存取this關鍵字得到，但是JavaScript將始終將this值作為一個Object ，即使它是一個簡單的字串或數字值。）該方法傳回其第一個參數，這是迭代的對象

$.each( ['a','b','c'], function(index,value){//Index #0: a//Index #1: b//Index #2: cconsole.log( "Index #" + index + ": " + value );
});

$.each( { name: "John", lang: "JS" }, function(index,value){//Index #name: John//Index #lang: JSconsole.log( "Index #" + index + ": " + value );
});

【contains()】

 　　檢視一個DOM元素是另一個DOM元素的後代

jQuery.contains( container, contained )

$.contains( document.documentElement, document.body ); // true

【extend()】

　　將兩個或更多物件的內容合併到第一個物件

jQuery.extend( target [, object1 ] [, objectN ] )

target: Object 一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。
object1: Object 一个对象，它包含额外的属性合并到第一个参数
objectN: Object 包含额外的属性合并到第一个参数

#

$.extend({}, object1, object2);

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

deep: Boolean 如果是true，合并成为递归（又叫做深拷贝）。
target: Object 对象扩展。这将接收新的属性。
object1: Object 一个对象，它包含额外的属性合并到第一个参数.
objectN: Object 包含额外的属性合并到第一个参数

$.extend(true, object1, object2);

 

資料相關

【data()】

　　儲存任意數據到指定的元素並且/或傳回設定的值

jQuery.data( element )

element:Element 要关联数据的DOM对象
key: String 存储的数据名
value:Object 新数据值

$.data(document.body, 'foo', 52);
$.data(document.body, 'bar', 'test');
console.log($.data( document.body, 'foo' ));//52console.log($.data( document.body ));//{foo: 52, bar: "test"}

【removeData()】

#　　刪除一個先前儲存的資料片段

jQuery.removeData( element [, name ] )

var div = $("div");
$.data(div, "test1", "VALUE-1");
$.data(div, "test2", "VALUE-2");
console.log($.data(div));//{test1: "VALUE-1", test2: "VALUE-2"}$.removeData(div, "test1");
console.log($.data(div));//{test2: "VALUE-2"}

 

類型偵測

##【type()】

#　　type()方法用來偵測javascript物件的型別

　　如果物件是undefined或null，則傳回對應的「undefined」或「null」

jQuery.type( undefined ) === "undefined"jQuery.type() === "undefined"jQuery.type( window.notDefined ) === "undefined"jQuery.type( null ) === "null"

##　　如果物件有一個內部的[[Class]]和一個瀏覽器的內建物件的[[Class]] 相同，傳回對應的[[Class]] 名字

jQuery.type( true ) === "boolean"jQuery.type( 3 ) === "number"jQuery.type( "test" ) === "string"jQuery.type( function(){} ) === "function"jQuery.type( [] ) === "array"jQuery.type( new Date() ) === "date"jQuery.type( new Error() ) === "error" jQuery.type( /test/ ) === "regexp"

　　所以該方法類似於原生javascript中經過封裝的Object.prototype.toString()方法

function type(obj){return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}

【isArray()】

　　在原生javascript中，陣列偵測是一個經典問題，當出現網頁中包含多個框架的場景時，數組檢測就不再容易

　　jQuery提供了isArray()方法用來檢測數組

console.log($.isArray([]));//true

【isFunction()】

　　isFunction()方法用來偵測傳入的參數是否為函數

console.log($.isFunction(function(){}));//true

　　如果使用原生javascript，使用typeof即可實作

console.log(typeof function(){});//"function"

【isNumeric()】

　　isNumeric()方法用來偵測傳入的參數是否為數字

　　[注意]參數為純數字或數字字串都可以

$.isNumeric("-10");  // true$.isNumeric(-10);  // true

　　如果使用原生javascript，使用typeof即可實現，但結果稍有不同

console.log(typeof 10);//"number"console.log(typeof '10');//"string"

#【isEmptyObject( )】

　　isEmptyObject()方法用來偵測一個物件是否為空物件

jQuery.isEmptyObject({}) // truejQuery.isEmptyObject({ foo: "bar" }) // false

【isPlainObject()】

#　　isPlainObject()方法用來偵測一個物件是否是原生對象，也就是透過"{}" 或"new Object" 建立的物件

console.log($.isPlainObject({}));//trueconsole.log($.isPlainObject(document.documentElement));//falseconsole.log($.isPlainObject(new Boolean(true)));//falseconsole.log($.isPlainObject(true));//false

 

陣列相關

################################### 【inArray()】######　　inArray(value, array [, fromIndex ])方法類似於原生javascript的indexOf()方法，沒有找到匹配元素時它返回-1。如果陣列第一個元素符合參數，那麼$.inArray()回傳0######　　參數fromIndex就是陣列索引值，表示從哪裡在開始尋找。預設值是0######

var arr = [1,2,3,'1','2','3'];
console.log(arr.indexOf('2'));//4console.log(arr.indexOf(3));//2console.log(arr.indexOf(0));//-1var arr = [1,2,3,'1','2','3'];
console.log($.inArray('2',arr));//4console.log($.inArray(3,arr));//2console.log($.inArray(0,arr));//-1

######【makeArray()】######　　makeArray()方法用來將一個類別陣列物件轉換為真正的javascript陣列###### #

console.log($.isArray({ 0: 'a', 1: 'b', length: 2 }));//falseconsole.log($.isArray($.makeArray({ 0: 'a', 1: 'b', length: 2 })));//true

######　　如果使用原生javascript，可以使用slice()方法將類別數組物件變成真正的陣列######

var arr = Array.prototype.slice.call(arrayLike);

Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })// ['a', 'b']Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);

###

【unique()】

　　unique()方法用于数组去重

var $arr = [document.body,document.body];
console.log($.unique($arr));//[body]var $arr = [1,2,1];
console.log($.unique($arr));//[2,1]

　　使用原生javascript实现如下

Array.prototype.norepeat = function(){var result = [];for(var i = 0; i < this.length; i++){if(result.indexOf(this[i]) == -1){
            result.push(this[i]);
        }
    }return result;
}

var arr = [1,2,1];
console.log(arr.norepeat());//[1,2]var arr = [document.body,document.body];
console.log(arr.norepeat());//[body]

【grep()】

　　查找满足过滤函数的数组元素。原始数组不受影响

jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] )
array: Array 用于查询元素的数组。function: Function() 该函数来处理每项元素的比对。第一个参数是正在被检查的数组的元素，第二个参数是该元素的索引值。该函数应返回一个布尔值。this将是全局的window对象。
invert: Boolean 如果“invert”为false，或没有提供，函数返回一个“callback”中返回true的所有元素组成的数组，。如果“invert”为true，函数返回一个“callback”中返回false的所有元素组成的数组。

　　$.grep()方法会删除数组必要的元素，以使所有剩余元素通过过滤函数的检查。该测试是一个函数传递一个数组元素和该数组内这个的索引值。只有当测试返回true，该数组元素将返回到结果数组中。

　　该过滤器的函数将被传递两个参数：当前正在被检查的数组中的元素，及该元素的索引值。该过滤器函数必须返回'true'以包含在结果数组项

var result = $.grep( [0,1,2], function(n,i){   return n > 0;
 });
console.log(result);//[1, 2]

var result = $.grep( [0,1,2], function(n,i){   return n > 0;
 },true);
console.log(result);//[0]

【merge()】

　　合并两个数组内容到第一个数组

jQuery.merge( first, second )

console.log($.merge( [0,1,2], [2,3,4] ));//[0, 1, 2, 2, 3, 4]

 

其他

【proxy()】

　　proxy()方法接受一个函数，然后返回一个新函数，并且这个新函数使用指定的this

　　proxy()方法类似于bind()，但并不相同。区别在于，bind()方法是改变原函数的this指向，而proxy()方法是新建一个函数，并使用参数中的this指向，原函数的this指向并无变化

var a = 0;function foo(){
    console.log(this.a);
}var obj = {
    a:2};
foo();//0$.proxy(foo,obj)();//2foo();//0

　　proxy()方法支持多种参数传递方式

function foo(a,b){
    console.log(a+b);   
}

$.proxy(foo,document)(1,2);//3$.proxy(foo,document,1,2)();//3$.proxy(foo,document,1)(2);//3

　　在绑定事件时一定要合理使用proxy()方法的参数传递方式，否则事件还没有发生，可能函数已经被调用了

$(document).click($.proxy(foo,window,1,2))

【trim()】

　　jQuery.trim()函数用于去除字符串两端的空白字符

　　这个函数很简单，没有多余的参数用法

console.log($.trim("    hello, how are you?    "));//'hello, how are you?'

 【noop()】

　　一个空函数

jQuery.noop() 此方法不接受任何参数

　　当你仅仅想要传递一个空函数的时候，就用他吧

　　这对一些插件作者很有用，当插件提供了一个可选的回调函数接口，那么如果调用的时候没有传递这个回调函数，就用jQuery.noop来代替执行

【now()】

　　返回一个数字，表示当前时间

jQuery.now() 这个方法不接受任何参数

　　$.now()方法是表达式(new Date).getTime()返回数值的一个简写

【parseHTML()】

　　将字符串解析到一个DOM节点的数组中

jQuery.parseHTML( data [, context ] [, keepScripts ] )
data : String 用来解析的HTML字符串
context (默认: document): Element DOM元素的上下文，在这个上下文中将创建的HTML片段。
keepScripts (默认: false): Boolean 一个布尔值，表明是否在传递的HTML字符串中包含脚本。

　　jQuery.parseHTML 使用原生的DOM元素的创建函数将字符串转换为一组DOM元素，然后，可以插入到文档中。

　　默认情况下，如果没有指定或给定null or undefined，context是当前的document。如果HTML被用在另一个document中，比如一个iframe，该frame的文件可以使用

var result = $.parseHTML( "hello, my name is jQuery");
$('div').append(result);

【parseJSON()】

　　接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript 对象

jQuery.parseJSON( json )

var obj = jQuery.parseJSON('{"name":"John"}');
console.log(obj.name === "John");//true

 

以上是jQuery常用工具方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！