Это моя формула, чтобы сделать простой искатель в Node.js. Это основная причина желания манипулировать DOM на стороне сервера и, вероятно, это причина, по которой вы здесь.
Сначала используйте request , чтобы загрузить страницу, подлежащую анализу. Когда загрузка будет завершена, обработайте ее cheerio и начните манипуляции с DOM так же, как с помощью jQuery.
Рабочий пример:
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/");
В этом примере будет отображаться на консоли все главные вопросы, отображаемые на домашней странице SO. Вот почему я люблю Node.js и его сообщество. Это не могло быть проще: -)
Установить зависимости:
npm запрос на установку cheerio
И запустите (если script выше в файле crawler.js):
КодировкаНекоторые страницы будут иметь не-английский контент в определенной кодировке, и вам нужно будет декодировать его до UTF-8 . Например, страница на бразильском португальском языке (или любой другой язык латинского происхождения), скорее всего, будет закодирована в ISO-8859-1 (a.k.a. "latin1"). Когда требуется декодирование, я предлагаю request не интерпретировать контент каким-либо образом и вместо этого использовать iconv-lite для выполнения задания.
Рабочий пример:
Var request = require("request"), iconv = require("iconv-lite"), cheerio = require("cheerio"); var PAGE_ENCODING = "utf-8"; // change to match page encoding function parse(url) { request({ url: url, encoding: null // do not interpret content yet }, 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/");
Перед запуском установите зависимости:
npm запрос на установку iconv-lite cheerio
И наконец:
Следующие ссылкиСледующим шагом будет следовать ссылкам. Скажем, вы хотите перечислить все плакаты с каждого верхнего вопроса на SO. Вы должны сначала перечислить все главные вопросы (пример выше), а затем ввести каждую ссылку, разобрав каждую страницу вопросов, чтобы получить список вовлеченных пользователей.
Когда вы начнете следовать ссылкам, начнется callback hell . Чтобы этого избежать, вы должны использовать какой-то promises, фьючерс или что-то еще. Я всегда держу async в своем наборе инструментов. Итак, вот полный пример искателя с использованием async:
Var url = require("url"), request = require("request"), async = require("async"), cheerio = require("cheerio"); var baseUrl = "http://stackoverflow.com/"; // Gets a page and returns a callback with a $ object function getPage(url, parseFn) { request({ url: url }, function (error, response, body) { parseFn(cheerio.load(body)) }); } getPage(baseUrl, function ($) { var questions; // Get list of questions questions = $(".question-summary .question-hyperlink").map(function () { return { title: $(this).text(), url: url.resolve(baseUrl, $(this).attr("href")) }; }).get().slice(0, 5); // limit to the top 5 questions // For each question async.map(questions, function (question, questionDone) { getPage(question.url, function ($$) { // Get list of users question.users = $$(".post-signature .user-details a").map(function () { return $$(this).text(); }).get(); questionDone(null, question); }); }, function (err, questionsWithPosters) { // This function is called by async when all questions have been parsed questionsWithPosters.forEach(function (question) { // Prints each question along with its user list console.info(question.title); question.users.forEach(function (user) { console.info("\t%s", user); }); }); }); });
Библиотека jQuery UI (User Interface ) представляет собой набор шаблонных элементов для создания пользовательского интерфейса и является частью библиотеки jQuery . Под пользовательским интерфейсом подразумевают - взаимодействие пользователя и веб-страницы.
Главная задача библиотеки jQuery UI - это облегчить жизнь веб-разработчикам, чтобы они не тратили время на выполнение однотипных задач. Наиболее часто встречающиеся на сайтах скрипты на JavaScript были собраны в одну библиотеку и разработчикам надо просто брать и применять нужные параметры и методы. Разрабатывать пользовательские интерфейсы стало намного быстрее.
Используемые на сайтах календари, слайдеры, всплывающие окна, уже стали обязательным атрибутом. Так зачем каждый раз разработчику писать код с нуля? Когда он может готовый шаблон подстроить под себя и использовать на своем сайте.
Подключение jQuery UIОфициальный сайт: https://jqueryui.com/
Библиотеку jQuery UI можно скачать на компьютер или подключить через CDN ссылку.
Подключение через CDN
У вас есть два варианта, как скачивать библиотеку.
Выборочное скачивание - Custom DownloadВам точно не надо скачивать всю библиотеку, если вы собираетесь использовать только какие-то отдельные компоненты. На странице Download Builder вы снимаете все галочки, кроме нужных компонентов. Например, если вам нужен только виджет accordion , то напротив него ставите в чекбокс галочку и сайт подскажет вам, какие элементы будут нужны ещё для работы. Галочки будут расставлены автоматически, там где надо и вы не будете скачивать ненужные файлы, что положительно скажется на скорости загрузки сайта.
Прежде чем нажать кнопку download , выбираете подходящую тему для красивого оформления компонентов. Посмотреть на визуальное оформление готовых тем, можно в разделе Theme/Gallery .
Для встраивания компонентов уже в стилизованный сайт, вам больше подойдет конструктор тем - ThemeRoller , перейдите в раздел Theme . При изменениях в панели управления внешнего вида, вы сразу будете видеть, как выглядят все виджеты. После того как вы закончите формирование внешнего вида элемента, нажимаете на кнопочку download и скачиваете только выбранные элементы и тему, что очень удобно.
Полное скачивание - Quick DownloadСитуация, когда вам нужна вся библиотека маловероятна, разве что посмотреть исходный код. Для скачивания полной последней версии надо нажать на кнопку: Stable .
Скачанная библиотека подключается так же, как и через CDN , с той лишь разницей, что URL-ы ссылок будут вести на папку, куда вы эти файлы положите на вашем хостинге.
В разделе Demos наглядно можно увидеть какие задачи (демонстрационные примеры) на сайте можно решить с помощью библиотеки.
Рассмотрим на примере виджета - Tooltip . Предназначение этого виджета: для красивого открывания подсказки, указанной в атрибуте title .
Как обычно делаем HTML структуру. В параграфе p размещаем поле ввода для вашего возраста - input . В текстовом поле мы указываем атрибут title с текстом "Укажите, пожалуйста, Ваш возраст" . К этому элементу мы и применим виджет tooltip .
Ваш возраст:
После загрузки DOM дерева, на объекте document мы обратимся к методу tooltip . Мы обращаемся сразу ко всей странице (document) , чтобы данный метод можно было бы применить и к другим элементам страницы. После вызова метода tooltip значения атрибутов title будут отображаться в всплывающей подсказке.
Я запутался в небольшой проблеме, связанной с jquery в моем проекте. Проект представляет собой сайт MVC4 в визуальной студии 11.
Проблема в том, что jQuery не входит в состав пакета, и, похоже, он работает до того, как я обновился до 1.7.2, но не могу быть уверен.
Я вижу комментарий файла jQuery поверх связанного файла, но не могу найти его. Все остальные файлы, кажется, включены (мои собственные скрипты и файлы jquery ui).
Я попробовал фильтры пакетов и создал свой собственный пакет, но ничего не работает.
Мне бы очень понравилась любая помощь, так как при загрузке страницы все java-скрипты просто сбой, потому что функция не найдена. Это работает, если я обычно включаю файлы java script.
Protected void Application_Start() { BundleTable.Bundles.EnableDefaultBundles(); }
Function Test(){ }
Затем изменилось на это, и код не был на этот раз.
(function Test(){ })
Самое странное, что другие файлы jQuery, такие как пользовательские интерфейсы, не удаляются, и они одинаковы.
Изменить: похоже, что это предназначено
Обновление 2:
Протестировался еще и выяснил, какой файл ломается, если я включаю какие-либо из этих файлов в свой собственный пакет, он разбивает
- jquery.validate.js
- jquery.validate.unobtrusive.js
- jquery.unobtrusive-ajax.min.js
Перед ними у меня есть, и они работают без ошибок
- JQuery-1.7.2.min.js
- JQuery-UI-1.8.19.min.js
- bootstrap.min.js
Это все еще странно, если я включаю этот файл как обычно в script с , они работают так, как должны, без ошибок.
Хотя, если я собираю рабочие файлы, а затем добавляю нерабочий после, как обычно, они все равно ломаются
Var bundle = new Bundle("~/js", new JsMinify()); bundle.AddFile("~/Scripts/jquery-1.7.2.min.js"); bundle.AddFile("~/Scripts/jquery-ui-1.8.19.min.js"); bundle.AddFile("~/Scripts/bootstrap.min.js"); BundleTable.Bundles.Add(bundle);
Изменить: похоже, что что-то изменилось в связанных файлах jquery, что заставляет плагины проверки достоверности
Работа вокруг
Я пытался добавить старые файлы перед обновлением, и он работает! Удалось выяснить, что это был новый jQuery UI 1.8.19 от NuGet, который разбился.
Я загрузил jquery ui прямо со своего сайта и использовал его вместо этого, и он сработает!
Итак, кажется, что что-то в версии jquery ui nuget изменено, что пакет собирает и изменяет/удаляет его, поэтому он прерывается.
какая часть виновата? пакеты jQuery UI NuGet или пакет mvc4? И есть ли решение проблемы связывания?
Статья рассчитана на пользователей только начинающих работать с jQuery UI и желающих на практике познакомиться с этой библиотекой.
Данный оконный интерфейс предполагает такие основные свойства как - наличие окон, возможность их перетаскивания, возможность изменения размера окон, их свертывания/развертывания и т.д. Вот что должно получиться в итоге .
Итак, имеем желание создать пример интерактивного оконного веб-интерфейса и возможности использовать для этой цели jQuery UI – тогда, добро пожаловать под кат.
После закачки и извлечения загруженных компонентов на компьютер получится следующая файловая структура:
С папками сss и js всё понятно, а шаблон для index.html напишем такой: