Questa è la mia formula per creare un semplice crawler in Node.js. Questo è il motivo principale per cui vuoi manipolare il DOM lato server ed è probabilmente il motivo per cui sei qui.

Utilizzare innanzitutto la richiesta per caricare la pagina da analizzare. Una volta completato il caricamento, gestiscilo con cheerio e inizia a manipolare il DOM proprio come faresti con jQuery.

Esempio di lavoro:

Var request = require("request"), cheerio = require("cheerio"); funzione parse(url) ( richiesta(url, funzione (errore, risposta, corpo) ( var $ = cheerio.load(corpo); $(".question-summary .question-hyperlink").each(funzione () ( console .info($(this).text()); )); )) ) parse("http://stackoverflow.com/");

In questo esempio verranno visualizzate nella console tutte le domande principali visualizzate nella home page di SO. Questo è il motivo per cui amo Node.js e la sua community. Non potrebbe essere più semplice :-)

Installa le dipendenze:

richiesta npm per installare cheerio

Ed esegui (se lo script è sopra nel file crawler.js):

Codifica

Alcune pagine avranno contenuti non inglesi in una determinata codifica e dovrai decodificarli in UTF-8. Ad esempio, una pagina in portoghese brasiliano (o qualsiasi altra lingua di origine latina) sarà molto probabilmente codificata in ISO-8859-1 (aka "latin1"). Quando è richiesta la decodifica, suggerisco che la richiesta non interpreti il ​​contenuto in alcun modo e utilizzi invece iconv-lite per eseguire il lavoro.

Esempio di lavoro:

Var request = require("request"), iconv = require("iconv-lite"), cheerio = require("cheerio"); var PAGE_ENCODING = "utf-8"; // modifica la funzione di codifica della pagina corrispondente parse(url) ( request(( url: url, encoding: null // non interpreta ancora il contenuto), funzione (errore, risposta, corpo) ( var $ = cheerio.load(iconv. decode(body, PAGE_ENCODING)); $(".question-summary .question-hyperlink").each(funzione () ( console.info($(this).text()); )); )) ) parse( "http://stackoverflow.com/");

Prima di iniziare, installa le dipendenze:

richiesta npm per installare iconv-lite cheerio

E infine:

Link seguenti

Il prossimo passo è seguire i collegamenti. Supponiamo che tu voglia elencare tutti i poster di tutte le domande principali su SO. Dovresti prima elencare tutte le domande principali (esempio sopra) e poi inserire ciascun collegamento, analizzando ogni pagina di domande per ottenere un elenco degli utenti coinvolti.

Quando inizi a seguire i collegamenti, inizierà l'inferno delle richiamate. Per evitare ciò dovresti usare qualche tipo di promesse, futures o qualcos'altro. Mantengo sempre l'asincronismo nella mia casella degli strumenti. Quindi ecco un esempio di crawler completo che utilizza asincrono:

Var url = require("url"), request = require("request"), async = require("async"), cheerio = require("cheerio"); var baseUrl = "http://stackoverflow.com/"; // Ottiene una pagina e restituisce un callback con un oggetto $ function getPage(url, parseFn) ( request(( url: url ), function (error, risposta, body) ( parseFn(cheerio.load(body)) )); ) getPage(baseUrl, funzione ($) ( var questions; // Ottieni l'elenco delle domande questions = $(".question-summary .question-hyperlink").map(funzione () ( return ( titolo: $(this). text(), url: url.resolve(baseUrl, $(this).attr("href")) ); )).get().slice(0, 5); // limite alle prime 5 domande // Per ogni domanda async.map(questions, function (question, questionDone) ( getPage(question.url, function ($$) ( // Ottieni l'elenco degli utenti question.users = $$(".post-signature .user-details a").map(function () ( return $$(this).text(); )).get(); questionDone(null, question); )); ), function (err, questionsWithPosters) ( // This la funzione viene chiamata da async quando tutte le domande sono state analizzate questionsWithPosters.forEach(function (question) ( // Stampa ogni domanda insieme al relativo elenco di utenti console.info(question.title); question.users.forEach(funzione (utente) ( console.info("\t%s", utente); )); )); )); ));

jQuery UI è un gruppo di plugin jQuery che semplifica la creazione di interfacce di applicazioni web.

$(document).ready(function())( $("#drag").draggable(); $("#sortable").sortable(); $("#sortable").disableSelection(); $( " #datepicker").datepicker((Nomi dei mesi: ["Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto", "Settembre","Ottobre " ,"Novembre","Dicembre"], dayNamesMin: ["Lun", "Mar", "Mer", "Gio", "Ven", "Sab", "Domenica"])); ));

Connessione dell'interfaccia utente jQuery

Per sfruttare la potenza dei plugin jQuery UI, è necessario prima collegarli alla pagina in cui verranno utilizzati.

Sono disponibili due opzioni per connettere l'interfaccia utente jQuery:

Interfaccia utente jQuery di connessione locale

Sul sito Web ufficiale puoi scaricare il pacchetto jQuery UI standard o crearne uno tuo.

L'interfaccia utente jQuery standard include tutti i plugin esistenti e ha un tema standard. Per scaricare il pacchetto standard, vai semplicemente al sito web dell'interfaccia utente jQuery e fai clic sul pulsante Download.

Se desideri creare il tuo pacchetto jQuery UI, devi andare al sito web jQuery UI e seguire i passaggi elencati di seguito ( salta questi passaggi se hai scaricato il pacchetto standard):

Passaggio 1: selezionare i componenti richiesti

Per impostazione predefinita, tutti i plugin esistenti sono inclusi nel file di download. Se alcuni di essi non sono necessari, puoi deselezionare i loro nomi e quindi ridurre la dimensione del file finale ( il pacchetto standard dell'interfaccia utente jQuery ha una dimensione di ~ 1 MB).

Nota: la dimensione del file della libreria influisce sulla velocità di caricamento della pagina, quindi è sempre preferibile una dimensione inferiore.

Passaggio 2: scegli un design

Seleziona uno dei temi standard del plug-in dell'interfaccia utente jQuery nel campo Tema o crea il tuo tema utilizzando themeroller.

Passaggio 3: seleziona la versione

Seleziona la versione dell'interfaccia utente jQuery nel campo Versione.

Passaggio 4: scarica l'interfaccia utente di jQuery

Fare clic sul pulsante Download e salvare il file in una posizione comoda sul disco rigido.

Ora ( indipendentemente dal fatto che tu abbia scaricato il pacchetto standard o assemblato il tuo) è necessario connettere l'interfaccia utente jQuery allo script. Per fare ciò, è necessario decomprimere il file scaricato e specificare i percorsi dei file jquery-ui-version.custom.css E jquery-ui-version.custom.min.js nella sezione principale dello script.

Sintassi:

Connessione remota dell'interfaccia utente jQuery

In questa opzione di connessione non è possibile personalizzare il pacchetto jQuery UI ed è possibile utilizzare solo la sua versione standard.

Per connettere la biblioteca da remoto, devi aggiungere le seguenti righe nella sezione head della tua pagina:

Sintassi:

Fallo da solo

Attività 1: Connetti la libreria dell'interfaccia utente jQuery in remoto per far funzionare il codice dell'esercizio.

La prima domanda che sorge quando si inizia a lavorare con la libreria jQuery è come collegarla? È strano che non ne abbia scritto prima e ora ho deciso di colmare questa lacuna.

In questo articolo ti dirò come aggiungere correttamente jQuery su un normale sito Web HTML e sui motori più diffusi.

Collegamento di jQuery dalla pagina del tuo sito web

Il modo più comune per connettere una libreria. Per prima cosa devi scaricare la versione più recente dal sito Web dello sviluppatore. La pagina di download presenta diverse opzioni di libreria, ad esempio ora offre il download di "Compresso, produzione jQuery 3.1.1" e "Non compresso, sviluppo jQuery 3.1.1". La prima opzione è una versione compressa della libreria, da essa sono stati rimossi tutti i commenti, in questo caso la libreria occupa molto meno spazio, quindi la pagina a cui verrà collegata si caricherà più velocemente. La seconda opzione è, grosso modo, il codice sorgente della libreria, è strutturato in una forma di facile lettura con commenti ed è destinato principalmente agli sviluppatori. Pertanto, consiglio di utilizzare la versione compressa della libreria.

Dopo aver scaricato la libreria, è necessario posizionarla sul server in cui si trovano i file del sito. Di solito creo una cartella "js" nella root del sito in cui copio le librerie necessarie e inserisco lì un file con le mie funzioni.

Ora puoi andare direttamente alla connessione jQuery. La struttura della pagina web a cui colleghi jQuery può variare. Ma deve contenere tag HTML, HEAD e BODY. Quindi, per connettere jQuery, è necessario aggiungere un tag SCRIPT con un collegamento alla libreria all'interno del tag HEAD.

Titolo del sito

In alcuni casi, la libreria viene inclusa prima del tag body di chiusura, che è correlato all'ordine in cui il browser elabora la pagina HTML. Poiché il browser legge le righe in sequenza, quando si connette jQuery alla fine del file, il browser visualizzerà prima il sito, quindi collegherà le dinamiche. Con una connessione lenta, questo approccio garantisce un aumento della velocità di caricamento del sito e solo allora il lavoro degli slider e il resto. Il codice per questa connessione è simile al seguente:

Titolo del sito

Attenzione! Si consiglia di non cambiare il nome del file della libreria jQuery (spesso cambiato in jquery.js), poiché in futuro salvare il nome ufficiale del file ti aiuterà a vedere quale versione della libreria stai utilizzando (nel mio esempio, la versione 3.1 .1 viene utilizzato).

Collegamento di jQuery alle pagine del tuo sito web da fonti esterne

Questo metodo è utile perché la libreria è collegata dal sito Web e non è in giro sul tuo disco rigido. Ciò è particolarmente vero per un gran numero di piccoli progetti e per la formazione.

Questo metodo di connessione è chiamato “Connessione con CDN”. Una rete per la distribuzione di contenuti, o come è più comunemente chiamata CDN (Content Delivery Network), è una rete di server dislocati in tutto il mondo. Aiutano a migliorare le prestazioni del tuo server web e a ridurre il carico sul tuo traffico.

I CDN più popolari per connettere jQuery:

Di solito utilizzo la connessione di Google Developers. Diversi snippet sono già stati preparati per noi nella pagina del progetto; basta copiare la riga di quello che ci serve e includerla nel file. Con questo metodo di connessione, il codice sarà simile al seguente:

Titolo del sito

< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title >Titolo del sito< / title > < / head > < body > < / body > < / html >

Il vantaggio di questo metodo è che molti siti collegano jQuery tramite l’API di Google, il che significa che con un alto grado di probabilità questa libreria è già presente nella cache del browser dell’utente e non verrà caricata una seconda volta.

Connettere jQuery a WordPress

jQuery è incluso automaticamente in WordPress, quindi non è necessario includere manualmente le librerie di altre versioni. Questo accade nel modello utilizzando il codice php:

Ciò si tradurrà in una stringa di connessione jQuery all'interno del tag HEAD.

Al momento in cui scrivo, WordPress viene fornito con jQuery v1.12.4 ma, come puoi vedere, la versione della libreria è molto diversa da quella inclusa negli esempi sopra. È possibile connettere l'ultima versione della libreria, ma esiste la possibilità che si verifichi un conflitto.

Per evitare conflitti, ma utilizzare comunque la versione della libreria necessaria, è necessario utilizzare il modo corretto per includere jQuery nel file Functions.php:

L'articolo è destinato agli utenti che stanno appena iniziando a lavorare con l'interfaccia utente jQuery e desiderano familiarizzare con questa libreria nella pratica.
Questa interfaccia a finestra assume proprietà di base come la presenza di finestre, la possibilità di trascinarle, la possibilità di ridimensionare le finestre, minimizzarle/espanderle, ecc. Questo è ciò che dovrebbe accadere alla fine.
Quindi, vogliamo creare un esempio di un'interfaccia web interattiva con finestre e la possibilità di utilizzare l'interfaccia utente jQuery per questo scopo, quindi benvenuti in cat.

Breve introduzione Coloro che ancora non sanno cos'è l'interfaccia utente di jQuery possono saperne di più in russo seguendo il seguente collegamento. Della comparsa di una traduzione russa della documentazione della biblioteca in questione si è già parlato su Habré .1 Stage. - Preparatorio. Innanzitutto, scarica la libreria dal sito Web ufficiale http://jqueryui.com. L'interfaccia ha molte opzioni di personalizzazione, per il nostro esempio avremo bisogno di tutti i componenti e del tema Flick.
Dopo aver scaricato ed estratto i componenti scaricati sul tuo computer, otterrai la seguente struttura di file:

Tutto è chiaro con le cartelle css e js, ma scriveremo il modello per index.html in questo modo: