jQ原型上的核心方法和属性：
1、jquery 获取jQ版本号
2、selector 实例默认的选择器取值
3、length 实例默认的长度
4、toArray 把实例转换为数组返回
5、get 获取指定下标的元素，获取的是原生DOM
6、eq 获取指定下标的元素，获取的是jQuery类型的实例对象
7、first 获取实例中的第一个元素，是jQuery类型的实例对象
8、last 获取实例中的最后一个元素，是jQuery类型的实例对象
9、splice 按照指定下标指定数量删除元素，也可以替换删除的元素
11、push 给实例添加新元素
12、sort 对实例中的元素进行排序
13、each 遍历实例，把遍历到的数据传给回调使用
14、map 遍历实例，把遍历到的数据传给回调使用，然后把回调的返回值收集起来组成一个新的数组返回
- 属性和方法的测试函数
console.log($().jquery);//2.0.0
console.log($().selector);//''
console.log($().length);//0
//4、toArray 把实例转换为数组返回
$(function(){
console.log($('div'));//init {0: div, 1: div, 2: div, length: 3}
console.log($("div").toArray());//Array:(3)
})
- jq中封装
jquery:'2.0.0' ,
selector:"",
length:0,
toArray:function(){
return [].slice.call(this)
},
- 5.get 获取指定下标的元素，获取的是原生DOM
$(function(){
console.log($('div'));//init {0: div, 1: div, 2: div, length: 3}
console.log($('div').get()); //[div, div, div] console.log($('div').get(1));//<div>div2</div>
console.log($('div').get(-1));//<div>div3</div>
console.log($('div').get("ads"));//undefined
})
get:function(index){
//1.没有传入参数,返回数组
if(arguments.length==0){
return this.toArray();
}
//2.传入一个正数
if(index>0){
return this[index];
}
//3.传入一个负数
if(index<0){
return this[this.length+index]
}
},
-
返回的是数组
-
6.eq 获取指定下标的元素，获取的是jQuery类型的实例对象
$(function(){
console.log($("div"));
//如果没有传递参数,会返回一个空的jq实例
console.log($('div').eq());
//会将指定索引的元素包装为一个jQ实例之后返回
console.log($('div').eq(1));
console.log($('div').eq(-2));
console.log($('div').eq('abc'));
})
- 1.如果没有传递参数,会返回一个空的jq实例
- 2.会将指定索引的元素包装为一个jQ实例之后返回
eq:function(index){
//1.没有传递参数, 返回所有实例
if(arguments.length==0){
return this;
}
//传入index的正负情况和get方法一样,只是eq返回的是实例,而get返回的是数组,只需要用$()包装成实例即可
return $(this.get(index));
},
- 返回的都是jq实例
- 没有传递参数, 返回所有实例
- 传入index的正负情况和get方法一样,只是eq返回的是实例,而get返回的是数组,只需要用$()包装成实例即可
- 7.first 获取实例中的第一个元素，是jQuery类型的实例对象
$(function () {
console.log($("div").first());
});
- 8.last 获取实例中的最后一个元素，是jQuery类型的实例对象
$(function () {
console.log($("div").last());
});
$(function () {
var oBtn = document.createElement("button");
var temp = $("div");
console.log(temp);//打印出3个div和 1个button(没添加的时候没有) 都是jq类型的实例对象
temp.push(oBtn);
console.log(temp);//打印出3个div和 1个button 都是jq类型的实例对象
});
- 11、push 给实例添加新元素
$(function () {
var oBtn = document.createElement("button");
var temp = $("div");
console.log(temp); //打印出3个div 都是jq类型的实例对象
temp.push(oBtn);
console.log(temp);//打印出3个div和 1个button 都是jq类型的实例对象
});
- 上面几个方法的jQuery结构
first:function(){
return this.eq(0);
},
last:function(){
return this.eq(-1);
},
sort:[].sort,
splice:[].splice,
push:[].push,
slice:[].slice,
网友评论