rumah > Kesalahan > Pelajaran Mengapa JQuery memiliki tanda dolar di mana-mana? Pengantar jQuery


Pelajaran Mengapa JQuery memiliki tanda dolar di mana-mana? Pengantar jQuery




JQuery HTML adalah perpustakaan yang dirancang untuk "menulis lebih sedikit dan berbuat lebih banyak." Ini bukan bahasa pemrograman, tetapi alat yang digunakan untuk membuat tugas-tugas umum JavaScript lebih mudah diterapkan.

JQuery memiliki keuntungan tambahan karena kompatibel lintas-browser. Anda dapat yakin bahwa kode Anda akan ditafsirkan di browser modern mana pun.

Membandingkan penulisan program sederhana “Halo, Dunia! " menggunakan JavaScript dan jQuery, Anda dapat melihat perbedaan di antara keduanya.

JavaScript

document.getElementById("demo").innerHTML = "Halo, Dunia!";

JQuery

$("#demo").html("Halo, Dunia!");

Contoh singkat ini mengilustrasikan bagaimana menggunakan jQuery Anda dapat mencapai hasil yang sama seperti JavaScript standar, namun lebih ringkas.

Sasaran

Tutorial ini tidak mengasumsikan pengetahuan dasar apa pun tentang jQuery, tetapi mencakup topik-topik berikut:

  • Cara menginstal jQuery di proyek web;
  • Definisikan konsep pengembangan web penting seperti API, DOM, dan CDN;
  • Pemilih jQuery umum, acara dan efek;
  • Contoh untuk menguji konsep yang dipelajari di artikel ini.
pengaturan jQuery

JQuery adalah file JavaScript yang akan Anda tautkan ke dalam dokumen Anda. Cara menghubungkan JQuery ke HTML:

  • Unduh salinan lokal;
  • Tambahkan tautan ke file melalui jaringan pengiriman konten (CDN).

Catatan. Jaringan Pengiriman Konten (CDN) adalah sistem beberapa server yang menyajikan konten web ke pengguna berdasarkan lokasi geografis mereka. Saat Anda menautkan ke file jQuery melalui CDN, file tersebut akan disajikan kepada pengguna lebih cepat dan efisien dibandingkan jika dihosting di server Anda sendiri.

Dalam contoh kami, kami akan menggunakan tautan jQuery melalui CDN. Versi terbaru jQuery dapat ditemukan di Google. Jika Anda ingin mengunduh perpustakaannya, Anda bisa mendapatkan salinan jQuery dari situs resminya.

Mari kita membuat proyek web kecil. Ini akan terdiri dari file style.css, scripts.js dan file index.html utama.


Tetapkan markup HTML dasar dan simpan di index.html .

Indeks.html

Demo jQuery

Indeks.html

Demo jQuery

Skrip JavaScript (scripts.js) harus disertakan dalam dokumen di bawah perpustakaan jQuery atau tidak akan berfungsi.

Catatan. Jika Anda mengunduh salinan lokal jQuery, simpan di folder js/ dan sambungkan melalui tautan js/jquery.min.js.

Perpustakaan jQuery telah ditambahkan ke HTML dan kami memiliki akses penuh ke API jQuery.

Menggunakan jQuery

jQuery digunakan untuk terhubung ke elemen HTML di browser melalui DOM.

Document Object Model (DOM) adalah metode dimana JavaScript (dan jQuery) berinteraksi dengan HTML di browser. Untuk melihat apa itu DOM, di browser Anda, klik kanan pada halaman web saat ini dan pilih "Lihat Kode". Ini akan membuka panel "Alat Pengembang". Kode HTML yang Anda lihat di dalamnya adalah DOM.

Setiap elemen HTML dianggap sebagai simpul DOM—sebuah objek yang dapat diakses oleh JavaScript. Benda-benda ini memiliki struktur pohon, dengan elemen yang paling dekat dengan akar dan setiap elemen merupakan cabang pohon. JavaScript dapat menambah, menghapus, dan memodifikasi elemen mana pun.

Jika Anda mengklik kanan lagi dan memilih "Lihat Sumber", Anda akan melihat HTML mentah. Pada awalnya Anda mungkin bingung tentang DOM dan kode sumber HTML, tetapi keduanya adalah hal yang berbeda. Kode sumber halaman sama persis dengan apa yang tertulis di file HTML. Itu statis dan tidak berubah dan tidak terpengaruh oleh JavaScript. Pada gilirannya, DOM bersifat dinamis dan dapat berubah.

Lapisan DOM terluar, yang membungkus seluruh node, adalah objek dokumen. Untuk menggunakan jQuery pada suatu halaman, Anda perlu memastikan bahwa dokumen tersebut "siap".

Buat file scripts.js di folder js/ dan tambahkan kode berikut ke dalamnya:

js/scripts.js

Semua kode jQuery yang dimasukkan ke dalam HTML akan dibungkus dengan kode di atas. Ini hanya akan berfungsi setelah DOM siap untuk mengeksekusi kode JavaScript. Meskipun dalam beberapa kasus JavaScript tidak dapat dimuat hingga elemen dirender, memasukkan blok ini dianggap sebagai praktik terbaik.

