Zepto and jquery differences

---restore content starts---

"Zepto Mobile Event"

1, $ ("#xx"). Tap (function () {//TAP triggers when the screen is clicked
Alert ("Sssss");
})

2, $ ("div"). Singletap (function () {//SINGLETAP triggers when the screen is clicked
Alert ("click");
})

3, $ ("div"). Doubletap (function () {//DOUBLETAP triggers when the screen is double-clicked
Alert ("Double-click");
})

4, $ ("div"). Longtap (function () {//LONGTAP-trigger when long pressing the screen
Alert ("hold");
})

5, $ ("div"). Swipe (function () {//swipe triggered when sliding
Alert ("swipe")

})

Optional direction:

1, Swipeup slide up 2, Swipedown down

2, Swipeleft left slide 3, swiperight to the right swipe

The difference between Zepto and jquery

1. Zepto objects cannot customize events
For example, execute: $ ({}). bind (' Cust ', function () {});
Results: Typeerror:object has no method ' AddEventListener '
The workaround is to create a node that is out of the document flow as the event object:
For example: $ ('). bind (' Cust ', function () {});

2. Zepto selector expression: [Name=value] value must be enclosed in double quotation marks "or single quotes"
For example execution: $ (' [data-userid=123123123] ')
Results: Error:SyntaxError:DOM Exception 12
Workaround: $ (' [data-userid= ' 123123123] "') or $ (" [data-userid= ' 123123123 '] ")

The 2-1.zepto selector has no way to select elements of $ ("div[name!= ' abc ')")

2-2.zepto the option to get the SELECT element cannot be used in a method like JQ $ (' option[selected] ')because the selected property is not a standard property of CSS
You should use $ (' option '). Not (function () {return!this.selected})
For example: JQ: $this. Find (' option[selected] '). attr (' data-v ') * 1
Zepto: $this. Find (' option '). Not (function () {return!this.selected}). attr (' data-v ') * 1
But fetching elements with the disabled attribute in select can be used $this. Find ("Option:not (:d isabled)") because disabled is a standard attribute

2-3. Zepto use the Prop method when manipulating the selected and checked properties of the DOM

3.Zepto is written according to the standard browser, so the method for node size only provides width () and height (), eliminating the innerwidth (), Innerheight (), Outerwidth (), Outerheight ()
Zepto.js: Determined by the box model (box-sizing)
Jqery: Ignores the box model, always returns the width/height of the content area (not including padding, border) The solution is to use. css (' width ') instead of. Width ().

3-2.offset ()
Zepto.js: Returns top, left, width, height
JQuery: return width, height

3-3. Hide elements
Zepto.js: Unable to obtain wide height;
JQuery: can be obtained.

Each method of 4.Zepto can only traverse an array and cannot traverse a JSON object

5.Zepto Animate method Parameter Description: Details click-
Usage of animate in Zepto

6.zepto JSONP callback function name cannot be customized

---restore content ends---

Zepto and jquery differences