一款超好用轻量级JS框架——Zepto.js(下)

   前   言

絮叨絮叨

　　前面和大家分享了Zepto的原型方法，相信大家也对这个框架有了一定的了解，那么今天再和大家分享一下它的对象方法吧！

1add()

支持一到二个参数,第一个为选择器,与$()的差不多,甚至是,第一个参数传进去一个function,它也会正确执行(但是出现什么bug的话，后果自负哟~~),所以说,正确的使用方式是传入选择器,dom对象,或者一段html,这都是可以的,如果有多个的话,那就用用数组括起来,

var temp = $(["li","span","div"]).add(["p", "p"]).size(); // --> size为4,因为会对返回的集合进行去重处理

第二个参数是匹配的上下文,默认不传就按着document来：

add函数本身无任何亮点- -,将两个参数原封不动的传入$()然后返回一个Zepto对象,执行concat函数,该函数会将所有参数添加至调用函数对象的末尾,

toArray方法会调用get方法,当get方法执行时而没有传入参数,会将该对象所有的匹配元素以数组的形式返回;

uniq方法是一个数组去重的方法,返回的还是一个数组,然后回到add方法再次通过$()构造一个zepto对象并返回;

2addClass()

该方法接收一个参数,可以直接传入一个字符串作为类名,如有多个,使用空格分开.

$("p").addClass("content title"); // --> content title

还有一种调用方式是传入一个函数,函数可以接收到两个参数,第一个是当前循环到的下标,第二个是当前对象之前的className.

$('p1', 'p2', 'p3').addClass(function (index, oldClass) {
    return 'dynamic' + index;
});
// p1 --> dynamic0
// p2 --> dynamic1
// p3 --> dynamic2

函数必须返回一个字符串,否则会运行异常

通过each方法循环遍历对象,each方法会返回一个zepto对象.首先会判断元素是否存在className属性,

通过className方法获取到当前元素的所有className信息的字符串;

3removeClass()

removeClass函数只有一个可选的参数,可以为一个字符串(要移除的className),或者是一个function,用法同addClass,函数也必须要返回一个字符串

$('<p class="test test2 test3"></p>').removeClass("test test3");
// --> <p class="test2"></p>
/*
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
*/
$('li').addClass("test");
$('li').removeClass(function (index, oldClass) {
    return index % 2 === 0 ? "test" : "";
})
// --> [li, li.test, li]
//或者可以不填参数,直接调用,直接调用会清除对象的所有className
$('<p class="test test2 test3">').removeClass();
// --> <p></p>

removeClass相对于addClass简单点;

大体相同,唯有在forEach循环中,addClass是给集合push值,而removeClass是从一个字符串中replace掉值;

4toggleClass()

方法使用与前两个类似,只不过多了第二个参数,第二个参数为true时,执行addClass,第二个参数为false时,执行removeClass

这个用处好像不是太大、、、

直接上代码吧，第二个参数没有传的话，就是有了删，没了填,如果第二个参数有值,则不执行hasClass方法,直接通过when变量的值来决定使用什么方法.

↓↓↓↓↓下面再来说一些Zepto的DOM操作方法↓↓↓↓↓

5prepend()

将参数插入对象内部的头部;

<div class="div1" style="width: 200px; height: 200px; background-color: red;">这是div1</div>

$(".div1").prepend("<p>这是被插入的p标签</p>");

6append()和appendTo()

将参数插入对象内部的尾部;

<div class="div1" style="width: 200px; height: 200px; background-color: red;">这是div1</div>

$(".div1").append("<p>这是插入的p标签</p>");

$("<p />", { text:"Hello", id:"greeting", css:{color:'darkblue'} }).appendTo(".div1");

7after和before

将对象插入到元素的后边或前边

<div class="div1" style="width: 200px; height: 200px; background-color: red;">这是div1</div>

$(".div1").after("<p>这是被插入的p标签</p>");

$("<p>这是被插入的p标签</p>").insertBefore(".div1");

8wrap和wrapAll

在元素外面包裹一层div

<p>这是一个p标签1</p>
<p>这是一个p标签2</p>
<p>这是一个p标签3</p>

$("p").wrap("<div style='width: 100px; height: 100px; background-color: blue;'></div>");

$("p").wrapAll("<div style='width: 300px; height: 300px; background-color: blue;'></div>");

再叨叨点其他的

前面我们就说了Zepto和JQuery其实差不多，所以就只是粗略的分享一下，更加深入的东西就不在分享了，如果大家会JQuery的话，那么Zepto真的就是拿来就会用的东西。

所以Zepto的相关使用操作就到这儿啦啦啦啦啦啦啦~~~~~~