You can access the jQuery library’s properties and methods using the jQuery function. One of the most commonly used methods is ready(), which accepts a function parameter and binds it to the document’s ready event. 

The syntax is as follows:

     jQuery(document).ready(function ()
 {  
 // Code segment to execute when document is ready  
 // (i.e., when DOM is completely created)
 });

  In place of jQuery, you can use its shorthand $. Using $, you can rewrite the previous code as:

$(document).ready(function ()
 {   
// Code segment to execute when document is ready   
// (i.e., when DOM is completely created) 
 }); 
 The previous code can also be written as:  
$(function () 
{   
// Code segment to execute when document is ready   
// (i.e., when DOM is completely created) 
});
 
which has the same effect as the original code. If you are using some other JavaScript library that also uses $ as shorthand, in order to prevent a conflict between the JavaScript libraries, you should instead set your own shorthand (for example, jq) for the jQuery library by using the following code: 
 var jq = jQuery.noConflict();

jQuery Function Arguments

The following is the list of jQuery function’s ($) arguments and their purposes: 

•$(function)—
A code segment in the specified function is executed when the DOM is ready. 
The following is the syntax to define the DOM-ready function:
 $(function() { ... });
When you specify a function and its code, you are just defining the function and logic in it. It won’t be executed until the document-ready event is triggered. If you use a function name in its place, that function is executed immediately when the browser interprets the line, without waiting for the DOM to be ready.
Using the jQuery function ($) with the function as an argument is the most used feature in the jQuery. If the code is accessing or manipulating DOM elements, then that code must be defined inside this function. The body of the function will be executed only when all the DOM elements are created and are ready to be used.  
EXAMPLE :
<!DOCTYPE html>
 <html lang="en">
 <head>  
 <meta charset="utf-8">  
 <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script>              
$(function() 
{                   
 alert("DOM is ready. Now, we can perform actions on HTML Elements in this page."); 
});   
</script> 
</head>
<body>
 </body> 
</html>

ABOVE CODE EXAMPLE:

This jQuery code is binding function() {...} to the document ready event. After the DOM is ready, this function will be executed. Such functions, which are bound to events, are also called event handlers.

 • $("selector")—
Selects HTML elements that match the specified selector and returns a jQuery object. 
Using a jQuery function with the selector as an argument enables you to select DOM elements that match the selector, so that selected elements’ values can be accessed and/or manipulated by using jQuery object’s methods.  
EXAMPLE:
<!DOCTYPE html> 
<html lang="en">
<head>   
<meta charset="utf-8">   
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script>             
 $(function() 
{                
$("img").mouseover(function () {                    $(this).css("opacity", "0.3");                 
});                
$("img").mouseout(function () {                    $(this).css("opacity", "1.0");                
});              
});   
</script> 
</head> 
<body>   
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpMiyw-KDJeZkgB7vwTa3nc8ZZU5IbCS41fOVLUFzb1WejMUJTgVEK0lJ2gAxS6XX1fK1_B3PmX0DXUvzxYQK0Uu7OKhei0lRU9bFvEAjYcDT1vHgeRYjFq5KEKCJW6dcuNH5ln6ORSAY/h120/jquery1.PNG"> 
</body> 
</html>

This code has an image tag. Inside the DOM-ready function, this image is selected by the jQuery selector, $("img"), and then a function is bound to its mouseover event. When the mouse moves over the image, the mouseover event is triggered and this function is executed, which changes the opacity of the image to 0.3. Opacity can range from 0 to 1. The higher the number, the sharper the image will be. Another function is bound to the mouseout event, and it changes the opacity to its default value of 1.

•$(HTMLElement)—
Returns a jQuery object with the specified HTMLElement in it.
Using a jQuery function with the HTML element as an argument enables you to put an HTML element into a jQuery object so that the jQuery object’s methods can be executed on the HTML element, in order to access or manipulate its value.  
EXAMPLE:
<!DOCTYPE html>
<html lang="en"> 
<head>   
<meta charset="utf-8">   
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script>     
$(function() 
{                            
var currentDateTime = document.getElementById("currentDatetime");                            $(currentDateTime).prop("innerHTML", new Date());
});      
</script> 
</head> 
<body>   
<div id="currentDatetime"></div> 
</body> 
</html>

EXAMPLE:

In this code, a div tag is created with the currentDateTime ID. When the DOM is ready, the document-ready function is executed, which gets the HTMLElement from the DOM using the statement $("#currentDatetime").first(). The same HTML element can be selected by using the native DOM method called document.getElementById ("currentDatetime"). In the $(currentDateTime) statement, the HTMLElement currentDateTime is passed to the jQuery function ($) as an argument. The jQuery object is returned due to this statement. On this jQuery object,  the prop() method is executed to set its innerHTML property with the current system date and time.

• $(HTMLElement[])—Returns a jQuery object with the HTML elements specified in the HTMLElement[] array.

 • $("HTMLString")—Creates new HTML elements from the specified HTMLString.
Using a jQuery function with the HTML string as an argument enables you to convert an HTML string into a jQuery object so that the jQuery object’s methods can be applied to the HTML elements in the jQuery object or it can be appended to an existing element.
 
EXAMPLE: 
<!DOCTYPE html>
 <html lang="en">
 <head>   
<meta charset="utf-8">   
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script>     
 $(function() {         
var newDepartment = $("<li>Implementation</li>")         $("#listDepartments").append(newDepartment);      
});      
</script> 
</head> 
<body>    
Departments:    
<ul id="listDepartments">      
<li>Sales</li>      
<li>Marketing</li>
<li>Technology</li>      
<li>Customer Support</li>    
</ul> 
</body> 
</html>

EXAMPLE3:
Departments:
  • Sales
  • Marketing
  • Technology
  • Customer Support

In this code when an HTMLString called "<li>Implementation</li>" is passed to the jQuery function ($), an HTMLElement is created. This new <li> element (newDepartment) can be appended to an existing list of departments by executing the method append() on the, $("#listDepartments") jQuery object. listDepartments is the ID of the <ul> tag. Due to the statement $("#listDepartments").append(newDepartment), a new department ("Implementation") is added to the list of existing departments at runtime.

No comments:

Post a Comment