文档章节

zopto重新梳理总结

leona_lily
 leona_lily
发布于 2015/12/04 16:59
字数 1056
阅读 37
收藏 1

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


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

© 著作权归作者所有

共有 人打赏支持
leona_lily
粉丝 9
博文 96
码字总数 37848
作品 0
朝阳
程序员
源码学习的两个问题:深度不够+直接跟着敲

一天都在照抄别人的代码,边写边理解,通过自己敲能更够好地理解,但问题是这样的效率太低。最重要的是,自己没有思路,全照着作者走,一行一行地敲,一方面没有一个整体上的概念认识,另一方...

飞凡人
06/05
0
0
游戏开发与程序设计知识总结02——数据结构

更新日志 每此对思维导图有改动或者在github中有了对应的实现,则增加一条更新日志。 2017.9.2: 确定更新为系列文章并持续维护 更新B树,B+树,红黑树的参考链接 更新了Huffman树的标注 前言...

kashiwa
2017/08/31
0
0
Scrapy爬取多层网页结构数据(二)

Scrapy爬取多层网页结构数据(二) 工作一月有余,实在是过于疲劳,没多少精力写东西,趁着清明节假期休息了2天今天来总结下Scrapy对多层网页结构数据的抓取。上一篇主要介绍的同一层网页结构...

程程同学
2017/04/04
0
0
使用Gradle管理老J2EE项目(一)

相信大多数J2EE开发人员第一次构建J2EE项目都是通过Eclipse自动构建的Dynamic Web project。 所有依赖的jar包都是放在lib下面,杂乱无章,不忍目视。 最近,公司准备把0几年的项目重新梳理一...

Drystal
2016/02/19
856
0
游戏开发与程序设计知识总结01——设计模式

更新日志 每此对思维导图有改动或者在github中有了对应的实现,则增加一条更新日志。 2017.9.8 添加单例模式、工厂方法模式、抽象工厂模式的实现 2017.9.2 确定更新为系列文章并持续维护 前言...

kashiwa
2017/08/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

7月13日任务 for、while、break跳出、ontinue结束、exit退出

20.10 for循环 语法:for 变量名 in 条件; do …; done 案例1:计算1到100的和 #!/bin/bashsum=0for i in `seq 1 100`do    sum=$[$sum+$i]    echo $idoneecho $sum 案例2...

吕湘颖
39分钟前
0
0
qemu增量镜像的好处

可以快速恢复,相当于快照的功能。

simpower
46分钟前
0
0
Python3_Appium_QQ 实战

Python3_Appium实战 -海盐 APPium移动自动化测试 样例中 测试的 app 使用的是 QQ; Appium介绍 Appium 是一个自动化测试开源工具,支持 iOS 平台和 Android 平台上的原生应用,web 应用和混合...

海盐宝宝
46分钟前
0
0
内网穿透利器-ngrok的图文安装

使用场景: 在做微信开发或是调银行或支付宝等支付系统的时候,本地想联调但是对方需要可以访问的域名或是外网IP才可以。但是,在本地如果不在路由器上做映射或是公司没有固定的外网IP。这种...

中凯_凯哥java
51分钟前
4
1
归约与分组 - 读《Java 8实战》

区分Collection,Collector和collect 代码中用到的类与方法用红框标出,可从git库中查看 收集器用作高级归约 // 按货币对交易进行分组Map<Currency, List<Transaction>> currencyListMap = g...

yysue
52分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部