Monday, March 25, 2013

Simple JQuery Examples

12:33 AM  BlessyAlexander  No comments

jQuery online training with examples
Simple JQuery Examples


Hello World Example
<html>
<head>
<title>jQuery Hello World</title>

<script type="text/javascript" src="jquery-1.4.2.js"></script>

</head>

<script type="text/javascript">

$(document).ready(function(){
 $("#flag").html("Hello World !! (display due to jQuery)");
});

</script>
<body>
<font color=red>
Hello World !! (display due to HTML)
</font>
<font color=blue>
<div id="flag">
</div>
</font>
</body>
</html>

Hello world alert box example
<html>

<head>
<title>jQuery Hello World Alert box</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
 <script type="text/javascript">
$(document).ready(function(){
$("#cl").click(function(){
alert("HELLO WORLD!");
});
});
</script>
<body>
<font color="red">CLICK BELOW BUTTON TO SEE ALERT BOX</font>
<br>
<br>
<button id="cl">Click Me</button>
</body>
</html>


Preloading Images Using jQuery
It is always a good practice to preload images, because is speeds up the rendering of Web pages. The following piece of code preloads images using jQuery:

jQuery.preloadImages = function()
{
  for(var x = 0; x").attr("src", arguments[x]);
}};


 Disabling the Context Menu Using jQuery
The following code snippet illustrates how you can disable the context menu in jQuery:

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

Adding and Removing CSS Class in jQuery
It is easy to add and remove CSS classes in jQuery.

//To add a css class, you can use the following piece of code
if($(id).hasClass('testClass'))
{
 $('#div1').addClass('testclass'); 
}

//To remove a css class, you can use the following piece of code
if($(id).hasClass('testClass'))
{
 $('#div1').removeClass('testclass'); 
}


Checking If a Particular Element Is Available
You can easily check whether an element exists in a Web page using jQuery. Here is an example:

if ($('img').length)
{ 
    alert('Image elements available'); 
}
else
{ 
    alert('Image elements not available'); 
}

Detect Browser Type Using jQuery
Different browsers execute scripts differently, but you can easily detect browser type in jQuery and then execute your custom code accordingly. Here is how you can detect browser type:
if (jQuery.browser.mozilla)
{
    // Code to execute if browser is Mozilla
}
if (jQuery.browser.msie)
{
    // Code to execute if browser is IE
}

if (jQuery.browser.safari)
{
    // Code to execute if browser is Safari
}
if (jQuery.browser.opera)
{
    // Code to execute if browser is Opera
}


 Find Hidden Elements Using jQuery
You can use the Size() method to determine whether any DOM elements are hidden. Here is an example:

if( $("div.hidden").size)
{
  alert('One or more divs are hidden');
}

You can achieve the same result using the length() function as well. Note that the Size() function uses the Length() function internally. Hence, it works faster.
if( $("div.hidden").length )
{
  alert('One or more divs are hidden');
}

Retrieve the Parent Element of an Element
It is easy to retrieve the parent element of an element in jQuery. All you have to do is use the closest() method as shown below:

var id = $("btnHello").closest("div").attr("id");

 Use Chaining in jQuery Properly
Chaining is a great jQuery feature. It facilitates a list of actions that are executed one after the other. You can use it to chain methods, as shown in the code snippet below:

$('div1').removeClass('color').addClass('no-color');

Manipulating Select List with jQuery
JQuery makes working with a Select List easy. You can easily remove an option from a Select List. Here's how:

$("#employeeList option[value='9']").remove();


Retrieve the selected option from a Select List as text


The following code snippet illustrates how you can retrieve the selected option from a Select List as text:

$('#employeeList :selected').text();

 use jQuery to change the background color of ASP.NET TextBox controls to yellow when they have focus. 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowjQuery.aspx.cs" Inherits="ShowjQuery" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head runat="server">
    <title>Show jQuery</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
        <asp:TextBox ID="txtFirstName" runat="server" />
        <br />
        <asp:TextBox ID="txtLastName" runat="server" />
    </div>
    </form>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 
    <script type="text/javascript">
    
        $("input").focus( function() { $(this).css("background-color", "yellow"); });
    
    </script>
</body>
</html>

Posted in: ,

0 comments:

Post a Comment