Table of contents
1. Getting to know JQuery for the first time
3. JQuery events and special effects
jQuery event binding and unbinding
5.2 jQuery descendant traversal
1. Getting to know JQuery for the first time
1.1 Introduction to JQuery
jQuery is a fast, concise JavaScript framework, which is an open source project created by John Resig in 2006. It encapsulates the functional codes commonly used in JavaScript, provides a simple JavaScript design pattern, and optimizes HTML document operations, event processing, animation design and Ajax interaction. Its design purpose is "write Less, Do More", which advocates writing less code and doing more things
If you want to learn more about jQuery, you can visit the following links:
import method
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>Common formula
公式：$(selector).action()1.2 Quick Start
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a href="#" id="test">点我</a>
<script>
$('#test').click(function (){
alert('hello,jquery');
})
</script>
</body>
</html>Selector
In addition to all CSS selectors support
event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#divMouse{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
mouse: <span id="mouseMove"></span>
<div id="divMouse">
在这里点击鼠标试试
</div>
<script>
$(function (){
$('#divMouse').mousemove(function (e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
})
});
</script>
</body>
</html>DOM
1.3 Function overview
- The jQuery library contains the following functions
- HTML/DOM manipulation
- CSS manipulation
- HTML event functions
- JavaScript effects and animations
- AJAX
- Utilities
2. Introduction to JQuery
2.1 Document ready functions
In order to avoid potential errors caused by running jQuery code before the document is loaded, all jQuery functions need to be written in a document ready (document ready) function. For example, the current HTML page has not been loaded yet, so a certain HTML element tag may not be queried yet
2.2 Name Conflicts
jQuery usually uses the dollar sign $ as a shorthand, but in an HTML document that uses multiple JavaScript function libraries at the same time, jQuery may conflict with other functions that also use the $ sign (such as Prototype), so jQuery uses the noConfict() method to customize Other names to replace the possibly conflicting $ symbol expressions. .
2.3 JQuery Selector
- Basic Selector
- Attribute Selector
- Form Selector
- Hierarchy Selector
- jQuery CSS Selectors
base selector
Advanced
attribute selector
Advanced
form selector
code example
level selector
CSS selector
2.4 JQuery filter
- Basic Filter
- Child Filter
- Content Filter
- Visibility Filter
Basic Filter
:first 和:last
:first and :last are methods used to select the first or last element in a set of elements
:even and :odd
:even and :odd are JQuery filters used to select even or odd indexed elements in a set of elements.
:eq(), :gt() and :It()
:eq(), :gt() and :lt() are JQuery filters used to select elements at a specific index or index range in a set of elements.
：not()
:header
child element filter
:first-child
The :first-child filter is used to filter the first child element in each parent element on the page.
:last-child
The :last-child filter is used to filter the last child element in each parent element on the page
:nth-child
:nth-child() filter is used to filter the nth child element in each parent element on the page, and the serial number starts from 1.
:only-child
The :only-child filter is used to filter all child elements that have one and only one in the parent element.
content filter
:contains( )
:contains() filter is used to filter out all elements containing the specified text contentThe filter text of the :contains() filter is case sensitive
:empty
The :empty filter is used to select elements that do not contain child nodes (child elements and text)
:parent
The :parent filter is used to select elements that contain child nodes (child elements and text), and its syntax structure is as follows:
:has The
:has() filter is used to select elements that contain the specified selector
visibility filter
:hidden
The :hidden filter is used to filter out all hidden elements
:visible
:visible filter is used to filter out all visible elements
3. JQuery events and special effects
3.1 JQuery event
- Document/Window Events
- keyboard events
- mouse event
- form event
Document/Window Events
keyboard events
mouse event
form event
The selector of this event can only be a form element at the beginning, and it is currently applicable to any HTML element. The element can lose focus by clicking a position other than the element with the mouse, or pressing the Tab key on the keyboard.
jQuery event binding and unbinding
In jQuery, the event listener of HTML elements can be bound or unbound through specific methods. This chapter will introduce how to bind events, release events and append temporary events for specified HTML elements
- jQuery event binding
- jQuery event dismiss
- jQuery Temporary Events
The event monitoring of HTML elements can also be bound or unbound by specific methods. In versions after jQuery1.7, it is recommended to use the on() and off() methods to replace all previous event binding and unbinding methods.
When an element needs to listen to multiple events, you can use the on() method to register the elements that are added dynamically later (does not exist when the page is initialized), and its event listeners must be registered with on
3.2 special effects
- jQuery hide and show
- jQuery fade in and fade out
- jquery-swipe
- jQuery animation
- jQuery method chaining
- jQuery stop animation
jQuery hide and show
jQuery can control the hiding and display of elements, including the duration of custom changing effects. The hide() method is used to hide the specified element, and the show() method is used to display the specified element.
The jQuery toggle() method is used to toggle the hiding and display of elements. This method can be used alone instead of the hide() and show() methods
to display hidden elements or hide elements that are being displayed
jQuery fade in and fade out
jquery-swipe
- jQuery slideDown()
- jQuery slideUp()
- jQuery slideToggle()
jQuery animation
- Change the basic properties of an element
- change element position
- animation queue
- stop animation
change element position
3.3 jQuery method link
jQuery allows multiple jQuery commands to be run continuously on the same element. This technique is called jQuery method chaining (Chaining). For the same element, if there are multiple actions that need to be executed in sequence, you only need to append the new action to the previous action. , forming a method chain, without the need to repeat the search to select the same element each time.
4. JQuery DOM
- jQuery get and set
- jQuery add
- jQuery remove
- jQuery class attribute
- jQuery-size
jQuery get and set
text()
Html()
attr()
CSS()
prop()
jQuery add
append()和preappend()
after()和before（）
jQuery remove
- jQuery remove()
- jQuery empty()
- jQuery removeAttr()
jQuery remove()
jQuery empty()
jQuery removeAttr()
jQuery class properties
addclass（）
removeClass（）
slightly
toggleclass（）
jQuery-size
Five, JQuery traversal
5.1 HTNL family tree
All elements on the same HTML page can form a tree structure according to the hierarchical relationship, which is called a family tree (Family Tree).
The most common traversal methods are collectively called tree traversal (Tree Traversal)
5.2 jQuery descendant traversal
Commonly used methods are:
- children(): Find the direct child elements of the element
- find(): Find all descendants of an element until the last layer of elements is found.
children():
find():
5.3 jQuery sibling traversal
jQuery sibling traversal refers to starting from the specified element, traversing sibling elements that have the same parent element as the element, until all are found.
5.4 jQuery ancestor traversal
jQuery ancestor traversal refers to the specified element as the starting point, traversing the element's parent, grandfather, great-grandfather elements, etc., until all are found.
