jQuery 源码学习之路五（jQuery api 核心==>DOM 元素方法）

发表于

.get(), .index(), .toArray()

1. 核心==>DOM 元素方法 ==>.get( index )

index 从0开始计数，用来确定获取哪个元素。
描述: 通过jQuery对象获取一个对应的DOM元素。
.get() 方法允许我们直接访问jQuery对象中相关的DOM节点。 如果index的值超出范围 - 小于元素数量的负数或等于或大于元素的数量 - 那么它将返回undefined。

(1)用法：
1
2
3
4
5
6
7
<div id="txt">txt</div>
<script>
	var a = $("#txt").get(0);
	var b = $("#txt")[0];
	console.log(a);   //<div id="txt">txt</div>
	console.log(b);		//<div id="txt">txt</div>
</script>
(2)源码：
1
2
3
4
5
6
7
8
9
10
11
get: function( num ) {
	// Return all the elements in a clean array
	//如果没有传入 num 值，则返回原对象
	if ( num == null ) {
		return slice.call( this );
	}
	// Return just the one element from the set
	// 若 num 小于 0，则返回类数组中倒数的第 num 位，否则返回正数的第 num 位的元素
	// 注意，如果index的值超出范围：小于元素数量的负数或等于或大于元素的数量，那么它将返回undefined。
	return num < 0 ? this[ num + this.length ] : this[ num ];
}

2. 核心==>DOM 元素方法 ==>.index()

描述: 从匹配的元素中搜索给定元素的索引值，从0开始计数。

.index()

这个方法不接受任何参数。

例一：
1
2
3
4
5
6
7
8
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<script>
  console.log($("#bar").index());   // 1
</script>
.index( selector )

selector 一个选择器，代表一个jQuery对象，将会从这个对象中查找元素。

例二：
1
2
3
4
5
6
7
8
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<script>
   console.log($("li").index($("#baz")));   // 2
</script>
.index( element )

element 将要用于查找的DOM元素，或者jQuery对象中的第一个元素。

例三：
1
2
3
4
5
6
7
8
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<script>
	console.log($("#baz").index("li"));   // 2
</script>
(2)源码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Determine the position of an element within the set
index: function( elem ) {
	// No argument, return index in parent
	//没有传入参数，对应例一。在这个对象及该对象的父节点存在的条件下，返回该对象前面所有元素的长度，否则返回 -1;
	if ( !elem ) {
		return ( this[ 0 ] && this[ 0 ].parentNode ) ? this.first().prevAll().length : -1;
	}
	// Index in selector
	// 若传参类型是字符串，对应例三。jQuery( elem ).indexOf(this[0])，在 elem 中找到当前对象的位置
	if ( typeof elem === "string" ) {
		return indexOf.call( jQuery( elem ), this[ 0 ] );
	}
	// Locate the position of the desired element
	// 若传参是个 jquery 对象，对应例二。this.indexOf(elem)
	return indexOf.call( this,
		// If it receives a jQuery object, the first element is used
		//如果是jQuery对象作为参数，那么获取参数第一个对象在调用选择器中的位置
		elem.jquery ? elem[ 0 ] : elem
	);
}

3. 核心==>DOM 元素方法 ==>.toArray()

这个方法不接受任何参数。
描述: 返回一个包含jQuery对象集合中的所有DOM元素的数组。

(1)用法：
1
2
3
4
5
6
7
8
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<script>
  console.log($("li").toArray());   //[li#foo, li#bar, li#baz]   所有的 dom 元素会在一个标准的数组中
</script>
(2)源码：
1
2
3
4
5
var slice = arr.slice
toArray: function() {
	//这个地方就是借鸡生蛋[!apply的文章链接]，调用Array.prototype.slice 的方法，把传入的对象转化为数组。
	return slice.call( this );
}

真好，又完成一小步，这样进步着，很充实，感觉很好。给自己点鸡汤，走在未来的路上。啦啦啦。。。
2017-11-24