The jQuery Local Example

Содержание

How to link jQuery in HTML page?
How to link jQuery?
1. By downloading the jQuery library locally
Example
Hello
Output
2. By including the jQuery from a CDN
Example #1 − Link jQuery from Google CDN
Output
Example #2 − Link jQuery from Microsoft CDN
Output
Example #3: Link jQuery from Cloudflare CDN
Hello
Output
Example #4 − Link jQuery from jQuery CDN
Hello
Output
How jQuery Works
link Launching Code on Document Ready
link Complete Example
link Adding and Removing an HTML Class
link Special Effects
link Callbacks and Functions
link Callback without Arguments
link Callback with Arguments
link Wrong
link Right
How to embed jQuery into HTML page
Contents
1. Download and Include
2. Add jQuery to HTML
3. Add External jQuery file
4. Demo
5. Conclusion

How to link jQuery in HTML page?

jQuery is a fast and concise JavaScript library primarily designed with a nice motto − Write less, do more. The main purpose of this library is to make it easier to use JavaScript on our website. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery wraps many lines of JavaScript code into methods that we can call with a single line of code.

How to link jQuery?

There are two ways to link jQuery in an HTML page —

By downloading the jQuery library locally — you can download the jQuery file on your local machine and include it in the HTML page.
By including the jQuery from a CDN — you can add the jQuery library into your HTML page directly from a Content Delivery Network (CDN).

1. By downloading the jQuery library locally

Download the latest version of jQuery library from the official website https://jquery.com/download/. You can download any of the four types of available jQuery versions- uncompressed, minified, slim and slim & minified.
Now put the downloaded jquery-3.6.0.min.js file in a directory of your website, e.g. /jquery.
We can link jQuery in an HTML page by using a script tag and providing the downloaded jQuery library file address as the src attribute. The jquery-3.6.0.min.js can be added like below.

Let’s understand with the help of a complete example.

Example

In the example below we include jQuery library in our HTML page as follows –

      Hello

Output

This will produce the following result —

Hello, World! We are using jQuery from local machine

2. By including the jQuery from a CDN

We can link the jQuery library in our HTML page directly from a Content Delivery Network. There are different CDNs that provide the latest version of the jQuery library. For Example, Google, Microsoft, Cloudflare CDNs, and jQuery’s own CDN.

Let’s understand how to link jQuery from these CDNs each with help of examples.

Example #1 − Link jQuery from Google CDN

We can link jQuery in an HTML page by using a script tag and providing a jQuery Google CDN address as the src attribute. The jquery.min.js can be added like below.

Here, in the example below we link the jQuery library in our HTML page as follows −

div

Output

Here the fadeIn() method changes the opacity, for selected elements, from hidden to visible. It is to specify the speed of the fading effect, which can be slow or fast.

Example #2 − Link jQuery from Microsoft CDN

We can link jQuery in an HTML page by using a script tag and providing a jQuery Microsoft CDN address as the src attribute. The jquery-3.6.0.js can be added like below.

Here, in the example below we link the jQuery library from Microsoft CDN in our HTML page −

Output

When you click on the “Show Message” button, the message will be displayed.

Example #3: Link jQuery from Cloudflare CDN

We can also use Cloudflare CDN to link the jQuery library to our HTML page. To link jQuery in an HTML page we add jQuery Cloudflare CDN address to the src attribute of the script tag. The jquery.min.js can be added like below.

Here, in the example below we link the jQuery library from Cloudflare CDN in your HTML page −

      Hello

Output

This will produce the following result —

Hello, World! We are using jQuery from Cloudflare CDN.

Example #4 − Link jQuery from jQuery CDN

We can also use jQuery CDN to link the jQuery library in our HTML page. To link jQuery in an HTML page we add the jQuery CDN address to the src attribute of the script tag. We also have to add integrity and crossorigin to the script. We can directly copy the script code from the jQuery website. jquery-3.6.0.min.js can be added like below-

Here, in the example below we link the jQuery library from jQuery CDN in your HTML page −

      Hello

Output

This will produce the following result —

Hello, World! We are using jQuery from jQuery CDN.

Источник

How jQuery Works

This is a basic tutorial, designed to help you get started using jQuery. If you don’t have a test page setup yet, start by creating the following HTML page:

html>
html>
head>
 meta charset="utf-8">
 title>Demo title>
 head>
body>
 a href="http://jquery.com/">jQuery a>
 script src="jquery.js"> script>
 script> 
  // Your code goes here.
  script>
 body>
 html>

The src attribute in the element must point to a copy of jQuery. Download a copy of jQuery from the Downloading jQuery page and store the jquery.js file in the same directory as your HTML file.

Note: When you download jQuery, the file name may contain a version number, e.g., jquery-x.y.z.js . Make sure to either rename this file to jquery.js or update the src attribute of the element to match the file name.

link Launching Code on Document Ready

To ensure that their code runs after the browser finishes loading the document, many JavaScript programmers wrap their code in an onload function:

