What is jQuery?
JQuery is a fast, concise JavaScript framework and a great JavaScript code library (or JavaScript framework) after Prototype.
JQuery is designed to “write Less, Do More”, which is to write Less code and Do More things. It encapsulates common JavaScript functionality and provides a simple JavaScript design pattern that optimizes HTML document manipulation, event handling, animation design, and Ajax interaction.
The core features of jQuery can be summarized as follows: unique chained syntax and short and clear multi-functional interface; It has efficient and flexible CSS selectors and can be extended to CSS selectors. Have convenient plug-in extension mechanism and rich plug-in. JQuery is compatible with Internet Explorer 6.0+, FF 1.5+, Safari 2.0+ and Opera 9.0+
JQuery is an excellent JavaScript framework that makes it easy for users to process HTML Documents, events, animate effects, and provide Ajax interactions for websites.
This video provides a step-by-step tutorial on jQuery’s various selectors, functions, and method calls, combined with a number of examples.
Watch online: www.bilibili.com/video/BV1Jg.
Data download: www.bjpowernode.com/javavideo/1…
The opening based
JQuery is a cross-browser JavaScript library that encapsulates javascript-related method calls to simplify JavaScript manipulation of the HTML DOM
Official website: jquery.com/
JQuery:
Translation:
JQuery is a fast, compact, feature-rich JavaScript library. It runs in a large number of browsers with an easy-to-use API that makes HTML document traversal and manipulation, event handling, animation, and Ajax much easier. Through its combination of versatility and extensibility, jQuery has changed the way millions of people write JavaScript.
Why jQuery?
This is important because it is compatible with the major browsers on the market, IE and FireFox. Google Handles AJAX differently and jQuery has a way of creating Asynchronous Objects in different browsers.
Other advantages:
- Writeless code, do more
- Free, open source and lightweight JS library, small capacity
- Compatible with mainstream browsers in the market, such as IE, Firefox, Chrome
- It can handle HTML/JSP/XML, CSS, DOM, events, animations, and asynchronous AJAX functionality
- The documentation manual is full and detailed
- Mature plug-ins to choose from, a variety of JS components, such as the calendar component (click the button to display the date)
- A message is displayed after an error occurs
- You don’t have to go through HTML anymore
For example, there are three common ways to use JavaScript to locate DOM objects:
- With the ID attribute: getElementById()
- With the class attribute: getElementsByClassName()
- By tag name: getElementsByTagName()
The above code can be seen that the JavaScript method name is too long, the combination of case and case too much, code efficiency, prone to error. JQuery encapsulates the above JS methods with (” #id “), (“.class name “), and $(” tag name “), respectively.
DOM object
Document Object Model (DOM) is a standard programming interface recommended by W3C to deal with extensible markup language. Through DOM parsing HTML pages, page elements can be parsed into element nodes, attribute nodes and text nodes. These parsed node objects are DOM objects. DOM objects can use methods in JavaScript.
To obtain the jQuery
Download from jquery.com/download/
2. Xx does not support Internet Explorer 6/7/8 in different jQuery versions. At this stage ie6/7/8 has been eliminated, non-mainstream. You don’t have to worry about compatibility.
For each version of jQuery, the library is divided into two. One is uncompressed version, can view the source code, development use; One is the compressed version, annotations, Spaces are deleted, the number of variable characters reduced, the product online use.
The wheel test
There are many tools for writing jQuery, and any tool that can write HTML supports jQuery. Examples are Notepad, EditPlus, webStorm, Visual Studio Code, HBuilder, HBuilderX, IDEA.
Learning jQuery library alone, you can use lightweight development tools such as EditPlus,HBuilder,HbuilderX to write projects and you can use integrated development tools such as IDEA, Eclipse,MyEclipse,WebStorm, etc
The first example completes: after the browser fully loads the HTML page DOM, it displays a message box to implement the steps:
1, Use HBuilder or HbuilderX to create a project (name: jquery-course) and select a file directory for the project.
Create another directory in the project
Right-click the project name – New – directory, commonly known as js
3. Copy the downloaded JS file to the directory
4. To use jQuery, first introduce the jQuery library. Use the following statement:
< script type = "text/javascript" SRC = "js/jquery - 3.4.1 track. Js" > < / script >
$(document), convert DOM object document to jQuery object.
The $(document).ready() function is executed as soon as the DOM object is loaded.
(document).ready() is the same as (document).ready() is the same as (document).ready() is the same as (document).ready() is the same as (document).ready() is the same as (), jQuery(), window.jquery ()
(document).ready().ready().ready(function() {alert(” Hello jQuery “)});
6. Complete code
DOM object and jQuery object
DOM objects are objects created using JavaScript syntax and are also known as JS objects.
1. DOM object conversion jQuery object:
With (DOM Object), you can convert a DOM object into a jQuery object, and then you can manipulate a DOM object using methods provided in jQuery. In general, in order to distinguish jQuery objects from DOM objects, it is customary to convert A DOM object into a jQuery object in the form of (DOM object). Only when the DOM object is converted into a jQuery object, you can use the methods provided by jQuery to manipulate DOM objects. In general, in order to distinguish jQuery objects from DOM objects, it is customary to convert A DOM object into a jQuery object in the form of (DOM object). Only when the DOM object is converted into a jQuery object, you can use the methods provided by jQuery to manipulate DOM objects. In general, it is customary, but not necessary, to name jQuery objects in order to distinguish them from DOM objects.
Ex. :
Create an HTML page file, domtojquery.html
1. Add button button to the page
2. Convert DOM objects
2. The jQuery object is converted into a DOM object
The jQuery object itself is an array object, and the 0th element in the array is the DOM object corresponding to the jQuery object. So there are two ways to get DOM objects: get(0) and subscript [0] Example: create an HTML file jqueryTodom.html 1. Page add text, button
2. JQuery object: Get (0) or jQuery object [0] can convert jQuery object into DOM object
The selector
Selector: is the positioning condition; Tells the jquery function to locate the DOM object that meets the criteria
Basic selector
Locate HTML elements by ID, class attribute, tag type name, and convert them into jQuery objects.
1. Id selector
Grammar: $(" # id ")
2. Class selector
Syntax: $(".class name ")
3. Label selector
Syntax: $(" tag name ")
Example: Create new select.html
1. Add CSS to the head section of the page
2. Add a jQuery reference
3. The body section defines the div
4. Create js functions
4. All selectors
Syntax: $(" * ") selects all DOM objects on the page.
5. Combinatorial selector
Combinatorial selectors are comma-separated selectors that combine ids, classes, tag names, and so on.
Syntax: $(" #id,.class, tag name ")
Example: 1. Add a button to the HTML page above
2. Add JS functions
Form selector
Form-related element selectors refer to the selection methods of elements such as text boxes, checkboxes, checkboxes, and drop-down lists. This method does not matter if a form exists
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">
Copy the code$(“:tr”): unusable, tr is not an input tag
Syntax: $(":type attribute value ")
Such as:
- $(“:text”) selects all single-line text boxes
- $(“:password”) selects all the password boxes
- $(“:radio”) selects all of the checkboxes
- $(“:checkbox”) selects all of the checkboxes
Example: Create form.html
Page definition elements:
Define js functions:
The filter
DOM objects stored in the jQuery object are in order in relation to the position of the page tag declaration
<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3
$("div") == [dom1,dom2,dom3]
Copy the codeA filter is a filter condition that filters the DOM objects already located in an array. The filter condition cannot appear independently in the jquery function, if used, it can only appear behind the selector.
Basic filter
1. Select first to preserve the first DOM object in the array
Syntax: $(" selector :first ")
2. Select last to preserve the last DOM object in the array
Syntax: $(" selector :last")
3. Select the specified object in the array
Syntax: $(" selector :eq(array index) ")
4. Select all DOM objects in the array that are smaller than the specified index
Syntax: $(" selector :lt(Array index) ")
5. Select all DOM objects in the array greater than the specified index
Syntax: $(" selector :gt(Array index) ")
Examples of operation
1. Define styles
2. Add div to the page
3. Define js functions
Form object property filter
1. Select an available text box
$(" : the text: enabled ")
2. Select an unavailable text box
$(" : the text: disabled ")
3. Check the selected elements
$(" : the checkbox: checked ")
4. Select the selected element in the specified drop-down list
The selector > option: selected
Ex. :
Create filterForm. HTML
Page:
Js function
