Home >Web Front-end >JS Tutorial >Simplify JavaScript development analysis with jQuery_jquery

Simplify JavaScript development analysis with jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 18:55:43942browse

jQuery is a new tool that I recently discovered. The jQuery development team describes jQuery as "a fast, concise JavaScript library that simplifies HTML document inspection, event handling, animation execution, and adds AJAX interaction to your Web pages."
jQuery preliminary
You can download the latest version of jQuery for free. It consists of a well-defined script file, so you can explore its source code at will. After downloading the JavaScript file, you can place it on your web server and prepare it for use. You can load the jQuery library into any web page using HTML SCRIPT elements. The src attribute should take advantage of the file's real path on the server.

Copy code The code is as follows:



After downloading the file, the following tasks will help you use jQuery.
Coding Basics
The following are some pointers used when coding with jQuery:
The jQuery code block is preceded by a dollar sign ($).
The dollar sign is followed by a left parenthesis.
Inside the brackets is what you want jQuery to look for, such as which element it should use.
A specific object event is followed by a right parenthesis.
You can define the actions that occur using specified events. In parentheses after the method/event is a function that describes what operations will occur when the event occurs.
Before giving examples, I would like to introduce one of the most beneficial basic elements of the jQuery library. All functionality utilized by jQuery is located in the HTML DOM, so you must load this document before you can use jQuery's features. You can accomplish the above operations using the ready event of this document, as shown in the following jQuery code snippet:
Copy code The code is as follows:

$(document).ready(function() {
// Your code goes here
});

The simple jQuery code above allows You execute the code after the document has finished loading. Listing A is an application example of this, which applies a CSS class to all heading elements on the page.
Copy code The code is as follows:


< ;title>Test

< ;script type="text/javascript">