Pengertian, Contoh, dan Penjelasan JQuery Class Selector ~ Nyintak

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>

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya

Wednesday 1 June 2016

Pengertian, Contoh, dan Penjelasan JQuery Class Selector

0 comments:

Post a Comment

Kunjungi Juga

Blog Archive

Labels