DotNet Brother - .Net Online Training : 09/07/13

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>

$(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>

<tr>

Add</button>

</td>

</tr>

<tr>

</td>

Add</button>

</td>

</tr>

<tr>

</td>

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

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 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>

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 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>

$(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>

</td>

</td>

</tr>

<tr>

</td>

</td>

</tr>

<tr>

</td>

</td>

</tr>

<tr>

<label>College</label>

</td>

</td>

</tr>

</table>

Submit</button>

Remove Color</button><!—button element with id-->

</body>

Screenshot

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

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>

$(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:

<br />

Enter age: <input type="text" />

<br />

Enter City<input type="text" />

<br />

Enter State<input type="text" />

<br />

<button>Submit</button>

</body>

</html>

If textboxes got focus backcolor will white as shown below:

If textboxes lost their focus back color of textboxes will change as shown below:

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:

$(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>

<tr>

<td>

</td>

<td>

</tr>

<tr>

Click to fade</button>

</td>

</tr>

</table>

</body>

Screenshot

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

7 September 2013

JQuery append() method

Code:

Screenshot

Screenshot

JQuery noConflict method

Code:

Screenshot

JQuery removeAttr () method

Code:

Screenshot

blur method in JQuery

Code:

JQuery fadeTo method

Code:

Screenshot

Screenshot