Hello All, We are going to start new batch from next week. message/call or mail us for more details.

7 September 2013

JQuery append() method

JQuery append () method is used to add or insert one or more additional DOM elements in the set of matched elements .In this article I am trying to show you,  how we can use append method in JQuery.  I have list of images and I want to append image in <label> element.

Code:

 
<title>JQeury append method</title>
 
    <script type="text/javascript" src="jquery.min.js">     </script>
 
    <script type="text/javascript">
        $(document).ready(function()  
        {
            $("button#btn1").click(function
            {
            $("label").append("<img src='Desert.jpg' width='100' height='50'/>"); // append method will append image in <label> element
            });
            $("button#btn2").click(function
             {
            $("label").append("<img src='Chrysanthemum.jpg' width='100' height='50'/>");
            });
            $("button#btn3").click(function()
           {
            $("label").append("<img src='Lighthouse.jpg' width='100' height='50'/>");             });
 
        });
        
    </script>
</head>
<body>
    <h2>
        JQuery append method</h2>
    <table width="200" border="2">
        <tr>
            <td align="center">
                <img src='Chrysanthemum.jpg' width='100' height='50'             </td>
            <td align="center">
                <button id='btn1'>
                    Add</button>
            </td>
        </tr>
        <tr>
            <td align="center">
                <img src='Desert.jpg' width='100' height='50' />
            </td>
            <td align="center">
                <button id="btn2">
                    Add</button>
            </td>
        </tr>
        <tr>
            <td align="center">
                <img src='Lighthouse.jpg' width='100' height='50' />
            </td>
            <td align="center">
                <button id="btn3">
                    Add</button>
            </td>
        </tr>
    </table>
    <label style="left:245px; top:62px; position:absolute">This is a example
    of JQuery append method you can add image from list--  </label> label element with text-->
</body>

Screenshot

JQuery append() method
If we want to append image in the <label>element we can click on particular image button and image will append as shown below:

Screenshot

JQuery append() method

JQuery noConflict method

In JQuery generally ($) dollar sign is an indication of using JQuery function but jQuery give us functionality to rename ($) dollar sign instead of other user define variable name. By using noConflict () method, user can define own variable name. In this article I am trying to show you, how we can use noConflict method in JQuery as shown below:

Syntax: var xyz=$.noConflict ();

Code:

    <title>JQuery noConflict method</title>
 
    <script type="text/javascript" src="jquery.min.js">     </script>
    <script type="text/javascript">
        var userdefine = $.noConflict();//creating user define varaible
        userdefine(document).ready(function() {
        userdefine("label").append("JQuery dollar($)sign has changed from user define variable name('userdefine'        });
    </script>
</head>
<body>
    <h2>
        JQuery noConfilct method</h2>
    <label>
    </label>
</body>
</html>

Screenshot

JQuery noConflict method

JQuery removeAttr () method

In JQuery removeAtrr () method is used to remove attributes from each matched elements. By using this method  we can create some custom attribute and remove  attributes in element .In this article I am trying to show you, how we can use removeAttr () method to remove attributes of element on page as shown below:

Syntax :$( “element”).removeAttr (“name”);

Code:

<title>JQuery removeAtrr method</title>
 
    <script type="text/javascript" src="jquery.min.js">//add jquery library in script tag
    </script>
 
    <script type="text/javascript">
        $(document).ready(function() //ready function contain all jquery function
        {
            $("#rcolor").click(function()            {
                $("input").removeAttr("style");//removeAttr method will remove style attribute from all input tags
            });
        });
    </script>
</head>
<body>
    <table width="275" border="2" >         <tr>
            <td align="center">
               <label>Name</label>
            </td>
            <td align="center">
                <input type="text" style="color: Red">
            </td>
          </tr>
           <tr>
            <td align="center">
                <label>Age</label>
            </td>
            <td align="center">
                <input type="text" style="color: Red">
            </td>
          </tr>
           <tr>
            <td align="center">
               <label>City</label>
            </td>
            <td align="center">
                <input type="text" style="color: Red">
            </td>
          </tr>
           <tr>
            <td align="center">
                <label>College</label>
            </td>
            <td align="center">
                <input type="text" style="color: Red">
            </td>
          </tr>
    </table>
    <button>
        Submit</button>
    &nbsp;&nbsp; <button id="rcolor">
        Remove Color</button><!—button element with id-->
</body>

Screenshot

jQuery removeAttr method
If we want to remove font color from textboxes click on remove color button and red color will remove from font as shown below:
jQuery removeAttr method

blur method in JQuery

In JQuery blur method trigger blur event when element will lose their focus. In this article I am using blur () method on html page. In html page I had created some text boxes, if any textboxes got focus then back color of textboxes will white and if textboxes lost their focus then textboxes back color will change, as shown by below example:

Code:

<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function()
         {
             $("input").focus(function() //focus method will execute when input element got focus            {
                $("input").css("background-color", "white");//when input element got focus backcolor will white
            });
            $("input").blur(function() //when input element lost its focus blur event will raise
            {
                $("input").css("background-color", "gray // css will change backcolor of textboxes
            });
        });
    </script>
</head>
<body>
<h2>Using JQuery blur event </h2>
    Enter name:
    <input type="text" /><!-- input element for textboxes-->
    <br />
    <br />
    Enter age: <input type="text" />
    <br />                            
    <br />
    Enter City<input type="text" />
    <br />
    <br />
    Enter State<input type="text" />
    <br />
    <br />
   
    <button>Submit</button>
</body>
</html>
If textboxes got focus backcolor will white as shown below:

blur method in JQuery
If textboxes lost their focus back color of textboxes will change as shown below:

blur method in JQuery

JQuery fadeTo method

In JQuery fadeTo () method used to fade element on page. In this article I am trying to show you, how we can implement fadeTo method on the page. For example I have two images on page and I want to images fade from page to given opacity.

Syntax: $(“target”).fadeTo (Time duration, Opacity);
Time duration=Pass time duration in string (“fast or medium or slow”)
Opacity=Opacity should be between 0 and 1.

Code:

  <script type="text/javascript" src="jquery.min.js">
 
    <script type="text/javascript">
        $(document).ready(function        {
            $("button").click(function            {
                $("img").fadeTo("medium", 0.15); //img will fade by using fadeTo function given time duration and opacity
            });
        });
    </script>
 
</head>
<body>
    <h2>
        Jquery fadeTo method</h2>
    <table width="300">
        <tr>
            <td>
                <img src="Desert.jpg" width="200" height="100" />
            </td>
            <td>
                <img src="Jellyfish.jpg" width="200" height="100" >            </td>
        </tr>
        <tr>
            <td align="center" colspan="2">
                <button>
                    Click to fade</button>
            </td>
        </tr>
    </table>
</body>
 

Screenshot

JQuery fadeTo method
When I will click on button image will be start to fade from page as shown below:

Screenshot

JQuery fadeTo method