jQuery中常用工具方法彙總

本文介紹下jQuery中常用的工具方法,可以加快我們的開發效率


                    /*
                     * 1.$.trim
                     * $.trim(string)
                     * 去除字符串的首位空格(中間的不能去除)
                     */
                    var newTitle = $.trim('  hello world~   ');//hello world~

                    /*
                     * 2.$.contains
                     * $.contains(dom1, dom2)
                     * 判斷dom1是否爲dom2的下級(子級),返回bool
                     */
                    var dom1 = document.documentElement;
                    var dom2 = document.body;
                    var containsResult = $.contains(dom1, dom2);//true
                    var containsResult1 = $.contains(dom2, dom1);//false

                    /*
                     * 3.$.each
                     * $.each(arr, function (index, item) {})
                     * 遍歷數組/對象
                     */
                    var userNames = ['張三', '李四', '王五', '趙柳'];
                    //遍歷數組
                    $.each(userNames, function (index, item) {
                        console.log(item);
                    });
                    var user = {
                        name: "張三",
                        age: age,
                        sex: "男"
                    };
                    //遍歷對象
                    $.each(user, function (key, value) {
                        console.log(key + ':' + value);
                    });

                    /*
                     * 4.$.map:
                     * $.map(arr, function (item, index) { }
                     * 類似於.Net的lamda表達式的select
                     */
                    var userNameShows = $.map(userNames, function (item, index) {
                        return '第' + index + '個:' + item;
                    });


                    /*
                     * 5.$.inArray
                     * $.inArray(value,arr)
                     * 獲取到值在一個數組中的位置,從0開始,-1表示數組中沒有該值
                     */
                    var indexForInArray = $.inArray("李四", userNames);//1
                    var indexForInArray1 = $.inArray("孫悟空", userNames);//-1


                    /*
                     * 6.$.extend
                     * 對象合併
                     * 這裏涉及到深拷貝,淺拷貝,還有$.fn.extend,具體的使用,大家自行去百度,我這裏就不講了
                     */
                    var obj1 = {
                        name: "張三",
                        age: 100
                    };
                    var obj2 = {
                        country: "中國",
                        city: '湖北'
                    };
                    var obj3 = $.extend({}, obj1, obj2);//{name: "張三",age: 100,country: "中國",city: '湖北'}


                    /*
                     * 7.$.proxy
                     * 第一種寫法:$.proxy(function,context):指定方法function的上下文爲context;
                     * 第二種寫法:$.proxy(context,function):指定上下文context和它的某個方法名;
                     * 個人認爲第一種方式好理解一些
                     */
                    var model1 = {
                        name: "張三",
                        say: function (title) {
                            alert(title + ',大家好,我叫' + this.name);
                        }
                    };
                    var model2 = {
                        say: function (title) {
                            alert(title + ',大家好,我叫' + this.name);
                        }
                    };
                    model2.say("hello");//獲取不到name,因爲model2沒有name這個屬性
                    //想要讓model2使用model1的name屬性,就得使用代理
                    var newSayMethod = $.proxy(model2.say, model1);//通過代理獲取一個新方法
                    newSayMethod("hello");


                    /*
                     * 8.$.data和$.removeData
                     * 這裏我也只講解基本用法,更多用法各位自行百度,我這裏就不多講了
                     */
                    var key = "testJqueryData";
                    var value = "張三";
                    $.data(document.body, key, value);//存入數據
                    var value1 = $.data(document.body, key);//讀取數據
                    var valueObj = $.data(document.body);//讀取時不傳遞key,會讀取到所有的key和value,是一個對象

                    $.removeData(document.body, key);//刪除指定的key和value


                    /*
                     * 9.$.parseHTML(),$.parseJSON(),$.parseXML()
                     * 這裏我也不做過多講解,點到爲止
                     */


                    /*
                     * 10.$.makeArray()
                     * 將一個對象或者集合結構的,轉化爲數組
                     */
                    var arr = $.makeArray(document.getElementsByTagName('div'));


                    /*
                     * 11.$.merge
                     * 將兩個數組合並(注意,並不會去重)
                     */
                    var arr1 = [1, 2, 3];
                    var arr2 = [2, 3, 4];
                    var arr3 = $.merge(arr1, arr2);


                    /*
                     * 12.$.now()
                     * 獲取當前時間
                     * 獲取當前距離1970-1-1 00:00:00的毫秒數,等價於new Date().getTime()
                     */
                    var time = $.now();
                    var time1 = new Date().getTime();
                    var isEqual = time == time1;//true



                    /*
                     * 13.$.unique
                     * 數組去重
                     */
                    var arr4 = [document.body, document.body];
                    var arr5 = [1, 2, 3, 8, 9, 8, 10];
                    var arr6 = $.unique(arr4);//[document.body]
                    var arr7 = $.unique(arr5);//[1, 2, 3, 8, 9, 10]


                    /*
                     * 14.$.grep
                     * 數組篩選過濾
                     * 類似於.Net後端lamda表達式中的where/findAll
                     */
                    var users = [
                        { name: "張三", age: 20 },
                        { name: "李四", age: 23 },
                        { name: "王五", age: 25 },
                        { name: "趙柳", age: 28 }
                    ];
                    var users1 = $.grep(users, function (user, index) {
                        return user.age > 25;//過濾出年齡25歲以上的人
                    });

                    /*
                     * 15.其他的一些常用方法
                     */
                    $.isArray();//是否爲數組
                    $.isEmptyObject();//是否爲空對象(不含可枚舉的屬性)
                    $.isFunction();//是否爲方法
                    $.isNumeric();//是否爲數字
                    $.isPlainObject();//是否爲使用“{}”或“new Object”生成的對象,而不是瀏覽器原生提供的對象
                    $.isWindow();//是否爲window對象
                    $.isXMLDoc();//判斷一個DOM節點是否處於XML文檔之中
                    $.noop();//空方法,不接受任何參數,一般在開發插件是使用

 

Ending~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章