Monday 6 June 2016

Memahami Anchor, Link dan Hyperlink dalam HTML

Url atau link dalam HTML biasa dikenal dengan Hyperlink. Hyperlink adalah gambar atau teks yang dapat diklik dan membuka halaman lain. Hyperlink dalam HTML dibagi menjadi 2, yaitu :

Relative Link

<!DOCTYPE html>
<html>
    <head>
        <base href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif8qwwsviaXQqzOWlz-TZ4WCnD5S7JxiYnmQByYDq5f0oJMw38zD5ZTf-nqS3_m_0NiWiGIk8IEb9_PFEZ-FQZbTYvE46jPFsIPt_wKXZYfV_ZLikSt_OYUhNpC9NPVR-c9wAOHM441oQ/s1600/"/>
    </head>
    <body>
        <a href="1.jpg" target="_blank">Show Image</a>
    </body>
</html>

<a href="1.jpg">

Absolute Link

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8h5dkpu9sXyFOH1K2lFAzoDjD-2pVLyz5CnXdXgPqUvtZIXOM4xbiHG5W44wImFyD3mWasebLgCtUJg4jeHBgu4JWfgPhyBc4m7puFCMNWxzB-FqJzagISjDD839Fjt3cX1Inxv-SFH8/s1600/1.jpg" target="_blank">Show Image</a>
    </body>
</html>

<a href="http://4.bp.blogspot.com/-yakZ7ylQSgo/V1TgRQooZEI/AAAAAAAAAKE/ CSRLBP169lQuvx_Yew3wXo3LSampQPzygCK4B/s1600/1.jpg target="_blank"">

Lalu apa itu target="_blank"? target="_blank" merupakan salah satu atribut yang dimiliki oleh elemen anchor(<a>).

target="_blank"

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <a href="https://www.google.com" target="_blank">Visit Google</a><br/>
        <a href="https://www.youtube.com" target="_blank">Visit Youtube</a><br/>
        <a href="https://www.facebook.com" target="_blank">Visit Facebook</a>
    </body>
</html>

target="_self"

<a href="https://www.facebook.com">Visit Facebook</a>
<a href="https://www.google.com">Visit Google</a>
<a href="https://www.youtube.com">Visit Youtube</a>

Dan kemudian apakah anchor(<a>) hanya bisa digunakan sebagai hyperlink saja? Tidak, sebenarnya anchor(<a>) juga bisa digunakan untuk menuju ke beberapa bagian di halaman yang saat ini sedang anda buka, ini dinamakan Linking on same page atau Internal Link, berikut caranya

<a href="#relativeLink">Go to Relative Link</a>
<a href="#absoluteLink">Go to Absolute Link</a>
<a href="#targetBlank">Go to Target _blank</a>

Benefit, dan Cara Menggunakan JQuery Method Chaining

20:29 Unknown JQuery No comments

Method chaining adalah suatu teknik yang dapat digunakan untuk menyederhanakan kode dalam sebuah skenario yang melibatkan pemanggilan beberapa fungsi pada objek yang sama berturut-turut. Berikut adalah contoh bagaimana Anda dapat menggunakan metode chaining ketika menggunakan jQuery.

Contoh penggunaannya :

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#btnClick').click(function(){
                    $('li').css('color','blue').slideUp(1000).slideDown(1000).attr('title', 'Textarea Title');
                });
            });
        </script>
    </head>
    <body>
        <ul>
            <li>Indonesian</li>
            <li>Malaysian</li>
            <li>Thailand</li>
            <li>Myanmar</li>
            <li>Singapore</li>
        </ul>
        <input type="button" id="btnClick" value="Click to Execute!"/>
    </body>
</html>

Bagaimana Cara Kerjanya?

$('li') mengembalikan sebuah JQuery Collection object
Ketika method .css() dipanggil, method ini mengaplikasikan warna ke semua elemen yang ada dalam JQuery Collection Object dan mengembalikannya ke JQuery Collection Object lagi.
Kemudian method .SlideUp() dijalankan saat method .css() selesai mengembalikan elemen ke dalam JQuery Collection Object
Proses seperti di atas akan terus dijalankan hingga mencapai method final(terakhir)

Catatan :

method text()

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#btnClick').click(function(){
                    $('li').css('color','blue').text().slideUp(1000).slideDown(1000).attr('title', 'Textarea Title');
                });
            });
        </script>
    </head>
    <body>
        <ul>
            <li>Indonesian</li>
            <li>Malaysian</li>
            <li>Thailand</li>
            <li>Myanmar</li>
            <li>Singapore</li>
        </ul>
        <input type="button" id="btnClick" value="Click to Execute!"/>
    </body>
</html>

Pengertian, Penjelasan, dan Isi Head di HTML

19:46 Unknown HTML No comments

Head atau biasa dikenal <head> adalah salah satu elemen penting yang dimiliki oleh sebuah file html selain body. Di head lah tempat para programmer biasanya memasukkan elemen script, link, style, title, meta, dll. Tidak seperti body, ketika anda memasukkan teks di body, maka ketika halaman dijalankan, teks yang anda masukkan di dalam body tadi akan ditampilkan di UI(User Interface). Head tidak menggunakan aturan seperti itu, jadi apapun yang anda masukkan ke dalam head tidak akan ditampilkan di UI(User Interface) kecuali anda memasukkan teks menggunakan proses javascript atau php. Dan berikut ini adalah daftar-daftar yang akan kita pelajari kali ini mengenai head :

Title
Style
Link
Meta
Script
Base

Akan dibahas satu per satu.

Title

Style

<!DOCTYPE html>
<html>
    <head>
        <style>
            .red{
                color:red;
            }
            .green{
                color:green;
            }
            .blue{
                color:blue;
            }
        </style>
    </head>
    <body>
        <p class="red">Red Text Paragraph</p>
        <p class="green">Green Text Paragraph</p>
        <p class="blue">Blue Text Paragraph</p>
    </body>
</html>

Link

<!DOCTYPE html>
<html>
    <head>
        <link href="https://googledrive.com/host/0B54KnGBYKdBAa3lRTWtSZDYwRkE" rel="stylesheet"></link>
    </head>
    <body>
        <p class="red">Red Text Paragraph</p>
        <p class="green">Green Text Paragraph</p>
        <p class="blue">Blue Text Paragraph</p>
    </body>
</html>

Meta

Meta Author, digunakan untuk mengenal penulis, biasanya diisi nama penulis, email penulis

Meta Content Language, digunakan untuk mengetahui bahasa yang digunakan oleh website. Robot mesin pencari menggunakan meta ini untuk mengkategorikan halaman web dengan bahasa yang digunakan.

Meta Description, ini adalah meta yang bisa dibilang paling penting, meta ini digunakan untuk memberikan deskripsi dari halaman web, jumlah karakter yang disarankan tidak lebih dari 150 karakter.

Meta Keywords, meta ini digunakan oleh mesin pencari. Oleh karena itu,memberikan meta ini ke halaman website dapat sangat menguntungkan.

Meta Title, meta ini berisi sama dengan tag <title> pada dokumen HTML.

Meta Robot, tujuan penggunaan meta ini adalah untuk menentukan halaman web yang mana saja boleh atau tidak boleh di-index oleh crawler. Meta ini sangat penting sekali terutama jika sesuatu website menggunakan frame sebagai navigasinya. Sudah tentu kita tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search engine

Format dasar meta robot

Misal, jika ingin web crawler membaca halaman utama beserta semua tautan yang ada, maka tambahkan meta berikut

Misal, jika tidak ingin web crawler melakukan index maupun penelusuran tautan yang ada pada web, maka tambahkan meta berikut

Script

<!DOCTYPE html>
<html>
    <head>
 <script>
     function insertText(){
         document.getElementById('paragraph').innerHTML = "JavaScript Executed"
     }
 </script>
    </head>
    <body onload="insertText()">
     <p id="paragraph"></p>
    </body>
</html>

Base

<!DOCTYPE html>
<html>
    <head>
 <base href="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/" />
 <script src="jquery.min.js"></script>
 <script>
     $(document).ready(function(){
      $('#paragraph').text("Base url is https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/");
  });
 </script>
    </head>
    <body>
     <p id="paragraph"></p>
    </body>
</html>

<script href="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js>"

<script href="jquery.min.js">.

https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/

atribut href elemen <base>

Cara Menggunakan Each Function Dalam JQuery

00:32 Unknown JQuery No comments

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>

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya

Monday 6 June 2016

Memahami Anchor, Link dan Hyperlink dalam HTML

Sunday 5 June 2016

Benefit, dan Cara Menggunakan JQuery Method Chaining

Pengertian, Penjelasan, dan Isi Head di HTML

Title

Style

Link

Meta

Script

Base

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

Kunjungi Juga

Blog Archive

Labels