8.1 Nyambungake jQuery

Pungkasan, kita entuk perpustakaan jQuery. Nalika artikel iki ditulis, artikel iki wis lungse lan meh ora tau digunakake ing proyek anyar . Nanging ing sawijining wektu iku misuwur banget, didokumentasikake kanthi apik, lan ana akeh conto ing Internet kanthi nggunakake .

Mulane, yen sampeyan nulis proyek web cilik lan ora pengin nglampahi sasi kanggo sinau kerangka modern, aku nyaranake sampeyan nggunakake perpustakaan jQuery.

Kanggo nggunakake ewu fungsi jQuery, sampeyan mung kudu nyakup ing kaca. Sampeyan bisa nindakake kaya iki:


   <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   </head>

Nggarap jQuery bisa dipérang dadi rong jinis.

Pisanan, sampeyan bisa entuk obyek perpustakaan jQuery, yaiku unsur HTML biasa sing dibungkus ing obyek jQuery khusus.

Kapindho, jQuery duwe sawetara obyek global sing ora kaiket karo unsur HTML. Padha uga kudu digunakake.

Ayo dadi miwiti karo pisanan.

8.2 Nggarap pamilih

jQuery nggunakake pamilih kanggo nggarap obyek (elinga CSS lan kelas sawijining?). Dadi, ing jQuery, yen sampeyan pengin milih sawetara obyek utawa klompok obyek, sampeyan kudu nyetel pamilih.

Tuladha:

Kode Katrangan Cathetan
1 $("div") Milih kabeh obyek kanthi tag DIV akeh obyek
2 $("img.#gambar123") Milih kabeh obyek kanthi tag IMG lan ID == image123 siji obyek
3 $("#gambar123") Milih kabeh obyek kanthi ID == image123 siji obyek
4 $("div.artikel") Milih kabeh obyek kanthi tag DIV sing nduweni artikel kelas akeh obyek

Ayo kita ngomong yen kita pengin nambah penanganan acara menyang kabeh pranala onclick, iki carane kita bisa nindakake karo jQuery:


  $("a").click(function() {
    alert("Click");
  });

Telung langkah ditindakake ing kene:

  1. Entuk obyek sing cocog karo pamilih "a".
  2. Kita nggawe fungsi anonim sing nelpon alert().
  3. Kita nyetel fungsi iki minangka handler acara clickkanggo kabeh obyek saka titik 1.

Liyane bab sing apik babagan jQuery yaiku kode kasebut gampang diwaca. Ora butuh akeh kanggo ngerti kepiye cara kerjane. Yen ana kode sing bisa digunakake, mula cukup gampang kanggo ngerti apa sing ditindakake.

8.3 Nggarap unsur dokumen

Ayo goleki sawetara skenario kanggo nggarap dokumen nggunakake jQuery.

Entuk nilai saka unsur (kanggo unsur sing nduweni nilai):

var result = $ ("selector").value();

Setel nilai unsur (kanggo unsur sing nduweni nilai):

$ ("selector").value(newValue);

Kepiye cara nambah HTML ing sawetara unsur?

$ ("selector").html(newHTML);

Lan kepiye carane njaluk HTML sing ana ing njero unsur kasebut?

var html = $ ("selector").html();

Apa yen aku pengin njaluk / nambah ora HTML, nanging teks biasa? Ora ana kejutan ing kene.

var html = $ ("selector").text();

Apa yen aku pengin njaluk / ngganti werna saka unsur?

$ ("selector").color("red");

Yen sampeyan kudu nggarap gaya, mula iki uga gampang ditindakake:

$ ("selector").css("color", "red");

Carane nambah unsur anyar?

$ (".container").append($("h3"));
Java webinar