1.index()返回当前元素在其兄弟元素中的索引值
1
2
3
console.log($('.item').index()); //1
2.size() 返回被 jQuery 选择器匹配的元素的数量。
length属性也可以返回匹配的元素的数量
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标签
');//创建节点
$('.box').append($p);//将p节点添加到box元素的末尾
//添加子元素到当前元素的起始位置
var $h3 = $('我是添加的h3标签
');
$('.box').prepend($h3); //将h3节点添加到box元素的开头
6.添加兄弟元素 before()/after()
//在当前元素的前面插入兄弟元素
var $h1 = $('我是添加的h1标签
');
$('.box').before($h3);//#h3在前
//在当前元素的后面插入兄弟元素
var $h4 = $('我是添加的h4标签
');
$('.box').after($h4); //#h4在后
7.将当前元素作为子元素添加到 目标元素中 appendTo()
var $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,都会被复制
不关我的事
我是被复制的p元素
it has nothing to do with me
$(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才会被复制
不关我的事
我是被复制的p元素
it has nothing to do with me
$(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
hello world2
var p = document.querySelector('#pp');
console.log(p.cloneNode(false));
//
console.log(p.cloneNode(true));
//hello world2