> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Zepto DOM 操作

## 一、DOM 元素的处理

### 1、获取页面所有的标签元素

```javascript title="代码示例"
let divTags = $("div");
```

### 2、获取 ID 为 app 的元素

```javascript title="代码示例"
let app = $("#app");
```

### 3、创建元素

```javascript title="代码示例"
$("<h2>创建DOM标签</h2>");
```

### 4、创建带有属性的元素

```javascript title="代码示例"
$("</p>", {
    text: "创建带有属性的元素",
    id: "app",
    css: {
        color: "darkblue",
    },
});
```

### 5、当页面 ready 时,执行回调函数

```javascript title="代码示例"
Zepto(function ($) {
    alert("Ready to Zepto！");
});
```

## 二、字符串&数组&对象处理

### 1、“驼峰命名法”转换字符串

```javascript title="代码示例"
let tf = $.camelCase("xiao-kang"); // xiaoKang
let tf2 = $.camelCase("helloZepto!"); // helloZepto
```

**注**：如果待转换的字符串已经是“驼峰法”形式，则不会再进行转化。

### 2、检查父节点是否包含指定 DOM 节点

```javascript title="代码示例"
let flag = $.contains(parent, node); // true || false
```

**注**：若两者是相同节点，则返回**false**。

### 3、遍历数组元素

```javascript title="代码示例"
let arr = ["a", "b", "c", "hh", "gd", "zz"];
$.each(arr, function (index, item) {
    console.log("item %d is: %s", index, item); // item 'index' is: 'item'
});
```

### 4、以 key-value 键值对方式遍历对象

```javascript title="代码示例"
$.each(
    {
        name: "zepto.js",
        size: "98k",
    },
    function (key, value) {
        console.log("%s : %s", key, value); // key ：value
    }
);
```

### 5、源对象扩展目标对象（对象合并）

```javascript title="代码示例"
let obj1 = {
        num: "A001",
        tg: "kk",
    },
    obj2 = {
        name: "zxk",
        tg: "kang",
    };
$.extend(tag1, tag2); // {num: 'A001',name: 'zxk',tg: 'kang'}
$.extend(true, tag1, tag2); // {num: 'A001',name: 'zxk',tg: 'kang'}
```

**注**：通过源对象扩展目标对象的属性，源对象属性将覆盖目标对象属性（**后者覆盖前者**）；默认情况下为**浅拷贝**（**浅复制**）；如果第一个参数为**true**，则表示**深度拷贝**（**深度复制**）。

### 6、Zepto.fn 对象

```javascript title="代码示例"
$.fn.empty = function () {
    return this.each(function () {
        this.innerHTML = "";
    });
};
```

**注**：**Zepto.fn**是一个对象，它拥有 Zepto 对象上所有可用的方法。

### 7、根据条件处理数组

```javascript title="代码示例"
$.grep([1, 2, 3], function (index, item) {
    return item > 1; // [2,3]
});
```

### 8、返回数组指定元素索引值

```javascript title="代码示例"
let aIndex = $.inArray("a", ["c", "a", "d"]);
console.log(aIndex); // 1

let bIndex = $.inArray("b", ["c", "d", "a", "b", "z"], 1);
console.log(bIndex); // 3

let cIndex = $.inArray("y", ["z", "x", "k"], 1);
console.log(cIndex); // -1
```

:::details 注意
返回数组中指定元素的**索引值**（以**0**为基数）；如果**没有找到**该元素则返回 **-1**。**\[fromIndex]**&#x53C2;数可选，表示从哪个索引值开始 **向后** 查找。
:::

### 9、判断是否为数组 Array

```javascript title="代码示例"
let arr = ["1"],
    str = "aaa";

$.isArray(arr); // true
$.isArray(str); // false
```

### 10、判断是否为函数 Function

```javascript title="代码示例"
let fn = function () {},
    str = "fn";

$.isFunction(fn); // true
$.isFunction(str); // false
```

### 11、判断是否为纯粹的对象 Object

```javascript title="代码示例"
$.isPlainObject({}); // true
$.isPlainObject(new Object()); // true
$.isPlainObject(new Date()); // false
$.isPlainObject(window); // false
```

### 12、判断是否为 window 对象

```javascript title="代码示例"
$.isWindow(window); // true
$.isWindow(document); // false
```

### 13、数组元素过滤

```javascript title="代码示例"
let arr = [1, 3, 5, null, 7, 9, undefined, 11];
let newArr = $.map(a12, function (item, index) {
    if (item > 1) return item * item;
});
console.log(newArr); // [9, 25, 49, 81, 121]
```

**注**：通过迭代函数可以将 **null** 和 **undefined** 过滤掉。

### 14、对象集合过滤

```javascript title="代码示例"
let obj = $.map(
    {
        x: 1,
        y: 2,
        z: 3,
        k: "",
    },
    function (item, index) {
        if (item > 1) {
            return item * item;
        }
    }
);
console.log(obj); // [4, 9]
```

