Pengertian, Contoh dan Penjelasan JQuery Element Selector ~ Nyintak

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>

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya

Wednesday 1 June 2016

Pengertian, Contoh dan Penjelasan JQuery Element Selector

0 comments:

Post a Comment

Kunjungi Juga

Blog Archive

Labels