1. Grammar
Before learning this jQuery, let’s take a look at the syntax
The most basic syntax is $(selector).action()
$ This is an identifier that defines a jQuery
selector is the node to be selected, for example, if I want to hide all p tags, then I need to write it like this: $("p").hide();
The last action() is the method of execution, like the hide() I just mentioned; this is the method of execution
Similar to my official website, some people may see this wording
$(function(){ // Start writing jQuery code... });
This is actually a shorthand, equivalent to
$(document).ready(function(){ // Start writing jQuery code... });
For our convenience, we don’t need the following, just use the above
Second, the selector
Before talking about this event, let’s talk about one other thing, which is the selector
In fact, we learned this selector when we were learning css. This jQuery also has a selector, which is very similar to this css selector.
1. Element selector
The element selector is to select all the DOM nodes of the same element to perform the same operation, the usage is: $("element name"), and then we can look at an example
We click this button, and then we see how the p tag in this html changes
As you can see, there is nothing left, let's check the current source code of the website
It’s OK, it’s hidden, we’re using the element selector here
2. id selector
The id selector selects the specified element through the id attribute of the HTML element, the usage is: $("#DomId"), and then let’s look at an example
It’s still the inner page just now, we give the middle p tag an id, and you can get the id value by yourself, and then we only let the middle p tag hide
Execute it,
As you can see, we hide the p tag which is the id of ppp through the id selector
3. Class selector
The class selector can find elements by the specified class, the usage is: $(".test")
Still the example just now, let's modify it again
Pay attention here, there is one more point in front of ccc! ! ! Be sure to watch it carefully, and then let's execute it to see the effect
As you can see, as long as the class is ccc, it is hidden
Three, events
We have actually released two events by learning the selector, one is click, this is when the mouse triggers the click event, and the other is hide, which triggers the hidden effect. Of course, there are more than two events, I list Let's take a look at a table
Forget it, let’s introduce this rookie. You can see that there are four events: mouse click, keyboard, form, and document window events.
These are commonly used by us, so we need to know and be familiar with, and show you some examples
https://www.runoob.com/jquery/jquery-events.html
Go in directly, you can see many examples at the bottom, I won’t write them one by one. Of course, these things will only be impressed after you have used them, so practice a few more times
If you have any questions, please contact me QQ: 2100363119, welcome everyone to visit my personal website: https://www.lemon1234.com