Tutorial jQuery 7 : Selection dan Modifikasi Atribut
Tutorial selanjutnya adalah melakukan modifikasi atribut. Method yang akan kita bahas di tutorial ini adalah attr(), add(), remove() dan event mouseover dan mouseleave. index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Selection and Attribute Modification</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1 id="title">Instruction for Changing Tire</h1> <img src="img/contohstempel.png" alt="" id="the_img" width="20%" height="20%" /> <h3>How to Change Tire</h3> <p>We'll go over the steps for changing a tire </p> <p class="instruct_title">Incase of flat tire.</p> <ul id="steps"> <li class="important">Park Vehicle Safety</li> <li>Retrieve Jack and attach to vehicle frame</li> <li>Untighten tire bolts</li> <li class="important">Raise vehicle by cranking jack</li> <li>Unscrew bolts and attach replacement tire</li> <li class="important">Tighten the bolts</li> <li>Lower vehicle and tighten bolts completely</li> </ul> <div id="closing_statement"> <p>Make sure to put away the tools</p> </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/jquery_custom_code.js"></script> </body> </html> |
jquery_custom_code.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
$(document).ready(function(){ // $("p.instruct_title, div#closing_statement, h3").css("color", "red"); $("p.instruct_title").add("div#closing_statement").add("h3").css("color", "red"); $("li.important").on("mouseover", function(){ $(this).attr("id", "big"); $(this).on("mouseleave", function(){ $(this).attr("id", "small"); }); }); $("h1#title").on("click", function(){ $(this).attr("class", "pretty border"); }); $("img#the_img").on("click", function(){ // $(this).attr("width", "40%"); // $(this).attr("length", "40%"); // $(this).attr("width", "40%").attr("length", "40%"); $(this).attr({ "width" : "40%", "length" : "40%" }); }); $("img#the_img").on("dblclick", function(){ // $(this).removeAttr("src"); $(this).remove(); }); }); |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#big { font-size: 2em; font-weight: bold; } #small { font-size: 1em; } .pretty { color: pink; font-style: italic; } .border { border-style: dashed; border-color: yellow: } |
Result Mari kita bahas satu-satu arti dari kode yang ada di jquery_custom_code.js
|
1 |
$("p.instruct_title, div#closing_statement, h3").css("color", "red"); |
Untuk setiap paragraf yang mempunyai class ‘instruct_title’, untuk setiap div yang mempunyai id ‘closing_statement, dan h3, beri warna merah. Read more about Tutorial jQuery 7 : Selection dan Modifikasi Atribut[…]