jQuery笔记--DOM篇

DOM操作笔记，供今后学习使用。

/*创建节点*/
var $body = $('body');
$body.on('click', function() {
    //通过jQuery生成div元素节点
    var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
    $body.append(div)
})

DOM内部插入

append()与appendTo()作为最后一个子元素插入
prepend()与prependTo()作为第一个子元素插入

/*把A插入B中*/
$(B).append(A)
$(B).prepend(A)
$(A).appendTo(B)
$(A).prependTo(B)

/*例子*/
//append
$("#bt1").on('click', function() {
    //.append(), 内容在方法的后面，
    //参数是将要插入的内容。
    $(".content").append('<div class="append">通过append方法添加的元素</div>')
})
//appendTo
$("#bt2").on('click', function() {
    //.appendTo()刚好相反，内容在方法前面，
    //无论是一个选择器表达式 或创建作为标记上的标记
    //它都将被插入到目标容器的末尾。
    $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
})
//prepend
$("#bt1").on('click', function() {
    //找到class="aaron1"的div节点
    //然后通过prepend在内部的首位置添加一个新的p节点
    $('.aaron1')
        .prepend('<p>prepend增加的p元素</p>')
})
//prependTo
$("#bt2").on('click', function() {
        //找到class="aaron2"的div节点
        //然后通过prependTo内部的首位置添加一个新的p节点
        $('<p>prependTo增加的p元素</p>')
            .prependTo($('.aaron2'))
    })

DOM外部插入

after()在指定元素之后插入insertAfter()
before()在指定元素之前插入insertBefore()

//before
$("#bt1").on('click', function() {
    //在匹配test1元素集合中的每个元素前面插入p元素
    $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
})
//insertBefore
$("#bt1").on('click', function() {
    //在test1元素前后插入集合中每个匹配的元素
    //不支持多参数
    $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
})

//after
$("#bt2").on('click', function() {
    //在匹配test1元素集合中的每个元素后面插入p元素
    $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')
})
//insertAfter
$("#bt2").on('click', function() {
        //在test2元素前后插入集合中每个匹配的元素
        //不支持多参数
        $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
    })

DOM获取

.get( [index ] )

get方法是获取的dom对象，也就是通过document.getElementById获取的对象
get方法是从0开始索引

.index()

如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置
如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1

DOM删除

empty()删除里面所有元素，但保留自身,数据不能恢复
remove()删除里面所有元素，不保留自身,数据不能恢复
detach()删除里面所有元素，不保留自身,数据可以恢复

empty方法
方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
empty不能删除自己本身这个节点

remove方法
该节点与该节点所包含的所有后代节点将同时被删除
提供传递一个筛选的表达式，删除指定合集中的元素

detach方法
$(“p”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

//通过empty处理
<div class="hello"><p>测试</p></div>
//通过empty处理
$('.hello').empty()

//结果：<p>测试</p>被移除
<div class="hello"></div>

//通过remove处理
$('.hello').remove()
//结果：<div class="hello"><p>慕课网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

//
$("button:last").click(function() {
    var p = $("p:first").detach();
    p.css('color','blue').text('p2通过detach处理后,点击该元素事件存在')
    $("body").append(p);
})

DOM拷贝

clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

//clone处理一
$("div").clone()   //只克隆了结构，事件丢失

//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

DOM替换

replaceWith(newContent)用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
replaceAll( target )用集合的匹配元素替换每个目标元素

replaceAll()和replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理

replaceAll()和replaceWith()功能类似，主要是目标和源的位置区别
replaceWith()与replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序
replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用
replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

//只克隆节点
//不克隆事件
$(".bt1").on('click', function() {
    //找到内容为第二段的p元素
    //通过replaceWith删除并替换这个节点
    $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
})
//找到内容为第六段的p元素
//通过replaceAll删除并替换这个节点
$(".bt2").on('click', function() {
    $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
})

DOM包裹

wrap()将元素用其他元素包裹起来，也就是给它增加一个父元素。

wrapAll()给集合中匹配的元素增加一个外面包裹HTML结构
将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素

wrapInner()将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素

unwrap()将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

wrap()

<p>p元素</p>

//给p元素增加一个div包裹

$('p').wrap('<div></div>')

//最后的结构，p元素增加了一个父div的结构
<div>
    <p>p元素</p>
</div>

$('div').unwarp();

//结果
<p>p元素</p>

wrapAll()

<p>p元素</p>
<p>p元素</p>

$('p').wrapAll('<div></div>')

<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

wrapInner()

<p>p元素</p>
<p>p元素</p>

$('p').wrapInner('<div></div>')

<p>
    <div>p元素</div>
</p>
<p>
    <div>p元素</div>
</p>