Popular JavaScript Library--jquery

1, in order to simplify the development of JavaScript, some Javsscript library was born. The JavaScript library encapsulates a number of predefined objects and utility functions. A rich client page that helps users build Web2.0 features with highly difficult interactions and is compatible with large browsers. The current popular JavaScript libraries are: jquery, MooTools, Prototype, Dojo, YUI, Ext_js DWR2, jquery created by American John Resig, It has attracted many JavaScript gurus from around the world to join its team. jquery is another excellent JavaScript framework following prototype. Its purpose is to--write less,do more, write less code, and do more things. It is a lightweight JS library (only 21k after compression), this is not the other JS library, it is compatible with CSS3, but also compatible with a variety of browsers (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+). jquery is a fast, concise JavaScript library that makes it easier for users to work with HTML documents, events, animate, and easily provide Ajax interactivity to websites. One of the big advantages of jquery is that its documentation is full, and the various applications are very detailed, as well as a number of mature plugins to choose from. jquery allows the user's HTML page to keep the code and HTML content separate, that is, no longer inserting a bunch of JS in the HTML to invoke the command, just define the ID. The jquery object is the object that is generated after wrapping the DOM object through jquery. jquery objects are unique to jquery. If an object is a jquery object, then it can use the method in jquery: $ ("#test"). HTML (), for example: $ ("#test"). html () means: Gets the HTML code within the element with ID test. where HTML () is the method in jquery this code is equivalent to using the DOM implementation code: document.getElementById ("Test"). InnerHTML; Although the jquery object is created after wrapping the DOM object, But jquery cannot use any of the DOM object's methods, nor does the DOM object use the method in jquery. Random use will error convention: If you get a JQuery object, precede the variable with $. var $variable = jQuery object var variable = DOM Object jQuery SelectorThe P selector is the foundation of jquery, in jquery, for event handling, traversing DOM and Ajax operations all depend on the advantages of the selector Pjquery selector: Concise wording//If the page does not have id=value elements, the browser will error doc  Ument.getelementbyid ("username"). Value; You need to determine if document.getElementById ("username") exists if (document.getElementById ("username")) {var username=      document.getElementById ("username");   alert (Username.value);   }else{alert ("No such ID element"); }//Use jquery to process even if it does not exist and will not error var $username =$ ("#username"); Alert ("^^ ^" + $username. Val ());//Note: The function return value in JavaScript is null, which means false Basic Selector

The basic selector is the most commonly used selector in JQuery and the simplest selector, which finds DOM elements by element ID, class, and tag name (the ID can only be used once in a Web page, and class allows for reuse).

P1, #id Usage: $ ("#myDiv"); Returns a collection of values that comprise a single element

Description: This is the direct selection of HTML in the id= "Mydiv"

P2, Element usage: $ ("div") return value collection element

Note: The English translation of element is "elemental", so element is actually a tag element that is already defined in HTML, such as Div, input, a, and so on.

P3, Class Usage: $ (". MyClass") return value collection element

Note: This tag is a direct selection of elements or groups of elements in the HTML code that class= "MyClass" (because class can have more than one value in the same HTML page).

P4, * Usage: $ ("*") return value collection element

Description: Matches all elements and is used in conjunction with context to search

P5, Selector1, Selector2, Selectorn usage: $ ("Div,span,p.myclass") return value collection element

Description: Merges the elements that match each selector to return together. You can specify any number of selectors and merge the matched elements into one result. Where p.myclass is a matching element

P class= "MyClass"

Basic Selector Example: the background color for all elements of the Pmini is #FF0033p改变元素名改变 the background color of the element with ID one is #0000FFp改变 the background color of all elements for the <div> class is #00FFFFp改变所有元素的背景色为 #00FF33p改变所有的 the background color for elements with the <span> element and ID is #3399FF Hierarchy Selector

If you want to get specific elements through hierarchical relationships between DOM elements, such as descendant elements, child elements, neighboring elements, sibling elements, and so on, you need to use a hierarchy selector.

P1, ancestor descendant

Usage: $ ("form input"); Return value Collection element

Description: Matches all descendant elements under a given ancestor element. This should be separated from the "Parent > Child" section below.

P2, parent > child
Usage: $ ("form > Input"); Return value Collection element

Description: Matches all child elements under the given parent element. Note: To distinguish between descendants and child elements

P3, prev+ Next

Usage: $ ("label + input"); Return value Collection element

Description: Matches all next elements immediately following the Prev element

P4, prev~ siblings

Usage: $ ("form ~ input"); Return value Collection element

Description: Matches all siblings elements after the Prev element. Note: The element that is after the match, does not contain the element, and siblings matches the elements of the prev sibling, whose descendants are not matched.

Note: (the "prev ~ div") selector can only select sibling elements that follow the "# prev" element; The method siblings () in jquery is independent of the position, as long as it is a peer node can be selected

Hierarchy Selector Example:

P Change the background color of all <div> in <body> to #0000FFp改变 <body> the background color of the #FF0033p改变 ID for one is the next <div> The background color for all brothers <div> elements behind the element with the #0000FFp改变 ID is the # #0000FFp改变 the element with the ID of the element all <div> sibling elements have a background color of #0000FF Filter SelectorP Filter Selector is mainly through specific filtering rules to filter out the required DOM elements, the selector is ":" At the beginning p according to different filtering rules, filter selectors can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, child element filtering and Form object property filter selectors. Basic Filter selector: L1,: First
Usage: $ ("Tr:first"); Returns a collection of values that comprise a single element

Description: Match the first element found

L2,: Last
Usage: $ ("Tr:last") return value collection element

Description: Matches the last element found. Corresponds to: first.

L3,: Not (selector)
Usage: $ ("Input:not (: Checked)") returns the value of the collection element

Description: Removes all elements that match the given selector. A bit similar to "non", meaning that there is no selected input (when input type= "checkbox").

L4,: Even
Usage: $ ("Tr:even") return value collection element

Description: Matches all elements whose index value is even, counting from 0. js arrays are counted starting from 0. For example, to select a row in a table because it is counted from 0, the first TR in the table is even 0.

L5,: Odd
Usage: $ ("tr:odd") returns the value of the collection element description: Matches all elements with an odd index value, and: Even corresponds, counting from 0 onwards. L6,: eq (index)
Usage: $ ("tr:eq (0)") return value collection element

Description: An element that matches a given index value. EQ (0) is the first TR element to get. Inside the parentheses are the index values, not the number of element permutations.

L7,: GT (Index)
Usage: $ ("tr:gt (0)") returns the value of the collection element L Description: Matches all elements that are greater than the given index value. L8,: LT (index)
Usage: $ ("Tr:lt (2)") return value collection element

Description: Matches all elements that are less than the given index value.

L9,: Header (fixed notation)
Usage: $ (": Header"). CSS ("Background", "#EEE") returns a collection of values elements

Description: Matches a CAPTION element such as H1, H2, H3. This is a TITLE element that is specifically used to get h1,h2.

L10,: Animated (fixed notation) return value collection element

Description: Matches all elements that are performing an animation effect

Basic Filter Selector Example:

P Change the background color of the first DIV element to #0000FFp改变最后一个 the background color of the div element for #0000FFp改变class不为 One's background color for all div elements #0000FFp改变索引值为偶数的 div element to #0000FFp Change the background color of the div element with an odd index value of #0000FFp改变索引值为大于 3 for the background color of the div element to #0000FFp改变索引值为等于 3 for the background color of the div element to #0000FFp改变索引值为小于 3 for the background color of the DIV element to # 0000FF

function cartoon () {//method for performing animations

$ ("#mover"). Slidetoggle ("normal", cartoon);

}

Cartoon ();

Content Filter Selector

The filtering rules of the Content filter selector are mainly embodied in the child elements and the text content.

P1,: Contains (text)
Usage: $ ("Div:contains (' John ')") returns a value collection element

Description: Matches the element that contains the given text. This selector is useful when we want to choose not DOM tag elements, it comes in handy, its role is to find the label "around" the text content is consistent with the specified content.

P2,: Empty
Usage: $ ("Td:empty") return value collection element

Description: Matches all empty elements that do not contain child elements or text

P3,: Has (selector)

Usage: $ ("Div:has (P)"). AddClass ("test") return value collection element

