Ovo je moja formula da napravim jednostavan Node.js pretraživač. Ovo je glavni razlog zašto želite da manipulišete DOM-om na strani servera i verovatno je razlog zašto ste ovde.

Prvo upotrijebite zahtjev za učitavanje stranice za raščlanjivanje. Kada se preuzimanje završi, pozdravite ga i počnite manipulirati DOM-om baš kao što biste to učinili s jQueryjem.

Radni primjer:

Var request = require("request"), cheerio = require("cheerio"); funkcija parse(url) ( zahtjev(url, funkcija (greška, odgovor, tijelo) ( var $ = cheerio.load(body); $(".question-summary .question-hyperlink").each(function () ( konzola .info($(this).text()); )); )) ) parse("http://stackoverflow.com/");

Ovaj primjer će prikazati na konzoli sva glavna pitanja prikazana na SO početnoj stranici. Zbog toga volim Node.js i njegovu zajednicu. Ne može biti lakše :-)

Instalirajte ovisnosti:

npm prompt za instaliranje cheerio

I pokrenite (ako je skripta iznad u datoteci crawler.js):

Kodiranje

Neke stranice će imati sadržaj koji nije na engleskom u određenom kodiranju i morat ćete ga dekodirati u UTF-8. Na primjer, stranica na brazilskom portugalskom (ili bilo kom drugom jeziku latinskog porijekla) će vjerovatno biti kodirana u ISO-8859-1 (tzv. "latin1"). Kada je potrebno dekodiranje, predlažem da se ne tumači sadržaj na bilo koji način i da se umjesto toga koristi iconv-lite za obavljanje posla.

Radni primjer:

Var request = require("request"), iconv = require("iconv-lite"), cheerio = require("cheerio"); var PAGE_ENCODING = "utf-8"; // promijenite funkciju kodiranja stranice u skladu sa funkcijom parse(url) ( request(( url: url, encoding: null // još ne interpretira sadržaj), funkcija (greška, odgovor, tijelo) ( var $ = cheerio.load(iconv. decode(body, PAGE_ENCODING)); $(".question-summary .question-hyperlink").each(function () ( console.info($(this).text()); )); )) ) parse( "http://stackoverflow.com/");

Prije početka, instalirajte ovisnosti:

npm prompt za instaliranje iconv-lite cheerio

I na kraju:

Following links

Sljedeći korak je praćenje linkova. Recimo da želite da navedete sve postere sa svakog glavnog pitanja na SO. Prvo morate navesti sva glavna pitanja (primjer iznad), a zatim unijeti svaku vezu, analizirajući svaku stranicu sa pitanjem kako biste dobili listu uključenih korisnika.

Kada počnete pratiti linkove, započeće pakao povratnog poziva. Da biste to izbjegli, morate koristiti neku vrstu obećanja, budućnosti ili nešto drugo. Uvijek držim async u svom alatnom okviru. Dakle, evo kompletnog primjera indeksiranja koji koristi async:

Var url = zahtijevaju("url"), zahtjev = zahtijevaju("zahtjev"), async = zahtijevaju("async"), cheerio = zahtijevaju("cheerio"); var baseUrl = "http://stackoverflow.com/"; // Dobiva stranicu i vraća povratni poziv sa $ object funkcijom getPage(url, parseFn) ( request(( url: url ), funkcija (greška, odgovor, tijelo) ( parseFn(cheerio.load(body)))); ) getPage(baseUrl, function ($) ( var pitanja; // Dobiti listu pitanja pitanja = $(".question-summary .question-hyperlink").map(function () ( return ( title: $(ovo). text(), url: url.resolve(baseUrl, $(this).attr("href")) ); )).get().slice(0, 5); // ograničenje na prvih 5 pitanja // Za svako pitanje async.map(questions, function (question, questionDone) ( getPage(question.url, function ($$)) ( // Dobiti listu korisnika question.users = $$(".post-signature .user-details a").map(function () ( return $$(this).text(); )).get(); questionDone(null, question); )); ), function (err, questionsWithPosters) ( // Ovo funkciju poziva async kada su sva pitanja raščlanjena questionsWithPosters.forEach(function (question) ( // Ispisuje svako pitanje zajedno sa njegovom korisničkom listom console.info(question.title); question.users.forEach(funkcija (korisnik) ( console.info("\t%s", korisnik); )); )); )); ));

jQuery UI je grupa jQuery dodataka koji olakšavaju kreiranje sučelja web aplikacije.

$(document).ready(function()( $("#drag").draggable(); $("#sortable").sortable(); $("#sortable").disableSelection(); $(" #datepicker").datepicker(( monthNames: ["januar","februar","mart","april","maj","jun","juli","avgust", "septembar","oktobar" ,"Novembar","Decembar"], dayNamesMin: ["pon", "uto", "srijeda", "čet", "pet", "sub", "ned"])); ));

Povezivanje jQuery korisničkog sučelja

Da biste iskoristili prednosti jQuery UI dodataka, oni prvo moraju biti povezani sa stranicom na kojoj će se koristiti.

Postoje dvije opcije za povezivanje jQuery korisničkog sučelja:

jQuery UI lokalna veza

Na službenoj web stranici možete preuzeti standardni jQuery UI paket ili napraviti vlastiti.

Zadani jQuery UI paket uključuje sve postojeće dodatke i ima zadanu temu. Da preuzmete standardni paket, jednostavno idite na jQuery UI web stranicu i kliknite na dugme Preuzmi.

Ako želite da napravite sopstveni jQuery UI paket, morate da odete na jQuery UI lokaciju i sledite dole navedene korake ( preskočite ove korake ako ste preuzeli standardni paket):

Korak 1: Odaberite potrebne komponente

Podrazumevano, svi postojeći dodaci su uključeni u datoteku za preuzimanje. Ako neki od njih nisu potrebni, možete poništiti okvir pored njihovog imena i na taj način smanjiti veličinu konačne datoteke ( default jQuery UI ima veličinu od ~1mb).

Imajte na umu da veličina datoteke biblioteke utiče na brzinu učitavanja stranice, tako da je manja veličina uvijek poželjna.

Korak 2: Odaberite dizajn

Odaberite jednu od standardnih jQuery UI dodataka u polju Tema ili kreirajte vlastitu temu pomoću theroller-a.

Korak 3: Odaberite verziju

Odaberite verziju korisničkog sučelja jQuery u polju Verzija.

Korak 4: Preuzmite jQuery korisničko sučelje

Kliknite na dugme Preuzmi i sačuvajte datoteku na pogodnoj lokaciji na vašem čvrstom disku.

Sad ( bilo da ste preuzeli standardni paket ili ste napravili vlastiti) potrebno je da povežete jQuery UI sa skriptom. Da biste to učinili, morate raspakirati preuzetu datoteku i odrediti putanje do datoteka jquery-ui-version.custom.css I jquery-ui-version.custom.min.js u glavnom dijelu skripte.

sintaksa:

jQuery UI daljinska veza

U ovoj opciji povezivanja, ne možete prilagoditi jQuery UI paket i možete koristiti samo njegovu standardnu ​​verziju.

Da biste daljinski povezali biblioteku, morate dodati sljedeće redove u glavni dio vaše stranice:

sintaksa:

Uradi sam

Zadatak 1 povezati jQuery UI biblioteku na daljinu kako bi kod iz vježbe funkcionirao.

Prvo pitanje koje se nameće kada počnete da radite sa jQuery bibliotekom je kako je uključiti? Čudno je da o tome nisam pisao ranije, a sada sam odlučio da popunim ovu prazninu.

U ovom članku ću vam reći kako pravilno dodati jQuery na uobičajenu html stranicu i na popularne motore.

Povezivanje jQueryja sa stranice na vašoj web lokaciji

Najčešći način povezivanja biblioteke. Prvo morate preuzeti najnoviju verziju sa web stranice programera. Stranica za preuzimanje nudi nekoliko opcija za biblioteku, na primjer, sada se nudi preuzimanje "Kompresovano, produkcijski jQuery 3.1.1" i "Nekomprimirano, razvojno jQuery 3.1.1". Prva opcija je komprimirana verzija biblioteke, svi komentari se uklanjaju odatle, u ovom slučaju biblioteka zauzima mnogo manje prostora, pa će se stranica na koju će biti povezana brže učitavati. Druga opcija je, grubo rečeno, izvorni kod biblioteke, strukturiran je u lako čitljivom obliku sa komentarima, a namijenjen je prvenstveno programerima. Stoga preporučujem korištenje komprimirane verzije biblioteke.

Nakon što se biblioteka učita, potrebno je da je postavite na server gde se nalaze fajlovi sajta. Obično kreiram “js” folder u korenu sajta, u koji kopiram potrebne biblioteke i tamo postavljam fajl sa svojim funkcijama.

Sada možete ići direktno na povezivanje jQueryja. Struktura web stranice na koju uključujete jQuery može biti različita. Ali mora sadržavati HTML, HEAD i BODY oznake. Dakle, da biste povezali jQuery, potrebno je da dodate oznaku SCRIPT sa vezom do biblioteke unutar oznake HEAD.

Zaglavlje stranice

U nekim slučajevima, biblioteka je uključena prije završne oznake tijela, koja je povezana s redoslijedom kojim se html stranica obrađuje od strane pretraživača. Pošto pretraživač čita redove sekvencijalno, kada povezuje jQuery na kraju datoteke, pretraživač će prvo prikazati sajt, a zatim povezati dinamiku. Uz sporu vezu, ovaj pristup omogućava povećanje brzine učitavanja stranice, a tek onda rada klizača i ostalog. Kod za ovu vezu izgleda ovako:

Zaglavlje stranice

Pažnja! Preporučljivo je da ne mijenjate naziv datoteke biblioteke jQuery (često se mijenja u jquery.js), jer će kasnije zadržavanje zvaničnog naziva datoteke pomoći da vidite koju verziju biblioteke koristite (u mom primjeru verzija 3.1.1 se koristi).

Povezivanje jQueryja sa stranicama vaše stranice iz vanjskih izvora

Ova metoda je dobra jer je biblioteka povezana sa stranice i ne leži na tvrdom disku. Ovo posebno važi za veliki broj malih projekata i za obuku.

Ova metoda povezivanja se zove "Povezivanje sa CDN-om". Content Delivery Network ili kako se češće naziva CDN (Content Delivery Network) je mreža servera širom svijeta. Oni pomažu poboljšati performanse vašeg web servera i smanjuju opterećenje vašeg prometa.

Najpopularniji CDN-ovi za povezivanje jQueryja:

Obično koristim vezu sa Google Developers. Nekoliko isječaka je već pripremljeno za nas na stranici projekta, samo kopirajte liniju koja nam je potrebna i uključite je u datoteku. S ovom metodom povezivanja, kod će izgledati ovako:

Zaglavlje stranice

< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title >Naslov stranice< / title > < / head > < body > < / body > < / html >

Prednost ove metode je u tome što mnoge stranice uključuju jQuery preko Google API-ja, što znači da je s velikim stepenom vjerovatnoće ova biblioteka već prisutna u kešu pretraživača korisnika i neće se uopće učitavati drugi put.

Povezivanje jQueryja sa WordPress-om

Uključivanje jQueryja u WordPress vrši se automatski, tako da nema potrebe da ručno uključujete biblioteke drugih verzija. Ovo se dešava u šablonu koristeći php kod:

Kao rezultat, niz jQuery veze će se pojaviti unutar oznake HEAD.

U vrijeme pisanja ovog teksta, WordPress se isporučuje sa jQuery v1.12.4. Ali, kao što vidite, verzija biblioteke je veoma različita od one koja je uključena u primjere iznad. Moguće je povezati najnoviju verziju biblioteke, ali postoji mogućnost sukoba.

Da biste izbjegli sukob, ali i dalje koristite verziju biblioteke koja vam je potrebna, morate koristiti ispravan način da uključite jQuery u datoteku functions.php:

Članak je namenjen korisnicima koji tek počinju da rade sa jQuery UI i koji žele da se upoznaju sa ovom bibliotekom u praksi.
Ovaj prozorski interfejs pretpostavlja osnovna svojstva kao što su - prisutnost prozora, mogućnost njihovog prevlačenja, mogućnost promjene veličine prozora, minimiziranja/maksimiziranja itd. Evo kakav bi krajnji rezultat trebao biti.
Dakle, imamo želju da napravimo primjer interaktivnog prozorskog web sučelja i mogućnost korištenja jQuery korisničkog sučelja u tu svrhu - onda, dobrodošli pod kat.

Kratak uvod Ko još ne zna šta je jQuery UI, može pročitati više o tome na ruskom klikom na sledeći link. Pojava ruskog prijevoda dokumentacije predmetne biblioteke već je spomenuta na Habré .1 Stageu. - Pripremni. Prvo preuzmite biblioteku sa službene stranice http://jqueryui.com. Interfejs ima mnogo opcija za prilagođavanje, za naš primjer će nam trebati sve komponente i Flick tema.
Nakon preuzimanja i raspakivanja preuzetih komponenti na računar, dobiće se sledeća struktura datoteke:

Sa css i js folderima sve je jasno, a šablon za index.html će biti napisan ovako: