Friday, 3 June 2016

Cara Menggunakan Each Function Dalam JQuery

Kali ini saya akan menjelaskan cara menggunakan JQuery each function. JQuery each function digunakan untuk memberi fungsi dari sebuah elemen dan diulang sejumlah elemen tersebut hingga semua elemen mempunyai fungsi.

Syntax yang digunakan

Untuk mencari index dan elemen yang sedang dieksekusi

$('li').each(function(index, element){
alert(index, + ' : ' + $(element).text());
});

Catatan : index dan isi dari sebuah elemen itu sendiri akan dikirim ke anonymous function tepat setelah each function dijalankan/dieksekusi.

Untuk mencari elemen saja, dapat menggunakan syntax dibawah ini

$('li').each(function(){
alert($(this).text())
});

Untuk stop dari each function dapat menggunakan return false;

$('li').each(function(){
if($(this).text() == "Thailand"){
return false; }
});

Menggunakan each function dengan mengetahui index dan elemen yang sedang dijalankan

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
           $('#btnSubmit').click(function(){
               $('li').each(function(index, element){
                   alert(index + " : " + $(element).text());
               });
           });
        });
        </script>
    </head>
    <body>
     <ul>
     <li>Indonesian</li>
     <li>Malaysian</li>
     <li>Singapore</li>
     <li>Thailand</li>
     <li>Myanmar</li>
     <li>Brunei Darussalam</li>
     </ul>
     <input type="button" id="btnSubmit" value="Execute"/>
    </body>
</html>

Menggunakan each function dengan mengetahui elemen yang sedang dijalankan

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
           $('#btnSubmit').click(function(){
               $('li').each(function(){
                   alert($(this).text());
               });
           });
        });
        </script>
    </head>
    <body>
     <ul>
     <li>Indonesian</li>
     <li>Malaysian</li>
     <li>Singapore</li>
     <li>Thailand</li>
     <li>Myanmar</li>
     <li>Brunei Darussalam</li>
     </ul>
     <input type="button" id="btnSubmit" value="Execute" /> 
    </body>
</html>

Cara stop dalam each function

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('#btnSubmit').click(function(){
                $('li').each(function(){
                    if($(this).text() == "Thailand"){
                        return false;
                     }
                    alert($(this).text());
                });
             });
        });
        </script>
    </head>
    <body>
     <ul>
     <li>Indonesian</li>
     <li>Malaysian</li>
     <li>Singapore</li>
     <li>Thailand</li>
     <li>Myanmar</li>
     <li>Brunei Darussalam</li>
     </ul>
     <input type="button" id="btnSubmit" value="Execute" /> 
    </body>
</html>

Performa dalam menggunakan JQuery each function :

JQuery perlu mencari DOM untuk elemen div dengan id = divResult, untuk setiap daftar item dalam list(koleksi). Kinerja dapat ditingkatkan menggunakan "caching divResult elemen".
DOM elemen diperbarui pada setiap perulangan each function. Untuk meningkatkan kinerja bangunlah sebuah variable String dengan data yang dibutuhkan dan kemudian perbaru elemen DOM di luar perulangan. Hal ini memastikan bahwa elemen DOM hanya sekali diperbarui.

Penggunaan Awal

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
     $('#btnSubmit').click(function(){
  $('li').each(function(){
      $('#divResult').html($('#divResult').html() + "<br/>" + $(this).text());
  });
     });
        });
        </script>
    </head>
    <body>
 <ul>
     <li>Indonesian</li>
     <li>Malaysian</li>
     <li>Singapore</li>
     <li>Thailand</li>
     <li>Myanmar</li>
     <li>Brunei Darussalam</li>
 </ul>
 <input type="button" id="btnSubmit" value="Execute" /> <br/>
 <div id="divResult"></div>
    </body>
</html>

Penggunaan yang dapat meningkatkan performa

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('#btnSubmit').click(function(){
                var result = '';
                $('li').each(function(){
                result += "<br/>" + $(this).text();
                });
                $('#divResult').html(result);
            });
        });
        </script>
    </head>
    <body>
     <ul>
     <li>Indonesian</li>
     <li>Malaysian</li>
     <li>Singapore</li>
     <li>Thailand</li>
     <li>Myanmar</li>
     <li>Brunei Darussalam</li>
     </ul>
     <input type="button" id="btnSubmit" value="Execute" /> <br/>
     <div id="divResult"></div>
    </body>
</html>

Cara Menggunakan Disabled dan Enabled Selector dalam JQuery

00:13 Unknown JQuery No comments

Kali ini saya akan menjelaskan cara penggunaan Disabled dan Enabled Selector dalam JQuery. Disabled Selector digunakan untuk memilih elemen yang mempunyai atribut disabled , sedangkan Enabled Selector digunakan untu kemmeilih elemen yang mempunyai atribut enabled.

Syntax yang digunakan

Selector	Syntax	Keterangan
Disabled Selector	$(':disabled')	Untuk memilih semua elemen yang mempunyai atribut disabled

Enabled Selector	$(':enabled')	Untuk memilih semua elemen yang mempunyai atriubt enabled

Memilih semua elemen disabled dan memberi warna border

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
     $(":disabled").css("border","3px solid blue");
        });
        </script>
    </head>
    <body>
    <table>
        <tr>
            <td>First Name :</td>
            <td><input type="text" disabled placeholder="First Name"/></td>
        </tr>
        <tr>
            <td>Last Name :</td>
            <td><input type="text" disabled placeholder="Last Name"/></td>
        </tr>
        <tr>
            <td>Address :</td>
            <td><input type="text" placeholder="Address"/></td>
        </tr>
        <tr>
            <td>Note :</td>
            <td><textarea> </textarea></td>
        </tr>
        <tr>
            <td><input disabled="" type="button" value="Submit" /></td>
        </tr>
        </table>
    </body>
</html>

Memilih semua elemen input text disabled dan memberi warna border.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
     $('input[type="text"]:disabled').css("border","3px solid blue");
        });
        </script>
    </head>
    <body>
 <table>
            <tr>
  <td>First Name :</td>
  <td><input type="text" disabled placeholder="First Name"/></td>
     </tr>
            <tr>
  <td>Last Name :</td> 
  <td><input type="text" disabled placeholder="Last Name"/></td>
     </tr>
            <tr>
  <td>Address :</td>
  <td><input type="text" placeholder="Address"/></td>
     </tr>
            <tr>
  <td>Note :</td>
  <td></td>
            </tr>
            <tr>
                <td><input disabled="" type="button" value="Submit" /></td>
            </tr>
        </table>
    </body>
</html>

Memilih semua elemen enabled dan memberi warna border

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
     $(':enabled').css("border","3px solid red");
        });
        </script>
    </head>
    <body>
 <table>
            <tr>
  <td>First Name :</td>
  <td><input type="text" disabled placeholder="First Name"/></td>
     </tr>
            <tr>
  <td>Last Name :</td>
  <td><input type="text" disabled placeholder="Last Name"/></td>
     </tr>
            <tr>
  <td>Address :</td>
  <td><input type="text" placeholder="Address"/></td>
     </tr>
            <tr>
  <td>Note :</td>
  <td><textarea> </textarea></td>
            </tr>
            <tr>
                <td><input disabled="" type="button" value="Submit" /></td>
            </tr>

Memilih elemen textarea enabled dan memberi warna border

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
     $('textarea:enabled').css("border","3px solid red");
        });
        </script>
    </head>
    <body>
 <table>
            <tr>
  <td>First Name :</td>
  <td><input type="text" disabled placeholder="First Name"/></td>
     </tr>
            <tr>
  <td>Last Name :</td>
  <td><input type="text" disabled placeholder="Last Name"/></td>
     </tr>
            <tr>
  <td>Address :</td>
  <td><input type="text" placeholder="Address"/></td>
     </tr>
            <tr>
  <td>Note :</td>
  <td><textarea> </textarea></td>
            </tr>
            <tr>
                <td><input disabled="" type="button" value="Submit" /></td>
            </tr>

Pengertian, Contoh dan Penjelasan JQuery #Id Selector

23:18 Unknown JQuery No comments

Kali ini saya akan menjelaskan secara detil tentang selector #Id dalam JQuery, dan artikel ini adalah lanjutan dari artikel sebelumnya yang berjudul "Apa itu JQuery Selector". Dan dibawah ini adalah inti inti penting yang telah saya ringkas sedemikian rupa untuk menghemat waktu belajar anda.

JQuery #Id Selector menggunakan fungsi document.getElementById() yang ada pada JavaScript.
JQuery #Id Selector adalah selector yang paling efisien dibanding JQuery Selector lainnya, ini dikarenakan jika kita mengetahui id dari sebuah elemen, kita tinggal memanggil idnya dan menggunakannya.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("#button1").click(function(){
                alert('Button 1 DiKlik!');
            });
            $("#button2").css("background-color","green");
        });
        </script>
    </head>
    <body>
        <input type="button" id="button1" value="Button 1"/>
        <input type="button" id="button2" value="Button 2"/>
    </body>
</html>

Elemen HTML yang mempunyai ID harus unik(tidak ada id yang sama antara elemen yang satu dengan yang lainnya) dalam sebuah halaman, jika ada yang sama maka JQuery #Id Selector hanya akan memproses elemen yang pertama.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("#button1").click(function(){
                alert('Button DiKlik!');
            });
            $("#button1").css("background-color","yellow");
        });
        </script>
    </head>
    <body>
        <input type="button" id="button1" value="Button 1"/>
        <input type="button" id="button1" value="Button 2"/>
    </body>
</html>