Description: Matches the element that contains the element that the selector matches. This explanation needs to be well thought out, but once you look at the example used, it's perfectly clear: Add class= "Test" to all div tags that contain p elements.

P4,:p arent
Usage: $ ("td:parent") return value collection element

Description: Matches an element that contains child elements or text. Note: Here is ":p arent", not ". Parent" Oh! The feeling and the above said ": Empty" form an antonym.

Sample Content Filter Selector:

P Change the background color of the div element containing the text ' di ' to #0000FFp改变不包含子元素 (or text element) with the background color of the div element for the #0000FFp改变含有 class mini element as the background color #0000FFp改变含有子 The background color of the div element for the element (or text element) is #0000FFp改变不含有文本 di; The background color of the DIV element

$ ("Div:not (: Contains (' di '))"). CSS ("Background", "#FF0033");

Visibility Filter Selector

The Visibility filter selector selects the appropriate element based on the visible and invisible state of the element

P1,: Hidden
Usage: $ ("Tr:hidden") return value collection element

Description: Matches all invisible elements, and the INPUT element's type attribute is "hidden", which is also matched to. meaning that the CSS Display:none and inputtype= "hidden" will be matched to. In the same way, the colon ":" should be completely separated from the mind. , point number "." and the comma "," the difference.

P2,: Visible
Usage: $ ("tr:visible") return value collection element

Description: Matches all visible elements.

Example of a visibility filter selector:

P Change the background color of all visible div elements to #0000FFp选取所有不可见的元素, use the show () method in JQuery to display them, and set their background color to #0000FF

Select all the text-hidden fields and print their values

Add CSS div.visible{display:none;}

Attribute Filter Selector

The filter rule for a property filter selector is to get the corresponding element through the attributes of the element

P1, [attribute]
Usage: $ ("div[id]"); Return value Collection element

Description: Matches the element that contains the given property. In the example, all div tags with the "id" attribute are selected.

P2, [Attribute=value]
Usage: $ ("input[name= ' newsletter ')"). attr ("Checked", true); Return value Collection element

Description: A match for a given property is an element of a particular value. The example selects all the name attributes as input elements of the newsletter.

P3, [Attribute!=value]
Usage: $ ("input[name!= ' newsletter ')"). attr ("Checked", true); Return value Collection element

Description: Matches all elements that do not contain the specified attribute, or the attribute is not equal to a specific value. This selector is equivalent to: not ([Attr=value]), to match elements that have a specific attribute but not equal to a particular value, use [Attr]:not ([Attr=value]). Previously seen: Not sent in handy.

P4, [Attribute^=value]
Usage: $ ("input[name^= ' News ']") return value collection element

Description: A match for a given property is an element that begins with some value. We've seen these several symbols similar to regular matches. Now you can't forget it, right?

P5, [Attribute$=value]
Usage: $ ("input[name$= ' letter ']") return value collection element

Description: A match for a given property is an element that ends with some value.

P6, [Attribute*=value]
Usage: $ ("input[name*= ' Man ']") return value collection element

Description: Matches the given attribute to an element that contains some value.

P7, [Attributefilter1][attributefilter2][attributefiltern]
Usage: $ ("input[id][name$= ' Man ']") return value collection element

Description: A composite property selector that needs to be used when multiple conditions are met. It's a combination, which we use very often when we're actually using it. In this example, all of the ID attributes are selected, and the Name property is an element that ends with a man.

Example of a property filter selector:

P Select the following elements to change the DIV element whose background color is #0000FFp含有属性title. The P attribute is the div element with the title value equal to "test". P attribute the title value is not equal to "test" of the DIV element (will also be selected without the attribute title). The P attribute is the div element with the title value starting with "TE". The P attribute is the div element with the title value ending with "est". P attribute the title value contains the div element "es". P Select the div element with the attribute ID, and then select the attribute in the result the title value contains "es" div Elements. child element Filter SelectorP1,: Nth-child (index/even/odd/equation)
Usage: $ ("Ulli:nth-child (2)") return value collection element

Description: Matches the nth sub-or odd-even element under its parent element. This selector is somewhat similar to the EQ () in the previously mentioned basic Filters (Basic), where the former is starting at 0 and the latter starting from 1.