window.onload = function( ) 
  alert( "welcome" );
 >;

 Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:
 $( document ).ready(function( ) 
  // Your code here.
 >);
 Note: The jQuery library exposes its methods and properties via two properties of the window object called jQuery and $ . $ is simply an alias for jQuery and it's often employed because it's shorter and faster to write.
 For example, inside the ready event, you can add a click handler to the link:
 $( document ).ready(function( ) 
  $( "a" ).click(function( event ) 
  alert( "Thanks for visiting!" );
  >);
 >);
 Copy the above jQuery code into your HTML file where it says // Your code goes here . Then, save your HTML file and reload the test page in your browser. Clicking the link should now first display an alert pop-up, then continue with the default behavior of navigating to http://jquery.com.
 For click and most other events, you can prevent the default behavior by calling event.preventDefault() in the event handler:
 $( document ).ready(function( ) 
  $( "a" ).click(function( event ) 
  alert( "As you can see, the link no longer took you to jquery.com" );
  event.preventDefault();
  >);
 >);
 Try replacing your first snippet of jQuery code, which you previously copied in to your HTML file, with the one above. Save the HTML file again and reload to try it out.
  link Complete Example
 The following example illustrates the click handling code discussed above, embedded directly in the HTML . Note that in practice, it is usually better to place your code in a separate JS file and load it on the page with a element's src attribute.
 html>
html>
head>
 meta charset="utf-8">
 title>Demo title>
 head>
body>
 a href="http://jquery.com/">jQuery a>
 script src="jquery.js"> script>
 script> 
  $( document ).ready(function( ) 
 $( "a" ).click(function( event ) 
 alert( "The link will no longer take you to jquery.com" );
 event.preventDefault();
 >);
 >);
  script>
 body>
 html>
  link Adding and Removing an HTML Class
 Important: You must place the remaining jQuery examples inside the ready event so that your code executes when the document is ready to be worked on.
 Another common task is adding or removing a class.
 First, add some style information into the of the document, like this:
 style> 
a.test 
 font-weight: bold;
>
 style>
 Next, add the .addClass() call to the script:
 To remove an existing class, use .removeClass():
  link Special Effects
 jQuery also provides some handy effects to help you make your web sites stand out. For example, if you create a click handler of:
 $( "a" ).click(function( event ) 
  event.preventDefault();
  $( this ).hide( "slow" );
 >);
 Then the link slowly disappears when clicked.
  link Callbacks and Functions
 Unlike many other programming languages, JavaScript enables you to freely pass functions around to be executed at a later time. A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. Callbacks are special because they patiently wait to execute until their parent finishes. Meanwhile, the browser can be executing other functions or doing all sorts of other work.
 To use callbacks, it is important to know how to pass them into their parent function.
  link Callback without Arguments
 If a callback has no arguments, you can pass it in like this:
 $.get( "myhtmlpage.html", myCallBack );
 When $.get() finishes getting the page myhtmlpage.html , it executes the myCallBack() function.
  Note: The second parameter here is simply the function name (but not as a string, and without parentheses).
 
  link Callback with Arguments
 Executing callbacks with arguments can be tricky.
  link Wrong
 This code example will not work:
 $.get( "myhtmlpage.html", myCallBack( param1, param2 ) );
 The reason this fails is that the code executes myCallBack( param1, param2 ) immediately and then passes myCallBack() 's return value as the second parameter to $.get() . We actually want to pass the function myCallBack() , not myCallBack( param1, param2 ) 's return value (which might or might not be a function). So, how to pass in myCallBack() and include its arguments?
  link Right
 To defer executing myCallBack() with its parameters, you can use an anonymous function as a wrapper. Note the use of function() < . The anonymous function does exactly one thing: calls myCallBack() , with the values of param1 and param2 .
 $.get( "myhtmlpage.html", function( ) 
  myCallBack( param1, param2 );
 >);
 When $.get() finishes getting the page myhtmlpage.html , it executes the anonymous function, which executes myCallBack( param1, param2 ) .
 Источник
 How to embed jQuery into HTML page
 jQuery is a popular JavaScript library that makes easier to include dynamic and interactive content on the website. It offers a wide range of tools for navigating, modifying, and animating HTML documents as well as for managing events, executing AJAX requests, and building plugins.
 With this, you can perform the same task written in JavaScript with just a few lines of code.
 Compatible with most browsers and supports CSS3 selectors to find and style property manipulation.
 
 Contents
 1. Download and Include
  Navigate to jQuery Official website.
 The library is available in two versions – compressed and uncompressed. The compressed has less size as compared to uncompressed because it doesn’t have extra white spaces and comments. The uncompressed version is readable and easier to debug.
 Download the compressed version.
 Use to include the library in HTML either in or .
 
 2. Add jQuery to HTML
 In the web page write your jQuery code within the document ready state in the tag.
 In the example, I created a textbox and button. Included jQuery library using CDN.
 Defined click event on the button. On click update textbox value by calling val() .
 3. Add External jQuery file
  Create a script.js file and put the above script on it.
 I have created the script.js in the root folder. You can also create it inside a folder like – scripts/script.js or js/script.js .
 
  To include an external jQuery file you first need to include the jQuery library.
 In the tag specify the file path in src attribute.
 For example – if your JS file is in js folder then the path will be js/script.js .
 I have stored the file in the root folder, that’s why I directly mention the file name.
 
 4. Demo
 Both examples will give the same output.
 5. Conclusion
 Adding jQuery to an HTML page is a quick and easy process that only requires a few simple steps. After adding you can take advantage of the numerous features and functionalities offered by the jQuery library.
 You can develop dynamic, interactive web pages with jQuery that engage visitors and offer a good user experience.
 You can either use the external jQuery library or the CDN version to include.
 If you have created an external script and used jQuery on it then it must be included after the jQuery library script otherwise, it wouldn’t work and generate the errors.
 If you found this tutorial helpful then don't forget to share.
 Источник