1. In web development, when we add dynamic functions to a page, we usually search for page elements or element groups in a fixed mode and perform relevant operations only on them.
2. The powerful jquery statement actually comes from its selector and selector. It allows us to quickly and accurately find the elements we want to operate on the page. It can be a single or element set.
3. The emergence of CSS allows us to separate the element definition from the style definition during programming. Document Object Model [Dom]
4. unobtrusive JavaScript considers any JavaScript expression or statement embedded in the <body> tag (whether it is an attribute of an HTML element or an independent <SCRIPT> block) as incorrect. We cannot embed the behavior of an element directly into the tag defined by the element. We should separate it and place it in the
5. jquery focuses on how to obtain elements from HTML pages and perform related operations on elements. Like CSS Separation element definition and element style definition, jquery also separates the behavior of elements from the definition of elements. In addition, they use the same selector, that is, they associate the behavior of an element with the page element through the attribute or location of the element.
6. jquery first solves the problem of cross-mainstream browser compatibility, and solves the problem of selecting time points that have plagued JavaScript before it can be operated only when all page elements are loaded.
7. Like CSS's reference to elements when defining element styles, jquery also locks the target element through element attributes or positions on the page.
For example, p a refers to all <A> elements defined in the <p> element. While jquery supports the original CSS selector, it has been extended.
The simplest syntax for getting a set of page elements defined in jquery $ (selector) or jquery (selector) it returns a specific JavaScript Object, contains an array of DOM elements that match the selector definition. This object also master a large number of predefined methods for user restructuring elements. In programming terms, this is called wrapper because it encapsulates some matching elements with some extended features.
The object returned by the selector, which is generally called jquery wrapper or wrapped set.
$ ("Div. notlongforthisworld"). fadeout (); Attribute Class = All Div of notlognforthisworld.
We usually call the method to return the wrapper object called jquery commands. After it is executed, it will return the original object set, so we can continue to execute other operations.
$ ("Div. notlongforthisworld"). fadeout (). addclass ("removed ");
$ (Selector) returns this special JavaScript Object, which can be processed by processing the object. We can also regard it as a traditional array of target elements, process it as an array.
$ ("# Someelement" ).html ("I have added some text to an element ");
Or
$ ("# Someelement") [0]. innerhtml = "I have added some text to an element ");
$ ("Div. fillmein" Examples .html ("I have added some text to a group of nodes ");
Equivalent
VaR elements = $ ("Div. fillmein ");
For (I = 0; I <elements. length; I ++)
Elements [I]. innerhtml = "I have added some text to a group of nodes ";
Obtain all the even <p> element sets: $ ("P: Even ");
Get the set of the first row in each table: $ ("TR: Nth-Child (1 )");
Obtain all the linefeeds of the <body> tag <Div >:$ ("body> Div ");
Get all links to PDF files: $ ("A [href $ = pdf ");
Obtain all <div> set: $ ("body> Div: has (a)") that contains the <body> element's immediate Div )");
8. Common functions
$ () Can be used as the prefix of the element namespace in addition to obtaining the specified page element for certain operations.
$. Trim (somestring); or jquery. Trim (somestring );
9. Document Preparation processor. As we mentioned earlier, one problem in the unobtrusive JavaScript movement is that we must wait until all DOM elements are fully loaded before performing operations on these elements.
Traditionally, we use the onload processor of the window instance to execute this event after the entire page is fully loaded.
Window. onload = function (){
$ ("Table TR: Nth-child (even)"). addclass ("even ");
};
However, unfortunately, the browser will delay the execution of the onload event until all Dom trees are created and all images or other additional resources are loaded, when the page is displayed in a browser window, the onload event is triggered. As you can imagine, if a page image or resource occupies a large amount of loading time, the onload event will be triggered indefinitely. Such a user experience must be terrible. The best trigger time should be to execute these scripts after the text structure is completely parsed and the browser converts HTML to its dom book form. However, it is difficult to implement this across browsers. Therefore, jquery provides a simple monitor to monitor that a DOM tree is loaded and script code is executed. Instead of waiting until all external image resources are loaded.
This syntax uses:
$ (Document). Ready (function (){
$ ("Table TR: Nth-child (even)"). addclass ("even ");
});
First, find the document object instance through the selector, then call the jquery Extension Method ready (), and input an operation to be executed when the decument is ready.
We call this form formal syntax, which is usually abbreviated:
$ (Function (){
$ ("Table TR: Nth-child (even)"). addclass ("even ");
});
We notify the browser of the code to be executed after all Dom loads. More effectively, we can use this method multiple times in the same HTML document.
The browser will execute them when Dom loading is complete according to the sequence we define. While the onload event of window, a document can only be used once.
10. Generate DOM elements. We can create new elements for the page by inputting a string containing HTML tags to $.
For example: $ ("<p> Hi there! </P> ");
$ (Function (){
$ ("<P> Hi there! </P> "). insertafter (" # followme ");
});
In the ready processor definition, the <p> element is inserted after the element ID is followme.
11. jquery Extension
$. FN. Disable = function (){
Return this. Each (function (){
If (typeof this. Disabled! = "Undefined") This. Disabled = true;
});
}
$. FN. Disable indicates a method called disable in the $ extension package.
Inside the function body, this refers to the wrapped Dom element set to be operated.
The each () method of the set is called to traverse every element of the set. In the each () method body,
This becomes a pointer to a specific Dom element of the current loop.
We return the results of the each () method to facilitate the disable method to support chain operations.
12. Shared by jquery and other Class Libraries
For example, you can use
Jquery. noconflict ();
It will return $ to the original intent defined by the non-jquery class library.
Create wrapped Element Set
Use the selector defined by jquery to select and wrap elements, and create new HTML elements in the DOM tree to operate the encapsulated element set. Using selector to select DOM elements and create DOM elements is the core and common function of $. The main goal of developing rich browser applications is to operate the DOM elements on the page. Before operating these elements, you must first identify and select them. These are the core functions of jquery.
1. select an element for Operation Processing: only the jquery selector selects the target element first, and then returns a JavaScript Object packaged by jquery, in order to use the jquery Method on these elements (that is, the jquery commands we usually call ).
2. These selectors include basic CSS selectors, including the ID of an element, CSS class name, label name, and Dom level of the page element;
HTML Tag: A P
Element ID: # specialid
Element cssclass name:. specialclass
Page element Dom hierarchy: A # specialid. specialclass one id = specialid, and cssclass = specialclass <A>
A cssclass value of p a. specialclass is specialclass and is included in <A>
3. Use the child, container, and attribute selector:
Child selector:> select the direct child element of an element, excluding the deeper child element.
$ ("P> ");
Attribute selector: [] Select an element with a certain attribute
$ ("A [href ^ = http: //]");
$ ("For [Method]"); select a form with an explicit method declaration.
$ ("Input [type = text]"); select all input elements of the text type.
$ ("Div [Title ^ = My]"); select the DIV whose title starts with my.
<A>
$ ("A [href * = jquery.com]"); select all <A>
Container selector: Has () selects elements that contain certain elements
$ ("Li: has (a)"); select all <li> containing <A> elements.
$ ("Li a"); indicates Selecting All <A> included in <li>
Note that this function only supports single-layer nesting, for example, $ ("foo: Not (Bar: Has (BAZ)"); and $ ("foo: Not (bar: has (Baz: eq (2) "); will not be supported.
$ ("*"); Select all elements.
$ ("E"); select all elements whose tag name is E.
$ ("E f"); select all <F>.
$ ("E> F"); select all <F> that are directly sub-elements of the <E> element, excluding <F> at a deeper level.
$ ("E + F"); select all sibling elements that are close to <E> elements <F>.
$ ("E ~ F "); select all <E> peer elements <F>.
$ ("E: Has (f)"); select all <E> elements with <F> elements.
$ ("E. c"); select all <E> elements whose class name is C, or *. C indicates all elements whose class name is C.
$ ("E # I"); select all <E> elements whose IDs are I, or * # I indicates all elements whose IDs are I.
$ ("E [a]"); select all <E> elements that contain attribute.
$ ("E [A = V]"); select all <E> elements that contain the value of a AS v.
$ ("E [A ^ = V]"); select all <E> elements that contain the value of a starting with v.
$ ("E [A $ = V]"); select all <E> elements that contain a property value ending with v.
$ ("E [A * = V]"); select all <E> elements that contain V in the property value.
4. Select from element position
You can select an element by its position on the page or its position relative to an element. For example, the first link in the page or the last item in each list.
$ ("A: First"); select the first <A>
$ ("P: odd"); select all odd numbers <p>
$ ("P: Even"); select all even numbers <p>
$ ("Li: Last-Child"); select the last <li> element in each <ul> element.
$ ("A: Last"); select the last one on the page <A>
$ ("Li: First-Child"); select the first <li> element in each <ul> element.
$ ("Li: Only-Child"); select all <li> elements without siblings.
$ ("Li: Nth-child (n)"); select the nth <li> element in each <ul> element.
$ ("Li: Nth-child (even | ODD)"); select an even <li> element or an odd <li> element in each <ul> element.
$ ("Li: Nth-child (xn + Y)"); select the element of the xn + y expression result in each <ul> element, such as Li: nth-child (3N) indicates each third element, a multiple of 3; Li: Nth-child (5N + 1) indicates the element after every 5 multiples.
$ ("Li: Has (A: eq (N)"); select the <li> element that contains the <A> element for the nth match.
$ ("Li: Has (A: GT (N)"); select all <li> elements that match the <A> element after the nth time, does not include the <li> Of the nth match.
$ ("Li: Has (A: Lt (N)"); select all <li> elements that match n times before <A> elements, does not include the <li> Of the nth match.
Note that the nth-Child selector starts counting from 1, while the other selector starts counting from 0.
5. Use the custom jquery Selector
For example, you may need to select all selected checkboxes. You can use the custom selector: Chek provided by jquery.
$ (": Animated"); select the current dynamic control
$ (": Button"); select all buttons (including input [type = submit], input [type = Reset], input [type = button], button ).
$ (": Checkbox"); selecting all checkpoints is equivalent to input [type = checkbox]
$ (": Checked"); select all the selected checkbox or radio button elements.
$ (": Contains (FOO)"); select an element that contains the foo text content
$ (": Disabled"); select all unavailable form elements on the Interface
$ (": Enabled"); select all available form elements on the Interface
$ (": File"); select all file elements, equivalent to input [type = file]
$ (": Header"); select all elements that belong to the page header, such as $ (": Hidden"); select all hidden elements
$ (": Image"); select all form image elements, equivalent to input [type = image]
$ (": Input"); select all form elements (including input, select, textarea, And button)
$ (": Not (filter)"); cancels a specific filter.
$ (": Parent"); select all non-empty elements with child elements including text.
$ (": Password"); select a form element of the password type, equivalent to input [type = PASSWORD]
$ (": Radio"); select all radio button elements, equivalent to input [type = radio]
$ (": Reset"); select all reset buttons, equivalent to input [type = Reset] or button [type = Reset]
$ (": Selected"); select all selected options
$ (": Submit"); select the submit button, which is equivalent to button [type = submit] or input [type = submit]
$ (": Text"); select all text form elements, equivalent to input [type = text]
$ (": Visible"); select all visualization elements.
Most of the custom selectors are related to form forms. We can use them in combination:
: Checkbox: checked: Enabled
Use not filter. to cancel a filter, use: not filter.
Input: Not (: checkbox) All input form elements except checkbox.
The query selector includes: the derivative selector space, the Child selector>, and the sibling selector +. Here, it is more effective to search for other elements based on the relationship between the selected elements than to limit the range of matching elements. Div P: Not (: hidden) is supported, but Div: not (P: hidden) is not supported.
All P derived from Div and non-hidden P are selected, and the second type is invalid because it applies: not to a selector rather than a filter (where P: P in hidden is not a filter ).
6. use $ () to create a new Dom element. For example, to create an empty Div, you can directly $ ("<div> ");
Note that you cannot directly use $ ("") to create <SCRIPT> elements.
$ ("<Div class = 'foo'> I have Foo! </Div> <div> I don't </div> ")
. Filter (". foo"). Click (function (){
Alert ("I'm foo! ");
}). End (). appendto ("# someparentdiv ");
The end () method can restore the returned object to the complete set before filter. And append them to an element with ID someparentdiv.
7. Manage the packaging Element Set, refine, extend, or extract a subset.
Determine the size of the encapsulated Element Set. jquery defines a Length attribute and a size () method for the returned object. They will return the same result.
Certificate ('audio somediv'audio .html ('there are '+ $ ('A'). Size () + 'link (s) on this page .');
Obtain elements from the packaging element set:
$ ('Img [alt] ') [0] or call the get (INDEX) method defined by jquery ).
$ ('Img [alt] '). Get (0 );
The get () method can be used to obtain the original Javascript array of all the packaging elements;
VaR alllabeledbuttons = $ ('label + click'). Get ();
We can also perform a reverse operation to find a specific element.
VaR n = $ ('img '). Index ($ ('img # finmds') [0]); // return the index of the specified Element in the packaging object using the Index Method
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
