zepto--学习demo日常2（add,addClass,append,clone,closest,concat,css）

来源：互联网发布：熊猫网络电视怎么用编辑：程序博客网时间：2024/06/05 07:03

HTML代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="http://zeptojs.com/zepto.js"></script></head><body><div id="example">    <p>top paragraph</p>    <ul>    <li>list item 1</li>    <li>list item 2</li>    <li>list item 3</li>    </ul>    <p>a paragraph</p>    <p class="pex">a paragraph</p></div><p>ouside p</p><script src="demo2.js"></script></body></html>

js部分

//add //将元素添加到当前匹配元素集合中$('li').add('p').css('background-color','red');//相当于$('li')+$('p')就是对两次匹配的元素集合进行concat操作//addClass()//为匹配元素集合添加类 多个类名用空格分隔$('li').addClass('newClass1 newClass2');//实质就是直接对匹配元素集合的class进行+操作//after,append,appendto,before//插入内容，可以是html字符串，dom节点，或者节点组成的数组。//其中append,appendto是内部插入//after,before是外部插入$('.pex').append('<span>111</span>');//clone()//通过深度克隆来复制集合中的所有元素，//不会复制数据和事件处理程序//closest//closest是寻找与自己最近的父节点，//不会遍历兄弟结点，只parent-parent-parent向上查询let elem = $('.pex').closest('p');elem.addClass('find');//concat//返回一个新数组(不是个zeopto对象)let elem1 = $('.pex').concat('li')//0:p.pex.find1:"li"$(elem1[1]).addClass('concat')//contents//获得每个匹配元素集合元素的子元素，//包括文字和注释节点。//（愚人码头注：.contents()和.children()方法类似，//只不过前者包括文本节点以及jQuery对象中产生的HTML元素。）let elements = $('ul').contents();//css$('li').css('background-color','red');//设置css$('li').css('background-color');//读取css$('li').css('background-color','');//value为空/null/undefined时那个css属性会被移除//多个属性设置，可以用键值对//多个属性读取可以用一个表示属性的数组一次性读取let css = $('li').css(['background','margin'])

阅读全文

0 0