jQuery源码笔记（二、持续更新）

一、序号的问题
1.1 eq()
举例：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

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

28 $(“div”).click(function() {

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

30 })

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

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

1

2

3

4

5

6

7

8

9

10

我想变红

11

12

13

14

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

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

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

18

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

DOM结构：

1

2

3

• 1

• 4

  5

  h3

  6

  7

  8

  输出亲兄弟的排名

  9

  10

  执行代码：

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

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

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

  4 })

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

  DOM结构：

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  弹出亲兄弟的排名

  11

  12

  执行代码：

  1 // 弹出亲兄弟的排名

  2 $(“p”).click(function() {

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

  4 })

  5

  6

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

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

  9 })

  10

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

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

  13 })

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

  举例：

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  13

  14

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

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

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

  18 KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲box1 p").eq((this).index()).css(“background-color”, “red”);

  19 })

  20