JQuery Hello World Example

How To Add jQuery link In Html Correctly With Examples

jQuery is a JavaScript framework that runs very fast with a very small size of JavaScript library code. It can easily implement a lot of JavaScript animation effects by operating DOM objects, processing events, and handling Ajax interactions. jQuery can simplify your JavaScript source code to improve your development speed and JavaScript code execution performance. In this article, I will tell you how to add jQuery links in both Html files and javascript files, and how to use jQuery to implement some basic animations with examples.

1. Add jQuery Link In Html File.

1. The first thing you need to do is to download the jQuery library js file and add it into your Html file.
2. Open a web browser and go to the jQuery library js file download page http://jquery.com/download/. Find the jQuery library js file download link, right-click it, in the popup menu list click Save Link As menu.
3. The above action will save the jQuery library js file in a local folder, you can save it to any folder( for example your project lib folder).
4. Next, you need to add the jQuery link in your Html page file like below source code. Below source code should be added in the head section of the target Html file.

2. Add jQuery Link In JavaScript File.

1. If you add the jQuery link in the Html source code, you must add the below code in every Html file head section. The disadvantage of this method is that if you want to use a new jQuery version you must update all Html files one by one manually, this is not a good method.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/OvyqoKL97Y0

2.1 Use document.writeln() Function To Add jQuery Link In JavaScript File.

1. Add below js code in the include-jquery.js file, and then import the include-jquery.js file in test.html.
2. include-jquery.js

// invoke javascript document object's writeln function to write 'import jquery lib js file string' in html page source code. document.writeln('');

/* Use $ to use jQuery object when the document load ready, then execute the anonymous funcion() */ $(document).ready(function() < // Register click event to all html a tag, the callback function will be triggered when user click a link in the html page. $('a').click(function(event) < // Prevent the link default behaviour, then click it will not open a target url. event.preventDefault(); // Popup an alert dialog. alert('The link will fade out.') // Fade out the link in the html page. $(this).hide("slow"); >); >);

2.2 Add jQuery By Create Script Element In Another JavaScript File.

// When the window load process complete then invoke load jquery lib js file function. window.load = load_jquery_lib_js_file(); function load_jquery_lib_js_file() < // Create a html script element. var script = document.createElement('script'); // Set the html script element's type to 'text/javascript'. script.type = 'text/javascript'; // Set the html script element's src attribute value to google online jquery lib js file. script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'; // When the jquery script load complete then invoke the handler function for different browsers. script.onreadystatechange = handler; script.onload = handler; // Append the html script element to the end of html page head section. document.getElementsByTagName('head')[0].appendChild(script); >// This function will be executed after jquery lib file has been loaded successfully. function handler()< // Write an message in browser console. console.log('jquery added :)'); // Create a html script element. var script = document.createElement('script'); // Set the html script element's type to 'text/javascript'. script.type = 'text/javascript'; // Set the html script element's src attribute value to the js file which will use jQuery object( it is use-jquery-when-jquery-is-loaded.js in this example ). script.src = './use-jquery-when-jquery-is-loaded.js'; // Append the html script element to the end of html page head section. document.getElementsByTagName('head')[0].appendChild(script); >

/* Use $ to use jQuery object when the document load ready, then execute the anonymous funcion() */ $(document).ready(function() < // Register click event to all html a tag, the callback function will be triggered when user click a link in the html page. $('a').click(function(event) < // Prevent the link default behaviour, then click it will not open a target url. event.preventDefault(); // Popup an alert dialog. alert('The link will fade out.') // Fade out the link in the html page. $(this).hide("slow"); >); >);

3. jQuery Example.

1. This example contains two html files, hellow-world-alert.html and hello-world-add-number.html.

3.1 jQuery Hello World Alert Example.

1. In the first example, it will display an alert dialog when the page is loaded.
2. There is also a button with text “Welcome to JQuery world” in the page, when the button is clicked, it will show two alert dialog, the first alert dialog’s text is ‘You click the button’, the second alert dialog’s text is the button original text, then it will set button text to ‘Wish you like JQuery 🙂‘ and change the button’s text and background color.
3. hello-world-alert.html

3.2 jQuery Hello World Add Number Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/u-x9_IQssaU

1. This example uses jQuery to set the Html p tag css style. It also bind the mouse move event of the div tag, when your mouse moves in the div tag, the number will increase.
2. hello-world-add-number.html

     -->    
Hello World From JQuery!
 

4.1 Question.

1. I get some jQuery code from the internet, and it meets my requirements, so I want to add those jQuery codes to my Html page. I tried some methods, but failed, can anyone give me some help? Thanks a lot.

4.2 Answer1.

1. You can create a new javascript file such as common-function.js and then paste your jQuery code into it.
2. You can save this file in your js project home-directory/js folder. Then you can follow this article to add both the jQuery library js file and the common-function.js file into your Html page ( refer to sections 1, 2 at the beginning of this article ).
3. And then you can use the jQuery code that you get from the internet. But you also need to make sure the web element id or name in the jQuery code matches the web element in your Html web page.

5. How To Use jQuery To Include Html File Content.

5.1 Question.

1. My Html page (index.html) contains several other Html pages using the tag like below.

5.2 Answer1.

1. You can use jQuery’s load() method to load the Html page content (menu.html, detail.html) into the DOM tree of the index.html page.
2. Then the jQuery object that is created in the index.html page can access and manipulate the content of the menu.html, detail.html.
3. Below is the example source code.

Источник

Add jquery link to html

Learn Latest Tutorials

Preparation

Trending Technologies

B.Tech / MCA

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

• Website Designing
• Website Development
• Java Development
• PHP Development
• WordPress
• Graphic Designing
• Logo
• Digital Marketing
• On Page and Off Page SEO
• PPC
• Content Development
• Corporate Training
• Classroom and Online Training
• Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

Like/Subscribe us for latest updates or newsletter

Источник

The 2 Best Ways to Add jQuery to HTML

jQuery is one of the most popular Javascript libraries on the web today.

By adding jQuery to your HTML project, you can take advantage of the many built-in functions to enhance the user experience and add interactivity to your website.

Have you been wondering how to incorporatejQuery in your HTML files?

This post will teach all the various methods on How to Add jQuery to HTML.

It will also include code snippets to give you a better understanding and the advantages and disadvantages of each method.

How to Add jQuery to HTML

There are two main ways to include jQuery in an HTML document.

Download the jQuery library file and include it in your HTML code locally. You can do this by saving the file to your project directory and then adding the following script tag to your HTML file:

Include jQuery from a CDN (Content Delivery Network). This is a good option if you don’t want to host the jQuery library file yourself.

If you are developing your site using a Javascript library like React.JS, you can use a package manager like npm (Node Package Manager) to install jQuery as a dependency in your project.

You can then import jQuery into your project using the following code:

Additionally, you can use a build tool like Webpack or Browserify to bundle jQuery and other dependencies into a single file.

This method is quite useful in a situation where you are working on a large project with many dependencies.

1. Download the jQuery Library File and Include It in Your HTML Code Locally to add jQuery to HTML

The first method of adding jQuery to an HTML document involves downloading the jQuery library file and hosting it locally on your own server.

To get started, navigate to the official jQuery website and download the jQuery library file.

You will see several options like:

• Download the compressed, production jQuery version
• Download the uncompressed, development jQuery version
• Download the map file for jQuery version

To keep things simple, Download the “uncompressed, development jQuery version.”

That will download a .js file on your local machine. Save this file in the same directory with your HTML file.

You can then include the file in your HTML document using a script tag like this:

The code snippet below shows how we included the jQuery library file in our HTML file.

Advantages of Using a Locally Hosted jQuery Library File

One advantage of this method is that it allows you to host the jQuery library file yourself, which can be useful if you don’t want to rely on a CDN (Content Delivery Network).

This can be particularly useful if you are working on a project that needs to be self-contained or that needs to be accessible offline.

Another advantage of this method is that it allows you to use a specific version of the jQuery library that you have tested and knows works well with your project.

This can be important if you are working on a large project that depends on a specific version of jQuery.

Finally, hosting the jQuery library file locally can also be a good option if you are concerned about the reliability or performance of external CDNs.

By hosting the file yourself, you can have more control over how it is delivered to your users.

2. Include jQuery from a CDN (Content Delivery Network) to add jQuery to HMTL

Using a CDN (Content Delivery Network) to include jQuery in your HTML file is a simple and efficient way to use the library.

A CDN is a network of servers that are distributed around the globe.

The purpose of a CDN is to deliver content to users more quickly and efficiently by serving the content from a server that is geographically closer to the user.

To include jQuery from a CDN, use the HTML script tag as shown below.

Источник