Fungsi JavaScript document.getElementById() menghasilkan error jika elemen dengan id yang dicari tidak ditemukan, lain halnya dengan JQuery #Id Selector, ia tidak akan menghasilkan error. Untuk mengecek jika sebuah elemen ditemukan, kita bisa menggunakan fungsi length dari JQuery.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("#button1").click(function(){
                alert($("#cari").length);
            });
        });
        </script>
    </head>
    <body>
        <input type="button" id="button1" value="Klik disini untuk menemukan length id yang dicari"/>
        <p id="cari"></p>
    </body>
</html>

JavaScript document.getElementById() dengan JQuery(#id) Selector tidaklah sama. document.getElementById() menghasilkan mentahan objek DOM(Document Object Model), sedangkan JQuery(#id) selector menghasilkan objek JQuery yang telah terbungkus objek DOM dan siap diberi method. Ini adalah alasan mengapa kita dapat memanggil method JQuery seperti css(), click(), trigger() di objek yang dihasilkan JQuery, untuk mendapatkan objek DOM pokok dari JQuery menggunakan

$("#id")[0];, [0] = urutan dari jumlah id (#id) yang tersedia.
atau
$("#id");

document.getElementById() membutuhkan waktu proses yang lebih singkat dibanding JQuery("#id") Selector. Biasakan menggunakan document.getElementById() dibanding JQuery("#Id") selector kecuali jika kita membutuhkan fungsi tambahan yang disediakan oleh JQuery tersendiri.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            var time = new Date();
            var start = time.getSeconds();
            var starts = time.getMilliseconds();
            document.getElementById("getElementById").innerHTML = "waktu proses doc.getElementById = " + (time.getSeconds() - start).toString()+ "," + (time.getMilliseconds() - starts).toString();
            $("#idSelector").text("waktu proses Jquery id selector = " + (time.getSeconds() - start).toString() + "," + (time.getMilliseconds() - starts).toString());
             
        });
        </script>
    </head>
    <body>
        <p id="getElementById"></p>
        <br/>
        <p id="idSelector"></p>
    </body>
</html>

Cara Menggunakan Selected Selector Dalam JQuery

23:17 Unknown JQuery No comments

Kali ini saya akan menjelaskan tentang Selected Selector JQuery. Apa itu Selected Selector? Selected Selector hampir sama fungsinya dengan Checked Selector, hanya saja Selected Selector digunakan untuk memilih option yang terseleksi.

Syntax yang digunakan :

$('#idSelect option:selected')

Menggunakan Selected Selector dalam single select dropdown

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('#option').change(function(){
                var selectedOpt = $('#option option:selected');
                $('#divResult').html("Value = "+ selectedOpt.val() + ", Text = " + selectedOpt.text());
            });
        });
        </script>
    </head>
    <body>
        Negara :
        <select id="option">
            <option valie="">Pilih NEgara</option>
            <option value="Indonesian">Indonesian</option>
            <option value="Malaysian">Malaysian</option>
            <option value="Singapore">Singapore</option>
            <option value="Thailand">Thailand</option>
            <option value="Myanmar">Myanmar</option>
        </select> 
        <div id="divResult"></div>
    </body>
</html>

Menggunakan Selected Selector dalam multiple select option

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('#option').change(function(){
                var selectedOpt = $('#option option:selected');
                if(selectedOpt.length > 0 ){
                    var resultStr = '';
                    selectedOpt.each(function(){
                        resultStr += "Value = "+ $(this).val() + ", Text = " + $(this).text() + "<br/>";
                    });
                    $('#divResult').html(resultStr);
                }
            });
        });
        </script>
    </head>
    <body>
        Negara :
        <select id="option" multiple="multiple">
            <option value="Indonesian">Indonesian</option>
            <option value="Malaysian">Malaysian</option>
            <option value="Singapore">Singapore</option>
            <option value="Thailand">Thailand</option>
            <option value="Myanmar">Myanmar</option>
        </select> 
        <div id="divResult"></div>
    </body>
</html>

Pengertian, Contoh, dan Penjelasan JQuery Class Selector

23:17 Unknown JQuery No comments

Kali ini saya akan menjelaskan secara detil tentang Class Selector dalam JQuery, dan artikel ini adalah lanjutan dari artikel sebelumnya yang berjudul "Apa itu JQuery Selector". Dan dibawah ini adalah inti inti penting dari tutorial yang telah saya ringkas.

Syntax yang digunakan :

$('.class')

JQuery Class Selector menggunakan fungsi native JavaScript getElementsByClassName()

$('.small'), // memilih semua elemen dengan class small
$('.small,.big'), // memilih semua elemen dengan class small atau big
$('div.small,.big'), // memilih div elemen dengan class small atau semua elemen dengan class big

Memilih semua elemen dengan class "small" dan memberi "2px border merah"

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $(".small").css("border","2px solid red");
        });
        </script>
    </head>
    <body>
        <span class="small">Span Class Small</span>
        <br/>
        <div class="small">Div Class Small</div>
        <br/>
        <span class="big">Span Class Big</span>
        <br/>
        <div class="big">Div Class Big</div>
    </body>
