jQuery基础一

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

获取匹配的DOM元素。

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

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

 

$.fn.pushStack( $() )

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

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

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

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

<div>div</div>
<span>span</span>
<script src="jQuery.js"></script>
<script>
    $(function(){
        console.log($('div', 'body')); // [0: 'div', prevObject: $('body')]
        console.log($('div').pushStack($('span'))); // [0: 'span', prevObject: $('div')]
    });
</script>

 

$.fn.end()

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

<div>div</div>
<span>span</span>
<script src="jQuery.js"></script>
<script>
    $(function(){
        console.log($('div', 'body')); // [0: 'div', prevObject: $('body')]
        console.log($('div').pushStack($('span')).end()); // [0: 'div', prevObject: $('body')]
        console.log($('div').pushStack($('span')).end() == $('div', 'body')); //false 注意
        console.log($('div').pushStack($('span')).end().end()); //[0: 'document']
    });
</script>

 

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

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

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

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

<div>div0</div>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<script src="jQuery.js"></script>
<script>
    $(function(){
        var $Div = $('div');
        console.log($Div.slice());// [0:div0,1:div1,2:div2,3:div3,prevObject:$('div')]
        console.log($Div.slice(0,1));//[0:div0,prevObject:$('div')]
        console.log($Div.slice(2));//[0:div2,1:div3,prevObject:$('div')]
        console.log($Div.slice(-2,-1));//[0:div2,prevObject:$('div')]
        console.log($Div.slice(-2));//[0:div2,1:div3,prevObject:$('div')]
    });
</script>

 

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

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

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

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

<div>div0</div>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<script src="jQuery.js"></script>
<script>
    $(function(){
        var $Div = $('div');
        console.log($Div.eq('-1'));// [0:div3,prevObject:$('div')] 
        console.log($Div.eq(-1));// [0:div3,prevObject:$('div')]
    });
</script>