Jquery tag təsviri

jQuery bir Javascript kitabxanasıdır, həmçinin Javascript tag əlavə etmək barədə düşünürəm. jQuery, Document Object Model (DOM), hadisənin idarə edilməsi, animasiya və AJAX qarşılıqlı əlaqələrinin tarazlayıcıları arasında fərqləri minimuma endirən, məşhur bir cross-browser JavaScript kitabxanasıdır. Jquery tag ilə bir sual jquery ilə əlaqəli olmalıdır, belə ki, jquery sözügedən kodda istifadə olunmalıdır və sual ən azı jquery-in istifadəsi ilə bağlı elementləri daxil etməlidir.

Haqqında

jQuery (Core) DOM traversal, DOM manipulyasiya, hadisənin idarə edilməsi, animasiya və AJAX kimi ümumi müştəri vəzifələri üçün soyuducuları təmin edən cross-brauzer JavaScript kitabxanasıdır ( John Resiq tərəfindən yaradılmışdır).

jQuery, HTML sənədlərini, hadisə işləməsini, animasiyasını və AJAX-nı tarama etmək və onu birdən çox brauzerlərdə işləyən API ilə bağlıdır.

jQuery, kitabxana tərəfindən artıq təqdim edilənlərə əlavə olaraq, imkanları genişləndirən pluginlər yaratmaq üçün bir platform təmin edir. JQuery və əlaqədar layihələrin inkişafı JQuery Foundation tərəfindən əlaqələndirilir.

Xüsusi xüsusiyyətlər

jQuery aşağıdakı funksiyaları daxildir:

  • Sizzle'nin çox serverli açıq mənbə seçmə mexanizmindən istifadə edərək, DOM elementlərinin seçilməsi, jQuery layihəsinin işıqlandırılması
  • DOM-ə çevirin və dəyişdirin (CSS 1-3 üçün dəstək də daxil olmaqla)
  • Nümunə adları və xüsusiyyətləri (məsələn, IDclass ) istifadə edən CSS seçicilərinə əsasən DOM manipulatorları seçicilərin yaradılması meyarları kimi
  • Hadisələr
  • Təsirlər və animasiyalar
  • AJAX
  • JSON parsing (köhnə brauzerlər üçün)
  • Plugins vasitəsilə genişlənmə
  • İstifadəçi agent məlumatı, xüsusiyyət aşkarlanması kimi kommunal xidmətlər
  • Müasir brauzerlərdə başlanğıcda mövcuddur, ancaq yaşlılar üçün inArray() tələb olunur - məsələn, inArray()each() funksiyaları
  • Çox brauzer (cross-browser ilə qarışıq olmaq deyil)

Brauzer dəstəyi

jQuery, mövcud sabit versiyasını və əvvəlki versiyasını və ya Chrome, Edge, Firefox və Safari-nin "cari versiyası 1" i dəstəkləyir. Opera həmçinin mövcud stabil versiyasını dəstəkləyir.

Bundan əlavə, jQuery 1.x Internet Explorer 6 və ya daha yüksək versiyasını dəstəkləyir. Lakin, IE 6-8 üçün dəstək jQuery 2.xjQuery 3.x , yalnız IE 9 və ya daha yüksək səviyyədə dəstəkləyənlər üçün əlil olmuşdur.

Nəhayət, jQuery Android 4.0 və yuxarıdakı mobil brauzeri və iOS 7 və yuxarıdakı Safari-i dəstəkləyir.

JQuery versiyaları

JQuery tez-tez yenilənir, buna görə kitabxana diqqətlə istifadə olunmalıdır. Bəzi funksiyalar jQuery-nin daha yeni versiyaları ilə köhnəlir. Xüsusiyyətləri izləmək üçün azad qeydlərinə baxın.

JQuery CDN , hər bir şubenin ən son sabit versiyaları daxil olmaqla, jQuery'nin bütün versiyaları üçün yüklənmə linkləri təmin edir.

JQuery ilə bağlı suallar soruşarkən:

  1. Diqqətlə jQuery API sənədlərini oxuyun və dublikatları üçün yığma daşımasını sınayın .
  2. Problem kodunu ayırınonu JSFiddle , JSBin və ya CodePen kimi onlayn mühitdə bərpa edin . Canlı əlaqə üçün LiveWeave-dən də istifadə edə bilərsiniz. Bununla belə, sorğunuzdakı problem kodunu - yalnız onlayn mühitə aid bir link deyil, əmin olun. Sorğu özündə də yürütülebilir kodu daxil etmək üçün yığın fraqmentləri də istifadə edə bilərsiniz.
  3. Sualı müvafiq olaraq qeyd edin; hər zaman daxil və digər web inkişaf etiketləri ( , , ), əgər varsa. Ən populyar jQuery plugins da , kimi öz tags var; Hər bir digər plugin üçün tag var.
  4. Istifadə olunan jQuery kitabxanasının versiyasını göstərin ki, hər hansı bir cavab versiyaya uyğun həllər təmin edə bilər.
  5. Hansı brauzer kodu yaratdığını xatırlayın və hansı səhv mesajlar varsa, brauzer tərəfindən atıldı. Əgər problemlər cross-brauzerdə ardıcıl olsa, bu da qiymətli məlumatdır.

Tez-tez verilən suallar

Salam dünya

"Salam dünya!" Her bağlantı üçün uyarı penceresinde, DOM ( JSFiddle ) hazır olduqdan sonra basın:

 // callback for document load $(function () { // select anchors and set click handler $("a").click(function (event) { // prevent link default action (redirecting to another page) event.preventDefault(); // show the message alert("Hello world!"); }); }); 

Resurslar

Video tutorial

Populyar plugins

Digər JQuery Foundation Layihələri

Ən yaxşı təcrübələr və tez-tez səhvlər

İlkin məsələ: qarşısını almaq üçün jQuery tələ

Hazır hazırlıq işçilərini istifadə etməyi unutmayın.

Kodunuz bir şəkildə DOM'u idarə edirsə, DOM yüklənmə tamamlandıqdan sonra işlədiyindən əmin olmalısınız.

jQuery bunu anonim funksiya ilə etmək yollarını təmin edir:

 $(function () {  }); // Or $(document).ready(function () {  }); 

və ya adlandırılmış funksiyası ilə:

 $(functionName); // Or $(document).ready(functionName); 

Bunlar, JavaScript kodunu və ya skript etiketi </body> bağlanmadan əvvəl HTML-də yerləşdirmək üçün alternativdir.

JQuery 3.x-də, hazır işləyən əlavə etmək üçün tövsiyə edilən yol $(function() {}) , $(document).ready(function() {}) kimi digər formalar isə qadağan edilir. Bundan əlavə, jQuery 3.x .on("ready", function() {}) bir fəaliyyətdə bir funksiyanı yerinə yetirmək üçün .on("ready", function() {}) istifadə etmək qabiliyyətini qaldırır .

JQuery üçün noConflict() və başqa bir alias ilə münaqişələrin çəkinin

Sizin jQuery noConflict() , $ imzalamasını alias kimi istifadə edən başqa bir kitabxana ilə noConflict() , noConflict() metodunu istifadə edin :

 jQuery.noConflict(); 

Sonra jQuery funksiyaları üçün jQuery adını istifadə edərək başqa bir kitabxana üçün təhlükəsiz $ bir alias kimi istifadə edə bilərsiniz.

Siz də zəng edə bilərsiniz

 $jq = jQuery.noConflict(); 

$jq üçün başqa bir $jq kimi $jq istifadə edin. Məsələn:

 $jq(function () { $jq("a").click(function (event) { event.preventDefault(); alert("Hello world!"); }); }); 

Ayrıca jQuery-i müəyyən bir sahədə $ təyin edə bilərsiniz:

 jQuery(function ($) { // In here, the dollar sign is an alias for jQuery only. }); // Out here, other libraries can use the dollar sign as an alias. 

Sonra bu funksiya blokunun içərisində jQuery üçün başqa bir ad istifadə edə bilərsiniz, digər kitabxanalarla münaqişələr barədə narahat olmayın.

Mümkün olduğu yerdə, cache jQuery obyektləri və zəncir

JQuery $() funksiyasını çağırmaq bahadır. Ona təkrar müraciət etməsi çox səmərəsizdir . Bunu çəkin:

 $('.test').addClass('hello'); $('.test').css('color', 'orange'); $('.test').prop('title', 'Hello world'); 

Bunun əvəzinə, jQuery obyektinizi bir dəyişəndə ​​saxlayır:

 var $test = $('.test'); $test.addClass('hello'); $test.css('color', 'orange'); $test.prop('title', 'Hello world'); 

Və ya daha yaxşı, təkrar azaltmaq üçün bir zəncir istifadə edin:

 $('.test').addClass('hello').css('color', 'orange').prop('title', 'Hello world'); 

Ayrıca, bir çox funksiyanın bütün dəyərləri bir obyektə qruplaşdıraraq, bir çağırışda çox dəyişikliklər edə biləcəyini unutmayın. Bunun əvəzinə:

 $('.test').css('color', 'orange').css('background-color', 'blue'); 

istifadə edin:

 $('.test').css({ 'color': 'orange', 'background-color': 'blue' }); 

Dəyişən adlandırma konvensiyaları

Siyahıda göstərilən jQuery dəyişənləri adətən standart JavaScript obyektlərindən ayırmaq üçün $ ilə başlayırlar.

 var $this = $(this); 

DOM xüsusiyyətlərinizi və funksiyalarınızı bilirsiniz

JQuery-nin məqsədlərindən biri DOM-a müəlliflik etməkdirsə də, DOM xüsusiyyətlərinin bilikləri son dərəcə faydalı ola bilər. DOM'u öyrənmədən jQuery-i öyrənənlər tərəfindən edilən ən çox səhvlərdən biri jQuery-ni elementin xüsusiyyətlərinə çatmaq üçün istifadə etməkdir:

 $('img').click(function () { $(this).attr('src'); // Bad! }); 

Yuxarıdakı kodda, bu, klik hadisə işləyicisinin başlamış olduğu elementə aiddir. Yuxarıdakı kod yavaş və ətraflı; Aşağıdakı kod eyni işlədir və daha qısa, daha sürətli və daha çox oxunandır.

 $('img').click(function () { this.src; // Much, much better }); 

Elementlər yaratmaq üçün ibadət sintaksisi

Aşağıdakı iki nümunə funksional olaraq bərabər və sintaktik cəhətdən düzgün olsa da, ilk nümunə üstünlük təşkil edir:

 $('<p>', { text: 'This is a ' + variable, "class": 'blue slider', title: variable, id: variable + i }).appendTo(obj); 

Müqayisə üçün simli birləşmə yanaşması çox az oxunaqlı və daha həssasdır:

 $('<p class="blue slider" id="' + variable + i + '" title="' + variable + '">This is a ' + variable + '</p>').appendTo(obj); 

İlk nümunə ikincidən daha yavaş olmasına baxmayaraq, daha dəqiqliyin üstünlükləri, hətta ən çox işə həssas tətbiqlərdə olan nominal fərqləri aşacaqdır.

Bundan əlavə, idik sintaksis xüsusi simvolların enjeksiyasına qarşı davamlıdır. Məsələn, ikinci misalda, variable olan tirəng simvolu atributları. Hata yanaşmadığı üçün tövsiyə edilməməli olsa da, öz qalığına uyğun kodlaşdırma mümkündür.

Sohbetler

Digər istifadəçilərlə jQuery haqqında söhbət:

Alternativlər / rəqiblər

Digər məşhur javascript kitabxanaları:

İctimai Repositories:

Etiketlər