JQuery basic knowledge point summary (DOM operations), jquerydom

JQuery basic knowledge point summary (DOM operations), jquerydom

The jQuery method is more concise and convenient for DOM operations. The unified calling method facilitates learning and reduces the learning cost.

1. Style attribute operations

1) set style attributes

① Set a single style:

// The first parameter indicates the style property name. // The second parameter indicates the style property value (selector).css ("color", "red ");

② Set multiple styles (you can also set a single style)

// The parameter is optional values ())$selector).css ({"color": "red", "font-size": "30px "});

2) Get style attributes

// The parameter indicates the sample name to be obtained (selector).css ("font-size ");

2. Class operations

1) Add a class style

-- AddClass (className) adds a class className for a specified Element

$ (Selector). addClass ("liItem"); // The type does not contain vertices, and the class names of all class operations do not contain vertices.

2) Remove a class-- RemoveClass (className): removes the class className from a specified element.

$ (Selector). removeClass ("liItem"); $ (selector). removeClass (); // if no parameter is specified, all classes of the selected element are removed.

 3) determine whether there is a category Style

-- HasClass (className) determines whether the specified element contains the class className

$ (Selector). hasClass ("liItem"); // the return value is true or false.

4) switch the class style

-- ToggleClass (className) is the className for the specified Element Switching class. If this element has a class, it is removed. If no class is specified, it is added.

$(selector).hasClass(“liItem”);

Note]

1. When operating a class style, all class names do not contain vertices (.)

The 2nd operation has very few examples, so you can use the. CSS () method to operate it.

3. There are many operation styles, so you must use the class method to operate

4. if future maintenance is convenient (CSS is separated from js), Class operations are recommended. Similar to the CSS writing position (separating CSS from html)

Keywords: simple, crude, clean, straightforward

3. jQuery Animation

3.1 hide an animation

① Show Method

// Usage 1: // The parameter is a numerical value type, indicating the length of the animation to be executed/* Unit: Millisecond (MS), the parameter 2000 indicates that the animation duration is 2000 milliseconds, that is, 2 seconds */$ (selector ). show (2000); // usage 2: // The parameter is of the string type and is a default value of jQuery. There are three parameters: the correspondence between slow, normal, fast/* and usage 1 is: * // * slow: 600 ms, normal: 400 ms, fast: 200 ms */$ (selector ). show ("slow"); // usage 3: // parameter 1 can be a numeric or string type // parameter 2: the callback function that is executed immediately after the animation is executed $ (selector ). show (2000, function () {}); // usage 4: // without parameters, equivalent to css ("display", "block")/* Note: no animation effect */$ (selector ). show ();

[Note]: the syntax of the three sets of animations preset by jQuery is almost the same: there can be two parameters. The first one is the animation execution duration, the second is the callback function after the animation is executed.

The first parameter can be a specified character or number of milliseconds.

② Hide Method

$(selector).hide(1000); $(selector).hide(“slow”);$(selector).hide(1000, function(){});$(selector).hide();

3.2 slide-in/out animation

① Slide into the animation effect

$ (Selector ). slideDown (speed, callback); // Note: If the parameter is omitted or an invalid string is input, the default value is 400 milliseconds (also applies to fadeIn/slideDown/slideUp) $ (selector ). slideDown ();

② Slide out

// Function: Hide the animation above the element $ (selector). slideUp (speed, callback );

③ Slide in and out to switch the animation effect

$ (Selector). slideToggle (speed, callback); // The parameter is equivalent to "hide and show"

4. Fade-in and fade-out animation

① Fade-in animation effect

// Function: display the elements in the form of a faint line of sight $ (selector). fadeIn (speed, callback );

② Fade out

// Function: Hide the elements as they gradually disappear $ (selector). fadeOut (1000 );

③ Switching animation effects from fade in to fade out

// Function: Change the opacity to show or hide the Matching Element $ (selector ). fadeToggle ('fast ', function () {}); // The parameter is equivalent to "hide and show"

④ Change opacity to a value

-- Difference from fade-in and fade-out: fade-in and fade-out can only control the opacity of elements from full opacity to full transparency, while fadeTo can specify the specific opacity value of elements, and the time parameter is required!

// Purpose: Adjust the opacity of the matching element. // usage is different from other animation effects. // The first parameter indicates the duration. // The second parameter indicates the opacity value. value range: 0-1 $ (selector ). fadeTo (1000 ,. 5); // 0 completely transparent, 1 completely transparent // The first parameter is 0, which is equivalent :. css ("opacity ",. 5); $ (selector ). fadeTo (0 ,. 5 );

The CSS attributes of these animation effects provided by jQuery include: height, width, and opacity. {Height: 400px; width: 300px; opacity:. 4 ;}

The common characteristics of these three CSS attributes are that there is only one property value and the value is a value (after removing the unit ).

5. Custom Animation

Note: All attributes that can be animated must have only one numeric value.

For example, to change the font size, use: fontSize (font-size) instead of: font

// Purpose: execute a set of custom CSS attributes. // The first parameter indicates the CSS attributes (required) to be executed. // The second parameter indicates: animation execution duration (optional) // The third parameter indicates the callback function that is executed immediately after the animation is executed (optional) $ (selector ). animate ({params}, speed, callback );

6. stop the animation ()

6.1 purpose: Stop the animation currently being executed

6.2 why do we need to stop the animation?

If more than one animation method is called on the same element, the subsequent animation will be placed in the effect queue. In this way, an animation queue is formed. (Lenovo: queuing for inbound traffic)

The animation in the animation queue is not executed until the first animation is completed.