</html>

Memilih semua elemen dengan class "small" atau "big" dan memberi border 2px solid red.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $(".small, .big").css("border", "2px solid red");
        });
        </script>
    </head>
    <body>
        <span class="small">Span Class Small</span>
        <br/>
        <div class="small">Div Class Small</div>
        <br/>
        <span class="big">Span Class Big</span>
        <br/>
        <div class="big">Div Class Big</div>
    </body>
</html>

Memilih semua elemen dengan class small yang berada didalam elemen dengan id=#div2 dan memberi border 2px solid red.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("#div2 .small").css("border","2px solid red");
        });
        </script>
    </head>
    <body>
        <div id="div1" class="small">Div 1 </div>
        <br/>
        <div id="div2">
        Div 2
        <br/>
        <div class="small">Div 3 </div>
        <br/>
        <span class="small">Span</span>
        </div>
    </body>
</html>

Memilih semua elemen dengan class "small" dan memberi border 2px solid red. Catatan : div1 mempunyai 2 class, yaitu "small" dan "big"

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $(".small").css("border","2px solid red");
        });
        </script>
    </head>
    <body>
        <div class="small big">Div 1</div>
        <br/>
        <div class="small">Div 2 </div>
        <br/>
    </body>
</html>

Memilih semua elemen yang mempunyai class small dan big. Catatan: tidak boleh ada spasi antara nama class

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $(".small.big").css("border","2px solid red");
        });
        </script>
    </head>
    <body>
        <div class="small big">Div 1</div>
        <br/>
        <div class="small">Div 2 </div>
        <br/>
    </body>
</html>

fungsi filter

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $(".small").filter(".big").css("border","2px solid red");
        });
        </script>
    </head>
    <body>
        <div class="small big">Div 1</div>
        <br/>
        <div class="small">Div 2 </div>
        <br/>
    </body>
</html>

Pengertian, Contoh dan Penjelasan JQuery Element Selector

23:14 Unknown JQuery No comments

Kali ini saya akan menjelaskan secara detil tentang Element Selector dalam JQuery, dan artikel ini adalah lanjutan dari artikel sebelumnya yang berjudul "Apa itu JQuery Selector". Dan dibawah ini adalah inti inti penting dari tutorial yang telah saya ringkas.

Untuk memilih elemen berdasarkan tag nama menggunakan JQuery Elemen Selector

$('td'), // memilih semua elemen td
$('div a'), // memilih semua elemen a(anchor) yang merupakan child dari elemen div
$('div, span, a'), // memilih semua elemen div, span, dan a(anchor)

Memunculkan alert untuk menghitung total element td dalam sebuah halaman

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("#button1").click(function(){
                alert($('td').length);
            });
        });
        </script>
        <style>
            td{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <input type="button" id="button1" value="Klik disini untuk menghitung"/>
        <table>
            <tr>
                <td>C#</td>
                <td>C++</td>
                <td>Objective C</td>
                <td>C</td>
            </tr>
            <tr>
                <td>JavScript</td>
                <td>JQuery</td>
                <td>HTML</td>
                <td>PHP</td>
            </tr>
            <tr>
                <td>Java</td>
                <td>Ruby</td>
                <td>Phyton</td>
                <td>ASP.Net</td>
            </tr>
        </table>
    </body>
</html>

Memilih semua elemen tr dan mengubah warna background menjadi merah.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('tr').css('background-color', 'red');
        });
        </script>
        <style>
            td{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>C#</td>
                <td>C++</td>
                <td>Objective C</td>
                <td>C</td>
            </tr>
            <tr>
                <td>JavScript</td>
                <td>JQuery</td>
                <td>HTML</td>
                <td>PHP</td>
            </tr>
            <tr>
                <td>Java</td>
                <td>Ruby</td>
                <td>Phyton</td>
                <td>ASP.Net</td>
            </tr>
        </table>
    </body>
</html>

Memunculkan alert dengan isi dari sebuah tabel

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("#button1").click(function(){
                alert($('table').html());
            });
        });
        </script>
        <style>
            td{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <input type="button" id="button1" value="Klik disini untuk memunculkan alert!"/>
        <table>
            <tr>
                <td>C#</td>
                <td>C++</td>
                <td>Objective C</td>
                <td>C</td>
            </tr>
            <tr>
                <td>JavScript</td>
                <td>JQuery</td>
                <td>HTML</td>
                <td>PHP</td>
            </tr>
            <tr>
                <td>Java</td>
                <td>Ruby</td>
                <td>Phyton</td>
                <td>ASP.Net</td>
            </tr>
        </table>
    </body>
</html>

Memunculkan alert dengan isi dari setiap elemen tr dalam tabel

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("#button1").click(function(){
                $('table tr').each(function(){
                    alert($(this).html());
                });
            });
        });
        </script>
        <style>
            td{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <input type="button" id="button1" value="Klik disini untuk memunculkan alert!"/>
        <table>
            <tr>
                <td>C#</td>
                <td>C++</td>
                <td>Objective C</td>
                <td>C</td>
            </tr>
            <tr>
                <td>JavScript</td>
                <td>JQuery</td>
                <td>HTML</td>
                <td>PHP</td>
            </tr>
            <tr>
                <td>Java</td>
                <td>Ruby</td>
                <td>Phyton</td>
                <td>ASP.Net</td>
            </tr>
        </table>
    </body>
</html>

Mengganti warna background dari semua elemen div, span, dan anchor

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('div,span,a').css('background-color','yellow');
        });
        </script>
    </head>
    <body>
        <div>Div 1</div>
        <br/>
        <a href="#">Anchor 1</a><br/><br/>
        <a href="#">Anchor 2</a><br/>
        <div>Div 2</div>
        <br/><br/>
        <span>Span 1</span><br/>
        <div>Div 3</div>
    </body>
</html>

Memilih elemen anchor yang berada dalam div

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('div a').css('background-color','green');
        });
        </script>
    </head>
    <body>
        <div>
        <a href="#">Anchor 1</a></div>
        <br/><br/>
        <a href="#">Anchor 2</a><br/>
        <div>Div 2</div>
        <br/><br/>
        <span>Span 1</span><br/>
        <div>
        <a href="#">Anchor 3</a></div>
    </body>
</html>

Mengganti warna background table secara bergantian

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('#table1 tr:even').css('background-color', 'grey');
            $('#table1 tr:odd').css('background-color','lightgrey');
        });
        </script>
        <style>
            td{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table id="table1">
            <tr>
                <td>C#</td>
                <td>C++</td>
                <td>Objective C</td>
                <td>C</td>
            </tr>
            <tr>
                <td>JavScript</td>
                <td>JQuery</td>
                <td>HTML</td>
                <td>PHP</td>
            </tr>
            <tr>
                <td>Java</td>
                <td>Ruby</td>
                <td>Phyton</td>
                <td>ASP.Net</td>
            </tr>
        </table>
     </body>
</html>

Pengertian, Contoh, dan Penjelasan Attribute Value Selector dalam JQuery

23:10 Unknown JQuery No comments

Kali ini saya akan menjelaskan secara detil tentang Attribute Value Selector dalam JQuery, dan artikel ini adalah lanjutan dari artikel sebelumnya yang berjudul "Apa itu JQuery Selector". Dan berikut ini adalah hal-hal yang akan kita pelajari :

Macam-macam Attribute Value Selector dalam JQuery :

Attribute Equals Selector	[name="value"]

Attribute Contains Selector	[name*="value"]

Attribute Contains Word Selector	[name~="value"]

Attribute Contains Prefix Selector	[name\|="value"]

Attribute Starts With Selector	[name^="value"]

Attribute Ends With Selector	[name$="value"]

Attribute Not Equal Selector	[name!="value"]

Syntax yang digunakan :

$('[title="div1title"]')	Memilih semua elemen yang mempunyai nilai atribut sama dengan div1title

$('[title!="div1title"]')	Memilih semua elemen yang mempunyai nilai atribut tidak sama dengan div1title

$('[title*="testTitle"]')	Memilih semua elemen yang mempunyai nilai atribut mengandung substring testTitle

$('[title~="test"]')	Memilih semua elemen yang mempunyai nilai atribut mengandung kata test, dibatasi dengan spasi

$('[title\|="myTitle"]')	Memilih semua elemen yang mempunyai nilai atribut sama dengan myTitle atau berawalan myTitle yang diikuti dengan karakter hyphen(-)

$('[title^="Title"]')	Memilih semua elemen yang mempunyai nilai atribut berawalan Title

$('[title$="Title"]')	Memilih semua elemen yang mempunyai nilai atribut berakhiran Title

Contoh Attribute Equals Selector

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('div[title="div1Title"]').css("border","2px solid red");
        });
        </script>
    </head>
    <body>
        <div title="div1Title">Div 1</div>
        <br/>
        <div title="div2Title">Div 2</div>
        <br/>
        <span title="span1Title">Span 1</span>
        <br/>
        <span title="span2Title">Span 2</span>
        <br/>
    </body>
</html>

Contoh Attribute Not Equals Selector. Cara Implementasi Not Equals Selector ada 2 cara yaitu :

$('div[title!="Title"]') atau
$('div:not([title!="Title"])')

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('div[title!=div1Title]').css("border", "2px solid red");
        });
        </script>
    </head>
    <body>
        <div title="div1Title">Div 1</div>
        <br/>
        <div title="div2Title">Div 2</div>
        <br/>
        <span title="span1Title">Span 1</span>
        <br/>
        <span title="span2Title">Span 2</span>
        <br/>
    </body>
</html>

Contoh Contains Selector

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('[title*="Title"]').css("border","2px solid red");
        });
        </script>
    </head>
    <body>
        <div title="div1Title">Div 1</div>
        <br/>
        <div title="div2Title">Div 2</div>
        <br/>
        <p title="myTitleParagraph">This is paragraph 1 </p>
        <p title="paragraphText">This is paragraph 2 </p>
        <span title="span1Title">Span 1</span>
        <br/>
        <span title="span2Title">Span 2</span>
        <br/>
     </body>
</html>

Contoh Contains Word Selector

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('[title~="myTitle"]').css("border","2px solid red");
        });
        </script>
    </head>
    <body>
        <div title="div1Title">Div 1</div>
        <br/>
        <div title="div2Title">Div 2</div>
        <br/>
        <p title="myTitle Paragraph">This is paragraph 1 </p>
        <p title="paragraphText">This is paragraph 2 </p>
        <span title="span1Title">Span 1</span>
        <br/>
        <span title="span2Title">Span 2</span>
        <br/>
    </body>
</html>

Contoh Contains Prefix Selector

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('[title|=myTitle]').css("border","2px solid red");
        });
        </script>
    </head>
    <body>
        <div title="div1Title">Div 1</div>
        <br/>
        <div title="div2Title">Div 2</div>
        <br/>
        <p title="myTitle-Paragraph">This is paragraph 1 </p>
        <p title="myTitle">This is paragraph 2 </p>
        <span title="span1Title">Span 1</span>
        <br/>
        <span title="span2Title">Span 2</span>
        <br/>
    </body>
</html>

Contoh Starts With Selector

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('[title^="div"]').css("border","2px solid red");
        });
        </script>
    </head>
    <body>
        <div title="div1Title">Div 1</div>
        <br/>
        <div title="div2Title">Div 2</div>
        <br/>
        <p title="myTitleParagraph">This is paragraph 1 </p>
        <p title="paragraphText">This is paragraph 2 </p>
        <span title="span1Title">Span 1</span>
        <br/>
        <span title="span2Title">Span 2</span>
        <br/>
    </body>
</html>

Contoh Ends With Selector

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('[title$="Paragraph"]').css("border","2px solid red");
        });
        </script>
    </head>
    <body>
        <div title="div1Title">Div 1</div>
        <br/>
        <div title="div2Title">Div 2</div>
        <br/>
        <p title="myTitleParagraph">This is paragraph 1 </p>
        <p title="paragraphText">This is paragraph 2 </p>
        <span title="span1Title">Span 1</span>
        <br/>
        <span title="span2Title">Span 2</span>
        <br/>
    </body>
</html>

Pengertian, Contoh, dan Penjelasan Attribute Selector dalam JQuery

23:10 Unknown JQuery No comments

Kali ini saya akan menjelaskan secara detil tentang Attribute Selector dalam JQuery, dan artikel ini adalah lanjutan dari artikel sebelumnya yang berjudul "Apa itu JQuery Selector". Dan dibawah ini adalah inti inti penting dari tutorial yang telah saya ringkas.

Pengertian attribut :

a href="google.com" // attributnya adalah href="google.com"

Syntax yang digunakan :

$('[attribute]')
$('[attribute="value"]')

JQuery Attribute Selector menggunakan fungsi native JavaScript getElementsByTagName().getAttribute()

$('[title]'), // memilih semua elemen yang mempunyai attribute title
$('div[title]'), // memilih semua elemen div yang mempunyai attribute title
$('[title="divtitle"]'), // memilih semua elemen yang mempunyai nilai/value attribute title = divtitle
$('div[title="divtitle"]'), // memilih semua elemen div yang mempunyai nilai/value attribute title = divtitle

Memilih semua elemen dengan attribute "title" dan memberi "2px border merah"

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("[title]").css("border","2px solid red");
        });
        </script>
    </head>
    <body>
        <span title="spantitle">Span 1</span>
        <br/>
        <div title="divtitle">Div 1</div>
        <br/>
        <span title="spantitle2">Span 2</span>
        <br/>
        <div>Div 2</div>
    </body>
</html>

Memilih semua elemen div yang mempunyai attribute title dan memberi border 2px solid red.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("div[title]").css("border", "2px solid red");
        });
        </script>
    </head>
    <body>
        <span title="spantitle">Span 1</span>
        <br/>
        <div title="div1title">Div 1</div>
        <br/>
        <span title="spantitle2">Span 2</span>
        <br/>
        <div>Div 2</div>
        <div title="div3title">Div 3</div>
    </body>
</html>

Memilih semua elemen yang mempunyai nilai attribute title = div1title dan memberi border 2px solid red.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('[title="div1title"]').css("border","2px solid red");
        });
        </script>
    </head>
    <body>
        <span title="div1title">Span 1</span>
        <br/>
        <div title="divtitle">Div 1</div>
        <br/>
        <span title="spantitle2">Span 2</span>
        <br/>
        <div>Div 2</div>
        <div title="div1title">Div 3</div>
    </body>
</html>

Memilih semua elemen div yang mempunyai nilai attribute title = div1title dan memberi border 2px solid red. Catatan : div1 mempunyai 2 class, yaitu "small" dan "big"

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('div[title="div1title"]').css("border","2px solid red");
        });
        </script>
    </head>
    <body>
        <span title="div1title">Span 1</span>
        <br/>
        <div title="div1title">Div 1</div>
        <br/>
        <span title="spantitle2">Span 2</span>
        <br/>
        <div>
Div 2</div>
<div title="div3title">
Div 3</div>
</body>
</html>

Memilih semua div elemen yang mempunyai attribute title dan style dan memberi border 2px solid black

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("div[title][style]").css("border","2px solid black");
        });
        </script>
    </head>
    <body>
        <div title="div1title" style="background-color:red">
Div Red</div>
<div title="div2title" style="background-color:green">
Div Green</div>
<div title="div3title">
Div Normal</div>
<div>
Div Normal Without Attribute</div>
</body>
    </html>

Memilih semua div elemen yang mempunyai attribute title atau style dan memberi border 2px solid black

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $("div[title],[style]").css("border","2px solid black");
        });
        </script>
    </head>
    <body>
        <div title="div1title" style="background-color:red">
Div Red</div>
<div title="div2title" style="background-color:green">
Div Green</div>
<div title="div3title">
Div Normal</div>
<div>
Div Normal Without Attribute</div>
</body>
    </html>

Memilih semua div elemen yang mempunyai nilai attribute title = divtitle dan style = background-color:green dan memberi border 2px solid black

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('div[title="divtitle"][style="background-color:green"]').css("border","2px solid black");
        });
        </script>
    </head>
    <body>
        <div title="divtitle" style="background-color:red">
Div Red</div>
<div title="divtitle" style="background-color:green">
Div Green</div>
<div title="divtitle">
Div Normal</div>
<div>
Div Normal Without Attribute</div>
</body>
    </html>

Cara Menggunakan Checked Selector Dalam JQUery

22:09 Unknown JQuery No comments

Kali ini saya akan menjelaskan tentang Checked Selector JQuery. Apa itu Checked Selector? Checked Selector adalah Selector yang digunakan untuk memilih semua checkboxes atau radio yang telah dicek.

Syntax yang digunakan :

$('input[type="radio"]:checked') atau
$('input[type="checkbox"]:checked')

Menggunakan :checked Selector dalam Radio

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('#btnSubmit').click(function(){
                var result = $('input[type="radio"]:checked');
                if(result.length>0){
                    $('.result').html(result.val() + " is checked");
                }else{
                    $('.result').html("No radio button checked");
                }
            })
        });
        </script>
    </head>
    <body>
        Gender : 
        <input type="radio" name="gender" value="Male">Male</input>
        <input type="radio" name="gender" value="Female">Female</input>
        <br/><br/>
        <input type="submit" id="btnSubmit" value="submit"/>
        <br/><br/>
        <div class="result"></div>
    </body>
</html>

Menggunakan :checked Selector dalam Radio

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('#btnSubmit').click(function(){
                var result = $('input[type="checkbox"]:checked');
                if(result.length>0){
                    var resultString = result.length + " checkboxes checked<br/>";
                    result.each(function(){
                        resultString += $(this).val() + " <br/>";
                    });
                    $('.result').html(resultString);
                }else{
                    $('.result').html("No checkbox checked");
                }
            })
        });
        </script>
    </head>
    <body>
        Skills : 
        <input type="checkbox" name="skill" value="JavaScript">JavaScript</input>
        <input type="checkbox" name="skill" value="JQuery">JQuery</input>
        <input type="checkbox" name="skill" value="PHP">PHP</input>
        <input type="checkbox" name="skill" value="HTML">HTML</input>
        <br/><br/>
        <input type="submit" id="btnSubmit" value="submit"/>
        <br/><br/>
        <div class="result"></div>
    </body>
</html>

Perbedaan $(input) dan $(:input) dalam JQuery

22:53 Unknown JQuery No comments

Apa saja perbedaan $(input) dan $(:input), simak penjelasan berikut supaya anda tidak salah menggunakan dan dapat menghemat waktu dalam koding.

$(:input) memilih semua elemen tag input, textarea, dan button, sedangkan $(input) hanya memilih semua elemen dengan tag input.

Menggunakan $(input)

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('input[type="submit"]').click(function(){
                $('input').each(function(){
                    alert($(this).val());
                });
            });
        });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>First Name :</td>
                <td colspan="3"><input type="text" placeholder="First Name"/></td>
            </tr>
            <tr>
                <td>Last Name :</td>
                <td colspan="3"><input type="text" placeholder="Last Name"/></td>
            </tr>
            <tr>
                <td>Gender :</td>
                <td><input type="radio" value="Male" name="gender" checked>Male</input></td>
                <td colspan="2"><input type="radio" value="Female" name="gender">Female</input></td>
            </tr>
            <tr>
                <td>Skills :</td>
                <td><input type="checkbox" value="JavaScript" name="skills">JavaScript</input></td>
                <td><input type="checkbox" value="JQuery" name="skills">JQuery</input></td>
                <td><input type="checkbox" value="HTML" name="skills">HTML</input></td>
            </tr>
            <tr>
                <td>Country :</td>
                <td><select>
                        <option selected="selected" value="Indonesia">Indonesia</option>
                        <option value="USA"USA</option>
                        <option value="UK(English)">UK(English)</option>
                    </select></td>
            </tr>
            <tr>
                <td><input type="submit" value="submit"/></td>
            </tr>
        </table>
    </body>
</html>

Menggunakan $(:input)

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('input[type="submit"]').click(function(){
                $(':input').each(function(){
                    alert($(this).val());
                });
            });
        });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>First Name :</td>
                <td colspan="3"><input type="text" placeholder="First Name"/></td>
            </tr>
            <tr>
                <td>Last Name :</td>
                <td colspan="3"><input type="text" placeholder="Last Name"/></td>
            </tr>
            <tr>
                <td>Gender :</td>
                <td><input type="radio" value="Male" name="gender" checked>Male</input></td>
                <td colspan="2"><input type="radio" value="Female" name="gender">Female</input></td>
            </tr>
            <tr>
                <td>Skills :</td>
                <td><input type="checkbox" value="JavaScript" name="skills">JavaScript</input></td>
                <td><input type="checkbox" value="JQuery" name="skills">JQuery</input></td>
                <td><input type="checkbox" value="HTML" name="skills">HTML</input></td>
            </tr>
            <tr>
                <td>Country :</td>
                <td><select>
                        <option selected="selected" value="Indonesia">Indonesia</option>
                        <option value="USA"USA</option>
                        <option value="UK(English)">UK(English)</option>
                    </select></td>
            </tr>
            <tr>
                <td><input type="submit" value="submit"/></td>
            </tr>
        </table>
    </body>
</html>

Memilih input text saja menggunakan $(:input)

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('input[type="submit"]').click(function(){
                $(':input[type="text"]').each(function(){
                    alert($(this).val());
                });
            });
        });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>First Name :</td>
                <td colspan="3"><input type="text" placeholder="First Name"/></td>
            </tr>
            <tr>
                <td>Last Name :</td>
                <td colspan="3"><input type="text" placeholder="Last Name"/></td>
            </tr>
            <tr>
                <td>Gender :</td>
                <td><input type="radio" value="Male" name="gender" checked>Male</input></td>
                <td colspan="2"><input type="radio" value="Female" name="gender">Female</input></td>
            </tr>
            <tr>
                <td>Skills :</td>
                <td><input type="checkbox" value="JavaScript" name="skills">JavaScript</input></td>
                <td><input type="checkbox" value="JQuery" name="skills">JQuery</input></td>
                <td><input type="checkbox" value="HTML" name="skills">HTML</input></td>
            </tr>
            <tr>
                <td>Country :</td>
                <td><select>
                        <option selected="selected" value="Indonesia">Indonesia</option>
                        <option value="USA"USA</option>
                        <option value="UK(English)">UK(English)</option>
                    </select></td>
            </tr>
            <tr>
                <td><input type="submit" value="submit"/></td>
            </tr>
        </table>
    </body>
</html>

Lalu, manakah yang performanya lebih baik antara $(input[type="text"]) dan $(:input[type="text"])?
Ya, tentu saja $('input[type="text"]') lebih baik dari $(:input[type="text"]), dikarenakan $(:input[type="text"]) harus mendeteksi semua elemen input, textarea, select, dll. Sedangkan $(input[type="text"]) hanya mendeteksi elemen input. Jadi kesimpulannya, jika anda ingin menemukan elemen dengan tag input, lebih baik menggunakan $(input[type="text"]) daripada $(:input[type="text"]).

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya

Friday, 3 June 2016

Cara Menggunakan Each Function Dalam JQuery

Cara Menggunakan Disabled dan Enabled Selector dalam JQuery

Wednesday, 1 June 2016

Pengertian, Contoh dan Penjelasan JQuery #Id Selector

Cara Menggunakan Selected Selector Dalam JQuery

Pengertian, Contoh, dan Penjelasan JQuery Class Selector

Pengertian, Contoh dan Penjelasan JQuery Element Selector

Pengertian, Contoh, dan Penjelasan Attribute Value Selector dalam JQuery

Pengertian, Contoh, dan Penjelasan Attribute Selector dalam JQuery

Cara Menggunakan Checked Selector Dalam JQUery

Tuesday, 31 May 2016

Perbedaan $(input) dan $(:input) dalam JQuery

Kunjungi Juga

Blog Archive

Labels