jQuery Basics

jQuery is a JavaScript Library that simplifies HTML document traversing, event handling and Ajax interactions for web development. jQuery provides an easy way to select and work with HTML elements as a group or as a single element.

Adding the jQuery Library to your pages

The jQuery library is stored as a single JavaScript file, containing all the jQuery methods. It can be added to a web page with the following mark-up: 
<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>

You can download the jQuery library from the jQuery site or you can use the hosted jQuery library from Google. 

<head>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>

The jQuery syntax is made for selecting HTML elements and perform some action on the element(s).

$(selector).action()
A dollar sign to define jQuery.
A (selector) to "query (or find)" HTML elements.
A jQuery action() to be performed on the element(s).

Basic jQuery Example

The following example demonstrates the jQuery toggle() method, toggling the visibility of all div elements in HTML document after clicking a button.

The result of the above code is:

jQuery uses CSS selectors to select HTML elements.


$("div") selects all div elements.
$("div.home") selects all div elements with class="home".
$("div#home") selects all div elements with id="home".
$("div").hide(); hides all div elements.
$(“#home”).hide(); hides an element with id=’home’.

jQuery Attribute Selectors

jQuery uses XPath expressions to select elements with given attributes.
$("[href]") select all elements with an href attribute.
$("[href='#']") select all elements with an href value equal to "#".

jQuery CSS Selectors

jQuery CSS selectors can be used to change CSS properties for HTML elements.
The following example changes the background-color of all div elements to black:

Example
$("div").css("background-color","black")

jQuery Events

Events are triggered when the user interacts with the browser like moving and clicking the mouse or pressing a keyboard key. When an event reaches an element, all event handlers bound to that event type for the element are fired.

The following example demonstrates how to subscribe to the ‘click’ event of a button and do some action in the event handler. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {            
              $("button").on('click', function(){
                  alert("Button is Clicked.");
              });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
    <button>
        Click me</button>
</body>
</html>

The result of the above code is:

jQuery no-conflict mode

Some JavaScript libraries use $ as a function or variable name just as jQuery does. When they are loaded on the same web page, libraries run into conflicts with jQuery. When jQuery is in no-conflict mode, the option is to assign a new variable name to replace the $ alias.

Create a New Alias

The jQuery.noConflict() method returns a reference to the jQuery function. 
    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
        // Give $ back to prototype.js; create new alias to jQuery.
        var $jq = jQuery.noConflict();
    </script>
Use the Argument That's Passed to the jQuery( document ).ready() Function: 
    <script src="jquery.js"></script>
    <script src="prototype.js"></script>
    <script>
        jQuery(document).ready(function ($) {
            // Your jQuery code here, using $ to refer to jQuery.
        });
    </script>
Creating a different alias for the first loaded jQuery version: 
var j = jQuery.noConflict();
window.jQuery = j;
j("#button172").jqxButton({ width: 150, height: 25 });
The following example demonstrates how jQWidgets work in No-Conflict mode. 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQWidgets in No-Conflict mode</title> 
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <!-- load jQuery 1.10.2 -->
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        //Create a New Alias
        var jQuery_1_10_2 = jQuery.noConflict();
    </script>
    <!-- load jQuery 1.11.1 -->
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        //Create a New Alias 
        var jQuery_1_11_1 = jQuery.noConflict();
        if (!window.jQuery) window.jQuery = jQuery_1_11_1;
    </script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type='text/javascript'>
        jQuery_1_11_1(document).ready(function ($) {
            // Create jqxButton 
            $("#jqxbutton1111").jqxButton({ width: 150, height: 25 });
            $("#jqxbutton1111").on('click', function () {
                alert($.fn.jquery);
            })
        });
    </script>
</head>
<body>
    <div id='content'>
        <div style='width: 150px;' id='jqxWidget'>
           <div>
                <input type="button" value="Use jQuery 1.11.1" id='jqxbutton1111' />
           </div>
        </div>
    </div>
</body>
</html>