// The first parameter indicates whether to clear all subsequent animations. // The second parameter indicates whether to immediately execute the currently executing animation $ (selector ). stop (clearQueue, jumpToEnd); // common method $ (selector ). stop ();

Explanation:

When the stop () method is called, The next animation in the queue starts immediately. However, if the clearQueue parameter is set to true, the remaining animations on the queue are deleted and will never be executed.

If the jumpToEnd parameter is set to true, the current animation will stop, but every CSS attribute involved in the animation will be immediately set to their target values. For example, if the slideUp () method is used, the elements are hidden immediately. If a callback function exists, the callback function is executed immediately.

Note: If you call the sotp () method before the element animation is executed, the animation stops. If the animation is not completed, the callback function will not be executed.

7. jQuery node operations

7.1 dynamically create elements

// $ () Another function: dynamically create the element var $ spanNode =$ ("<span> I am a span element </span> ");

7.2 add elements (important)

① Append an element to the end of the last child element: append () (emphasis)

② Purpose: insert content after the last child element (or content) in the selected element (any element that exists or is created on the page)

If an element exists in the page, after append () is called, the element is removed from the original position and inserted to the new position.

If you append an element to multiple targets, the append () method will copy multiple copies of the element and then append it to multiple targets. (It is best not to do this)

③ Common parameters: htmlString or jQuery object

// Append $ node $ (selector) to $ (selector ). append ($ node); // append the div element to $ (selector). The parameter is htmlString $ (selector ). append ('<div> </div> ');

(Understand) uncommon operations: (The usage is basically the same as that of the append () method)

// AppendTo () // function: append $ (selector) to node ). appendTo (node); // prepend () // function: Append content or node $ (selector) before the first child element of an element ). prepend (node); // after () // function: insert content or node $ (selector) as a sibling element after the selected element ). after (node); // before () // function: insert content or node $ (selector) as a sibling element before the selected element ). before (node );

7.3 html creation elements (recommended, important)

① Purpose: set or return the html content (including HTML tags) of the selected element)

② When setting the content, if it is an html Tag, the element will be dynamically created. At this time, the role is the same as the innerHTML attribute in js.

// Create a dynamic element (selector).html ('<span> generous </span>'); // obtain the html $(selector).html ();

 7.4 clear elements

// Clear all sub-elements of the specified Element (pole Commander) // There are no sub-elements (selector).empty({{}(selector}.html (""); // "kill" yourself (including all internal elements) remove $ (selector) from the document ). remove ();

 7.5 copying Elements

// Function: copy the matched element // copy $ (selector) to the matched element // The returned value is the copied new element $ (selector). clone ();

[Conclusion]: We recommend that you use the html ("<span> </span>") method to create an element or clear an element in html ("").

8. Operate form (important)

8.1 attribute operations

① Set attributes:

// The first parameter indicates the property name to be set // The second parameter indicates the value corresponding to the property name to be changed $ (selector ). attr ("title", "Xiaohua ");

② Get attributes:

// The parameter is the name of the property to be obtained. The value $ (selector) corresponding to the specified property is returned for the modification operation ). attr ("title"); // at this time, the value of the specified attribute is returned

③ Remove attributes:

// The parameter is the name of the attribute to be removed $ (selector). removeAttr ("title ");

[Note]: The. prop () method must be used for checked, selected, and disabled.

The prop method is usually used to affect the dynamic status of DOM elements, rather than modifying HTML attributes. For example, the disabled feature of input and button and the checked feature of checkbox.

8.2 values and content

① Val () method:

// Function: set or return the value of a form element, for example, input, select, and textarea. // obtain the value of a matching element and match only the first element $ (selector ). val (); // set the values of all matched elements $ (selector ). val ("specific value ");

② Text () method

// Function: set or obtain the text content of the matching element // the retrieval operation does not contain parameters (Note: All the matched element content will be spliced into a string at this time, different from other get Operations !) $ (Selector). text (); // sets the operation with parameters. The parameter indicates the text content to be set $ (selector). text ("I am content ");

9. dimension and position operations

9.1 height and width operation

① Height ():

// Purpose: set or obtain the height of the matching element. // The value with a parameter indicates setting the height $ (selector ). height (200); // get the height without parameters $ (selector ). height ();

② Width Operation width ():

// Purpose: set or obtain the width of the matching element. // The value with parameters indicates that the width is set. // The value without parameters indicates that the width is obtained. $ (selector). width (200 );

What is the difference between css () and height?

A: method 1. Return Value: 'number' type, for example, 30
Method 2: return the string type, for example, "30px"
Difference: method 1 is often used in mathematical calculations.
 

9.2 coordinate value operation

① Offset ()

// Function: obtain or set the position of an element relative to the upper left corner of the document. // No parameter is set to obtain the element. The returned value is {left: num, top: num }, the value is relative to the position of the document $ (selector ). offset (); // a parameter indicates the setting. The value type $ (selector) is recommended for the parameter ). offset ({left: 100, top: 150 });

Note: After offset is set, if the element is not located (default value: static), it is changed to relative.

② ScrollTop ()

, Role: Get or set the vertical scroll position of the element // No parameter indicates obtaining the offset $ (selector ). scrollTop (); // a parameter indicates setting an offset. The parameter is of the numerical type $ (selector ). scrollTop (100 );

③ ScrollLeft ()

 

// Function: obtain or set the position of the horizontal scrolling element $ (selector). scrollLeft (100 );

Understanding of scrollTop:

The vertical scroll bar position is the height of the hidden area above the visible area.

If the scroll bar does not scroll at the top or the current element does not appear, the distance is 0.

The above jQuery basic knowledge point summary (DOM operation) is all the content shared by the editor. I hope to give you a reference, and I hope you can provide more support for the help house.