Beranda » Javascript » jQuery » Teknik dasar untuk lebih memahami apa itu jQuery

Teknik dasar untuk lebih memahami apa itu jQuery

Teknik dasar untuk lebih memahami apa itu jQuery

Jika kita kembali sejenak untuk melihat di situs resmi jQuery pada bagian documentasi ( http://docs.jquery.com/ ) maka akan ada aebelas yang harus kita pelajari untuk lebih memahami jQuery dan ini di sebut jQuery API ( Aplication Progamming Interface ). berikut ini sebelas hal tersebut:

1. jQuery core 2. Selectors 3. Attributes 4. Traversing 5. Manipulation

6. CSS 7. Events 8. Effects 9. AJAX 10. Plugin/jQuery UI ( User Interface 11. Utilities

Namun lebih baik kita mempelajari dan memahami yang mendasar dari jQuery, yaitu Selectors, Events, dan Effects.

Dasar - dasar pemograman dalam jQuery

Sebelum masuk ke dalam dasar pemograman jQuery ada baiknya kita memahami terlebih dahulu tentang filosofinya. karena pada nantinya pemograman jQuery akan mengacu kedalam filosofi dasar, Contoh:

jQuery("div").addClass("xyz");

penjelasan dasar dari kode diatas:

jQuery            = jQuery function
("div")           = element/expression
.addClass("xyz"); = jQuery method

Dalam pemograman umum, jQuery di ganti dengan logo dolar ($) yang merupakan simbol resmi dari fungsi jQuery. sehingga sering di tulis seperti berikut:

$("div").addClass("xyz");

penjelasan kode di atas:

$                   = jQuery function
("div")             = cari element tertentu
.addClass("xyz");   = lakukan sesuatu pada element tersebut

Inti dari fungsi jQuery akan mencari suatu element yang telah di definisikan di bagian dalam element body, kemudian sesuatu tindakan akan dilakukan pada element tersebut. demikianlah filosofi dasar dari jQuery.

Selectors ( Memilih Element )

Selectors memiliki fungsi untuk memilih/mengambil elemen - elemen tertentu untuk di beri oprasi/manipulasi pada elemen tersebut. berikut ini adalah beberapa elemen dasar yang dapat di pilih oleh selector:

1.id 2.class 3.tag

untuk mengetahui bagaimana cara selectors dalam memilih elemen - elemen tersebut, penulis akan sajikan beberapa contoh sederhana pada sub bab berikutnya sehingga mempermudah anda dalam memahami selectors.

01Selectors id

Cara menggunakan selector id adalah dengan menyertakan tanda kres (#) sebelum nama elemennya $("#nama_elemen"). Untuk lebih jelasnya perhatikan kode dibawah ini

<html>
  <head>
  <script src="jquery-1.8.0.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#target").addClass("birukuning");	  
    });
  </script>
  <style type="text/css">
  .birukuning {
    color: blue;
    font-weight: bold;  
	background-color: yellow;
	padding-top: 10px;
	padding-bottom: 10px;
  }
  </style>
  </head>
  <body>
    <div>
        <p>Menu Favorit : </p>
    </div>
    <div>
        <ul id="target">
          <li>Nasi Goreng</li>
          <li>Sop Buntut</li>
          <li>Mie Ayam</li>
        </ul>
    </div>
  </body>
</html>

Penjelasan kode diatas :

Tag ul dengan id "daftar" akan terpilih oleh selectors, kemudian diberi operasi "birukuning" terhadap elemen terpilih tersebut, sehingga semua text yang berada didalam tag tersebut akan berwarna tersebut.

02Selectors class

Cara menggunakan selectors class adalah dengan menyertakan tanda titik (lihat warna biru) sebelum kode elemennya, $(".nama-elemen-isi"). untuk lebih jelas perhatikan kode dibawah ini

<html>
  <head>
  <script src="jquery-1.8.0.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#target").addClass("birukuning");	  
      $(".subtarget").addClass("hitamputih");	  
    });
  </script>
  <style type="text/css">
  .birukuning {
    color: blue;
    font-weight: bold;  
	  background-color: yellow;
	  padding-top: 10px;
	  padding-bottom: 10px;
  }
  .hitamputih {
    color: white;
	  background-color: black;
  }
  </style>
  </head>
  <body>
    <div>
        <p>Menu Favorit : </p>
    </div>
    <div>
        <ul id="target">
          <li>Nasi Goreng</li>
          <li class="subtarget">Sop Buntut</li>
          <li>Mie Ayam</li>
        </ul>
    </div>
  </body>
</html>

Penjelasan kode di atas:

Tag li dengan class "subtarget" akan terpilih oleh selectors kemudian di beri nilai oprasi "hitam putih". sehingga semua teks yang berada dalam tag li class "subtarget" (sop buntut) akan berwarna putih dan tebal dengan background hitam.

03Selector tag

Cara mengunakan selectors tag dengan langsung menyebutkan nama tag/elemennya $("div"). Untuk lebih jelasnya, perhatikan kode html pada gambar dibawah ini


<html>
  <head>
  <script src="jquery-1.8.0.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
       $("div").addClass("biru");
    });
  </script>
  <style type="text/css">
  .biru {  
    color: blue;
    font-weight: bold;    
  }
  </style>
  </head>
  <body>
    <div>
        <p>Menu Favorit : </p>
    </div>
    <div>
        <ul>
          <li>Nasi Goreng</li>
          <li>Sop Buntut</li>
          <li>Mie Ayam</li>
        </ul>
    </div>
  </body>
</html>

Penjelasan kode di atas:

Dalam manipulasi tag di atas div akan terpilih oleh selectors dan memiliki operasi style "biru" yang telah didefinisikan pada head jadi tulisan akan berwarna biru tebal.

Demikian pemahaman dan contoh dari jQuery semoga bermanfaat...

Teknik dasar untuk lebih memahami apa itu jQuery

Belum ada tanggapan untuk "Teknik dasar untuk lebih memahami apa itu jQuery"

Post a Comment