2403
浏览量
5
粉丝
7
关注

Zepto 相关 DOM 操作


2020-08-12 20:39:15 98 0

一、DOM 元素的处理

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

let divTags = $("div");

2、获取 ID 为 app 的元素

let app = $("#app");

3、创建元素

$("<h2>创建DOM标签</h2>");

4、创建带有属性的元素

$("</p>", {
    text: "创建带有属性的元素",
    id: "app",
    css: {
        color: "darkblue"
    }
});

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

Zepto(function($) {
    alert("Ready to Zepto!");
});

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

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

let tf = $.camelCase("xiao-kang"); // xiaoKang
let tf2 = $.camelCase("helloZepto!"); // helloZepto

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

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

let flag = $.contains(parent, node); // true || false

:若两者是相同节点,则返回false

3、遍历数组元素

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 键值对方式遍历对象

$.each(
    {
        name: "zepto.js",
        size: "98k"
    },
    function(key, value) {
        console.log("%s : %s", key, value); // key :value
    }
);

5、源对象扩展目标对象(对象合并)

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 对象

$.fn.empty = function() {
    return this.each(function() {
        this.innerHTML = "";
    });
};

Zepto.fn是一个对象,它拥有 Zepto 对象上所有可用的方法。

7、根据条件处理数组

$.grep([1, 2, 3], function(index, item) {
    return item > 1; // [2,3]
});

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

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

:返回数组中指定元素的索引值(以0为基数);如果没有找到该元素则返回**-1[fromIndex]参数可选,表示从哪个索引值开始向后**查找。

9、判断是否为数组 Array

let arr = ["1"],
    str = "aaa";

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

10、判断是否为函数 Function

let fn = function() {},
    str = "fn";

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

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

$.isPlainObject({}); // true
$.isPlainObject(new Object()); // true
$.isPlainObject(new Date()); // false
$.isPlainObject(window); // false

12、判断是否为 window 对象

$.isWindow(window); // true
$.isWindow(document); // false

13、数组元素过滤

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]

:通过迭代函数可以将nullundefined过滤掉。

14、对象集合过滤

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 转换

$.parseJSON(string); // 将JSON字符串转化为JSON对象

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

16、获取 JavaScript 对象的类型

let arr = [5, "z", 11];
console.log($.type(arr)); // array

:JavaScript 对象类型有nullundefinedbooleannumberstringfunctionarraydateregexpobjectonerroronerror 事件在加载外部文件(文档或图像)发生错误时触发)。

三、DOM 元素属性操作

1、add:添加 DOM 元素

$("div")
    .add("p")
    .css("background-color", "red");

2、addClass:为元素添加 Class

$("p").addClass("active");

:若有多个 class 类名,使用空格隔开。

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

$("body div").after("插入的内容");

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

$("ul").append("<li>last append!</li>");

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

$("<li>将匹配的元素插入到目标元素的末尾</li>").appendTo("ul");

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

$("form").attr("action"); //读取
$("form").attr("action", "/create"); //设置
$("form").attr("action", null); //移除

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

:若未给定 value 参数,则读取对象集合中第一个元素的属性值; 当给定 value 参数时,则设置对象集合中所有元素的该属性的值; 当 value 参数为null时,则这个属性将被移除(类似removeAttr); 多个属性可以通过对象键值对的方式进行设置; 要读取元素属性,如checkedselected,则需使用prop

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

$("p").before("<li>yyyyyyyyyyyy</li>");

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

$("ul").children("*:nth-child(2n)");

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

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

let lis = $("ul li");
lis.closest("ul");

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

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:获取匹配元素集合的子元素

let obj = $("ul").contents();
console.log(obj); // [text, li, text, li, text, li, text, li, li, selector: Array[9]]

:包括文字和注释节点。

四、样式属性操作

1、css 样式操作

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

2、data-:自定义属性

$("p").data("app"); // data- app 中的自定义属性

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

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

3、each:遍历

$("#app ul li").each(function(index) {
    console.log("li-%d: is %s", index, this);
});

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

$("li")
    .eq(0)
    .empty();

5、find:查找 DOM 元素

$("ul").find("li");

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

$("ul").first();

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

forEach(function(item, index, array) {}, [context]);

:遍历的参数不一样。

8、get()

get() => array get(index) => DOM node

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

$("ul>li").has("a[href]");

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

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

$("li").hasClass("abcd"); // true || false

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

$(window).height();
$(document).height();

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

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

$("p").hide();

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

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

$("#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():获取元素的索引值

$("li:nth-child(2)").index();

14、indexOf(element,[formIndex])

$("li").indexOf("p", 2); // 在当前对象集合中获取一个元素的索引值

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

$("<p>Emphasis mine.</p>").insertAfter("#app");

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

$("<p>See the following table:</p>").insertBefore("#app");

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

$('#app div').is('p') => boolean

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

$("li").last();

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

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

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

$("ul").next();

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

$("ul li").not("p"); // 获取一个新的对象集合,它里面的元素不能匹配css选择器。

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

$("#app").offset(); // 返回一个对象含有: top, left, width和height

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

$("ul").offsetParent(); // 意味着它的css中的position 属性值为“relative”, “absolute” or “fixed”

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

$("li").parent();

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

$("li").parents();

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

$("body > *").pluck("nodeName"); // ["P", "DIV", "P", "SCRIPT"]

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

$("#app").css({
    position: "fixed",
    top: 200,
    left: 200
});

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

$("ul").prepend("<li>wertyui</li>");

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

$("<li>qazqaertyujhgfyuik</li>").prependTo("ul");

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

$(".app").prev();

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

// #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,因为这些属性值会因为用户的交互发生改变,如checked and selected

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

$.('#app').push('p', 'div');    ⇒ self

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

Zepto(function($) {
    alert("Zepto的ready监听方法!");
});

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

精彩评论
暂无评论