zopto重新梳理总结
zopto重新梳理总结
leona_lily 发表于2年前
zopto重新梳理总结
  • 发表于 2年前
  • 阅读 32
  • 收藏 1
  • 点赞 1
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 刚好有时间重新看一遍zepto的api,总结一些自己觉得很有必要注意的东东

1.zepto引入

正常引入即可

<script src=zepto.js></script>
但是为了兼容ie浏览器的话,就不得不回到jQuery使用,下面这种引入方式足矣


<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>

注意:每一个引用类型的实例中,都有一个指针,指向其原型对象。这个指针在非IE浏览器里通过__proto__表示,而在IE里不提供。

2.zepto手动创建插件

格式:

;(function($){
  $.extend($.fn,function(){
     插件名称:function(){
            插件方法
         }
      })
})(zepto)


通过extend方法来进行扩展,针对的是$.fn就是zepto的原型来操作,不是针对某一个对象,而是所有的对象

extend通过源对象扩展目标对象的属性,源对象属性将覆盖目标对象属性。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="../js/zepto.min.js"></script>
</head>
<body>
	<section>
		<p>name:lili</p>
		<p>age:18</p>
		<p>sex:girl</p>
	</section>
</body>
<script type="text/javascript">
	;(function($){
	  $.extend($.fn, {
	    foo: function(){
	      return this.html('bar')  //改变元素里面的html为bar
	    }
	  })
	})(Zepto)

	$(function(){
		$("p").eq(0).foo();    //第一个p元素的html内容变成bar
	})()

</script>
</html>

3.核心方法

(1)选择器 $()

一般选择器选中出来的都是一个类数组对象

eg:    $('div')就是选中页面中所有的div元素,是个类数组

何为类数组?

一般数组的叫做Array,1.里面的length会随着你增加,删除数组元素动态的发生改变。2.这样的一个数组可以使用专供数组使用的诸多方法,比如join(), pop(), push()等等方法;

而类数组就是一组类似数组的对象,他又length属性,你可以查看他的长度,但是你不能来动态的改变他里面的元素内容和值,比如上诉中$('div')就是个类素组,也可以说是获取了一个元素的集合(个人理解)

(2)方法()

一些平时开发过程中不常用的方法,或者是一些常用方法但是发现了他的新内容,记录一下


1.$.grep()

获取一个新数组,新数组只包含回调函数中返回 ture 的数组项。


var array = [3,4,8,1,2,"你好"];
		var s = $.grep(array,function(item){
			return item >3
		})
		console.log(s)    //返回【4,8



2.$.inArray


返回数组中指定元素的索引值,三个参数$.inArray("查找的元素",索引的数组,从哪个索引值向后查找)


$(function(){
		var array = [3,4,8,1,2,"你好"];
		console.log($.inArray(3, array));//0
		console.log($.inArray("你好", array));//5
		console.log($.inArray("你好", array,2));//5  从第二个索引开始向后查找
	})



另外$.inArray(onject) ==>boolean   判断对象是否是个数组,返回布尔值true和false;


3.$.isFunction(object)/$.isPlainObject(object)/$.isWindow(object)

分别判断对象是否是个方法function;是否是一个纯的对象,通过对象常亮{}和object.create创建的对象;判断是否是一个window的对象;

返回的都是boolean值;

4.元素插入


after外部元素后插入,append内部元素后插入,before外部元素前插入,

5.  .contents()和.children()

.contents()获得每个匹配元素集合元素的子元素,包括文字和注释节点。

.children()获得每个匹配元素集合元素的直接子元素

前者包括文本节点以及jQuery对象中产生的HTML元素

6.filter(), not()

filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。

not() 从匹配元素集合中删除元素。


$('li').filter(':even').css('background-color', 'red'); //偶数的li元素设置背景是红色



$('li').not(':even').css('background-color', 'red'); //排除偶数的li其他的li设置红色背景



7.pluck

获取对象集合中每一个元素的属性值


console.log($("section").pluck('nodeName'))    //返回["SECTION", "SECTION"]



8.unwrap  wrap

移除集合中每个元素的直接父节点,并把他们的子元素保留在原来的位置。


$(document.body).append('<div id=wrapper><p>Content</p></div>')
$('#wrapper p').unwrap().parents()  //=> [<body>, <html>]


在每个匹配的元素外层包上一个html元素


$('.buttons a').wrap('<span>')


暂时就是这些吧,花了半天时间又过了一遍,温故而知新还是有帮助的

标签: zepto温故知新
共有 人打赏支持
粉丝 9
博文 91
码字总数 37807
×
leona_lily
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: