ev > Səhvlər > Dərslər Niyə JQuery-nin hər yerdə dollar işarələri var? jQuery-ə giriş


Dərslər Niyə JQuery-nin hər yerdə dollar işarələri var? jQuery-ə giriş




JQuery HTML "az yazmaq və daha çox etmək" üçün nəzərdə tutulmuş kitabxanadır. Bu proqramlaşdırma dili deyil, ümumi JavaScript tapşırıqlarının həyata keçirilməsini asanlaşdırmaq üçün istifadə olunan bir vasitədir.

JQuery brauzerlər arası uyğunluğun əlavə üstünlüyünə malikdir. Kodunuzun istənilən müasir brauzerdə şərh olunacağına əmin ola bilərsiniz.

Sadə bir proqramın yazılmasının müqayisəsi “Salam, Dünya! " JavaScript və jQuery istifadə edərək, onların arasındakı fərqi görə bilərsiniz.

JavaScript

document.getElementById("demo").innerHTML = "Salam, Dünya!";

JQuery

$("#demo").html("Salam, Dünya!");

Bu qısa nümunə jQuery-dən istifadə edərək standart JavaScript ilə eyni nəticəyə necə nail ola biləcəyinizi, lakin daha qısa şəkildə göstərir.

Məqsədlər

Bu dərslik jQuery haqqında hər hansı əsas bilikləri nəzərdə tutmur, lakin aşağıdakı mövzuları əhatə edir:

  • jQuery-ni veb layihəyə necə quraşdırmaq olar;
  • API, DOM və CDN kimi vacib veb inkişaf konsepsiyalarını müəyyənləşdirin;
  • Ümumi jQuery seçiciləri, hadisələri və effektləri;
  • Bu məqalədə öyrənilən anlayışları yoxlamaq üçün nümunələr.
jQuery quraşdırma

JQuery, sənədinizdə əlaqələndirəcəyiniz JavaScript faylıdır. JQuery-ni HTML-yə necə qoşmaq olar:

  • Yerli surəti yükləyin;
  • Məzmun çatdırılması şəbəkəsi (CDN) vasitəsilə fayla keçid əlavə edin.

Qeyd. Məzmun Çatdırılma Şəbəkəsi (CDN) istifadəçiyə coğrafi mövqeyinə əsasən veb məzmununa xidmət edən çoxsaylı serverlər sistemidir. CDN vasitəsilə jQuery faylına keçid etdiyiniz zaman o, öz serverinizdə yerləşdirildiyindən daha sürətli və səmərəli şəkildə istifadəçiyə təqdim olunacaq.

Nümunələrimizdə CDN vasitəsilə jQuery linkindən istifadə edəcəyik. jQuery-nin ən son versiyasını Google-da tapmaq olar. Əvəzində kitabxananı yükləmək istəyirsinizsə, jQuery-nin surətini rəsmi internet saytından əldə edə bilərsiniz.

Gəlin kiçik bir veb layihəsi yaradaq. O, style.css faylı, scripts.js və əsas index.html faylından ibarət olacaq.


Əsas HTML işarələməsini təyin edin və onu index.html-də saxlayın.

Index.html

jQuery Demo

Index.html

jQuery Demo

JavaScript skripti (scripts.js) jQuery kitabxanasının altındakı sənədə daxil edilməlidir, əks halda o işləməyəcək.

Qeyd. Əgər jQuery-nin yerli nüsxəsini endirmisinizsə, onu js/ qovluğunda saxlayın və js/jquery.min.js keçidi ilə birləşdirin.

jQuery kitabxanası HTML-ə əlavə edildi və bizim jQuery API-yə tam girişimiz var.

jQuery istifadə

jQuery, DOM vasitəsilə brauzerdə HTML elementlərinə qoşulmaq üçün istifadə olunur.

Sənəd Obyekt Modeli (DOM) JavaScript (və jQuery) brauzerdə HTML ilə qarşılıqlı əlaqədə olan üsuldur. DOM-un nə olduğunu görmək üçün brauzerinizdə cari veb-səhifəyə sağ klikləyin və “Kodu Bax” seçin. Bu, "Developer Tools" panelini açacaq. Orada gördüyünüz HTML kodu DOM-dur.

Hər bir HTML elementi DOM qovşağı hesab olunur - JavaScript vasitəsilə əldə edilə bilən obyekt. Bu obyektlər kökə ən yaxın element və hər bir element ağacın budağı olmaqla ağac quruluşuna malikdir. JavaScript bu elementlərdən hər hansı birini əlavə edə, silə və dəyişdirə bilər.

Yenidən sağ klikləsəniz və "Mənbəyə Bax" seçsəniz, xam HTML-ni görəcəksiniz. Əvvəlcə DOM və HTML mənbə kodu haqqında çaşqın ola bilərsiniz, lakin bunlar fərqli şeylərdir. Səhifənin mənbə kodu HTML faylında yazılanlara tam uyğun gəlir. O, statik və dəyişməzdir və JavaScript-dən təsirlənmir. Öz növbəsində, DOM dinamikdir və dəyişə bilər.

Bütün nodu əhatə edən xarici DOM təbəqəsi sənəd obyektidir. Səhifədə jQuery-dən istifadə etmək üçün sənədin "hazır" olmasını təmin etməlisiniz.

js/ qovluğunda scripts.js faylı yaradın və ona aşağıdakı kodu əlavə edin:

js/scripts.js

HTML-ə daxil edilən bütün jQuery kodu yuxarıdakı koda büküləcək. O, yalnız DOM JavaScript kodunu icra etməyə hazır olduqdan sonra işləyəcək. Bəzi hallarda JavaScript elementlər göstərilənə qədər yüklənməyəcək, o cümlədən bu blok ən yaxşı təcrübə hesab olunur.

“Salam, Dünya!” skriptini işə salmaq üçün və jQuery-dən istifadə edərək brauzerdə mətni göstərmək üçün əvvəlcə ona tətbiq edilən identifikator demosu ilə boş paraqraf elementi yaradırıq.

Index.html

... ...

JQuery çağırılır və dollar işarəsi ($) ilə göstərilir. CSS sintaksisindən istifadə edərək jQuery ilə DOM-a daxil oluruq və əməliyyatı metodla tətbiq edirik:

$("seçici").metod();

CSS-də identifikator (#) simvolu ilə təmsil olunduğu üçün biz #demo seçicisindən istifadə edərək demo identifikatoruna daxil oluruq. html() element daxilində HTML işarələməsini dəyişdirən bir üsuldur.

İndi “Salam, Dünya! " jQuery ready() sarğı içərisində. Bu sətri scripts.js faylınızdakı mövcud funksiyanıza əlavə edin:

js/scripts.js

$(sənəd).ready(function() ( $("#demo").html("Salam, Dünya!"); ));

Dəyişikliklərinizi saxladıqdan sonra brauzerinizdə index.html faylını aça bilərsiniz. Hər şey düzgün işləyirsə, "Salam, Dünya! »

“Salam, Dünya!” üzərinə sağ klikləyin. " və "Kodu görüntülə" seçin. İndi DOM göstərilir

Salam, Dünya!

. Əgər səhifənin mənbə koduna baxsanız, yalnız bizim yazdığımız orijinal HTML kodunu görəcəksiniz.

Seçicilər

Seçicilər jQuery HTML-yə hansı elementlərlə işləmək istədiyimizi bildirməyimizdir. Siz rəsmi sənədlərdə jQuery seçicilərinin tam siyahısına baxa bilərsiniz.

Seçiciyə daxil olmaq üçün $ simvolundan sonra mötərizələrdən () istifadə edin.

$("seçici")

İki dırnaqlı sətirlərə üstünlük verilir (jQuery təlimatına uyğun olaraq). Baxmayaraq ki, tək dırnaqlı sətirlər tez-tez istifadə olunur.

Aşağıda tez-tez istifadə olunan seçicilərin qısa icmalı verilmişdir.

  • $("*") - wildcard: səhifədəki hər bir elementi seçir;
  • $(bu) - cari : hazırda funksiya daxilində manipulyasiya edilən cari elementi seçir;
  • $("p") - teq: etiketin bütün nümunələrini seçir

    ;

  • $(".example") - sinif: nümunə sinfinin tətbiq olunduğu bütün elementləri seçir;
  • $("#example") - identifikator: unikal identifikator nümunəsi ilə bir nümunə seçir;
  • $("") - atribut: type atributu mətnə ​​təyin edilmiş bütün elementləri seçir;
  • $("p:first-of-type") - psevdoelement: birinci elementi seçir

    .

JQuery-ni HTML-yə qoşarkən siz siniflər və id-lərlə məşğul olacaqsınız. Birdən çox element seçmək lazım olduqda siniflər və yalnız birini seçmək lazım olduqda identifikatorlar istifadə olunur.

jQuery Hadisələri

Nümunədə “Salam, Dünya! “Səhifə yükləndikdə və sənəd hazır olduqda kod işlədi, ona görə də istifadəçi müdaxiləsi tələb olunmadı. Bu halda biz mətni jQuery olmadan birbaşa HTML-də yaza bilərdik. Amma mətnin siçan düyməsini basdıqdan sonra səhifədə görünməsini istəyiriksə, jQuery-dən istifadə etməliyik.

index.html faylınıza qayıdın və ona element əlavə edin. Klik hadisəsini izləmək üçün bu düymədən istifadə edəcəyik.

index.html

...Mənə klikləyin

Biz “Salam, Dünya! "

js/scripts.js

$(sənəd).ready(funksiya() ( $("#trigger").click(); ));

Element ID-si triggerdir, biz onu $("#trigger") istifadə edərək seçirik. click() əlavə etməklə biz klik hadisəsini dinləyirik. Sonra biz click() metodu daxilində kodumuzu ehtiva edən funksiyanı çağırırıq.

function() ( $("#demo").html("Salam, Dünya!"); )

Budur element üçün tam jQuery HTML kodu.

js/scripts.js

$(sənəd).ready(funksiya() ( $("#trigger").klik(funksiya() ( $("#demo").html("Salam, Dünya!"); )); ));

scripts.js faylını yadda saxlayın və brauzerinizdə index.html faylını yeniləyin. İndi düyməni basdığınız zaman “Salam, Dünya!” yazısı görünür. ".

Hadisə siçan və ya klaviaturadan istifadə edərək istifadəçinin brauzerlə hər hansı qarşılıqlı əlaqəsidir. İndicə yaratdığımız nümunə klik hadisəsindən istifadə edir. jQuery hadisə üsullarının tam siyahısı üçün rəsmi jQuery sənədlərinə baxın. Aşağıda tez-tez istifadə olunan hadisələrin siyahısı verilmişdir.

  • click() - klik: siçanın bir dəfə basması ilə baş verir;
  • hover() - hover: siçan göstəricisi elementin üzərinə getdikdə baş verir;
  • submit() - təqdim: forma məlumatları təqdim edildikdə baş verir;
  • scroll() - sürüşdürmə: səhifəni və ya elementi sürüşdürərkən baş verir;
  • keydown() - düyməyə basma: klaviaturada düyməni basdığınız zaman baş verir.

İstifadəçi səhifəni sürüşdürərkən elementləri canlandırmaq və ya gizlətmək üçün scroll() metodundan istifadə edin.

ESC düyməsini istifadə edərək menyudan çıxmaq üçün keydown() metodundan istifadə edin. Açılan menyu yaratmaq və ya JQuery istifadə edərək div-ə HTML əlavə etmək üçün click() metodundan istifadə olunur.

jQuery effektləri

jQuery effektləri sizə animasiya əlavə etmək və səhifədə elementləri manipulyasiya etmək imkanı verir.

JavaScript və jQuery

jQuery nədir

jQuery yüklənmiş səhifənin html işarələmə elementlərini manipulyasiya etmək üçün müxtəlif faydalı proqram xidmətlərinin kitabxanasıdır. -də yazılmışdı. Onun gözəlliyi təkcə kifayət qədər ciddi imkanlara malik olması deyil, həm də proqram interfeysinin inanılmaz dərəcədə sadə olmasıdır.

jQuery-nin təsvirinə keçməzdən əvvəl onun nə olduğunu bir daha xatırlatmağa icazə verin. sənəd obyekt modeli və ya DOM (Sənəd Obyekt Rejimi l). DOM, yüklənmiş İnternet səhifəsinin strukturuna uyğun gələn RAM-dakı obyektlərin iyerarxik quruluşudur. DOM brauzer tərəfindən yaradılır və işarələmə elementləri ilə işləmək üçün proqramlaşdırma interfeysi təmin edir, məsələn, eyni JavaScript-dən istifadə etməklə. DOM alətlərindən istifadə edərək siz sənəd elementlərini axtara, əlavə edə və silə, onların atributlarını redaktə edə, üslubları dəyişdirə və s. Başqa sözlə, DOM və JavaScript-dən istifadə edərək dinamik İnternet səhifələri yaradılır ki, bunlar da adlanır DHTML səhifələri(Dinamik HTML səhifələri). Gəlin jQuery kitabxanasına qayıdaq. jQuery API-dən istifadə edərək, sizə lazım olan DOM elementlərini asanlıqla seçə və onlar üzərində aşağıdakı siyahıdan istənilən hərəkəti edə bilərsiniz:

  • Dəyişdirmək;
  • Atribut kompozisiyasını redaktə etmək;
  • Sil;
  • Nəsillər əlavə edin;
  • Başqa elementlə köçürün və ya sarın;
  • Kopyalama həyata keçirmək;
  • Hadisə idarəedicisini bağlama;
  • Vizual effekt və ya animasiyanı fərdiləşdirin;
Əlbəttə ki, bütün bunları çılpaq DOM və JavaScript-dən istifadə etməklə etmək olar, amma niyə, əgər hazır və pulsuz alətlər dəsti varsa. Çarpaz brauzer uyğunluğu haqqında unutmayın. Səhifənizin bütün populyar brauzerlərdə eyni işləməsini istəyirsinizsə, bu, çox səy tələb edir, çünki müxtəlif brauzerlərin fərqli şəkildə həyata keçirdikləri şeylərin kifayət qədər böyük siyahısı var. Əgər jQuery interfeysi ilə işləyirsinizsə, onda bu problemi unuda bilərsiniz. Təbii ki, proqramlar insanlar tərəfindən yazılır və jQuery-də səhvlər ola bilər, lakin bu halda siz yaxın gələcəkdə problemin həllinə arxalana bilərsiniz. Əgər ilə tanışsınızsa, JavaScript-in nə olduğu barədə təsəvvürünüz varsa, o zaman jQuery-ni mənimsəməyin vaxtıdır. Bu gözəl kitabxananın yaranması ilə peşəkarların və təcrübəsiz veb-dizaynerlərin imkanları bir qədər azaldı, bu, birincini kədərləndirə bilər, amma ikincini ruhlandırır. Bəlkə bir qədər şişirdirəm, amma indi JavaScript proqramlaşdırmasının incəliklərində təcrübəsi olmayan hər kəsin təsirli, sürətli və etibarlı DHTML səhifələri yaratmaq üçün kifayət qədər ciddi arsenala malik olması jQuery-nin danılmaz məziyyətidir. jQuery bağlantısı

Əvvəlcə kitabxananı yükləməlisiniz. Bunu jQuery müəlliflərinin saytında edə bilərsiniz: http://jquery.com. Sonra, sadəcə belə bir etiketdən istifadə edərək onu birləşdirməlisiniz:

Budur, onunla işləməyə başlaya bilərsiniz. Yükləmək istəmirsinizsə, birbaşa tərtibatçının serverində yerləşən kitabxananın ən son versiyasına keçid təqdim edə bilərsiniz: Ən son versiya ilə əlaqə yaratmaq, bir tərəfdən yaxşıdır, çünki o, daim bəzi səhvləri düzəldir və optimallaşdırır. onun fərdi funksiyalarının işləməsi, lakin, digər tərəfdən, yeni versiyada gözləmədiyiniz dəyişikliklər ola bilər və bu, layihənizin işində dəyişikliklərə səbəb olacaqdır.

jQuery proqramlaşdırma interfeysi və ya sintaksisi

Artıq dedim ki, jQuery sorğu sintaksisi olduqca sadədir. Məhz sorğular, çünki jQuery istifadə edərək JavaScript-də proqramlaşdırma kimi təsnif edilə bilər deklarativ proqramlaşdırma, klassik prosedur proqramlaşdırmadan fərqlənir ki, siz “necə etmək lazımdır” deyil, “nə etmək lazımdır”ı təsvir edirsiniz. Kitabxananın adı onun mahiyyətini - JavaScript kontekstində sorğu dilini əks etdirir. Bütün jQuery sorğuları arqumenti sorğunun özü olan $ funksiyasına zənglə başlayır. Beləliklə, ümumi jQuery sorğu sintaksisi belə görünür:

$(xahiş)[{.filtr(meyar)}].hərəkət(arqumentlər){ .hərəkət(arqumentlər)} Sorğu vergüllə ayrılmış seçici və ya seçicilərin siyahısıdır. Sorğu sintaksisi CSS stil seçicilərinin sintaksisi ilə eynidir. Beləliklə, jQuery sorğusu belə bir şey başlaya bilər:
$("div") - bütün elementləri seçin div;
$(“div, p”) – bütün elementləri seçin div və elementlər səh;
$(“.class_name”) – bütün sinif elementlərini seçir sinif_adı;
$(“#element_id”) – identifikatoru olan elementin seçilməsi element_id;
$(*) – bütün elementlərin seçimi;
$(“.class_name span”) – bütün sinif elementləri daxilində bütün span elementlərini seçir sinif_adı;
$(“#element_id > div”) – bütün elementləri seçin div identifikatorlu elementin birbaşa törəmələri (uşaqları) olan element_id.
$(“#element_id .class_name + div”) – sinif elementlərini dərhal izləyən bütün elementləri seçir sinif_adı element daxilində element_id.
$(“#ul_id > li:first”) – birinci elementin seçilməsi li siyahı ul_id. Həmçinin, siz sonuncu sonuncu elementi və ya bütün cüt və ya tək tək elementləri seçə bilərsiniz. Başqa variantlar da var.
$(“a”) – atribut dəyəri olan bütün keçidləri seçir href ilə başlayır “http://ru.wikipedia.org”. “^” simvolu olmadan biz dəyərlərin tam uyğunluğu üçün şərt alırıq, əgər “^” simvolu əvəzinə “$” simvolunu qoysaq, sondan uyğunlaşmaya məhdudiyyət alırıq və * simvolu o deməkdir ki, atribut dəyəri sadəcə olaraq göstərilən fraqmenti ehtiva etməlidir.

Filtr– əlavə meyarlardan istifadə edərək seçilmiş elementlər dəstini süzgəcdən keçirmə üsulu. Meyarlar seçicilərlə eynidir. Bir-birinə əks olan iki əməliyyat var: filtr və yox. Əməliyyatdan istifadə etsəniz filtr (meyar), onda yalnız arqument-meyarına cavab verən elementlər seçilmiş qalacaq və əgər yox, onda yalnız qane etməyənlər qalacaq. Adətən əməliyyatdan istifadə etmək məntiqlidir yox, əməliyyat meyarından bəri filtr adətən əsas funksiya selektoru ilə birləşdirmək asandır $() . Bu əməliyyatların istifadəsinə dair bir neçə nümunə:
$(“div”).not(“.sinif_adı”) – hər şeyi istisna edin div sinif sinif_adı;
$(“td, th, div”).filter(“.class_name”) – elementləri seçin td, ci, div sinif sinif_adı.

Həm də əməliyyat dilimi (dan, üçün) var ki, bu da [ intervalından indeksləri olan elementlər ardıcıllığını seçməyə imkan verir. -dan - üçün].

Fəaliyyət- bu, əslində, hərəkətin özüdür - seçilmiş elementlər dəsti üzərində bəzi əməliyyatlar. Hər bir əməliyyat müəyyən bir nəticə qaytarır: ya eyni dəst, əgər əməliyyat yeni yaratmaq və ya seçilmiş elementləri silməkdən ibarət deyilsə, ya da artıq redaktə edilmiş çoxluq və ya yeni yaradılmış elementlər dəsti. Bunun sayəsində nöqtələrlə ayrılmış bir neçə əməliyyatı eyni anda təyin edə bilərsiniz. Aşağıdakı nümunə bütün elementləri seçəcəkdir qarış, siniflə əlaqəli deyil sinif_adı və onları id ilə elementə kopyalayır hədəf:
$("span").not(".sinif_adı").clone().appendTo("#hədəf");

Hər bir əməliyyatın nəticəsidir HTMLElement elementlərinin massivi. Massivin ölçüsünü uzunluq xassəsindən və ya size() funksiyasından istifadə etməklə tapmaq olar. Əməliyyat arqumentləri təkcə sətir parametrləri deyil, həm də digər sorğuların nəticələri ola bilər. Bir sorğunun nəticəsinin elementin içərisinə necə yerləşdirilə biləcəyinə dair bir nümunə, bu da öz növbəsində başqa bir sorğunun nəticəsidir:
$("span").not(".class_name").clone().apppendTo($("span.class_name"))

Arqument kimi bütün sorğu nəticəsini deyil, onun ayrıca elementini istifadə edə bilərsiniz:
$("span.class_name").append($("span").not(".sinif_adı"));

Beləliklə, əməliyyatın arqumenti ya sətir kimi seçici, ya da başqa bir sorğunun nəticəsi və ya hər hansı bir nümunə ola bilər. HTMLElement.

jQuery əməliyyatları

Aşağıda jQuery əməliyyatları ilə xülasə cədvəlləri, onların qısa təsvirləri və praktikada istifadəsini nümayiş etdirən nümunələrə keçidlər verilmişdir.

Xüsusiyyətlər

Seçilmiş elementlərin müxtəlif xassələrinin dəyərlərini əldə edin və ya təyin edin. Yeni bir xassə dəyəri təyin etmək lazımdırsa, onu arqument kimi ötürməlisiniz, məsələn, $(“#element”).text(text_value) və ya $(#element”).html(html_value) :

Ad Təsvir Misal
mətn()Mətn.-
ofset()Ofset (sol, yuxarı)., top hərəkət funksiyası top.hərəkət(): $("#top").offset((sol:$("#top").offset().sol + this.dx, top:$("#top").offset().top + this. dy)); Bu funksiya hər 10 millisaniyədən bir taymerdə çağırılır.
en (), hündürlük ()Genişlik və hündürlük.-
html()seçilmiş elementlər daxilində html işarələmə.

jQuery seçiciləri səhifədə istədiyiniz elementi seçmək üçün istifadə olunur.

jQuery Əmrləri

jQuery kodu, JavaScript kodu kimi, ardıcıl əmrlərdən ibarətdir. Əmrlər jQuery-nin əsas tikinti blokudur.

Standart jQuery əmr sintaksisi:

$(seçici).metod();

  • $ işarəsi ondan sonrakı simvolların jQuery kodu olduğunu göstərir;
  • Seçici səhifədəki elementi seçməyə imkan verir;
  • Metod seçilmiş element üzərində yerinə yetirilməli olan hərəkəti təyin edir. jQuery-də metodlar aşağıdakı qruplara bölünür:
    • DOM ilə manipulyasiya üsulları;
    • Elementlərin bəzədilməsi üsulları;
    • AJAX sorğularının yaradılması üsulları;
    • Effektlərin yaradılması üsulları;
    • Hadisə idarəçilərini bağlamaq üçün üsullar.
    • $ simvolu

    jQuery adi JavaScript ilə birləşdirilə bilər.

    Əgər sətir $ ilə başlayırsa, bu jQuery; əgər sətrin əvvəlində $ yoxdursa, bu JavaScript kodu sətridir.

    Funksiya start() ( //jQuery $("p#hid").hide() istifadə edərək id="hid" ilə paraqrafı gizlədin; //id="dəyişiklik" sənədi ilə paraqrafın məzmununu dəyişdirin.getElementById(" dəyişiklik") .innerHTML="Bu məzmun JavaScript istifadə edərək dəyişdirilib."; )

    Bəzi JavaScript kitabxanaları öz kodlarını göstərmək üçün $-dan da istifadə edirlər. Aralarında ad ziddiyyətlərinin qarşısını almaq üçün jQuery noConflict() əmrini təmin edir. noConflict() əmrindən istifadə edərək $ işarəsini hər hansı digəri ilə əvəz edə bilərsiniz.

    Sintaksis:

    Var custom_name=jQuery.noConflict();


    //Standart $ simvolunu nsign olaraq dəyişin var nsign=jQuery.noConflict(); //$ nsign(sənəd).ready(funksiya())( nsign("p").css("rəng","yaşıl"); )) əvəzinə nsign istifadə edərək abzasın rəngini dəyişdirin);

    Sürətli görünüş

    jQuery seçiciləri

    Seçicilərdən istifadə edərək, onlara xüsusi hərəkətlər tətbiq etmək üçün səhifədəki elementləri seçə bilərsiniz.

    Aşağıda istədiyiniz elementləri seçmək üçün seçicilərdən istifadənin müxtəlif nümunələri olan bir cədvəl var:

    Nümunə Nəticə
    $("p") Səhifədə olan bütün p elementləri seçiləcək.
    $(".par") Səhifədə class="par" olan bütün elementlər seçiləcək.
    $("#par") Səhifədə id="par" olan ilk element seçiləcək.
    Cari HTML elementini seçməyə imkan verir. Onlayn redaktorda bu selektordan istifadə nümunəsinə baxmaq üçün solda $(bu) üzərinə klikləyin.
    $("p.par") Class="par" ilə səhifədəki bütün p elementləri seçiləcək.
    $("p#par") Səhifədə id="par" olan bütün p elementləri seçiləcək.
    $(".par,.header,#heat") Səhifədə class="par", class="header" və id="heat" atribut dəyərləri olan bütün elementlər seçiləcək.
    $("") Səhifədə src atributuna malik olan bütün elementlər seçiləcək.
    $("") src="value" atribut dəyərləri olan bütün elementlər seçiləcək.
    $("") .gif ilə bitən src atribut dəyərlərinə malik bütün elementlər seçiləcək.
    $("div#wrap .par1") id=wrap ilə div elementlərinin içərisində olan class=par1 olan bütün elementlər seçiləcək.
    $(":input") Səhifədəki bütün daxiletmə elementləri seçiləcək.
    $(":növ") Bütün giriş elementləri ilə. Məsələn: düyməsi bütün elementləri seçəcək, :text bütün elementləri seçəcək və s.

    $(document).ready(function())( //Bütün paraqrafların şrift ölçüsünü 20 pikselə təyin edin $("p").css("fontSize","20px"); //Şrift rəngini dəyişdirin id= olan element yaşıl el2 $("#el2").css("color","green"); //class=el3 ilə elementin şrift rəngini qırmızı $(".el3").css ilə dəyişdirin. ("rəng","qırmızı") ; //id=el2 və class=el3 qalın şriftlərlə elementlərin şriftini düzəldin $("#el2,.el3").css("fontWeight","bold"); // Düymə mətninin rəngini maviyə dəyişin $(":input ").css("color","blue"); //Href atributunun 20 pikselə bərabər olan bütün elementlərin şrift ölçüsünü təyin edin $("").css ("fontSize","20px"); //www..site/"]" linklərindəki rəngi yaşıl rəngə dəyişdirin).css("rəng","yaşıl"); ));

    Sürətli görünüş

    jQuery seçicilərinin tam siyahısını bizim səhifəmizdə tapa bilərsiniz.

    Vaxtından əvvəl kodun icrasının qarşısının alınması

    JavaScript dərsliyindən xatırlaya bilərsiniz ki, sənəd tam yüklənməmişdən əvvəl kodun icrası çox vaxt xətalara səbəb olur.

    Fakt budur ki, skript hələ yüklənməmiş məzmuna daxil ola bilər və bu, həmişə səhvlərə və ya gözlənilməz nəticələrə səbəb olur.

    Bunun qarşısını almaq üçün biz tez-tez kodu yalnız sənəd tam yükləndikdən sonra icra etməyə başlayan funksiyaya qoyuruq.

    JavaScript-də vaxtından əvvəl kodun icrasının qarşısının alınması:

    start() funksiyası (Sənəd tam yükləndikdən sonra yerinə yetiriləcək kod)

    JQuery-də kodun vaxtından əvvəl icrasından aşağıdakı yollarla xilas ola bilərsiniz:

    jQuery-də vaxtından əvvəl kodun icrasının qarşısının alınması:

    //Birinci üsul: $(sənəd).ready(funksiya())( Sənəd tam yükləndikdən sonra yerinə yetiriləcək kod )); //İkinci üsul: $().ready(funksiya())( Sənəd tam yükləndikdən sonra yerinə yetiriləcək kod )); //Üçüncü üsul: $(funksiya())( Sənəd tam yükləndikdən sonra yerinə yetiriləcək kod ));

    JavaScript və jQuery kodunun vaxtından əvvəl icrasının qarşısını almağa kömək edən və səhifənin yüklənməsini sürətləndirməyə imkan verən başqa bir alternativ üsul var ( Bu barədə mənə xatırlatdığı üçün istifadəçi Ghringo Americano-ya təşəkkür edirəm).

    Kodu sənədin ən sonunda (yəni -dən əvvəl) yerləşdirmək lazımdır, bu halda brauzerdə quraşdırılmış JavaScript tərcüməçisi kodu yalnız sənəd yükləndikdən sonra təhlil etməyə başlayacaq. Əvvəlki üsulda skriptlər sənədin yüklənməsi ilə eyni vaxtda yüklənir və bu kod sənəd yükləndikdən sonra yerinə yetirilir.

    Sənəd Gövdəsinin Məzmunu

    Sənəd orqanının məzmunu Sənəd tam yükləndikdən sonra icra ediləcək kod

    jQuery-də əmr zəncirləri

    Kod ölçüsünü azaltmaq üçün jQuery əmrlərini zəncirləyə bilərsiniz.

    Zəncirdəki əmrlər növbə ilə soldan sağa yerinə yetiriləcək.

    //Qısaltmasız kod $("p").css("rəng","yaşıl"); $("p").css("şrift ölçüsü","30px"); //Qısa kod $("p").css("rəng","yaşıl").css("şrift ölçüsü","30px");

    Özün et

    Tapşırıq 1 Kod sözünün hərflərini vurğulamaq üçün aşağıda sadalanan elementlərin rəngini və şrift ölçüsünü dəyişdirin.

    Şriftin rəngini və ölçüsünü dəyişdirin:

    • id=meadow olan element;
    • Class=göy qurşağı olan element;
    • id=fut ilə elementin daxilində yerləşən id=future olan element; (bu element qırmızıdan başqa bir rənglə vurğulanmalıdır);
    • Set atributuna malik element;
    • last=code atributuna malik element.

    Diqqət edin: elementin mətn rəngini dəyişdirmək üçün metoddan istifadə edin: css("color","new_text_color"), şriftin ölçüsünü dəyişdirmək üçün metoddan istifadə edin: css("font-size","font_size_px").

    Keypress() - klaviaturadan simvol yazmaq üçün işləyici quraşdırır və ya bu hadisəni işə salır.

    Metodun üç istifadəsi var.

    Düyməni sıxmaq (işləyici)

    • eventData - işləyiciyə ötürüləcək məlumatları ehtiva edən obyekt. Formatda olmalıdır (fName1:value1, fName2:value2, ...);
    • handler, işləyici kimi təyin ediləcək funksiyadır.

    Keypress()

    Seçilmiş səhifə elementlərində düymələrə basma hadisəsini qaldırır.

    Qeyd: Klavişə basma hadisəsi heç bir rəsmi spesifikasiya ilə əhatə olunmadığı üçün ondan istifadə zamanı rast gəlinən faktiki davranış brauzerlər, brauzer versiyaları və platformalar arasında dəyişə bilər.

    İlk iki variantda bu üsul .on("keypress", handler) qısaldılmış versiyası, üçüncüsü isə .

    Klaviaturada düyməni basdıqda istifadəçi elementə basma hadisəsi göndərilir. Shift, Esc və Delete kimi modifikatorlar və çap olunmayan düymələr yanğının təkrar açarı hadisələri istisna olmaqla, bu hadisəyə bənzəyir, lakin düymələrə basma hadisələri deyil. İki hadisə arasındakı digər fərqlər platforma və brauzerdən asılı olaraq dəyişə bilər.

    Klavişə basma hadisəsi istənilən elementə əlavə oluna bilər, lakin yalnız fokuslu elementləri işə salacaq. Fokus ala bilən elementlərin siyahısı brauzerdən asılı olaraq dəyişir, ona görə də bu hadisəni elementləri formalaşdırmaq üçün bağlamaq ən təhlükəsizdir, çünki onlar həmişə fokus ala bilirlər.

    Məsələn, html-i nəzərdən keçirin:

    Hadisə idarəedicisi giriş sahəsinə bağlana bilər:

    $("#hədəf").keypress(funksiya() ( alert("Hadisə tetiklendi.keypress()"); ));

    $("#hədəf") . düyməni basmaq(funksiya()(

    xəbərdarlıq ("Hadisə tetiklendi.keypress()" );

    } ) ;

    Daxiletmə sahəsində bir düyməyə basdığımız zaman “Event.keypress() qaldırıldı” mesajını görəcəyik.

    Hadisəni əl ilə işə salmaq üçün arqument olmadan .keypress() istifadə edin:

    $("#digər").click(funksiya() ( $("#hədəf").düyməsinə basın(); ));

    $("#digər" ) . klik(funksiya()(

    $("#hədəf") . klaviş ();

    } ) ;

    Siz id="digər" ilə sahəyə kliklədiyiniz zaman hadisə işə salınacaq və biz də bir mesaj görəcəyik.

    Səhifənin hər hansı bir yerində (məsələn, qlobal klaviatura qısa yollarını həyata keçirmək üçün) düymələrə basma idarəedicisini quraşdırmanız lazımdırsa, bu davranışı sənəd obyektinə əlavə etmək yaxşıdır. Klavişə basma hadisəsi açıq şəkildə dayandırılmadıqca DOM boyunca qabarır.

    Düymə basılan kod

    Yuxarıdakı misalda hansı klaviatura düyməsinin basıldığını öyrənmək üçün basılan düymənin kodunu ehtiva edən eventObject.hansı dəyişənin dəyərinə baxa bilərik. Brauzerlər bu məlumatı saxlamaq üçün müxtəlif xassələrdən istifadə etsə də, jQuery .which xassəsini normallaşdırır ki, siz simvol kodunu çıxarmaq üçün ondan etibarlı şəkildə istifadə edə biləsiniz.

    Qeyd edək ki, düymələrin aşağı salınması və düymələrin yığılması üsulları basılan düyməni müəyyənləşdirir və düymələrin basılması hansı simvolun daxil edildiyini göstərir. Beləliklə, siz latın dilində "a" hərfini daxil etdiyiniz zaman keydown və ya keyup hadisə idarəedicilərinin daxilində eventObject. dəyişəni 65 dəyərini, düyməyə basma işləyicisinin daxilində isə 97 dəyərini ehtiva edəcək. Böyük hərflə "A" kimi bildirilir. Bütün hadisələr üzrə 65. Bu fərqə görə, ox düymələri, aşağı düymələr və ya düymələr kimi xüsusi düymə vuruşlarını idarə etmək daha yaxşı seçimdir.

    əlavə qeydlər

    .keypress() metodu .on("keypress", handler) funksiyasının stenoqrafiya versiyası olduğundan onu .off("keypress") istifadə edərək silmək olar.

    JavaScript-də dollar simvolu adətən dəyişən bəyannamələrində və funksiya çağırışlarında olur. Sizi inandırım ki, burada sirli heç nə yoxdur, çünki bu, sadəcə dəyişən addır (identifikator). Bunda qəribə heç nə yoxdur. Məsələn, əvvəllər haqqında yazdığım olduqca məşhur JavaScript çərçivəsi (jQuery nədir?) əsas jQuery obyektinə daxil olmaq üçün dollar işarəsindən istifadə edir.

    Bir çox tərtib edilmiş və şərh edilmiş dillər dəyişənlərə identifikator kimi yanaşır. Hər dilin öz sintaksisi var, istər C, C++, PHP, Java və ya JavaScript. Və hər bir dilin sintaksisi müəyyən qaydalara tabedir. Məsələn, JavaScript-də dəyişənlərin elan edilməsi qaydaları ondan ibarətdir ki, hər bir identifikator latın əlifbasının hərfi, dollar işarəsi ($) və ya alt xətt (_) ilə başlamalı və rəqəmlərlə (0-dan 9-a qədər) və ya digər hərflərlə başlaya bilməz. durğu işarələri kimi simvollar. Qeyd olunan hər iki simvol ($ və _) qeyri-standartdır və identifikatorun qalan hissəsində görünə bilər. Beləliklə, məsələn, ard-arda beş dollar işarəsi ilə göstərilən dəyişən adı: $$$$$ (və ya istənilən sayda alt xətt) tamamilə məqbuldur, çünki o, JavaScript sintaksisinin qaydalarına əməl edir. Bu, proqramçıların razılaşmalı olduğu JavaScript dilinin sadə tələbidir. İnanın, bunun çox yaxşı səbəbləri var.

    Bəzi kodlarda adı sadə $ işarəsi olan qlobal funksiya obyekti var idi. Bu kod üslubu (var açar sözünün olmaması) təcrübəli proqramçılar tərəfindən arzuolunmaz hesab olunur; biz JavaScript-də qlobal dəyişənlərdən istifadə etməməyə çalışırıq, əgər əlbəttə ki, fırıldaq etməyə cəhd etmirik. Hər halda, məsələ ondadır ki, bu funksiya demək olar ki, hər hansı bir adla adlandırıla bilər: a, z, hətta _.

    // Düzgün identifikatorların nümunəsi var A = function() ( alert("funksiya A çağırıldı"); ) var $ = function() ( alert("funksiya $ çağırıldı"); ) var _ = function() ( xəbərdarlıq ("funksiya _ çağırıldı"); )

    Bundan əlavə, JavaScript-in 1.5 və daha yüksək versiyalarında dollar işarəsi və alt xəttdən əlavə, identifikatorlarda ISO 8859-1 və Unicode simvollarından, məsələn, Ø istifadə edə bilərsiniz. Siz təəccüblənə bilərsiniz, lakin hətta uXXXX kimi Unicode ardıcıllığına da icazə verilir, burada XXXX rəqəmdir, məsələn, 0024. Unicode simvolu u0024 ona bərabərdir - təxmin edin nə? ... Dollar işarəsi. Və hətta istinad olaraq dollar işarəsindən istifadə edərək id u0024 ilə müəyyən edilmiş funksiyaya zəng edə bilərsiniz! Əlbəttə ki, mümkün olduğu üçün hər yerdə istifadə etməməlisiniz. İnanıram ki, bu arzuolunan praktika deyil, bir çox proqramçılar sizdən daha az məlumatlı ola bilər və bu cür “hiylələr”ə görə kod onlara çaşqın və oxunmaz görünəcək.

    Yəqin ki, bildiyiniz kimi, JavaScript obyekt yönümlü proqramlaşdırma dilidir. İdentifikatora dəyər təyin etməyin bir neçə müxtəlif yolu var. Məsələn, biz var açar sözündən istifadə etdikdə, JavaScript cari (və ya yerli) əhatə dairəsində dəyişən yaradır. Var açar sözünü buraxsaq, dəyişən hələ də yaradılacaq, lakin proqramın qlobal əhatəsində olacaq, yəni o, bütün .js faylı boyunca görünəcək. Yenə xatırlatmaq istəyirəm: qlobal dəyişənlərdən qaçın. Mən başa düşürəm ki, bu məqalə dollar işarələri haqqındadır, lakin bu, sizə aydın deyilsə, müxtəlif komponentlərin başqası tərəfindən yazıldığı və ya proqramçılar qrupu tərəfindən hazırlanmış irimiqyaslı layihələrlə qarşılaşdığınız zaman qlobal dəyişənlər işə düşür. Beləliklə, kimsə sizə qlobal dəyişənlərdən var açar sözü olmadan istifadə etməyin düzgün olduğunu söyləyirsə, onlara inanmayın - onlar sizi aldadırlar.

    Və daha da. Dəyişənlər JavaScript-də obyektlər olduğundan, siz dəyişənlərinizlə funksiyalara müraciət edə bilərsiniz. Siz hətta artıq mövcud funksiyaya "üzv funksiyası" təyin edə bilərsiniz. Lakin hələ mövcud olmayan obyektə funksiya təyin etmək cəhdi JavaScript-də uğursuzluğa məhkumdur. Əgər həqiqətən də bunu yaxşı başa düşmək istəyirsinizsə, aşağıdakı koda xüsusi diqqət yetirin.

    İndi öyrəndiklərinizi istifadə edərək və bu kodu brauzerdə işlətmədən bunun işləyəcəyini deyə bilərsinizmi?

    Konvensiyaya görə, dollar işarəsi ($), alt xətt (_) və hətta bəzi ASCII simvolları JavaScript-də identifikatorun istənilən yerində istifadə edilə bilər. Ecma Script sənədlərində (7.6 İdentifikatorlar, ECMA-262, 3-cü Nəşr) deyilir: "Dollar simvolu yalnız avtomatik yaradılan kodda istifadə üçündür." Bu o deməkdir ki, biz çərçivə yazmırıqsa, identifikatorlarda dollar işarəsindən ($) istifadə etməməliyik. Budur identifikatorlarda istifadə edilə bilən icazə verilən simvolların siyahısı:

    IdentifierName::
    IdentifierStart
    IdentifierName Identifier Part
    IdentifierStart::
    UnicodeLetter
    $
    _
    UnicodeEscapeSequence
    Identifier Part ::
    IdentifierStart
    UnicodeCombningMark
    UnicodeRəqəm
    UnicodeConnectorPunktuasiya
    UnicodeEscapeSequence

    Bu məqalənin məqsədi dollar simvolunun sadəcə identifikator olduğunu göstərməkdir (məşhur Prototip çərçivəsi tərəfindən həyata keçirilir və sonra jQuery tərtibatçıları tərəfindən götürülür) və başqa heç nə yoxdur. Niyə proqramçılar ondan istifadə edirlər? Yaxşı, bu, çərçivə kodunda aydın məqsədi olan funksiya üçün çox əlverişli bir addır. Bu səbəbdən dollar işarəsi kimi təyin olunan əsas jQuery obyekti jQuery obyekti ilə sinonimdir. Normal kodda biz $ əvəzinə jQuery obyektindən istifadə edirik. Əgər jQuery-ni yaxşı bilirsinizsə və sənədlərə çox diqqət yetirirsinizsə, jQuery obyekti əvəzinə $ sinonimindən istifadə etmək məsləhət görülmür, baxmayaraq ki, nədənsə onu səliqəli hesab edən proqramçılar arasında çox populyardır.

    Gəlin ümumiləşdirək

    Dollar simvolunun istifadəsindəki fərq semantikdir. Bu identifikatorun adıdır. Psixoloji baxımdan rahat və zərif görünür. Texniki olaraq, bu, sadəcə bir funksiya və ya dəyişənə simvolik istinaddır, həqiqətən $ və ya _ və ya hər hansı digər simvoldan istifadə etməkdə heç bir fərq yoxdur.

    Ecmascript spesifikasiyasında qeyd edildiyi kimi $ simvolunun identifikatorlarda istifadəsinə icazə verilir. Əgər identifikator tək $ simvolundan ibarətdirsə, bu, şübhəsiz ki, qəribə görünür, lakin belə bir fərq yalnız insanlarda görünür. Bildiyimə görə, dəyişənin a və ya b kimi başqa simvoldan ibarət olub-olmaması kompilyatorun vecinə deyil.

    Digər tərəfdən, Ecmascript spesifikasiyası $ simvolunun jQuery kodu kimi daxili kodda sadəcə rahatlıq üçün istifadə edilməli olduğunu bildirir. Bu o deməkdir ki, siz onu sadəcə gözəl göründüyü üçün kodunuzda istifadə etməməlisiniz, lakin çərçivə hazırlayarkən ondan həqiqətən faydalana bilərsiniz, çünki çərçivənin qlobal obyekti unikal görünəcək və kodunuzun qalan hissəsindən fərqlənəcək.