8.1 Pagkonekta sa jQuery
Sa wakas, nakarating kami sa library ng jQuery. Sa oras na naisulat ang artikulong ito, lipas na ito at halos hindi na ginagamit sa mga bagong proyekto . Ngunit sa isang pagkakataon ito ay napakapopular, napakahusay na dokumentado, at mayroong maraming mga halimbawa sa Internet sa paggamit nito .
Samakatuwid, kung nagsusulat ka ng isang maliit na proyekto sa web at ayaw mong gumugol ng mga buwan sa pag-aaral ng mga modernong balangkas, inirerekomenda kong gamitin mo ang library ng jQuery.
Upang magamit ang libu-libong jQuery function, kailangan mo lang itong isama sa iyong page. Magagawa mo ito tulad nito:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>Ang pagtatrabaho sa jQuery ay maaaring nahahati sa dalawang uri.
Una, maaari kang makakuha ng jQuery library object, na isang regular na elemento ng HTML na nakabalot sa isang custom na jQuery object.
Pangalawa, ang jQuery ay may ilang mga pandaigdigang bagay na hindi nakatali sa mga elemento ng HTML. Kailangan din nilang gamitin.
Magsimula tayo sa una.
8.2 Paggawa sa mga tagapili
Gumagamit ang jQuery ng mga tagapili upang gumana sa mga bagay (tandaan ang CSS at ang mga klase nito?). Kaya, sa jQuery, kung gusto mong pumili ng ilang bagay o grupo ng mga bagay, kailangan mong itakda ang kanilang tagapili.
Mga halimbawa:
| Code | Paglalarawan | Tandaan | |
|---|---|---|---|
| 1 | $("div") | Pinipili ang lahat ng bagay na may DIV tag | maraming bagay |
| 2 | $("img.#image123") | Pinipili ang lahat ng mga bagay na may IMG tag at ID == image123 | isang bagay |
| 3 | $("#image123") | Pinipili ang lahat ng mga bagay na may ID == image123 | isang bagay |
| 4 | $("div.article") | Pinipili ang lahat ng mga bagay na may tag na DIV na may artikulo ng klase | maraming bagay |
Sabihin nating gusto naming magdagdag ng pangangasiwa ng kaganapan sa lahat ng mga link onclick, narito kung paano namin ito magagawa sa jQuery:
$("a").click(function() {
alert("Click");
});Tatlong hakbang ang ginagawa dito:
- Kinukuha ang (mga) bagay na tumutugma sa selector
"a". - Lumilikha kami ng isang hindi kilalang function na tumatawag sa
alert(). - Itinakda namin ang function na ito bilang tagapangasiwa ng kaganapan
clickpara sa lahat ng mga bagay mula sa punto 1.
Ang isa pang magandang bagay tungkol sa jQuery ay ang code nito ay madaling basahin. Hindi gaanong kailangan para malaman kung paano gumagana ang lahat. Kung mayroong gumaganang code, kung gayon ito ay sapat na madaling maunawaan kung ano ang ginagawa nito.
8.3 Paggawa gamit ang mga elemento ng dokumento
Tingnan natin ang ilang mga sitwasyon para sa pagtatrabaho sa isang dokumento gamit ang jQuery.
Kunin ang halaga ng isang elemento (para sa mga elementong may mga halaga):
var result = $ ("selector").value();Itakda ang halaga ng elemento (para sa mga elemento na may mga halaga):
$ ("selector").value(newValue);Paano magdagdag ng HTML sa loob ng ilang elemento?
$ ("selector").html(newHTML);At paano makukuha ang HTML na nasa loob ng elemento?
var html = $ ("selector").html();Paano kung gusto kong kumuha/magdagdag ng hindi HTML, ngunit plain text? Wala ring sorpresa dito.
var html = $ ("selector").text();Paano kung gusto kong makuha/palitan ang kulay ng isang elemento?
$ ("selector").color("red");Kung kailangan mong magtrabaho sa mga istilo, madali din itong gawin:
$ ("selector").css("color", "red");Paano magdagdag ng bagong elemento?
$ (".container").append($("h3"));