This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Javascript kit library – jquery(top)🚗

Jquery, jQ for short, is a javascript library that simplifies some javascript operations

The installation

Installation in two steps

1. Download jquery Download jquery Portal
2. The introduction of

<script src="jquery.js"></script>
Copy the code

PS: Import with CDN (BOOTCDN)

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
Copy the code

grammar

$(selector).action()
Copy the code

• Selector is a selector
• An action is a method that executes on the element selected by the selector and we often perform an operation on the document before we operate on the JQ

$(document).ready(function(){
// This is to prevent the document from running jQuery code before it is fully loaded
});
Copy the code

You can also add events to directly selected elements

 $("").click(function(){});Copy the code

Making DOM manipulation easier

Remember how to manipulate the DOM in javascript?

// Get the DOM node
var dom = document.get()
// Execute method
dom.action();
Copy the code

In jq?

 $("").action()
Copy the code

Jq provides methods for elements

Jq not only makes it easier to manipulate the Dom, but also provides some additional methods

1. Get/Set

• Text () sets or returns the text content of the selected element
• HTML () sets or returns the HTML of the selected element
• Val () sets or returns the fields of the form
• Attr () sets or returns the attribute value of the element

<p class="title"></p>
Copy the code

    $(".title").text("EDGnb!") / / set
    $(".title").text() //EDGnb!
    $(".title").html()  //<p class="title"></p>
Copy the code

1. delete

• Remove () removes the selected element and its children
• Empty () removes the children of the selected element

    $(".title").remove()
    $(".title").text() / / an error
Copy the code

1. Operating CSS

• AddClass () adds one or more classes to the selected element
• RemoveClass () removes one or more classes from the selected element
• ToggleClass () toggleClass() adds/removes classes from the selected element
• CSS () sets or returns style properties

$(".title").css('color'.'red') // Set the paragraph font color to red
Copy the code

1. Wide high adjustment

• Width () sets or returns the width of the specified element
• Height () sets or returns the height of the specified element

(The above two return values do not include margins, borders, and margins)

• InnerWidth () sets or returns the width of the specified element, including the inner and outer margins and borders
• InnerHeight () sets or returns the height of the specified element, including the inner and outer margins and borders