[Basic learning of jQuery] 10. A brief introduction to jQuery Mobile and jQuery version changes, jquerymobile
About jQuery Mobile
JQuery Mobile is designed to fill in a new jQuery project on Mobile devices. It applies HTML5 and CSS3.
Main features
- Built on jQuery.
- Adopts the same core and syntax as jQuery, and uses the code and mode of jQuery UI.
- Compatible with most mobile platforms
- Lightweight Library
- Modular construction
- HTML5 tag-driven Configuration
- Progressive enhancement Principle
- Response Design
- Powerful Ajax Navigation System
- Ease of use
- Supports touch and mouse events
- Unified UI Components
- Powerful thematic framework
Basic Applications
- By default, the mobile browser will display your page as the Web browser on the large screen. Therefore, the font of the page displayed on the mobile device is relatively small, therefore, you must use the Meta element visible area for correction. This element notifies the browser to use the width of the mobile device as the width of the visible area.
<Meta name = "viewport" content = "width = device-width, intial-scale = 1, user-scalable = no"/> <! -- This element sets the width to the maximum width of the device. Do not zoom in or out. --> the Loading Order should be: <link rel = "stylesheet" href = "jquery.mobile.css"/> <script src = "jquery. js "> </script> <! -- Add other js in the project here --> <script src = "jquery. mobile. js"> </script>
- Data-role helps jQuery mobile know which elements to process. Data-attribute usage is a feature launched by html5. it allows developers to add any attribute to html tags as long as the added attribute name has a "data-" prefix.
- Data-role = "button" button
- Data-role = "collapsible" a container containing the title and content
- Data-role = "collapsible-set" a container containing collapsible
- Data-role = "content" A content container
- Data-role = "dialog" dialog box
- Data-role = "fieldcontain" a region package container
- Data-role = "slider" is a flip switching element.
- Data-role = "footer" Page footer container
- Data-role = "header" page title container
- Data-role = "listview" List View
- Data-role = "navbar" navigation bar
- Data-role = "page" page container
- Data-role = "slider" a text box with a range value
- Type = "checkbox" check box
- Type = "radio" single listener
- <Select> </select> drop-down list
- Type = "text | number | search" text box | number box | search box
// Simple list example <ul data-role = "listview" data-inset = "true"> <li> <a href = "#"> 123 </a> </ li> <a href = "#"> 123 </a> </li> <a href = "#"> 123 </a> </ li> </ul> // after data-inset is set, the width of the list will not be 100%, the value is 100% in width.
- The data-theme attribute indicates the topic of the application. The value is a, B, c, d, and e.
Well, that's all. The author's chapter is also quite simple.
About version changes
This chapter mainly describes the changes in jQuery versions and the new changes added.
I will talk about what is important after 1.6 and what I have not mentioned before.
- 1.6
- With the prop method added, true is returned when the checked attribute is obtained, while only null is returned when the previous attr obtains the checked attribute.
- Update the data method to convert the data attribute on the element into a value in the json format and display it in the camper format.
- 1.7
- New event APIs: on () and off () replace bind (), delegate (), live (), unbind (), undelegate (), die ().
- IsNumeric () determines whether the input parameter is a number
The author only wrote version changes earlier than 1.7, but did not write changes later than 1.7.
I also read it on the Internet. Most of the later versions are BUG fixes. Also, it seems that the 2 series versions are no longer compatible with earlier versions of IE6/7/8, the Compatibility View in IE9/10 is also affected.
