Introduction and use of jquery

Currently, popular JavaScript libraries include:

JQuery, MooTools, Prototype, Dojo, YUI, EXT_JS DWR

JQuery was created by American JohnResig and has attracted many javascript experts from around the world to join the team.

JQuery is another excellent Javascript framework after prototype. Its purpose is to -- WRITELESS, do more, write less code, and do more things.

It is a lightweight js Library (only 21 k after compression), which is not suitable for other js libraries. It is compatible with CSS3 and various browsers (IE 6.0 +, FF 1.5 +, safari 2.0 +, Opera 9.0 + ).

JQuery is a fast and concise javaScript library that allows you to easily process HTMLdocuments, events, and animation effects, and easily provide AJAX interaction for websites.

Another major advantage of jQuery is its comprehensive documentation and detailed description of various applications. There are also many mature plug-ins to choose from.

JQuery can ensure that the user's html page is separated from the code and html content. That is to say, you don't need to insert a bunch of JavaScript code in the html to call the command. You just need to define the id.

JQuery objects are the objects generated after DOM objects are encapsulated by jQuery.

Introduce jquery: Import js files to the project.

JQuery objects are exclusive to jQuery. If an object is a jQuery object, it can use the method in jQuery: Evaluate ("#test”).html ();

For example:

$ ("# Test" example .html () means to get the html code in the element with the ID of test. Here, html () is the method in jQuery.

This code is equivalent to implementing code with DOM:

Document. getElementById ("test"). innerHTML;

Although jQuery objects are generated after packaging DOM objects, jQuery cannot use any methods of DOM objects. Similarly, DOM objects cannot use methods in jQuery. If they are used improperly, an error is returned.

Convention: If you get a jQuery object, add $ before the variable.

• Var $ variable = jQuery object

• Varvariable = DOM object

Selector is the foundation of jQuery. In jQuery, event processing and DOM traversal and Ajax operations depend on the selector.

Advantages of jQuery selector:

• Concise writing

• Sound event handling mechanism

===================================== Basic Selector

$ ("# Id") // search for node elements by id

$ ("Tag name") // search for node elements by Tag Name

$ (". Class value") // find the node element through the value of the class Attribute

$ ("*") // Search for all node labels

===================================== Level Selector

$ ("Tag, id, class tag, id, or class ") // search for all labels, IDs, or class nodes in a tag or id. --- "" Space indicates all the labels in the specified tag, class, id

$ ("Tag, id, class> tag, id, or class") // search for tags, id, or sub-node tag, id, or class in the class node -- ">" to indicate parent-child relationship

$ ("Tag, id, class + tag, id, or class") // find the next tag, id, or class node of a tag, id, or class -- "+" next node

$ ("Tag, id, or class ~ Tag or id or class ") // find all tags, IDs, or class nodes after the tag or id or class --" ~" All subsequent nodes

$ ("Id or class"). siblings ("div") // finds the id or class and is the node element of the specified node.

===================================== Basic filter Selector

-------- $ (Node element: condition)

$ ("Tag or id or class: first") // find the first node element of a tag, id, or class.

$ ("Tag or id or class: last") // find the last node element of the tag, id, or class.

$ ("Div: not (TAG, id, or class)") // find a node that is not a label, id, or class node element. Note that no id or class attribute is included.

$ ("Tag or id or class: even") // find the node element whose order is even

$ ("Tag or id or class: odd") // find the tag, id, or class with an odd node Element

$ ("Tag, id, or class": gt (index) // find the node element whose tag, id, or class index value is greater than the specified index. gt is short for greater.

$ ("Tag or id or class: eq (index)") // search for the node element whose tag, id, or class index value is equal to the specified index; eq is short for equals

$ ("Tag or id or class: lt (index)") // search for the node element whose tag, id, or class index value is smaller than the specified index; lt is short for less

$ (": Header") // search for all header node elements. It is a fixed method.

$ ("Tag, id, or class "). slideToggle (800, method); // enables the tag, id, or class node element to move. 800 indicates the animation duration in milliseconds. method callback method

===================================== Content filter Selector

$ ("Tag or id or class: contains ('di')") // find the node element containing the specified content in the tag, id, or class content

$ ("Tag, id, or class: empty") // you can call this operation to find the node element where the tag, id, or class does not have any child element.

$ ("Tag, id, or class: has (TAG, id, or class)") // you can call this operation to find the node elements that contain tags, IDs, or class elements.

$ ("Tag or id or class: parent") // find the node element whose tag, id, or class contains the child element.

$ ("Tag or id or class: not (: contains ('di')") // you can call this operation to find the node element whose tag or id or class does not contain the specified text content.

===================================== Visibility filter Selector

$ ("Tag or id or class: visible") // find the node element where the tag, id, or class is a visible element.

$ ("Tag or id or class: hidden"). show () // search for a tag, id, or class as the node element of the hidden element

Each (function (index, domEle ){

Alert (index + "=" + domEle. value );

}); // Jquery's Traversal method: index is the badge, domEle is to convert the node element object into a dom object and return

$. Each (object or array to be traversed, function (index, domEle) {}) // jquery static method

===================================== Attribute filter Selector

$ ("Tag or id or class [title]") // find the node element whose label, id, or class node element attribute is title.

$ ("Tag or id or class [title = test]") // find the node element whose attributes are title and equal to the specified value

$ ("Tag, id, or class [title! = Test] ") // find the node element with the label, id, or class node element attribute being title and not equal to the specified value. Note that the title attribute is not included.

$ ("Tag or id or class [title ^ = te]") // find the node element whose attribute is title and whose attribute value starts with the specified value

$ ("Tag or id or class [title $ = te]") // find the node element whose attribute is title and whose attribute value ends with the specified end value

$ ("Tag or id or class [title * = te]") // find the node element whose attribute is title and whose attribute value contains the specified value

$ ("Tag or id or class [title * = te] [attribute]... ") // search for tag, id, or class node elements to filter multiple attributes at the same time.

===================================== Child element filter Selector

$ ("Tag or id or class: nth-child (index)") // find the specified child element under the tag, id, or class node. Note that a space is added before, index is from 1

$ ("Tag or id or class: first-child") // search for the first child element under a tag, id, or class Node

$ ("Tag or id or class: last-child") // search for the first child element under a tag or id or class Node

$ ("Tag, id, or class: only-child") // search for a tag, id, or class node. If there is only one child element, return

================================ Form Selector

Input [type = checkbox]: checked "). length // obtain the number of selected multiple buttons

$ ("Select> option: selected") // obtain the content selected from the drop-down list. Generally, the content is traversed using each.

===================================== Matching Selector

$ (": Input") // return value set element Description: matches all input, textarea, select, And button elements.

$ (": Text") // return value set element Description: matches all single-line text boxes.

$ (": Password") // return value set element Description: matches all password boxes.

$ (": Radio") // return value set element Description: matches all radio buttons.

$ (": Checkbox") // return value set element Description: match all check boxes

$ (": Submit") // return value set element Description: match all submit buttons.

$ (": Image") // return value set element Description: matches all image domains.

$ (": Reset") // return value set element Description: matches all reset buttons.

$ (": Button") // return value set element Description: matches all buttons. This includes the directly written element button.

$ (": File") // return value set element Description: matches all file fields.

$ ("Input: hidden") // return value set element Description: matches all invisible elements or elements whose type is hidden. this selector is not limited to forms. Except for hidden matching input, those with styles of hidden will also be matched.

Note: The method used in the preceding example is to select the value of hidden in input. However, if ": hidden" is used directly, all the invisible elements on the page are matched, including the width or height of 0,

======================================

===== Create a node Element

$ ("

 

") // How to write the tag, pay attention to the self-closed tag writing method:
 

 

===== Insert a node

$ ("# A"). append ($ ("# B") // Add Node B to node.

$ ("# A"). appendTo ($ ("# B") // Add the previous node a to Node B

$ ("# A"). after ($ ("# B") // Add Node B to the end of node.

$ ("# A"). before ($ ("# B") // Add Node B to the front of node.

$ ("# A"). insertAfter ($ ("# B") // Insert the previous node a to the end of Node B

$ ("# A"). insertBefore ($ ("# B") // Insert the previous node a to the front of Node B

===== Delete a node Element

Remove () // delete a node element and delete it by yourself

Empty () // Delete All byte points without deleting attribute nodes

===== Clone node Element

Clone (boolean) // clone a node. By default, only nodes are cloned, and no cloning event is performed. If a true value is input, the event is also cloned.

===== Replace node Elements

$ ("# A"). repalaceWith ($ ("# B") // replace node a with Node B

$ ("# A"). repalaceAll ($ ("# B") // replace Node B with node

===== Common basic methods

Val () // get the value of the node Element

Val ("xxx") // change the value of the node Element

Text () // get the text content of the Node object

Text ("abcd") // sets the text node

Attr ("name") // get the name Attribute Value

Attr ("name", "zhangsan") // sets the name Attribute Value

RemoveAtt ("name") // delete an attribute

======================================

-----.Css ('attribute name', 'attribute name') // set the style

===== Dom/jquery Conversion

----- $ (Dom object) Replace the dom object with the jquery object

----- Var name = $ variable name [index] // convert jquery to a dom object

----- Jquery provides a get (index) method to convert jquery into a dom object.

----- $ (Document ). ready (function () {}); // all the content on the page is loaded before the execution. // short for GS: $ (). ready (function (){});

----- $ (Window). load (function () {}) // generally not used