### 15、JSON 转换

```javascript title="代码示例"
$.parseJSON(string); // 将JSON字符串转化为JSON对象
```

**注**：**$.parseJSON(string)** 为原生 **JSON.parse(string)** 方法的别名。

### 16、获取 JavaScript 对象的类型

```javascript title="代码示例"
let arr = [5, "z", 11];
console.log($.type(arr)); // array
```

**注**：JavaScript 对象类型有**null**、**undefined**、**boolean**、**number**、**string**、**function**、**array**、**date**、**regexp**、**object**、**onerror**（**onerror** 事件在加载外部文件（文档或图像）发生错误时触发）。

## 三、DOM 元素属性操作

### 1、add：添加 DOM 元素

```javascript title="代码示例"
$("div").add("p").css("background-color", "red");
```

### 2、addClass：为元素添加 Class

```javascript title="代码示例"
$("p").addClass("active");
```

**注**：若有多个 class 类名，使用空格隔开。

### 3、after：在匹配元素后插入内容

```javascript title="代码示例"
$("body div").after("插入的内容");
```

### 4、append：在匹配元素末尾插入内容

```javascript title="代码示例"
$("ul").append("<li>last append!</li>");
```

### 5、appendTo：将前元素插到后元素末尾

```javascript title="代码示例"
$("<li>将匹配的元素插入到目标元素的末尾</li>").appendTo("ul");
```

### 6、attr：读取或设置元素的属性

```javascript title="代码示例"
$("form").attr("action"); //读取
$("form").attr("action", "/create"); //设置
$("form").attr("action", null); //移除

// 多个属性
$("form").attr({
    action: "/create",
    method: "post",
});
```

:::warning 注意事项

- 若未给定 value 参数，则读取对象集合中第一个元素的属性值；
- 当给定 value 参数时，则设置对象集合中所有元素的该属性的值；
- 当 value 参数为**null**时，则这个属性将被移除（类似**removeAttr**）；
- 多个属性可以通过对象**键值对**的方式进行设置；
- 要**读取**元素属性，如**checked**和**selected**，则需使用**prop**。

:::

### 7、before：在匹配元素前插入内容

```javascript title="代码示例"
$("p").before("<li>yyyyyyyyyyyy</li>");
```

### 8、children：获取匹配元素的直接子元素

```javascript title="代码示例"
$("ul").children("*:nth-child(2n)");
```

**注**：**children**获得每个匹配元素集合的直接子元素，若给定**selector**，则返回结果中只包含符合 css 选择器的元素。

### 9、clone：通过深克隆来复制所有元素

```javascript title="代码示例"
let lis = $("ul li");
lis.closest("ul");
```

### 10、concat：获取匹配元素集合的子元素

```javascript title="代码示例"
let a = [1, 2, 3],
    b = [4, 5, 6];
let c = [].concat(a, b);
console.log(c); // [1, 2, 3, 4, 5, 6]
```

**注**：包括文字和注释节点。

### 11、contents：获取匹配元素集合的子元素

```javascript title="代码示例"
let obj = $("ul").contents();
console.log(obj); // [text, li, text, li, text, li, text, li, li, selector: Array[9]]
```

**注**：包括文字和注释节点。

## 四、样式属性操作

### 1、css 样式操作

```javascript title="代码示例"
let h = $("h1");
h.css("color"); // 读取color
h.css("background-color", "#369"); // 设置背景颜色
h.css("background-color", ""); // 移除背景颜色
```

### 2、data-：自定义属性

```javascript title="代码示例"
$("p").data("app"); // data- app 中的自定义属性

// 设置自定义属性:类似于attr的自定义属性
$("div").data("box", "content"); // data-box="content"
```

**注**：读取或写入 DOM 的 **data-\*** 属性。有点像 attr ，但是属性名称前面加上 **data-**。

### 3、each：遍历

```javascript title="代码示例"
$("#app ul li").each(function (index) {
    console.log("li-%d: is %s", index, this);
});
```

### 4、eq(index)，empty()清空元素内容

```javascript title="代码示例"
$("li").eq(0).empty();
```

### 5、find：查找 DOM 元素

```javascript title="代码示例"
$("ul").find("li");
```

### 6、first：获取当前对象第一个元素

```javascript title="代码示例"
$("ul").first();
```

### 7、forEach()：遍历对象集合中每个元素

```javascript title="代码示例"
forEach(function (item, index, array) {}, [context]);
```

**注**：遍历的参数不一样。

### 8、get()

```javascript title="代码示例"
get() => array get(index) => DOM node
```

### 8、has()：是否含有符合选择器的元素

```javascript title="代码示例"
$("ul>li").has("a[href]");
```

:::warning 注意事项

- 判断当前对象集合的子元素是否含有符合选择器的元素，或者是否包含指定的 DOM 节点；
- 若有，则返回新的对象集合；
- 该对象会过滤掉不含有选择器匹配元素或者不含有指定 DOM 节点的对象。

:::

### 9、hasClass()：是否含有指定 class

