show-notice
hide-notice

Tuesday 6 August 2013

id selector(#id) in jquery


Introduction:

jQuery uses id attribute to identify each unique element throughout the page.

Example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function (){
    /* select elements and assign to variables */
    var t1 = $("#text1"), t2 = $("#text2"), t3 = $("#text3");
    var b1 = $("#btn1"), b2 = $("#btn2"), b3 = $("#btn3"), b4 = $("#btn4");
 
    /* bind click event */
    b1.click(function(){   
        t1.css("color", "orange");       /* change color of text1 to orange */
    });   
 
    b2.click(function(){   
        t2.css("font-style", "italic");  /* change font size of text1 to 18px */
    });   
 
    b3.click(function(){   
        /* change text of text3 */
        t3.text("George did not give them back car and house");
        t3.css("font-size", "20px");
    });   
 
    b4.click(function(){   
        t1.removeAttr("style"); /* remove all css */
        t2.removeAttr("style");
        t3.removeAttr("style");
        t3.text("George borrows car and house from them");
    });   
});
</script>
 
<!-- HTML -->
<a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634" name="#id-selector"></a>
<div id="text1">
Jhonny has a car</div>
<div id="text2">
Marry has a house</div>
<div id="text3">
George borrows car and house from them</div>
<button id="btn1" type="button">Select text1</button>&nbsp;
<button id="btn2" type="button">Select text2</button>&nbsp;
<button id="btn3" type="button">Select text3</button>&nbsp;
<button id="btn4" type="button">Reset</button>





SHARE THIS POST   

0 comments :

Post a Comment

Design by Gohilinfotech | www.gohilinfotech.blogspot.com