文档章节

zopto重新梳理总结

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

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
博文 91
码字总数 37848
作品 0
朝阳
程序员
源码学习的两个问题:深度不够+直接跟着敲

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

飞凡人 ⋅ 06/05 ⋅ 0

思想:程序的价值(16)

思想:程序的价值(16) 新的一年开始了,思考自己到底想做什么,应该做什么。整理了一下,发现完善CoreMVC文档和升级CoreMVC是当务之急,但一步一步细化却发现要做的琐碎的事情很多,因此重新...

枣。 ⋅ 2012/01/29 ⋅ 0

游戏开发与程序设计知识总结02——数据结构

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

kashiwa ⋅ 2017/08/31 ⋅ 0

Scrapy爬取多层网页结构数据(二)

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

程程同学 ⋅ 2017/04/04 ⋅ 0

使用Gradle管理老J2EE项目(一)

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

Drystal ⋅ 2016/02/19 ⋅ 0

游戏开发与程序设计知识总结01——设计模式

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

kashiwa ⋅ 2017/08/28 ⋅ 0

游戏开发与程序设计知识总结04——操作系统

更新日志 每此对思维导图有改动或者在github中有了对应的实现,则增加一条更新日志。 前言 这是游戏开发与程序设计知识总结系列文章的第四篇操作系统,预计下一篇是游戏前端开发。本系列文章...

kashiwa ⋅ 2017/09/04 ⋅ 0

厦门工程技术人员职称申报操作笔记 02 论文

前言 根据厦门工程技术人员职称评审 总体梳理的整理,申报材料中个人需要准备论文。 论文应该是仅次于继续教育证书,第二困难的材料了。因此本文专门针对论文这块的准备做了梳理。 一、政策文...

iotisan ⋅ 2017/12/01 ⋅ 0

nginx修复openssl heartbleed漏洞

最近openssl的heartbleed漏洞造成很多网站中招。直接造成我等程序猿的不安稳,各种紧急修复。今天才有空闲总结梳理一下此漏洞的修复。 一、操作系统的openssl库安装 1、下载openssl 1.0.1g ...

lgxheartlikesea ⋅ 2014/05/21 ⋅ 0

游戏开发与程序设计知识总结03——算法

更新日志 每此对思维导图有改动或者在github中有了对应的实现,则增加一条更新日志。 2017.9.2: 确定更新为系列文章并持续维护 前言 这是游戏开发与程序设计知识总结系列文章的第三篇算法,...

kashiwa ⋅ 2017/09/02 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Netweaver和SAP云平台的quota管理

Netweaver 以需要为一个用户上下文(User Context)能够在SAP extended memory区域中分配内存尺寸创建quota为例。 对于Dialog工作进程,使用事务码修改参数 ztta/roll_extension_dia. 对于非D...

JerryWang_SAP ⋅ 7分钟前 ⋅ 0

IDEA提示编码速度

焦点移动 将焦点冲代码编辑窗口移动到菜单栏:Alt+菜单栏带下划线字母 将焦点从工具窗口移动到代码编辑窗口 Esc或Shift+Esc 将焦点从代码编辑移动到最近使用的工具窗口 F12 模板提示 Ctrl+J...

bithup ⋅ 16分钟前 ⋅ 0

180623-SpringBoot之logback配置文件

SpringBoot配置logback 项目的日志配置属于比较常见的case了,之前接触和使用的都是Spring结合xml的方式,引入几个依赖,然后写个 logback.xml 配置文件即可,那么在SpringBoot中可以怎么做?...

小灰灰Blog ⋅ 40分钟前 ⋅ 0

冒泡排序

原理:比较两个相邻的元素,将值大的元素交换至右端。 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面。即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后。然后比较第...

人觉非常君 ⋅ 47分钟前 ⋅ 0

Vagrant setup

安装软件 brew cask install virtualboxbrew cask install vagrant 创建project mkdir -p mst/vmcd mst/vmvagrant init hashicorp/precise64vagrant up hashicorp/precise64是一个box......

遥借东风 ⋅ 今天 ⋅ 0

python3.6 安装pyhook_3

我的是在win下的,忙了半天老是安装不了, pip install 也不行。 那么可以看出自己的版本是32bit 一脸懵逼 没办法 只好下载32版本的来安装 我一直以为 是 对应32 位的 。 下面是 小例子 http...

之渊 ⋅ 今天 ⋅ 0

004、location正则表达式

1、location的作用 location指令的作用是根据用户请求的URI来执行不同的应用,也就是根据用户请求的网站URL进行匹配,匹配成功即进行相关的操作。 2、location的语法 = 开头表示精确匹配 ^~...

北岩 ⋅ 今天 ⋅ 0

CentOS7 静默安装 Oracle 12c

环境 CentOS7.5 最小安装 数据库软件 linuxx64_12201_database.zip 操作系统配置 关闭 SELinux sed -i '/^SELINUX=/cSELINUX=disabled' /etc/selinux/config 关闭防火墙 systemctl disable ......

Colben ⋅ 今天 ⋅ 0

Yii2中findAll()的正确使用姿势/返回为空的处理办法

从一次错误的操作开始 $buildingObject = Building::findAll("status=1"); 1 这个调用看着没有任何毛病,但是在使用时返回的结果却是一个空数组。再回过头来看看数据表中: 按照套路来讲,查...

dragon_tech ⋅ 今天 ⋅ 0

如何优雅的编程——C语言界面的一点小建议

我们鼓励在编程时应有清晰的哲学思维,而不是给予硬性规则。我并不希望你们能认可所有的东西,因为它们只是观点,观点会随着时间的变化而变化。可是,如果不是直到现在把它们写在纸上,长久以...

柳猫 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部