zepto中的DOM操作

zepto中的DOM操作

插入操作

append appendTo 插在最后一个子元素后面

prepend prependTo 插在第一个子元素前面

after insertAfter 插在该元素后面，作为兄弟元素

before insertbefore 插在该元素后面，作为兄弟元素

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>demo</name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"bodydiv id="parent">
        ="child1">child1div>

    script src="zepto.min.js"></script>
        var child2=$("<div id='child2'>child2<div>);
        $(#parent).append(child2);
    html>

);
        child2.appendTo($());
    >

).prepend(child2);
    >

);
        child2.prependTo($(>

).after(child2);
    >

);
        child2.insertAfter($(>

).before(child2);
    >

);
        child2.insertBefore($(>

删除 remove/empty

remove 删除元素及其子元素

empty 清空元素的内容，该元素本身不删除

ulli>
            a href="#">链接a>
        $(li).remove();

    >

).empty();
    >

复制节点

clone 复制节点，但如果原来的绑定过事件，复制出来的元素不会绑定事件

span>删除ul li).click(function(){
            $(this).clone().appendTo($(ul));
        })
    >

替换节点 replaceEWith

p>我是p元素p).replaceWith(<span>我被替换啦</span>);
    >

包裹节点 wrap wrapAll

wrap 每个p元素外面都包裹一个div

wrapAll 所有p元素外面统一裹一个div

>我是p元素1>我是p元素2>我是p元素3>我是p元素4).wrap(<div></div>>

).wrapAll(<div id='parent'></div>>

zepto的属性与样式操作

属性操作 attr removeAttr

>我是div
        console.log($(div).attr(title));//获取属性 undefined
,title1);设置单个属性
        console.log($(获取属性 title1
).attr({data-x:dataXdata-ydataY});设置多个属性
获取属性 dataX
).removeAttr(删除单个属性
data-y title删除多个属性
获取属性 undefined
    >

添加样式 addClass

style
        .pink{colorpink;}
        .bigfont-size30px}
    

        $().addClass(添加单个样式
        $(pink big快速添加多个样式
big链式操作添加多个样式
    >

删除样式 removeClass

不加参数会删除所有样式

).removeClass(删除样式
).removeClass();删除所有样式
    >

切换样式

toggle show和hide的切换（显示隐藏）

toggleClass

button ="btn">显示隐藏button="btn2">切换样式#btn).toggle();显示隐藏切换
        })

        $(#btn2).toggleClass(样式添加删除
        })
    >

判断是否含有某个样式 hasClass

class="pink").hasClass());
        console.log($(>

zepto遍历节点

next 紧挨着的下一个兄弟元素

="one">我是onep ="p">我是p="div"#one).next().html(我是two找下一个兄弟元素
).next().html(找下一个兄弟元素，且是div
    >

="p1">我是p1="p2">我是p2).prev().html(我是one的前一个元素找上一个兄弟元素
).prev(我是one的前一个元素，并且是p找上一个兄弟元素，且是p
    >

siblings 获取前面后面的所有兄弟元素

).siblings().html(我是one的兄弟元素>

parent 直接父元素

parents 父元素、祖父元素等

="p3">
                ="c">我是child#c).parent());X [div#p3,selector: Array(1)]
).parents());X(5) [div#p3,div#p2,div#p1,body,html,selector: Array(5)]
    >

zepto中css-DOM操作

样式有多个单词，可以使用连字符，也可以使用驼峰法

css width height


        .bgBluebackground-colorlightblue>div.div).css(修改单个样式
连字符
backgroundColor驼峰法
).css({
            
        });修改多个样式
).width(100修改宽度
).height(修改高度

    >

zepto中的DOM操作

相关文章