Це моя формула, щоб зробити простий шукач у 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"; // Зміна до матчу 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"). "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/"; // Get a page and returns 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); Для кожного питання async.map(quests, 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 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 є групою плагінів jQuery, що полегшують створення інтерфейсу веб-додатків.

$(document).ready(function()( $("#drag").draggable(); $("#sortable").sortable(); $("#sortable").disableSelection(); $(" #datepicker").datepicker(( monthNames: ["Січень","Лютий","Березень","Квітень","Май","Червень","Липень","Серпень", "Вересень","Жовтень" ,"Листопад","Грудень"], dayNamesMin: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"]));)));

Підключення jQuery UI

Для того, щоб скористатися можливостями jQuery UI плагінів їх необхідно спочатку підключити до сторінки, на якій вони будуть використовуватися.

Існують два варіанти підключення jQuery UI:

Локальне підключення jQuery UI

На офіційному сайті Ви можете або завантажити стандартну комплектацію jQuery UI або зібрати свою власну.

Стандартна комплектація jQuery UI включає всі існуючі плагіни і має стандартну тему оформлення. Для того, щоб скачати стандартну комплектацію, просто перейдіть на сайт jQuery UI і натисніть кнопку Download .

Якщо Ви хочете зібрати власну комплектацію jQuery UI Вам необхідно перейти на сайт jQuery UI та виконати такі кроки ( пропустіть ці кроки якщо Ви завантажили стандартну комплектацію):

Крок 1: Вибрати потрібні компоненти

За замовчуванням у файл для завантаження включені всі існуючі плагіни. Якщо якісь із них не потрібні Ви можете прибрати галочку навпроти їхньої назви та скоротити тим самим розмір підсумкового файлу ( стандартна комплектація jQuery UI має розмір ~1мб).

Зверніть увагу: розмір файлу бібліотеки впливає на швидкість завантаження сторінки, тому менший розмір завжди бажаний.

Крок 2: Вибрати оформлення

Виберіть одну із стандартних тем оформлення плагінів jQuery UI в полі Theme або створіть свою тему за допомогою themeroller.

Крок 3: Вибрати версію

Виберіть версію jQuery UI у полі Version.

Крок 4: Завантажити jQuery UI

Натисніть кнопку Download і збережіть файл у зручне місце на жорсткому диску.

Тепер ( незалежно чи завантажили Ви стандартну комплектацію або зібрали свою власну) необхідно підключити jQuery UI до скрипту. Для цього необхідно розпакувати завантажений файл і вказати шляхи до файлів jquery-ui-версія.custom.cssі jquery-ui-версія.custom.min.jsу розділі head скрипт.

Синтаксис:

Віддалене підключення jQuery UI

У цьому варіанті підключення Ви не можете налаштовувати комплектацію jQuery UI і використовувати тільки її стандартну версію.

Для того, щоб підключити бібліотеку, віддалено необхідно додати наступні рядки в секцію head Вашої сторінки:

Синтаксис:

Зробіть самі

Завдання 1 підключіть бібліотеку jQuery UI віддалено, щоб код із вправи запрацював.

Перше питання, яке виникає на початку роботи з бібліотекою jQuery — як її підключити? Дивно, що я не написав про це раніше і зараз вирішив заповнити цю прогалину.

У цій статті я розповім як правильно додати jQuery на звичайному html-сайті та на популярних двигунах.

Підключення jQuery зі сторінки свого сайту

Найпоширеніший спосіб підключення бібліотеки. Для початку необхідно завантажити свіжу версію із сайту розробника. На сторінці завантаження представлено кілька варіантів бібліотеки, наприклад, зараз пропонується скачати «Compressed, production jQuery 3.1.1» і «Uncompressed, development jQuery 3.1.1». Перший варіант - це стислий варіант бібліотеки, звідти видалені всі коментарі, в цьому випадку бібліотека займає набагато менше місця, отже сторінка, на яку вона буде підключена, буде завантажуватися швидше. Другий варіант — це, грубо кажучи, вихідний код бібліотеки, він структурований у зручному для читання вигляді з коментарями, і призначений насамперед розробникам. Тому рекомендую використовувати стислу версію бібліотеки.

Після того як бібліотека завантажена, необхідно розмістити її на сервері, де знаходяться файли сайту. Я зазвичай в корені сайту створюю папку «js» в яку копіюю потрібні бібліотеки і там же розміщую файл зі своїми функціями.

Тепер можна переходити безпосередньо до підключення jQuery. Структура веб-сторінки, на яку Ви підключаєте jQuery, може бути різною. Але в ній обов'язково присутні теги HTML, HEAD та BODY. Для підключення jQuery необхідно додати тег SCRIPT з посиланням на бібліотеку всередину тега HEAD.

Заголовок сайту

У деяких випадках, бібліотеку підключають перед тегом body, що закривається, що пов'язано з порядком обробки html сторінки браузером. Оскільки браузер вичитує рядки послідовно, при підключенні jQuery в кінці файлу спочатку браузер відобразить сайт, а потім вже підключить динаміку. При повільному з'єднанні такий підхід забезпечує збільшення швидкості завантаження сайту, і вже потім роботу слайдерів та іншого. Код при такому підключенні виглядає так:

Заголовок сайту

Увага! Бажано не міняти назву файлу бібліотеки jQuery (часто змінюють на jquery.js), тому що надалі збереження офіційної назви файлу допоможе побачити, яку версію бібліотеки Ви використовуєте (у моєму прикладі використовується версія 3.1.1).

Підключення jQuery на сторінки свого сайту із зовнішніх джерел

Цей спосіб хороший тим, що бібліотека підключається із сайту і не валяється на жорсткому диску. Особливо це актуально за великої кількості маленьких проектів і для навчання.

Цей спосіб підключення називається "Підключення з CDN". Мережа доставки контенту або як її частіше називають CDN (Content Delivery Network) є мережею серверів по всьому світу. Вони допомагають покращити продуктивність вашого веб-сервера та зменшують навантаження на ваш трафік.

Найбільш популярні CDN для підключення jQuery:

Я зазвичай використовую з'єднання з Google Developers. На сторінці проекту для нас вже підготовлено кілька сніпетів, достатньо скопіювати рядок потрібного нам і підключити його до файлу. При такому способі підключення код виглядатиме так:

Заголовок сайту

< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title >Заголовок сайту< / title > < / head > < body > < / body > < / html >

Перевагою даного способу є те, що багато сайтів підключають jQuery через Google API, а це означає, що з великою ймовірністю ця бібліотека вже присутня в кеші браузера користувача, і вона не буде завантажуватися вдруге взагалі.

Підключення jQuery на WordPress

Підключення jQuery у WordPress здійснюється автоматично, тому немає необхідності підключати бібліотеки інших версій вручну. Це відбувається у шаблоні за допомогою php коду:

У результаті всередині тега HEAD з'явиться рядок підключення jQuery.

На момент написання статті з WordPress поставляється jQuery v1.12.4 Але, як бачите, версія бібліотеки дуже відрізняється від тієї, яку підключали в прикладах вище. Підключити нову версію бібліотеки можна, але є шанс виникнення конфлікту.

Щоб уникнути конфлікту, але при цьому використовувати ту версію бібліотеки, яка потрібна, потрібно скористатися правильним способом підключення jQuery у файлі functions.php:

Стаття розрахована на користувачів, які тільки починають працювати з jQuery UI і бажають на практиці познайомитися з цією бібліотекою.
Даний віконний інтерфейс передбачає такі основні властивості як наявність вікон, можливість їх перетягування, можливість зміни розміру вікон, їх згортання/розгортання і т.д. Ось що має вийти в результаті.
Отже, маємо бажання створити приклад інтерактивного віконного веб-інтерфейсу та можливості використовувати для цієї мети jQuery UI – тоді ласкаво просимо під кат.

Хто ще не знає, що таке jQuery UI, може докладніше почитати про це російською мовою, пройшовши за наступним посиланням. Про появу російського перекладу документації аналізованої бібліотеки згадувалося на Хабре .1 Етап. - Підготовчий. Для початку завантажуємо бібліотеку з офіційного сайту http://jqueryui.com. Інтерфейс має безліч опцій для кастомізації, для нашого прикладу знадобляться всі компоненти та тема Flick.
Після завантаження та вилучення завантажених компонентів на комп'ютер вийде наступна файлова структура:

З папками сss та js все зрозуміло, а шаблон для index.html напишемо такий: