jQuery常用工具方法

来源:http://www.cnblogs.com/xiaohuochai/archive/2017/06/08/6514175.html
-Advertisement-
Play Games

[1]元素相關 [2]數據相關 [3]類型檢測 [4]數組相關 [5]其他 ...


前面的話

　　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: c
    console.log( "Index #" + index + ": " + value );
});
$.each( { name: "John", lang: "JS" }, function(index,value){
    //Index #name: John
    //Index #lang: JS
    console.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, key, value )
jQuery.data( element, key )
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' ));//52
console.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({}) // true
jQuery.isEmptyObject({ foo: "bar" }) // false

【isPlainObject()】

　　isPlainObject()方法用來檢測一個對象是否是原生對象，即通過 "{}" 或者 "new Object" 創建的對象

console.log($.isPlainObject({}));//true
console.log($.isPlainObject(document.documentElement));//false
console.log($.isPlainObject(new Boolean(true)));//false
console.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'));//4
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(0));//-1

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

【makeArray()】

　　makeArray()方法用於將一個類數組對象轉換為真正的javascript數組

console.log($.isArray({ 0: 'a', 1: 'b', length: 2 }));//false
console.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)();//2
foo();//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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • js跨域總結
    1、document.domain+iframe的設置2、動態創建script3、利用iframe和location.hash4、window.name實現的跨域數據傳輸5、使用HTML5 postMessage6、利用flash 7、jsonp 本地的話，可以利用花瓶、gulp等工具 ...
  • 【JQ】toggle / slideToggle / fadeToggle 的區別
    總結： toggle對整個元素的可見樣式屬性進行動畫過渡處理 slideToggle對元素做高與透明度過渡處理 fadeToggle對元素僅做透明度過渡處理 ...
  • 使用React改版網站後的一些感想
    文章轉載：http://www.jianshu.com/p/8f74cfb146f7 網站是畢業設計的作品，開發這個網站的目的主要用於記錄一些筆記，以及聚合一些資訊信息，也算自己在網路世界中的一塊靜地吧，可以在這裡一些技術上想法的實踐。 網站最初前端使用vue開發，在前段時間由於項目的開發進度已經不 ...
  • js獲取url中參數名也參數值
    要撮利用js獲取url中參數名也參數值這個不多見了，但我今天需要這樣操作，下麵我來給大家介紹一下具體的實例方法。 在已知參數名的情況下，獲取參數值，使用正則表達式能很容易做到。 js的實現方法如下： function getValue(url, name) { var reg = new RegEx ...
  • nodeJS實現簡單網頁爬蟲功能
    [1]網頁源碼 [2]篩選數據 [3]cheerio [4]爬蟲代碼 [5] ...
  • jQuery 添加樣式屬性的優先順序別
    jQuery類中添加多個屬性 jQuer為元素添加類 HTML code 可以看到jQuery類中添加多個屬性渲染效果是以內嵌樣式出現的。 而jQuer為元素添加的類沒有內嵌樣式的優先順序高 可以看到渲染效果中沒有funny的 background color: gray ; 和 color: yel ...
  • css類選擇器類名覆蓋優先順序
    code 渲染效果 最初以為更改元素中class類裡面的類名順序，渲染效果就會根據類名順序依次渲染 code 渲染效果 更改元素class裡面類名的順序並不能影響渲染順序 code 渲染效果 更改樣式表裡類的順序 渲染順序受到影響 結論：兩個類中有同樣的屬性覆蓋順序是css樣式表從下往上的順序 ...
  • jQuery+ajax實現局部刷新
    在項目中，經常會用到ajax，比如實現局部刷新，比如需要前後端交互等，這裡呢分享局部刷新的兩種方法，主要用的是ajax裡面的.load()。 第一種： 當某幾個頁面都有相同的頭部、導航、底部的時候，點擊導航鏈接可以在幾個頁面中切換，此時想要的效果是點擊鏈接後只切換內容部分，其他不再重新載入。上代碼。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類