|
||||||
|
Intro Beberapa waktu yang lalu kita mencoba mereview web aplication yang telah kita buat. Sampai akhirnya pada menu reporting, saya buka salah satu report lalu saya cermati, kok terlikhat ada yang kurang. dengan tampilan seperti ini tentunya user akan sulit menentukan satu kesatuan record dalam 1 baris. Saya berfikir akan lebih baik kalau kita bisa […] Mengenal Selector JQuery Basic Filter (:odd) match odd elements <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("tr:odd").css("background-color", "#bbbbff"); }); </script> <style> table { background:#f3f7f5; } </style> </head> <body> <table border="1"> <tr><td>Row with Index #0</td></tr> <tr><td>Row with Index #1</td></tr> <tr><td>Row with Index #2</td></tr> <tr><td>Row with Index #3</td></tr> </table> </body> […] match even elements <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("tr:even").css("background-color", "#bbbbff"); }); </script> <style> table { background:#eeeeee; } </style> </head> <body> <table border="1"> <tr><td>Row with Index #0</td></tr> <tr><td>Row with Index #1</td></tr> <tr><td>Row with Index #2</td></tr> <tr><td>Row with Index #3</td></tr> </table> </body> </html> Perintah $(“tr:even”).css(“background-color”, “#bbbbff”); tadinya saya […] Filters out all elements matching the given selector. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("input:not(:checked) + span").css("background-color", "yellow"); $("input").attr("disabled", "disabled"); }); </script> </head> <body> <div> <input type="checkbox" name="a" /> <span>Mary</span> </div> <div> <input type="checkbox" name="b" /> <span>Paul</span> </div> <div> <input type="checkbox" name="c" checked="checked" /> <span>Peter</span> </div> </body> […] matches the last selected element. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("tr:last").css({backgroundColor: ‘yellow’, fontWeight: ‘bolder’}); }); </script> </head> <body> <table> <tr><td>First Row</td></tr> <tr><td>Middle Row</td></tr> <tr><td>Last Row</td></tr> </table> </body> </html> Perintah $(“tr:last”).css({backgroundColor: ‘yellow’, fontWeight: ‘bolder’}); digunakan untuk menset css backgroundColor: ‘yellow’, fontWeight: ‘bolder’ pada tr paling akhir suatu […] :first Match the first selected element. Pertandingan pertama elemen yang dipilih. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("tr:first").css("font-style", "italic"); }); </script> <style> td { color:blue; font-weight:bold; } </style> </head> <body> <table> <tr><td>Row 1</td></tr> <tr><td>Row 2</td></tr> <tr><td>Row 3</td></tr> </table> </body> </html> Perintah $(“tr:first”).css(“font-style”, “italic”); digunakan untuk menset font-style=italic […] Prev ~ Sibling Matches all sibling elements after the “prev” element that match the filtering “siblings” selector. Cocokkan semua elemen saudara kandung setelah “prev” elemen yang cocok dengan penyaringan “saudara kandung” pemilih. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("#prev ~ div").css("border", "3px groove blue"); }); </script> <style> […] Perintah $(“label + input”).css(“color”, “blue”).val(“Labeled!”) digunakan untuk menset value seluruh element input yang dituliskan berada disamping element label yang ada di document HTML, valuenya diset = Labeled! Prev + next Matches all next elements specified by “next” that are next to elements specified by “prev”. Terjemahan googlenya Cocokkan semua elemen berikutnya ditentukan oleh “di samping” […] Matches all child elements specified by “child” of elements specified by “parent”. Terjemahan google Cocokkan semua elemen anak ditentukan oleh “anak” dari unsur ditentukan oleh “orang tua”. Bingung yah, nggak usah bingung, kita langsung praktek saja <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("#main > *").css("border", "3px double […] ancestor descendant Matches all descendant elements specified by “descendant” of elements specified by “ancestor”, coba terjemahkan pakai google translate artinya Cocokkan semua unsur keturunan ditentukan oleh “keturunan” dari unsur ditentukan oleh “nenek moyang” wah bingung yah. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("form input").css("border", "2px dotted blue"); […] |
||||||
|
Powered by WordPress & Atahualpa |
||||||
