JQuery Study Notes 1

JQuery learning Notes 1. Jquery Introduction 1. JQuery is an encapsulation of JavaScript (many extensions of JQuery) 2. $ (# div) in JQuery) # indicates that one element is not added # indicates multiple. 3. JQuery shields the differences between browsers. 4. Open source ,... syntaxHighlighter. all ();

JQuery learning notes
1. Jquery Introduction
1. JQuery is an encapsulation of JavaScript (there are many JQuery extension plug-ins)
2. In JQuery, $ (# div) # represents one element without adding # represents multiple
3. JQuery shields browser differences
4. Open-source, free, and a large number of plug-ins can be downloaded online
5. Vsdoc is a technology added after vs2008sp1. Put it together with js and Vs will have the automatic prompt function.

Ii. ready of JQuery
1. $ (document). ready (function () {alert ('Load finished ')}
2. Differences between ready and onload
Onload is triggered after all elements are created, images, and css are loaded, while ready is triggered after the Dom elements are created, which improves the response speed of the webpage.
Onload can only be registered once, And ready can be registered multiple times
$ (Window). load () to call the onload event.
3. the abbreviation of ready is $ (function () {alert ('ready3 '};})
4. $ is actually a function with a strange name.
Iii. built-in functions provided by JQuery
1. $. map (array, fn) calls the fn function to process each element in the array one by one, and returns the fn processed array
Example: var arr = [3, 5, 8];
Var arr2 = $. map (arr, function (item) {return item * 2 ;});
2. $. map cannot process arrays of the Dictionary Style
3. $. each (array, fn)
4. Example: var dict = {"tom": 20, "liyang": 26, "lili": 25 };
$. Each (dict, function (key, value) {alert (the age of key + 'is:' + value });
5. var arr = {3, 5, 8 };
$. Each (arr, function (item) {alter (item)}); // item is the index 012
$. Each (arr, function () {alter (this);} // this is a value of 3, 5, 8

6. assigned in
$ (Function () {alert ('page Load completed, equivalent to onload ');});

Var arr = [3, 5, 7];
Var arr2 = $. map (arr, function (item) {return item * 3 });

Alert (arr2 );

Var dict = {"tom": 20, "liyang": 25, "lili": 32 };
$. Each (dict, function (key, value) {alert (key + "Age is" + value );});

$. Each (arr, function (key, value) {alert (key + "___" + value );});

Iv. JQuery object and DOM object
1. DOM objects must be converted to JQuery objects for JQuery operations
2. document. getElementById ("div1") = $ ('# div1 ')
3. convert a DOM object to a JQuery object $ (DOM object name)
4. convert a JQuery object to a DOM object
Var domobj = jqobj [0] Or var domobj = jqobj. get (0)
For example, var div1 =$ (# div) [0];
$ (Function (){
Var div1 = document. getElementById ("div1 ");
((Div1).html ("Baidu"); // convert dom object div1 to JQuery object
Var div2 = $ (div1) [0]; // convert a JQuery object to a Dom object
Alert (div2.innerHTML );
});
5. JQuery sets the style $ ("# div1" ).css ("background", "red ");
Get the style $ ("# div1" ).css ("background ");
Set value $ ("# txt1"). val ("test ");
Get value $ ("# txt1"). val ();
6. VS instance
$ (Function () {alert ($ ("# div1" ).html ())});
$ (Function () {alert ($ ("# div1"). text ())});

V. JQuery Selector
1. $ ("# Control Id") = getElementById
2. $ ("TagName") = getElementByTagName implicit Iteration
3. $ (". test") = all controls whose class is "test"
4. Multi-condition Selector
$ ("P, div, span. menuitem") Select the p tag, div tag, and span tag element with the menuitem style.
5. Note that there must be no more or fewer spaces in the selector expression.
6. Hierarchical Selector
(1), $ ("div li") Get all the li elements under the div (child, child, child)
(2), $ ("div> li") Get the direct li element under the div
(3), $ (". menuitem + div ")
Obtain the first div element after the style name is menuitem.
(4), $ (". menuitem ~ Div ")
Obtain all div elements after the style name is menuitem
7. Instance

// Add all the divs (equivalent to getElementsTagName) and click the event to display the Text in the div
$ (Function () {$ ("div"). click (function () {alert ('I am' + this. innerText );})});
// Retrieve all elements based on the style
$ (Function () {$ (". waring"). click (function () {alert ("I am warning ");})});
// Obtain the li of all div
$ (Function () {$ ("div li"). click (function () {alert ('obtain the lies' under all divs ');})});
// Obtain the upper-layer ul of the direct sub-element li under the div.
$ (Function () {$ ("div> li "). click (function () {alert ('can only be obtained directly under div, but cannot be obtained in p ')})});

Vi. JQuery Iteration
1. How to determine whether an object exists? JQuery returns an array of objects,
Calling methods such as text (), html (), and click () is actually for each element
Each method is called iteratively, so the element selected by the id selector does not exist.
No error is reported. If you need to determine whether the specified id exists, write it
If ($ (# btn1 "). length <= 0) {alter ('element with id btn1 does not exist ');}
VII. node Traversal
1. next () gets the next element of the same level (same as its own type)
2. nextAll () obtains all elements of the same level (the types can be different)
3. nextAll ("div") obtains the div element after the same level.
4. siblings () is used to obtain all peer elements.
5. siblings ("div") obtains all peer div elements
9. Basic filter Selector
1. Select the first element $ ("div: first") and select the first element.
2. last select the last element $ ("div: last") Select the last div.
3. not (selector) selects elements that do not meet the "selector" condition.
$ ("Input: not (. myClass)") the selected style is not myClass
4. even and: odd: Elements with odd and even indexes:
$ ("Input: event") select input with an odd Index
$ ("Input: odd") Select an even number of inputs
5.: eq (index serial number),: gt (index serial number), and: lt (index serial number) Select an index equal to or greater
Elements smaller than the index number,
$ ("Input: lt (1)") Select
6. (": header") Select All h1.. h6 elements *
7. ("div: animated") Select the element of the animation being executed *

8. Relative positioning: If you specify the second parameter in $ (), the second parameter is the relative element.
$ ("Ul", certificate (this)).css ("background", "red ")
8. Example: fontsize = 40 for the first line with an odd line of yellow background;
The last line summarizes the first three lines of Poems in red fontSize = 28
$ (Function (){
// $ ("# TbMain tr: event" ).css ("background", "yellow ");
$ ("# TbMain tr: first" ).css ("fontSize", "40 ");
$ ("# TbMain tr: last" ).css ("color", "red ");
$ ("# TbMain tr: gt (0): lt (3)" ).css ("fontSize", "28"); // lt (3) is from gt (0) calculate the start of a new sequence
$ ("# TbMain tr: gt (0): even" ).css ("background", "yellow"); // the header does not participate in parity.
// Gt (0) will cause the sequence number to change

});
// Relative positioning of TD in the forward row
$ (Function (){
$ ("# Tb1 tr"). click (function (){
$ ("Td", Token (this)).css ("background", "red ");
});
});

10. Attribute Filter
1. $ ("div [id]") Select
2. $ ("div [title = test]") Select
3. $ ("div [title! = Test] ") if the selected attribute is not" test ",
You can also select the start, end, and contain options, and combine the conditions (*)
Form Filter
1. $ ("# form1: enabled") select all enabled elements in the form with id form1
2. $ ("# form1: disabled") select all the disabled elements in the form with id form1
3. $ ("input: checked") selects all the selected elements (Radio and CheckBox)
4. $ ("select: selected") select all selected option elements (drop-down list)
11. Element each
$ ("Input [name = names]"). click (function (){
Var arr = new Array ();
$ ("Input [name = names]: checked"). each (function (key, value ){
Arr [key] = $ (value). val ();
$ ("Div"). text ("selected" + arr. length + "item" + arr. join (","));
})
})
12. Form Selector
1. $ (": input") Select All And button Elements2. $ (": text") Selecting All single-line text boxes is equivalent to $ ("input: [type = text]")3. $ (": password") select all password boxesLikewise, there are: radio: checkbox: submit: image: reset: button: file: hidden and so on.13. JQuery Dom operations1. Use the html () method to read or set innerHTML2. Use the text () method to read or set innerText3. Read or set the attributes of an element using the attr () method, and perform operations on attributes that are not encapsulated using attr.$ ("A: first"). attr ("href", "http://www.2cto.com ");4. Use removeAttr to delete attributesThe difference between clearing and deleting is that href = "" there is no href attribute during deletion. 5. dynamically create a Dom node $ (html string)Var link = "Baidu ";6. append an element to the end of an element7. Add prepend elements at the beginning of the element8. after, add an element (add a brother) after the element)9. before add an element before the element (add brother)10. remove the selected node (return the deleted Node object) and continue to use the deleted node.Var lis = $ ("# ulSite"). remove ();$ ("# UlSite2"). append (lis );11. empty () clears nodes.12. Use attr to set and obtain attributes not encapsulated by jQuery$ ("# BtnReg"). attr ("disabled", true); set the button to disableNote: The Search Engine cannot catch the content written dynamically.Author liyangfd