jQuery源码学习之常用方法解析

最新推荐文章于 2025-05-29 16:56:25 发布

原创最新推荐文章于 2025-05-29 16:56:25 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ViewUI

jQuery源码专栏收录该内容

3 篇文章

订阅专栏

1.将其他类型转换为数组，一般想到的是toArray，我们看一下toArray的源码实现


toArray: function() {
		return slice.call( this, 0 );
	}

2.当没有传递参数时get将返回一个数组，数组中包括所有元素。


$div.get(0); //等同于$("div:first");
$div.get().length === $("div").length; //true

3.jQuery提供的slice和eq方法都是支持负数参数的。
slice(begin[,end])是从0开始索引的，包括begin不包括end。没有传递第二个参数默认返回从第一个参数(包括第一个参数所在的元素)到最后一个元素。


<html>
<p>index is 0 or -3</p>
<p>index is 1 or -2</p>
<p>index is 2 or -1</p>
</html>

$("p").slice(-1);//last
$("p").slice(1,2);//只返回index是1的p
$("p").slice(1);//返回index 〉=1的所有p

//可能看的还不够明了，直接上字符串好了
var str="string";
str.slice(1,2);//"t"
str.slice(1);//"tring"

ruby也有slice方法，但是ruby的slice方法的两个参数的意义是不同的，第二个参数是截取字符串的长度。当没有给出第二个参数，默认是截取一个字符。


irb(main):001:0> "string".slice(1,2)
=> "tr"
irb(main):002:0> "string".slice(1,2)
=> "t"
irb(main):003:0>

4.isFunction


//if $.type == "function",isFounction() is true;others are false
var function_demo = function(){
    alert("I am function");
};

var not_function_demo = [];
var $elem = $("div");

$.isFunction(function_demo);//true
$.type(function_demo); //"function"

$.isFunction(not_function_demo);//false
$.type(not_function_demo); //"array"

$.isFunction($elem);//false
$.type($elem); //"object"

5.isArray


var arr_demo = [];
$.type(arr_demo); //"array"
$.isArray(arr_demo); //true

6.end()
(1)不接受任何参数
(2)end()将链的源头返回，达到find( ".bar" )是在$( "ul.first" )中查找


<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $( "ul.first" )
    .find( ".foo" )
    .css( "background-color", "red" )
    .end()
    .find( ".bar" ) //third li
    .css( "background-color", "green" );
});
</script>
</head>
<body>
<ul class="first">
<li class="foo">list item 1</li>
<li class="bar">list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</body>
</html>