jQuery DOM 元素方法

Posted 2022-12-22 orochiz-

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>