Zepto Basic Knowledge (6)

101.$.ajax
$.ajax (Options) Type: xmlttprequest
Executes an AJAX request. He could be a local resource, or cross-domain through a browser that supports HTTP access control or through JSONP.
Options:
Type (default: "Get"): Request Method ("Get", "POST", or other)
URL (default: Current address): Address of the sending request
Data (default: None): Sent to the server, and if it is a GET request, it is automatically stitched to the URL as a parameter. A non-string object will get the serialized string through $.param.
ProcessData (Default: TRUE): For non-GET requests. Whether to automatically convert data to a string.
ContentType (default: "application/x-www-form-urlencoded"): Content encoding type when sending information to the server. (This can also be done by setting headers).

The

Sets a default value by setting False to skip.
MimeType (default: None): Overrides the MIME type of the response.
DataType (default: None): Expected data type returned by the server ("JSON", "Jsonp", "xml", "HTML", or "text")
Jsonp (default: "Callback"): Jsonp back Survey Name of the parameter to be consulted
Jsonpcallback (default: "Jsonp{n}"): The string of the global JSONP callback function (or the returned function) name. Set this key to enable the browser's cache.
Timeout (default: 0): The request time-out in milliseconds, 0 means no time-out.
Extra HTTP Information Header object in Headers:ajax request
Async (default: TRUE): All requests are asynchronous by default. Set this to False if you need to send a synchronization request.
Global (Default: TRUE): The request will trigger the global Ajax event handler, and setting to false will not trigger the global Ajax event.
Context (default: Window): This object is used to set the context of the AJAX-related callback function (this point).
Traditional (default: false): Activates the traditional way to get the serialized data through the $.param.
Cache (Default: TRUE): Whether the browser should be allowed to cache get responses. Starting with v1.1.4, the default is False when the datatype option is "script" or JSONP.
Xhrfields (default: None): An object contains properties that are copied verbatim to an instance of XMLHttpRequest.
Username & Password (default: None): HTTP Basic authentication credentials.
If the URL contains =? Or DataType is "JSONP" This emphasis will be injected into a <script;
tag instead of using XMLHttpRequest at this time ContentType, DataType, headers have restrictions, async is not supported.

102.Ajax Callback Functions
You can specify the callback function that they will execute in a given sequence:
1.beforeSend (xhr,setting) request is issued before the callback, it receives the XHR object and settings as a Parameter object, if he returns false
The request will be canceled.
2.success (DATA,STATUS,XHR): Call back after successful request, incoming data returned, and code snippet containing the success
3.error (xhr,errortype,error); Called when an error is requested. (Timeout, parse error, or status code not in HTTP 2xx)
4.complete (xhr,status): Called when the request succeeds, regardless of the request failure or success.

103.Promise Callback Interface
If the optional "callbacks" and "deferred" modules are loaded, the XHR object returned from $.ajax () implements the
Promise interface Chain-type problem.
Xhr.done (function (data, status, XHR) {...})
Xhr.fail (function (XHR, ErrorType, error) {...})
Xhr.always (function () {...})
Xhr.then (function () {...})
These methods replace the success, error, and complete callback options.
104.Ajax Events
When Global:true. The following event trophy is triggered within the AJAX request life cycle.
1.ajaxStart (Global): If no other AJAX request is currently active, it will be triggered.
2.ajaxBeforeSend (DATA:XHR, Options): Can be canceled before sending a request.
3.ajaxSend (DATA:XHR, options): Like Ajaxbeforesend, but cannot be canceled.
4.ajaxSuccess (DATA:XHR, Options, data): When the return is successful.
5.ajaxError (DATA:XHR, Options, error): When there is an error.
6.ajaxComplete (DATA:XHR, Options): After the request has been completed, whether the request is successful or failed.
7.ajaxStop (Global): If this is the last active Ajax request, it will be triggered.
By default, Ajax events are triggered on the document object. However, if the requested context is a DOM node, the event fires on this node and then bubbles in the DOM. The only exception is Ajaxstart & Ajaxstop, the two global events.
$ (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 '
})

Ajaxjsonp .
$.AJAXJSONP (options) Type: mock XMLHttpRequest
Perform JSONP to get data.

$.ajaxsettings .
An object that contains the default settings for the AJAX request. Most of the settings are already described in $.ajax. The following settings are very useful for global:
1.timeout (default: 0): Sets a nonzero value for the AJAX request to specify a default time-out, in milliseconds.
2.global (Default: TRUE): Set to False. To prevent the triggering of Ajax events.
3.XHR (default: XMLHttpRequest Factory): Set to a function that returns a XMLHttpRequest instance (or a compatible object)
4.accepts: Specify the datatype value from the MIME type requested by the server:
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) {...}) Type: XMLHttpRequest
$.get (Url,[data],[function (DATA,STATUS,XHR) {...}],[datatype]) type: XMLHttpRequest
$.get ('/whatevs.html ', function (response) {
$ (document.body). Append (response)
})

107.Getjson
$.getjson (Url,function (DATA,STATUS,XHR) {...}) Type: XMLHttpRequest
$.getjson (Url,[data],function (DATA,STATUS,XHR) {...}) Type: 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]) type: string
$.param (Array) Type: string
serializes a An object that submits the data in an AJAX request using a URL-encoded query string representation. If Shallo is set to true. Nested objects are not serialized, and the values of the nested arrays do not use parentheses on their keys.
If a property value of any object is a function, not a string, the function is called and the return value is serialized.　　　　
$.param ({foo: {one:1, Two:2}})
//=> "foo[one]=1&foo[two]=2"
$.param ({ids: []})
= = "Ids[]=1&ids[]=2&ids[]=3"
$.param ({ids: []}, True)
//=> "ids=1&ids=2&ids=3 "
$.param ({foo: ' Bar ', nested: {would: ' not being ignored '}})
//=>" foo=bar&nested[will]=not+be+ignored " 　　
$.param ({foo: ' Bar ', nested: {would: ' Be ignored '}}, True)
//=> "Foo=bar&nested=[object+object]"
$.param ({id:function () {return 1 + 2}})

109.$.post
$.post (Url,[data],function (DATA,STATUS,XHR) {...},[datatype])
Executes an AJAX POST request. This is an abbreviated way of $.ajax.
$.post ('/create ', {sample: ' Payload '}, function (response) {})
The data parameter can be a string
$.post ('/create ', $ (' #some_form '). Serialize (), function (response) {
})

A.load

Load (url,function (DATA,STATUS,XHR) {...}) type: Self
Loads the remote HTML content code and inserts it into the current collection via get Ajax. In addition, a CSS selector can be specified in the URL, such that the matching selector can be used to select

To update the collection with the HTML content of the
$ (' #some_element '). Load ('/foo.html #bar ')
If no CSS selector is given, the full return text is used.
Note that any JavaScript block will execute without a selector. If you bring a selector, the script within the matching selector will be deleted.
Note that any JavaScript block will execute without a selector. If you bring a selector, the script within the matching selector will be deleted.
Forms method:

111.Serialize
Serialize () type string
Compiles the value of the form element used as a submission into a URL-encoded string in an AJAX POST request.

Serializearray .
Serializearray () array: array
Compiles the values of the submitted form elements into an array that has a name and value object, and cannot use the form elements.
buttons, unchecked Radio,buttons/checkboxs will be skipped.
$ (' form '). Serializearray ()
= = [{name: ' Size ', Value: ' Micro '},
{name: ' name ', Value: ' Zepto '}]

113.Submit
Submit () Type: Self
Submit (function (e) {...}) type: Self
Bind a handler function for the "submit" event, or trigger the "submit" event on the element. When no function parameter is given, the current form "Submit" event is triggered and the default

form behavior, unless Preventdefault () is called.
When given a function parameter, it is simple to bind a handler function for its "submit" event on the current element.

$.fx .
To animate settings globally:
$.fx.off (default to False in browsers that support CSS transition): Set true to disallow all animate () transitions.
$.fx.speeds: The object used to set the animation time.
_default (400ms)
Fast (ms)
Slow (600MS)
Changing an existing value or adding a new property affects the animation that uses a string to set the time.

.Animate
Animate (Properties,[duration,[easing,[function () {...}]) Type: Self
Animate (Properties,{duration:msec,easing:type,complete:fn}) Type: Self
Animate (animationname,{...}) type: Self
Wakes the elements of the current object collection to the CSS Transition Property smooth transition
Properties: An object that contains the value of a CSS animation, or the name of a CSS frame animation.
Duration (default 400) an event of one millisecond, or a string.
Fast (ms)
Slow (ms)
Easing (default linear) specifies the ease type of the animation,
Ease
Linear
Ease-in/ease-out
Ease-in-out
Compleate: callback function when animation is complete
Li>delay the transition delay time in milliseconds,

Zepto also supports CSS transition properties:
Translate (x| y| Z|3D)
Rotate (x| y| Z|3D)
Scale (x| y| Z)
Matrix (3d)
Perspective
Skew (x| Y
If the duration parameter is 0 or $.fx.off is True (default to True in browsers that do not support CSS transitions), the animation will not be executed
The target position of the alternate animation effect is coming into effect, similarly, if the specified animation is not done by animation, and the target location of the animation takes effect, the first

A parameter is a string instead of an object, which is used as the name of the CSS Keyframe animation.
$ ("#some_element"). Animate ({
opacity:0.25,
Left
' 50px ',
Color: ' #abcdef ',

Rotatez: ' 45deg ',
Translate3d: ' 0,10px,0 '
}, 500,
' Ease-out ')

A.Touch
Touch Events
The "touch" module adds an event that can be used on and off.
Tap element when tap is triggered.
Singletap and Doubletap This pair of times can be used to detect clicks and double clicks on elements (if you don't need to detect a click, double click, use Tap instead).
Longtap when an element is pressed more than 750ms trigger.
Swipe Swipeleft swiperight Swipedown When the element is crossed out of the trigger.
<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>

Zepto Basic Knowledge (6)