Pengertian, Contoh, dan Penjelasan Attribute Selector dalam JQuery ~ Nyintak

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>

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya

Wednesday 1 June 2016

Pengertian, Contoh, dan Penjelasan Attribute Selector dalam JQuery

0 comments:

Post a Comment

Kunjungi Juga

Blog Archive

Labels