zepto 基础知识(6)_H5之家 - 中国HTML5教程资源分享第一站

101. $.ajax

$.ajax(options) 类型：XMLttpRequest

执行Ajax请求。他可能是本地资源，或者通过支持HTTP access control的浏览器或者通过 JSONP来实现跨域。

选项：

type(默认： “GET”)：请求方法 (“GET”, “POST”, or other)

url (默认：当前地址)：发送请求的地址

data (默认：none)：发送到服务器的数据；如果是GET请求，它会自动被作为参数拼接到url上。非String对象将通过 $.param 得到序列化字符串。

processData (默认： true)：对于非Get请求。是否自动将 data 转换为字符串。

contentType (默认： “application/x-www-form-urlencoded”)：发送信息至服务器时内容编码类型。 (这也可以通过设置 headers)。

通过设置 false 跳过设置默认值。

mimeType (默认： none): 覆盖响应的MIME类型。

dataType (默认： none)：预期服务器返回的数据类型(“json”, “jsonp”, “xml”, “html”, or “text”)

jsonp (默认：“callback”): JSONP回调查询参数的名称

jsonpCallback (默认： “jsonp{N}”): 全局JSONP回调函数的字符串（或返回的一个函数）名。设置该项能启用浏览器的缓存。

timeout (默认： 0): 以毫秒为单位的请求超时时间, 0 表示不超时。

headers: Ajax请求中额外的HTTP信息头对象

async (默认：true): 默认设置下，所有请求均为异步。如果需发送同步请求，请将此设置为 false。

global (默认：true): 请求将触发全局Ajax事件处理程序，设置为 false 将不会触发全局 Ajax 事件。

context (默认：window): 这个对象用于设置Ajax相关回调函数的上下文(this指向)。

traditional (默认： false): 激活传统的方式通过$.param来得到序列化的 data。

cache (默认： true): 浏览器是否应该被允许缓存GET响应。从v1.1.4开始，当dataType选项为 "script" 或 jsonp时，默认为false。

xhrFields (默认： none): 一个对象包含的属性被逐字复制到XMLHttpRequest的实例。

username & password (默认： none): HTTP基本身份验证凭据。

如果URL中含有=？或者dataType 是"jsonp"这讲求会通过注入一个<script >

标签来代替使用XMLHttpRequest此时 contentType, dataType, headers有限制，async 不被支持。

102. Ajax回调函数

你可以指定一下的回调函数，他们将按给定的循序执行：

1.beforeSend(xhr,setting) 请求发出前回调，它收到xhr对象和settings作为参数对象，他如果返回false

请求将被取消。

2.success(data,status,xhr):请求成功之后回调用，传入返回的数据，以及包含成功的代码代码片段

3.error(xhr,errorType,error);请求出错时调用。（超时，解析错误，或者状态码不在HTTP 2xx）

4.complete(xhr,status):请求成功时调用，无论请求失败或成功。

103. Promise 回调接口

如果可选的“callbacks”和"deferred"模块被加载，从$.ajax()返回的XHR对象实现了

Promise 接口链式的问题。

xhr.done(function(data, status, xhr){ ... })

xhr.fail(function(xhr, errorType, error){ ... })

xhr.always(function(){ ... })

xhr.then(function(){ ... })

这些方法取代了 success, error, 和 complete 回调选项.

104. Ajax事件

当global:true时。在Ajax请求生命周期内下面事件奖杯触发。

1.ajaxStart (global)：如果没有其他Ajax请求当前活跃将会被触发。

2.ajaxBeforeSend (data: xhr, options)：再发送请求前，可以被取消。

3.ajaxSend (data: xhr, options)：像 ajaxBeforeSend，但不能取消。

4.ajaxSuccess (data: xhr, options, data)：当返回成功时。

5.ajaxError (data: xhr, options, error)：当有错误时。

6.ajaxComplete (data: xhr, options)：请求已经完成后，无论请求是成功或者失败。

7.ajaxStop (global)：如果这是最后一个活跃着的Ajax请求，将会被触发。

默认情况下，Ajax事件在document对象上触发。然而，如果请求的 context 是一个DOM节点，该事件会在此节点上触发然后再DOM中冒泡。唯一的例外是 ajaxStart & ajaxStop这两个全局事件。

$(document).on('ajaxBeforeSend', function(e, xhr, options){})