P2,: First-child
Usage: $ ("Ulli:first-child") return value collection element

Description: Matches the first child element. ': Primary ' matches only one element, and this selector will match one child element for each parent element. Here's a special point to remember the difference.

P3,: Last-child
Usage: $ ("Ulli:last-child") return value collection element

Description: Matches the last child element. ': ' matches only one element, and this selector will match one child element for each parent element.

P 4,: Only-child
Usage: $ ("Ulli:only-child") return value collection element

Description: If an element is the only child element in the parent element, it will be matched. If the parent element contains other elements, it will not be matched. Meaning: Only one child element will be matched!

The Pnth-child () selector is detailed as follows: (1): Nth-child (even/odd): the Element (2) of the index value under each parent element can be selected as an even (odd) Number: Nth-child (2): You can select an element with an index value of 2 under each parent element (3): Nth-child (3n): the element that can pick the index value under each parent element is a multiple of 3 (3): Nth-child (3n + 1): The element that can select the index value under each parent element is 3n + 1 An example of a child element filter selector: p Select the following element to change its background color to #0000FFp Each class is the 2nd child element under the div parent element of one. P Each class is the first child element under the div parent element of one and each class is the last child element under the div parent element P If class is just a single child element under the div parent element, select this child element Form object property Filter Selector

This selector primarily filters the selected form elements

P1,: Enabled
Usage: $ ("input:enabled") return value collection element

Description: Matches all available elements. Means to find all input without disabled= "disabled" in input. Not for disabled, of course it's enabled.

P2,:d isabled
Usage: $ ("input:disabled") return value collection element

Description: Matches all elements that are not available. It corresponds to the one above.

P3,: Checked
Usage: $ ("input:checked") return value collection element

Description: Matches all selected selected elements (check box, radio box, and so on, excluding option in select). That's a bit of a detour.

P4,: Selected
Usage: $ ("selectoption:selected") return value collection element

Description: Matches all selected option elements.

Example of a Form object property filter Selector:

P Use the Val () method of the JQuery object to change the value of the available <input> elements in the form P use the Val () method of the JQuery object to change the value of the unavailable <input> element in the form p using the length genus of the jquery object Sex get Multi box selected number p use the text () method of the JQuery object to get the contents of the drop-down box selected

$ ("Select Option:selected"). each (function () {

Alert (This). text ());

});

Form Selector

L1,: Input
Usage: $ (": input"); Return value Collection element

Description: Matches all input, textarea, select, and button elements

L2,: Text
Usage: $ (": text"); Return value Collection element

Description: Matches all single-line text boxes.

L3,:p Assword
Usage: $ (":p assword"); Return value Collection element

Description: Matches all password boxes.

L4,: Radio
Usage: $ (": Radio"); Return value Collection element

Description: Matches all radio buttons.

L5,: checkbox
Usage: $ (": checkbox"); Return value Collection element

Description: Matches all check boxes

L6,: Submit
Usage: $ (": Submit"); Return value Collection element

Description: Matches all submit buttons.

L7,: Image
Usage: $ (": Image") return value collection element

Description: Matches all image fields.

L8,: Reset
Usage: $ (": Reset"); Return value Collection element

Description: Matches all reset buttons.

L9,: Button
Usage: $ (": Button"); Return value Collection element

Description: Matches all buttons. This includes the direct write element button.

L10,: File
Usage: $ (": File"); Return value Collection element

Description: Matches all file domains.

L11,: Hidden
Usage: $ ("Input:hidden"); Return value Collection element

Description: Matches all invisible elements, or elements of type hidden. This selector is not limited to forms, except that the style is hidden in addition to the hidden in input.

Note: The way to select the hidden value in input is the use of the above example, but the direct use of ": hidden" is to match all the invisible elements of the page, including the width or height of 0,

Events in JQuery--loading DOM

p after the page has been loaded, the browser will add events to the DOM element via JavaScript. In regular JavaScript code, you typically use the Window.onload method, in JQuery, using the $ (document). Ready () method.

You can use $ (window). Load (function{}) $ (). Ready ();

Popular JavaScript Library--jquery