Tämä on kaavani tehdä yksinkertainen indeksointirobotti Node.js:ssä. Tämä on tärkein syy, miksi haluat manipuloida DOM:ia palvelinpuolella, ja tämä on luultavasti syy, miksi olet täällä.

Käytä ensin pyyntöä ladataksesi jäsennettävä sivu. Kun lataus on valmis, käsittele se cheeriolla ja aloita DOM:n käsittely aivan kuten jQueryn kanssa.

Toimiva esimerkki:

Var request = vaatia("pyyntö"), cheerio = vaatia("cheerio"); function parse(url) ( request(url, function (virhe, vastaus, body) ( var $ = cheerio.load(body); $(".question-summary .question-hyperlink").each(function () ( konsoli .info($(this).teksti()); )); )) ) jäsentää("http://stackoverflow.com/");

Tämä esimerkki näyttää konsolissa kaikki suosituimmat kysymykset SO-kotisivulla. Tästä syystä rakastan Node.js:ää ja sen yhteisöä. Ei voisi olla helpompaa :-)

Asenna riippuvuudet:

npm pyyntö asentaa cheerio

Ja suorita (jos komentosarja on edellä crawler.js-tiedostossa):

Koodaus

Joillakin sivuilla on muuta kuin englanninkielistä sisältöä tietyllä koodauksella, ja sinun on purettava se UTF-8:aan. Esimerkiksi brasilianportugaliksi (tai millä tahansa muulla latinalaista alkuperää olevalla kielellä) oleva sivu koodataan todennäköisesti ISO-8859-1:llä (alias "latin1"). Kun dekoodaus vaaditaan, suosittelen, että pyyntö ei tulkitse sisältöä millään tavalla ja käytä sen sijaan iconv-litea työn suorittamiseen.

Toimiva esimerkki:

Var request = vaatia("pyyntö"), iconv = vaatia("iconv-lite"), cheerio = vaatia("cheerio"); var PAGE_ENCODING = "utf-8"; // muuta vastaamaan sivun koodausta funktio parse(url) ( request(( url: url, koodaus: null // älä tulkitse vielä sisältöä ), toiminto (virhe, vastaus, runko) ( var $ = cheerio.load(iconv. decode(body, PAGE_ENCODING)); $(.question-yhteenveto .question-hyperlink").each(function () ( console.info($(this).text()); )); )) ) jäsentää( "http://stackoverflow.com/");

Asenna riippuvuudet ennen aloittamista:

npm-pyyntö asentaa iconv-lite cheerio

Ja lopuksi:

Seuraa linkkejä

Seuraava askel on seurata linkkejä. Oletetaan, että haluat luetella kaikki julisteet jokaisesta SO:n suosituimmasta kysymyksestä. Sinun tulee ensin luetella kaikki yleisimmät kysymykset (esimerkki yllä) ja kirjoittaa sitten jokainen linkki ja jäsentää jokainen kysymyssivu saadaksesi luettelon mukana olevista käyttäjistä.

Kun alat seurata linkkejä, takaisinsoittohelvetti alkaa. Tämän välttämiseksi sinun tulisi käyttää jonkinlaisia ​​lupauksia, futuureja tai jotain muuta. Pidän aina asyncin työkalulaatikossani. Joten tässä on täydellinen indeksointiesimerkki asyncillä:

Var url = vaatia("url"), request = vaatia("pyyntö"), async = vaatia("async"), cheerio = vaatia("cheerio"); var baseUrl = "http://stackoverflow.com/"; // Hakee sivun ja palauttaa takaisinkutsun $-objektifunktiolla getPage(url, parseFn) ( request(( url: url ), funktio (error, response, body) ( parseFn(cheerio.load(body)) )); ) getPage(baseUrl, function ($) ( var kysymyksiä; // Hae kysymysluettelo kysymykset = $().question-summary .question-hyperlink").map(function () ( return ( otsikko: $(this). text(), url: url.resolve(baseUrl, $(this).attr("href")) ); )).get().slice(0, 5); // rajoita 5 parasta kysymystä // Jokaiselle kysymykselle async.map(questions, function (question, questionDone) ( getPage(question.url, function ($$)) ( // Hae luettelo käyttäjistä kysymys.käyttäjät = $$(".post-signature .user-details a").map(function () ( return $$(this).text(); )).get(); questionDone(null, question); )); ), function (err, questionsWithPosters) ( // Tämä async kutsuu funktiota, kun kaikki kysymykset on jäsennetty questionWithPosters.forEach(function (question) ( // Tulostaa jokaisen kysymyksen ja sen käyttäjäluettelon console.info(question.title); question.users.forEach(funktio (käyttäjä) ( console.info("\t%s", käyttäjä); )); )); )); ));

jQuery UI on joukko jQuery-laajennuksia, jotka helpottavat verkkosovellusliittymien luomista.

$(dokumentti).ready(function())( $("#drag").draggable(); $("#sortable").sortable(); $("#lajiteltava").disableSelection(); $( " #datepicker").datepicker(( monthNames: ["tammikuu","helmikuu","maaliskuu","huhtikuu","toukokuu","kesäkuu","heinäkuu","elokuu", "syyskuu","lokakuu" " ,Marraskuu","Joulukuu"], dayNamesMin: ["ma", "ti", "ke", "to", "pe", "la", "su"])); ));

Yhdistetään jQuery-käyttöliittymää

Jotta jQuery UI -laajennusten tehoa voitaisiin hyödyntää, ne on ensin yhdistettävä sivulle, jolla niitä käytetään.

jQuery-käyttöliittymän yhdistämiseen on kaksi vaihtoehtoa:

Paikallinen yhteys jQuery UI

Virallisella verkkosivustolla voit joko ladata jQuery-standardin käyttöliittymäpaketin tai rakentaa oman.

Tavallinen jQuery-käyttöliittymä sisältää kaikki olemassa olevat laajennukset ja siinä on vakioteema. Voit ladata vakiopaketin siirtymällä jQuery-käyttöliittymän verkkosivustolle ja napsauttamalla Lataa-painiketta.

Jos haluat rakentaa oman jQuery UI -paketin, sinun on mentävä jQuery UI -sivustolle ja noudatettava alla lueteltuja ohjeita ( ohita nämä vaiheet, jos latasit vakiopaketin):

Vaihe 1: Valitse tarvittavat komponentit

Oletuksena kaikki olemassa olevat laajennukset sisältyvät lataustiedostoon. Jos joitain niistä ei tarvita, voit poistaa niiden nimien valinnan ja pienentää siten lopullisen tiedoston kokoa ( jQuery-standardin käyttöliittymäpaketin koko on ~1 Mt).

Huomaa: Kirjastotiedoston koko vaikuttaa sivun latausnopeuteen, joten pienempi koko on aina parempi.

Vaihe 2: Valitse malli

Valitse Teema-kentästä jokin tavallisista jQuery UI -laajennusteemoista tai luo oma teema käyttämällä theerolleria.

Vaihe 3: Valitse versio

Valitse jQuery-käyttöliittymäversiosi Versio-kentästä.

Vaihe 4: Lataa jQuery-käyttöliittymä

Napsauta Lataa-painiketta ja tallenna tiedosto sopivaan paikkaan kiintolevyllesi.

Nyt ( riippumatta siitä, latasitko vakiopaketin vai kokositko oman) sinun on yhdistettävä jQuery-käyttöliittymä komentosarjaan. Tätä varten sinun on purettava ladattu tiedosto ja määritettävä tiedostojen polut jquery-ui-version.custom.css Ja jquery-ui-version.custom.min.js käsikirjoituksen pääosiossa.

Syntaksi:

jQuery UI -etäyhteys

Tässä yhteysvaihtoehdossa et voi mukauttaa jQuery-käyttöliittymäpakettia ja käyttää vain sen vakioversiota.

Jotta voit muodostaa yhteyden kirjastoon etänä, sinun on lisättävä seuraavat rivit sivusi otsikkoon:

Syntaksi:

Tee se itse

Tehtävä 1: Yhdistä jQuery-käyttöliittymäkirjasto etäyhteydellä, jotta harjoituksen koodi toimisi.

Ensimmäinen kysymys, joka herää aloitettaessa työskennellä jQuery-kirjaston kanssa, on kuinka se liitetään? On outoa, etten kirjoittanut tästä aiemmin ja nyt päätin täyttää tämän aukon.

Tässä artikkelissa kerron sinulle, kuinka jQuery lisätään oikein tavalliselle html-sivustolle ja suosittuihin moottoreihin.

Yhdistetään jQuery verkkosivustosi sivulta

Yleisin tapa yhdistää kirjasto. Ensin sinun on ladattava uusin versio kehittäjän verkkosivustolta. Lataussivulla on useita kirjastovaihtoehtoja, esimerkiksi sieltä voi nyt ladata "Compressed, production jQuery 3.1.1" ja "Uncompressed, development jQuery 3.1.1". Ensimmäinen vaihtoehto on kirjaston pakattu versio, kaikki kommentit on poistettu siitä, tässä tapauksessa kirjasto vie paljon vähemmän tilaa, joten sivu, johon se yhdistetään, latautuu nopeammin. Toinen vaihtoehto on karkeasti sanottuna kirjaston lähdekoodi, se on jäsennelty helposti luettavassa muodossa kommenteilla ja on tarkoitettu ensisijaisesti kehittäjille. Siksi suosittelen kirjaston pakatun version käyttöä.

Kun kirjasto on ladattu, sinun on sijoitettava se palvelimelle, jossa sivustotiedostot sijaitsevat. Yleensä luon sivuston juureen "js"-kansion, johon kopioin tarvittavat kirjastot ja sijoitan sinne tiedoston funktioineen.

