1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> 7 </head> 8 <body> 9 <div> 10 <span id="one" class="test-find test-filter"> 11 <li>here is outter 12 <span id="two" class="test-find test-filter"> 13 <li>here is middle 14 <span id="three" class="test-find test-filter"> 15 <li>here is inner</li> 16 </span> 17 </li> 18 </span> 19 </li> 20 </span> 21 </div> 22 23 <script> 24 25 /** 26 * filter: 在当前已经选中的元素当中，选中符合要求的元素 27 * 假如：当前 $("xxx") 已经选中的 3 个元素 (ele1,ele2,ele3)，那么 $("xxx").filter("yyy") 就是 28 * 在这一共 3 个元素 (ele1,ele2,ele3) 中，选出符合要求的元素（即使全部都符合要求，最多也只有 3 个) 29 */ 30 31 /** 32 * find: 在当前已经选中的元素当中，按顺序依次取出这些元素， 33 * 对这些元素当中的每一个的子孙元素都进行遍历，找到符合要求的元素 34 * 假如：当前 $("xxx") 已经选中的 3 个元素 (ele1,ele2,ele3)，那么 $("xxx").find("yyy") 就是 35 * 依次取出 (ele1,ele2,ele3) 然后对取出的这 3 个元素的所有子孙元素进行遍历,过程类似下面这样： 36 * 1、遍历 ele1 的所有子孙元素，ele1 中可能包含成千上万个子孙元素，在这成千上万个子孙元素中找到符合要求的元素保存下来 37 * 2、遍历 ele2 的所有子孙元素，ele2 中可能包含成千上万个子孙元素，在这成千上万个子孙元素中找到符合要求的元素保存下来 38 * 3、遍历 ele3 的所有子孙元素，ele3 中可能包含成千上万个子孙元素，在这成千上万个子孙元素中找到符合要求的元素保存下来 39 * 4、将以上步骤 1、2、3 所保存下来的元素整合起来一起返回 40 */ 41 42 /** 43 * 详情见 js权威指南 章节 19.8 44 * 注释说明：(x)------》(y): 表示 开始时有x个元素，进过处理后，返回y个元素 45 */ 46 47 console.log('$("div>span)\n',$("div>span")); 48 // 开始时候： 一个元素 span 49 // 结束时候： 一个元素 span 50 // 选择div子元素中的span元素， 选中元素 #one ，这一共一个元素: (1)------》(1) 51 52 console.log('$("div>span").find(".test-find")\n',$("div>span").find(".test-find")); 53 // 开始时候： 一个元素 span 54 // 结束时候： 两个元素 #two #three 55 // 先选择div子元素中的span元素， 选中元素 #one 56 // 然后在 #one 元素的子孙元素中 选择类名为 .test-find 的元素， 选中元素 #two 和元素 #three ,这一共两个元素： (1)------》(2) 57 58 console.log('$("div>span").find(".test-find").filter("li")\n',$("div>span").find(".test-find").filter("li")); 59 // 开始时候： 一个元素 span 60 // 中间时候: 两个元素 #two #three 61 // 结束时候： 零个元素 62 // 先选择div子元素中的span元素， 选中元素 #one 63 // 然后在 #one 元素的子孙元素中 选择类名为 .test-find 的元素， 选中元素 #two 和元素 #three 64 // 最后在 #two 和 #three 这一共两个元素中选择 <li> ,选中 零元素， 因为 #two 和 #three 都是 <span> 元素，所以在<span>中找不到<li> ： 1-----》(2)------》(0) 65 66 67 console.log('$("div>span)\n',$("div>span")); 68 // 开始时候： 一个元素 span 69 // 结束时候： 一个元素 span 70 // 选择div子元素中的span元素， 选中 #one 一共一个元素: (1)------》(1) 71 72 console.log($("div>span").filter(".test-filter")); 73 // 开始时候： 一个元素 span 74 // 结束时候： 一个元素 #one 75 // 先选择div子元素中的span元素， 选中元素 #one 76 // 然后在 #one 这一共一个元素中选择类名为 .test-filter 的元素，选中 #one 一共一个元素：(1)------》(1) 77 78 console.log($("div>span").filter(".test-filter").find("li")); 79 // 开始时候： 一个元素 span 80 // 中间时候: 一个元素 #one 81 // 结束时候： 三个元素 82 // 先选择div子元素中的span元素， 选中元素 #one 83 // 然后在 #one 这一共一个元素中选择类名为 .test-filter 的元素，选中 #one 84 // 最后在 #one 元素的子孙元素中 选择 <li> ，选中 <li>here is outter</li>、<li>here is middle</li>、<li>here is inner</li> ，这一共三个元素：（1）------》(1)------》(3) 85 86 </script> 87 88 </body> 89 </html>
运行结果：
查看更多关于【Jquery】的文章
