zepto 基础知识(5)
81.width
width() 类型:number
width(value) 类型:self
width(function(index,oldWidth){....}) 类型:self
获取对象集合中第一个元素的宽,或者设置对象集合中所有元素的宽。
$('#foo').width() //123
$(window).width() //768
$(document).width() //768
82.wrap
wrap(structure) 类型:self
wrap(function(index){...}) 类型:self
在每个匹配的元素外层包上html 元素。structure参数可以在一个单独的元素或者一些嵌套的元素,
也可以是一个html字符串片段或者dome节点。还可以是一个生产用来包元素的回调函数,这个函数返回前两种类型的包裹片段。
// wrap each button in a separate span:
$('.buttons a').wrap('<span>')
// wrap each code block in a div and pre:
$('code').wrap('<div class="highlight"><pre /></div>')
83.wrapAll
wrapAll(structure) 类型:self
在所有匹配元素外面包一个单独的结构,结构可以是单个元素或几个嵌套的元素,并且可以通过在
作为HTML 字符串或DOM节点。
// wrap all buttons in a single div:
$('a.button').wrapAll('<div id=buttons />')
84.wraplnner
wrapInner(structure) 类型:self
wrapInner(function(index){})
将每个元素中的内容包裹在一个单独的结构中,结构可以是个元件或多个嵌套元件,并且可以通过
在作为HTML字符串或DOM 节点,或者是一个生成用来包元素的回调函数。这个函数返回前两种类型的包裹片段。
$('nav a').wrapInner('<span>')
$('ol li').wrapInner('<p></em>>></p>')
85.$.Event
$.Event(type,[properties]) 类型:event
创建并初始化一个指定的DOM事件。如果给定properties对象,使用它来扩展出新的事件对象。
默认情况下,事件被设置为冒泡方式,这个可以通过设置bubbles为false来关闭。
$.Event('mylib:change',{bubbles:false})
86.$proxy
$.proxy(fn,context) 类型:function
$.proxy(fn,context,[additionalArguments...]) 类型:function
$.proxy(context,propery) 类型:function
$.proxy(context,property,[additionalArguments...]) 类型:function
接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context)语境
新函数中this 指向context参数,另一种形式,原始的function是从上下文(context)对象的特定属性读取。
如果传递超过2个的额外参数,它们被用于 传递给fn参数的函数 引用。
var obj = {name:'Zepto'}
handler = function(){console.log("hello from+",this.name)}
$(document).on('click',$.proxy(handler,obj))
87.bind
bind(type,function(e){....}) 类型:self
bind(type,[data],functon(e){...}) 类型:self
bind(type:handler,type2:handler2,....) 类型:self
bind(type:handler,type2:handler2,....) 类型:self
为一个元素绑定一个处理事件。
88.delegate
delegate(sekector,type,function(e){...}) 类型;self
delegate(selector,{type:handler,type2:handler2,....}) 类型; self
基于一组特定的根元素为所有选择器匹配的元素附加一个处理事件,匹配的元素可能现在货将来才创建。
89.die
die(type,function(e){...}) 类型 self
die({type:handler,type2:handler2,....}) 类型;self
删除通过live添加的事件。
90.event.isDefaultPrevented
event.isDefaultPrevented() 类型:boolean
如果preventDefaultPrevented()被该事件的实例调用,那么返回true,这可作为跨平台的替代
原生的defaultPrevented属性,如果defaultPrevented缺失或在某些浏览器下不可靠的时候。
var event = $.Event('custom')
element.trigger(event)
event.isDefaultPrevented()
91.event.islmmediaPropagationStopped() 类型:boolean
如果stopImmediatePropagationStopped()被该事件的实例调用,那么返回true。Zepto在不
支持该原生方法的浏览器中实现。(例如老版本的Android)。
92.event.isPropagationStopped
event.isPropagationStopped() 类型boolean
如果stopPropagation()被该事件的实例调用,那么返回true
93.live 不推荐, 使用 on 代替。
live(type,function(e){...}) 类型 self
live({type:handler,type2:handler2,...}) 类型 self
添加一个个事件处理器到符合目前选择器的所有元素匹配,匹配的元素可能在或将来才创建。
94.off
off(type,[selector,function(e){...}]) 类型;self
off({type:handler,type2:handler2...},[selector]) 类型 self
off(type,[selector]) 类型 ;self
off() 类型 self
移除通过 on 添加的事件.移除一个特定的事件处理程序, 必须通过用on()添加的那个相同的函数。否则,只通过事件类型调用此方法将移除该类型的所有处理程序。
如果没有参数,将移出当前元素上全部的注册事件。
95.on
on(type, [selector], function(e){ ... }) ⇒ self
on(type, [selector], [data], function(e){ ... }) ⇒ self v1.1+
on({ type: handler, type2: handler2, ... }, [selector]) ⇒ self
on({ type: handler, type2: handler2, ... }, [selector], [data]) ⇒ self v1.1+
添加事件处理程序到对象集合中得元素上。多个事件可以通过空格的字符串方式添加,或者以事件类型为键、以函数为值的对象 方式。如果给定css选择器,当事件
在匹配该选择器的元素上发起时,事件才会被触发(愚人码头注:即事件委派,或者说事件代理)。
如果给定data参数,这个值将在事件处理程序执行期间被作为有用的 event.data 属性
事件处理程序在添加该处理程序的元素、或在给定选择器情况下匹配该选择器的元素的上下文中执行(愚人码头注:this指向触发事件的元素)。 当一个事件
理程序返回false,preventDefault() 和 stopPropagation()被当前事件调用的情况下, 将防止默认浏览器操作,如链接。
如果false 在回调函数的位置上作为参数传递给这个方法, 它相当于传递一个函数,这个函数直接返回false。(愚人码头注:即将 false 当作 function(e){ ... } 的参
数,作为 function(){ return false; } 的简写形式,例如: $("a.disabled").on("click", false);这相当于$("a.disabled").on("click", function(){ return false; } );)
var elem = $('#content')
// observe all clicks inside #content:
elem.on('click', function(e){ ... })
// observe clicks inside navigation links in #content
elem.on('click', 'nav a', function(e){ ... })
// all clicks inside links in the document
$(document).on('click', 'a', function(e){ ... })
// disable following any navigation link on the page
$(document).on('click', 'nav a', false)
96.one
one(type, [selector], function(e){ ... }) ⇒ self
one(type, [selector], [data], function(e){ ... }) ⇒ self v1.1+
one({ type: handler, type2: handler2, ... }, [selector]) ⇒ self
one({ type: handler, type2: handler2, ... }, [selector], [data]) ⇒ self v1.1+
添加一个处理事件到元素,当第一次执行事件以后,该事件将自动解除绑定,保证处理函数在每个元素上最多执行一次。selector 和 data 等参数说明请查看.on()。
97.trigger
trigger(event,[args]) 类型:self
在对象集合的元素上触发指定的事件,事件可以是一个字符串类型,也可以是一个通过$.Event定义的
事件对象,如果给定args参数,它作为参数传递给事件函数。
$(document).on('mylib:change', function(e, from, to){
console.log('change on %o with data %s, %s', e.target, from, to)
})
// trigger the custom event
$(document.body).trigger('mylib:change', ['one', 'two'])
98.triggerHandler
triggerHandler(event,[args]) 类型 self
像trigger,它只在当前元素上触发事件,但不冒泡。
$("input").triggerHandler('focus');
// 此时input上的focus事件触发,但是input不会获取焦点
$("input").trigger('focus');
// 此时input上的focus事件触发,input获取焦点
99.unbind
unbind(type,function(e){...}) 类型:self
unbind({type:handler,type1:handler2,...}) 类型:self
移除通过bind注册的事件。
100.undelegate
undelegate(selector,type,function(e){...}) 类型 self
undelegate(selector,{type:handler,type2:hander2,....}) 类型:self
移除通过delegate 注册的事件。
zepto 基础知识(5)的更多相关文章
- zepto 基础知识(3)
41.height height() 类型:number height(value) 类型:self height(function(index,oldHeight){...}) 类型:self 获取 ...
- zepto 基础知识(6)
101.$.ajax $.ajax(options) 类型:XMLttpRequest 执行Ajax请求.他可能是本地资源,或者通过支持HTTP access control的浏览器 或者通过 JSO ...
- zepto 基础知识(4)
61.prev prev() 类型:collection prev(selector) 类型:collection 获取对相集合中每一个元素的钱一个兄弟节点,通过选择器来进行过滤 62.prev pr ...
- zepto 基础知识(2)
20.append append(content) 类型:self 在每个匹配的元素末尾插入内容(内部插入).内容可以为html 字符串.dom节点,或者节点组成的数组. $('ul').append ...
- zepto 基础知识(1)
1.$() 的用法. 获取元素 $('div') //获取所有页面中的div元素 $('#foo') // 获取ID 为"foo"的元素 创建元素 $("<p> ...
- .NET面试题系列[1] - .NET框架基础知识(1)
很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...
- RabbitMQ基础知识
RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...
- Java基础知识(壹)
写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...
- selenium自动化基础知识
什么是自动化测试? 自动化测试分为:功能自动化和性能自动化 功能自动化即使用计算机通过编码的方式来替代手工测试,完成一些重复性比较高的测试,解放测试人员的测试压力.同时,如果系统有不份模块更改后,只要 ...
随机推荐
- Hashtable(哈希表)
简体字繁体字转化: class Program { static void Main(string[] args) { Hashtable ht = new Hashtable(); ; i < ...
- PAT 1040 Longest Symmetric String
#include <cstdio> #include <cstdlib> using namespace std; ]; ]; int syslen(char str[], i ...
- 003Angular2中使用ng-bootstrap
1.检查@angular/cli版本 命令行ng -v ,版本号必须大于1.0.0-beta.24 2.新建工程 工程所在目录,命令行ng new my-app --style=scss 带style ...
- Learn by pictures on Computer Fields
- centos的nginx支持ssl
首先看centos是否支持ssl 输入:openssl version 如无 则去 http://slproweb.com/products/Win32OpenSSL.html 寻找 生成私钥后面的 ...
- ubuntu14.04安装rabbitmq
ubuntu14.04安装rabbitmq及配置 1.修改/etc/apt/sources.list文件 命令:vi /etc/apt/sources.list 在最后一行加上:deb http: ...
- jscode属性排序
根据data中的value 对geCoorMap 进行排序,暂定降序排序. var data = [{name:"name1",value:29},{name:"name ...
- spring----对IoC和DI的理解
学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和 ...
- Bootstrap后台管理模板调研
Bootstrap后台管理模板调研 SB Admin 2(推荐) SB Admin 2是一款开源的基于Bootstrap搭建的后台管理模板,简约,易用.没有复杂的组件和花炫的设计,很质朴,但较为美观. ...
- ul自适应li问题
内容提要: li浮动时ul高度为0,解决ul自适应高度的几种方法 在网页设计中,常常需要对li标签做浮动效果,但是在不同浏览器中会遇到兼容性问题,比如IE中会出现ul高度为0的情况,是效果不能达到预期 ...