Bu benim Node.js'de basit bir tarayıcı oluşturma formülüm. DOM'u sunucu tarafında değiştirmek istemenizin ana nedeni budur ve muhtemelen burada bulunmanızın nedeni de budur.

İlk olarak ayrıştırılacak sayfayı yüklemek için isteği kullanın. Yükleme tamamlandıktan sonra, bu durumu Cheerio ile halledin ve tıpkı jQuery'de yaptığınız gibi DOM'u değiştirmeye başlayın.

Çalışma örneği:

Var request = require("request"), tezahürat = require("cheerio"); function parse(url) ( request(url, function (hata, yanıt, gövde) ( var $ = Cheerio.load(body); $(".soru-summary .soru-hyperlink").each(function () ( console .info($(this).text()); )); )) ) parse("http://stackoverflow.com/");

Bu örnek, SO ana sayfasında görüntülenen en önemli soruların tümünü konsolda görüntüleyecektir. Node.js'yi ve topluluğunu bu yüzden seviyorum. Daha kolay olamazdı :-)

Bağımlılıkları yükleyin:

npm Cheerio'yu yükleme isteği

Ve çalıştırın (komut dosyası crawler.js dosyasının üstündeyse):

Kodlama

Bazı sayfalarda belirli bir kodlamada İngilizce olmayan içerik bulunur ve bu kodu UTF-8 olarak çözmeniz gerekir. Örneğin, Brezilya Portekizcesi (veya Latin kökenli başka bir dil) dilindeki bir sayfa büyük olasılıkla ISO-8859-1 (a.k.a. "latin1") ile kodlanacaktır. Kod çözme gerektiğinde, isteğin içeriği hiçbir şekilde yorumlamamasını ve bunun yerine işi yapmak için iconv-lite'ı kullanmasını öneririm.

Çalışma örneği:

Var request = require("request"), iconv = require("iconv-lite"), tezahürat = require("cheerio"); var PAGE_ENCODING = "utf-8"; // eşleşme sayfası kodlamasını değiştir fonksiyon ayrıştırma(url) ( request(( url: url, kodlama: null // içeriği henüz yorumlamayın), fonksiyon (hata, yanıt, gövde) ( var $ = Cheerio.load(iconv. decode(body, PAGE_ENCODING)); $(".question-summary .question-hyperlink").each(function () ( console.info($(this).text()); )); )) ) parse( "http://stackoverflow.com/");

Başlamadan önce bağımlılıkları yükleyin:

iconv-lite Cheerio'yu yüklemek için npm isteği

Ve sonunda:

Aşağıdaki bağlantılar

Bir sonraki adım bağlantıları takip etmektir. Diyelim ki SO'daki en önemli soruların tüm posterlerini listelemek istiyorsunuz. Öncelikle en sık sorulan soruların (yukarıdaki örnek) tümünü listelemeli ve ardından ilgili kullanıcıların bir listesini almak için her soru sayfasını ayrıştırarak her bağlantıyı girmelisiniz.

Bağlantıları takip etmeye başladığınızda geri arama cehennemi başlayacaktır. Bundan kaçınmak için bir tür vaat, gelecek veya başka bir şey kullanmalısınız. Araç kutumda her zaman eşzamansız tutuyorum. İşte async'i kullanan eksiksiz bir tarayıcı örneği:

Var url = require("url"), request = require("request"), async = require("async"), tezahürat = require("cheerio"); var baseUrl = "http://stackoverflow.com/"; // Bir sayfa alır ve $ nesnesi olan bir geri çağırma döndürür function getPage(url, parseFn) ( request(( url: url ), function (error, Response, body) ( parseFn(cheerio.load(body)) )); ) getPage(baseUrl, function ($) ( var sorular; // Soruların listesini alın sorular = $(".question-summary .question-hyperlink").map(function () ( return ( title: $(this). text(), url: url.resolve(baseUrl, $(this).attr("href")) ); )).get().slice(0, 5); // ilk 5 soruyla sınırlayın // Her soru için async.map(questions, function (question, QuestionDone) ( getPage(question.url, function ($$) ( // Kullanıcıların listesini alın Question.users = $$(".post-signature .user-details) a").map(function () ( return $$(this).text(); )).get(); QuestionDone(null, soru); )); ), function (err, QuestionWithPosters) ( // This tüm sorular ayrıştırıldığında işlev eşzamansız olarak çağrılır QuestionWithPosters.forEach(function (question) ( // Her soruyu kullanıcı listesiyle birlikte yazdırır console.info(question.title); soru.users.forEach(işlev (kullanıcı) ( console.info("\t%s", kullanıcı); )); )); )); ));

jQuery UI, web uygulaması arayüzleri oluşturmayı kolaylaştıran bir grup jQuery eklentisidir.

