jQuery_style

https://code.jquery.com/jquery-3.2.1.js

Difference :

jQuery is an array-like object, and a DOM object is a single DOM element.

jQuery:

styles, events, animations, DOM

1. Selector

1. id selector : _

var $id = $("#aaron");

2. Class selector:

var $ class = $ (“.arron”);

3. Element selector:

$(“element”);

4. Full selector:

$(“*”);

5. Level selector:

the difference:

1. Hierarchical selectors have a reference node
2. Descendant selectors contain the content of the child selector's selection
3. General sibling selectors contain what was selected by adjacent siblings
4. The elements selected by the adjacent sibling selector and the general sibling selector must be under the same parent element

> (greater than sign) follows the parent-child relationship, such as $("div > p"), ​​which means that the direct layer under the div is the node of p .

+ (plus sign)   closely follows a sibling relationshipFor example , $("div + p") means to select the left and right adjacent p nodes on the same layer of div .

~ (wavy line) sibling relationship at any distance, such as $("div + p"), ​​means to select the p node on the same layer of the div .

( space )    Parent-child relationship at any levelFor example , $("div p") means to select the p node under the div (no matter how many layers there are in the middle).

, ( comma )   represents a selector combination, such as $("div p, span p") represents the p node under the div and the p node under the span .

6. Basic filter selector:

7. Content Filter Selector:

1. :contains and :has both mean search, but contains searches for elements containing " specified text " , and has searches for elements containing " specified elements "
2. If the text matched by :contains is contained within the element's child elements, it is also considered eligible.
3. :parent is the opposite of :empty , the child elements involved in both, including text nodes

8. Visibility selector:

9. Child element filter selector:

10. Form element selector:

11. Form object attribute filter selector:

12. Special selector this:

var $this = $(this); Convert the element object to a jQuery object;

2. Properties and styles:

1. Element characteristics:

.attr()

.removeAttr()

expression:

1. attr ( incoming attribute name ) : get the value of the attribute
2. attr( attribute name , attribute value ) : set the value of the attribute
3. attr( attribute name , function value ) : set the function value of the attribute
4. attr(attributes) : set multiple attribute values ​​for the specified element, namely: { attribute name one : " attribute value one ", attribute name two : " attribute value two ", … … }

2..html () given .text ()

1. .html() does not pass in a value, it is to get the HTML content of the first matching element in the collection
2. .html( htmlString )  sets the html content of each matched element
3. .html( function(index, oldhtml) ) returns a function that sets the HTML content

1. .text() gets the combined text of each element in the set of matched elements, including their descendants
2. .text( textString ) is used to set the text that matches the content of the element
3. .text( function(index, text) ) returns a function that sets the text content

3.  .val() handles the value of the form element

1. .val() takes no parameters, gets the current value of the first element in the set of matched elements
2. .val( value ) , sets the value of each element in the matched set of elements
3. .val( function ) , a function to return the set value

the difference:

1. The three methods .html(), .text(), and .val() are all used to read the content of the selected element; but .html() is used to read the html content of the element (including html tags), .text() is used to read the plain text content of the element, including its descendants, and .val() is used to read the "value" value of the form element. The .html() and .text() methods cannot be used on form elements , while .val() can only be used on form elements; in addition , when the .html() method is used on multiple elements, only the first elements; the .val() method is the same as .html() , if it is applied to multiple elements, it can only read the "value" value of the first form element , but .text() is different from them, If .text() is applied to multiple elements, the text content of all selected elements will be read.
2. The three methods .html(htmlString), .text(textString) and .val(value) are all used to replace the content of the selected element. If the three methods are used on multiple elements at the same time, all the selected elements will be replaced Content.
3. .html(), .text(), .val() can use the return value of the callback function to dynamically change the content of multiple elements.

4. Add / remove styles

.addClass()

.removeClass

5. Switch styles

.toggleClass()

Delete if there is, add if not

6. Style manipulation

.css() get / set

7. Element data storage

Storage interface provided by jQuery

jQuery.data( element, key, value ) // Static interface , save data

jQuery.data( element, key ) // Static interface , get data   

.data( key, value ) // Instance interface , save data

.data( key ) // Instance interface , save data