JQuery is introduced
- JQuery was founded by American John Resig in 2006
- JQuery, the most popular JavaScript library, is a wrapper around JavaScript objects and functions
- It is designed with the idea of write less,do more
What can jQuery do?
- Access and manipulate DOM elements
- Control page Styles
- Handle page events
- Extend the new jQuery plug-in
- Perfect combination with Ajax technology
The relationship between jQuery and JavaScript can be understood as the relationship between “idioms” and “vernacular”. Idioms are highly compressed for the vernacular, and jQuery is a highly compressed library for JavaScript
The advantage of the jQuery
- Small size, only about 100KB after compression
- Powerful selector
- Great DOM encapsulation
- Reliable event handling mechanisms
- Excellent browser compatibility
The use of the jQuery
JQuery, as a separate JS file, does not conflict with other JS files.
<script src="Js/jquery - 3.4.1 track. Min. Js." "></script>
Copy the codeBasic syntax introduction
<script>
$(selector).action();
</script>
Copy the codeDescription:
- Factory function $() : converts DOM objects into jQuery objects
- Selector: Gets the DOM element to operate on (yes, it’s basically the same as CSS)
- Method Action () : the method provided in jQuery, including the binding event handling method. “$” equals” jQuery “.
- Such as:
<body>
<p>hello</p>
</body>
<script src="Js/jquery - 3.4.1 track. Min. Js." "></script>
<script>
alert( $("p").text() );
</script>
Copy the codeJQuery objects and DOM objects
DOM objects and jQuery objects have a separate set of methods and cannot be used together
$("#title").html(); // Equivalent to document.getelementById ("title").innerhtml;Copy the codeIf you want to mix, you have to switch
- DOM object to jQuery object
var a = document.getElementById("name"); A is a DOM object
var b = $(a); // b is jQuery object
Copy the code- JQuery object to DOM object
var a = $("#name"); A is a jQuery object
var b = jqObject.get(0); // b is DOM object
Copy the codeThe selector
Basic selector
Basic selectors include label selectors, class selectors, ID selectors, union selectors, intersection selectors, and global selectors
| The name of the | Syntax constitute | describe | The sample |
|---|---|---|---|
| Label selector | element | Matches elements based on the given tag name | $(“h2”) selects all h2 elements |
| Class selectors | .class | Matches elements based on the given class | $(“.title”) selects all elements whose class is title |
| The ID selector | #id | Matches elements based on the given ID | $(” #title”) selects the element with id title |
| Union selector | selector1,selector2,… ,selectorN | Returns the elements matched by each selector together | $(“div,p,.title”) selects all div,p, and elements with class as title |
| Intersection selector | Element. The class or element# id | Matches an element or collection of elements with the specified class or ID | $(“h2.title”) selects all h2 elements with class title |
Hierarchy selector
| The name of the | Syntax constitute | describe | The sample |
|---|---|---|---|
| Descendant selector | ancestor descendant | Selects all descendant elements in the ancestor element | $(“#menu span”) selects the elements under #menu |
| Child selectors | parent>child | Select the Child element under parent | $(” #menu>span”) selects a child element of #menu |
| Adjacent element selector | prev+next | Select the next element immediately after the prev element | $(” h2+dl “) selects the next sibling of the immediate element |
| Peer element selector | prev~sibings | Selects all siblings elements after the prev element | $(” h2~dl “) selects all the siblings after the element |
Property selector
| The name of the | Syntax constitute | describe | The sample |
|---|---|---|---|
| Property selector | [attribute] | Selects the element that contains the given attribute | $(” [href]”) selects the element containing the href attribute |
| [attribute=value] | Selects an element equal to a particular value for the given attribute | $(” [href =’#’]”) selects the element whose href value is “#” | |
| [attribute !=value] | Selects elements that are not equal to a particular value for the given attribute | $(” [href!=’#’]”) selects elements whose href value is not “#” | |
| [attribute^=value] | Selects elements whose given attributes start with some specific value | $(” [href^=’en’]”) selects elements whose href value begins with en | |
| [attribute$=value] | Selects an element whose given attribute ends in some specific value | =’.jpg’]”) selects elements whose href value ends in.jpg |
|
| [attribute*=value] | Selects an element that contains certain values for the given attribute | $(” [href* =’ TXT ‘]”) selects the href element containing TXT | |
| [s1] [s2] [sN] | Selects elements that meet multiple criteria for compound attributes | $(“li[id][title= news]”) select the <li> element with id and title attributes as news |
Filter selector
| Syntax constitute | describe | The sample |
|---|---|---|
| :first | Pick the first element | $(” li:first”) select all – The first element in the element – element |
| :last | Pick the last element | $(” li:last”) select all – The last of the elements – element |
| :even | Select all elements whose index is even (index starts at 0) | $(” li:even”) selects all indexes with an even number – element |
| :odd | Select all elements whose index is odd (index starts at 0) | $(” li:odd”) selects all whose indexes are odd – element |
| :eq(index) | Select the element whose index is equal to index (index starts at 0) | $(“li:eq(1)”) select index = 1 – element |
| :gt(index) | Select the element whose index is greater than index (index starts at 0) | $(” li:gt(1)”) select an index greater than 1 – Element (note: greater than 1, excluding 1) |
| :lt(index) | Select an element whose index is less than index (index starts at 0) | $(” li:lt(1) “) selects an index less than 1 – Element (note: less than 1, excluding 1) |
The event
Mouse events
Mouse events are generated when the user moves or clicks the mouse on the document. Common mouse events include:
| methods | describe | Execution time |
|---|---|---|
| click( ) | The click event that fires or binds a function to the specified element | When you click the mouse |
| mouseover( ) | The Mouse over event that fires or binds a function to the specified element | Mouse over |
| mouseout( ) | The Mouse out event that fires or binds a function to the specified element | Mouse out |
Keyboard events
Each time a user presses or releases a key on the keyboard, an event will be generated. Commonly used keyboard events include:
| methods | describe | Execution time |
|---|---|---|
| keydown( ) | The keyDown event that fires or binds a function to the specified element | When you press the keyboard |
| keyup( ) | The keyUP event that fires or binds a function to the specified element | Release button |
Form events
The focus event is triggered when the element gains focus, and the blur event is triggered when the element loses focus, as shown in the following table:
| methods | describe | Execution time |
|---|---|---|
| focus( ) | The Focus event that fires or binds a function to the specified element | Get focus |
| blur( ) | The blur event that fires or binds a function to the specified element | Lose focus |
Mouse hover compound event
- The hover() method is equivalent to a combination of mouseover and mouseout events
Click the compound event continuously
- Toggle () in addition can simulate the mouse click event
Dynamic binding of events
Another way to write a DOM element binding event
- Bind an event
$(".del").on('click'.function() {
alert('hello');
})
Copy the code- Bind multiple events
$(".del").on('click mouseover'.function() {
alert('hello');
})
Copy the codeHide and display elements
Change the width and height of elements (to drive the effect)
- Show (speed) : displays information
- Hide (speed) : hides information
- Toggle (speed) is equivalent to show+hide: show to hide
The optional speed parameter specifies the speed at which to hide/display, which can be “slow”, “fast”, or milliseconds
Change the height of the element (stretch effect)
- SlideDown (speed) : displays information
- SlideUp (speed) : hide
- SlideToggle (speed) is the same thing as slideDown+slideUp
The optional speed parameter specifies the speed at which to hide/display, which can be “slow”, “fast”, or milliseconds
Do not change the size of the element (fade-in effect)
- FadeIn (speed) is displayed
- FadeOut (speed) hidden
- FadeToggle (speed) is equivalent to fadeIn+fadeOut animation
- The fadeTo(speed, Transparency) method allows gradients to a given opacity (value between 0 and 1)
The optional speed parameter specifies the speed at which to hide/display, which can be “slow”, “fast”, or milliseconds
chain
Chain allows you to run multiple jQuery methods on the same element in a single statement. You can link actions/methods together. For example, click a button once to make the div perform four specified actions
- Background variable powder
- The font turn green
- shrinkage
- The tensile
DOM and CSS manipulation
Attribute function
- Attr (” attribute “); Gets the attribute value of the element
- Attr (” attribute “, “new value”); Modifies the attribute value of an element
- Attr (style parameters) : Style parameters can be written in JSON format
- val() ; Get the value in the form element
- Val (“x”) modifies the value in the form element
- html(); Get the content of the element (tag + text)
- HTML (“x”) Modifies the content in the element (tag + text)
- text(); Gets the text in the element
- Text (“x”) Modifies the text in the element
Style function
- CSS (” Properties “); Gets the value of the property
- CSS (” Properties “,” values “); Sets the value of the property
- css( { json} ); Sets the value of multiple properties
- width(); Gets the width of the element
- width( number ); Modify the width of the element
- height(); Gets the height of the element
- height( number ); Modify the height of the element
Class style function
- addClass(); Add a class style to the element
- removeClass(); Removes the element’s class style
- toggleClass(); Style switch (Yes -> None, None -> Yes)
Node operation
- Create a node
- The factory function $() is used to get or create nodes
- Insert the node
- Insert child node
| grammar | function |
|---|---|
| append(content) | $(A), append (B) said it will B appended to A, such as: $(” ul “). Append ($newNode1); |
| appendTo(content) | $(A).appendto (B) adds A to B, as in $newNode1.appendTo(“ul”); |
| prepend(content) | $(A).prepend (B); $(“ul”).prepend ($newNode1); |
| prependTo(content) | $(A).prependto (B); $newnode1.prependto (“ul”); |
- Insert peer nodes
| grammar | function |
|---|---|
| after(content) | $(A). After (B) said it will B inserted into A later, such as: $(” ul “.) after ($newNode1); |
| insertAfter(content) | $(A).insertafter (B) insertA after B, e.g. $newnode1. insertAfter(“ul”); |
| before(content) | $(A).before(B) insert B before A, e.g. $(“ul”).before($newNode1); |
| insertBefore(content) | $(A).insertbefore (B) insert A before B, for example, $newnode1. insertBefore(“ul”); |
- Replace the node
- replaceWith()
- replaceAll()
- Copy the node
- clone()
- Remove nodes
- Remove () Deletes the entire node
- Empty () empties the contents of the node
Traverse the nodes
The ancestor element
A method for walking up the DOM tree
- Parent () returns the immediate parent of the selected element, just one step above (find the father)
- Parents () returns all the ancestors of the selected element, working up to the root element of the document, optionally in generations
siblings
- Next () gets the element immediately after the matched element
- Prev () gets the element immediately before the matched element
- Siblings ([selector]) gets all the siblings before and after the matching element
Descendant elements
Descendants are children, grandchildren, great-grandchildren and so on
- The children([selector]) method returns all direct children of the selected element, “children”
- The find method returns the descendant of the selected element, all the way down to the last descendant.
Element filtering
- First () : Filters the first element
- Last () : Filters the last element
- Eq (index) : Filters to elements with subscript index
- Not () : Elements other than what
- Is () : Returns a Boolean to determine if it is this element