jquery review-add vitality to the page with jquery

with JQuery add vitality to a page

One, Element node operation

1. Creating ELEMENT nodes
To make the page more intelligent, sometimes we want to dynamically add an element tag on the HTML structure page

var box = $ (' <div id= ' box > Node </div> '); Create a Node

$ ('  ',      {         src: ' images/little.bear.png ',         alt: ' Little Bear ',         title: ' I woof-Your general Direction ',      })      . css ({        cussor: ' pointer ',        border: ' 1px solid black ',        padding: ' 12px 121px 20px 12px '      })      . AppendTo (' body ');

2. Inserting nodes

3. Parcel Node

4. Copy node Clone (copyhandlers)

Creates a copy of the elements in the wrapper set and returns a new wrapper set that contains the copies. Any child nodes of these elements will be copied

$ (' img '). Clone (). AppendTo (' Fieldset.photo ');

5. Deleting elements

(1) Remove (selector)

Remove all elements from the wrapper set from the page Dom

(2) Detach (selector)

Remove all elements from the wrapper set from the page DOM, preserving bound events and jquery data

(3) Empty ()

Delete the contents of all DOM elements in the matching collection

6. Replacing elements

(1) replacewith (content)

$ (' img[alt] '). each (function () {    $ (this). ReplaceWith (' <span>+$ (This). attr (' alt ') + ' </span> ')});

(2) ReplaceAll (selector)

Second, using element attributes and attributes

1, attr (key)

Description: Gets the property value of a key property

Example: $ (' #myImage '). attr (' Data-custom ');

2, attr ({key1:value1,key2:value2 ...})

Description: Sets the corresponding attribute values for all elements in the matching set with the attributes and values specified by the passed-in object

Example:

$ (' input '). attr (    {value: ', Titile: ' Please enter a value '});

Example:

$ (' #myImage '). attr (' Data-custom ', "good");

3, attr (Key,value)

Description: Set the property value of a key property

4, attr (Key,function (Index,vlaue) {})

Description: A key property is set by using FN, which invokes a function for each element in the wrapper set, and the return value of the function is used as a characteristic value. You need to pass in two parameters when the function is called: one is the index of the element in the wrapper collection starting at 0, and the other is the current value of the named attribute. In addition, the current element is set to the context of the function in the process of the function call (this)

Example:

$ (' * '). attr (' title ', function (index,previousvalue) {       return previousvalue = ' I am element ' + index + ' and my name is ' + (This.id | | ' unset ');})

5. Delete specific

REMOVEATTR (name)

Iii. changing element styles

1 , adding and removing class names

(1) addclass (names)

parameters : Names (string, function) specifies the class name to add, or multiple class names in a space-delimited string. If the parameter is a function, call this function for each wrapper element, set the current element as the function context, and pass two parameters: the subscript of the element and the value of the current class. The return value of a function as a single or multiple class name

return value: packing Set

(2) Romoveclass (names)

parameters : Names (string, function) specifies the class name to delete, or multiple class names in a space-delimited string. If the argument is a function, call this function for each wrapper element, set the current element as the function context, and pass two parameters: the subscript of the element and the value of the pre-deleted class. The return value of a function as a single or multiple class name

return value: packing Set

(3) Toggleclass (names)

Description: Adds a class name to an element if it does not exist for the specified class name, and removes the class name from the element if it already owns the class name.

Parameters: Names (String | function) specifies the single class name to toggle, or multiple class names represented by a space-delimited word a. If the argument is a function, the current element is set to the function context. The return value of a function is a single or multiple class names.

Cases:

$ (' tr '). Toggleclass (' striped ');

(4) Toggleclass (Names,switch)

Description, if the switch evaluates to True, the class name is added, and if the result evaluates to False, the class name is deleted

Parameters :

Names (String | function) specifies the individual class name to toggle, or multiple class names represented by a space-delimited word a. If the argument is a function, call this function for each wrapper element, set the current element as the function's context, and pass two parameters: the subscript and current value of the element. The return value of a function as a single or multiple class name

Switch: A control expression whose value determines whether to add a class (true) to the element or delete the class (false)

(5) Hasclass (name)

Determine if there are elements in the match set that have the class name passed in by the name parameter

2 , get and set styles

1. CSS (name)

Description: Gets the computed value of the CSS property of the first element in the wrapper set, which is specified by name

2. CSS ([Name1,name2,name3])

Description: Gets the values of multiple CSS within an element row

3, CSS (name,value);

Description: Sets the value of an element's inline CSS

4. CSS (Name,function (Index,vlaue) {})

5. CSS ({name1:value1,name2:value2,name3:value3})

Description: Multiple CSS styles in a row

3 , CSS Method

Iv. Setting element content
We get the elements we want to manipulate through the various selectors and filters we've learned earlier. At this point, we can perform DOM operations on these elements. The most common operation, then, is to get and modify the content of the element.

JQuery review-add vitality to a page with jquery