jQuery learning records – jQuery syntax, selectors, events and hide (), show (), toggle ()

Introduction to jQuery

jQuery is a JavaScript library. jQuery greatly simplifies JavaScript programming.

The jQuery library includes the following functions:

HTML element selection
HTML element manipulation
CSS manipulation
HTML event functions
JavaScript effects and animations
HTML DOM traversal and modification
AJAX
Utilities

To use jQuery, you can download the jQuery library from the official website, or use the online CDN.

Baidu's online CDN:html<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>

jQuery syntax

The jQuery syntax works by selecting HTML elements and performing certain operations on the selected elements.

Basic syntax: $(selector).action() $(selector).(behavior|method)

jQuery selector

jQuery selectors are used to operate on single or multiple HTML elements.

jQuery selectors "find" (or select) HTML elements based on their id, class, type, attributes, attribute values, etc. It is based on the existing css selectors, in addition, it has some custom selectors.

All selectors in jQuery begin with a dollar sign: $().

1. Element selector

Element selectors select elements by element name.

<p>aaaa</p>

 console.log($("p").text());// 打印输出aaaa

2. #id selector

The #id selector selects the specified element through the id attribute of the HTML element ( the id attribute must be unique ).

<div>
    <p id="p1">
        p1 p1 p1
    </p>
     <p id="p2">
        p2 p2 p2
    </p>
</div>

console.log($("#p1").text()); // p1 p1 p1 
console.log($("#p2").text()); // p2 p2 p2

3. .class selector

The .class selector finds elements by the corresponding class attribute value

<div class="demo1">
    hello
</div>

console.log($(".demo1").text());//hello

4. Selector collection

grammar	describe
$(“*”)	select all elements
$(this)	Select the current HTML element
$("p.intro")	Select the class as intro element
$(“p:first”)	pick the first element
$(“ul li:first”)	pick the first element's first element
$(“ul li:first-child”)	select each element's first element
$(“[href]”)	Select elements with href attribute
$(“a[target=‘_blank’]”)	Selects all elements whose target attribute value is equal to "_blank"
$(“a[target!=‘_blank’]”)	Selects all elements whose target attribute value is not equal to "_blank"
$(“:button”)	Select all elements and elements with type="button"
$(“tr:even”)	Choose an even numbered
$(“tr:odd”)	select odd-numbered

element element

jQuery event

Common dom events:

mouse event	keyboard events	form event	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

Syntax for jQuery events:

$("选择器").事件名();

tip: $(document).ready() 方法在文档完全加载完后执行函数。

Example: click() and dbclick()

click is the mouse click event, dbclick is the mouse double click event

<p id="pd1">点我试试1？</p>
<p id="pd2">点我试试2？</p>

$("#pd1").click(function () {
    
    
    alert("单击");
});
$("#pd2").dblclick(function () {
    
    
    alert("双击");
});

insert image description here

Example:...

The invocation of jQuery events is similar to the previous JavaScript native invocation, except that it is easier to select elements, and the rest of the events will not be demonstrated one by one. You only need to know which events are applied when, and then check the documents when you need them. .

jQuery show and hide elements

jQuery provides hide() and show() methods to hide and show HTML elements.

hide() and show() syntax:

$(*selector*).hide(*speed,callback*);

$(*selector*).show(*speed,callback*);

The optional speed parameter specifies the hide/show speed and can take the following values: "slow", "fast" or milliseconds.

The optional callback parameter is the name of a function to be executed on completion of hiding or showing.

Example: simple show() and hide() usage

<p>今天天气真好</p>
<p id="p-time">2023/5/18</p>
<button id="btn1">
    隐藏时间
</button>
<button id="btn2">
    显示时间
</button>

$("#btn1").click(function(){
    
    
    $("#p-time").hide();
});
$("#btn2").click(function(){
    
    
    $("#p-time").show();
});

From the above example, it can be found that it is not convenient to switch the element state only by show() and hide(), so jQuery also provides a method toggle() to switch hide() and show() .

toggleSyntax:

$(*selector*).toggle(*speed,callback*);