$(document).ready(function())( $("#drag").draggable(); $("#sortable").sortable(); $("#sortable").disableSelection(); $( " #datepicker").datepicker(( ayAdları: ["Ocak", "Şubat", "Mart", "Nisan", Mayıs "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim" " ,"Kasım","Aralık"], dayNamesMin: ["Pzt", "Salı", "Çrş", "Per", "Cum", "Cumartesi", "Paz"])); ));

jQuery kullanıcı arayüzünü bağlama

jQuery UI eklentilerinin gücünden yararlanabilmek için öncelikle kullanılacakları sayfaya bağlanmaları gerekmektedir.

jQuery UI'yi bağlamak için iki seçenek vardır:

Yerel bağlantı jQuery kullanıcı arayüzü

Resmi web sitesinde standart jQuery UI paketini indirebilir veya kendinizinkini oluşturabilirsiniz.

Standart jQuery kullanıcı arayüzü mevcut tüm eklentileri içerir ve standart bir temaya sahiptir. Standart paketi indirmek için jQuery UI web sitesine gidip İndir düğmesine tıklamanız yeterlidir.

Kendi jQuery UI paketinizi oluşturmak istiyorsanız jQuery UI web sitesine gitmeniz ve aşağıda listelenen adımları uygulamanız gerekir ( standart paketi indirdiyseniz bu adımları atlayın):

Adım 1: Gerekli bileşenleri seçin

Varsayılan olarak mevcut tüm eklentiler indirme dosyasına dahil edilir. Bunlardan bazılarına ihtiyaç duyulmuyorsa adlarının işaretini kaldırabilir ve böylece son dosyanın boyutunu azaltabilirsiniz ( standart jQuery UI paketinin boyutu ~1MB'dir).

Lütfen unutmayın: Kitaplık dosyasının boyutu sayfa yükleme hızını etkiler, dolayısıyla daha küçük bir boyut her zaman tercih edilir.

Adım 2: Bir tasarım seçin

Tema alanında standart jQuery UI eklenti temalarından birini seçin veya theroller'ı kullanarak kendi temanızı oluşturun.

3. Adım: Sürümü seçin

Sürüm alanında jQuery UI sürümünüzü seçin.

Adım 4: jQuery kullanıcı arayüzünü indirin

İndir düğmesine tıklayın ve dosyayı sabit sürücünüzde uygun bir konuma kaydedin.

Şimdi ( standart paketi indirmiş olmanıza veya kendi paketinizi oluşturmanıza bakılmaksızın) jQuery UI'yi betiğe bağlamanız gerekir. Bunu yapmak için indirilen dosyayı paketinden çıkarmanız ve dosyaların yollarını belirtmeniz gerekir. jquery-ui-version.custom.css Ve jquery-ui-version.custom.min.js Senaryonun başlık bölümünde.

Sözdizimi:

jQuery Kullanıcı Arayüzü Uzaktan Bağlantı

Bu bağlantı seçeneğinde jQuery UI paketini özelleştiremezsiniz ve yalnızca standart sürümünü kullanabilirsiniz.

Kütüphaneye uzaktan bağlanmak için sayfanızın başlık kısmına aşağıdaki satırları eklemeniz gerekmektedir:

Sözdizimi:

Kendin Yap

Görev 1: Alıştırmadaki kodun çalışmasını sağlamak için jQuery UI kitaplığını uzaktan bağlayın.

JQuery kütüphanesiyle çalışmaya başladığınızda ortaya çıkan ilk soru, onu nasıl bağlayacağınızdır? Bu konuyu daha önce yazmamış olmam çok tuhaf ve şimdi bu boşluğu doldurmaya karar verdim.

Bu yazıda size jQuery'yi normal bir html web sitesine ve popüler motorlara doğru şekilde nasıl ekleyeceğinizi anlatacağım.

JQuery'yi web sitenizin sayfasından bağlama

Bir kütüphaneyi bağlamanın en yaygın yolu. Öncelikle geliştiricinin web sitesinden en son sürümü indirmeniz gerekir. İndirme sayfası çeşitli kitaplık seçenekleri sunar; örneğin artık "Sıkıştırılmış, üretim jQuery 3.1.1" ve "Sıkıştırılmamış, geliştirme jQuery 3.1.1" indirmeyi sunuyor. İlk seçenek kütüphanenin sıkıştırılmış versiyonudur, içindeki tüm yorumlar kaldırılmıştır, bu durumda kütüphane çok daha az yer kaplar, dolayısıyla bağlanacağı sayfa daha hızlı yüklenir. İkinci seçenek, kabaca konuşursak, kütüphanenin kaynak kodudur, yorumlarla birlikte okunması kolay bir biçimde yapılandırılmıştır ve öncelikle geliştiricilere yöneliktir. Bu nedenle kütüphanenin sıkıştırılmış versiyonunu kullanmanızı öneririm.

Kütüphane indirildikten sonra site dosyalarının bulunduğu sunucuya yerleştirmeniz gerekir. Genellikle sitenin kök dizininde gerekli kütüphaneleri kopyaladığım bir “js” klasörü oluşturuyorum ve fonksiyonlarımı içeren bir dosyayı oraya yerleştiriyorum.

Artık doğrudan jQuery bağlantısına gidebilirsiniz. jQuery'yi bağladığınız web sayfasının yapısı farklılık gösterebilir. Ancak HTML, HEAD ve BODY etiketlerini içermelidir. Dolayısıyla, jQuery'yi bağlamak için HEAD etiketinin içine kütüphaneye bağlantı içeren bir SCRIPT etiketi eklemeniz gerekir.

Site Başlığı

Bazı durumlarda kitaplık, tarayıcının HTML sayfasını işleme sırası ile ilgili olan kapanış gövde etiketinden önce eklenir. Tarayıcı satırları sırayla okuduğundan, dosyanın sonuna jQuery'yi bağlarken, tarayıcı önce siteyi görüntüleyecek, ardından dinamikleri bağlayacaktır. Yavaş bir bağlantıyla bu yaklaşım, site yükleme hızında bir artış sağlar ve ancak o zaman kaydırıcıların ve diğerlerinin çalışmasını sağlar. Bu bağlantının kodu şöyle görünür:

Site Başlığı

Dikkat! JQuery kütüphane dosyasının adını değiştirmemeniz önerilir (genellikle jquery.js olarak değiştirilir), çünkü gelecekte resmi dosya adını kaydetmek, kütüphanenin hangi sürümünü kullandığınızı görmenize yardımcı olacaktır (benim örneğimde sürüm 3.1). .1 kullanılır).

JQuery'yi web sitenizin sayfalarına harici kaynaklardan bağlama

Bu yöntem iyidir çünkü kitaplık web sitesinden bağlanır ve sabit diskinizde bulunmaz. Bu özellikle çok sayıda küçük proje ve eğitim için geçerlidir.

Bu bağlantı yöntemine “CDN ile Bağlanma” adı verilmektedir. İçerik dağıtım ağı veya daha yaygın olarak CDN (İçerik Dağıtım Ağı) olarak adlandırılan dünya çapındaki sunuculardan oluşan bir ağdır. Web sunucunuzun performansını artırmaya ve trafiğinizdeki yükü azaltmaya yardımcı olurlar.

JQuery'yi bağlamak için en popüler CDN'ler:

Genellikle Google Developers'ın bağlantısını kullanıyorum. Proje sayfasında bizim için birkaç snippet hazırlandı; ihtiyacımız olan satırı kopyalayıp dosyaya eklemeniz yeterli. Bu bağlantı yöntemiyle kod şöyle görünecektir:

Site Başlığı

< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title >Site Başlığı< / title > < / head > < body > < / body > < / html >

Bu yöntemin avantajı, birçok sitenin jQuery'yi Google API aracılığıyla bağlamasıdır; bu, yüksek olasılıkla bu kitaplığın kullanıcının tarayıcı önbelleğinde zaten mevcut olduğu ve ikinci kez yüklenmeyeceği anlamına gelir.

JQuery'yi WordPress'e bağlama

jQuery, WordPress'e otomatik olarak dahil edilir, dolayısıyla diğer sürümlerden kitaplıkları manuel olarak eklemenize gerek yoktur. Bu, php kodunu kullanan şablonda gerçekleşir:

Bu, HEAD etiketinin içinde bir jQuery bağlantı dizesiyle sonuçlanacaktır.

Bu yazının yazıldığı sırada WordPress, jQuery v1.12.4 ile birlikte gelir ancak görebileceğiniz gibi, kütüphanenin sürümü yukarıdaki örneklerde yer alan sürümden çok farklıdır. Kütüphanenin en son sürümüne bağlanmak mümkündür ancak çakışma olasılığı vardır.

Bir çakışmayı önlemek ama yine de gerekli olan kitaplık sürümünü kullanmak için, jQuery'yi işlevler.php dosyasına dahil etmenin doğru yolunu kullanmanız gerekir:

Makale, jQuery UI ile yeni çalışmaya başlayan ve bu kütüphaneyi pratikte tanımak isteyen kullanıcılara yöneliktir.
Bu pencere arayüzü, pencerelerin varlığı, onları sürükleme yeteneği, pencereleri yeniden boyutlandırma, simge durumuna küçültme/genişletme vb. gibi temel özellikleri varsayar. Sonunda olması gereken bu.
Bu nedenle, etkileşimli pencereli bir web arayüzü örneği ve bu amaçla jQuery kullanıcı arayüzünü kullanma becerisi oluşturmak istiyoruz - o zaman cat'e hoş geldiniz.

Kısa tanıtım Hala jQuery UI'nin ne olduğunu bilmeyenler, aşağıdaki bağlantıyı takip ederek bu konuda Rusça olarak daha fazla bilgi edinebilirler. Söz konusu kütüphanenin belgelerinin Rusça çevirisinin ortaya çıkışından Habré .1 Aşamasında zaten bahsedilmişti. – Hazırlık. Öncelikle kütüphaneyi http://jqueryui.com resmi web sitesinden indirin. Arayüzün özelleştirme için birçok seçeneği var; örneğimiz için tüm bileşenlere ve Flick temasına ihtiyacımız olacak.
İndirilen bileşenleri bilgisayarınıza indirip çıkardıktan sonra aşağıdaki dosya yapısını elde edeceksiniz:

Css ve js klasörlerinde her şey açık, ancak index.html şablonunu şu şekilde yazacağız: