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