```javascript title="代码示例"
$("li").hasClass("abcd"); // true || false
```

### 10、height()：获取或设置元素高度

```javascript title="代码示例"
$(window).height();
$(document).height();
```

:::tip 备注

- 获取对象集合中第一个元素的高度;
- 或者设置对象集合中所有元素的高度。

:::

### 11、hide()：元素的显示或隐藏

```javascript title="代码示例"
$("p").hide();
```

**注**：通过设置 css 的属性 display 为 none 来将对象集合中的元素隐藏。

### 12、html()：获取或设置元素内容

```javascript title="代码示例"
$("#app li").html(function (idx, oldHtml) {
    return oldHtml.replace(
        /(^|\W)@(\w{1,15})/g,
        '$1@<a href="http://twitter.com/$2">$2</a>'
    );
});
```

### 13、index()：获取元素的索引值

```javascript title="代码示例"
$("li:nth-child(2)").index();
```

### 14、indexOf(element,\[formIndex])

```javascript title="代码示例"
$("li").indexOf("p", 2); // 在当前对象集合中获取一个元素的索引值
```

### 15、insertAfter()：将集合元素插入到目标元素后

```javascript title="代码示例"
$("<p>Emphasis mine.</p>").insertAfter("#app");
```

### 16、insertBefore()：将集合元素插入到目标元素前

```javascript title="代码示例"
$("<p>See the following table:</p>").insertBefore("#app");
```

### 17、is()：当前元素集合首个元素是否包含指定 css 选择器

```javascript title="代码示例"
$('#app div').is('p') => boolean
```

### 18、last()：获取对象集合中的最后一个元素

```javascript title="代码示例"
$("li").last();
```

### 19、map()：遍历对象集合的所有元素

```javascript title="代码示例"
$("ul li").map(function (index, item) {
    // 遍历对象中的this指向当前循环项
    console.log(index);
    console.log(item);
});
```

### 20、next()：获取当前对象集合中的每个元素的下一个兄弟节点

```javascript title="代码示例"
$("ul").next();
```

### 21、not()：过滤当前对象集合

```javascript title="代码示例"
$("ul li").not("p"); // 获取一个新的对象集合，它里面的元素不能匹配css选择器。
```

### 22、offset()：获得当前元素相对于 document 的位置

```javascript title="代码示例"
$("#app").offset(); // 返回一个对象含有： top, left, width和height
```

### 23、offsetParent()：找到第一个定位过的祖先元素

```javascript title="代码示例"
$("ul").offsetParent(); // 意味着它的css中的position 属性值为“relative”, “absolute” or “fixed”
```

### 24、parent()：获取对象集合中每个元素的直接父元素

```javascript title="代码示例"
$("li").parent();
```

### 25、parents()：获取对象集合每个元素所有祖先元素

```javascript title="代码示例"
$("li").parents();
```

### 26、pluck()：获取对象集合中每一个元素的属性值

```javascript title="代码示例"
$("body > *").pluck("nodeName"); // ["P", "DIV", "P", "SCRIPT"]
```

### 27、position()：获取对象集合中第一个元素的位置

```javascript title="代码示例"
$("#app").css({
    position: "fixed",
    top: 200,
    left: 200,
});
```

### 28、prepend()：将参数内容插入到每个匹配元素的前面

```javascript title="代码示例"
$("ul").prepend("<li>wertyui</li>");
```

### 29、prependTo()：将所有元素插入到目标前面

```javascript title="代码示例"
$("<li>qazqaertyujhgfyuik</li>").prependTo("ul");
```

### 30、prev()：获取对象集合中每一个元素的前一个兄弟节点

```javascript title="代码示例"
$(".app").prev();
```

### 31、prop()：读取或设置元素的属性

```javascript title="代码示例"
// #check1:checked,#check2:uncheck
$("#check1").attr("checked"); //=> "checked"
$("#check1").prop("checked"); //=> "true"
$("#check2").attr("checked"); //=> "false"
$("#check2").prop("checked"); //=> "false"
$("input[type='checkbox']").prop("type", function (index, oldvalue) {
    console.log(index + "|" + oldvalue);
});
//=> 0|checkbox
//=> 1|checkbox
$("input[type='checkbox']").prop("className", function (index, oldvalue) {
    console.log(index + "|" + oldvalue);
});
//=> 0|ty
//=> 1|yt
```

**注**：它在读取属性值的情况下优先于 [attr](http://www.wenshuai.cn/Manual/Zepto/#attr)，因为这些属性值会因为用户的交互发生改变，如`checked`and`selected`。

### 32、push()：添加元素到当前对象集合最后

```javascript title="代码示例"
$.('#app').push('p', 'div');    ⇒ self
```

### 33、ready()：添加一个事件侦听器

```javascript title="代码示例"
Zepto(function ($) {
    alert("Zepto的ready监听方法！");
});
```

**注**：当页面 DOM 加载完毕 “**DOMContentLoaded**” 事件触发时触发。