$.ajax({

type: 'GET',

url: '/projects',

data: { name: 'Zepto.js' },

dataType: 'json',

timeout: 300,

context: $('body'),

success: function(data){

this.append(data.project.html)

error: function(xhr, type){

alert('Ajax error!')

}

})

$.ajax({

type: 'POST',

url: '/projects',

data: JSON.stringify({ name: 'Zepto.js' }),

contentType: 'application/json'

})

105. ajaxJSONP

$.ajaxJSONP(options) 类型：mock XMLHttpRequest

执行JSONP夸域获取数据。

105. $.ajaxSettings

一个包含Ajax请求的默认设置的对象。大部分的设置在 $.ajax中已经描述。以下设置为全局非常有用：

1.timeout (默认： 0)：对Ajax请求设置一个非零的值指定一个默认的超时时间，以毫秒为单位。

2.global (默认： true)：设置为false。以防止触发Ajax事件。

3.xhr (默认：XMLHttpRequest factory)：设置为一个函数，它返回XMLHttpRequest实例(或一个兼容的对象)

4.accepts: 从服务器请求的MIME类型，指定dataType值：

5.script: “text/javascript, application/javascript”

6.json: “application/json”

7.xml: “application/xml, text/xml”

8.html: “text/html”

9.text: “text/plain”

106. $.get

$.get(url,function(data,status,xhr){...}) 类型：XMLHttpRequest

$.get(url,[data],[function(data,status,xhr){...}],[dataType]) 类型：XMLHttpRequest

$.get('/whatevs.html', function(response){

$(document.body).append(response)

})

107. getJSON

$.getJSON(url,function(data,status,xhr){...}) 类型：XMLHttpRequest

$.getJSON(url,[data],function(data,status,xhr){...}) 类型：XMLHttpRequest

$.getJSON('/awesome.json', function(data){

console.log(data)

})

$.getJSON('//example.com/awesome.json?callback=?', function(remoteData){

console.log(remoteData)

})

108. param

$.param(object,[shallow]) 类型：string

$.param(array) 类型:string

序列化一个对象，在Ajax请求中提交数据使用的URL编码的查询字符串表示。如果shallo设置为true.嵌套对象不会被序列化，嵌套数组的值不会使用括号在他们的key上。

如果任何对象的某个属性值是一个函数，而不是一个字符串，该函数被调用并返回值才被序列化。

$.param({ foo: { one: 1, two: 2 }})

//=> "foo[one]=1&foo[two]=2)"

$.param({ ids: [1,2,3] })

//=> "ids[]=1&ids[]=2&ids[]=3"

$.param({ ids: [1,2,3] }, true)

//=> "ids=1&ids=2&ids=3"

$.param({ foo: 'bar', nested: { will: 'not be ignored' }})

//=> "foo=bar&nested[will]=not+be+ignored"

$.param({ foo: 'bar', nested: { will: 'be ignored' }}, true)

//=> "foo=bar&nested=[object+Object]"

$.param({ id: function(){ return 1 + 2 } })

109. $.post

$.post(url,[data],function(data,status,xhr){...},[dataType])

执行Ajax post 请求。这是一个$.ajax的简写方式。

$.post('/create', { sample: 'payload' }, function(response){})

data参数可以是一个字符串

$.post('/create', $('#some_form').serialize(), function(response){

})

110. load

load(url,function(data,status,xhr){...}) 类型:self通过GET Ajax载入远程 HTML 内容代码并插入至当前的集合中。另外，一个css选择器可以在url中指定，像这样，可以使用匹配selector选择

器的HTML内容来更新集合。

$('#some_element').load('/foo.html #bar')

如果没有给定css选择器，将使用完整的返回文本。

请注意，在没有选择器的情况下，任何javascript块都会执行。如果带上选择器，匹配选择器内的script将会被删除。

表单方法：

111. serialize

serialize() 类型string

在Ajax post 请求中将用作提交的表单元素的值编译成URL编码的字符串。

112. serializeArray

serializeArray() 数组：array

将提交的表单元素的值编译成拥有name和value对象组成的数组，不能使用的表单元素，

buttons,未选中的radio,buttons/checkboxs 将会被跳过。

$('form').serializeArray()

//=> [{ name: 'size', value: 'micro' },

// { name: 'name', value: 'Zepto' }]

113. submit

submit() 类型：self

submit(function(e){...}) 类型：self

为“submit”事件绑定一个处理函数，或者触发元素上的"submit"事件。当没有给定function参数时，触发当前表单“submit”事件，并且执行默认的提

交表单行为，除非调用了preventDefault().当给定function参数时，在当前元素上它简单得为其在“submit”事件绑定一个处理函数。

114. $.fx

全局地动画设置：

$.fx.off (在支持css transition 的浏览器中默认为false)：设置true来禁止所有animate() transitions。

$.fx.speeds:用来设置动画时间的对象。

_default(400ms)

fast(200 ms)

slow(600ms)

改变现有值或者添加一个新属性去影响使用一个字符串来设置时间的动画。

115. animate

animate(properties,[duration,[easing,[function(){...}]]]) 类型：self

animate(properties,{duration:msec,easing:type,complete:fn}) 类型：self

animate(animationName,{...}) 类型：self

对当前对象集合中元素惊醒css transition 属性平滑过渡

properties:一个对象，该对象包含了css动画的值，或者css帧动画的名称。

duration(默认400)一毫秒为单位的事件，或者一个字符串。

fast(200 ms)

slow(600 ms)

easing(默认 linear) 指定动画的缓动类型，

ease

linear

ease-in/ease-out

ease-in-out

compleate:动画完成时的回调函数

li>delay 以毫秒为单位的过渡延迟时间，

Zepto 还支持 css transition 属性：

translate(X|Y|Z|3d)

rotate(X|Y|Z|3d)

scale(X|Y|Z)

matrix(3d)

perspective

skew(X|Y)

如果duration参数为0或者$.fx.off 为true(在不支持css transitions的浏览器中默认为true)，动画将不会被执行

替代动画效果的目标位置即将生效，类似的，如果指定的动画不是通过动画完成，而且动画的目标位置即可生效，这种情况第一

个参数是字符串而不是一个对象,它被当作css关键帧动画的名称。

$("#some_element").animate({

opacity: 0.25,

left:

'50px',

color:'#abcdef',

rotateZ:'45deg',

translate3d: '0,10px,0'

}, 500,

'ease-out')

116. Touch

Touch events

“touch”模块添加一下事件，可以使用on 和off.

tap元素tap的时候触发。

singleTap and doubleTap 这一对时间可以用来检测元素上的单击和双击，(如果你不需要检测单击、双击，使用 tap 代替)。

longTap 当一个元素被按住超过750ms 触发。

swipe swipeLeft swipeRight swipeDown 当元素被划过时触发。

<li>List item 1 <span class="delete">DELETE</span></li>

<li>List item 2 <span class="delete">DELETE</span></li>

</ul>

// show delete buttons on swipe

$('#items li').swipe(function(){

$('.delete').hide()

$('.delete', this).show()

})

// delete row on tapping delete button

$('.delete').tap(function(){

$(this).parent('li').remove()

})

</script>