find方法在项目中经常用到,让我们一起研究下!

html代码:

<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

js代码:

$(".box")
.find("ul")
.find("li")
.css({width:"100px",height:"100px",background:"red"});

得到以下效果:

重拾jquery之find方法_find方法

find():的意思是向下查找元素,返回的是一个jq对象,这里为什么把向下标记了呢,继续往下看,我们分别打印下:

$(".box")
.find("ul")
.find("li")
.css({width:"100px",height:"100px",background:"red"});

25 console.log( $(".box") );
26 console.log( $(".box").find("ul") );
27 console.log( $(".box").find("ul").find("li") );

打印结果:重拾jquery之find方法_jq find 方法_02

我们会看到每一个打印结里边都会有一个prevObject属性,直译:前置对象;我们可以发现打印$(".box")的时候,它的前置对象是:document;当打印$(".box").find("ul")时候,它的前置对象是:类名是.box的div元素;当打印$(".box").find("ul").find("li")时,它的前置对象是:ul  !

也就说我们可以通过prevObject这个属性来查找上一个jq对象,一直可查到document:

重拾jquery之find方法_jq find_03

重拾jquery之find方法_find方法_04

重拾jquery之find方法_jquery find方法_05

jquery中的end()回退方法,原理就是利用prevObject来实现的!!!