Summary of JQuery knowledge points

"The article summarizes the teaching materials in Silicon Valley"

To be sent for reference.

1.
. Class Selector
# ID Selector
: Select

2. $ (function () {}) is equivalent to the Window.onload method.
Window.onload = function () {...}

3. Two ways to load the DOM: JQuery and Window.onload
$ (document). Ready (function () {...})
$ (function () {...}

4. Select the button and add the OnClick response function. $ ("button"). Click (function () {}

5. JQuery and DOM objects
[1]. The JQuery object is converted to a DOM object.
1). Gets a JQuery object.
var $btn = $ ("button");
2). The JQuery object is an array.
Alert ($btn. length);
3). You can convert an array subscript to a DOM object.
Alert ($btn [1].firstchild.nodevalue);
[2]. The DOM object is converted to a JQuery object.
1). Select one of the DOM objects.
var btn = document.getElementById ("btn");
2). Convert the DOM object to a JQuery object: Use $ () to wrap.
Alert ($ (BTN). text ());

6. Use the ID selector to select the ID=BTN1 element and add the onclick response function for the selected JQuery object.
$ ("#btn1"). Click (function () {...});

7. jquery object traversal is each, within each of this is the resulting DOM object, not a JQuery object
$ ("#btn5"). Click (function () {
var leng = $ (": checkbox[name= ' Newsletter ': checked]"). each (function () {
alert (this.value);
});
});

8. Select a child element to add a space before the selector. Div.one with. One.
$ (". One:nth-child (2)"). CSS ("Backgroud", "#ffbbaa");

9. Select an array, and when there are multiple elements in the array, the. Val () method will only get the first selected value selected.

The JQuery object can be implicitly iterated:
$ ("P"). Click (function () {...})
The Click Response function is added for all of the selected P nodes.
The JQuery object itself is an array of DOM objects.

11. In the response function, this is a DOM object that needs to be wrapped as a jquery object if you want to use the method of the jquery object:
Use $ () to wrap this up.

The text () method is a read-write method:
Read the text value without any parameters;
Add a parameter that adds a text value (text node) for the attribute node.
Similar to the text () method: attr (), Val ().

13. Use JQuery to manipulate text nodes, attribute nodes, and find element nodes.
1). Manipulating text nodes: the text () method of the JQuery object
Alert ($ ("#bj"). Text ());
$ ("#bj"). Text ("TEST");

2). Action attribute node: the Atter () method of the JQuery object.
Note: The direct manipulation of the value property values can be done using the co-convenient Val () method.
Alert ($ (": text[name= ' username ')"). attr ("value"));
$ (": text[name= ' username ']"). attr ("value", "TEST");

14. Create a node:
Using the $ (HTML) method, the element node, the text node, and the attribute node can clean sweep the JQuery object that returns the corresponding node:
$ ("<li id= ' Test ' > Testing </li>")

15. Add a node:
1). AppendTo () and append (): The position of the subject and the object is different:
("<li id= ' Test ' > Testing </li>"). AppendTo ($ ("#city"));
$ ("#city"). Append ("<li id= ' Test ' > Testing </li>");

2). Prependto () and prepend (): Different subject and object positions:
$ ("<li id= ' Test ' > Testing </li>"). Prependto ($ ("#city"));
$ ("#city"). Prepend ("<li id= ' Test ' > Testing </li>");

16. As with JS's response function, the JQuery object's response function returns false to cancel the default behavior of the specified element, such as submit, a, and so on.

The Val () method, which is equivalent to attr ("value"), gets the value of the form element

$.trim (str) can remove the front and back spaces of Str.

The Remove () method for the JQuery object:
The DOM node corresponding to the jquery object will be deleted directly
$ ("#bj"). Remove ();

20. Clear the Game node:
The empty () method of the JQuery object: empties all the child nodes of the DOM object corresponding to the jquery object.
$ ("#game"). empty ();

jquery calls the return value of the method provided by jquery if it is an object then this object must be a JQuery object

Find () Method: Finds child nodes and returns the JQuery object corresponding to the child node.

. JQuery Clone method: Copy node.
1). The clone node needs to be aware of the id attribute of the cloned node. The Wakahara node has an id attribute, then after cloning, a two node with the same ID will appear in a document.

2). Clone (True): The Clone node contains the event while cloning the node.

JQuery replacewith (ReplaceAll) Method: Replace node.
1). Repalcewith, ReplaceAll a pair of methods to complete the same function, but the main guest location is different.
2). The above two methods also have the function of moving.
3). Node swapping requires cloning nodes first.
4). var $rl = $ ("RL"). ReplaceWith ($BJ 2); Returned is the node that was replaced by RL.

25.
1). Create a <li> test </li> node, replacing the last Li child node of the #city.
$ ("<li> test </li>"). Repalceall ($ ("#citi li:last"));
2). Create a <li> test </li> node, replacing the second Li child node of the #city.
$ ("#city li:eq (1)"). ReplaceWith ($ ("<li> test </li>"));
3). Swap the following two nodes: #rl and #bj. (The interchange node has a moving function).
var $bj 2 = $ ("#bj"). Clone (True);
var $rl = $ ("RL"). ReplaceWith ($BJ 2);
$ ("#bj"). ReplaceWith ($RL);

26. Using JQuery Wrap, Wrapall, Wrapinner:
1). package Li itself.
# ("#game li"). Wrap ("<font color= ' Red ' ></font>");
2). Package all li.
$ ("#city li"). Wrapall ("<font color= ' Red ' ></font>");
3). Packaging li inside the text.
$ ("#language li"). Wrapinner ("<font color= ' Red ' ></font>");

Val cannot directly obtain the value selected by the checkbox. If directly obtained, only the first selected value can be obtained.
Because $ (": Checkbox[name= ' C ']:checked") gets an array, the Val () method can only get the first value of an array element, and if you want to print all of the values that are selected, you use each traversal

The JQuery style-related methods.
1). Hasclass (): Whether an element has a specified style.
Alert ($ ("div"). Hasclass ("Subcategorybox"));//true
2). Remove the style.
$ ("div"). Removeclass ("Subcategorybox");
3). Add a style.
$ ("div"). addclass ("Subcategorybox");
4). Toggle Style: The presence is removed;
$ (". ShowMore"). Click (function () {
$ ("Div:first"). Toggleclass ("Subcategorybox");
return false;
});
5). Gets and sets the element transparency: opacity property.
Alert ($ ("Div:first"). CSS ("opacity"));
$ ("Div:first"). CSS ("opacity". 0.5);
6). Width () & Height ().
Alert ($ ("Div:first"). width ());
Alert ($ ("Div:first"). Height ());
$ ("Div:first"). Width (400);
$ ("Div:first"). Height (80);
7). Gets the relative displacement of the element in the current window: offset ().
Its return object contains two properties: Top, left. The method is valid only for visible elements.
Alert ($ ("Div:first"). Offset (). top);
Alert ($ ("Div:first"). Offset (). left);

Another way to do the OnClick event: Bind: Binds an event to a JQuery object.
$ (". Head"). Click (function () {...});
$ (". Head"). Bind ("click", Function () {...})

30. Event bubbling: What is the bubbling of events.
$ ("Body"). Click (function () {
Alert ("1");
});

$ ("#content"). Click (function () {
Alert ("2");
});

$ ("span"). Click (function () {
Alert ("3");
How to resolve event bubbling: You can block bubbling by returning false at the end of the response function.
return false;
});

Toggle () to toggle whether the element is visible.
Slidetoggle (): Toggles the visibility of matching elements by a height change.
Fadetoggle (): Toggles the visibility of matching elements through transparency changes.
FadeTo (): Adjusts the opacity to a transparent value in a progressive manner.

var $category = $ ("LI:GT (5): LT (7)");
The LT is now running on the basis of LI:GT (5).

33. Summary:
[1]. JQuery is a library of JavaScript functions, very convenient, very mainstream
[2]. Steps to develop with JQuery:
1). Import the JQuery Library
2). Edit the code in the (function () {})
[3]. JQuery Object vs DOM Object
1). Both cannot use each other's properties and methods
2). The JQuery object is a DOM array object, so you can use subscripts to convert to DOM objects.
var $btn = $ ("button");
var btn = $btn [0];
3). The JQuery object is the object that is produced after wrapping the DOM object with $ ().
$ ("select:selected"). each (function () {
Alert ($ (this). value);
})
[4]. JQuery Selector.
1). Choose the option for selected select to use to select a child node
$ ("select[name= ' Test ']: Selected"). each (Funtion () {...})
2). JQuery selector can be used in combination
3). If the selector is uncertain, you can call the method implementation
[5]. Several methods of JQuery objects:
1). val (): Gets or sets the Value property of the form element
Setting the value
$ (": Text:enable"). Val ("TEST");
Get value
$ (": Text:enable". Val ())
2). attr (): Similar to the Val () method
attr (Name.val): Assigns a value of Val to the Name property
attr (name): Gets the Name property value
3). Each (): The JQuery object is traversed, its parameters are function, and this inside the function is the DOM object being traversed
$ ("select:selected"). each (function () {
alert (this.val);
})
4). Text (): Similar to the Val () method
Text (): Gets the value of the element node's text child node
Text (str): Sets the value of the element node's text child node

[6]. Use jquery for DOM operations:
1). New (element, attribute, text) node: directly using the $ () wrapper, the return value is a jquery object.
var $TEST = $ ("<li id= ' Test ' > Testing </li>");
2). Insert the node into the document:
①append, AppendTo: Inserting node A as the last child node of node B

$ ("<li id= ' Test ' > Testing </li>"). AppendTo ($ ("#city"));
$ ("#city"). Append ("<li id= ' Test ' > Testing </li>");

②prepend, PREPENFTO

$ ("<li id= ' Test ' > Testing </li>"). Prependto ($ ("#city"));
$ ("#city"). Prepend ("<li id= ' Test ' > Testing </li>");

③before, InsertBefore

$ ("<li id= ' DDD ' > Dick Dick </li>"). InsertBefore ($ ("#bj"));
$ ("#bj"). Before ("<li id= ' DDD ' > Dick Dick </li>");

④after, InsertAfter

$ ("<li id= ' DDD ' > Dick Dick </li>"). InsertAfter ($ ("#bj"));
$ ("#bj"). After ("<li id= ' DDD ' > Dick Dick </li>");

3). Delete node:

$ ("#bj"). Remove ();

4). Empty the node:

$ ("#game"). empty ();

5). Clone node:

$ ("#bj"). Clone (True);

6). Replace node:

$ ("<li> test </li>"). Repalceall ($ ("#citi li:last"));

$ ("#city li:eq (1)"). ReplaceWith ($ ("<li> test </li>"));

7). Wrap, Wrapall, Wrapinner: Learn

8). val (), HTML (), text (), attr (), Width (), height () and other methods that have read and write functions.

Reading the HTML content of a node
Alert ($ ("#city"). html ());

Set the HTML content of a node
$ ("#city"). HTML ("<li id= ' DDD ' > Dick Dick </li>")

[7]. Beyond the technical point:

1). JQuery objects can be implicitly iterated: $ ("P"). Click (function () {...}) For all of the selected p
The Click Response function is added to the node. The JQuery object itself is an array of Dom objects.

2). Show iterations in jquery: Use the Each () method:
$ (": Checkbox[name= ' C ']:checked"). each (function () {
alert (this.value);
});

The index of the object being traversed can be obtained through the Index property in the parameters of the response function that displays the iteration.

3). In the response function, this is a DOM object, and if you want to use the method of the jquery object, you need to wrap it as
jquery object: Use $ () to wrap this up.

4). DefaultValue:D The properties of the Om object, you can get the default values for the form elements.

5). Assign a value to radio by Val (): Even if you assign a value to a set of radio, you should use an array in the Val parameter.
Using a value does not work

6). Val cannot directly get the value of the checkbox being selected. If obtained directly, only the first selected value can be obtained. because
to $ (": Checkbox[name= ' C ']:checked") is an array, and the Val () method can only get the first value of an array element, and if you want to print all the values that are selected, use each traversal.
And radio is selected only one, so you can directly use the Val () method to get the selected value.

7). 1. As with JS's response function, the response function of the JQuery object returns False to cancel the specified element
The default behavior, such as submit, a, and so on.

8). $.trim (str) can remove the front and back spaces of Str.

9). The concatenating of the method of the JQuery object: Call the return value of a method or the called object, so you can follow the call method
Other methods for invoking the previous object.

). Find () Method: Finds child nodes and returns the JQuery object corresponding to the child node.

var $trNode = $ (anode). Parent (). parent ();
Gets the text value of the text node of the first TD node $tr.
var textcontent = $trNode. Find ("Tr:first"). Text ();

This article is from the "Irvin" blog, make sure to keep this source http://irvin.blog.51cto.com/9783109/1785637

Summary of JQuery knowledge points