#Zepto DOM 操作

let divTags = $("div");

let app = $("#app");

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

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

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

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

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

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'
});

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

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'}

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

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

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

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

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

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

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

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

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

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]

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

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

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

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

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

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

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

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

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

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

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

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

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

let a = [1, 2, 3],
    b = [4, 5, 6];
let c = [].concat(a, b);
console.log(c); // [1, 2, 3, 4, 5, 6]

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

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

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

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

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

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

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

$("ul").first();

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

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

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

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

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

$("p").hide();

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

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

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

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

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

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

$("li").last();

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

$("ul").next();

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

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

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

$("li").parent();

$("li").parents();

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

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

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

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

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

// #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

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

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