目录
Zepto基本选择器
基础选择器
ID选择器
Zepto('#elementId');
此代码会选取ID为elementId的DOM元素。
类选择器
Zepto('.className');
选取所有拥有类名为className的元素。
标签选择器
Zepto('tagName');
选取所有指定标签名（如div, span）的元素。
通用选择器
Zepto('*');
选取页面上的所有元素。
层次选择器
后代选择器
Zepto('ancestor descendant');
选取所有ancestor元素下的descendant元素，无论嵌套多少层。
子元素选择器
Zepto('parent > child');
选取所有作为parent直接子元素的child元素。
相邻兄弟选择器
Zepto('prev + next');
选取紧接在prev元素之后的同级next元素。
一般兄弟选择器
Zepto('prev ~ siblings');
选取所有在prev元素之后的同级siblings元素。
属性选择器
属性存在选择器
Zepto('[attribute]');
选取所有具有指定属性的元素，不论属性值为何。
属性值等于选择器
Zepto('[attribute=value]');
选取属性attribute值等于value的元素。
属性值包含选择器
Zepto('[attribute*="value"]');
选取属性attribute值中包含value字符串的元素。
属性值开始于选择器
Zepto('[attribute^="value"]');
选取属性attribute值以value开头的元素。
属性值结束于选择器
Zepto('[attribute$="value"]');
选取属性attribute值以value结尾的元素。
组合选择器
逗号分隔选择器
Zepto('selector1, selector2, ...');
同时选取多个选择器匹配的所有元素。
代码示例分析
假设我们有以下HTML结构：
<div id="container">
<p class="text">Hello</p>
<p class="text selected">World</p>
<div>
<span class="hidden">Hidden Text</span>
</div>
</div>
示例1：选取所有.text类的元素
var texts = Zepto('.text');
console.log(texts.length); // 输出2，因为有两个<p>元素拥有.text类
示例2：选取ID为container的元素下的直接子元素p
var directPChildren = Zepto('#container > p');
console.log(directPChildren.length); // 输出2
示例3：选取拥有selected类的元素
var selected = Zepto('.selected');
console.log(selected.text()); // 输出"World"
Zepto DOM操作
Zepto.js 提供了一系列丰富的DOM操作方法，使得开发者能够方便快捷地处理网页文档对象模型（DOM）。
1. 查找元素
子元素查找
.find(selector)：在当前集合中每个元素的后代中查找符合selector的元素。
Zepto('#container').find('.item'); // 找到id为container元素内的所有class为item的子孙元素
后代元素查找
.children([selector])：获取当前集合中每个元素的直接子元素，可选参数selector用于过滤子元素。
Zepto('#parent').children(); // 获取id为parent元素的所有直接子元素
Zepto('#parent').children('.active'); //
获取id为parent元素下所有拥有.active类的直接子元素
2. 创建元素
$('<tag>', [attributes])或Zepto.fragment(htmlString[, wrapElement])：创建新的DOM元素或HTML片段。
var newDiv = Zepto('<div>', {class: 'new'});
// 或
var htmlFragment = Zepto.fragment('<div class="new"></div>');
3. 插入元素
.append(content)：在每个匹配元素内部的末尾追加内容。.prepend(content)：在每个匹配元素内部的开头插入内容。.after(content)：在每个匹配元素之后插入内容。.before(content)：在每个匹配元素之前插入内容。
Zepto('.container').append('<p>New paragraph</p>'); // 在每个class为container的元素内部末尾添加新段落
4. 删除元素
.remove([selector])：删除所有匹配的元素，可选参数selector用于筛选。.empty()：清空匹配元素集合中所有元素的子节点。
Zepto('.to-remove').remove(); // 删除所有class为to-remove的元素
Zepto('#container').empty(); // 清空id为container元素的所有子节点
5. 替换元素
.replaceWith(newContent)：用提供的新内容替换匹配的元素。.replaceAll(target)：将匹配的元素替换掉每个target元素。
Zepto('.old').replaceWith('<div class="new">New Content</div>'); // 替换所有class为old的元素
Zepto('<div class="replacement">Replacement</div>').replaceAll('.to-replace'); // 用新的div替换所有class为to-replace的元素
6. 属性操作
.attr(name[, value])：获取或设置属性值。.removeAttr(name)：移除属性。
var href = Zepto('a').attr('href'); // 获取链接的href属性
Zepto('img').attr('src', 'new-image.jpg'); // 修改所有图片的src属性
Zepto('.hidden').removeAttr('style'); // 移除所有class为hidden元素的style属性
7. 文本与HTML操作
.text([content])：获取或设置匹配元素的文本内容。.html([content])：获取或设置匹配元素的内容（HTML）。
var text = Zepto('.content').text(); // 获取class为content元素的文本
Zepto('.content').html('<b>New Bold Text</b>'); // 设置class为content元素的HTML内容
8. 事件绑定与触发
.on(events[, selector][, data], handler)：绑定事件处理器。.off([events][, selector][, handler])：移除事件处理器。.trigger(eventType[, eventData])：在每个匹配元素上触发指定类型事件。
Zepto('.button').on('click', function() {
alert('Button clicked!');
});
Zepto('.button').trigger('click'); // 触发所有class为button元素的点击事件