Sharp jquery Reading notes Chapter 6th, 9th Chapter 10th Chapter

Sixth chapter

Ajax is all called: "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), which is not a single technology of JavaScript, but a combination of a series of interactive Web application-related technologies. With Ajax, we can update the page without refreshing the status and implement asynchronous commit, which improves the user experience.

First, the advantages and disadvantages of Ajax

(1) The main advantages of the following points:

1. Plug-in support is not required (General browser and JavaScript is enabled by default)

2. User experience is excellent (you can get updatable data without refreshing the page)

3. Improve the performance of the WEB program (in terms of data transfer to relax on demand, not the overall submission)

4. Reduce the burden on the server and bandwidth (transfer some server operations to the client)

(2) The lack of Ajax consists of the following points:

1. Different versions of browser degree XMLHttpRequest object support is insufficient (such as IE5)

2. The function of forward and backward is destroyed (because Ajax is always on the current page, there is no chance to back and forth pages)

3. Search engine support is not enough (because the search engine crawler can not understand the content of JS caused change data)

4. Lack of development and debugging tools (poor in JS or Ajax debugging development compared to other language Toolsets)

Second, asynchronous and synchronous

The most critical place to use Ajax is to implement asynchronous requests, accept responses, and execute callbacks. So what's the difference between asynchronous and synchronous? Our common Web program development is basically synchronous, meaning to execute a program in order to execute the next paragraph, similar to the call in the phone, a call to answer the next call, and asynchronous can execute multiple tasks at the same time, feel that there are many lines, similar to text messages, not because of reading a text message and stop accepting another text message. Ajax can also be executed using synchronous mode, but the mode of synchronization is blocking mode, which will cause the execution of multiple lines and must be a single execution, the Web page will appear suspended animation, so the general Ajax mostly use asynchronous mode.

Second, the Ajax in jquery

jquery encapsulates the AJAX approach to operations

1th floor: $.ajax ()

2nd floor: $load (), $.get () and $.post ()

Layer Three: $getScript () and $.getjson ()

1. $load () method

(1) Role: Get static data files from a Web service

(2) Structure: Load (URL [, data] [. Callback])

URL (must, request the URL address of the HTML file, the parameter type is String),

Data (optional, key/value data sent, parameter type is Object)

Callback (optional, successful or failed callback function with parameter type function).

2. $get () method and $post () method

(1) Use: the. Load () method is a local method because he needs a JQuery object that contains elements, and $.post () is a global method without specifying an element. For use,. Load () is suitable for $.get () and $.post (), which are required to pass parameters to the server page.

(2) Structure: $.get (URL [, data] [, callback] [, type])

URL: The URL address that represents the request HTML page

Data: Key/value sent to the server

Callback: Optional callback function to indicate load success

Type: The server side returns the format of the content (XML, HTML, script, JSON, text, and _default), and the callback function has two parameters that indicate what the request returned, the request status (success, error, notmodified, timeout); in the $.get () method, the callback function is triggered only if the data is successfully returned.

(3) Differences between the two methods

The use of the $.post () method is basically consistent with the $.get (), and the difference between them is more obscure, basically behind the

Different, the user is not reflected in the use. The specific differences are as follows:

The 1.GET request is submitted through a URL, and the POST request is submitted by the HTTP message entity;

2.GET commit has a size limit (2KB), and the POST mode is unrestricted;

3.GET mode will be cached, there may be security issues, and POST does not have this problem;

4.GET is obtained via $_get[], POST via $_post[].

3. $.getscript () method and $.getjson () method

JQuery provides a set of methods for specific asynchronous loading: $.getscript (), which is used to load a specific JS file;

$.getjson (), which is used to load JSON files specifically.

(1) Sometimes we want to be able to load the JS file in a specific situation, instead of starting to load all the JS files, then the class using the $.getscript () method.

Click the button and then load the JS file

$ (' input '). Click (function () {

$.getscript (' Test.js ')

});

(2) The $.getjson () method is specifically used to load the JSON file, using the same method as before.

$ (' input '). Click (function () {

$.getjson (' Test.json ', function (response, status, XHR) {

alert (Response[0].url);

});

});

4. Ajax () method

$.ajax () is the lowest-level method in all Ajax methods, and all other methods have only one parameter, passing an object of each function key-value pair.

5. Serialization of elements

(1) The Serialize () method is used for a jquery object that serializes the contents of the DOM element into a string for the AJAX request

(2) The Serializearray () method is used for a jquery object that serializes the contents of the DOM element into a string JSON-formatted data

(3) The $.param () method is used to serialize an array or an object according to Key/value

6. Ajax Global Events in jquery

Method name	Description
Ajaxstart (callback)	Functions executed at the start of an AJAX request
Ajaxstop (callback)	Functions executed after the AJAX request ends
Ajaxcomplete (callback)	Functions that are executed when an AJAX request completes
Ajaxerror (callback)	The function that the AJAX request executes when an error occurs, and the catch error can be passed as the last argument
Ajaxsend (callback)	Functions executed before Ajax request is sent
Ajaxsuccess (callback)	Functions executed when the AJAX request succeeds

Nineth Chapter

I. Introduction of JQuery Mobbile

jquery has always been a very popular JavaScript class library for rich clients and web application development, but it has been designed for desktop browsers and not specifically designed for mobile applications. JQuery Mobile is a new project used to fill the flaws in mobile device applications. It is a basic jquery framework and provides a range of user interfaces and features to enable developers to use on mobile applications. Using this framework can save a lot of JS code development time, although the current version is still not a stable version. However, its application effect has been highly anticipated.

Second, the main characteristics

(1) Create based on jquery

(2) compatible with most mobile platforms

(3) Lightweight Library

(4) Modular structure

(5) HTML5 tag-driven configuration

(6) Principle of progressive enhancement

(7) Responsive design

(8) Powerful Ajax navigation system

(9) Ease of use

(10) Support for touch and mouse events

(12) A strong subjectivity framework

Third, JQuery mobbile use

1. Data-role Properties

Data-role parameter table:

Page container whose internal mobile element inherits the properties set on the container.

Header page Title container, inside the container can contain text, return button, function button and other elements

Footer page Footer container, inside this container can also contain text, return button, function button and other elements

Content page Contents container, this is a very tolerant container, internal can contain standard HTML elements and 2, 2, 2, 2, jquerymobile elements

Controlgroup sets several elements into a group, typically several of the same element types

The Fieldcontain area wraps the container, and separates the elements inside the container from the elements outside the container by increasing the margin and dividing the line.

NavBar function navigation Container, popular speaking is the tool bar

ListView List Display container, similar to how a contact list is displayed in a phone

List-divider the table header of the container to display a list of headings that cannot contain links inside

button to set the style of the link and the normal button to be the Jquerymobile style

None prevents the frame from rendering elements so that the elements are displayed in the native HTML state, primarily for form elements.

3, Data-icon

4. Style switch

Dat-theme Property Uuur

Iii. other mobile frameworks

Jqmobi, Sencha Touch, PhoneGap

Tenth Chapter

Version of JQuery

Starting in August 2005, the new framework that came into the public development phase was on January 14, 2006

Published in the name of JQuery.

August 2006 released jQuery1.0, the first stable version, with CSS selectors, event handling, and

Support for Ajax interactions.

The jQuery1.1 was released in January 2007, greatly simplifying the API. Many less-used methods have been combined.

The jQuery1.1.3 was released in July 2007, optimizing the speed of the JQuery selector engine execution.

The jQuery1.2 was released in September 2007, and the XPath selector was removed, and a new namespace event was added.

jQuery1.2.6 was released in May 2008, introducing the Dimensions plugin into the core library.

jQuery1.3 was released in January 2009, with the new selector engine Sizzle, which further improved performance.

Released in January 2010, jQuery1.4, a massive update, provides DOM operations and adds a

New methods or enhancements to the original method.

February 2010 released jQuery1.4.2, added. Delegate () and. Undelegate () Two new methods to promote

Flexibility and browser consistency to upgrade the event system.

The jQuery1.5 was released in January 2011, overriding AJAX components, enhancing scalability and performance.

JQuery1.6 was released in May 2011, rewriting the Attribute component and introducing new objects and methods.

jQuery1.7 was released in November 2011, introducing the APIs for. On () and. Off () to resolve event bindings and delegate capacity

Easy to confuse problems.

jQuery1.7.2 was released in March 2012 for some optimizations and upgrades.

July 2012 released jquery1.8,8 month released the 1.8.1,9 month released in 1.8.2, overriding the selector citation

Fixed some problems.

January 2013 released the jquery1.9,css multi-attribute setting, enhanced the CSS3.

The jQuery1.10 was released in May 2013, adding some features.

Sharp jquery Reading notes Chapter 6th, 9th Chapter 10th Chapter