#Zepto.js 相关 DOM 操作

1let divTags = $("div");

1let app = $("#app");

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

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

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

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

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

1let arr = ["a", "b", "c", "hh", "gd", "zz"];
2$.each(arr, function (index, item) {
3	console.log("item %d is: %s", index, item); // item 'index' is: 'item'
4});

1$.each(
2	{
3		name: "zepto.js",
4		size: "98k"
5	},
6	function (key, value) {
7		console.log("%s : %s", key, value); // key ：value
8	}
9);

1let obj1 = {
2		num: "A001",
3		tg: "kk"
4	},
5	obj2 = {
6		name: "zxk",
7		tg: "kang"
8	};
9$.extend(tag1, tag2); // {num: 'A001',name: 'zxk',tg: 'kang'}
10$.extend(true, tag1, tag2); // {num: 'A001',name: 'zxk',tg: 'kang'}

1$.fn.empty = function () {
2	return this.each(function () {
3		this.innerHTML = "";
4	});
5};

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

1let aIndex = $.inArray("a", ["c", "a", "d"]);
2console.log(aIndex); // 1
3
4let bIndex = $.inArray("b", ["c", "d", "a", "b", "z"], 1);
5console.log(bIndex); // 3
6
7let cIndex = $.inArray("y", ["z", "x", "k"], 1);
8console.log(cIndex); // -1

1let arr = ["1"],
2	str = "aaa";
3
4$.isArray(arr); // true
5$.isArray(str); // false

1let fn = function () {},
2	str = "fn";
3
4$.isFunction(fn); // true
5$.isFunction(str); // false

1$.isPlainObject({}); // true
2$.isPlainObject(new Object()); // true
3$.isPlainObject(new Date()); // false
4$.isPlainObject(window); // false

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

1let arr = [1, 3, 5, null, 7, 9, undefined, 11];
2let newArr = $.map(a12, function (item, index) {
3	if (item > 1) return item * item;
4});
5console.log(newArr); // [9, 25, 49, 81, 121]

1let obj = $.map(
2	{
3		x: 1,
4		y: 2,
5		z: 3,
6		k: ""
7	},
8	function (item, index) {
9		if (item > 1) {
10			return item * item;
11		}
12	}
13);
14console.log(obj); // [4, 9]

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

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

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

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

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

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

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

1$("form").attr("action"); //读取
2$("form").attr("action", "/create"); //设置
3$("form").attr("action", null); //移除
4
5// 多个属性
6$("form").attr({
7	action: "/create",
8	method: "post"
9});

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

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

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

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

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

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

1$("p").data("app"); // data- app 中的自定义属性
2
3// 设置自定义属性:类似于attr的自定义属性
4$("div").data("box", "content"); // data-box="content"

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

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

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

1$("ul").first();

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

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

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

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

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

1$("p").hide();

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

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

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

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

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

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

1$("li").last();

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

1$("ul").next();

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

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

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

1$("li").parent();

1$("li").parents();

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

1$("#app").css({
2	position: "fixed",
3	top: 200,
4	left: 200
5});

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

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

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

1// #check1:checked,#check2:uncheck
2$("#check1").attr("checked"); //=> "checked"
3$("#check1").prop("checked"); //=> "true"
4$("#check2").attr("checked"); //=> "false"
5$("#check2").prop("checked"); //=> "false"
6$("input[type='checkbox']").prop("type", function (index, oldvalue) {
7	console.log(index + "|" + oldvalue);
8});
9//=> 0|checkbox
10//=> 1|checkbox
11$("input[type='checkbox']").prop("className", function (index, oldvalue) {
12	console.log(index + "|" + oldvalue);
13});
14//=> 0|ty
15//=> 1|yt

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

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