This is my formula to make a simple Node.js crawler. This is the main reason for wanting to manipulate the DOM on the server side and is probably the reason why you are here.

First use request to load the page to be parsed. When the download is complete, cheerio it and start manipulating the DOM just like you would with jQuery.

Working example:

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/");

This example will display on the console all the top questions displayed on the SO home page. This is why I love Node.js and its community. It couldn't be easier :-)

Install dependencies:

npm prompt to install cheerio

And run (if the script is above in the crawler.js file):

Encoding

Some pages will have non-english content in a certain encoding and you will need to decode it to UTF-8 . For example, a page in Brazilian Portuguese (or any other language of Latin origin) is likely to be encoded in ISO-8859-1 (a.k.a. "latin1"). When decoding is required, I suggest request not interpret the content in any way and instead use iconv-lite to do the job.

Working example:

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/");

Before starting, install dependencies:

npm prompt to install iconv-lite cheerio

And finally:

Following links

The next step is to follow the links. Let's say you want to list all the posters from every top question on SO. You must first list all the top questions (example above) and then enter each link, parsing each question page to get a list of the users involved.

When you start following the links, callback hell will start. To avoid this, you must use some kind of promises, futures, or something else. I always keep async in my toolbox. So here is a complete example of a crawler using 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 is a group of jQuery plugins that make it easy to create a web application interface.

$(document).ready(function()( $("#drag").draggable(); $("#sortable").sortable(); $("#sortable").disableSelection(); $(" #datepicker").datepicker(( monthNames: ["January","February","March","April","May","June","July","August", "September","October" ,"November","December"], dayNamesMin: ["Mon", "Tue", "Wed", "Thurs", "Fri", "Sat", "Sun"])); ));

Connecting jQuery UI

In order to take advantage of jQuery UI plugins, they must first be connected to the page on which they will be used.

There are two options for connecting jQuery UI:

jQuery UI local connection

On the official website, you can either download the standard jQuery UI package or build your own.

The default jQuery UI package includes all existing plugins and has a default theme. To download the standard package, simply go to the jQuery UI website and click the Download button.

If you want to build your own jQuery UI bundle, you need to go to the jQuery UI site and follow the steps below ( skip these steps if you have downloaded the standard package):

Step 1: Select the necessary components

By default, all existing plugins are included in the download file. If some of them are not needed, you can uncheck the box next to their name and thereby reduce the size of the final file ( default jQuery UI has a size of ~1mb).

Please note that the size of the library file affects page loading speed, so a smaller size is always preferred.

Step 2: Choose a design

Select one of the standard jQuery UI plugin themes in the Theme field, or create your own theme using the themeroller.

Step 3: Choose a version

Select the jQuery UI version in the Version field.

Step 4: Download jQuery UI

Click the Download button and save the file to a convenient location on your hard drive.

Now ( whether you downloaded the standard package or built your own) you need to connect jQuery UI to the script. To do this, you need to unpack the downloaded file and specify the paths to the files jquery-ui-version.custom.css And jquery-ui-version.custom.min.js in the head section of the script.

Syntax:

jQuery UI remote connection

In this connection option, you cannot customize the jQuery UI bundle and can only use its standard version.

In order to connect the library remotely, you need to add the following lines to the head section of your page:

Syntax:

Do it yourself

Task 1 connect the jQuery UI library remotely in order to make the code from the exercise work.

The first question that arises when starting to work with the jQuery library is how to include it? It is strange that I did not write about this earlier and now decided to fill this gap.

In this article I will tell you how to properly add jQuery on a regular html site and on popular engines.

Connecting jQuery from a page on your site

The most common way to connect a library. First you need to download the latest version from the developer's site. The download page provides several options for the library, for example, now it is offered to download "Compressed, production jQuery 3.1.1" and "Uncompressed, development jQuery 3.1.1". The first option is a compressed version of the library, all comments are removed from there, in this case the library takes up much less space, therefore the page to which it will be connected will load faster. The second option is, roughly speaking, the source code of the library, it is structured in an easy-to-read form with comments, and is intended primarily for developers. Therefore, I recommend using the compressed version of the library.

After the library is loaded, you need to place it on the server where the site files are located. I usually create a “js” folder in the root of the site, into which I copy the necessary libraries and place the file with my functions there.

Now you can go directly to connecting jQuery. The structure of the web page where you include jQuery can be different. But it must contain HTML, HEAD and BODY tags. So, to connect jQuery, you need to add a SCRIPT tag with a link to the library inside the HEAD tag.

Site header

In some cases, the library is included before the closing body tag, which is related to the order in which the html page is processed by the browser. Since the browser reads the lines sequentially, when connecting jQuery at the end of the file, the browser will first display the site, and then connect the dynamics. With a slow connection, this approach provides an increase in the speed of loading the site, and only then the work of the sliders and the rest. The code for this connection looks like this:

Site header

Attention! It is advisable not to change the name of the jQuery library file (often changed to jquery.js), as later keeping the official file name will help you see which version of the library you are using (in my example, version 3.1.1 is used).

Connecting jQuery to the pages of your site from external sources

This method is good because the library is connected from the site and does not lie on the hard drive. This is especially true with a large number of small projects and for training.

This connection method is called "Connecting with CDN". Content Delivery Network or as it is more commonly called CDN (Content Delivery Network) is a network of servers around the world. They help improve the performance of your web server and reduce the load on your traffic.

The most popular CDNs for connecting jQuery:

I usually use the connection from Google Developers. Several snippets have already been prepared for us on the project page, just copy the line we need and include it in the file. With this connection method, the code will look like this:

Site header

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

The advantage of this method is that many sites include jQuery through the Google API, which means that with a high degree of probability this library is already present in the user's browser cache, and it will not be loaded a second time at all.

Connecting jQuery to WordPress

Including jQuery in WordPress is done automatically, so there is no need to include libraries of other versions manually. This happens in the template using php code:

As a result, a jQuery connection string will appear inside the HEAD tag.

At the time of this writing, WordPress ships with jQuery v1.12.4. But, as you can see, the version of the library is very different from the one that was included in the examples above. It is possible to connect the latest version of the library, but there is a chance of a conflict.

To avoid conflict, but still use the version of the library that is needed, you need to use the correct way to include jQuery in the functions.php file:

The article is intended for users who are just starting to work with jQuery UI and who want to get acquainted with this library in practice.
This window interface assumes such basic properties as - the presence of windows, the ability to drag them, the ability to resize windows, minimize / maximize them, etc. Here's what the end result should be.
So, we have a desire to create an example of an interactive windowed web interface and the ability to use jQuery UI for this purpose - then, welcome under cat.

A brief introduction Who does not know what jQuery UI is yet, can read more about it in Russian by clicking on the following link. The appearance of a Russian translation of the documentation of the library in question was already mentioned on Habré .1 Stage. - Preparatory. First, download the library from the official site http://jqueryui.com. The interface has many options for customization, for our example we will need all the components and the Flick theme.
After downloading and extracting the downloaded components to the computer, the following file structure will be obtained:

With the css and js folders, everything is clear, and the template for index.html will be written like this: