文章目录
jQuery对象
jQuery对象是一个伪数组
什么是伪数组:有数组的属性,即 0–(length-1) 的属性并且有 length 属性
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
<script src="../jquery.js"></script>
<script>
$(function(){
var $div = $("div");
console.log($div);
})
</script>
静态方法和实例方法
先来回顾一下什么是静态方法、什么是实例方法
静态方法: 直接添加到类上面的,通过类名调用
实例方法: 添加到实例原型上面的,通过实例调用
注释部分为特别关注!!!
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
<script src="../jquery.js"></script>
<script>
//定义一个类
function Person() {
}
//给这个类添加一个静态方法,直接添加给类的就是静态方法
Person.staticMethod = function() {
alert("staticMethod");
}
//静态方法通过类名调用
Person.staticMethod();
//给这个类添加一个实例方法
Person.prototype.instanceMethod = function() {
alert("instanceMethod");
};
//实例方法通过类的实例调用,首先创建一个实例(创建一个对象)
var person = new Person();
person.instanceMethod();
</script>
jQuery的each方法与原生JS的forEach()比对
注意:
(1)原生JS的forEach() 可以传递两个参数。第一个参数是遍历的当前元素,第二个参数是当前遍历元素的索引值
(2)jQuery的each方法 可以传递两个参数。第一个参数是当前遍历元素的索引值,第二个参数是遍历的当前元素。正好与原生JS的forEach()相反
(3)原生JS的forEach()只能遍历数组,不能遍历伪数组。jQuery的each方法既能遍历数组又可以遍历伪数组的
注释部分为特别关注!!!
<script>
var arr = [1,2,3,4,5];
//伪数组
var obj = {0:7, 1:8, 2:9,length:3};
//第一个参数:遍历的当前元素
//第二个参数:当前遍历元素的索引值
//注意:原生的forEach()只能遍历数组,不能遍历伪数组
arr.forEach(function(value,index){
console.log(index,value);
})
//利用jQuery的each静态方法遍历数组
//第一个参数:当前遍历元素的索引值
//第二个参数:遍历的当前元素
//注意:jQuery的each方法是可以遍历伪数组的
$.each(arr,function(index,value){
console.log(index,value);
});
$.each(obj,function(index,value){
console.log(index,value);
})
</script>
jQuery的map方法与原生JS的map方法比对
注意:
(1)原生JS的map方法可以传递三个个参数。第一个参数是当前所遍历的元素,第二个参数是当前遍历元素的索引,第三个参数是当前被遍历的数组。
(2)jQuery的map方法传递两个参数。第一个参数是要遍历的数组,第二个参数是每遍历一个元素之后执行的回调函数。回调函数中又可以传递两个参数,第一个参数是当前遍历到的元素,第二个参数是所遍历元素的索引。
(3)原生JS的map方法不能遍历伪数组,jQuery的map方法可以遍历伪数组
注释部分为特别关注!!!
<script src="../jquery.js"></script>
<script>
var arr = [1,2,3,4,5];
var obj = {0:7, 1:8, 2:9,length:3};
//利用原生JS的map方法遍历
//第一个参数:当前所遍历的元素
// 第二个参数:当前遍历元素的索引
//第三个参数:当前被遍历的数组
//注意:不能遍历伪数组
arr.map(function(value,index,array){
console.log(index,value,array);
})
console.log("我是分割线");
//jQuery的map方法
//第一个参数:要遍历的数组
//第二个参数:每遍历一个元素之后执行的回调函数
//回调函数中的参数有两个
//第一个参数:当前遍历到的元素
//第二个参数:所遍历元素的索引
//注意:可以遍历伪数组
$.map(arr,function(value,index){
console.log(index,value);
})
</script>
jQuery的each方法与jQuery的map方法的不同之处
区别一
(1)each静态方法默认的返回值是它所遍历的数组,遍历谁就返回谁
(2)map静态方法默认的返回值是一个空数组
注释部分为特别关注!!!
<script src="../jquery.js"></script>
<script>
var arr = [1,2,3,4,5];
var obj = {0:7, 1:8, 2:9,length:3};
//map和each的区别1
//each静态方法默认的返回值是它所遍历的数组,遍历谁就返回谁
//map静态方法默认的返回值是一个空数组
var a = $.map(obj,function(value,index){
console.log(index,value);
})
var b = $.each(obj,function(index,value){
console.log(index,value);
})
console.log(a);
console.log(b);
</script>
区别二
(1)each静态方法不支持在回调函数中对遍历的数组进行处理
(2)map静态方法可以在回调函数中通过return对遍历的数组进行处理,生成一个新的数组返回
注释部分为特别关注!!!
<script src="../jquery.js"></script>
<script>
var arr = [1,2,3,4,5];
var obj = {0:7, 1:8, 2:9,length:3};
//map和each的区别2
//each静态方法不支持在回调函数中对遍历的数组进行处理
//map静态方法可以在回调函数中通过return对遍历的数组进行处理,生成一个新的数组返回
var a = $.map(obj,function(value,index){
console.log(index,value);
return value + index;
})
var b = $.each(obj,function(index,value){
console.log(index,value);
return value + index;
})
console.log(a);
console.log(b);
</script>
jQuery的trim()方法
(1)trim()方法用于去掉字符串两边的空格
(2)参数: 需要去除两边空格的字符串
(3)返回值: 返回一个去除两边空格的新的字符串
注释部分为特别关注!!!
<script src="../jquery.js"></script>
<script>
var str = " a "
console.log("我是原来的str:"+str);
//trim()去掉字符串两边的空格
//参数:需要去除两边空格的字符串
//返回值:返回一个去除两边空格的新的字符串
var newstr = $.trim(str);
console.log("我是去掉两边空格的str:"+newstr);
</script>
jQuery中的isWindow()、isArray()和isFunction()方法
jQuery中的isWindow()、isArray()和isFunction()方法使用方法相类似
(1)isWindow():判断传入的对象是否是window对象
(2)isArray():判断传入的对象是否是真数组,伪数组返回false
(3)isFunction():判断传入的对象是否是一个函数
(4)返回值都是true/false
(5)特别注意: jQuery本质是一个函数
注释部分为特别关注!!!
<script src="../jquery.js"></script>
<script>
var str = " a ";
//判断传入的对象是否是window对象
//返回值:true/false
var w = window; //windom对象
console.log($.isWindow(str));
console.log($.isWindow(w));
//判断传入的对象是否是真数组
//返回值:true/false
var arr = [1,2,3];
var obj = {0:1, 1:2, length:2};
console.log($.isArray(arr));
console.log($.isArray(obj));
//判断传入的对象是否是一个函数
//返回值:true/false
//注意:jQuery本质是一个函数
var f = function(){};
console.log($.isFunction(f));
console.log($.isFunction(jQuery));
</script>
jQuery中的holdReady()方法
holdReady()中为 true 时,暂停 ready 入口函数执行。holdReady()中为 false 时,恢复ready入口函数执行。
以下代码显示结果: 点击按钮后一次出现"btn"警告框和"ready"警告框
<body>
<button>点我</button>
</body>
<script src="../jquery.js"></script>
<script>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
alert("btn");
//恢复ready执行
$.holdReady(false);
}
//暂停ready执行
$.holdReady(true);
$(document).ready(function(){
alert("jquery");
})
</script>