Jquery Hands-Ons [Web Technology > Jquery] | Accenture

What is jQuery?

jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto: Write less, do more. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list 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 handling − The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, 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 lightweight library – 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.

How to use jQuery?

There are two ways to use jQuery.

  • Local Installation − You can download jQuery library on your local machine and include it in your HTML code.
  • CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).

Local Installation

  • Go to the https://jquery.com/download/ to download the latest version available.
  • Now put downloaded jquery-2.1.3.min.js file in a directory of your website, e.g. /jquery.

Example

Now you can include jquery library in your HTML file as follows −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

CDN Based Version

You can include jQuery library into your HTML code directly from Content Delivery Network (CDN). Google and Microsoft provides content deliver for the latest version.

We are using Google CDN version of the library throughout this tutorial.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</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
});

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

How to Use Custom Scripts?

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

/* Filename: custom.js */
$(document).ready(function() {

   $("div").click(function() {
      alert("Hello, world!");
   });
});

Now we can include custom.js file in our HTML file as follows

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Practice jquery- Problems and Solutions

1.Check Box Using JQuery

  1. chkbox.html
<!DOCTYPE html>
<!– DO NOT ALTER THIS FILE –>
<html lang=”en”>
<head>
<title>Check Box using jQuery</title>
</head>
<body>
<form id=”form”>
<input type=”checkbox” id=”red” name=”red” value=”Red”/>Red
<input type=”checkbox” id=”green” name=”green” value=”Green”/>Green
<input type=”checkbox” id=”blue” name=”blue” value=” Blue”/>Blue
<input type=”checkbox” id=”black” name=”black” value=”Black”/>Black<br/>
</form>
<div id=”result”>0 boxes are checked</div>
<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>
<script src=”chkbox.js”></script>
</body>
</html>
     
    2.chkbox.js
//WRITE YOUR jQUERY CODE HERE $(“input[type=’checkbox’]”).click(function(){ var count=0; count=$(“input:checked”).length; if(count==1) { $(“#result”).text(count+” box is checked”); } else $(“#result”).text(count+” boxes are checked”); });

Click here to read more Jquery and HTML Interview Questions and Answers

2.Customer Data

  1. customer.html

              <!– DO NOT CHANGE THIS FILE –>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows Dynamically</title>
<style type="text/css">
    form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 40%;
        margin-bottom: 20px;
	border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="customer.js"></script>
</head>
<body>

    <form id="frm">
        Name: <input type="text" id="name" placeholder="Name">
       	<input type="button" class="add-row" value="Add Customer Details">
   
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>Esther Saradha</td>
               </tr>
        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Customer Details</button>
 </form>

</body> 
</html>
customer.js//WRITE YOUR jQUERY CODE HERE
$(document).ready(function(){
    $(".add-row").click(function(){
        var name = $("#name").val();
        var markup = "<tr><td><input type='checkbox'name='record'></td><td>" + name + "</td></tr>";
        $("table tbody").append(markup);
    });
$(".delete-row").click(function(){
    $("table tbody").find('input[name="record"]').each(function(){ 
        if($(this).is(":checked")){
            $(this).parents("tr").remove();
}
    
});
    
});
});   3.Drag an Objectdrag.html<html>
    <head>
        <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-1.10.2.js">
        </script>
        <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <style>
            #draggable
            {
                width:300px;
                height: 300px;
            }
        </style>
        <script>
        $(document).ready(function(){
        $("p").click(function(){
        $("#draggable").draggable();
        });
        });
        </script>
    </head>
    <body>
        <div id="draggable" class="ui-qidget-content">
            <img src="fish.jpg">
            <p>Drag me around</p>
        </div>
    </body>
</html>4.Three Divisionsdivisions.html<!-- DO NOT CHANGE THIS FILE -->

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <style type="text/css">
   button {
     display: block;
     margin: 20px 0 0 0;
   } 
 </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="divisions.js"></script> 
</head>

 <body>

  <div name="DAIntelligence" id="DAI">
     <p> Distributed Artificial Intelligence (DAI)</p>
  </div>
  <div name="ASI_Intelligence" id="ASI">
    <p> Artificial Super Intelligence (ASI)</p>
  </div>
  <div name="Intelligence-Amp" id="IA">
    <p> Intelligence Amplification (IA))</p>
  </div>
 
  <button id="button1">Click to see the effect</button>
 </body>
</html>
divisions.js//WRITE YOUR jQUERY CODE HERE
$('#button1').click(function(){
    $("div[name$='DAIntelligence']").css( "background", "yellow" );
    $("div[name$='ASI_Intelligence']").css( "background", "yellow" );
});5.Window Resizewindow.html<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                var x = 0;
                $(window).resize(function()
                {
                    $("span").text(x += 1);
                    
                });
                
            });
        </script>
    </head>
    <body>
        <p id="resize">
            Window resized
            <span>0</span> times.</p>
        <p id="test">Try resizing your browser window.</p>
    </body>
</html>

Click here to read more blogs

About Author


After years of Technical Work, I feel like an expert when it comes to Develop wordpress website. Check out How to Create a Wordpress Website in 5 Mins, and Earn Money Online Follow me on Facebook for all the latest updates.

Leave a Comment