jQuery基础一

浏览数：25 / 时间：2015年06月09日

$.fn.get([index])方法

获取匹配的DOM元素。

index参数：非负数、负数、为空(不传参数、null、undefined)。

 1 <ul>
 2     <li>0</li>
 3     <li>1</li>
 4     <li>2</li>
 5     <li>3</li>
 6 </ul>
 7 <script src="jQuery.js"></script>
 8 <script>
 9     $(function(){
10         var $Li = $(‘li‘);
11         console.log($Li.get(1)); //<li>1</li> index为非负数返回索引为index的DOM对象
12         console.log($Li.get(-1)); //<li>3</li> index为负数返回索引为index+length的DOM对象
13         console.log($Li.get()); //[1，2，3，4] index为空返回所有的DOM对象构成的类数组集合
14     });
15 </script>

$.fn.pushStack( $() )

入栈。原jQuery对象.pushStack(入栈的jQuery对象)。jQuery对象的入栈操作。

该操作执行后返回入栈的jQuery对象，并且该入栈的jQuery对象的prevObject属性指向原jQuery对象。

默认prevObject属性指向$(selector, context)的$(context)对象，默认的context是document

NOTE：参数务必传入jQuery对象。

1 <div>div</div>
2 <span>span</span>
3 <script src="jQuery.js"></script>
4 <script>
5     $(function(){
6         console.log($(‘div‘, ‘body‘)); // [0: ‘div‘, prevObject: $(‘body‘)]
7         console.log($(‘div‘).pushStack($(‘span‘))); // [0: ‘span‘, prevObject: $(‘div‘)]
8     });
9 </script>

$.fn.end()

弹栈。返回该jQuery的prevObject属性所指向的jQuery对象，没有改属性就返回空的jQuery对象。

 1 <div>div</div>
 2 <span>span</span>
 3 <script src="jQuery.js"></script>
 4 <script>
 5     $(function(){
 6         console.log($(‘div‘, ‘body‘)); // [0: ‘div‘, prevObject: $(‘body‘)]
 7         console.log($(‘div‘).pushStack($(‘span‘)).end()); // [0: ‘div‘, prevObject: $(‘body‘)]
 8         console.log($(‘div‘).pushStack($(‘span‘)).end() == $(‘div‘, ‘body‘)); //false 注意
 9         console.log($(‘div‘).pushStack($(‘span‘)).end().end()); //[0: ‘document‘]
10     });
11 </script>

$.fn.slice([start][,end])

slice方法调用了入栈的方法。

无参数返回所有的jQuery对象，并且prevObject指向原jQuery对象。

有参数时截取jQuery对象类似数组的slice方法，但是prevObject指向原jQuery对象。

 1 <div>div0</div>
 2 <div>div1</div>
 3 <div>div2</div>
 4 <div>div3</div>
 5 <script src="jQuery.js"></script>
 6 <script>
 7     $(function(){
 8         var $Div = $(‘div‘);
 9         console.log($Div.slice());// [0:div0,1:div1,2:div2,3:div3,prevObject:$(‘div‘)]
10         console.log($Div.slice(0,1));//[0:div0,prevObject:$(‘div‘)]
11         console.log($Div.slice(2));//[0:div2,1:div3,prevObject:$(‘div‘)]
12         console.log($Div.slice(-2,-1));//[0:div2,prevObject:$(‘div‘)]
13         console.log($Div.slice(-2));//[0:div2,1:div3,prevObject:$(‘div‘)]
14     });
15 </script>

$.fn.first()、$.fn.last()、$.fn.eq(index)

$.fn.first() = $.fn.eq(0)

$.fn.last() = $.fn.eq(-1)

$.fn.eq(index)调用了入栈方法；返回对应索引的jQuery对象。参数可以为负数。

 1 <div>div0</div>
 2 <div>div1</div>
 3 <div>div2</div>
 4 <div>div3</div>
 5 <script src="jQuery.js"></script>
 6 <script>
 7     $(function(){
 8         var $Div = $(‘div‘);
 9         console.log($Div.eq(‘-1‘));// [0:div3,prevObject:$(‘div‘)] 
10         console.log($Div.eq(-1));// [0:div3,prevObject:$(‘div‘)]
11     });
12 </script>