Analysis of jQueryMobile Design Theory

The design idea of jQueryMobile is the content to be introduced in this article. It is mainly used to learn how to use jQueryMobile. For details, refer to this article. 1. The basic design idea and main usage of jQuery, a web page element, is selected and then operated on it. This is different from other Javascript libraries.

JQuery MobileThe design concept is the content to be introduced in this article, mainly to understandJQueryMobileFor more information, see the detailed description of this article.

1. Select webpage Elements

JQueryIs to select a webpageElementAnd then perform some operations on it ". This is the fundamental feature that distinguishes it from other Javascript libraries.

The first step of using jQuery is to put a selection expression into the constructor jQuery () (abbreviated as $) and then get the selected element.

The selection expression can be a CSS selector:

$ (Document) // select the entire document object

$ ('# Myid') // select the webpage element whose ID is myId.

$ ('Divmyclass') // select the div element whose class is myClass.

$ ('Input [name = first] ') // select the input element whose name attribute is equal to first.

It can also be a jQuery-specific expression:

$ ('A: first ') // select the first a element in the webpage

$ ('Tr: odd') // select an odd row in the table

$ ('# MyForm: input') // select the input element in the form.

$ ('Div: visable') // select the visible div Element

$ ('Div: gt (2) ') // select all div elements except the first three

$ ('Div: animated') // select the currently animated div Element

Ii. Change the result set

The second design concept of jQuery is to provide various powerful filters to filter the result set and narrow down the selection result.

$ ('Div ') has ('P'); // select the div element containing the p element

$ ('Div ') not ('myclass'); // select the div element whose class is not equal to myClass.

$ ('Div ') filter ('myclass'); // select the div element whose class is equal to myClass.

$ ('Div ') first (); // select 1st div elements

$ ('Div ') eq (5); // select 6th div elements

Sometimes, we need to start from the result set and move it to a nearby element. jQuery also provides the moving method on the DOM tree:

$ ('Div ') next ('P'); // select the first p element after the div Element

$ ('Div ') parent (); // select the parent element of the div Element

$ ('Div ') closest ('form'); // select the form parent element closest to the div.

$ ('Div ') children (); // select all child elements of the div

$ ('Div ') siblings (); // select the same level element of the div

Iii. Chain Operations

The third of jQuery's design philosophy is that after a webpage element is selected, a series of operations can be performed on it, and all operations can be connected together and written in the form of a chain, for example:

$ ('Div ') find ('h3') eq (2) html ('hello ');

It is as follows:

$ ('Div ') // locate the div Element

Find ('h3 ') // select the h3 Element

Eq (2) // select 3rd h3 Elements

Html ('hello'); // change its content to "Hello ".

This is jQuery's most commendable and convenient feature. The principle is that each step of jQuery operations returns a jQuery object, so different operations can be connected together.

JQuery also provides the end () method, so that the result set can be taken back one step:

$ ('Div ')

Find ('h3 ')

Eq (2)

Html ('hello ')

End () // return to the step of Selecting All h3 Elements

Eq (0) // select the first h3 Element

Html ('World'); // change its content to 'World'

Iv. Operation of elements: value and value assignment

The most common requirement for webpage elements is to obtain their values or assign values to them.

JQueryThe fourth idea of design is to use the same function to complete the combination of value (getter) and value (setter), that is, "valuer" and "assignment Er. Whether it is a value or a value is determined by the function parameters.

$('H1 ') html (); // No parameter in html (), indicating to retrieve the h1 Value

$('H1 ') html ('hello'); // html () has the parameter "Hello", indicating that h1 is assigned a value.

Common values and value assignment functions are as follows:

Html () to retrieve or set html content

Extract or set text content

Attr () retrieves or sets the value of an attribute.

Width () is used to retrieve or set the width of an element.

Height () retrieves or sets the height of an element.

Val () retrieves the value of a form element.

Note that if the result set contains multipleElementWhen the value is assigned, allElementValue assignment; when the value is set, only the first one is retrieved.ElementExcept for text (), It extracts allElementText ).

Summary: IntroductionJQueryMobileThe content of the design idea has been introduced. I hope this article will help you!