Dies ist meine Formel, um einen einfachen Crawler in Node.js zu erstellen. Dies ist der Hauptgrund für den Wunsch, das DOM auf der Serverseite zu manipulieren, und wahrscheinlich der Grund, warum Sie hier sind.

Verwenden Sie zunächst die Anforderung, um die zu analysierende Seite zu laden. Sobald der Ladevorgang abgeschlossen ist, behandeln Sie ihn mit Cheerio und beginnen Sie mit der Manipulation des DOM, genau wie Sie es mit jQuery tun würden.

Arbeitsbeispiel:

Var request = require("request"), cheerio = require("cheerio"); function parse(url) ( request(url, function (error, Response, body) ( var $ = cheerio.load(body); $(".question-summary .question-hyperlink").each(function () ( console .info($(this).text()); )) ) parse("http://stackoverflow.com/");

In diesem Beispiel werden auf der Konsole alle am häufigsten angezeigten Fragen angezeigt Startseite ALSO. Deshalb liebe ich Node.js und seine Community. Es könnte nicht einfacher sein :-)

Abhängigkeiten installieren:

NPM-Anfrage zur Installation von Cheerio

Und führen Sie aus (wenn sich das Skript oben in der Datei crawler.js befindet):

Codierung

Einige Seiten enthalten nicht-englische Inhalte in einer bestimmten Kodierung und Sie müssen diese in UTF-8 dekodieren. Beispielsweise wird eine Seite in brasilianischem Portugiesisch (oder einer anderen Sprache lateinischen Ursprungs) höchstwahrscheinlich in ISO-8859-1 (auch bekannt als „latin1“) codiert. Wenn eine Dekodierung erforderlich ist, empfehle ich, dass die Anfrage den Inhalt in keiner Weise interpretiert und stattdessen iconv-lite verwendet, um die Aufgabe zu erledigen.

Arbeitsbeispiel:

Var request = require("request"), iconv = require("iconv-lite"), cheerio = require("cheerio"); var PAGE_ENCODING = "utf-8"; // ändern, um die Seitenkodierung anzupassen. Funktion parse(url) ( request(( url: url,kodierung: null // Inhalt noch nicht interpretieren), function (error, Response, Body) ( var $ = cheerio.load(iconv. decode(body, PAGE_ENCODING)); $(".question-summary .question-hyperlink").each(function () ( console.info($(this).text()); )) ) parse( "http: //stackoverflow.com/");

Installieren Sie vor dem Start die Abhängigkeiten:

npm-Anfrage zur Installation von iconv-lite cheerio

Und endlich:

Folgende Links

Der nächste Schritt besteht darin, den Links zu folgen. Nehmen wir an, Sie möchten alle Poster zu jeder Top-Frage auf SO auflisten. Sie sollten zunächst alle wichtigsten Fragen auflisten (Beispiel oben) und dann jeden Link eingeben und jede Seite mit Fragen analysieren, um eine Liste der beteiligten Benutzer zu erhalten.

Wenn Sie anfangen, den Links zu folgen, beginnt die Rückrufhölle. Um dies zu vermeiden, sollten Sie Versprechen, Futures oder etwas anderes verwenden. Ich halte die Asynchronität in meiner Toolbox immer aufrecht. Hier ist ein vollständiges Crawler-Beispiel mit Async:

Var url = require("url"), request = require("request"), async = require("async"), cheerio = require("cheerio"); var baseUrl = "http://stackoverflow.com/"; // Ruft eine Seite ab und gibt einen Rückruf mit einem $-Objekt zurück function getPage(url, parseFn) ( request(( url: url ), function (error, Response, body) ( parseFn(cheerio.load(body)) )); ) getPage(baseUrl, function ($) ( var questions; // Liste der Fragen abrufen questions = $(".question-summary .question-hyperlink").map(function () ( return ( title: $(this). text(), url: url.resolve(baseUrl, $(this).attr("href")) )).get().slice(0, 5); // auf die obersten 5 Fragen beschränken // Für jede Frage async.map(questions, function (question, questionsDone) ( getPage(question.url, function ($$) ( // Liste der Benutzer abrufen question.users = $$(".post-signature .user-details a" ).map(function () ( return $$(this).text(); ).get(); questionsDone(null, questions)); function (err, questionsWithPosters) ( // Diese Funktion ist wird von async aufgerufen, wenn alle Fragen analysiert wurden questionsWithPosters.forEach(function (question) ( // Druckt jede Frage zusammen mit ihrer Benutzerliste console.info(question.title); question.users.forEach(function (user) ( console.info("\t%s", user); )); )); )); ));

jQuery UI ist eine Gruppe von jQuery-Plugins, die die Erstellung von Webanwendungsschnittstellen erleichtern.

$(document).ready(function())( $("#drag").draggable(); $("#sortable").sortable(); $("#sortable").disableSelection(); $( " #datepicker").datepicker(( Monatsnamen: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober". " ,"November","Dezember"], dayNamesMin: ["Mo", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]));

jQuery-Benutzeroberfläche verbinden

Um die Leistungsfähigkeit der jQuery-UI-Plugins nutzen zu können, müssen diese zunächst mit der Seite verbunden werden, auf der sie verwendet werden sollen.

Es gibt zwei Möglichkeiten, die jQuery-Benutzeroberfläche anzubinden:

Lokale Verbindung jQuery-Benutzeroberfläche

Auf der offiziellen Website können Sie entweder das Standard-jQuery-UI-Paket herunterladen oder Ihr eigenes erstellen.

Die Standard-jQuery-Benutzeroberfläche umfasst alle vorhandenen Plugins und verfügt über ein Standarddesign. Um das Standardpaket herunterzuladen, gehen Sie einfach zur jQuery-UI-Website und klicken Sie auf die Schaltfläche „Herunterladen“.

Wenn Sie Ihr eigenes jQuery-UI-Paket erstellen möchten, müssen Sie zur jQuery-UI-Website gehen und die unten aufgeführten Schritte ausführen ( Überspringen Sie diese Schritte, wenn Sie das Standardpaket heruntergeladen haben):

Schritt 1: Wählen Sie die erforderlichen Komponenten aus

Standardmäßig sind alle vorhandenen Plugins in der Download-Datei enthalten. Wenn einige davon nicht benötigt werden, können Sie ihre Namen deaktivieren und dadurch die Größe der endgültigen Datei reduzieren ( Das standardmäßige jQuery-UI-Paket hat eine Größe von ~1 MB).

Bitte beachten Sie: Die Größe der Bibliotheksdatei beeinflusst die Ladegeschwindigkeit der Seite, daher ist eine kleinere Größe immer vorzuziehen.

Schritt 2: Wählen Sie ein Design

Wählen Sie im Feld „Theme“ eines der standardmäßigen jQuery-UI-Plugin-Themen aus oder erstellen Sie mit Themeroller Ihr eigenes Thema.

Schritt 3: Version auswählen

Wählen jQuery-Version Benutzeroberfläche im Feld Version.

Schritt 4: Laden Sie die jQuery-Benutzeroberfläche herunter

Klicken Sie auf die Schaltfläche „Herunterladen“ und speichern Sie die Datei an einem geeigneten Ort auf Ihrer Festplatte.

Jetzt ( unabhängig davon, ob Sie das Standardpaket heruntergeladen oder Ihr eigenes Paket zusammengestellt haben) müssen Sie die jQuery-Benutzeroberfläche mit dem Skript verbinden. Dazu müssen Sie die heruntergeladene Datei entpacken und den Pfad zu den Dateien angeben jquery-ui-version.custom.css Und jquery-ui-version.custom.min.js im Kopfteil des Skripts.

Syntax:

jQuery-UI-Remoteverbindung

Bei dieser Verbindungsoption können Sie das jQuery-UI-Paket nicht anpassen und nur seine Standardversion verwenden.

Um die Bibliothek remote zu verbinden, müssen Sie die folgenden Zeilen zum Kopfbereich Ihrer Seite hinzufügen:

Syntax:

Mach es selbst

Aufgabe 1: Verbinden Sie die jQuery-UI-Bibliothek remote, damit der Code aus der Übung funktioniert.

Die erste Frage, die sich bei der Arbeit mit der jQuery-Bibliothek stellt, ist, wie man sie verbindet. Es ist seltsam, dass ich nicht schon früher darüber geschrieben habe und nun beschlossen habe, diese Lücke zu schließen.

In diesem Artikel erkläre ich Ihnen, wie Sie jQuery korrekt auf einer regulären HTML-Website und in gängigen Engines hinzufügen.

Verbinden Sie jQuery von Ihrer Website aus

Die gebräuchlichste Art, eine Bibliothek anzuschließen. Zuerst müssen Sie die neueste Version von der Website des Entwicklers herunterladen. Die Download-Seite bietet mehrere Bibliotheksoptionen, zum Beispiel bietet sie jetzt den Download von „Komprimiert, Produktions-jQuery 3.1.1“ und „Unkomprimiert, Entwicklung jQuery 3.1.1“ an. Die erste Option ist eine komprimierte Version der Bibliothek. Alle Kommentare wurden daraus entfernt. In diesem Fall nimmt die Bibliothek viel weniger Platz ein, sodass die Seite, mit der sie verbunden wird, schneller geladen wird. Die zweite Möglichkeit ist, grob gesagt, Quelle Die Bibliothek ist in leicht lesbarer Form mit Kommentaren strukturiert und richtet sich in erster Linie an Entwickler. Daher empfehle ich die Verwendung der komprimierten Version der Bibliothek.

Nachdem die Bibliothek heruntergeladen wurde, müssen Sie sie auf dem Server platzieren, auf dem sich die Site-Dateien befinden. Normalerweise erstelle ich einen „js“-Ordner im Stammverzeichnis der Site, in den ich die notwendigen Bibliotheken kopiere und dort eine Datei mit meinen Funktionen platziere.

Jetzt können Sie direkt zur jQuery-Verbindung gehen. Die Struktur der Webseite, mit der Sie jQuery verbinden, kann variieren. Es muss jedoch HTML-, HEAD- und BODY-Tags enthalten. Um jQuery zu verbinden, müssen Sie also ein SCRIPT-Tag mit einem Link zur Bibliothek innerhalb des HEAD-Tags hinzufügen.

Seitentitel

In einigen Fällen wird die Bibliothek vor dem schließenden Body-Tag eingefügt, das sich auf die Verarbeitungsreihenfolge bezieht HTML-Seiten Browser. Da der Browser die Zeilen nacheinander liest, zeigt der Browser beim Verbinden von jQuery am Ende der Datei zuerst die Site an und verbindet dann die Dynamik. Bei einer langsamen Verbindung sorgt dieser Ansatz für eine Erhöhung der Ladegeschwindigkeit der Website und erst dann für die Arbeit von Schiebereglern und anderen. Der Code für diese Verbindung sieht folgendermaßen aus:

Seitentitel

Aufmerksamkeit! Es wird empfohlen, den Namen der jQuery-Bibliotheksdatei nicht zu ändern (häufig in jquery.js geändert), da Sie in Zukunft durch das Speichern des offiziellen Dateinamens erkennen können, welche Version der Bibliothek Sie verwenden (in meinem Beispiel Version 3.1). .1 verwendet wird).

Verbinden Sie jQuery mit den Seiten Ihrer Website aus externen Quellen

Diese Methode ist gut, da die Bibliothek über die Website verbunden ist und nicht auf Ihrer Festplatte herumliegt. Dies gilt insbesondere dann, wenn große Mengen kleine Projekte und zum Lernen.

Diese Verbindungsmethode wird „Verbinden mit CDN“ genannt. Ein Content Delivery Network, oder besser CDN (Content Delivery Network) genannt, ist ein Netzwerk von Servern auf der ganzen Welt. Sie tragen dazu bei, die Leistung Ihres Webservers zu verbessern und die Belastung Ihres Datenverkehrs zu verringern.

Die beliebtesten CDNs zur Anbindung von jQuery:

Normalerweise nutze ich die Anbindung von Google Developers. Auf der Projektseite wurden bereits mehrere Snippets für uns vorbereitet. Kopieren Sie einfach die Zeile des benötigten Snippets und fügen Sie sie in die Datei ein. Bei dieser Verbindungsmethode sieht der Code folgendermaßen aus:

Seitentitel

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

Der Vorteil dieser Methode besteht darin, dass viele Websites jQuery über die Google API anbinden, was bedeutet, dass diese Bibliothek mit hoher Wahrscheinlichkeit bereits im Browser-Cache des Benutzers vorhanden ist und kein zweites Mal geladen wird.

