Mengenal Syntax jQuery


0

Setelah beberapa pengenalan tentang jQuery, maka kali ini akan dibahas dalam artikel ini adalah tentang pengenalan tentang syntax pada jQuery. Dalam jQuery, syntax adalah tempat meletakkan event-event jQuery. Sebagai contoh, misal kita akan membuat tombol yang apabila tombol itu di klik akan menghilang maka kita hanya perlu sedikit menambahkan syntax pada kode jQuery.

Apabila kita ingin membuat tombol yang apabila di klik tombol tersebut bisa menghilang, maka pertama-tama yang harus kita buat adalah tombol terlebih dahulu dengan menggunakan HTML. Baik, untuk contoh awal coba klik pada tombol dibawah ini:

$ (document).ready
(
function ()
{
$(“#hilang-gan”).click
(
function()
{
$(this).hide();
}
);
}
);

Bisa menghilang kan? ini terjadi bukan karena sulap ataupun sihir. Ini terjadi karena adanya JavaScript yang bekerja pada tombol tersebut. Sehingga apabila tombol tersebut di klik akan menghilang.

Mengenal Syntax jQuery

Jika Anda ingin mencobanya, silahkan copy kode berikut ini, lalu paste pada notepad dengan nama Percobaan1.html:

<!DOCTYPE html>
<html>
<head>
<script src='jquery.js' type='text/javascript'></script>
<script type="text/javascript">
$ (document).ready
(
  function ()
  {
   $("#tombol1").click
   (
      function()
   {
    $(this).hide();
   }
   );
  }
);
</script>
</head>

<body>
<input type="submit" name="button" id="tombol1" value="Submit"/>
</body>
</html>

Perhatikan tulisan yang diberi label merah. Itu adalah letak dari jQuery. Jadi sebelum melakukan hal ini, Anda harus sudah menyimpan jQuery.js di komputer Anda. Dalam struktur letak dari jQuery.js sendiri harus berada di antara:

<head>
..............
..............
..............
<!-- jQuery/JavaScript disini -->
..............
..............
..............
</head>

Contoh diatas adalah salah satu contoh mendasar penggunaan jQuery. Jadi bagaimana? sudah cukup paham? Pada contoh diatas adalah menggunakan syntax $(this).hide(), syntax ini berfungsi untuk menghilangkan elemen itu sendiri. Pada contoh di atas, saya menggunakan “id” “tombol1” sebagai selector. Namun dalam prakteknya, bukan hanya “id” saja yang dapat digunakan sebagai selector (untuk memilih action) tapi bisa juga menggunakan class, ataupun langsung pada elemennya. Untuk lebih jelasnya, lihat syntax dibawah ini:
$(this.)hide() : yakni untuk menghilangkan (karena actionnya hide) elemen itu sendiri.
$(“#tombol1”).hide() : yakni untuk menghilangkan elemen yang “id”nya “tombol1”.
$(“p”).hide() : yakni menghilangkan semua elemen paragraf (p).
$(“.coba”).hide() : yakni menghilangkan elemen yang memiliki class “coba”.

Keterangan:

Yang dimaksud elemen disini adalah seperti <p> (paragraf), <table> (table), <div> dan sebagainya.

Untuk memberikan action pada suatu elemen jQuery membutuhkan selector seperti yang telah dijelaskan diatas. Secara umum, syntax jQuery dapat dituliskan sebagai berikut:
$(selector).action()

Sebagai contoh, akan diberikan kasus dimana selector merupakan elemen paragraf <p>. Berikut langkah-langkahnya:

1. Buatlah file baru dengan html di notepad ataupun di Dreamweaver.
2. Ketikkan 2 buah kalimat. Misalnya “Click Me” dan “Click Me too“.
3. Atur syntaxnya hingga seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$ (document).ready
(
  function ()
  {
   $("p").click
   (
      function()
   {
    $(this).hide();
   }
   );
  }
);
</script>
</head>

<body>
<p>Click Me</p>
<p>Click Me Too</p>
</body>
</html>

Maka hal yang akan terjadi adalah seperti berikut:

$ (document).ready
(
function ()
{
$(“li”).click
(
function()
{
$(this).hide();
}
);
}
);

Bagaimana? Sudah cukup mengerti? Pada artikel ini Anda sudah mengenal action hide(). Nanti, inysaallah pada artikel selanjutnya akan saya kenalkan dengan action-action lain. Namun sebelum itu, Anda akan saya ajak dulu untuk memperdalam penggunaan selector agar kita sama-sama makintau.


Like it? Share with your friends!

0

What's Your Reaction?

Bangga Bangga
0
Bangga
Keren Keren
0
Keren
Lucu Lucu
0
Lucu
Sedih Sedih
0
Sedih
Wow Wow
0
Wow
Marah Marah
0
Marah
Takut Takut
0
Takut

Legend

Pecinta ayam goreng, tempe penyet dan klepon.

Comments

comments

7 Comments

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

  1. wah ilmu yang beginian mah saya mah nyerah dan ngga banget deh buat belajarnya ge' mendingan biar tak suruh anak buah saya ajah deh yang mempelajarinya, nanti kalau ketemu syntax tak serahin sama anak buah…gituh ajah deh yah. 😀

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format