Mengenal Selector Basic pada Jquery

Kekuatan utama jQuery ada pada fungsi selectornya dimana dia dapat dengan cerdas menemukan suatu element yang ada dalam suatu halaman HTML.

Suatu halaman HTML yang kita lihat dibrowser itu terdiri dari beberapa object element. Untuk mengerti ini bagusnya kita belajar Document Object Model (DOM), kebetulan pernah gogling dan mendapatkan video tutorial yang dapat membantu kita memahami Document Object Model, ini linknya di youtube, pernah ke youtubekan. Selain berisi hiburan banyak ilmu juga loh disana.

Tentu ada yang bingung yah selectornya jquery itu kayak apasih.

selector pada jquery itu ada beberapa kategori

Selector

Basic Selector

selector by ID

selector dimana jquery mencari element dalam suatu document html berdasarkan IDnya

Mari kita beraksi dengan contoh.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="../jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $("#myDiv").css("border","3px solid red");
  });
  </script>
  <style>
  div {
    width: 90px;
    height: 90px;
    float:left;
    padding: 5px;
    margin: 5px;
    background-color: #EEEEEE;
  }
  </style>
</head>
<body>
  <div id="notMe"><p>id="notMe"</p></div>
  <div id="myDiv">id="myDiv"</div>
</body>
</html>

Nah contoh diatas adalah selectorID dimana jquery mencari element dalam suatu document html berdasarkan IDnya

pada html diatas terdapat dua buah div, satu buah div dengan id=”notMe” dan satu lagi dengan id=”myDiv”

perhatikan code ini dalam script javascript


$(document).ready(function(){

$(“#myDiv”).css(“border”,”3px solid red”);

});

$(document).ready

boleh dibilang cirikhas jquery. Digunakan untuk mengeksekusi script yang harus dijalankan pada saat document html sudah terload dengan sempurna.

$(“#myDiv”).css(“border”,”3px solid red”)

kode ini untuk merubah border dari div dengan id #mydiv dengan tebal 3px, warna border merah dan solid.

Script diatas apabila kita jalankan dibrowser maka Hasilnya.

untuk demonya klik disini.

Nah contoh diatas adalah selectorID dimana jquery mencari element dalam suatu document html berdasarkan Idnya

pada html diatas terdapat dua buah div, satu buah div dengan id=”notMe” dan satu lagi dengan id=”myDiv”

perhatikan code ini dalam script javascript

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>