cara menggunakan jQuery

10:17 PM
cara menggunakan jQuery
Di Posting Oleh : wandi
Kategori : javascript



Kali ini saya akan membahas mengenai jQuery kali ini saya akan bahas cara menggunakan jQuery. Mudah loh menggunakan jQuery ini, kita bisa membuat animasi dengan hanya beberapa baris kode saja .

Baca juga apa itu jQuery

Baik langsung saja pertama tama kita sisipkan file jquery kita ke html yang kita punya

<script type="text/javascript"src="http://code.jquery.com/jquery-3.1.1.js"></script>

Sekarang kita memiliki sisipan file jquery. Setelah itu kita bisa membuat apa yang kita inginkan . Penulisan untuk menggunakan jQuery adalah

$(selectornya).action()

Jadi selectonya apa gitu ? tag div dan action, aksinya apa ? bisa itu clik, load, dkk. Baik kita coba gunkanan

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Belajar jquery</title>
      <script type="text/javascript"src="http://code.jquery.com/jquery-3.1.1.js"></script>
      <script type="text/javascript">
      $( document ).ready(function() {
        $( "#hilang" ).click(function() {
          $("h1").hide(1000);
        });
        $( "#ada" ).click(function() {
          $("h1").show(1000);
        });
      });
      </script>
  </head>
  <body>
    <h1>Bermain jQuery</h1>
    <div id="hilang">
      Hilangkan h1
    </div>
    <div id="ada">
      Tampilkan h1
    </div>
  </body>
</html>

Baik kita coba lihat hasilnya, ketika menkli hilangkan h1 maka h1 akan hilang dan ketika kita mengklik tampilkan h1 maka akan menampilkan h1 . Baik sekarang saya akan jelaskan

Untuk pertama tama kita mengsisipkan dulu jquerynya, seperti tadi saya bilang

<script type="text/javascript"src="http://code.jquery.com/jquery-3.1.1.js"></script>

Setelah itu kita bebas membuat apa saja dengan jquery ini. Baik pertama tama kita harus ada

$( document ).ready(function() {});

Setelah itu kita membuat aksi untuk div yang id hilang dan ada

        $( "#hilang" ).click(function() {
          $("h1").hide(1000);
        });
        $( "#ada" ).click(function() {
          $("h1").show(1000);
        });

Artinya ketika kita mengklik yang memiliki id hilang maka akan melakukan $("h1").hide(1000); mencari tag h1 dan melakukan fungsi hide, untuk parameter 1000 untuk adalah durasi hilangnya. Saya buat durasi hilangnya 1000 ms atau 1 detik . Begitu juga sama hanya dengan yang memiliki id ada .


Jadi itu dia cara untuk menggunakan jQuery, jadi pertama tama kita mengsisipkan file jQuerynya dulu lalu kita bisa melakukan fungsi fungsi yang telah di sediakan oleh jQuery . jQuery untuk awalan perintannya menggunakan $ (simbol dolar) ,

Baik itu dia bahas bahas mengenai jQuery. Semoga bermanfaat dan sampai jumpa .



Mau liat atau download source code aplikasi premium bisa disini.
Previous
Next Post »

4 comments

  1. pusing gan belajar coding , tapi perlu dicoba sih buat belajar

    ReplyDelete
    Replies
    1. belajar coding itu gak pusing gan kalo kita pakai niat

      Delete
  2. Ada contoh lainnya ga mas ?

    Misalnya buat widget dalam blog.

    ReplyDelete