jQuery基础(二)—DOM篇

jQuery节点创建与属性的处理

//通过jQuery生成div元素节点
        var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
        $body.append(div)

DOM内部插入append()与appendTo()

append（）是受，appendTO（）是攻。

DOM外部插入after()与before()

append是一起挤挤，before，after是自己带个小板凳

DOM内部插入prepend()与prependTo()

(爹).prepend(大儿子)　　　主动收一个大儿子

(大儿子).prependto（爹）　　　主动来认爹当大儿子

DOM外部插入insertAfter()与insertBefore()

DOM节点删除之empty()的基本用法

$("button").on('click', function() {
        //通过empty移除了当前div元素下的所有p元素
        //但是本身id=test的div元素没有被删除
        $("#test").empty()
    })

DOM节点删除之remove()的有参用法和无参用法

remove会删除div，empty只是清空了div的内容，div本身还存在。就好像empty只是把可乐倒了装可乐的瓶子还留着，remove直接把可乐瓶一起丢了

DOM节点删除之保留数据的删除操作detach()

DOM拷贝clone()

detach是剪切的话，clone就是复制了　

DOM替换replaceWith()和replaceAll()

with是受　 a.with.b 就是a被b替换

all是攻　　　b.all.a　就是b把a替换

DOM包裹wrap()方法

在集合中匹配的每个元素周围包裹一个HTML结构

DOM包裹unwrap()方法

.remove()是自杀，.empty()是自宫， 而这个unwrap就是自脱衣

DOM包裹wrapAll()方法

用wrap也可以给所有p元素增加div，但不是同一个div。而wrapALL能给所有p元素增加一个共同的div

DOM包裹wrapInner()方法

记住：wrap()穿外套，wrapInner()穿内衣！

$(".aaron1").on('click', function() {
        //给所有class=right1的div元素，增加内部包裹父容器p
       $('.right1').wrapInner('<p></p>');
    })

jQuery遍历之children()方法

 $("#bt2").click(function() {
        //找到所有class=div的元素
        //找到其对应的子元素ul，然后筛选出最后一个，给边宽加上颜色
        $('.div').children(':last').css('border', '3px solid blue')
    })

.children() 找儿子
之前的：
.detach() 隐身
.remove 自杀
.empty 身体被掏空
.clone 复制 （true全复制 false 浅复制，无事件）
.replaceWith 删除并替换节点（结合.replaceAll()来记）
.wrap 每个人加个爸爸
.unwrap 爸爸没了
.wrapAll 所有人加个爸爸
.wrapAll（function）每个人加个爸爸
.wrapInner 加个儿子

jQuery遍历之find()方法

    $("button:last").click(function() {
        //找到所有p元素，然后筛选出子元素是span标签的节点
        //改变其字体颜色
        var $spans = $('span');
        $("p").find($spans).css('color', 'red');
    })

jQuery遍历之parent()方法

.children() 找儿子

.find() 找后代

jQuery遍历之parents()方法

    $("button:last").click(function() {
        //找到当前元素的所有祖辈元素,筛选出class="first-div"的元素
        //并且附上一个边
        $('.item-b').parents('.first-div').css('border', '2px solid blue')
    })

jQuery遍历之closest()方法

.closest(),首先从本身开始向上匹配，若匹配到符合要求的第一个，即停止匹配。

.parents（），从元素父级一直向上匹配，找出所有匹配的符合要求元素。

jQuery遍历之next()方法

    $("button:last").click(function() {
        //找到所有class=item-3的li
        //然后筛选出第一个li，加上蓝色的边
       $('.item-2').next(':first').css('border', '1px solid blue')
    })

jQuery遍历之prev()方法

    $("button:last").click(function() {
        //找到所有class=item-2的li
        //然后筛选出最后一个，加上蓝色的边
       $('.item-3').prev(':last').css('border', '1px solid blue')
    })

jQuery遍历之siblings()

  $("button:last").click(function() {
        //找到class=item-2的所有兄弟节点
        //然后筛选出最后一个，加上蓝色的边
       $('.item-2').siblings(':last').css('border', '2px solid blue')
    })

jQuery遍历之add()方法

    $("button:first").click(function() {
         //把p元素添加到li的合集中
         $('li').add('p').css('background', 'red')
    })

jQuery遍历之each()

    $("button:first").click(function() {
        //遍历所有的li
        //修改每个li内的字体颜色
        $("li").each(function(index, element) {
            $(this).css('color','red')
        })

    })

.html(),.text(),.val()的区别：

.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。