jquery 相似元素的区别

文中所有查找元素的操作均以此图为例 

 

1.绑定事件on和click

$('.test').click(function(){})
$('.test').on('click','span',function(){})

on和click都可用于事件的绑定，但on可用于动态创建的元素，click只能用于当前页面存在的元素。

2.find和children

find和children都可用于查找子元素。但find可用于查找后代元素（子，孙，重孙等），而children只能用于查找子元素（子）

$('.A').children()  //B C
$('.A').find('div') //B D E C F

3.parent和parents

parent和parents都可用于查找父元素，但parents可用于查找祖先元素（父，祖父，曾祖父），而parent只能用于查找父元素（父）

$('.E').parent() //B
$('.E').parents() //B A

4.append和prepend

<div class="test">
      <p class="test-word">这是一段测试文字，用来标志位置</p>
</div>

//插入代码
$('.test').append('<p>在被选元素的结尾插入内容</p>')
$('.test').prepend('<p>在被选元素的开头插入内容</p>') 

 元素效果图：

 

5.before和after

<div class="test">
    <p class="test-word">这是一段测试文字，用来标志位置</p>
</div>

//插入代码操作
$('.test').after('<p >在被选元素的结尾插入内容</p>')
$('.test').before('<p >在被选元素的开头插入内容</p>') 

元素效果图：