Summary of basic knowledge points of jQuery
1. Introduction to jQuery
1. What is jQuery?
jQuery, as the name suggests, is JavaScript and query (Query), which is a js class library that assists JavaScript development.
jQuery is a cross-browser JavaScript library that encapsulates JavaScript-related method calls and simplifies JavaScript's
operations on HTML DOM.
jQuery is a fast, small, feature-rich JavaScript library. It runs in a wide range of browsers with an easy-to-use API
that makes HTML document traversal and manipulation, event handling, animation, and Ajax easier. Through its combination of versatility and extensibility,
jQuery has changed the way millions of people write JavaScript.
2. Why use jQuery?
Other advantages:
(1) Write less code, do more things [write less do more]
(2) Free, open source and lightweight js library with small capacity
(3) Compatible with mainstream browsers on the market Browsers, such as IE, Firefox, Chrome
(4) can handle HTML/JSP/XML, CSS, DOM, events, and achieve animation effects, and can also provide asynchronous AJAX functions
(5) The documentation manual is very complete and detailed
(6) Mature Plug-ins are available, a variety of js components, such as the calendar component (click the button to display the date)
(7) After an error, there will be a certain prompt message
(8) No need to insert a lot of js through the <script> tag in the html to called the command
3. The core idea of jQuery! ! !
Its core idea is write less, do more (write less, do more), and it realizes many browser compatibility issues.
4. jQuery popularity
jQuery has now become the most popular JavaScript library, and more than 55% of the top 10,000 most visited websites in the world are using jQuery.
2. Frequently asked questions?
1. Do I have to import the jQuery library to use jQuery? Answer: Yes, it must be
<script type = "text/javaScript" src="path/js/JQuery-1.7.2.js"></script>
2. What is $ in jQuery? Answer: It is a function (core function)
3. How to add a mouse click response function to the button? (In js: DOM object.onclick = function(){})
Answer:
Step 1: Use jQuery to query the label object
Step 2: Use jQuery type label object.click( function(){} );
3. The core function of jQuery
$ is the core function of jQuery, which can complete many functions of jQuery. "$()" is to call the $ function
1. When the incoming parameter is [function]:
it means after the page is loaded.
$(function(){}); equivalent to window.onload = function(){}
2. When the input parameter is [HTML string]:
the html tag object will be created for us
3. When the input parameter is [selector string]:
$("#id attribute value"); id selector, query the tag object according to the id value
$("tag name"); tag name selector, according to the specified Tag name query tag object
$(".class attribute value"); type selector, you can query tag object according to class attribute value
4. When the input parameter is [DOM object]:
the dom object will be converted into a jQuery object
4. Difference between jQuery object and dom object
1. What is a jQuery object and what is a dom
object ? 3. The tag object queried by getElementsByTagName() is a Dom object 4. The object created by the createElement() method is also a Dom object
The effect of the DOM object Alert is: [object HTML tag name Element]
jQuery object
5. The object created through the API provided by JQuery is a JQuery object
6. The Dom object wrapped by JQuery is also a JQuery object
7. The API provided by JQuery The queried object is the JQuery object
jQuery object Alert. The effect is: [object Object]
2. Question: What is the nature of the jQuery object?
The jQuery object is an array of dom objects + a series of functional functions provided by jQuery.
3. The difference between jQuery object and Dom object.
The jQuery object cannot use the properties and functions of the DOM object.
The DOM object cannot use the properties and functions of the jQuery object.
4. Interchange between Dom object and jQuery object
Dom object is converted into jQuery object (*key point)
1. First there is DOM object
2. $(DOM object) can be converted into jQuery object
The jQuery object is converted into a dom object (*key point)
1. There is a jQuery object first
. 2. The jQuery object [subscript] is the corresponding DOM object
* 1. Convert DOM object to jQuery object:
Use the $(DOM object) method to convert DOM object to jQuery object. Only after converting to jQuery object can you
use the methods provided by jQuery to manipulate DOM objects. In general, when naming jQuery objects, in order to
distinguish them from DOM objects, it is customary to start with $, which is not necessary.
* 2. Convert the jQuery object to a DOM object.
The jQuery object itself is an array, and the elements in the array are the DOM
objects corresponding to the jQuery object. So there are two ways to get the DOM object: get(0) and array[0]
5. Get the jQuery
official website download address: https://jquery.com/download/
For each jQuery with the same version number, its library is divided into two. One is the uncompressed version, you can view the source code, and use it during development;
the other is the compressed version, which deletes comments and spaces, reduces the number of variable characters, and uses it when the product goes online.
There are many tools for writing jQuery, and the tools that can write HTML all support jQuery. For example, Notepad, EditPlus, webStorm,
Visual Studio Code, HBuilder, HBuilderX, IDEA.
Learn the jQuery library separately, and you can use lightweight development tools, such as EditPlus, HBuilder , HBuilderX.
You can use integrated development tools for writing projects, such as IDEA, Eclipse, MyEclipse, WebStorm, etc.
6. jQuery selector (***** key)
The selector is a string used to locate the dom object. After positioning, you can use the function of jQuery to operate the dom
1. Basic selector (**** key)
# ID selector: Syntax: $("#id value") Find label objects based on id value The id value is unique in the current page and will not be repeated. Class selector: Syntax: $(".class value") According to
class Style value lookup tag object class represents the style in css, this is to use the name of the style to locate the dom object
element selector: Syntax: $("tag name") Find the tag object
* selector based on the tag name: Syntax: $("* ") Find all element object
combination selectors: Syntax: $("#id,.class,tag name") is a selector formed by separating multiple selected objects with commas, and can combine id, class, and tags Name, etc.,
merge the selection results of each selector and return (or relationship)
2. Form selector: (***** key point)
use the type attribute value of the <input/> tag to locate the dom object
Note: The use of form selectors has nothing to do with the presence or absence of <form></form> tags
$(":tr"): cannot be used because tr is not an input tag and has no type attribute
Syntax: $(":type attribute value")
:input matches all input, textarea, select and button elements (the scope is too large and rarely used)
:text matches all single-line text input boxes
: password matches all password input boxes
: radio Match all radio buttons
: checkbox Match all check boxes
: submit Match all submit buttons
: image Match all img tags
: reset Match all reset buttons
: button Match all input type=button or <button> button</button>
:file matches all input type=file file upload
:hidden matches all invisible elements display:none or input type=hidden
3. Hierarchical selector (**** key point)
ancestor descendant descendant selector: Match all descendant elements (all descendants) under a given ancestor element
Example: $("body" "div"); means to query the body tag All div objects under
parent > child Child element selector: Match all child elements under a given parent element (only find sons) Example
: $("body" > "div"); means to query the div under the body tag Child objects (only sons here, excluding grandchildren and below)
prev + next Adjacent element selector: Match all next elements (siblings) immediately after the prev element (siblings)
prev ~ Sibings After the sibling element selector: Match the prev element All following siblings elements (siblings)
7. Filter:
After the dom object is located, the filter is to filter the located dom object according to some conditions. The filter is also a string. The filter cannot be used alone. It must be used together with the selector and placed in
the after the selector.
1. Basic filter:
:first Get the first element
: last Get the last element
: not(selector) Remove all elements that match the given selector (excluding selector)
:even Match all elements with even index values , counting from 0
: odd matches all elements with an odd index value, counting from 0
: eq(index) matches an element with a given index value
: gt(index) matches all elements greater than a given index value
: lt( index) matches all elements less than the given index value
: header matches header elements such as h1, h2, h3
: animated matches all elements that are performing animation effects
2. Content filter:
:contains(text) matches elements containing the given text text (including text)
:empty matches all empty elements (empty) that do not contain child elements or text
:parent matches elements that contain child elements or text ( non-empty)
:has(selector) matches elements that contain elements matched by the selector (contains selector)
3. Attribute filter:
[attribute] matches elements that contain the given attribute.
[attribute=value] Matches elements whose given attribute is a specific value
[attribute!=value] Matches all elements that do not contain the specified attribute, or whose attributes are not equal to a specific value.
[attribute^=value] matches elements where the given attribute starts with some value
[attribute$=value] matches elements where the given attribute ends with some value
[attribute*=value] matches the given attribute is Element [attrSel1][attrSel2][attrSelN] containing certain values
is a composite attribute selector, which is used when multiple conditions need to be met at the same time. (and relationship)
4. Form object attribute filter:
:enabled matches all available elements
: disabled matches all unavailable elements
: checked matches all selected radio and multi-select, excluding options selected in the drop-down list label object
: selected matches all selected options
8. jQuery element screening
. eq() The function of obtaining the element with a given index is the same as :eq()
. first() The function of obtaining the first element is the same as :first
. Last() The function of obtaining the last element is the same as :last
. filter(exp) leaves matching elements
. is(exp) judges whether it matches the given selector, and returns as long as there is a match, true
.has(exp) returns the element that contains the element that matches the selector The function follows: has The same as
.not(exp) Delete the element matching the selector The function is the same as:not.children
(exp) Return the child element matching the given selector The function is the same as parent>child (only find the child)
.find(exp) Return the matching to The function of the descendant element of the given selector is the same as ancestor descendant (all descendants)
. .next() Returns the next sibling element of the current element. The function is the same as prev + next (the next brother).
.nextAll() Returns all siblings behind the current element The function of the element is the same as that of prev ~ siblings (all subsequent brothers)
. .nextUntil() Returns the following elements from the current element to the specified matching element
.parent() returns the parent element.prev
(exp) returns the previous sibling element (previous sibling) of the current element
.prevAll() returns all sibling elements in front of the current element (all previous siblings)
.prevUnit(exp) returns the current element The previous element up to the specified matching element.siblings
(exp) Returns all sibling elements (all siblings include the front and back)
.add() Adds the element of the selector that matches add to the current jquery object
Eight, jQuery attribute operation
.html() It can set and get the content in the opening and closing tags. Same as dom attribute innerHTML.
.text() It can set and get the text in the opening and closing tags. Same as dom attribute innerText.
.val() It can set and get the value attribute value of the form item. Same as dom attribute value.
So-and-so.val();//Get the value attribute value of so-and-so. (read the value of the first dom object in the array)
so-and-so.val("abc");//set the value attribute of so-and-so to "abc". )
$("selector").text(): Read the text display content of all dom objects in the array, splice the obtained content into a string and return
$("selector").text(value): in the array The text display content of all dom objects is uniformly assigned.
Operate on attributes other than val and text
. attr() can set and get the value of the attribute. It is not recommended to operate checked, readOnly, selected, disabled, etc.
The attr() method can also operate non-standard attributes. For example, custom properties: abc, bbj
.prop() can set and get the value of the property, only recommended to operate checked, readOnly, selected, disabled, etc.
$("selector").attr("username"); //Get the username attribute value of the first dom object in the dom array.
$("selector").attr("username","Zhang San") //Set the username attribute value of all dom objects in the array to "Zhang San".
Nine, DOM additions, deletions, and
internal insertions: (become a subclass)
appendTo() For example: a.appendTo(b) Insert a at the end of the sub-element b to become the last sub-element
prependTo() For example: a.prependTo(b ) Insert a in front of all sub-elements of b and become the first sub-element
External insertion: (sibling relationship at the same level)
insertAfter() For example: a.insertAfter(b) to get ba
insertBefore() For example: a.insertBefore(b) to get ab
Replace:
replaceWith() For example: a.replaceWith(b) Replace a with b to generate a b, remove all a
replaceAll() For example: a.replaceAll(b) Replace all b with a, one b becomes one a n b Change to n a
Delete:
remove() For example: a.remove(); Delete a label
empty() For example: a.empty(); Empty the content in the a label
Ten, CSS style operation.
addClass() Add style
removeClass() Delete style
toggleClass() Delete if there is any, add style if not.
offset() Gets and sets the coordinates of an element. (the distance between the upper left corner and the top and left line of the web page)
11.
Basic animation of jQuery animation
show() Show the hidden element The current visible state does not work
hide() Hides the visible element The current hidden state does not work
toggle() Hides when it is visible, and shows when it is not.
The above animation methods of state switching can add parameters.
1. The first parameter is the duration of the animation execution, in milliseconds.
2. The second parameter is the callback function of the animation (the function that is automatically called after the animation is completed)
fade in and fade out animation
fadeIn() fade in (slowly visible)
fadeOut( ) fade out (disappear slowly)
fadeTo() slowly modify the transparency to the specified value within the specified time period. 0 transparent invisible, 1 complete visible, 0.5 translucent
fadeToggle() fade in/out switch
12. The jQuery event operation
is a page element binding event, that is, for a specified page element, when an event occurs, the specified action is executed
1.$( function(){} ); and window.onload = function(){} ; the difference?
1). When are they triggered respectively?
* After the jQuery page is loaded, the browser's kernel will execute it immediately after parsing the tags of the page and creating the DOM object.
* After the native js page is loaded, in addition to waiting for the browser kernel to parse the label and create a DOM object, it also needs to wait for the content required to display the label to be loaded.
2). The order in which they fire?
* Executed first after the jQuery page is loaded.
* After the native js page is loaded, it will be executed in jQuery.
3). How many times did they execute?
* After the native js page is loaded, only the last assignment function will be executed.
* After the jQuery page is loaded, all the registered functions are executed sequentially.
2. Other event handling methods in jQuery:
click() It can bind the click event, and trigger the click event
mouseover() Mouse in event
mouseout() Mouse out event
bind() You can bind one or more elements at one time multiple events.
one() is used the same as bind. But the event bound by the one method will only respond once.
unbind() is the opposite operation to the bind method, and unbinds the event.
live() is also used to bind the event. It can be used to bind events for all elements matched by the selector. It is valid even if this element is dynamically created later
3. Event bubbling
1). What is event bubbling?
Event bubbling means that parent and child elements listen to the same event at the same time. When the event of the child element is triggered, the same event is also passed to the event of the parent element to respond.
2). So how to stop the event from bubbling?
In the sub-element event function body, return false; can prevent the event from bubbling.
4. javaScript event object
1). Event object: It is a javaScript object that encapsulates the triggered event information.
What we focus on is how to get the javaScript event object and how to use it.
2). How to get javascript event object?
When binding an event to an element, add a parameter to the function( event ) parameter list of the event. We are accustomed to name this parameter event.
This event is the event object passed by javascript to the event handler.
//1. Native javascript get event object
window.onload = function () { document.getElementById("areaDiv").onclick = function (event) { console.log(event); } }
//2. The jQuery code gets the event object
$(function () { $("#areaDiv").click(function (event) { console.log(event); }); });
//3. Use bind to bind the same function to multiple events at the same time. How to get what event the current operation is.
$("#areaDiv").bind("mouseover mouseout",function (event) { if (event.type == "mouseover") { console.log("mouseover"); } else if (event.type = = "mouseout") { console.log("Mouseout"); } });