Cara Bagaimana Menggunakan Jquery Di Server, jQuery adalah pustaka Javascript khusus, dan dirancang untuk membuat penggunaan Javascript di situs web Anda jauh lebih mudah. Ini memiliki banyak metode berbeda, yang pada dasarnya adalah pembungkus untuk banyak kode, Anda harus menulis, alih-alih hanya memanggil metode jQuery yang diperlukan. Fitur jQuery utama adalah: * Panggilan AJAX * Manipulasi DOM / HTML * Manipulasi CSS * Metode peristiwa HTML * Animasi dan efek * dukungan plugin * dukungan lintas-browser

jQuery digunakan oleh banyak perusahaan papan atas dalam proyek mereka, sehingga telah menjadi standar industri. Jika Anda sibuk di bidang ini, atau ingin meningkatkan keterampilan Anda, ada baiknya melihat jQuery.

Dalam panduan ini saya akan menjelaskan cara mengatur jQuery dan akan membahas beberapa fitur menarik, yang diberikannya.

Apa itu DOM

DOM atau Document Object Model – adalah platform dan bahasa antarmuka program independen, yang memungkinkan program dan skrip mengakses HTML dan beberapa dokumen lain (XML, XHTML) dan mengubah konten, struktur dan desain mereka. DOM memperlakukan dokumen seperti itu sebagai struktur pohon, di mana setiap node adalah sebuah objek, dan dengan memanipulasi objek tersebut representasi visual dari HTML / XML / dll diubah. Pada dasarnya ketika Anda membuka antarmuka halaman web html dibuat oleh HTML.

Awalnya tidak ada yang mengira akan ada Javascript, atau hal lain yang digunakan, dan HTML tidak seperti sekarang. Dari sudut pandang modern, khususnya dalam Javascript, halaman web adalah UI untuk bahasa pemrograman. Jadi pada dasarnya DOM adalah semacam jembatan antara kode itu sendiri dan elemen halaman. Javascript berorientasi objek. Jadi setiap objek, misalnya <button> </button>, yang Anda lihat di kode halaman, adalah objek DOM.

Baca Juga : Membuat Filter Kustom di jQuery

Jika Anda ingin beroperasi dengan suatu objek menggunakan Javascript, Anda harus memiliki objek DOM, yang mewakilinya. Setelah itu, Anda dapat berinteraksi dengan properti objek, metode, dll. Ini sebenarnya semua terkait dengan Javascript, tetapi apa artinya untuk jQuery? jQuery menyederhanakan kode halaman web Anda secara visual, dan lebih mudah untuk menavigasi melaluinya.

Kode HTML memiliki struktur berbasis pohon, jadi dengan berpindah melalui pohon ini, dan melihat setiap objek dengan hati-hati. Inilah mengapa penting untuk menjaga kode Anda tetap bersih dan mudah dibaca. KISS berlaku sempurna untuk menggunakan jQuery.

Pengaturan

Secara resmi ada dua cara untuk menginstal jQuery: 1) Mendapatkannya dari Content Delivery Network (CDN), misalnya https://cdnjs.com/libraries/jquery/ Untuk mendapatkannya dari CDN, kunjungi misalnya https: / /cdnjs.com/libraries/jquery/ atau gunakan microsoft, atau link Google CDN, dengan menautkannya dalam kode html. Google:

<head>
  <script>src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

Microsoft:

>      <head>
>      <script>src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
>      </head>

Bonus besar dari versi CDN, adalah jika pengunjung situs web Anda telah mengunjungi situs lain, dia mungkin sudah memiliki jQuery cache, dan dengan demikian halaman Anda akan memuat lebih cepat.

2) Mengunduh dari situs web resmi jQuery.com Ada dua versi: * Pengembangan: tidak disarankan, ini adalah versi pengujian * Produksi: versi dirilis dan didukung

benjaminsterling Untuk mengunduh dari situs resmi, kunjungi http://jquery.com/download/ Perpustakaan jQuery adalah file javascript, dan Anda mengaktifkannya hanya dengan menambahkan ke file html Anda di bagian berikut. Jangan lupa letakkan file jQuery di dekat file html yang sedang Anda edit atau buat.

>     <head>
>     <script src="jquery-3.2.1.min.js"></script>
>     </head>

Penggunaan dasar

1) Pertama-tama mari buat halaman html:

>      <!doctype html>
>         <html>
>         <head>
>             <title>jQuery demo</title>
>         </head>
>         <body>
>             <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
>             <script>
>         
>         // Write your code here
>              
>             </script>
>         </body>
>         </html>

Atribut src menunjuk ke sumber jQuery, dalam contoh ini saya telah menggunakan link CDN Miscrosoft. Jika Anda menggunakan salinan lokal, simpan file yang diunduh di direktori yang sama dengan file html Anda, dan arahkan ke sana.

2) Menjalankan kode hanya ketika halaman dimuat (DOM siap untuk dimanipulasi). Jelas kami ingin menjalankan kode kami hanya ketika halaman dimuat penuh, jQuery memiliki pernyataan khusus, yang disebut acara siap untuk tujuan ini. Ini memungkinkan Anda untuk menjalankan kode segera setelah DOM siap untuk dikontrol, tanpa perlu menunggu spanduk dan semua gambar dimuat. Pernyataan ini terlihat seperti ini:

>     $( document ).ready(function() {
>          // Write your code here
>      });

Misalnya mari kita tampilkan teks, jika sudah bisa dikontrol

>     $( document ).ready(function() {
>          $("p").text("DOM is loaded.");     
>      });

Sekarang jika Anda meletakkan potongan kode itu di halaman html Anda, jadi akan terlihat seperti ini

>     <!doctype html>
>     <html lang="en">
>     <head>
>         <title>jQuery demo</title>
>         <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
>         <script>
>         $(document).ready(function () {
>         $("p").text("DOM is loaded.");     
>     });  
>         </script>
>     </head>
>     <body>
>     <p>DOM is not loaded</p>
>     </body>
>     </html>

Anda akan melihat pesan bahwa DOM dimuat.

Penyeleksi

Selektor adalah salah satu bagian terpenting dari jQuery. Mereka memungkinkan Anda untuk memanipulasi elemen HTML. Pemilih digunakan untuk memilih atau “menemukan” elemen HTML halaman, berdasarkan pengenal, kelas, jenis, atribut, dan lainnya. Ada beberapa pemilih unik, tetapi banyak yang didasarkan pada pemilih CSS Semua penyeleksi jQuery harus dimulai dengan

>     $()

Berikut adalah beberapa selektor yang digunakan secara luas * $ (“*”) memilih semua elemen * $ (this) memilih elemen HTML saat ini * $ (“p: first”) memilih elemen paragraf pertama * $ (“[href]”) memilih semua elemen dengan atribut href * $ (“: button”) pilih semua <button> <input> dengan elemen type = “button” * $ (“tr: even”) Pilih semua elemen genap <tr> * $ (“tr: odd” ) Pilih semua elemen yang tidak rata <tr>

Jangan ragu untuk menggunakan alat ini untuk menguji penyeleksi yang berbeda.

mari kita sembunyikan elemen dengan pengenal “hideme” pada klik tombol mouse

>     $(document).ready(function(){
>       $("button").click(function(){
>         $("#hideme").hide();
>       });
>     });

Jadi pada dasarnya pada tombol mouse klik elemen dengan pengenal hideme akan disembunyikan. Berikut contoh lengkapnya:

>     <!DOCTYPE html>
>     <html>
>     <head>
>     <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
>     </script>
>     <script>
>     $(document).ready(function(){
>       $("button").click(function(){
>         $("#hideme").hide();
>       });
>     });
>     </script>
>     </head>
>     
>     <body>
>     <h2>Header</h2>
>     <p>text</p>
>     <button>Hide</button>
>     <div style="background-color:tomato;height:50px;width:50px;position:absolute;"
> id="hideme"></div>
>     </body>
>     
>     </html>

jQuery events

Salah satu tujuan utama jQuery adalah membalas untuk acara tertentu, pada dasarnya melakukan sesuatu di halaman web, ketika acara tertentu dipicu. Beberapa event tersebut adalah: * click () – mouse event, terjadi ketika elemen diklik pada * dbclick () – event mouse, sama tetapi untuk doubleclick * keypress () – event keyboard, terjadi pada penekanan tombol * mouseenter () dan mouseleave () – peristiwa mouse, terjadi saat Anda kursor memasuki area elemen, dan membiarkannya * focus () – terjadi, saat formulir web difokuskan

Ada lebih banyak acara, silakan lihat di situs resmi jQuery. Misalnya, untuk menetapkan peristiwa klik ke semua paragraf di halaman, gunakan:

>     $("p").click();

Sekarang Anda perlu menentukan apa yang akan terjadi saat diklik:

>     $("p").click(function(){
>       // action you want
>     });

Mari kita sembunyikan paragraf pada klik mouse:

>     <!DOCTYPE html>
>     <html>
>     <head>
>     <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
>     </script>
>     <script>
>     $(document).ready(function(){
>       $("p").click(function(){
>         $(this).hide();
>       });
>     });
>     </script>
>     </head>
>     <body>
>     
>     <p>click on me to hide</p>
>     <p>this will also be hidden after click</p>
>     
>     </body>
>     </html>

jQuery efek

jQuery juga memiliki cara mudah untuk menambahkan beberapa efek ke halaman web Anda, dari animasi sederhana hingga efek kompleks. Berikut adalah beberapa di antaranya: * .animate () – menjalankan animasi tertentu dengan properti CSS tertentu * .clearQueue () – membersihkan antrian dari semua yang belum dieksekusi * .delay () – menunda eksekusi item antrian * .fadeOut () – mengubah elemen menjadi tidak terlihat, dengan memudarkannya menjadi tidak terlihat

Baca Juga : Belajar Php Untuk Pemula

Ada banyak efek yang berbeda, silakan lihat di sini. Mari kita siapkan contoh animasi sederhana, efek memungkinkan kita untuk berkreasi. Dalam contoh ini, mari kita lakukan animasi elemen div yang bergerak ke kiri:

>     $(document).ready(function(){
>       $("button").click(function(){
>         $("div").animate({left:'250px'});
>       });
>     });

Seperti yang Anda lihat, ketika dokumen sudah siap, pada tombol mouse klik elemen div akan bergerak ke kiri sebesar 250 piksel. Contoh lengkapnya terlihat seperti ini:

>     <!DOCTYPE html>
>     <html>
>     <head>
>     <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
>     </script>
>     <script> 
>     $(document).ready(function(){
>       $("button").click(function(){
>         $("div").animate({left:'250px'});
>       });
>     });
>     </script> 
>     </head>
>      
>     <body>
>     <button>move the element</button>
>     <div style="background-color:tomato;height:50px;width:50px;position:absolute;">
>     </div>
>     
>     </body>
>     </html>

Kesimpulan

Sekarang Anda memiliki pengetahuan dasar tentang cara menggunakan jQuery. Mulailah dengan hal-hal sederhana dan pindah ke membuat halaman web yang kompleks, memanfaatkan peristiwa, efek, penyeleksi dan fitur lainnya. Anda sudah tahu cara mengaktifkan jQuery, cara memilih objek, cara melakukan acara, dan menambahkan efek khusus. Ini bisa menjadi awal yang baik untuk menguasai semua fitur jQuery.