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

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

Wednesday 1 June 2016

Pengertian, Contoh, dan Penjelasan Attribute Value Selector dalam JQuery

0 comments:

Post a Comment

Kunjungi Juga

Blog Archive

Labels