Teknik dasar untuk lebih memahami apa itu jQuery

Javascript 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...

Artikel Terkait

  • Memasang alert untuk mengaktifkan javascript
    Tutorial ini berguna untuk para pengunjung blog anda yang menon-aktifkan fungsi javascript di web browser mereka. misalnya, ketika blog anda tidak memiliki tampilan maksimal saat fungsi javascript di web browser pengunjung anda dinon-aktifkan, maka para pengunjung blog anda harus mengaktifkan fungsi javascript di web browser mereka dengan men…
  • Klik kanan hanya berfungsi di tag pre
    Trik ini adalah bagian dari tujuan untuk melindungi content blog anda, mematikan fasilitas klik kanan dengan mengeset tag <body> menggunakan dasar oncontextmenu='return false;'. trik ini mematikan semua klik kanan dalam blog, lalu bagaimana caranya kita membuat sebuah ijin klik kanan yang berfungsi di area tertentu saja... kali ini saya…
  • Blokir otomatis link aktif di dalam komentar
    Blogger memang sudah memberi fasilitas moderasi untuk mengontrol kegiatan komentar di dalamnya, namun jika blog anda tergolong sebuah blog yang memiliki aktifitas komentar yang ramai tidak mungkin anda akan memeriksa satu persatu, selain memakan waktu juga menambah pekerjaan. Tidak semua pengunjung blog memiliki itikad baik, santun dan memahami…
  • Memasang efek animasi loading halaman blogger
    Sudah lihat animasi loading blog ini, itu adalah hasil dari efek animasi loading beforeunload. Kali ini kita membuat efek animasi yang ditampilkan bukan karena terpicu oleh momen klik pada tautan melainkan karena aksi halaman yang mulai berpindah. Sehingga kita bisa merancang ulang efek animasi loading ketika perpindahan halaman dengan cara in…
  • Mematikan link aktif di komentar dengan jQuery
    Jika Anda telah bosan berurusan dengan semua jenis komentar spam dan Anda begitu sibuk untuk meninjau semua komentar, maka trik blogger hack baru ini akan membantu Anda untuk itu dengan menghapus link yang disertakan dalam komentar dan menggantinya dengan teks biasa menggunakan jQuery. Cara Hapus Link Dalam Komentar Dengan jQuery 1. Masuk k…
  • Filter otomatis kata - kata kotor dalam komentar
    Adakalanya sebuah komentar yang masuk dalam blog anda memiliki kata - kata yang tidak pantas untuk di cantumkan dalam komentar dan ini mengganggu pengunjung lain yang berkomentar. umumnya tidakan berkomentar rendahan seperti ini dilakukan oleh orang yang tidak bertanggung jawab dan tidak memiliki etika yang baik yang tidak berani menampakkan d…

2 komentar

  1. Balasan
    1. ini salah satunya

          $(document).ready(function(){
             $("div").addClass("biru");
          });

      Hapus
Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...