Mr.J-- jQuery学习笔记(二十六)--jQuery原型上的属性&&方法

这篇博客详细介绍了jQuery原型上的核心方法和属性，包括页面元素、selector、length、push、sort、splice等。同时，解释了如何使用这些方法进行元素操作，如添加、排序、删除元素，以及转换为数组等。此外，还提到了eq、first、last、each和map等方法的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQ原型上的核心方法和属性

页面元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jQuery-1.12.4.js"></script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>

jquery

获取jQ版本号

console.log($().jquery);

selector

实例默认的选择器取值

console.log($("div"));

console.log($("div#box1"));

length

实例默认的长度

var arr = [56, 39, 65, 71, 45];
console.log(arr.length);

push

给实例添加新元素


var arr = [56, 39, 65, 71, 45];
arr.push(77);
console.log(arr);

sort

对实例中的元素进行排序


var arr = [56, 39, 65, 71, 45];

console.log(arr.sort());

splice

按照指定下标指定数量删除元素，也可以替换删除的元素

语法

arrayObject.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

添加元素

var arr = [56, 39, 65, 71, 45];
arr.splice(2,0,99);
console.log(arr);

删除位置是2的元素并替换：

var arr = [56, 39, 65, 71, 45];
arr.splice(2,1,99);
console.log(arr);

删除从2开始的三个元素，并替换

var arr = [56, 39, 65, 71, 45];
arr.splice(2,3,99);
console.log(arr);

toArray

把实例转换为数组返回

var res = $("div");
console.log(res);
var res2 = res.toArray();
console.log(res2);

get

获取指定下标的元素，获取的是原生DOM

get方法如果不传递参数, 相当于调用toArray()

console.log(res.get());
 console.log(res.get(0));
 console.log(res.get(1));
 console.log(res.get(-1)); // (3 + -1) = 2
 console.log(res.get(-2)); // (3 + -2) = 1

eq

获取指定下标的元素，获取的是jQuery类型的实例对象

var res = $("div");
console.log(res.eq());
console.log(res.eq(0));
console.log(res.eq(-1));

first

获取实例中的第一个元素，是jQuery类型的实例对象

console.log(res.first());

last

获取实例中的最后一个元素，是jQuery类型的实例对象

console.log(res.last());

each

遍历实例，把遍历到的数据传给回调使用

var arr = [1, 3, 5, 7, 9];
var obj1 = {0:"yjk",1:"333",2:"male",length:3};

jQuery.each(arr, function (key, value) {
	 if(key === 2){
	     return false;
	 }
	 console.log(key, value);
	console.log(this);
});

jQuery.each(arr, function (key, value) {
 console.log(key, value);
     console.log(this);
 });

同样可以使用$方法进行数组的调用（Mr.J-- jQuery学习笔记(一)--初入jQuery）

$(arr).each(function (key, value) {
	 console.log(key, value);
	console.log(this);
});

对伪数组以及对象的操作，同样可以使用这个方法。在下面的map方法中也有举例。

map

遍历实例，把遍历到的数据传给回调使用，然后把回调的返回值收集起来组成一个新的数组返回

var arr = [1, 3, 5, 7, 9];
var obj1 = {0:"yjk",1:"333",2:"male",length:3};
var obj2 = {"name":"yjk","age":"33"};
var res = jQuery.map(arr, function (value, key) {
	 console.log(value, key);
	if(key === 2){
		return value;
	}
});
console.log(res);

同样可以对伪数组进行操作：

var res = jQuery.map(obj1, function (value, key) {
	 console.log(value, key);
	if(key === 2){
		return value;
	}
});
console.log(res);

对象操作：

var res = jQuery.map(obj2, function (value, key) {
	 console.log(value, key);
	if(key === 2){
		return value;
	}
});
console.log(res);

jQuery结构

first:function(){
            return this.eq(0);
        },
        last:function(){
            return this.eq(-1);
        },
        sort:[].sort,
        splice:[].splice,
        push:[].push,
        slice:[].slice,