jQuery mit WordPress verbinden

jQuery ist automatisch in WordPress enthalten, sodass keine Notwendigkeit besteht, Bibliotheken aus anderen Versionen manuell einzubinden. Dies geschieht in der Vorlage mithilfe von PHP-Code:

Dies führt zu einer jQuery-Verbindungszeichenfolge innerhalb des HEAD-Tags.

Zum Zeitpunkt des Verfassens dieses Artikels wird WordPress mit jQuery v1.12.4 ausgeliefert. Wie Sie sehen, unterscheidet sich die Version der Bibliothek jedoch stark von der in den obigen Beispielen enthaltenen. Es ist möglich, die neueste Version der Bibliothek anzuschließen, es besteht jedoch die Möglichkeit eines Konflikts.

Um einen Konflikt zu vermeiden und dennoch die benötigte Version der Bibliothek zu verwenden, müssen Sie jQuery auf die richtige Weise in die Datei „functions.php“ einbinden:

Der Artikel richtet sich an Benutzer, die gerade erst anfangen, mit jQuery UI zu arbeiten und diese Bibliothek in der Praxis kennenlernen möchten.
Diese Fensterschnittstelle setzt grundlegende Eigenschaften wie das Vorhandensein von Fenstern, die Möglichkeit, sie zu ziehen, die Möglichkeit, die Größe von Fenstern zu ändern, sie zu minimieren/maximieren usw. voraus. Das ist es, was am Ende passieren sollte.
Wir möchten also ein Beispiel für eine interaktive Weboberfläche mit Fenstern und die Möglichkeit erstellen, die jQuery-Benutzeroberfläche für diesen Zweck zu verwenden – dann willkommen bei cat.

Kurze Einführung Wer noch nicht weiß, was jQuery UI ist, kann über den folgenden Link mehr darüber auf Russisch lesen. Das Erscheinen einer russischen Übersetzung der Dokumentation der betreffenden Bibliothek wurde bereits auf Habré .1 Stage erwähnt. – Vorbereitend. Laden Sie zunächst die Bibliothek von der offiziellen Website http://jqueryui.com herunter. Die Benutzeroberfläche bietet viele Möglichkeiten zur Anpassung, für unser Beispiel benötigen wir alle Komponenten und das Flick-Theme.
Nach dem Herunterladen und Extrahieren der heruntergeladenen Komponenten auf Ihren Computer erhalten Sie die folgende Dateistruktur:

Mit den Ordnern css und js ist alles klar, aber wir schreiben die Vorlage für index.html so: