#belajar jquery

[loveyourcode-blog1]

Belajar jQuery Event, jQuery Effects dan jQuery no Conflict

New Post has been published on https://loveyourcode.com/belajar-jquery-event-jquery-effects-dan-jquery-no-conflict/

Belajar jQuery Event, jQuery Effects dan jQuery no Conflict

Belajar jQuery Events, jQuery Effects dan jQuery no Conflict adalah lanjutan dari materi sebelumnya Memahami Fungsi jQuery Selector, artikel kali ini akan memberikan pemahaman tentang jquery lebih mendalam sehingga kamu dapat mengaplikasikan jquery dengan baik didalam coding.

Baca juga : Belajar jQuery dasar dengan mudah

Baca juga : OOP pada Javascript

jQuery Events

jQuery event adalah suatu method untuk memicu atau melampirkan fungsi pada element yang dipilih di suatu halaman web. Berikut beberapa daftar jQuery event yang sering digunakan:

Tabel jQuery Events

ready() Menentukan fungsi yang akan dieksekusi ketika DOM sepenuhnya diload click() Menentukan fungsi yang akan dieksekusi ketika user melakukan klik pada suatu elemen dblclick() Menentukan fungsi yang akan dieksekusi ketika user melakukan double klik pada suatu elemen mouseenter() Menentukan fungsi yang akan dieksekusi ketika mouse pointer masuk/mengarah pada suatu elemen mouseleave() Menentukan fungsi yang akan dieksekusi ketika mouse pointer keluar dari suatu elemen focus() Menentukan fungsi yang akan dieksekusi ketika inputan berada di areanya blur() Menentukan fungsi yang akan dieksekusi ketika inputan kehilangan focus hover() Menentukan fungsi yang akan dieksekusi ketika mouse pointer mengarah pada suatu elemen keydown() Menentukan fungsi yang akan dieksekusi ketika menekan keypad arah bawah keyup() Menentukan fungsi yang akan dieksekusi ketika menekan keypad arah atas keypress() Menentukan fungsi yang akan dieksekusi ketika keypad ditekan

  jQuery Effects

Salah satu kemampuan dari library jQuery adalah memiliki effect-effect siap pakai yang dapat digunakan oleh halaman website. Berikut adalah beberapa diantaranya :

Tabel jQuery Effects

Nama Effect Fungsi Sintaks jQuery show() effect Menampilkan elemem yang tersembunyi $(selector).show(speed,callback) jQuery hide() effect Menyembunyikan elemen yang dipilih $(selector).hide(speed,callback) jQuery fadeIn() effect Menampilkan elemen yang dipilih jika tersembunyi, secara efek memudar $(selector).fadeIn(speed,callback) jQuery fadeOut() effect Menyembunyikan elemen yang dipilih jika, secara efek memudar $(selector).fadeOut(speed,callback) jQuery fadeTo() effect Mengatur tingkat kepudaran elemen terpilih menju tingkat opacity yang ditentukan $(selector).fadeTo(speed,opacity,callback) jQuery slideDown() effect Menampilkan elemen yang tersembunyi, secara efek sliding $(selector).slideDown(speed,callback) jQuery slideUp() effect Menyembunyikan elemen secara efek sliding $(selector).slideUp(speed,callback) jQuery animate() effect Mengubah suatu elemen dari satu keadaan ke keadaan yang lainnya berdasarkan CSS $(selector).animate(style,speed,easy,callback) jQuery stop() effect Menghentikan animasi yang sedang berjelan $(selector).stop(stopAll,goToEnd) jQuery toggle() effect menggabungkan antara effect hide () dan effect show () untuk elemen yang dipilih $(selector).toggle(speed,easing,callback) jQuery callback() effect Fungsi callback dieksekusi setelah suatu effect selesai dijalankan jQuery chaining() effect Dapat menjalankan beberapa effect jQuery pada satu elemen yang sama

  jQuery noConflict

jQuery juga memuat mode .noConflict() yang melepaskan kontrol dari $. Fitur ini sangat berguna jika jQuery digunakan bersama dengan library lainnya yang juga memakai penanda $. Pada mode no-conflict, kita bisa menggunakan jQuery sebagai pengganti dari $ tanpa kehilangan fungsionalitasnya.

Cara penulisan jQuery noConflict yang umum digunakan adalah sbb :

Menggunakan $.noConflict();

<script src="other_lib.js"></script> <script src="jquery.min.js"></script> <script type="text/javascript"> $.noConflict(); // Code that uses other library's $ can follow here. </script>

Objek yang asli direferensikan oleh $ kembali ke $

<script src="other_lib.js"></script><script src="jquery.min.js"></script> <script type="text/javascript"> jQuery.noConflict();   // Do something with jQuery  jQuery( "div p" ).hide();  // Do something with another library's $()  $( "content" ).style.display = "none"; </script>

[loveyourcode-blog1]

Memahami fungsi jQuery Selector

New Post has been published on https://loveyourcode.com/memahami-fungsi-jquery-selector/

Memahami fungsi jQuery Selector

Lebih memahami jQuery Selector

Selector merupakan konsep paling penting didalam jQuery fungsi utama jQuery ada pada selector. Selector dibuat untuk memilih element-element HTML dan melakukan aksi terhadap element yang dipilih. Selector pada jQuery :

$(selector).action()

Tabel 4.2 jQuery Selector

$ Mendefinisikan jQuery (selector) Untuk menunjukan element yang akan dipilih atau dituju action() Aksi jQuery yang akan dilakukan terhadap element yang dipilih

  Untuk menggunakan selector yang aman, sebaiknya dilakukan setelah semua page DOM selesai terbaca. Kita dapat melakukannya dengan fungsi berikut :

$(document).ready(function() //tuliskan kode disini... );

Kode di atas berarti, kode akan dijalankan apabila halaman HTML telah selesai diload semua. Penulisan atau pemanggilan selector jQuery dilakukan di dalam sintaks diatas. Dengan javasript biasanya menggunakan kode seperti ini :

window.onload = function() //tuliskan kode anda di sini

  Baca Juga : 

Materi 1: OOP di Javascript

Materi 2: Berkenalan dengan jQuery

Macam-Macam jQuery Selector

Terdapat beberapa selector yang dipakai untuk jQuery, diantaranya adalah :

a.   jQuery Basic Selectors

Selector dalam jQuery hampir mirip dengan selector CSS. Selector akan mencari element pada HTML sesuai dengan perintah yang ada dalam selector.

Selector Tag

Mendeklarasikan elementnya dengan nama tag yang ada pada HTML dengan langsung menyebut nama tag atau element-nya.

$("p").hide() menyembunyikan semua paragraf atau konten dari tag <p>

Selector id

Selector id pada jquery sama dengan selector id pada css. Sebagai penunjuk selector id menggunakan tanda kres (#). Element yang menggunakan selector id hanya boleh digunakan satu kali saja pada satu halaman HTML. Cara menggunakan selector id adalah dengan menyertakan tanda kres (#) sebelum nama element-nya. Contoh :

$("#test").show() menampilkan element yang mempunyai id="test"

  Selector class

Penggunaanya sama dengan selector class pada css. Sebagai penunjuk selector class menggunakan tanda titik (.). Element yang menggunakan selector class boleh digunakan berulang-ulang pada satu halaman HTML. Cara menggunakan selector class adalah dengan menyertakan tanda titik (.) sebelum nama element-nya.

$(".test").hide() menyembunyikan element yang mempunya class="test"

  b.   jQuery Element Selectors

jQuery mirip CSS dalam hal memilih element HTML .

$(“p”)               : memilih semua element <p>

$(“p.intro”)       :memilih semua element <p> yang mempunyai class=”intro”.

$(“p#demo”)    : memilih element <p> yang punya id=”demo”.

c.   jQuery Hierarchy Selectors

Tabel jQuery Hierarchy Selectors

No Hierarchy Selectors Deskripsi 1 Child

(“parent >

child“)

Memilih secara langsung semua elemen child yang ditentukan tanpa mengeksekusi “parents”

Contoh :

$(“ul.top > li”)

Artinya :

Memilih semua tag <li> yang menjadi child dari parentsnya yaitu tag <ul>. Tanpa memilih tag <ul> yang juga memiliki atribut class top.

  Contoh :

<ul class=”top”>

<li>Sunday

</li>   <li>Monday

</li>

</ul>

2 Descendant (“ancestor

descendant“)

  Memilih semua elemen yang menjadi descendants yang diberikan dari ancestor.

  Artinya :

Memilih semua <span> elements yang terkandung dalam tag <body>. Tag span yang terpilih dapat terletak dalam tag <div> maupun dalam tag <p>.

  Contoh :

$(“body span”);

3  

Next Adjacent

(“prev +

next“)

  Digunakan untuk memilih elemen saudara “siblings” berikutnya yang segera mengikuti elemen tertentu dalam suatu dokumen.

  Contoh :

$(“label + input”)

Contoh :

<form>    <label>Name:</label>

<input name=”name”>

</form>

4 Next Siblings

(“prev ~

siblings“)

  Digunakan untuk memilih semua elemen saudara atau “siblings” berikutnya dari unsur tertentu yang memiliki orang tua atau “parents” yang sama.

Contoh :

$(“#prev ~ div”)

  Contoh :

<span id=”prev”>

After</span>

<div>sibling1 </div>

<div>sibling2 <div>

d.   jQuery Attribute Selectors

jQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada.  Berikut adalah beberapa contohnya :

$(“[href]”) memilih semua elemen dengan atribut href.

$(“[href=’#’]”) memilih semua elemen dengan atribut href bernilai=”#”.

$(“[href$=’.jpg’]”) memilih semua elemen dengan atribut href yang mengandung “.jpg”. Selain itu beberapa contoh lain dari penggunan jQuery Attribute Selectors adalah:

$(document).ready(function() $(“a[href*=’coba’]”).addclass(`contain`); $(“a[href~=’coba’]”).addclass(`contain`); $(“a[href!=’coba’]”).addclass(`contain`); $(“a[href^=’coba’]”).addclass(`contain`); );

$(“a[href*=’coba’]”).addclass(`contain`); memilih semua elemen dengan atribut href yang mengandung kata ‘coba’

$(“a[href~=’coba’]”).addclass(`contain`); akan men-select semua link a yang hrefnya ‘coba’

$(“a[href!=’coba’]”).addclass(`contain`); memilih  semua  elemen  dengan  atribut  href  dengan  nilai  bukan  sama dengan “coba”.

$(“a[href^=’coba’]”).addclass(`coba`); memilih semua elemen dengan atribut href yang diawali dengan kata ‘coba’

[loveyourcode-blog1]

Berkenalan dengan jQuery yang Powerful

New Post has been published on https://loveyourcode.com/belajar-jquery-dasar/

Berkenalan dengan jQuery yang Powerful

Pengenalan jQuery

Sebelum membahas jQuery sangat disarankan kamu sudah mengerti atau paham tentang javascript karena jQuery adalah pengembangan dari javascript. berikut materi javascript yang bisa membantu kamu belajar jQuery:

Baca ini :

Panduan 1: Mengenal Konsep Javascript Dasar

Panduan 2: Panduan Javascript Lanjutan

Panduan 3: Object Oriented Programming pada Javascript

  jQuery merupakan singkatan dari “Javascipt Library”, memiliki semboyan “write less, do more” yang memiliki arti kurang lebih adalah penyederhanaan fungsi-fungsi rumit menjadi lebih ringkas. Dirancang dengan tujuan untuk memperingkas kode-kode javascript. Dirilis pertama kali tahun 2006 oleh john Resig. jQuery telah mencuri perhatian para developer web dan banyak digunakan oleh website terkemuka di dunia. Sebelum mulai mempelajari jQuery, kalian terlebih dahulu harus mengerti dasar-dasar pemakaian HTML, CSS dan Javascript.

Kemampuan Library jQuery

Library jQuery memiliki kemampuan untuk :

Kemudahan mengakses element-element HTML

Menyederdahanakan kode javascript lainnya

Penanganan event HTML

Efek-efek Javascript dan animasi

Modifikasi HTML DOM (Document Object Model)

Manipulasi element HTML

Manipulasi element CSS

  Hubungan Javascript dengan jQuery

Tabel Hubungan Javascript dengan jQuery

  No Javascipt jQuery 1. Pengertian  : JavaScript adalah salah satu bahasa scripting yang paling populer dan dapat berjalan di semua browser utama seperti: Internet Explorer, Firefox, Chrome, Opera, dan Safari. JQuery merupakan library JavaScript yang menyederhanakan kode javascript, digunakan untuk penanganan event, animasi, serta interaksi ajax untuk pengembangan web yang lebih cepat. 2. Tersusun dari : JavaScript adalah kombinasi dari ECMA Script dan Document Object Model (DOM). jQuery menggunakan Document Object Model (DOM).     3. Penerapan dalam WEB : JavaScript membutuhkan banyak proses untuk menciptakan aplikasi berbasis web. Membuat aplikasi berbasis web menggunakan jQuery menjadi lebih mudah 4. Sintaks lebih pendek (memperingkas JavaScript) document.getElementsByTag Name(“p”) $(“p”);

  Penerapan jQuery di HTML

Untuk menggunakan library jQuery di website kita, terdapat beberapa langkah yang perlu dilakukan :

Mengaksesnya secara online :

Google Ajax API CDN (also support SSL via HTTPS)

http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js

Microsofft CDN (also support SSL via HTTPS)

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js

jQuery CDN (via media template)

http://code.jquery.com/jquery-1.11.1.min.js (minified version)\

http://code.jquery.com/jquery-1.11.1.js (source version)

Mengaksesnya dari local komputer (di dalam website / offline) :

Download terlebih dahulu file jquery-1.11.2.min.js dari situs http://www.jquery.com

Taruh file jquery-1.11.2.min.js di dalam folder web kalian

Setiap akan menggunakan jquery, jangan lupa untuk memanggil library jquery-1.11.2.min.js kedalam halaman html kalian, seperti contoh berikut :

<scripttype="text/javascript" src="jquery-1.11.1.min.js"></script>

Selanjutnya, silahkan gunakan jQuery event maupun jQuery effect yang ingin kalian terapkan di website kalian.

  Perbedaan versi jQuery

Terdapat beragam versi pada Jquery. Pada versi baru biasanya terdapat penambahan fungsi baru dari fungsi jquery yang sebelumnya. Dan memiliki kapasitas yang lebih besar. Perbedaan Jquery.js (tanpa min) dengan jquery.min.js(menggunkan min). Dari keduanya mempunyai kegunaan dan fungsi sama. Penggunaan “min” menandakan bahwa jquery tersebut telah dikompres (compress) sehingga muatan atau bebanya telah terkurangi dengan tujuan untuk mempercepat waktu loading. Untuk saat ini versi terbaru dari jQuery adalah jquery-1.11.2.min.js lebih lengkapnya, bisa download langsung dari website resmi jQuery : http://jquery.com/

[duniailkom]

Tutorial Belajar jQuery Part 21: Cara Membuat Game Sederhana dengan jQuery

Tutorial Belajar jQuery Part 21: Cara Membuat Game Sederhana dengan jQuery

Tutorial kali ini bisa dibilang merangkum semua hal yang telah dipelajari dari Tutorial Belajar jQuery Duniailkom dari part 1 hingga 20. Kali ini saya akan membahas cara membuat sebuah game sederhana menggunakan jQuery.

Membuat Game “Kotak” dengan jQuery

Game yang akan saya buat terbilang sangat sederhana agar kode programnya juga tidak kompleks:

Perlu juga saya informasikan, jQueryhanyalah…

View On WordPress

[duniailkom]

Tutorial Belajar jQuery Part 20: Cara Membuat Efek Animasi dengan jQuery

Tutorial Belajar jQuery Part 20: Cara Membuat Efek Animasi dengan jQuery

Dalam lanjutan tutorial belajar jQuery di duniailkom kali ini kita akan mempelajari cara membuat efek animasi dengan jQuery. Method yang akan digunakan adalah: animate().

Membuat Efek Animasi dengan jQuery

Salah satu alasan populernya penggunaan jQuery adalah kemudahan dalam membuat berbagai efek menarik. jQuery sendiri memiliki plugin/library tambahan yang khusus menyediakan berbagai efek…

View On WordPress

[duniailkom]

Tutorial Belajar jQuery Part 19: Cara Membuat Efek Slide dengan jQuery

Tutorial Belajar jQuery Part 19: Cara Membuat Efek Slide dengan jQuery

Setelah efek Show, Hide, Fadein dan Fadeout, dalam tutorial belajar jQuery kali ini kita akan membahas cara membuat efek Slide dengan jQuery.

Membuat Efek Slide dengan jQuery

Efek slide adalah efek kemunculan sebuah elemen HTML dengan cara turun dari atas kebawah. Untuk membuat efek ini, jQuery menyediakan 2 buah method: slideUp() dan slideDown().

Seperti yang bisa ditebak, method slideUp() digu…

View On WordPress

[duniailkom]

Tutorial Belajar jQuery Part 18: Cara Membuat Efek Fade dengan jQuery

Tutorial Belajar jQuery Part 18: Cara Membuat Efek Fade dengan jQuery

Dalam tutorial sebelumnya, saya telah membahas cara penggunaan efek hide dan show jQuery. Masih berhubungan dengan efek tampilan HTML, kali ini kita akan mempelajari Cara Membuat Efek Fade dengan jQuery.

Membuat Efek FadeIn dan FadeOut dengan jQuery

Efek fade sebenarnya mirip dengan efek show dan hide, akan tetapi kali ini element HTML akan disembunyikan dengan mengubah transparasi-nya, yakni…

View On WordPress

[duniailkom]

Tutorial Belajar jQuery Part 17: Cara Membuat Efek Show dan Hide jQuery

Tutorial Belajar jQuery Part 17: Cara Membuat Efek Show dan Hide jQuery

Selain efek-efek dasar JavaScript, seperti menambahkan elemen atau memanipulasi kode CSS, jQuery juga menyediakan berbagai efek visual menarik lainnya. Kali ini kita akan membahas Cara Membuat Efek Show dan Hide elemen HTML dengan jQuery.

Membuat Efek Show dan Hide dengan jQuery

Efek show adalah efek memunculkan sebuah element HTML secara perlahan, sedangkan efek hidekebalikan dari show, yakni…

View On WordPress