Esta é minha fórmula para fazer um rastreador simples em Node.js. Esta é a principal razão para querer manipular o DOM no lado do servidor e é provavelmente a razão pela qual você está aqui.
Primeiro use a solicitação para carregar a página a ser analisada. Assim que o carregamento for concluído, administre-o com cheerio e comece a manipular o DOM como faria com jQuery.
Exemplo de trabalho:
Var request = require("solicitação"), cheerio = require("cheerio"); função analisar (url) (solicitação (url, função (erro, resposta, corpo) (var $ = cheerio.load (corpo); $(".question-summary .question-hyperlink").each(function () (console .info($(this).text()); )); )) ) parse("http://stackoverflow.com/");
Este exemplo exibirá no console todas as principais perguntas exibidas na página inicial do SO. É por isso que adoro o Node.js e sua comunidade. Não poderia ser mais fácil :-)
Instale dependências:
solicitação npm para instalar o cheerio
E execute (se o script estiver acima no arquivo crawler.js):
CodificaçãoAlgumas páginas terão conteúdo diferente do inglês em uma determinada codificação e você precisará decodificá-lo para UTF-8. Por exemplo, uma página em português brasileiro (ou qualquer outro idioma de origem latina) provavelmente será codificada em ISO-8859-1 (também conhecido como “latin1”). Quando a decodificação for necessária, sugiro que request não interprete o conteúdo de forma alguma e, em vez disso, use o iconv-lite para fazer o trabalho.
Exemplo de trabalho:
Var request = require("solicitação"), iconv = require("iconv-lite"), cheerio = require("cheerio"); var PAGE_ENCODING = "utf-8"; // altera para corresponder à codificação da página function parse(url) ( request(( url: url, encoding: null // ainda não interpreta o conteúdo ), 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/");
Antes de começar, instale as dependências:
solicitação npm para instalar o iconv-lite cheerio
E finalmente:
Seguindo linksO próximo passo é seguir os links. Digamos que você queira listar todos os postadores de todas as principais perguntas do SO. Você deve primeiro listar todas as perguntas principais (exemplo acima) e depois inserir cada link, analisando cada página de perguntas para obter uma lista dos usuários envolvidos.
Quando você começar a seguir os links, o inferno de retorno de chamada começará. Para evitar isso você deve usar algum tipo de promessa, futuro ou qualquer outra coisa. Eu sempre mantenho o assíncrono na minha caixa de ferramentas. Então aqui está um exemplo completo de rastreador usando assíncrono:
Var url = require("url"), request = require("solicitação"), async = require("async"), cheerio = require("cheerio"); var baseUrl = "http://stackoverflow.com/"; // Obtém uma página e retorna um retorno de chamada com um objeto $ function getPage(url, parseFn) ( request(( url: url ), function (error, response, body) ( parseFn(cheerio.load(body)) )); ) getPage(baseUrl, function ($) ( var questions; // Obter lista de perguntas questions = $(".question-summary .question-hyperlink").map(function () ( return ( title: $(this). text(), url: url.resolve(baseUrl, $(this).attr("href")) ); )).get().slice(0, 5); // limite às 5 principais perguntas // Para cada pergunta async.map(questions, function (question, questionDone) ( getPage(question.url, function ($$) ( // Obter lista de usuários question.users = $$(".post-signature .user-details a").map(function () ( return $$(this).text(); )).get(); questionDone(null, question); )); ), function (err, questionsWithPosters) ( // Isto a função é chamada por assíncrono quando todas as perguntas foram analisadas questionsWithPosters.forEach(function (question) ( // Imprime cada pergunta junto com sua lista de usuários console.info(question.title); question.users.forEach(função (usuário) ( console.info("\t%s", usuário); )); )); )); ));
jQuery UI é um grupo de plug-ins jQuery que facilitam a criação de interfaces de aplicativos da web.
$(document).ready(function())( $("#arrastar").draggable(); $("#sortable").sortable(); $("#sortable").disableSelection(); $( " #datepicker").datepicker(( mêsNomes: ["janeiro","fevereiro","março","abril","maio","junho","julho","agosto", "setembro","outubro " ,"Novembro","Dezembro"], dayNamesMin: ["Seg", "Ter", "Qua", "Qui", "Sex", "Sábado", "Dom"])); ));
Conectando a interface do jQueryPara aproveitar o poder dos plugins jQuery UI, eles devem primeiro estar conectados à página na qual serão usados.
Existem duas opções para conectar a UI do jQuery:
Conexão local jQuery UINo site oficial você pode baixar o pacote jQuery UI padrão ou construir o seu próprio.
A UI jQuery padrão inclui todos os plug-ins existentes e possui um tema padrão. Para baixar o pacote padrão, basta acessar o site da jQuery UI e clicar no botão Download.
Se você deseja construir seu próprio pacote jQuery UI, você precisa acessar o site da jQuery UI e seguir as etapas listadas abaixo ( pule essas etapas se você baixou o pacote padrão):
Etapa 1: selecione os componentes necessáriosPor padrão, todos os plugins existentes são incluídos no arquivo de download. Se alguns deles não forem necessários, você pode desmarcar seus nomes e assim reduzir o tamanho do arquivo final ( o pacote jQuery UI padrão tem um tamanho de aproximadamente 1 MB).
Observação: o tamanho do arquivo da biblioteca afeta a velocidade de carregamento da página, portanto, um tamanho menor é sempre preferível.
Passo 2: Escolha um designSelecione um dos temas padrão do plugin jQuery UI no campo Tema ou crie seu próprio tema usando themeroller.
Etapa 3: selecione a versãoSelecione sua versão do jQuery UI no campo Versão.
Etapa 4: Baixe a IU do jQueryClique no botão Download e salve o arquivo em um local conveniente em seu disco rígido.
Agora ( independentemente de você ter baixado o pacote padrão ou montado seu próprio) você precisa conectar o jQuery UI ao script. Para fazer isso, você precisa descompactar o arquivo baixado e especificar os caminhos para os arquivos jquery-ui-version.custom.css E jquery-ui-version.custom.min.js na seção principal do script.
Sintaxe:
Conexão remota da interface do usuário jQuery
Nesta opção de conexão, você não pode personalizar o pacote jQuery UI e pode usar apenas sua versão padrão.
Para conectar a biblioteca remotamente, você precisa adicionar as seguintes linhas à seção principal da sua página:
Sintaxe:
Faça Você Mesmo
Tarefa 1: Conecte a biblioteca jQuery UI remotamente para fazer o código do exercício funcionar.
A primeira dúvida que surge ao começar a trabalhar com a biblioteca jQuery é como conectá-la? É estranho não ter escrito sobre isso antes e agora decidi preencher essa lacuna.
Neste artigo, direi como adicionar jQuery corretamente em um site HTML normal e em mecanismos populares.
Conectando jQuery da página do seu siteA maneira mais comum de conectar uma biblioteca. Primeiro você precisa baixar a versão mais recente do site do desenvolvedor. A página de download apresenta diversas opções de biblioteca, por exemplo, agora oferece o download de “Comprimido, jQuery de produção 3.1.1” e “Descompactado, jQuery de desenvolvimento 3.1.1”. A primeira opção é uma versão compactada da biblioteca, todos os comentários foram removidos dela, neste caso a biblioteca ocupa muito menos espaço, portanto a página na qual ela estará conectada carregará mais rápido. A segunda opção é, grosso modo, o código-fonte da biblioteca, está estruturado de forma fácil de ler com comentários e é destinado principalmente a desenvolvedores. Portanto, recomendo usar a versão compactada da biblioteca.
Após o download da biblioteca, você precisa colocá-la no servidor onde os arquivos do site estão localizados. Normalmente crio uma pasta “js” na raiz do site na qual copio as bibliotecas necessárias e coloco lá um arquivo com minhas funções.
Agora você pode ir diretamente para a conexão jQuery. A estrutura da página da web à qual você conecta o jQuery pode variar. Mas deve conter tags HTML, HEAD e BODY. Portanto, para conectar o jQuery, você precisa adicionar uma tag SCRIPT com um link para a biblioteca dentro da tag HEAD.
Titulo do site
Em alguns casos, a biblioteca é incluída antes da tag body de fechamento, que está relacionada à ordem em que o navegador processa a página HTML. Como o navegador lê as linhas sequencialmente, ao conectar o jQuery no final do arquivo, o navegador primeiro exibirá o site e depois conectará o alto-falante. Com uma conexão lenta, essa abordagem garante um aumento na velocidade de carregamento do site, e só então o trabalho dos controles deslizantes e demais. O código para esta conexão é assim:
Titulo do site
Atenção! É aconselhável não alterar o nome do arquivo da biblioteca jQuery (muitas vezes alterado para jquery.js), pois no futuro salvar o nome oficial do arquivo o ajudará a ver qual versão da biblioteca você está usando (no meu exemplo, versão 3.1 .1 é usado).
Conectando jQuery às páginas do seu site de fontes externasEsse método é bom porque a biblioteca está conectada a partir do site e não fica no seu disco rígido. Isto é especialmente verdadeiro para um grande número de pequenos projetos e para a formação.
Este método de conexão é denominado “Conectando com CDN”. Uma rede de entrega de conteúdo, ou como é mais comumente chamada de CDN (Content Delivery Network), é uma rede de servidores em todo o mundo. Eles ajudam a melhorar o desempenho do seu servidor web e reduzir a carga do tráfego.
Os CDNs mais populares para conectar jQuery:
Normalmente uso a conexão do Google Developers. Vários trechos já foram preparados para nós na página do projeto, basta copiar a linha daquele que precisamos e incluí-la no arquivo. Com este método de conexão, o código ficará assim:
Titulo do site
< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title >Titulo do site< / title >
< / head > < body > < / body > < / html > |
A vantagem desse método é que muitos sites conectam o jQuery por meio da API do Google, o que significa que com alto grau de probabilidade essa biblioteca já está presente no cache do navegador do usuário e não será carregada uma segunda vez.
Conectando jQuery ao WordPressO jQuery é incluído automaticamente no WordPress, portanto não há necessidade de incluir manualmente bibliotecas de outras versões. Isso acontece no template usando código php:
|
Isso resultará em uma string de conexão jQuery dentro da tag HEAD.
No momento em que este artigo foi escrito, o WordPress vinha com jQuery v1.12.4, mas, como você pode ver, a versão da biblioteca é muito diferente daquela incluída nos exemplos acima. É possível conectar a versão mais recente da biblioteca, mas existe a possibilidade de conflito.
Para evitar um conflito, mas ainda usar a versão da biblioteca necessária, você precisa usar a maneira correta de incluir jQuery no arquivo functions.php:
O artigo é destinado a usuários que estão começando a trabalhar com jQuery UI e desejam conhecer esta biblioteca na prática.
Esta interface de janela assume propriedades básicas como a presença de janelas, a capacidade de arrastá-las, a capacidade de redimensionar janelas, minimizá-las/expandi-las, etc. Isso é o que deveria acontecer no final.
Portanto, queremos criar um exemplo de interface da web em janela interativa e a capacidade de usar jQuery UI para essa finalidade - então seja bem-vindo ao cat.
Depois de baixar e extrair os componentes baixados para o seu computador, você obterá a seguinte estrutura de arquivos:
Tudo fica claro com as pastas css e js, mas escreveremos o modelo para index.html assim: