您的位置:首页 > Web前端

前端框架开发指南

2016-03-28 10:44 281 查看


前端框架开发指南

Dom是一款专门针对移动端的JS库,集成了大部分常用DOM操作API,你不需要学习任何新的东西,其用法和jQuery几乎是一样的。

创建一个Dom对象很简单只需通过 $ 对象即可
$(selector, [context])   ⇒ collection


PS. 参数中带有 [ ] 的意指可选的意思


索引

Dom
$
addClass
append
appendTo
attr
children
closest
concat
css
each
eq
filter
find
first
get
hasClass
height
hide
html
insertAfter
insertBefore
is
last
next
nextAll
not
offset
parent
parents
prepend
prependTo
prev
prevAll
prop
remove
removeAttr
removeClass
show
text
toggleClass
val
width
wrap
wrapAll

Utilities
$.camelCase
$
24608
.contains
$.each
$.extend
$.isArray
$.isFunction
$.isPlainObject
$.isWindow
$.map
$.parseJSON
$.parseUrlQuery
$.serializeObject
$.trim
$.trimAll
$.type

Event
$.Event
off
on
one
$.proxy
Touch events
trigger

AJAX
$.ajax
$.get
$.getJSON
$.param
$.post


$

$(selector, [context]) ⇒ collection
$() ⇒ same collection
$() ⇒ collection
$(htmlString) ⇒ collection 通过执行css选择器,包装DOM节点,或者通过一个html字符串创建多个元素 来创建一个Dom集合对象。

Dom集合是一个类似数组的对象,它具有链式方法来操作它指向的DOM节点,除了 $ 对象上的直接方法外(如$.extend),文档对象中的所有方法都是集合方法。

如果选择器中存在content参数(css选择器,DOM,或者Dom集合对象),那么只在所给的节点背景下进行css选择器;这个功能和使用$(context).find(selector)是一样的。

当给定一个html字符串可快速创建一个DOM节点。
$('div')  //=> 所有页面中的div元素
$('#foo') //=> ID 为 "foo" 的元素
$('.foo') //=> class 为 "foo" 的元素
// 创建元素:
$("<p>Hello</p>") //=> 新的p元素


addClass

addClass(name) ⇒ self

为每个匹配的元素添加指定的class类名。多个class参数名称使用空格分隔。
$('p').addClass('intro');


append

append(content) ⇒ self

在每个匹配的元素末尾插入内容(内部插入)。内容可以为html字符串,dom节点,或者Dom集合。
$('ul').append('<li>new list item</li>')


appendTo

appendTo(target) ⇒ self

将匹配的元素插入到目标元素的末尾(内部插入)。这个有点像 append,但是插入的目标与其相反。
$('<li>new list item</li>').appendTo('ul')


attr

attr(name) ⇒ string
attr(name, value) ⇒ self
attr({ name: value, name2: value2, ... }) ⇒ self

读取或设置dom的属性。如果没有给定value参数,则读取对象集合中第一个元素的属性值。当给定了value参数。则设置对象集合中所有元素的该属性的值。当value参数为null,那么这个属性将被移除(类似removeAttr),多个属性可以通过对象键值对的方式进行设置。

ps. 要读取DOM自身带有的属性如 checked和selected, 使用 prop。
var form = $('form')
form.attr('action')             //=> 读取值
form.attr('action', '/create')  //=> 设置值
form.attr('action', null)       //=> 移除属性

// 多个属性:
form.attr({
action: '/create',
method: 'post'
})


children

children([selector]) ⇒ collection

获得每个匹配元素集合元素的直接子元素,如果给定selector,那么返回的结果中只包含符合css选择器的元素。
$('ol').children('*:nth-child(2n)')
//=> every other list item from every ordered list


closest

closest(selector, [context]) ⇒ collection

从元素本身开始,逐级向上级元素匹配,并返回最先匹配selector的元素。如果给定context节点参数,那么只匹配该节点的后代元素。这个方法与 parents(selector)有点相像,但它只返回最先匹配的祖先元素。
var input = $('input[type=text]')
input.closest('form')


concat

concat(nodes, [node2, ...]) ⇒ self

添加元素到一个Dom对象集合形成一个新数组。如果参数是一个数组,那么这个数组中的元素将会合并到Dom对象集合中。


css

css(property) ⇒ value
css(property, value) ⇒ self
css({ property: value, property2: value2, ... }) ⇒ self

读取或设置DOM元素的css属性。当value参数不存在的时候,返回对象集合中第一个元素的css属性。当value参数存在时,设置对象集合中每一个元素的对应css属性。

多个属性可以利用对象键值对的方式进行设置。

当value为空(空字符串,null或undefined),那个css属性将会被移除。当value参数为一个无单位的数字,如果该css属性需要单位,“px”将会自动添加到该属性上。
var elem = $('h1')
elem.css('background-color')          // read property
elem.css('background-color', '#369')  // set property
elem.css('background-color', '')      // remove property

// set multiple properties:
elem.css({ backgroundColor: '#8EE', fontSize: 28 })


each

each(function(index, item){ ... }) ⇒ self

遍历一个对象集合每个元素。在迭代函数中,this关键字指向当前项(作为函数的第二个参数传递)。如果迭代函数返回 false,遍历结束。
$('form input').each(function(index){
console.log('input %d is: %o', index, this)
})


eq

eq(index) ⇒ collection

从当前对象集合中获取给定索引值(以0为基数)的元素。
$('li').eq(0)   //=> only the first list item
$('li').eq(-1)  //=> only the last list item


filter

filter(selector) ⇒ collection
filter(function(index){ ... }) ⇒ collection

过滤对象集合,返回对象集合中满足css选择器的项。如果参数为一个函数,函数返回有实际值得时候,元素才会被返回。在函数中, this 关键字指向当前的元素。

与此相反的功能,查看not.


find

find(selector) ⇒ collection

在选中的每一个元素的后代中查找指定的元素。
var form = $('#myform')
form.find('input')


first

first() ⇒ collection

获取当前对象集合中的第一个元素。
('form').first()


get

get() ⇒ array
get(index) ⇒ DOM node

从当前对象集合中获取所有元素或单个元素。当index参数不存在的时,以普通数组的方式返回所有的元素。当指定index时,只返回该值的元素。这点与eq不同,该方法返回的是DOM节点,不是Dom对象集合。
var elements = $('h2')
elements.get()   //=> get all headings as an array
elements.get(0)  //=> get first heading node


hasClass

hasClass(name) ⇒ boolean

检查对象集合中是否有元素含有指定的class。
<ul>
<li>list item 1</li>
<li class="yaotaiyang">list item 2</li>
<li>list item 3</li>
</ul>
<p>a paragraph</p>

<script type="text/javascript">
$("li").hasClass("yaotaiyang");
//=> true
</script>


height

height() ⇒ number
height(value) ⇒ self

获取或设置匹配元素的值。当没有给定value参数,返回第一个元素的值。当给定value参数,那么将设置所有元素的值。
$('#foo').height()   // => 123
$(window).height()   // => 838 (viewport height)
$(document).height() // => 22302


hide

hide() ⇒ self

通过设置css的属性display 为 none来将对象集合中的元素隐藏。


html

html() ⇒ string
html(content) ⇒ self

获取或设置对象集合中元素的HTML内容。当没有给定content参数时,返回对象集合中第一个元素的innerHtml。当给定content参数时,用其替换对象集合中每个元素的内容。


insertAfter

insertAfter(target) ⇒ self

把当前选中的每一个元素插入到指定的目标之后。目标(target)应该是一个 CSS 选择器或者 HTML 元素 或者 Dom集合
$('form label').insertAfter('<p>A note below the label</p>')


insertBefore

insertBefore(target) ⇒ self

把当前选中的每一个元素插入到指定的目标之前(外部插入)。目标(target)应该是一个 CSS 选择器或者 HTML 元素 或者 Dom集合
$('table').insertBefore('<p>See the following table:</p>')


is

is(CSSSelector) ⇒ boolean
is(HTMLElement) ⇒ boolean

判断当前元素集合中的第一个元素是否符合指定的CSS选择器 判断选中的元素是否是给定的 DOM 元素或者 Dom 集合


last

last() ⇒ collection

获取对象集合中最后一个元素。
$('li').last()


next

next() ⇒ collection
next(selector) ⇒ collection

获取对象集合中每一个元素的下一个兄弟节点(可以选择性的带上过滤选择器)。
$('dl dt').next()   //=> the DD elements


nextAll

nextAll() ⇒ collection
nextAll(selector) ⇒ collection

获得当前选中的每一个元素之后的全部兄弟元素。如果提供了一个选择器(selector),那么会用这个选择器来过滤这些兄弟元素。
$('dl dt').nextAll()   //=> the DD elements


not

not(selector) ⇒ collection
not(collection) ⇒ collection
not(function(index){ ... }) ⇒ collection

过滤当前对象集合,获取一个新的对象集合,它里面的元素不能匹配css选择器。如果另一个参数为Dom对象集合,那么返回的新Dom对象中的元素都不包含在该参数对象中。如果参数是一个函数。仅仅包含函数执行为false值的时候的元素,函数的 this 关键字指向当前循环元素。

与它相反的功能,查看 filter.


offset

offset() ⇒ object

获取当前选中元素的第一个元素相对 document 的位置偏移


parent

parents([selector]) ⇒ collection

获取对象集合每个元素所有的祖先元素。如果css选择器参数给出,过滤出符合条件的元素。

如果想获取直接父级元素,使用 parent。如果只想获取到第一个符合css选择器的元素,使用closest。
$('h1').parents()   //=> [<div#container>, <body>, <html>]


parents

parents([selector]) ⇒ collection

获取对象集合每个元素所有的祖先元素。如果css选择器参数给出,过滤出符合条件的元素。

如果想获取直接父级元素,使用 parent。如果只想获取到第一个符合css选择器的元素,使用closest。
('h1').parents()   //=> [<div#container>, <body>, <html>]


prepend

prepend(content) ⇒ self

将参数内容插入到每个匹配元素的前面(元素内部插入)。插入的元素可以是html字符串片段,一个dom节点,或者一个Dom集合。
$('ul').prepend('<li>first list item</li>')


prependTo

prependTo(target) ⇒ self

将所有元素插入到目标前面(元素内部插入)。这有点像prepend,但是是相反的方式。
$('<li>first list item</li>').prependTo('ul')


prev

prev() ⇒ collection
prev(selector) ⇒ collection

获取对象集合中每一个元素的前一个兄弟节点,通过选择器来进行过滤。


prevAll

prevAll() ⇒ collection
prevAll(selector) ⇒ collection

获得当前选中的每一个元素之前的全部兄弟元素。如果提供了一个选择器(selector),那么会用这个选择器来过滤这些兄弟元素。


prop

prop(name) ⇒ value
prop(name, value) ⇒ self
prop({ name: value, name2: value2, ... }) ⇒ self

读取或设置dom元素的属性值。它在读取属性值的情况下优先于 attr,因为这些属性值会因为用户的交互发生改变,如checked 和 selected。


remove

remove() ⇒ self

从其父节点中删除当前集合中的元素,有效的从dom中移除。


removeAttr

removeAttr(name) ⇒ self

移除当前对象集合中所有元素的指定属性。


removeClass

removeClass([name]) ⇒ self

移除当前对象集合中所有元素的指定class类名。多个class参数名称可以利用空格分隔。下例移除了两个class。
<input class="taiyang yueliang" id="check1"/>

<script type="text/javascript">
$("#check1").removeClass("taiyang yueliang")
</script>


show

show() ⇒ self

恢复对象集合中每个元素默认的“display”值。如果你用 hide将元素隐藏,用该属性可以将其显示。相当于去掉了display:none。


text

text() ⇒ string
text(content) ⇒ self

获取或者设置所有对象集合中元素的文本内容。当没有给定content参数时,返回当前对象集合中第一个元素的文本内容。当给定content参数时,使用它替换对象集合中所有元素的文本内容。它有点像 html,与它不同的是它不能用来获取或设置 HTML。


toggleClass

toggleClass(names) ⇒ self

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类。如果class的名称存在则删除它,如果不存在,就添加它


val

val() ⇒ string
val(value) ⇒ self

获取或设置匹配元素的值。当没有给定value参数,返回第一个元素的值。当给定value参数,那么将设置所有元素的值。


width

width() ⇒ number
width(value) ⇒ self

获取或设置匹配元素的值。当没有给定value参数,返回第一个元素的值。当给定value参数,那么将设置所有元素的值。
$('#foo').width()   // => 123
$(window).width()   // => 768 (viewport width)
$(document).width() // => 768


wrap

wrap(structure) ⇒ self
wrap(function(index){ ... }) ⇒ self

在每个匹配的元素外层包上一个html元素。structure参数可以是一个单独的元素或者一些嵌套的元素。也可以是一个html字符串片段或者dom节点。还可以是一个生成用来生成包含元素的回调函数,这个函数返回前两种类型的包裹片段。

需要提醒的是:该方法对于dom中的节点有着很好的支持。如果将wrap() 用在一个新的元素上,然后再将结果插入到document中,此时该方法无效。
$('.buttons a').wrap('<span>')

$('code').wrap('<div class=highlight><pre /></div>')

$('input').wrap(function(index){
return '<span class=' + this.type + 'field />'
})
//=> <span class=textfield><input type=text /></span>,
//   <span class=searchfield><input type=search /></span>

// WARNING: will not work as expected!
$('<em>broken</em>').wrap('<li>').appendTo(document.body)
// do this instead:
$('<em>better</em>').appendTo(document.body).wrap('<li>')


wrapAll

wrapAll(structure) ⇒ self

在所有匹配元素外面包一个单独的结构。结构可以是单个元素或几个嵌套的元素,并且可以通过在作为HTML字符串或DOM节点。
$('a.button').wrapAll('<div id=buttons />')


Utilities


$.camelCase

$.camelCase(string) ⇒ string

将一组字符串变成“骆驼”命名法的新字符串,如果该字符已经是“骆驼”命名法,则不变化。
$.camelCase('hello-there') //=> "helloThere"
$.camelCase('helloThere')  //=> "helloThere"


$.contains

$.contains(parent, node) ⇒ boolean

检查父节点是否包含给定的dom节点,如果两者是相同的节点,则返回 false。


$.each

$.each(collection, function(index, item){ ... }) ⇒ collection

遍历数组元素或以key-value值对方式遍历对象。回调函数返回 false 时停止遍历。
$.each(['a', 'b', 'c'], function(index, item){
console.log('item %d is: %s', index, item)
})

var hash = { name: 'Dom.js', size: 'micro' }
$.each(hash, function(key, value){
console.log('%s: %s', key, value)
})


$.extend

$.extend(target, [source, [source2, ...]]) ⇒ target
$.extend(true, target, [source, ...]) ⇒ target

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

默认情况下为浅拷贝(浅复制)。如果第一个参数为true表示深度拷贝(深度复制)。
var target = { one: 'patridge' },
source = { two: 'turtle doves' }

$.extend(target, source)
//=> { one: 'patridge',
//     two: 'turtle doves' }


$.isArray

$.isArray(object) ⇒ boolean

如果object是array,则返回ture。


$.isFunction

$.isFunction(object) ⇒ boolean

如果object是function,则返回ture。


$.isPlainObject

$.isPlainObject(object) ⇒ boolean

测试对象是否是“纯粹”的对象,这个对象是通过 对象常量("{}") 或者 new Object 创建的,如果是,则返回true。
$.isPlainObject({})         // => true
$.isPlainObject(new Object) // => true
$.isPlainObject(new Date)   // => false
$.isPlainObject(window)     // => false


$.isWindow

$.isWindow(object) ⇒ boolean

如果object参数为一个window对象,那么返回true。


$.map

$.map(collection, function(item, index){ ... }) ⇒ collection

通过遍历集合中的元素,返回通过迭代函数的全部结果,(一个新数组)null 和 undefined 将被过滤掉。
$.map([1,2,3,4,5],function(item,index){
if(item>1){return item*item;}
});
// =>[4, 9, 16, 25]

$.map({"yao":1,"tai":2,"yang":3},function(item,index){
if(item>1){return item*item;}
});
// =>[4, 9]


$.parseJSON

$.parseJSON(string) ⇒ object

原生JSON.parse方法的别名。(接受一个标准格式的 JSON 字符串,并返回解析后的 JavaScript 对象。)


$.parseUrlQuery

$.parseUrlQuery(url) ⇒ object

将url中传递的参数转换为JSON对象
var query = $$.parseUrlQuery('http://google.com/?id=5&foo=bar');
console.log(query); //-> {id: 5, foo: 'bar'}


$.serializeObject

$.serializeObject(obj) ⇒ String

将JSON对象转换为url中传递的参数
var params = {foo: 'bar', id: 5};
console.log($$.serializeObject(params)); //-> 'foo=bar&id=5'


$.trim

$.trim(string) ⇒ string

删除字符串首尾的空白符。类似String.prototype.trim()。


$.trimAll

$.trimAll(string) ⇒ string

删除字符串所有的空白符。


$.type

$.type(object) ⇒ string

获取JavaScript 对象的类型。可能的类型有: null、undefined、 boolean、 number、 string、 function 、array、 date、 regexp、 object、 error。

对于其它对象,它只是简单报告为“object”,如果你想知道一个对象是否是一个javascript普通对象,使用 isPlainObject。


Event


$.Event

$.Event(type, [properties]) ⇒ event

创建并初始化一个指定的DOM事件。如果给定properties对象,使用它来扩展出新的事件对象。默认情况下,事件被设置为冒泡方式;这个可以通过设置bubbles为false来关闭。

一个事件初始化的函数可以使用 trigger来触发。
$.Event('customEv', { bubbles: false })


off

off(type, [selector], function(e){ ... }) ⇒ self
off({ type: handler, type2: handler2, ... }, [selector]) ⇒ self
off(type, [selector]) ⇒ self
off() ⇒ self

移除通过 on 添加的事件.移除一个特定的事件处理程序, 必须通过用on()添加的那个相同的函数。否则,只通过事件类型调用此方法将移除该类型的所有处理程序。如果没有参数,将移出当前元素上全部的注册事件。


on

on(type, [selector], function(e){ ... }) ⇒ self
on({ type: handler, type2: handler2, ... }, [selector]) ⇒ self

添加事件处理程序到对象集合中的元素上。多个事件可以通过空格的字符串方式添加,或者以事件类型为键、以函数为值的对象 方式。如果给定css选择器,当事件在匹配该选择器的元素上发起时,事件才会被触发(即事件委派,或者说事件代理)。

事件处理程序在添加该处理程序的元素、或在给定选择器情况下匹配该选择器的元素的上下文中执行(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)


one

one(type, [selector], function(e){ ... }) ⇒ self
one({ type: handler, type2: handler2, ... }, [selector]) ⇒ self

添加一个处理事件到元素,当第一次执行事件以后,该事件将自动解除绑定,保证处理函数在每个元素上最多执行一次。selector 等参数说明请查看 on()


$.proxy

$.proxy(fn, context) ⇒ function
$.proxy(context, property) ⇒ function

接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context)语境,新函数中this指向context参数。另外一种形式,原始的function是从上下文(context)对象的特定属性读取。
var obj = {name: 'Dom'},
handler = function(){ console.log("hello from + ", this.name) }

// ensures that the handler will be executed in the context of `obj`:
$(document).on('click', $.proxy(handler, obj))


Touch events

“touch”模块添加以下事件,可以使用 on 和 off。
tap —元素tap的时候触发。
singleTap and doubleTap — 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击,使用 tap 代替)。
longTap — 当一个元素被按住超过750ms触发。
swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过时触发。(可选择给定的方向)

这些事件也是所有Dom对象集合上的快捷方法。
<style>.delete { display: none; }</style>

<ul id=items>
<li>List item 1 <span class=delete>DELETE</span></li>
<li>List item 2 <span class=delete>DELETE</span></li>
</ul>

<script>
// 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>


trigger

trigger(event, [args]) ⇒ self

在对象集合的元素上触发指定的事件。事件可以是一个字符串类型,也可以是一个 通过$.Event 定义的事件对象。如果给定args参数,它会作为参数传递给事件函数。
// add a handler for a custom event
$(document).on('customEv', function(e, from, to){
console.log('change on %o with data %s, %s', e.target, from, to)
})
// trigger the custom event
$(document.body).trigger('customEv', ['one', 'two'])
仅仅支持在dom元素上触发事件。


AJAX


$.ajax

$.ajax(options) ⇒ XMLHttpRequest

执行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 (查看 JSONP)。此时 contentType, dataType, headers有限制,async 不被支持。


Ajax 回调函数

你可以指定以下的回调函数,他们将按给定的顺序执行:

beforeSend(xhr, settings):请求发出前调用,它接收xhr对象和settings作为参数对象。如果它返回 false ,请求将被取消。

success(data, status, xhr):请求成功之后调用。传入返回后的数据,以及包含成功代码的字符串。

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

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


Ajax 事件

当global: true时。在Ajax请求生命周期内,以下这些事件将被触发。

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

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

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

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

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

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

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

默认情况下,Ajax事件在document对象上触发。然而,如果请求的 context 是一个DOM节点,该事件会在此节点上触发然后再DOM中冒泡。唯一的例外是 ajaxStart & ajaxStop这两个全局事件。
$(document).on('ajaxBeforeSend', function(e, xhr, options){
// This gets fired for every Ajax request performed on the page.
// The xhr object and $.ajax() options are available for editing.
// Return false to cancel this request.
})

$.ajax({
type: 'GET',
url: '/projects',
// data to be added to query string:
data: { name: 'Dom' },
// type of data we are expecting in return:
dataType: 'json',
timeout: 300,
context: $('body'),
success: function(data){
// Supposing this JSON payload was received:
//   {"project": {"id": 42, "html": "<div>..." }}
// append the HTML to context object.
this.append(data.project.html)
},
error: function(xhr, type){
alert('Ajax error!')
}
})

// post a JSON payload:
$.ajax({
type: 'POST',
url: '/projects',
// post payload:
data: JSON.stringify({ name: 'Dom' }),
contentType: 'application/json'
})


$.get

$.get(url, function(data, status, xhr){ ... }) ⇒ XMLHttpRequest

执行一个Ajax GET请求。这是一个 $.ajax的简写方式。
$.get('/whatevs.html', function(response){
$(document.body).append(response)
})


$.getJSON

$.getJSON(url, function(data, status, xhr){ ... }) ⇒ XMLHttpRequest

通过 Ajax GET请求获取JSON数据。这是一个 $.ajax 的简写方式。
$.getJSON('/awesome.json', function(data){
console.log(data)
})

// fetch data from another domain with JSONP
$.getJSON('//example.com/awesome.json?callback=?', function(remoteData){
console.log(remoteData)
})


$.param

$.param(object, [shallow]) ⇒ string
$.param(array) ⇒ string

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

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

此外,还接受 serializeArray格式的数组,其中每个项都有 “name” 和 “value”属性。
$.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 } })
//=> "id=3"


$.post

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

执行Ajax POST请求。这是一个 $.ajax 的简写方式。
$.post('/create', { sample: 'payload' }, function(response){
// process response
})
data 参数可以是一个字符串:

$.post('/create', $('#some_form').serialize(), function(response){
// ...
})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  移动应用开发