[email protected] +91 9175287066
This website is always under updation with new contents
JQuery Tutorials
JQuery History
Jquery Introduction
Work of Jquery
JQuery Syntax
JQuery Selector
Events in JQuery
JQuery Effects
JQuery hide()
JQuery show()
JQuery toggle
JQuary fadeIn()
slideUp()
slideDown()
animate()
JQuery
JQuery History

jQuery was released in January 2006 by John Resig at BarCamp NYC. It is currently headed by Timmy Wilson and maintained by a team of developers. Nowadays,Most of the websites are using jQuery. see the release dates of jQuery versions.

Version NoRelease Date
1.026,August,2006
1.114,January,2007
1.210, September, 2007
1.3 14, January, 2009
1.414, January, 2010
1.631, January, 2011
1.73, May, 2011
1.83, November, 2011
1.99, August, 2012
1.1015, January, 2013
1.1124,May, 2013
2.024, January, 2014
2.118, April, 2013

Jquery Introduction

Since you've come to this page, you may already have a pretty good idea about what jQuery is, but to be on the safe side, here is a brief explanation. jQuery is a JavaScript framework, which purpose is to make it much easier to use JavaScript on your website. You could also describe jQuery as an abstraction layer, since it takes a lot of the functionality that you would have to write many lines of JavaScript to accomplish and wraps it into functions that you can call with a single line of code. It's important to note that jQuery does not replace JavaScript, and while it does offer some syntactical shortcuts, the code you write when you use jQuery is still JavaScript code.

Work of Jquery

The jQuery library provides a general-purpose abstraction layer for common web scripting, and is therefore useful in almost every scripting situation.

The following points that jquery does.
  1. Access parts of page
  2. Modify the appearance of page
  3. Alter the page of content
  4. Respond to a user’s interaction with a page
  5. Add animation to a page
  6. Retrieve information from a server without refreshing a page
  7. Simplify common JavaScript tasks.
Access parts of page

Without a JavaScript library, many lines of code must be written to traverse the Document Object Model (DOM) tree, and locate specific portions of an HTML document's structure.

Modify the appearance of page

CSS offers a powerful method of influencing the way a document is rendered; but it falls short when web browsers do not all support the same standards. jQuery can bridge this gap, providing the same standards support across all browsers.

Alter the page of content

Not limited to mere cosmetic changes, jQuery can modify the content of a document itself with a few keystrokes. Text can be changed, images can be inserted or swapped.

Respond to a user’s interaction with a page

Even the most elaborate and powerful behaviors are not useful if we can't control when they take place. The jQuery library offers an elegant way to intercept a wide variety of events, such as a user clicking on a link.

Add animation to a page

To effectively implement such interactive behaviors, a designer must also provide visual feedback to the user.

Retrieve information from a server without refreshing a page

This code pattern has become known as Asynchronous JavaScript and XML (AJAX), and assists web developers in crafting a responsive, feature-rich site.

Simplify common JavaScript tasks

Document specific features of jQuery, the library provides enhancements to basic JavaScript constructs such as iteration and array manipulation.

JQuery Syntax
$("p").hide()
The jQuery hide() function, hiding all <p> elements.

$("this").hide()
The jQuery hide() function, hiding current(this) element.

$("#div1").hide()
The jQuery hide() function, hiding whose id="div1" in the elements.

$(".div1").hide()
The jQuery hide() function, hiding whose class=".div1" in the elements.
JQuery Selector
There are following selector in JQuery.
1 (“*”) All selector
“*” means it select all
2 : Animated selector
Select all elements which are progress in animation when the selector is run .
3 [name|=”value”]
Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).
4 [name*=”value”]
Selects elements that have the specified attribute with a value containing a given substring.
5 $(this)
This keyword indicate that select the current html element.
6 $("p.intro")
Select all paragraph elements <p> with class =”intro”.
7 (“.class”)
Select all elements with given specific class.
8 :contains()
In html most of the elements contain text so this selector select all elements which contain the text.
9 $("[href]")
It select all elements with href attribute i.e hyper refrence.
10 $("p:first")
If we want to select the first paragraph then use this selector.
11 $()
It represents a tag name available in the DOM. For example: $('p') selects all paragraphs'p'in the document.
12 $('#red-id')

It select the specific element in the document that has an ID of red-id.

EX : This will select all elements with tag name and the background color will be red.
<!DOCTYPE html>
2. <html>
3. <head>
4. <title>help4code</title>
5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
6. </script>
7. <script type="text/javascript" language="javascript">
8. $(document).ready(function() {
9. $("p").css("background-color", "red");
10. });
11. </script>
12. </head>
13. <body>
14. <p>This is first paragraph.</p>
15. <p>This is second paragraph.</p>
16. <p>This is third paragraph.</p>
17. </body>
18. </html>
How we use the selector

We can use the JQuery selector single or with the combination of other selectors. That are used to selct that we want to select exact.

EX : Program for hiding the contents.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<p>
<b>About help4code </b><br/>
largest collection of programs<br/>
on all technology avilable<br/>
top companies interview Q&A<br/>
</p>
<button id="hide">Hide</button>
</body>
</html>
Events in JQuery

The different kinds of action that web page respond that are called events and most of the times we have seen that some website having different kinds of response and that all kind of response comes because of JQuery.

