技术文章 | Technical articles

jQuery源码笔记(二、持续更新)

一、序号的问题

1.1 eq()

举例:

<div>

<p></p>

<p></p>

<p></p>

<p></p>

</div>

<div>

<p></p>

<p></p>

10  <p></p>

11  <p></p>

12 </div>

13 <div>

14  <p></p>

15  <p></p>

16  <p></p>

17  <p></p>

18 </div>

19 <div>

20  <p></p>

21  <p></p>

22  <p></p>

23  <p></p>

24 </div>

25 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

26 <script type="text/javascript">

27 // 点击div让它的第一个儿子变色

28 $("div").click(function() {

29  $(this).children().eq(0).css("background-color", "red");

30 })

 

eq(): 选中元素大队列的排名,与亲兄弟的排名没有直接关系。

eq(): 选中元素不同, 序号也是不相同的。

<div>

<p></p>

<p></p>

<p></p>

<p></p>

</div>

<div id="box1">

<p></p>

<p></p>

10  <p>我想变红</p>

11  <p></p>

12 </div>

13 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

14 <script type="text/javascript">

15 $("p").eq(6).css("color", "red");

16 $("#box1 p").eq(2).css("color", "blue");

17 $(".teshu").eq(3).css("color", "orange");

18 </script>

 

1.2 index()

index(): 表示亲兄弟的排名,无视亲兄弟的类型。只要是同一个父节点就是亲兄弟。


DOM结构:

<div>

<ul>

 <li>1</li>

</ul>

<h3>h3</h3>

<p></p>

<p></p>

<p id="teshu">输出亲兄弟的排名</p>

<p></p>

10 </div>

 

执行代码:

// 点击teshu输出亲兄弟的排名

$("#teshu").click(function() {

console.log($(this).index());

}) 


index()的值非常稳定,无视选择器的选择 都是弹出2

DOM结构:

<div>

<p></p>

<p></p>

<p></p>

<p></p>

</div>

<div id="box1">

<p></p>

<p></p>

10  <p>弹出亲兄弟的排名</p>

11  <p></p>

12 </div>

执行代码:

// 弹出亲兄弟的排名

$("p").click(function() {

console.log($(this).index());

})

$("#box1 p").click(function() {

console.log($(this).index());

})

10 

11 $(".teshu").click(function() {

12  console.log($(this).index());

13 })

 

对应思想:编程中比较常用的一种就是对应思想。

举例:

<div id="box">

<p></p>

<p></p>

<p></p>

<p></p>

</div>

<div id="box1">

<p></p>

<p></p>

10  <p></p>

11  <p></p>

12 </div>

13 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

14 <script type="text/javascript">

15 // 点击box中的p 让对应的box1中的p改变颜色

16 $("#box p").click(function() {

17  console.log($(this).index());

18  $("#box1 p").eq($(this).index()).css("background-color", "red");

19 })

20 </script>

关注微信公众号“icketang”,获取最新前端资讯,学习资料  

微信个人号二维码.jpg
完整笔记、web前端视频教程
,请添加微信“haomei0452”免费领取 


B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg


上一篇文章: jQuery源码笔记(一、持续更新)
下一篇文章: jQuery源码笔记(三、持续更新)

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>