Untuk menjalankan skrip “Halo, Dunia!” dan menampilkan teks di browser menggunakan jQuery, pertama-tama kita membuat elemen paragraf kosong dengan demo pengidentifikasi diterapkan padanya.

Indeks.html

... ...

JQuery dipanggil dan ditandai dengan tanda dolar ($) . Kami mengakses DOM dengan jQuery menggunakan sintaks CSS dan menerapkan tindakan dengan metode:

$("pemilih").metode();

Karena pengidentifikasi dalam CSS diwakili oleh simbol (#), kita mengakses pengidentifikasi demo menggunakan pemilih #demo. html() adalah metode yang mengubah markup HTML di dalam suatu elemen.

Sekarang kita akan menempatkan program “Halo, Dunia! " di dalam pembungkus jQuery ready(). Tambahkan baris ini ke fungsi yang ada di file scripts.js Anda:

js/scripts.js

$(dokumen).siap(fungsi() ( $("#demo").html("Halo, Dunia!"); ));

Setelah menyimpan perubahan, Anda dapat membuka file index.html di browser Anda. Jika semuanya berfungsi dengan benar, Anda akan melihat tulisan “Halo, Dunia! »

Klik kanan pada “Halo, Dunia!” " dan pilih " Lihat kode ". Sekarang DOM ditampilkan

Halo Dunia!

. Jika Anda melihat kode sumber halaman tersebut, Anda hanya akan melihat kode HTML asli yang kami tulis.

Penyeleksi

Selector adalah cara kita memberi tahu jQuery HTML elemen mana yang ingin kita kerjakan. Anda dapat melihat daftar lengkap penyeleksi jQuery di dokumentasi resmi.

Untuk mengakses pemilih, gunakan simbol $ diikuti dengan tanda kurung ().

$("pemilih")

String yang dikutip ganda lebih disukai (menurut manual jQuery). Meskipun string dengan tanda kutip tunggal sering digunakan.

Di bawah ini adalah ikhtisar singkat tentang penyeleksi yang umum digunakan.

  • $("*") - wildcard: memilih setiap elemen pada halaman;
  • $(this) - current : memilih elemen saat ini yang sedang dimanipulasi dalam fungsi;
  • $("p") - tag: memilih semua contoh tag

    ;

  • $(".example") - class: memilih semua elemen yang kelas contohnya diterapkan;
  • $("#example") - pengidentifikasi: memilih satu instance dengan contoh pengidentifikasi unik;
  • $("") - atribut: memilih semua elemen yang atribut tipenya disetel ke teks;
  • $("p:first-of-type") - elemen semu: memilih elemen pertama

    .

Saat menghubungkan JQuery ke HTML, Anda akan berhadapan dengan kelas dan id. Kelas digunakan ketika Anda perlu memilih beberapa elemen, dan pengidentifikasi ketika Anda hanya perlu memilih satu.

Acara jQuery

Dalam contoh “Halo, Dunia! "Kode dijalankan ketika halaman dimuat dan dokumen sudah siap, sehingga tidak memerlukan intervensi pengguna apa pun. Dalam hal ini, kita bisa menulis teks langsung dalam HTML, tanpa jQuery. Tapi kita perlu menggunakan jQuery jika kita ingin teks muncul di halaman setelah klik mouse.

Kembali ke file index.html Anda dan tambahkan elemen ke dalamnya. Kami akan menggunakan tombol ini untuk melacak peristiwa klik.

indeks.html

...Klik saya

Kita menggunakan metode click() untuk memanggil fungsi yang berisi kode “Halo, Dunia! "

js/scripts.js

$(dokumen).siap(fungsi() ( $("#trigger").klik(); ));

ID elemennya adalah trigger , kami memilihnya menggunakan $("#trigger") . Dengan menambahkan click() kita mendengarkan event click. Selanjutnya kita memanggil fungsi yang berisi kode kita di dalam metode click().

function() ( $("#demo").html("Halo, Dunia!"); )

Berikut adalah kode HTML jQuery lengkap untuk elemen tersebut.

js/scripts.js

$(dokumen).siap(fungsi() ( $("#trigger").klik(fungsi() ( $("#demo").html("Halo, Dunia!"); )); ));

Simpan file scripts.js dan perbarui index.html di browser Anda. Sekarang, ketika Anda mengklik tombol tersebut, teks “Halo, Dunia!” ".

Peristiwa adalah setiap interaksi pengguna dengan browser menggunakan mouse atau keyboard. Contoh yang baru saja kita buat menggunakan event klik. Anda dapat menemukan daftar lengkap metode acara jQuery di dokumentasi resmi jQuery. Di bawah ini adalah daftar acara yang umum digunakan.

  • click() - klik: terjadi dengan satu klik mouse;
  • hover() - hover: terjadi ketika penunjuk tetikus melayang di atas suatu elemen;
  • submit() - submit: terjadi ketika data formulir dikirimkan;
  • scroll() - scrolling: terjadi saat menggulir halaman atau elemen;
  • keydown() - penekanan tombol: terjadi saat Anda menekan tombol pada keyboard.

Untuk menganimasikan atau menyembunyikan elemen saat pengguna men-scroll halaman, gunakan metode scroll().

Untuk keluar dari menu menggunakan tombol ESC, gunakan metode keydown(). Untuk membuat menu dropdown atau menambahkan HTML ke div menggunakan JQuery, metode click() digunakan.

efek jQuery

Efek jQuery memungkinkan Anda menambahkan animasi dan memanipulasi elemen pada halaman.

JavaScript dan jQuery

Apa itu jQuery

jQuery adalah perpustakaan berbagai layanan perangkat lunak yang berguna untuk memanipulasi elemen markup html dari halaman yang dimuat. Itu ditulis dalam. Keindahannya tidak hanya karena ia memiliki kemampuan yang cukup serius, tetapi juga antarmuka perangkat lunaknya yang sangat sederhana.

Sebelum melanjutkan ke deskripsi jQuery, izinkan saya mengingatkan Anda sekali lagi apa itu jQuery. model objek dokumen atau DOM (Mode Objek Dokumen aku). DOM adalah struktur hierarki objek dalam RAM, sesuai dengan struktur halaman Internet yang dimuat. DOM dihasilkan oleh browser dan menyediakan antarmuka pemrograman untuk bekerja dengan elemen markup, misalnya menggunakan JavaScript yang sama. Dengan menggunakan alat DOM, Anda dapat mencari, menambah dan menghapus elemen dokumen, mengedit atributnya, mengubah gaya, dll. Dengan kata lain, menggunakan DOM dan JavaScript, halaman Internet dinamis dibuat, yang disebut juga halaman DHTML(Halaman HTML Dinamis). Mari kembali ke perpustakaan jQuery. Dengan menggunakan API jQuery, Anda dapat dengan mudah memilih elemen DOM yang Anda perlukan dan melakukan tindakan apa pun terhadap elemen tersebut dari daftar di bawah:

  • Mengubah ;
  • Edit komposisi atribut;
  • Menghapus;
  • Tambahkan keturunan;
  • Pindahkan atau bungkus dengan elemen lain;
  • Lakukan penyalinan;
  • Ikat pengendali acara;
  • Sesuaikan efek visual atau animasi;
Tentu saja, semua ini dapat dilakukan dengan menggunakan DOM dan JavaScript, tetapi mengapa, jika ada seperangkat alat yang siap pakai dan gratis. Jangan lupa tentang kompatibilitas lintas-browser. Jika Anda ingin halaman Anda berfungsi sama di semua browser populer, maka ini memerlukan banyak usaha, karena ada cukup banyak daftar hal yang diterapkan oleh browser yang berbeda secara berbeda. Jika Anda bekerja melalui antarmuka jQuery, Anda bisa melupakan masalah ini. Tentu saja, program ditulis oleh manusia, dan mungkin ada bug di jQuery, tetapi dalam kasus ini Anda dapat mengandalkan perbaikan masalah dalam waktu dekat. Jika Anda sudah familiar dan memiliki gambaran tentang apa itu JavaScript, maka inilah saatnya untuk menguasai jQuery. Dengan munculnya perpustakaan yang luar biasa ini, kemampuan para profesional dan perancang web pemula agak mendatar, yang mungkin menyedihkan bagi para perancang web, namun menginspirasi para perancang web pemula. Mungkin saya agak melebih-lebihkan, tetapi fakta bahwa sekarang setiap orang yang tidak terlalu berpengalaman dalam seluk-beluk pemrograman JavaScript memiliki persenjataan yang cukup serius untuk membuat halaman DHTML yang mengesankan, cepat, dan andal adalah keunggulan jQuery yang tidak dapat disangkal. koneksi jQuery

Pertama, Anda perlu mengunduh perpustakaan. Anda dapat melakukan ini di situs web penulis jQuery: http://jquery.com. Selanjutnya, Anda hanya perlu menghubungkannya menggunakan tag seperti ini:

Itu saja, Anda bisa mulai mengerjakannya. Jika Anda tidak ingin mengunduh, Anda dapat memberikan tautan langsung ke perpustakaan versi terbaru yang terletak di server pengembang: Tautan ke versi terbaru, di satu sisi, bagus, karena terus-menerus memperbaiki beberapa kesalahan dan mengoptimalkan pengoperasian masing-masing fungsinya, namun, di sisi lain, mungkin ada perubahan di versi baru yang tidak Anda harapkan, dan yang akan menyebabkan perubahan pada cara kerja proyek Anda.

antarmuka atau sintaks pemrograman jQuery

Saya sudah mengatakan bahwa sintaks kueri jQuery cukup sederhana. Yaitu request, karena pemrograman dalam JavaScript menggunakan jQuery dapat digolongkan menjadi pemrograman deklaratif, yang berbeda dari pemrograman prosedural klasik karena Anda mendeskripsikan “apa yang perlu dilakukan” dan bukan “bagaimana melakukannya”. Nama perpustakaan mencerminkan esensinya - bahasa kueri dalam konteks JavaScript. Semua permintaan jQuery dimulai dengan panggilan ke fungsi $, yang argumennya adalah permintaan itu sendiri. Jadi, sintaks kueri jQuery secara umum terlihat seperti ini:

$(meminta)[{.Saring(kriteria)}].tindakan(argumen){ .tindakan(argumen)} Meminta adalah pemilih atau daftar pemilih yang dipisahkan dengan koma. Sintaks permintaan sama dengan sintaks pemilih gaya CSS. Jadi kueri jQuery mungkin memulai sesuatu seperti ini:
$(“div”) - pilih semua elemen div;
$(“div, p”) – pilih semua elemen div dan elemen P;
$(“.class_name”) – memilih semua elemen kelas nama kelas;
$(“#element_id”) – memilih elemen dengan pengenal elemen_id;
$(*) – pemilihan semua elemen;
$(“.class_name span”) – memilih semua elemen span dalam semua elemen kelas nama kelas;
$(“#element_id > div”) – pilih semua elemen div, yang merupakan keturunan langsung (anak) dari elemen dengan pengidentifikasi elemen_id.
$(“#element_id .class_name + div”) – memilih semua elemen yang langsung mengikuti elemen kelas nama kelas dalam suatu elemen elemen_id.
$(“#ul_id > li:first”) – memilih elemen pertama li daftar ul_id. Selain itu, Anda juga dapat memilih elemen terakhir atau semua elemen genap atau ganjil ganjil. Ada pilihan lain.
$(“a”) – memilih semua tautan dengan nilai atribut href dimulai dengan “http://ru.wikipedia.org”. Tanpa simbol “^”, kita mendapatkan kondisi untuk pencocokan nilai yang lengkap; jika alih-alih simbol “^” kita meletakkan simbol “$”, kita mendapatkan batasan pencocokan dari akhir, dan simbol * berarti itu nilai atribut harus berisi fragmen yang ditentukan.

Saring– cara memfilter sekumpulan elemen yang dipilih menggunakan kriteria tambahan. Kriterianya sama dengan penyeleksi. Ada dua operasi yang berlawanan satu sama lain: filter dan tidak. Jika Anda menggunakan operasi filter (kriteria), maka hanya elemen yang memenuhi kriteria argumen yang akan tetap dipilih, dan jika bukan, maka hanya yang tidak memuaskan yang akan tersisa. Biasanya, masuk akal untuk menggunakan operasi ini bukan, karena kriteria operasi Saring biasanya mudah digabungkan dengan pemilih fungsi dasar $() . Berikut adalah beberapa contoh penggunaan operasi ini:
$(“div”).not(“.class_name”) – kecualikan semuanya div kelas nama kelas;
$(“td, th, div”).filter(“.class_name”) – pilih elemen td, th, div kelas nama kelas.

Ada juga operasi irisan(dari, ke), yang memungkinkan Anda memilih urutan elemen dengan indeks dari interval [ dari - ke].

Tindakan- ini sebenarnya adalah tindakan itu sendiri - semacam operasi pada sekumpulan elemen yang dipilih. Setiap operasi mengembalikan hasil tertentu: baik himpunan yang sama, jika operasi tidak melibatkan pembuatan atau penghapusan elemen yang dipilih, atau himpunan yang sudah diedit, atau himpunan elemen yang baru dibuat. Berkat ini, Anda dapat menentukan beberapa operasi sekaligus, dipisahkan oleh titik. Contoh di bawah ini akan memilih semua elemen menjangkau, tidak terkait dengan kelas nama kelas dan menyalinnya ke elemen dengan id target:
$("span").not(".class_name").clone().appendTo("#target");

Hasil dari setiap operasi adalah array elemen HTMLElement. Ukuran array dapat ditemukan menggunakan properti panjang atau fungsi size(). Argumen operasi tidak hanya dapat berupa parameter string, tetapi juga hasil kueri lainnya. Berikut adalah contoh bagaimana hasil dari satu kueri dapat ditempatkan di dalam sebuah elemen, yang pada gilirannya merupakan hasil dari kueri lain:
$("span").not(".class_name").clone().appendTo($("span.class_name"))

Anda tidak dapat menggunakan seluruh hasil kueri sebagai argumen, tetapi elemen terpisah darinya:
$("span.class_name").append($("span").not(".class_name"));

Jadi, argumen operasi dapat berupa pemilih sebagai string, atau hasil kueri lain, atau instance apa pun Elemen HTML.

operasi jQuery

Di bawah ini adalah tabel ringkasan dengan operasi jQuery, deskripsi singkatnya, dan tautan ke contoh yang menunjukkan penggunaannya dalam praktik.

Properti

Dapatkan atau tetapkan nilai berbagai properti dari elemen yang dipilih. Jika Anda perlu mendefinisikan nilai properti baru, Anda harus meneruskannya sebagai argumen, misalnya, $(“#element”).text(text_value) atau $(#element”).html(html_value) :

Contoh Deskripsi Nama
teks()Teks.-
mengimbangi()Offset (kiri, atas)., fungsi pergerakan bola bola.bergerak(): $("#ball").offset((kiri:$("#ball").offset().kiri + ini.dx, atas:$("#ball").offset().top + ini. mati)); Fungsi ini dipanggil pada pengatur waktu setiap 10 milidetik.
lebar tinggi()Lebar dan tinggi.-
html()markup html di dalam elemen yang dipilih.

Pemilih jQuery digunakan untuk memilih elemen yang diinginkan pada halaman.

Perintah jQuery

Kode jQuery, seperti kode JavaScript, terdiri dari perintah berurutan. Perintah adalah blok bangunan dasar jQuery.

Sintaks perintah jQuery standar:

$(pemilih).metode();

  • Tanda $ menunjukkan bahwa karakter yang mengikutinya adalah kode jQuery;
  • Pemilih memungkinkan Anda memilih elemen pada halaman;
  • Metode menentukan tindakan yang harus dilakukan pada elemen yang dipilih. Metode di jQuery dibagi menjadi beberapa kelompok berikut:
    • Metode untuk memanipulasi DOM;
    • Metode elemen dekorasi;
    • Metode untuk membuat permintaan AJAX;
    • Metode untuk menciptakan efek;
    • Metode untuk mengikat event handler.
    • $ simbol

    jQuery dapat digabungkan dengan JavaScript biasa.

    Jika sebuah baris dimulai dengan $, itu adalah jQuery; jika tidak ada $ di awal baris, itu adalah baris kode JavaScript.

    Fungsi start() ( //Sembunyikan paragraf dengan id="hid" menggunakan jQuery $("p#hid").hide(); //Ubah isi paragraf dengan id="change" document.getElementById(" change") .innerHTML="Konten ini telah dimodifikasi menggunakan JavaScript.";

    Beberapa perpustakaan JavaScript juga menggunakan $ untuk menunjukkan kodenya. Untuk menghindari konflik nama di antara keduanya, jQuery menyediakan perintah noConflict(). Dengan menggunakan perintah noConflict() Anda dapat mengganti tanda $ dengan tanda lainnya.

    Sintaksis:

    Var custom_name=jQuery.noConflict();


    //Ubah simbol $ standar menjadi nsign var nsign=jQuery.noConflict(); //Ubah warna paragraf menggunakan nsign alih-alih $ nsign(document).ready(function())( nsign("p").css("color","green"); ));

    Lihat sekilas

    penyeleksi jQuery

    Dengan menggunakan penyeleksi, Anda dapat memilih elemen pada halaman untuk menerapkan tindakan tertentu pada elemen tersebut.

    Di bawah ini adalah tabel dengan berbagai contoh penggunaan penyeleksi untuk memilih elemen yang diinginkan:

    Contoh Hasil
    $("p") Semua elemen p yang ada pada halaman akan dipilih.
    $(".par") Semua elemen pada halaman dengan class="par" akan dipilih.
    $("#par") Elemen pertama pada halaman dengan id="par" akan dipilih.
    Memungkinkan Anda memilih elemen HTML saat ini. Klik $(this) di sebelah kiri untuk melihat contoh penggunaan pemilih ini di editor online.
    $("hal.par") Semua elemen p pada halaman dengan class="par" akan dipilih.
    $("hal#par") Semua elemen p pada halaman dengan id="par" akan dipilih.
    $(".par,.header,#panas") Semua elemen pada halaman dengan nilai atribut class="par", class="header" dan id="heat" akan dipilih.
    $("") Semua elemen pada halaman yang memiliki atribut src akan dipilih.
    $("") Semua elemen dengan nilai atribut src="value" akan dipilih.
    $("") Semua elemen dengan nilai atribut src yang diakhiri dengan .gif akan dipilih.
    $("div#bungkus .par1") Semua elemen dengan class=par1 yang berada di dalam elemen div dengan id=wrap akan dipilih.
    $(:masukan") Semua elemen masukan pada halaman akan dipilih.
    $(:tipe") Semua elemen masukan dengan . Misalnya:tombol akan memilih semua elemen, :teks akan memilih semua elemen, dll.

    $(document).ready(function())( //Mengatur ukuran font semua paragraf menjadi 20 piksel $("p").css("fontSize","20px"); //Mengubah warna font elemen dengan id= menjadi hijau el2 $("#el2").css("color","green"); //Ubah warna font elemen dengan class=el3 $(".el3").css(" color","red") ; //Membuat font elemen dengan id=el2 dan class=el3 tebal $("#el2,.el3").css("fontWeight","bold"); //Ubah warna teks tombol menjadi biru $(":input) ").css("color","blue"); //Mengatur ukuran font semua elemen dengan atribut href sama dengan 20 piksel $("").css( "fontSize","20px"); //Ubah warna menjadi hijau pada tautan ke www..site/"]").css("color","green" ));

    Lihat sekilas

    Anda dapat menemukan daftar lengkap penyeleksi jQuery di.

    Mencegah eksekusi kode prematur

    Anda mungkin ingat dari tutorial JavaScript bahwa mengeksekusi kode sebelum dokumen dimuat sepenuhnya sering kali menyebabkan kesalahan.

    Faktanya adalah skrip dapat mengakses konten yang belum dimuat, dan ini selalu menyebabkan kesalahan atau hasil yang tidak diharapkan.

    Untuk menghindari hal ini, kita sering memasukkan kode ke dalam fungsi yang hanya mulai dijalankan setelah dokumen dimuat sepenuhnya.

    Mencegah eksekusi kode prematur di JavaScript:

    function start() (Kode yang akan dieksekusi setelah dokumen dimuat penuh)

    Di jQuery, Anda dapat menghilangkan eksekusi kode prematur dengan cara berikut:

    Mencegah eksekusi kode prematur di jQuery:

    //Metode pertama: $(document).ready(function())( Kode yang akan dieksekusi setelah dokumen dimuat penuh )); //Metode kedua: $().ready(function())( Kode yang akan dieksekusi setelah dokumen dimuat penuh )); //Metode ketiga: $(function())( Kode yang akan dieksekusi setelah dokumen dimuat penuh ));

    Ada metode alternatif lain yang juga membantu menghindari eksekusi dini kode JavaScript dan jQuery dan juga memungkinkan Anda mempercepat pemuatan halaman ( terima kasih kepada pengguna Ghringo Americano karena telah mengingatkan saya tentang hal itu).

    Kode harus ditempatkan di bagian paling akhir badan dokumen (yaitu sebelum ) dalam hal ini, penerjemah JavaScript yang ada di dalam browser akan mulai menguraikan kode hanya setelah dokumen dimuat. Pada metode sebelumnya, skrip dimuat bersamaan dengan pemuatan dokumen, dan kode ini dijalankan setelah dokumen dimuat.

    Dokumentasikan isi isi

    Isi kode badan dokumen yang akan dieksekusi setelah dokumen dimuat sepenuhnya

    Rantai perintah di jQuery

    Untuk mengurangi ukuran kode, Anda dapat merangkai perintah jQuery.

    Perintah dalam rantai akan dijalankan secara bergantian dari kiri ke kanan.

    //Kode tanpa singkatan $("p").css("color","green"); $("p").css("ukuran font","30px"); //Kode pendek $("p").css("warna","hijau").css("ukuran font","30px");

    Lakukan sendiri

    Tugas 1 Mengubah warna dan ukuran font elemen yang tercantum di bawah ini untuk menyorot huruf-huruf dari kata kode.

    Ubah warna dan ukuran font:

    • Elemen dengan id=meadow;
    • Sebuah elemen dengan class=rainbow;
    • Sebuah elemen dengan id=future terletak di dalam elemen dengan id=fut; (elemen ini harus disorot dengan warna selain merah);
    • Elemen yang memiliki atribut set;
    • Elemen dengan atribut last=code.

    Harap dicatat: untuk mengubah warna teks suatu elemen, gunakan metode: css("color","new_text_color"), untuk mengubah ukuran font gunakan metode: css("font-size","font_size_px").

    Penekanan tombol() - menginstal pengendali untuk mengetik karakter dari keyboard, atau memicu kejadian ini.

    Metode ini memiliki tiga kegunaan.

    Penekanan tombol (penangan)

    • eventData - objek yang berisi data untuk diteruskan ke handler. Harus dalam format (fName1:value1, fName2:value2, ...);
    • handler adalah fungsi yang akan ditetapkan sebagai handler.

    Penekanan tombol()

    Memunculkan event penekanan tombol pada elemen halaman yang dipilih.

    Catatan: Karena peristiwa penekanan tombol tidak tercakup dalam spesifikasi resmi apa pun, perilaku sebenarnya yang ditemui saat menggunakannya mungkin berbeda antar browser, versi browser, dan platform.

    Dalam dua varian pertama, metode ini adalah versi singkat dari .on("keypress", handler) , dan pada varian ketiga adalah .

    Peristiwa penekanan tombol dikirim ke elemen ketika pengguna menekan tombol pada keyboard. Hal ini mirip dengan event, kecuali bahwa pengubah dan tombol non-cetak seperti Shift, Esc, dan Delete akan mengaktifkan kembali event, namun bukan event penekanan tombol. Perbedaan lain antara kedua acara tersebut mungkin berbeda tergantung pada platform dan browser.

    Peristiwa penekanan tombol dapat dilampirkan ke elemen apa pun, namun hanya akan diaktifkan pada elemen yang memiliki fokus. Daftar elemen yang dapat menerima fokus berbeda-beda menurut browser, jadi yang paling aman adalah mengikat peristiwa ini ke elemen formulir, karena elemen tersebut selalu dapat menerima fokus.

    Misalnya, pertimbangkan html:

    Sebuah event handler dapat diikat ke kolom input:

    $("#target").keypress(function() ( alert("Event trigger.keypress()"); ));

    $("#target" ) . penekanan tombol(fungsi()(

    alert("Acara dipicu.penekanan tombol()" ) ;

    } ) ;

    Saat kita menekan tombol di kolom input, kita akan melihat pesan “Event.keypress() dimunculkan”.

    Untuk memicu kejadian secara manual, gunakan .keypress() tanpa argumen:

    $("#lainnya").klik(fungsi() ( $("#target").tekan tombol(); ));

    $("#lainnya" ) . klik(fungsi()(

    $("#target" ) . penekanan tombol();

    } ) ;

    Ketika Anda mengklik area dengan id="other" event akan terpicu dan kita juga akan melihat pesan.

    Jika Anda perlu menginstal pengendali penekanan tombol di mana saja pada halaman (misalnya, untuk mengimplementasikan pintasan keyboard global), maka yang terbaik adalah melampirkan perilaku ini ke objek dokumen. Peristiwa penekanan tombol muncul di sepanjang DOM kecuali dihentikan secara eksplisit.

    Kode tombol ditekan

    Pada contoh di atas, untuk mengetahui tombol keyboard mana yang ditekan, kita bisa melihat nilai dari variabel eventObject.which yang berisi kode tombol yang ditekan. Meskipun browser menggunakan properti berbeda untuk menyimpan informasi ini, jQuery menormalkan properti .which sehingga Anda dapat menggunakannya dengan andal untuk mengekstrak kode karakter.

    Perhatikan bahwa metode keydown dan keyup menentukan tombol yang ditekan, dan penekanan tombol menunjukkan karakter mana yang dimasukkan. Jadi, ketika Anda memasukkan bahasa Latin "a", variabel eventObject.yang di dalam event handler keydown atau keyup akan berisi nilai 65, dan di dalam handler penekanan tombol akan berisi nilai 97. Dalam huruf besar, "A" dilaporkan sebagai 65 di semua acara. Karena perbedaan ini, menangani penekanan tombol khusus seperti tombol panah, tombol bawah, atau tombol atas adalah pilihan yang lebih baik.

    catatan tambahan

    Karena metode .keypress() adalah versi singkat dari .on("keypress", handler) , metode ini dapat dihapus menggunakan .off("keypress").

    Dalam JavaScript, simbol dolar biasanya ditemukan dalam deklarasi variabel dan pemanggilan fungsi. Izinkan saya meyakinkan Anda bahwa tidak ada sesuatu yang misterius yang tersembunyi di sini, karena ini hanyalah nama variabel (pengidentifikasi). Tidak ada yang aneh dengan hal ini. Misalnya, kerangka JavaScript yang sangat populer yang pernah saya tulis sebelumnya (Apa itu jQuery?) menggunakan tanda dolar untuk mengakses objek utama jQuery.

    Banyak bahasa yang dikompilasi dan diinterpretasikan memperlakukan variabel sebagai pengidentifikasi. Setiap bahasa memiliki sintaksnya sendiri, baik itu C, C++, PHP, Java atau JavaScript. Dan sintaksis setiap bahasa tunduk pada seperangkat aturan tertentu. Misalnya, dalam JavaScript, aturan untuk mendeklarasikan variabel adalah setiap pengenal harus diawali dengan huruf alfabet Latin, tanda dolar ($) atau garis bawah (_), dan tidak boleh diawali dengan angka (0 hingga 9) atau lainnya. karakter seperti tanda baca. Kedua karakter yang disebutkan ($ dan _) tidak standar dan dapat muncul di pengenal lainnya. Jadi, misalnya, nama variabel yang ditentukan dengan lima tanda dolar berturut-turut: $$$$$ (atau sejumlah garis bawah apa pun) dapat diterima karena mengikuti aturan sintaksis JavaScript. Ini adalah persyaratan sederhana dari bahasa JavaScript yang harus dipenuhi oleh pemrogram. Percayalah, ada alasan bagus untuk ini.

    Dalam beberapa kode terdapat objek fungsi global yang namanya berupa tanda $ sederhana. Gaya kode ini (tidak adanya kata kunci var) dianggap tidak diinginkan oleh pemrogram berpengalaman; kami mencoba untuk tidak menggunakan variabel global dalam JavaScript, kecuali, tentu saja, kami mencoba melakukan kecurangan. Bagaimanapun, intinya adalah fungsi ini bisa diberi nama apa saja: a, z, atau bahkan _.

    // Contoh pengenal yang benar var A = function() ( alert("function A dipanggil"); ) var $ = function() ( alert("function $ dipanggil"); ) var _ = function() ( alert ( "fungsi _ dipanggil");

    Selain itu, dalam JavaScript versi 1.5 dan lebih tinggi, selain tanda dolar dan garis bawah, Anda dapat menggunakan karakter ISO 8859-1 dan Unicode dalam pengidentifikasi, seperti Ø. Anda mungkin terkejut, tetapi bahkan urutan Unicode seperti uXXXX diperbolehkan, dengan XXXX adalah angka, misalnya 0024. Karakter Unicode u0024 setara dengan - coba tebak? ... Tanda dollar. Dan Anda bahkan dapat memanggil fungsi yang ditentukan oleh id u0024 menggunakan tanda dolar sebagai referensi! Tentu saja, Anda tidak boleh menggunakannya di mana pun hanya karena memungkinkan. Saya percaya bahwa ini bukan praktik yang diinginkan; banyak pemrogram mungkin kurang berpengetahuan dibandingkan Anda, dan karena "trik" seperti itu, kodenya akan tampak membingungkan dan tidak dapat dibaca oleh mereka.

    Seperti yang mungkin Anda ketahui, JavaScript adalah bahasa pemrograman berorientasi objek. Ada beberapa cara berbeda untuk memberikan nilai pada pengidentifikasi. Misalnya, saat kita menggunakan kata kunci var, JavaScript membuat variabel dalam cakupan saat ini (atau lokal). Jika kita menghilangkan kata kunci var, variabel akan tetap dibuat, tetapi dalam lingkup global program, artinya akan terlihat di seluruh file .js. Sekali lagi, saya ingin mengingatkan Anda: hindari variabel global. Saya menyadari artikel ini tentang tanda dolar, tetapi jika belum jelas bagi Anda, variabel global ikut berperan ketika Anda dihadapkan dengan proyek berskala besar di mana berbagai komponen ditulis oleh orang lain atau dikembangkan oleh tim pemrogram. Jadi, jika seseorang memberitahu Anda bahwa boleh saja menggunakan variabel global tanpa kata kunci var, jangan percaya mereka - mereka menipu Anda.

    Dan selanjutnya. Karena variabel adalah objek dalam JavaScript, Anda bisa merujuk ke fungsi dengan variabel Anda. Anda bahkan dapat menetapkan "fungsi anggota" ke fungsi yang sudah ada. Namun mencoba menetapkan fungsi ke objek yang belum ada pasti akan gagal dalam JavaScript. Jika memang ingin memahaminya dengan baik, berikan perhatian khusus pada kode di bawah ini.

    Sekarang, dengan menggunakan apa yang telah Anda pelajari dan tanpa menjalankan kode ini di browser, dapatkah Anda mengetahui apakah kode ini akan berhasil?

    Berdasarkan konvensi, tanda dolar ($), garis bawah (_), dan bahkan beberapa karakter ASCII dapat digunakan di mana saja dalam pengenal di JavaScript. Dokumentasi Ecma Script (7.6 Identifiers, ECMA-262, 3rd Ed.) mengatakan: "Simbol dolar hanya untuk digunakan dalam kode yang dibuat secara otomatis." Ini berarti kita tidak boleh menggunakan tanda dolar ($) dalam pengidentifikasi kecuali kita sedang menulis kerangka kerja. Berikut adalah daftar karakter yang diperbolehkan yang dapat digunakan dalam pengidentifikasi:

    Nama Pengenal::
    PengidentifikasiMulai
    IdentifierName IdentifierPart
    PengidentifikasiMulai::
    Surat Unicode
    $
    _
    Urutan UnicodeEscape
    Bagian Pengidentifikasi::
    PengidentifikasiMulai
    UnicodeCombiningMark
    UnicodeDigit
    Tanda Baca UnicodeConnector
    Urutan UnicodeEscape

    Tujuan artikel ini adalah untuk menunjukkan bahwa simbol dolar hanyalah sebuah pengidentifikasi (diimplementasikan oleh kerangka Prototipe populer dan kemudian diambil oleh pengembang jQuery) dan tidak lebih. Mengapa programmer menggunakannya? Ini adalah nama yang sangat cocok untuk fungsi yang memiliki tujuan jelas dalam kode kerangka kerja. Oleh karena itu, objek jQuery utama yang didefinisikan sebagai tanda dolar identik dengan objek jQuery. Dalam kode normal, kami menggunakan objek jQuery alih-alih $. Jika Anda berpengalaman dalam jQuery dan memperhatikan dokumentasinya, tidak disarankan menggunakan sinonim $ sebagai pengganti objek jQuery, meskipun untuk beberapa alasan ini sangat populer di kalangan pemrogram yang menganggapnya rapi.

    Mari kita simpulkan

    Perbedaan penggunaan simbol dolar bersifat semantik. Ini adalah nama pengenalnya. Dari segi psikologis terlihat nyaman dan elegan. Secara teknis, itu hanya fungsi atau referensi simbolis ke suatu variabel, sebenarnya tidak ada perbedaan dalam penggunaan $ atau _ atau simbol lainnya.

    Karakter $, sebagaimana dinyatakan dalam spesifikasi Ecmascript, diperbolehkan untuk digunakan dalam pengidentifikasi. Jika pengenalnya terdiri dari satu simbol $, tentu terlihat aneh, namun perbedaan seperti itu hanya terlihat oleh manusia. Sejauh yang saya tahu, kompiler tidak akan peduli jika variabel terdiri dari karakter lain, seperti a atau b.

    Di sisi lain, spesifikasi Ecmascript menyatakan bahwa simbol $ harus digunakan dalam kode internal, seperti kode jQuery, hanya untuk kenyamanan. Ini berarti Anda tidak boleh menggunakannya dalam kode Anda hanya karena terlihat keren, tetapi ketika mengembangkan suatu kerangka kerja, Anda sebenarnya bisa mendapatkan keuntungan darinya karena objek global kerangka kerja tersebut akan terlihat unik dan menonjol dari kode Anda yang lain.