The events has categorized according to their situation.
1 Mouse Events
click
dbclick
2 Keyboard events
Keypress
Keyup
Keydown
3 Form events
submit
change
focus
blur
4 Document events
load
resize
scroll
unload
Syntax
$("p").click();
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});
</script>
</head>
<body>

<p>help4code disappear</p>
<p>one more times</p>


</body>
</html>
JQuery Effects

JQuery having following types of effects they are given below.

  • Hide
  • Show
  • Toggle
  • Slide
  • Fade
  • Animate
  • 1)JQuery hide()

    method is used for hiding the html selected elements.

    Syntax
    $(selector).hide();
    Example
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#hide").click(function(){
            $("p").hide();
        });
        
    });
    </script>
    </head>
    <body>
    
    <p>Help4code</p>
    
    <button id="hide">Hide</button>
    
    </body>
    </html>
    2)JQuery show()
    method is used for show the html selected elements.
    Syntax
    $(selector).show();
    Example
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#hide").click(function(){
            $("p").hide();
        });
        $("#show").click(function(){
            $("p").show();
        });
    });
    </script>
    </head>
    <body>
    
    <p>help4code</p>
    
    <button id="hide">Hide</button>
    <button id="show">Show</button>
    
    </body>
    </html>
    3)JQuery toggle

    The jQuery toggle() is a special type of method which is used to toggle the hide() and show() method. It shows the hidden elements and hides the shown element.

    Syntax
    $(selector).toggle();
    Example
    <!DOCTYPE html> 
    <html>
     <head> 
    <script type="text/javascript" src="js/jquery-1.10.2.min.js">
     </script>
     <script> $(document).ready(function(){
     $("button").click(function(){
     $("div.d1").toggle();
     }); 
    }); 
    </script> 
    </head>
    <body>
     <button>Toggle</button>
    <div class="d1" style="border:1px solid black;padding:15px;width:250px">
    <p><b>help4code</b><br/>
    </div> 
    </body>
     </html>
    JQuary fadeIn()

    jQuery fadeIn() method is used to fade in the element.

    Syntax
    $(selector).fadein(speed,callback);
    Speed

    A string representing one of the three predefined speeds ("slow", "def", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

    Callback

    This is optional parameter representing a function to call once the animation is complete.

    Example
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").fadeIn();
            $("#div2").fadeIn("slow");
            $("#div3").fadeIn(4000);
        });
    });
    </script>
    </head>
    <body>
    
    <p>Demonstrate fadeIn() with different parameters.</p>
    
    <button>Click to fade in boxes</button><br><br>
    
    <div id="div1" style="width:80px;height:50px;display:none;background-color:yellow;"></div><br>
    <div id="div2" style="width:80px;height:50px;display:none;background-color:black;"></div><br>
    
    
    </body>
    </html>
    4)slideUp()

    jQuery slideUp() method is used to hide the HTML element where it looks like the content is getting hidden by sliding up.

    Syntax
    $(selector).slideUp(speed); 
     $(selector).slideUp(speed, callback);
    Example
    <!DOCTYPE html>
    <html>
    <head>
    <title>help4code</title>
    <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <script> 
    $(document).ready(function(){
        $("#btn1").click(function(){
        $(".divClass").slideUp("slow",function()
        {
          $("#textMsg").text("Slide Up completed.");
        });
      });
     
    });
    </script>
      
    <style> 
    .divClass
    {
        margin-top:20px;
        padding:10px;
        text-align:center;
        background-color:orange;
        border:solid 1px;
        height:100px;
        width: 200px;
    }
    </style>
    </head>
    <body>
     
    <button id="btn1">Click here</button>
    <div class="divClass"><br><b>help4code</b> <br><br>Big website</div>
    <div id="textMsg"></div>
     
    </body>
    </html>
    5)slideDown()

    jQuery slideDown() method is used to show the hidden HTML element where it looks like the content is getting shown by sliding down.

    Syntax
    $(selector).slideDown(speed);
     $(selector).slideDown(speed, callback);
    Example
    <!DOCTYPE html>
    <html>
    <head>
    <title>help4code</title>
    <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <script> 
    $(document).ready(function(){
      $("#btn1").click(function(){
        $(".divClass").slideDown("slow",function ()
        {
           $("#textMsg").text("Slide Down completed.");
        });
      });
    });
    </script>
      
    <style> 
    .divClass
    {
        padding:5px;
        text-align:center;
        background-color:orange;
        border:solid 1px;
    }
    .divClass
    {
        padding:50px;
        display:none;
    }
    </style>
    </head>
    <body>
     
    <button id="btn1">Click here</button>
    <div class="divClass"><b>help4code.com</b> <br><br>tutorial website</div>
    <div id="textMsg"></div>
     
    </body>
    </html>
    5) animate()

    The jQuery animate() method is used to create animations.

    Syntax
    $(selector).animate({params},speed,callback);
    Example
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").animate({left: '250px'});
        });
    });
    </script>
    </head>
    <body>
    
    <button>Start</button>
    
    <p>help4code</p>
    
    <div style="background:blue;height:100px;width:100px;position:absolute;"></div>
    
    </body>
    </html>

    For accessing computer programs go to TECHNOLOGY