首页 > 技术文章 > jQuery静态方法(each、map、isFunction, isWindow, isArray, .trim(), .holdReady())

chenyingjie1207 2018-12-01 09:45 原文

添加js的静态方法和实例方法
- 1.定义一个类
- 2.给这个类添加一个静态方法:直接添加给类的就是静态方法.结晶态方法直接通过类调用.
- 3.给这个类添加一个实例方法:在类的原型上添加.实例方法通过类的实例调用,创建一个实例(创建一个对象)
//1.定义一个类
function AClass() {

}
//2.给这个类添加一个静态方法
//直接添加给类的就是静态方法
AClass.staticMethod = function () {
	alert("hello");
}
//静态方法通过类名调用
AClass.staticMethod();

// 3.给这个类添加一个实例方法
AClass.prototype.instanceMethod = function(){
	alert("inatance");
}
//实例方法通过类的实例调用
//创建一个实例(创建一个对象)
var a = new AClass();
//通过实例调用实例方法.
a.instanceMethod();
jQuery静态方法
1.each方法
  • 原生js的forEach方法:

    • 第一个参数为元素,第二个参数为索引
    • 可以遍历数组,当不能遍历伪数组.
  • jQuery的each方法:

    • 第一个参数为索引,第二个参数为元素
    • 可以遍历数组,也可以遍历伪数组.
var arr = [1,2,4,5,6,7,4];
var obj = {
	1:1,
	2:2,
	3:3
}
//原生js
//第一个参数:遍历到的元素
// 第二个参数:当前遍历到的索引
//PS:原生的forEach方法只能遍历数组,不能遍历伪数组
arr.forEach(function (value,index) {
	console.log(index + " " + value);
})
// obj.forEach(function (value) {
//     console.log(value);
// })//报错:Object doesn't support property or method 'forEach'

//1.利用jQuery静态方法
/*
第一个参数:当前遍历到的索引
第二个参数:当前遍历到的元素
注意点:jQuery的each方法是可以遍历伪数组的。
*/
$.each(arr,function (index, value) {
	console.log(index, value);
})
$.each(obj,function (index, value) {
	console.log(index, value);
})
2.jQuery的map静态方法
//2. jQuery的map静态方法
//1)原生js:
//第一个参数:遍历到的元素
//第二个参数:数组遍历到的索引
//第三个参数:遍历的数组
//注意:原生js的map方法不可以遍历伪数组
 arr.map(function (value, index, array) {
     console.log(index, value, array);

 })

// 2)jQuery的map静态方法
//第一个参数:需要遍历的数组
//第二个参数:每遍历一次数组调用的回调函数。回调函数的参数:1.数组的遍历到的元素;2.数组遍历到的索引。
//注意:jQuery的map方法可以遍历伪数组。
var res2 = $.map(arr,function(value,index){
	console.log(index, value);
	return index + value;
})
$.map(obj,function(value,index){
	console.log(index,value);//
})

//3)jQuery的map方法和each方法的区别
//a. map方法默认返回的是一个空数组,each的默认返回值的是遍历的数组
//b. map静态方法可以在回调函数中通过return 对遍历的数组进行处理;each静态方法不支持在回调函数中对遍历数组进行处理。
var res1 = $.each(arr,function (index, value) {
	console.log(index, value);
	return index + value;
})
console.log(res1);//[1,2,4,5,6,7,4],不变
console.log(res2);//[1,3,6,8,10,12,10]
3.jQuery中的其他静态方法

1)$.trim();
- 使用:去除字符串两端的空格
- 参数:需要去除空格的字符串
- 返回值:去除空格之后的字符串

 var str = "     lalla   ";
console.log("---" + str + "---");
var str1 = $.trim(str);
console.log(str1);//'lalla'

2)$.isWindow(window);
- 使用:判断传入的对象是否是window对象
- 参数:需要判断的对象
- 返回值:true/false

var w = window;
var res1 = $.isWindow(w);//true
var res2 = $.isWindow(arr);//false

3)$.isArray(arr);
- 使用:判断传入的对象是否是真数组
- 返回值:true/false

var w = window;
var res1 = $.isArray(w);//false
var res2 = $.isArray(arr);//true

4)$.isFunction(fn);
- 使用:判断传入的对象是否是函数
- 返回值:true/false
- 注意:jQuery框架本质上是一个立即执行函数。

var w = window;
var fn = function(){};
var res1 = $.isFunction(w);//false
var res2 = $.isFunction(fn);//true
var res3 = $.isFunction(jQuery);//true

5)$.holdReady(true);
- 使用:作用:暂停ready事件处理函数执行
- 注意:jQuery框架本质上是一个立即执行函数。

$.holdReady(true);//作用:暂停ready执行
$(document).ready(function () {
	alert("ready");
})

var btn = document.getElementsByTagName('button')[0];
btn.onclick = function (e) {
	// alert("btn");
	$.holdReady(false);//关闭ready暂停事件
}

推荐阅读