Zepto basic Knowledge (5)

Source: Internet
Author: User

Bayi.width
Width () Type: number
Width (value) Type: Self
Width (function (index,oldwidth) {...}) type: Self
Gets the width of the first element in the collection of objects, or sets the width of all the elements in the object collection.
$ (' #foo '). Width ()//123
$ (window). Width ()//768
$ (document). Width ()//768


The.Wrap
Wrap (structure) type: Self
Wrap (function (index) {...}) type: Self
An HTML element on the outer package of each matching element. The structure parameter can be in a single element or some nested element,
It can also be an HTML string fragment or a dome node. It can also be a callback function that produces a package element that returns the first two types of parcel fragments.
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> ')

Wrapall .
Wrapall (structure) type: Self
A separate structure is wrapped outside of all matching elements, and the structure can be a single element or several nested elements, and can be passed through the
As an HTML string or DOM node.
Wrap all buttons inch a single div:
$ (' A.button '). Wrapall (' <div id=buttons/> ')


Wraplnner .
Wrapinner (structure) type: Self
Wrapinner (function (index) {})
The contents of each element are wrapped in a separate structure, which can be a component or multiple nested components, and can be
As an HTML string or a DOM node, or a callback function that generates a PACKAGE element. This function returns the first two types of parcel fragments.
$ (' Nav a '). Wrapinner (' <span> ')
$ (' ol Li '). Wrapinner (' <p></em>>></p> ')


.$. Event
$. Event (Type,[properties]) Type: Event
Creates and initializes a specified DOM event. If a properties object is given, it is used to extend the new event object.
By default, events are set to bubble mode, which can be turned off by setting bubbles to false.
$. Event (' Mylib:change ', {bubbles:false})


$proxy .
$.proxy (fn,context) Type: function
$.proxy (fn,context,[additionalarguments ...]) Type: function
$.proxy (context,propery) Type: function
$.proxy (context,property,[additionalarguments ...]) Type: function
Accepts a function and then returns a new function, and the new function always maintains a specific context context
In the new function, this points to the context parameter, and in the other form, the original function is read from a specific property of the context object.
If more than 2 additional parameters are passed, they are used for the function reference passed to the FN parameter.
var obj = {name: ' Zepto '}
Handler = function () {console.log ("Hello from+", this.name)}
$ (document). On (' Click ', $.proxy (handler,obj))


The.bind
Bind (Type,function (e) {...}) type: Self
Bind (Type,[data],functon (e) {...}) type: Self
Bind (Type:handler,type2:handler2,....) type: Self
Bind (Type:handler,type2:handler2,....) type: Self
Binds an element to a processing event.

delegate .
Delegate (Sekector,type,function (e) {...}) type;
Delegate (Selector,{type:handler,type2:handler2,....}) type; Self
Attaches a processing event to an element that matches all selectors based on a specific set of root elements, and the matching element may now be created in the future.


. Die
Die (Type,function (e) {...}) type self
Die ({type:handler,type2:handler2,....}) type;
Delete events that were added through live.
event.isdefaultprevented .
Event.isdefaultprevented () Type: Boolean
Returns True if Preventdefaultprevented () is called by an instance of the event, which can be used as a cross-platform alternative
Native defaultprevented attributes, if defaultprevented is missing or unreliable under some browsers.
var event = $. Event (' Custom ')
Element.trigger (Event)
Event.isdefaultprevented ()


event.islmmediapropagationstopped () type: Boolean
Returns True if Stopimmediatepropagationstopped () is called by an instance of the event. Zepto in No
Implemented in browsers that support this native method. (e.g. older versions of Android).


event.ispropagationstopped .
Event.ispropagationstopped () Type Boolean
Returns True if Stoppropagation () is called by an instance of the event

No.live is not recommended, use on instead.
Live (Type,function (e) {...}) type self
Live ({type:handler,type2:handler2,...}) type self
Add each event handler to match all elements that match the current selector, and the matching elements may be created or not in the future.


94.off
Off (Type,[selector,function (e) {...}]) type;
Off ({Type:handler,type2:handler2...},[selector]) type self
Off (Type,[selector]) type;
Off () type self
Removes an event added via on. Removes a specific event handler that must be added by using the same function on (). Otherwise, calling this method only through the event type will remove all handlers of that type.

If there are no parameters, all registration events are moved out of the current element.


. 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+
Adds an event handler to an element in the object collection. Multiple events can be added as a string of spaces, or as an object with the event type key and function as the value. If a CSS selector is given, when the event

Events are triggered when the element that matches the selector is launched (Fool's Wharf Note: Event delegation, or event proxy).

Given the data parameter, this value will be used as a useful Event.data property during event handler execution

The event handler executes in the context of the element that adds the handler, or the element that matches the selector in the case of a given selector (fool's Wharf Note: This points to the element that triggered the event). When an event

False,preventdefault () and stoppropagation () are called by the current event to prevent default browser actions, such as links.

If False is passed as a parameter to the method in the position of the callback function, it is equivalent to passing a function that returns false directly. (Fool's Wharf Note: will be false as a parameter of function (e) {...}

Number, as a shorthand for function () {return false;}, for example: $ ("a.disabled"). On ("click", False), which is equivalent to $ ("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, [selector], [data], function (e) {...}) ⇒self v1.1+
One ({type:handler, Type2:handler2, ...}, [selector]) ⇒self
One ({type:handler, Type2:handler2, ...}, [selector], [data]) ⇒self v1.1+
Adds a processing event to an element, which is automatically unbound after the first execution of the event, guaranteeing that the processing function executes at most once on each element. See. On () for parameter descriptions such as selector and data.


Trigger .
Trigger (Event,[args]) type: Self
Fires the specified event on an element of an object collection, either as a string type or as a pass through $. of the event definition
The event object, if given the args parameter, is passed as a parameter to the event function.
$ (document). On (' Mylib:change ', function (E, from, to) {
Console.log (' Change in%o with data%s,%s ', E.target, from, to)
})
Trigger the custom Event
$ (document.body). Trigger (' Mylib:change ', [' One ', ' both '])


98.Triggerhandler
Triggerhandler (Event,[args]) type self
Like trigger, it only fires events on the current element, but does not bubble.
$ ("input"). Triggerhandler (' Focus ');
The focus event on input is triggered, but input does not get the focus
$ ("input"). Trigger (' focus ');
When the focus event on input is triggered, input gets the focus


unbind .
Unbind (Type,function (e) {...}) type: Self
Unbind ({type:handler,type1:handler2,...}) Type: Self
Removes an event registered through bind.


undelegate .
Undelegate (Selector,type,function (e) {...}) type self
Undelegate (Selector,{type:handler,type2:hander2,....}) Type: Self
Removes an event registered through delegate.

Zepto basic Knowledge (5)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.