Nyt voit siirtyä suoraan jQuery-yhteyteen. Sen verkkosivun rakenne, johon liität jQueryn, voi vaihdella. Mutta sen täytyy sisältää HTML-, HEAD- ja BODY-tunnisteet. Joten, jotta voit yhdistää jQueryn, sinun on lisättävä SCRIPT-tunniste, jossa on linkki kirjastoon HEAD-tunnisteen sisällä.

Sivuston otsikko

Joissakin tapauksissa kirjasto sisällytetään ennen päättävää body-tagia, joka liittyy järjestykseen, jossa selain käsittelee HTML-sivua. Koska selain lukee rivejä peräkkäin, kun jQuery yhdistetään tiedoston lopussa, selain näyttää ensin sivuston ja yhdistää sitten dynamiikan. Hitaalla yhteydellä tämä lähestymistapa varmistaa sivuston latausnopeuden kasvun ja vasta sitten liukusäätimien ja muun työn. Tämän yhteyden koodi näyttää tältä:

Sivuston otsikko

Huomio! On suositeltavaa olla muuttamatta jQuery-kirjastotiedoston nimeä (muuttui usein muotoon jquery.js), koska jatkossa virallisen tiedostonimen tallentaminen auttaa sinua näkemään, mitä kirjaston versiota käytät (esimerkissäni versio 3.1). .1 käytetään).

jQueryn yhdistäminen verkkosivustosi sivuille ulkoisista lähteistä

Tämä menetelmä on hyvä, koska kirjasto on yhdistetty verkkosivustolta, eikä se ole kiintolevylläsi. Tämä koskee erityisesti lukuisia pieniä projekteja ja koulutusta.

Tätä yhteystapaa kutsutaan "Yhteyden muodostamiseksi CDN:n kanssa". Sisällönjakeluverkko tai kuten sitä yleisemmin kutsutaan CDN (Content Delivery Network) on palvelimien verkosto ympäri maailmaa. Ne auttavat parantamaan verkkopalvelimesi suorituskykyä ja vähentämään liikenteen kuormitusta.

Suosituimmat CDN:t jQueryn yhdistämiseen:

Käytän yleensä Google Developersin yhteyttä. Useita katkelmia on jo valmistettu meille projektisivulla, kopioi vain tarvitsemamme rivi ja sisällytä se tiedostoon. Tällä yhteysmenetelmällä koodi näyttää tältä:

Sivuston otsikko

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

Tämän menetelmän etuna on, että monet sivustot yhdistävät jQueryn Google API:n kautta, mikä tarkoittaa, että tämä kirjasto on suurella todennäköisyydellä jo olemassa käyttäjän selaimen välimuistissa, eikä sitä lataudu toista kertaa.

jQueryn yhdistäminen WordPressiin

jQuery sisällytetään automaattisesti WordPressiin, joten muiden versioiden kirjastoja ei tarvitse sisällyttää manuaalisesti. Tämä tapahtuu mallissa php-koodilla:

Tämä johtaa jQuery-yhteysmerkkijonoon HEAD-tunnisteen sisällä.

Kirjoitushetkellä WordPress toimitetaan jQueryn versiolla 1.12.4. Mutta kuten näet, kirjaston versio on hyvin erilainen kuin yllä olevissa esimerkeissä. Kirjaston uusin versio on mahdollista yhdistää, mutta on olemassa ristiriidan mahdollisuus.

Välttääksesi ristiriidan mutta käyttääksesi silti tarvittavaa kirjastoversiota, sinun on käytettävä oikeaa tapaa sisällyttää jQuery functions.php-tiedostoon:

Artikkeli on tarkoitettu käyttäjille, jotka ovat vasta aloittamassa jQuery-käyttöliittymän käyttöä ja haluavat tutustua tähän kirjastoon käytännössä.
Tämä ikkunakäyttöliittymä olettaa sellaisia ​​perusominaisuuksia kuin ikkunoiden olemassaolo, mahdollisuus vetää niitä, mahdollisuus muuttaa ikkunoiden kokoa, pienentää/laajentaa niitä jne. Näin pitäisi lopulta tapahtua.
Joten haluamme luoda esimerkin interaktiivisesta ikkunallisesta verkkoliittymästä ja mahdollisuudesta käyttää jQuery-käyttöliittymää tähän tarkoitukseen - tervetuloa sitten kisaan.

Lyhyt esittely Ne, jotka eivät vielä tiedä mitä jQuery UI on, voivat lukea siitä lisää venäjäksi seuraamalla seuraavaa linkkiä. Habré .1 -lavalla on jo mainittu venäjänkielisen käännöksen ilmestyminen kyseisen kirjaston dokumentaatiosta. – Valmisteleva. Lataa ensin kirjasto viralliselta verkkosivustolta http://jqueryui.com. Käyttöliittymässä on monia mukautusvaihtoehtoja, esimerkkiämme tarvitsemme kaikki komponentit ja Flick-teeman.
Kun olet ladannut ja purkanut ladatut komponentit tietokoneellesi, saat seuraavan tiedostorakenteen:

Kaikki on selvää css- ja js-kansioiden kanssa, mutta kirjoitamme mallin index.html:lle seuraavasti: