Bloglieken: JQuery

Untuk mendapatkan lebar dan tinggi dokumen kita bisa menggunakan fungsi dari jquery, berikut adalah contoh kodenya :

mendapatkan tinggi dokumen :

<!DOCTYPE html>
<html>
<head>
  <style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold; }
  </style>
  <script src="jquery-git.js"></script> <!--- sesuaikan dengan library anda --->
</head>
<body>
  <button id="getp">Get Paragraph Height</button>
  <button id="getd">Get Document Height</button>
  <button id="getw">Get Window Height</button>

  <div> </div>
  <p>
    Sample paragraph to test height
  </p>
<script>
    function showHeight(ele, h) {
      $("div").text("The height for the " + ele + 
                    " is " + h + "px.");
    }
    $("#getp").click(function () { 
      showHeight("paragraph", $("p").height()); 
    });
    $("#getd").click(function () { 
      showHeight("document", $(document).height()); 
    });
    $("#getw").click(function () { 
      showHeight("window", $(window).height()); 
    });

</script>

</body>
</html>

mendapatkan lebar dokumen :

<head>
  <style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold;  }
  </style>
  <script src="jquery-git.js"></script> <!--- sesuaikan dengan library anda --->
</head>
<body>
  <button id="getp">Get Paragraph Width</button>
  <button id="getd">Get Document Width</button>
  <button id="getw">Get Window Width</button>

  <div> </div>
  <p>
    Sample paragraph to test width
  </p>
<script>
	var ada = $("p").width();
	document.write(ada);
    function showWidth(ele, w) {
      $("div").text("The width for the " + ele + 
                    " is " + w + "px.");
    }
    $("#getp").click(function () { 
      showWidth("paragraph", $("p").width()); 
    });
    $("#getd").click(function () { 
      showWidth("document", $(document).width()); 
    });
    $("#getw").click(function () { 
      showWidth("window", $(window).width()); 
    });

</script>

</body>
</html>

Link : http://api.jquery.com/height/ dan Link : http://api.jquery.com/width/

Untuk menguasai jQuery atau dikenal dengan jQuery API (Application Programming Interface) Kita harus mempelajari:

jQuery Core
Selector
Attributes
Traversing
Manipulation
CSS
Events
Ajax
Plugin/jQuery UI (User Interface)
Utilities
dll....klik link berikut http://api.jquery.com/untuk lebih jelasnya :

Namun, sebagai fondasi awal kita perlu mempelajari tiga hal yang paling mendasar, yaitu : mempelajari Selector, Events dan Effects.

Hal yang harus diperhatikan, yaitu apabila kita membuat suatu project yang melibatkan jQuery kita harus memanggil library jQuery terlebih dahulu dan diletakkan diantara tag <HEAD>

Contoh :
<head>
<script type="text/javascript" src="jquery.js"></srcipt>
</head>

Memahami Selectors

Selectors dalam jQuery berfungsi untuk memilih elemen-elemen tertentu yang ada pada dokumen HTML dan akan dilakukan operasi penanganan kejadian pada elemen tersebut.

Elemen-elemen yang dapat dipilih oleh selector adalah :

Nama tag, contoh tag p : <p>......</p>
Penulisan jQuery : $("p").addClass("warnaKuning");
id, contoh id tampil : <div id="tampil">.....</div>
Penulisan jQuery : $("#tampil").addClass("warnaKuning");
class, contoh redup : <div class="redup">.....</div>
Penulisan jQuery : $(".redup").addClass("warnaKuning");

Dari penjelasan diatas tentunya antara tag, id, dan class ada perbedaan dalam pemanggilannya, yaitu :

Nama tag pemanggailannya hanya namanya saja, contoh : "p"
id pemanggilannya disertai tanda kres dan nama id, contoh : "#tampil"
class pemanggilannya disertai titik dan nama class, contoh : ".redup"

Memahami Events

Event jQuery adalah fungsi/metode inti dalam jQuery, event adalah fungsi-fungsi atau metode-metode yang dipanggil ketika "sesuatu terjadi" misalnya ketika link diklik atau disorot dll. Kunjungi link berikut : http://api.jquery.com/category/events/

Berikut adalah metode-metode yang ada di jQuery, yaitu diantarannya :

.bind()
Melampirkan handler untuk sebuah event untuk elemen.
.blur()
Mengikat sebuah event handler untuk event "blur" JavaScript, atau memicu peristiwa pada elemen.
.change()
Mengikat sebuah event handler untuk "perubahan" Acara JavaScript, atau memicu peristiwa pada elemen.
.click()
Mengikat sebuah event handler untuk "klik" acara JavaScript, atau memicu peristiwa pada elemen.
.dblclick()
Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.
.delegate()
Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
.die()
Remove all event handlers previously attached using .live() from the elements.
.error()
Bind an event handler to the "error" JavaScript event.
event.currentTarget
The current DOM element within the event bubbling phase.
event.data
The optional data passed to jQuery.fn.bind when the current executing handler was bound.
event.isDefaultPrevented()
Returns whether event.preventDefault() was ever called on this event object.
event.isImmediatePropagationStopped()
Pengembalian apakah event.stopImmediatePropagation () pernah disebut pada objek acara.
event.isPropagationStopped()
Pengembalian apakah event.stopPropagation () pernah disebut pada objek acara.
event.namespace
Namespace tertentu ketika peristiwa tersebut dipicu.
event.pageX
Posisi relatif terhadap tepi kiri dokumen mouse.
event.pageY
Posisi relatif ke tepi atas dokumen mouse.
event.preventDefault()
Jika metode ini disebut, tindakan default dari peristiwa itu tidak akan dipicu.
event.relatedTarget
Elemen DOM lain yang terlibat dalam acara tersebut, jika ada.
event.result
Nilai terakhir yang dikembalikan oleh sebuah event handler yang dipicu oleh peristiwa ini, kecuali nilai itu undefined .
event.stopImmediatePropagation()
Mencegah event handler lain dari yang disebut.
event.stopPropagation()
Mencegah acara dari meluapkan pohon DOM, mencegah penangan induk dari pemberitahuan tentang acara tersebut.
event.target
DOM elemen yang dimulai acara tersebut.
event.timeStamp
Perbedaan dalam milidetik antara waktu peristiwa dipicu dan 1 Januari, 1970.
event.type
Menjelaskan sifat acara.
event.which
Untuk acara kunci atau tombol, atribut ini menunjukkan tombol khusus atau tombol yang ditekan.
.focus()
Mengikat sebuah event handler untuk "fokus" acara JavaScript, atau memicu peristiwa pada elemen.
.focusin()
Mengikat sebuah event handler untuk event "focusin" JavaScript.
.focusout()
Mengikat sebuah event handler untuk event "focusout" JavaScript.
.hover()
Mengikat dua pengatur pada elemen cocok, untuk dieksekusi ketika mouse pointer memasuki dan meninggalkan elemen.
.keydown()
Mengikat sebuah event handler untuk "keydown" Acara JavaScript, atau memicu peristiwa pada elemen.
.keypress()
Mengikat sebuah event handler untuk "menekan tombol" Acara JavaScript, atau memicu peristiwa pada elemen.
.keyup()
Mengikat sebuah event handler untuk event "keyup" JavaScript, atau memicu peristiwa pada elemen.
.live()
Melampirkan handler ke acara untuk semua elemen yang cocok pemilih saat ini, sekarang dan di masa depan.
.load()
Mengikat sebuah event handler untuk event "beban" JavaScript.
.mousedown()
Mengikat sebuah event handler untuk "mousedown" Acara JavaScript, atau memicu peristiwa pada elemen.
.mouseenter()
Mengikat sebuah event handler untuk dipecat ketika mouse memasuki sebuah elemen, atau memicu bahwa penangan pada elemen.
.mouseleave()
Mengikat sebuah event handler untuk dipecat ketika mouse meninggalkan sebuah elemen, atau memicu bahwa penangan pada elemen.
.mousemove()
Mengikat sebuah event handler untuk event "mousemove" JavaScript, atau memicu peristiwa pada elemen.
.mouseout()
Mengikat sebuah event handler untuk "mouseout" Acara JavaScript, atau memicu peristiwa pada elemen.
.mouseover()
Mengikat sebuah event handler untuk event "mouseover" JavaScript, atau memicu peristiwa pada elemen.
.mouseup()
Mengikat sebuah event handler untuk "mouseup" Acara JavaScript, atau memicu peristiwa pada elemen.
.one()
Melampirkan handler untuk sebuah event untuk elemen. Pawang dieksekusi paling banyak sekali per elemen.
jQuery.proxy()
Membawa fungsi dan mengembalikan yang baru yang akan selalu memiliki konteks tertentu.
.ready()
Tentukan fungsi untuk mengeksekusi ketika DOM penuh.
.resize()
Mengikat sebuah event handler untuk "mengubah ukuran" Acara JavaScript, atau memicu peristiwa pada elemen.
.scroll()
Mengikat sebuah event handler untuk event "scroll" JavaScript, atau memicu peristiwa pada elemen.
.select()
Mengikat sebuah event handler untuk event "pilih" JavaScript, atau memicu peristiwa pada elemen.
.submit()
Mengikat sebuah event handler untuk "submit" acara JavaScript, atau memicu peristiwa pada elemen.
.toggle()
Mengikat dua atau lebih penangan pada elemen cocok, akan dieksekusi pada klik alternatif.
.trigger()
Jalankan semua penangan dan perilaku yang melekat pada elemen cocok untuk jenis acara tertentu.
.triggerHandler()
Jalankan semua penangan yang melekat pada elemen untuk sebuah event.
.unbind()
Hapus sebuah event handler yang sebelumnya terpasang dari unsur-unsur.
.undelegate()
Hapus handler dari event untuk semua elemen yang cocok pemilih saat ini, sekarang atau di masa depan, berdasarkan spesifik mengatur elemen root.
.unload()
Mengikat sebuah event handler untuk acara "membongkar" JavaScript.

Contoh penggunaan events .Click() :
Contoh 1 :

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; margin:5px; cursor:pointer; }
  p.hilite { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>First Paragraph</p>

  <p>Second Paragraph</p>
  <p>Yet one more Paragraph</p>
<script>
    $("p").click(function () { 
      $(this).slideUp(); 
    });
    $("p").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });
</script>

</body>
</html>

Contoh 2 :

$('#target').click(function() {
alert('Handler for .click() called.');
});

Memahami Effects

Perpustakaan jQuery menyediakan beberapa teknik untuk menambahkan animasi ke sebuah halaman web. Ini termasuk sederhana, animasi standar yang sering digunakan, dan kemampuan untuk kerajinan efek kustom canggih. Dalam bab ini, kita akan erat memeriksa setiap metode efek, mengungkapkan semua jQuery memiliki mekanisme untuk menyediakan umpan balik visual kepada pengguna. klik link berikut http://api.jquery.com/category/events/untuk lebih jelasnya

Berikut adalah efek-efek yang ada di jQuery, yaitu diantarannya :

.animate()
Lakukan animasi kustom dari satu set properti CSS.
.clearQueue()
Hapus dari antrian semua item yang belum berjalan.
.delay()
Mengatur penghitung waktu untuk menunda eksekusi item berikutnya dalam antrian.
.dequeue()
Jalankan fungsi berikutnya pada antrian untuk elemen cocok.
.fadeIn()
Tampilan unsur-unsur yang cocok dengan mereka buram memudar.
.fadeOut()
Sembunyikan elemen cocok dengan memudar mereka untuk transparan.
.fadeTo()
Sesuaikan opacity dari elemen yang cocok.
.fadeToggle()
Menampilkan atau menyembunyikan elemen dicocokkan dengan opacity menjiwai mereka.
jQuery.fx.interval
Tingkat (dalam milidetik) di mana animasi api.
jQuery.fx.off
Global menonaktifkan semua animasi.
.hide()
Sembunyikan elemen cocok.
.queue()
Tampilkan antrian fungsi akan dieksekusi pada elemen cocok.
.show()
Tampilan unsur-unsur yang cocok.
.slideDown()
Tampilan unsur-unsur cocok dengan gerakan geser.
.slideToggle()
Menampilkan atau menyembunyikan elemen cocok dengan gerakan geser.
.slideUp()
Sembunyikan elemen cocok dengan gerakan geser.
.stop()
Hentikan animasi yang saat ini berjalan pada elemen cocok.
.toggle()
Menampilkan atau menyembunyikan elemen cocok.

Contoh Penggunaan Effect .show() :

<!DOCTYPE html>
<html>
<head>
  <style>
      p { background:yellow; }
      </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Show it</button>

  <p style="display: none">Hello  2</p>
  <script>
    $("button").click(function () {
    $("p").show("slow");
    });
  </script>

</body>
</html>