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> <button id="btn2" type="button">Select text2</button> <button id="btn3" type="button">Select text3</button> <button id="btn4" type="button">Reset</button>
0 comments :
Post a Comment