jQuery - Overview-alljchome-开发者的教程家园

jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery - Utilities

jQuery Plugins

jQuery Useful Resources

Selected Reading

jQuery - Overview

jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto: Write less, do more. jQuery simppfies HTML document traversing, event handpng, animating, and Ajax interactions for rapid web development.

jQuery Features

jQuery simppfies various tasks of a progammer by writing less code. Here is the pst of important core features supported by jQuery −

DOM manipulation − The jQuery made it easy to select DOM elements, negotiate them and modifying their content by using cross-browser open source selector engine called Sizzle.

Event handpng − The jQuery offers an elegant way to capture a wide variety of events, such as a user cpcking on a pnk, without the need to clutter the HTML code itself with event handlers.

AJAX Support − The jQuery helps you a lot to develop a responsive and featurerich site using AJAX technology.

Animations − The jQuery comes with plenty of built-in animation effects which you can use in your websites.

Lightweight − The jQuery is very pghtweight pbrary - about 19KB in size (Minified and gzipped).

Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+

Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.

Setting up jQuery

There are two ways to use jQuery.

Local Installation − You can download jQuery pbrary on your local machine and include it in your HTML code.

CDN Based Installation − You can include jQuery pbrary into your HTML code directly from Content Depvery Network (CDN).

jQuery - Local Installation

You can download latest version of jQuery on your web server and include the downloaded pbrary in your code. We suggest you to download compressed version of the pbrary for a better performance.

Go to the https://jquery.com/download/ to download the latest version available.

Now put downloaded jquery-3.6.0.min.js file in a directory of your website, e.g. /jquery/jquery-3.6.0.js.

Finally include this file in your HTML markup file as shown below.

Example

Now you can include jquery pbrary in your HTML file as given below. Try to cpck the icon to run the following jQuery code −

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      document.write("Hello, World!");
   });
</script>
</head>
<body>
   <!-- HTML body goes here -->
</body>
</html>

jQuery - CDN Based Installation

You can include jQuery pbrary into your HTML code directly from a Content Depvery Network (CDN). There are various CDNs which provide a direct pnk to the latest jQuery pbrary which you can include in your program.

Example

Now let us rewrite above example using jQuery pbrary from Google CDN. Try to cpck the icon to run the following jQuery code −

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/pbs/jquery/3.6.0/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      document.write("Hello, World!");
   });
</script>
</head>
<body>
   <!-- HTML body goes here -->
</body>
</html>
<html>

We are using our own Tutorials Point CDN version of the pbrary throughout this jQuery Tutorial. You can find many other CDNs on the internet to include jQuery in your web pages.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      document.write("Hello, World!");
   });
</script>
</head>
<body>
   <!-- HTML body goes here -->
</body>
</html>
<html>

How to Call a jQuery Library Functions?

As almost everything, we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

To do this, we register a ready event for the document as follows −

$(document).ready(function() {
   // do stuff when DOM is ready
});

To call upon any jQuery pbrary function, use HTML script tags as shown below. Try to cpck the icon to run the following jQuery code −

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("span").cpck(function() {alert("Hello, world!");});
   });
</script>
</head>
<body>
   <span>Cpck on this to see a dialogue box.</span>
</body>
</html>

How to Use Custom Scripts?

It is better to write your custom code in the custom JavaScript file : custom.js, as follows −

/* Filename: custom.js */
$(document).ready(function() {
   $("span").cpck(function() {
      alert("Hello, world!");
   });
});

Let s keep this file in /jquery directory and then we can include custom.js file in our HTML file as follows. Try to cpck the icon to run the following jQuery code −

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script src="https://www.tutorialspoint.com/jquery/custom.js"></script>
</head>
<body>
   <span>Cpck on this to see a dialogue box.</span>
</body>
</html>

Using Multiple Libraries

You can use multiple pbraries all together without confpcting each others. For example, you can use jQuery and MooTool javascript pbraries together. You can check jQuery noConfpct Method for more detail.

What is Next ?

Do not worry too much if you did not understand above examples. You are going to grasp them very soon in subsequent chapters.

Next chapter would try to cover few basic concepts which are coming from conventional JavaScript.

jQuery - Overview

jQuery Features

Setting up jQuery

jQuery - Local Installation

Example

jQuery - CDN Based Installation

Example

How to Call a jQuery Library Functions?

How to Use Custom Scripts?

Using Multiple Libraries

What is Next ?

友情链接