jQuery工具函數（轉）

来源:http://www.cnblogs.com/banmengbanxing/archive/2016/03/21/5302294.html
-Advertisement-
Play Games

屬性列表 說明 webkit webkit相關瀏覽器則返回true，否則返回false，如google，傲游。 mozilla mozilla相關瀏覽器則返回true，否則返回false，如火狐 safari safari相關瀏覽器則返回true，否則返回false，如safari opera op


原文地址：http://www.cnblogs.com/kissdodog/archive/2012/12/27/2835561.html 作者：逆心 ---------------------------------

一、$.browser對象屬性

　　屬性列表　　　　　　　　　　　　　　　　　　說明

　　webkit　　　　　　 webkit相關瀏覽器則返回true，否則返回false，如google，傲游。

　　mozilla　　　　　　 mozilla相關瀏覽器則返回true，否則返回false，如火狐

　　safari　　　　　　   safari相關瀏覽器則返回true，否則返回false，如safari

　　opera　　　　　　  opera相關瀏覽器則返回true，否則返回false，如opera

　　msie　　　　　　　 msie相關瀏覽器則返回true，否則返回false,如IE，360，搜狗

　　version　　　　　　 返回對應瀏覽器的版本

  
        $(function () {
            if ($.browser.msie) {
                alert("IE瀏覽器");
            }
            if ($.browser.webkit) {
                alert("webkit瀏覽器");
            }
            if ($.browser.mozilla) {
                alert("mozilla瀏覽器");
            }
            if ($.browser.safari) {
                alert("safari瀏覽器");
            }
            if ($.browser.opera) {
                alert("opera瀏覽器");
            }
            alert($.browser.version);
        })
 

二、boxModel

　　返回一個布爾值，如果是W3C盒子模型則返回true，否則返回false。

　　盒子模型分兩類，一類是W3C盒子模型，一類是IE盒子模型。兩者的根本區別在於W3C的盒子模型不包括padding與border，僅指content的Height和Width，而IE盒子模型　　包含padding與border。

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jQuery.1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            if ($.support.boxModel) {
                alert("W3C盒子模型!");
            }
            else {
                alert("IE盒子模型!");
            }
        })
    </script>
</head>
<body>

</body>
</html>
 

　　上面的例子彈出W3C盒子模型，如果刪除掉頂部的兩行，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">。則彈出的是IE盒子模型。

數組和對象的操作

三、$.each()

　　此工具函數不僅能夠完成指定數組的遍歷，還能夠實現頁面中元素的遍歷。

　　語法：$.each(obj,fn(para1,para2))　　obj要遍歷的數組或對象，fn為每個遍歷元素執行的回調函數，para1表示數組的序號或對象的屬性，para2表示數組的元素和對象的屬性。

  
        $(function () {
            var arr = [1, 2, 3, 4, 5];
            $.each(arr, function (index, value) {
                document.write(index + ":");
                document.write(value + "<br/>");
            });
        })
　　　　輸出：
　　　　　　0:1
　　　　　　1:2
　　　　　　2:3
　　　　　　3:4
　　　　　　4:5
 

　　$.each()遍曆數組。

  
        $(function () {
            var arr = { "張三": "23","李四": 22,"王五": "21" };
            $.each(arr, function (index, value) {
                document.write(index + ":");
                document.write(value + "<br/>");
            });
        })
　　　　輸出：張三:23
　　　　　　　李四:22
　　　　　　  王五:21
 

 　　元素遍歷

<head>
    <title></title>
    <script src="jQuery.1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("p").each(function () {
                $(this).css("background-color", "red");
            });

　　　　　　　//一下三行代碼與以上三行效果一樣
            //$.each($("p"), function () {
            //    $(this).css("background-color", "red");
            //})
        })
    </script>
</head>
<body>
        <p>我是第一個P</p>
        <p>我是第二個P</p>
        <p>我是第三個P</p>
        <p>我是第四個P</p>
        <p>我是第五個P</p>
</body>
</html>
 

四、$.grep()

　　篩選符合條件的元素，返回一個新數組

　　　　語法：$.grep(Arrar,fn(value,index));　　要註意下回調函數的參數的順序，第一個是值，第二個是索引。

　　　　　　　$.grep(Arrar,fn(value,index),[bool]);　　第三個參數表示是否取反，true表示取反，false表示不取反。

  
        $(function () {
            var arr = [2, 5, 34, 22, 8];
            var arr1 = $.grep(arr, function(value, index) {
                return index <= 2 && value < 10;
            })
            document.write(arr1.join());　　//輸出2,5
        })
 

六、$.map()

　　改變函數內的數據，接受一個數組或類數組對象作為參數

  
        $(function () {
            var arr = [2, 5, 34, 22, 8];
            var arr1 = $.map(arr, function (value, index) {
                if (value > 5 && index < 3) {
                    return value - 10;
                }
            })
            document.write(arr.join() + "<br/>");　　//2,5,34,22,8　　可以看到原數組不改變
            document.write(arr1.join());　　　　　　　 //24　　新數組只獲得了操作之後的結果
        })
 

七、$.inArray()

　　如果數組中存在被搜索元素，則返回被搜索元素的索引

        $(function () {
            var arr = [1, 2, 3, 4, 5];
            alert($.inArray(4,arr));　　//彈出 3
        })

 八、$.trim()

　　去除字元串兩邊的空格

        $(function () {
            var str = " 你在他鄉還好嗎？ ";
            document.write("11" + str + "11" + "<br/>");　　//輸出 11 你在他鄉還好嗎？ 11
            document.write("11" + $.trim(str) + "11");　　　//輸出 11你在他鄉還好嗎？11　　　　//加個11是為了看清楚差別。
        })

九、測試操作

　　　　$.isArray(obj)　　　　檢測參數是否是數組

　　　　$.isFunction(obj)　　 檢測參數是否是一個函數

　　　　$.isEmptyObject(obj)　　檢測參數是否是一個空對象

　　　　$.isPlainObject(obj)　　　檢測參數是否是一個純粹對象，即對象是否通過{}或new Object()關鍵字創建。

　　　　$.contains(container,contained)　　檢測一個DOM節點是否包含另一個DOM節點。是則返回true否則表示false。註意參數是DOM對象並非jQuery對象。

        $(function () {
            var arr = [1, 2, 3, 2, 1];
            document.write(jQuery.isArray(arr));　　//返回true
            var str = "123";
            document.write(jQuery.isArray(str));　　//返回false
        })
        $(function () {
            var f = fun1;
            alert($.isFunction(fun1));　　//返回true
        })
        function fun1() { }
        $(function () {
            var obj1 = {};
            var obj2 = { name: "張飛" };
            alert($.isEmptyObject(obj1));　　//返回true　　obj1是空對象
            alert($.isEmptyObject(obj2));　　//返回false　 obj2不是空對象
        })
複製代碼 
        $(function () {
            var obj1 = {};
            var obj2 = { name: "張飛" };
            var obj3 = new Object();
            var obj4 = null;
            alert($.isPlainObject(obj1));　　//true　　通過{}創建
            alert($.isPlainObject(obj2));　　//true　　通過{}創建
            alert($.isPlainObject(obj3));　　//true　　通過new Object()創建
            alert($.isPlainObject(obj4));　　//flase　　不是通過{}或new Object()創建
        })
複製代碼 
        $(function () {
            alert($.contains($("#div1")[0],$("#p1")[0]));　　//返回true，註意參數是DOM對象，並非jQuery對象
        })

十、$.param()

　　序列化成url字元串

　　　　$.param(obj,[bool]);　　第二個參數為可選參數，表示是否淺層序列化

複製代碼 
        $(function () {
            var man = { Name: "張飛", Age: 23 };
            var str = $.param(man);
            document.write(str);　　　　　　//Name=%E5%BC%A0%E9%A3%9E&Age=23
            var str1 = decodeURI(str);
            document.write("<br>" + str1);　　//Name=張飛&Age=23
        })
複製代碼

十一、$.makeArray()

　　將數組或類數組對象的屬性複製到一個新的數組(真的是數組)中，並返回該新數組。

        var arr = [1,3,5,7,9];
        $(function () {
            var arr1 = $.makeArray(arr);
            document.write(arr1.join());　　//輸出 1,3,5,7,9
        })

十二、$.merge()

　　該函數接受兩個數組或類數組對象，將第二個參數附加到第一個參數上面，返回第一個參數，第一個數組會修改，第二個不會。

複製代碼 
        var arr1 = [1, 3, 5, 7, 9];
        var arr2 = [2, 4, 6, 8, 10];
        $(function () {
            var arr3 = $.merge(arr1, arr2);
            document.write(arr1.join() + "<br/>");    //1,3,5,7,9,2,4,6,8,10
            document.write(arr2.join() + "<br/>");    //2,4,6,8,10
            document.write(arr3.join() + "<br/>");    //1,3,5,7,9,2,4,6,8,10
        })
複製代碼

十三、$.parseJSON()

　　該函數會解析JSON格式的字元串，並返回解析結果(對象)。 類似於JSON.parse()，註意:jQuery只定義了JSON解析函數，並沒有定義序列化函數。

        var man = { name: "張三", age: 23 };
        var str = JSON.stringify(man);
        document.write(str + "<br/>");  //{"name":"張三","age":23}
        var man1 = $.parseJSON(str);
        document.write(man1.name + man1.age);   //張三23

十四、$.proxy()

　　類似於Function對象的bind()方法，接受函數作為第一個參數，對象作為第二個參數，並返回一個新函數，該函數會作為第二個參數對象的方法調用。

複製代碼 
　　$(function () {
　　　　var obj = {
　　　　　　name: "John",
　　　　　　test: function () {
　　　　　　　　alert(this.name);　　　　//當id為test的按鈕點擊時，彈出姓名
　　　　　　　　$("#test").unbind("click", obj.test);　　//並取消事件綁定(下次再點擊不會彈出姓名)
　　　　}
　　};
　　　　$("#test").click(jQuery.proxy(obj, "test"));　　//綁定object對象裡面的方法test
　　})
複製代碼

十五、$.unique(array)

　　刪除元素數組中的重覆元素

$(function () {
    var arr = [1, 2, 3, 2, 1];
    jQuery.unique(arr);
    alert(arr.join());　　//返回　　3,2,1
})

十六、$.extend()

　　合併對象中的元素

$(function(){
    var result=$.extend({},{name:"Tom",age:21},    {name:"Jerry",sex:"Boy"});
　　alert(result.name);    //輸出 Jerry 後面的會覆蓋前面的，result始終只是一個對象
})

　　省略dest參數,extend方法原型中的dest參數是可以省略的，如果省略了，則該方法就只能有一個src參數，而且是將該src合併到調用extend方法的對象中去。

　　要特別註意的一點是：後面的值會覆蓋前面同名的值。

$(function(){
    $.extend({
        hello:function(){alert('hello');}　　//該方法只有一個參數，意味著將hello方法合併到jQuery全局對象中去
    });
    $.hello();    //彈出 hello
})

　　命名空間示例：

複製代碼 
$(function(){
    $.extend({net:{}});        //擴展一個命名空間
    $.extend($.net,{
        hello:function(){alert('hello');}    //將hello方法綁定到命名空間net里去
    })
    $.net.hello();    //通過net命名空間調用方法
})
複製代碼

　　拷貝方法原型：

extend(boolean,dest,src1,src2,src3...)

　　其中第一個參數boolean表示是否進行深層拷貝。

複製代碼 
$(function(){
    var result=$.extend( true,  {},  
        { name: "John", location: {city: "Boston",country:"USA"} },  
        { last: "Resig", location: {state: "MA",country:"China"} } ); 
    alert(result.location.state);        //輸出 MA

    //result={name:"John",last:"Resig", location:{city:"Boston",state:"MA",county:"China"}}

    var result=$.extend( false,  {},  
        { name: "John", location: {city: "Boston",country:"USA"} },  
        { last: "Resig", location: {state: "MA",country:"China"} } ); 
    alert(result.location.city);        //輸出 undefined

    //result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}    註意沒有city，只是合併了location,location裡面的屬性不管
})
複製代碼
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Ajax請求
    <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>ajax()</title> <script src="js/jquery-1.6.js"></script> <script> $(function(){ $(
  • 重新定位所有消息提示層
    // 重新定位所有消息提示層（當使用dipslay顯示隱藏某些HTML層時，由於消息是絕對定位的，所以會出現消息層錯位現象） //在最後調用此方法重新定位即可 function resetPos(){ var objs = document.getElementsByTagName('*'); va
  • [轉]一種簡單的js時間控制項
    使用方法: 粘貼代碼到文本文檔中,文檔名稱為datetime.js,然後在html文件中引用如下代碼即可 <input name="shijian1" id="shijian1" type="text" class="sang_Calender" /> <script type="text/java
  • vue開發體驗
    記錄下vue開發過程中的一些理解，如有不足，希望大家多多提意見。 vue裡面的數據綁定，是一種常見的元素操作，如v-bind:src,v-bind:class,v-bind:style等等。 這是個官網的例子，再舉一個常見的。我們一般對網頁圖片優化，需要考慮對圖片懶載入（延遲載入）會寫如下代碼： 1
  • 微信圖片上添加昵稱等信息拖動移動位置
    調用 下載地址：http://www.zhangxinxu.com/study/down/jquery_jcrop_zh.zip crop_rotation/zxx.crop_rotation.js excanvas.js
  • 一些很棒的js代碼（持續跟新）
    1.jQuery初始化代碼段 技術亮點：jQuery無new化構建、每次jQuery構建的作用域隔離、jQuery拓展插件。 實現源碼： 分析： 每次jQuery函數內部new的作用是隔離作用域。每次構建的都是一個新對象，新對象obj如果重寫obj.__proto__下的屬性不影響其他jQuery對
  • Nodejs學習筆記（十二）--- 定時任務（node-schedule)
    在實際開發項目中，會遇到很多定時任務的工作。比如：定時導出某些數據、定時發送消息或郵件給用戶、定時備份什麼類型的文件等等 一般可以寫個定時器，來完成相應的需求，在node.js中自已實現也非常容易，接下來要介紹的是node-schedule來完成定時任務 下麵就用示例來說明一下node-schedu
  • SASS使用總結
    運算 sass可進行簡單的加減乘除運算等 所謂選擇器嵌套指的是在一個選擇器中嵌套另一個選擇器來實現繼承，從而增強了sass文件的結構性和可讀性。 如上代碼，定義了兩個占位選擇器%ir和%clearfix，其中%clearfix這個沒有調用，所以解析出來的css樣式也就沒有clearfix部分。占位選
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類