标签：

1.index()返回当前元素在其兄弟元素中的索引值 <div class="box"> <p>1</p> <div class="item">2</div> <p>3</p> </div> console.log($('.item').index()); //1 2.size() 返回被 jQuery 选择器匹配的元素的数量。

length属性也可以返回匹配的元素的数量

<script> $(function(){ var $p = $("p") console.log($p.length) //3 console.log($p.size()) //3 }) </script> 3.get(index) 方法获得由选择器指定的 DOM 元素。

与eq()的区别：eq()获取到的是jQuery对象，而get()获取到的是原生的dom对象

$("p").get(0); 4.end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态 //选中div元素下面的p元素并为其设置字体颜色，并重新选中div元素设置边框 $('div').find('p').css('color','red').end().css('border','2px solid red'); 5.添加子元素 append()/prepend()

参数：jQuery创建的节点
功能类似原生js的appendChild()

//添加子元素到当前元素的末尾 var $p = $('<p>我是添加的p标签</p>');//创建节点 $('.box').append($p);//将p节点添加到box元素的末尾 //添加子元素到当前元素的起始位置 var $h3 = $('<h3>我是添加的h3标签</h3>'); $('.box').prepend($h3); //将h3节点添加到box元素的开头 6.添加兄弟元素 before()/after() //在当前元素的前面插入兄弟元素 var $h1 = $('<h1>我是添加的h1标签</h1>'); $('.box').before($h3);//#h3在前 //在当前元素的后面插入兄弟元素 var $h4 = $('<h4>我是添加的h4标签</h4>'); $('.box').after($h4); //#h4在后 7.将当前元素作为子元素添加到 目标元素中 appendTo() var $p = $('<p>我是添加的p标签</p>'); $p.appendTo($('.box')); 8.清空被选元素所有子节点和内容

不推荐使用html()来清除内容，有可能造成内存泄漏
原理：通过循环的方式不停地调用原生removeChild()方法来移除第一个子元素和绑定的事件，直到清空为止

$('.box').empty(); //清空当前元素的所有子元素和事件 9.移除当前元素 remove()

原生的removeChild()是移除某个子元素，而这个是移除元素自身
不过底层还是利用了原生的removeChild()方法

$('.box').remove();//移除当前元素 10.克隆节点 clone()

参数：布尔值
false:默认，会克隆元素的本身和他的子节点，不包括js或者jquery代码添加的事件
true:深克隆，除了克隆元素的本身和他的子节点，还包括js或者jquery代码添加的事件

//基本用法 var $c = $('.box>p').clone();//克隆box下所有的p标签 $('.box').after($c);//将克隆的元素插入到box的后面

关于深复制和浅复制
标签内添加的事件监听无论是true还是false，都会被复制

<div class="box"> <p>不关我的事</p> <p id="p2" onclick="sayHello()">我是被复制的p元素</p> <p>it has nothing to do with me</p> </div> $(function() { $('#btn').click(function() { var $c1 = $('#p2').clone(true);//点击会触发sayHello() var $c2 = $('#p2').clone(false);//点击会触发sayHello() $c1.appendTo($('.box')); $c2.appendTo($('.box')); }) }) function sayHello() { alert('hello'); }

通过js或者jquery代码添加的事件监听只有true才会被复制

<div class="box"> <p>不关我的事</p> <p id="p2">我是被复制的p元素</p> <p>it has nothing to do with me</p> </div> $(function() { $('#btn').click(function() { $('#pp').click(sayHello); var $c1 = $('#p2').clone(true);//点击会触发sayHello() var $c2 = $('#p2').clone(false);//点击无法触发sayHello() $c1.appendTo($('.box')); $c2.appendTo($('.box')); }) }) function sayHello() { alert('hello'); }

相关知识对比：
原生cloneNode()的方法
参数：布尔值
true:深复制，包括元素本身和他的后代元素
false:默认，只复制元素本身，而不包含子元素（标签和文本）
坑爹的W3C不解释，查文档只推荐MDN

<p id="pp">hello world2</p> var p = document.querySelector('#pp'); console.log(p.cloneNode(false)); //<p id="pp"></p> console.log(p.cloneNode(true)); //<p id="pp">hello world2</p>

jQuery DOM 元素方法