How to Use Jquery in Web Development?

by

Hi Friends,

In this blog, I am going to tell you about Jquery and How to use jquery in website development so let us start with a brief introduction of jquery.

jQuery

jQuery is a scripting language and it is a lightweight JavaScript library that simplifies programming with JavaScript
and it is the client-side scripting language.

jQuery is a fast, and simple JavaScript library. With the help of jQuery, we can change the HTML document traversal and manipulation, we can also do event handling, Ajax, and animation much simpler with an easy-to-use API and it is easy to use as compare javascript.

Advantages(Why we use jquery)

There are several most important advantages of using the raw javascript.

  1. jQuery is a cross-browser scripting language.
  2. jQuery is very easy to use as compare to raw javascript
  3. jQuery is extensible
  4. It is a simplifies and has rich AJAX support scripting language.
  5. jQuery has very large development community and it has many plugins. Example GridView template plugin.
  6. Excellent documentation

How to use jQuery in a web application

To use jQuery in any application we need to Download the jQuery file from www.jQuery.com and
Give reference it in your application just like any other JavaScript file.

For Example:-

In this example, I am going to Add a click event on a button using jquery and in it, we don’t   need to worry about cross-browser issues, it automatically handles the jquery.

$('document').ready(fun"" () { $('#btnclick').click(function () { alert('Hello jquery'); }); });

<input type="button" value="Click Me" id="btnclick" />

Several Points that we need to remember :

  1. document.ready() function tells about that the DOM is fully loaded.
  2. $ is a shortcut for jQuery, in other words, we can use the $ sign in place of jquery.
  3. All three of the following syntaxes are equivalent:
    $(document).ready( handler )
    jQuery().ready( handler ) (this is not recommended)
    $( handler )

There are several very important functions that are useful in jquery that is as below:-

Difference between document.ready() and windows.load :

$(document).ready(function()) :-

This is very, very important function or we can say that event of jquery. This event fires when the DOM is load and ready to be manipulated by the script. It is fired from all the images, CSS etc.. are fully load.

<html>
 <head>
  <title></title>
  http://Scripts/jquery-1.11.2.js

 $('document').ready(function () {
  $('#btnclick').click(function () {
  alert('Hello jquery');
  });
  });

</head>
 <body>
  <input id="btnclick" type="button" value="Click Me" />
 </body>
 </html>

The above example is working because the click event of the button is at the ready() function that means at that time DOM is fully loaded before this piece of code is executed.
So that javascript can get the button element in HTML DOM and adds the click on this button.

<html>
 <head>
 <title></title>
 http://Scripts/jquery-1.11.2.js

$('#btnclick').click(function () {
 alert('Hello jquery');
 });

</head>
 <body>
 <input id="btnclick" type="button" value="Click Me" />
 </body>
 </html>

Now in above HTML, we have to remove the ready function, and when we click the button we will not get the alert that is happening because the jquery code is executed before HTML and at that time jquery cannot find the button.

$(window).load event :-

This is also a very important function or we can say that event of jquery. this event fires when the DOM and all other content like CSS, images etc are fully loaded and it is fire after ready() event.

For Example:-

$(window).load(function () {
 alert('Window loaded after ready');
 });

$(document).ready(function () {
 alert('DOM Loaded and ready');
 });

In above code when we execute this first alert that will show  “DOM Load and ready” after that it will show second alert box  “Window loaded after ready”.

Selectors

The selector is used to get value of HTML elements there are several types of selector in a jquery that is as follows:-

1.Class Selector :- jQuery class selectors uses the JavaScript’s getElementsByClassName() method.

SYNTAX

$(‘.className’)

For Example:-

$('.test') // Selects all elements with class test
$('.test,.test1') // Selects all elements with class test or test1
$('div.test,.test1') // Selects div elements with class test and any element with class test1.

Now let us take an example and see how jquery class selector will work.

Selects all elements with class “test” and sets 1px solid black border.

<html>
 <head>
 <title></title>
 http://Scripts/jquery-1.11.2.js

$(document).ready(function () {
 $('.test').css('border', '1px solid black');
 });

</head>
 <body>
 <span class="test">
 Span 1
 </span>
 <br /><br />

Div 1

<br />
 <span class="test1">
 Span 2
 </span>
 <p class="test1">This is a test </p>
 </body>
 </html>

In the above example, we can see that we set the border on class tests so that border set of that element whose class tests.

1.Id Selector :- jQuery Id selectors uses the JavaScript’s getElementsById() method.

SYNTAX

$(‘#IdName’)

For Example:-

$('#test') // Selects all elements with Id test
$('#test,#test1') // Selects all elements with Id test or test1
$('div #test,#test1') // Selects div elements with Id test and any element with Id test1.

Now let us take an example and see how jquery Id selector will work.

Selects all elements with Id “test” and sets 1px solid black border.

<html>
 <head>
 <title></title>
 http://Scripts/jquery-1.11.2.js

$(document).ready(function () {
 $('.test').css('border', '1px solid black');
 });

</head>
 <body>
 <span Id="test">
 Span 1
 </span>
 <br /><br />

Div 1

<br />
 <span Id="test1">
 Span 2
 </span>
 <p Id="test1">This is a test </p>
 </body>
 </html>

In the above example, we can see that we set the border on the Id test so that border set of that element whose Id is a test.

1.Attribute Selector:- jQuery attribute selectors use the JavaScript’s element.getAttribute() method.

Syntax
$(‘[attribute]’)
$(‘[attribute=”value”]’)

For Example:-

$('[title]') // Selects all elements that have title attribute
$('div[title]') // Selects all div elements that have title attribute
$('[title="divNew"]') // Selects all elements that have title attribute value - divNew
$('div[title="divNew"]') // Selects all div elements that have title attribute value - divNew.
Selects all elements that have title attribute and sets 1px solid black border.
 <html>
 <head>
 <title></title>
 http://Scripts/jquery-1.11.2.js

$(document).ready(function () {
 $('[title]').css('border', '5px solid black');
 });

</head>
 <body>

DIV 1

<br />

DIV 2

<p title="pTitle">
 This is a paragraph
 </p>
 <span title="div1New">
 SAPN 1
 </span>
 <br /><br />
 <span>
 SPAN 2
 </span>
 </body>
 </html>

In above example, we can see that we set the border on that element whose having the title attribute.

Each Function

This function is same as the looping like for loop, while loop etc. in other words Each function is used to iterate values from a collection one by one.

SYNTAX

$(selecter).each(function (index, element) {

// logic

});

For Example:-

$('li').each(function (index, element) {

alert(index + ' : ' + $(element).text());

});

In the above example, we loop through all the attribute and print the index with element text.

Thanks for visiting my blog, hope this blog helps you and we know that Jquery is wide language but I tried to cover basic of this language. For further queries, feel free to post your valuable comments in the comments section below!

Follow me!
Latest posts by Imran Saifi (see all)

Leave a Comment