» » » jQuery : Memahami Selector
Jumat, 11 Juli 2014


Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan operasi terhadap elemen tersebut atau manipulas terhadap elemen-elemn tersebut. Adapun elemen-elemen dasar yang dapat dipilih oleh selector adalah sebagai berikut :
  1. Nama Tag
  2. Id
  3. Class
Untuk mengetahui bagaimana cara selector dalam memilih elemen-elemen tersebut, akan disajika beberapa contoh sederhana pada bagian berikutnya.

Selector Tag

Cara menggunakan selector tag adalah dengan langsung menyebut nama tag elemennya.

Selector Id

Cara menggunakan Selector id adalah dengan menyertakan tanda kres (#) sebelum nama elemennya.

Selector Class

Cara menggunakan Selector class ini adalah dengan menyertakan tanda titik (.) sebelum nama elemennya. Latihan-latihan berikut untuk menjelaskan teori diatas.

Latihan 1

Source Code:
<html>
    <head>
        <script src="jquery-2.1.1.js" type="text/javascript"></script>
        <script type="text/javascript">
               $("document").ready(function(){
                alert ("Selamat datang");
               });
          </script>
    </head>
    <body>
    </body>
</html>

Latihan 2

Source Code:
<html>
    <head>
        <script language="javascript" src="jquery-2.1.1.js" ></script>
        <script language="javascript">
            $(document).ready(function(){
                $("input").click(function(){
                    alert("hello jquery!");
                });
            });
        </script>
    </head>
    <body>
        <input type="submit" value="click me"/>
    </body>
</html>

Latihan 3

Source Code:
<html>
    <head>
        <script type="text/javascript" src="jquery-2.1.1.js"></script>
        <script type="text/javascript">
            $("document").ready(function(){
                $("#p1").css("color","red");
            });
        </script>
        <title>Latihan 3</title>
    </head>
    <body>
        <p id="p1">Ini isi paragraf 1 </p>
        <p id="p2">Ini isi paragraf 2 </p>
    </body>
</html>

Latihan 4

Source Code:
<html>
    <head>
        <script type="text/javascript" src="jquery-1.4.3.js"></script>
        <script type="text/javascript">
            $("document").ready(function(){
                $("#judul").addClass("merahkuning");
                $(".sub1").addClass("kuninghitam");
            });
        </script>
        <style type="text/css">
            .merahkuning {
                color: red;
                font-weight: bold;
                background-color:yellow;
                padding:3px;
            }
            .kuninghitam {
                color:yellow;
                background-color:black;
            }
        </style>
    </head>
    <body>
        <h1>Judul Buku Kuliah Pemrograman Web </h1>
        <ol id="judul">
            <li class="sub1">Pemrograman PHP</li>
            <li>Database mysql</li>
            <li class="sub1">Mempercantik web dengan jquery</li>
        </ol>
    </body>
</html>



Terima Kasih Sudah Membaca ! Semoga Bermanfaat Untuk Anda :D
Posted by at 16.16
Labels: ,

0 comments:

Posting Komentar

Jika ada Komentar , Tulis Di Sini

Langganan: Posting Komentar (Atom)