Noong nakaraang linggo, napag-usapan ko kung gaano kahalaga ang jQuery sa anumang modernong web developer at kung bakit ito kahanga-hanga. Sa linggong ito, sa palagay ko oras na nating nadumihan ang aming mga kamay sa ilang code at natutunan kung paano talaga gagamitin ang jQuery sa aming mga proyekto.

Sasabihin ko ito ngayon - hindi mo kailangang malaman ang Javascript upang magamit ang jQuery. Marahil ay pinakamahusay kung iisipin mo ang jQuery bilang isang ebolusyon ng Javascript - isang mas mahusay na paraan upang gawin ito - kaysa sa isang library lamang na nagdaragdag ng pag-andar. Anumang Javascript na kailangan mo ay madadala sa daan. Ipinapalagay na gayunpaman na bilang isang developer ng web mayroon kang isang magandang kaalaman sa HTML at CSS (at narito ang kapaki-pakinabang na libreng gabay na xHTML kung hindi!).

---

---

Modelong Bagay ng Dokumento

Ang jQuery ay tungkol sa traversal at pagmamanipula ng HATOL - ang D okumento O kaya bject M amoy Ang DOM ay isang hierarchical tree representation ng pahina, na itinayo ng mga browser pagkatapos basahin ang lahat ng HTML code. Sa jQuery, gagamit kami ng mga terminolohiya tulad ng magulang , mga bata , at magkakapatid madalas, kaya dapat magkaroon ka ng ideya kung ano ang ibig sabihin nito na nauugnay sa DOM.

Ang simpleng diagram na ito mula saw3schoolsipinaliwanag nang maayos ang mga konsepto. Dapat mong makita na ang magulang ng elemento ay, habang ang elemento ay may isang agarang

kapatid.

Pagsisimula: Pagdaragdag ng jQuery

Ang pinakabagong bersyon ng jQuery ay tungkol sa 91KB kapag naka-compress, kaya nagdaragdag ito tungkol sa parehong timbang ng pahina bilang isang maliit na litrato o screenshot. Ang pinakamadaling paraan upang maisama ang jQuery sa iyong proyekto ay i-paste ang isang sanggunian sa pinakabagong naka-host na bersyon sa seksyon ng header ng iyong site:

Gayunpaman tandaan na kung nagpapatakbo ka ng Wordpress, maaari itong maging sanhi ng mga problema dahil mayroon na itong sariling kopya ng jQuery library. Maaaring hilingin ng mga plugin na mai-load ito, at matalino na mai-load lamang ng Wordpress ang jQuery isang beses anuman ang dami ng hiniling ng mga plugin para dito.

Kung idaragdag mo ang sumusunod na linya sa iyong pagpapaandar.php tema file, magdagdag ka ng isa pang kahilingan para maisama ito. Malalaman din ng Wordpress na palaging i-load ito kung ang iyong tema ay aktibo.

---

---

tinanggal na file recovery app para sa android

wp_enqueue_script('jquery');

Ang pangalawang bagay na dapat tandaan ay kapag idinagdag ang jQuery gamit ang karaniwang pamamaraan, mailo-load ito bilang $ . Ang anumang gagawin mo sa jQuery ay mauuna sa $ na ito, tulad ng:

$.ajax

o

---

---

$('#header')

Gayunpaman, kapag ang jQuery ay na-load sa pamamagitan ng Wordpress, ang lahat ay tapos na gamit ang variable ng jQuery sa halip na $, kaya halimbawa:

jQuery('#header')

Bagaman hindi ito isang malaking problema kapag nagsusulat ng iyong sariling code, nangangahulugan ito na ang paggupit at pag-paste ng mga snippet ng jQuery na mahahanap mo sa web ay kailangang isalin upang magamit ang jQuery sa halip na $ - yun lang

Ang isang paraan sa paligid nito ay upang balutin ang $ -style code na nakikita mong gusto mo:

(function($) {
// paste $ code in here
})(jQuery);

Kinukuha nito ang jQuery variable at ipinapasa ito sa isang hindi nagpapakilalang pagpapaandar bilang $ . Ipapaliwanag ko ang mga hindi nagpapakilalang pag-andar sa susunod - sa ngayon, alamin natin ang pangunahing istraktura ng kaunting jQuery code.

Upang idagdag ang iyong code sa isang pahina ng HTML o PHP, isara ang lahat sa loob ng mga tag, tulad nito:


// jQuery code codes here


$ ('tagapili').pamamaraan();

Iyon lang, sa pamagat sa itaas. Iyon ang pangunahing istraktura ng isang solong piraso ng jQuery code upang manipulahin ang DOM. Madali, tama?

AngtagapiliSinasabi sa jQuery na maghanap ng mga bagay na tumutugma sa panuntunang ito, at kapareho ng mga selectors ng CSS (at pagkatapos ay ilan pa sa itaas). Kaya, tulad ng sa CSS nais mong i-istilo ang lahat ng mga link

a { }

Ang pareho ay gagawin sa jQuery bilang

$('a')

Maaari itong magawa para sa anumang mga elemento ng HTML - div, h1, span - kung ano pa man. Maaari mo ring gamitin ang mga klase ng CSS at ID upang maging mas tiyak.

Halimbawa, upang mahanap ang lahat ng mga link sa klase na 'findme', gagamitin mo ang:

$('a.findme')

Hindi mo kailangang tukuyin ang uri ng elemento sa bawat oras - ngunit kung gagawin mo ito, ginagawa lamang nitong mas tiyak ang panuntunan. Nasabi mo lang sana

$('.findme')

na tutugma sa lahat sa klase Hanapin mo ako , maging ito ay isang link.

Upang magamit ang isang pinangalanang elemento ng ID, gamitin ang # pumirma na lang. Ang pangunahing pagkakaiba dito ay ang isang tagapili ng ID ay pipili lamang ng isang bagay, habang ang isang tagapili ng klase ay maaaring makahanap ng higit sa isa.

nasaan ang portrait mode sa iphone 7 plus

$('#something')

Karaniwan kung magagawa mo sa CSS kung gayon gagawin din ito ng jQuery. Sa katunayan, maaari mo ring ilang medyo kumplikadong mga pseudo selectors na style ng CSS3 tulad ng: una

$('body p:first')

Alin ang kukuha ng talata ng pahina. Makakakita ka ng mga elemento na may ilang mga katangian din. Isaalang-alang ang halimbawang ito; nais naming hanapin ang lahat ng mga link sa pahina na tumuturo sa loob gumamit at i-highlight ang mga ito sa ilang paraan. Narito kung paano namin sila mahahanap:

$('a[href*='makeuseof']')

Ang cool diba? Kaya, sa palagay ko ito.

Ang iyong susunod na port of call ay dapat ang dokumentasyon ng jQuery API para sa mga pipili . Ito ay isang malaking listahan ng lahat ng iba't ibang mga uri ng mga tagapili na magagamit upang magamit, at walang inaasahan na matutunan mo silang lahat.

Ang susunod na bahagi ng equation aypamamaraan- Ano ang gagawin sa mga bagay na iyon kapag nahanap mo na ang lahat - ngunit iiwan natin iyon para sa susunod na aralin. Kung nais mong magsimula sa pagsubok ng iba't ibang mga selectors ngayon, iminumungkahi kong manatili ka sa sumusunod na pamamaraan ng css. Tumatagal ito ng dalawang mga parameter - isang CSS pangalan ng ari-arian , at bago halaga upang italaga sa pag-aari na iyon. Kaya, upang mabigyan ang lahat ng mga link ng isang pulang kulay sa background, gagawin mo:

$('a').css('background-color','red');

Sapat na simple! Habang hindi ito maaaring maging praktikal na paggamit, hahayaan ka nitong makita ang anumang mga elemento na matatagpuan gamit ang iyong mga pipili. Ngayon, at pumili - hinihintay ka ng DOM.

Inaasahan kong ang tutorial na ito ay naging kapaki-pakinabang sa iyo; Sinubukan kong gawin itong kasing simple ng madaling maunawaan hangga't maaari. Huwag mag-atubiling magtanong ng anumang mga katanungan mayroon ka o mag-iwan ng puna, ngunit magkaroon ng kamalayan na tiyak na ako ay walang piling tao jQuery ninja.

Magbahagi Magbahagi Mag-tweet Email 5 Mga Tip upang Supercharge ang Iyong Mga VirtualBox Linux Machine

Pagod na sa hindi magandang pagganap na inaalok ng mga virtual machine? Narito kung ano ang dapat mong gawin upang mapalakas ang pagganap ng VirtualBox.

Basahin Susunod Mga Kaugnay na Paksa

• Kulturang Web
• Pag-unlad sa Web
• JavaScript
• Programming
• jQuery

Tungkol sa May-akda James Bruce(707 Mga Artikulo Nai-publish)

Si James ay mayroong BSc sa Artipisyal na Katalinuhan at sertipikado sa CompTIA A + at Network +. Kapag hindi siya abala bilang Hardware Review Editor, nasisiyahan siya sa LEGO, VR, at mga board game. Bago sumali sa MakeUseOf, siya ay isang technician sa pag-iilaw, guro ng Ingles, at inhinyero ng data center.

Higit pa Mula kay James Bruce

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe