本文介紹下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~