تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: أساسيات إدارة الأحداث


الصفحة السابقة
لقد تعرفت بالفعل على إدارة الأحداث في TP للجزء الثاني من هذه الدورة. هذا سمح لك بالرد على مرور الماوس على رابط. سيمضي هذا الفصل إلى أبعد من ذلك من خلال تقديم العديد من الأحداث التي يمكن معالجتها بواسطة كود jQuery.

الفأرة MOUSE


قبل البداية
بغض النظر عن الحدث الذي سيتم التعامل معه ، ستحتاج إلى إعداد طريقة ستبدو هكذا:

$(sel).mge(function() {
  // jQuery عديد البيانات
  // للرد على الحدث الذي سيحدث
}    
... أين sel هو محدد jQuery كتلك التي واجهتها حتى الآن و mge هو أسلوب لإدارة الأحداث مثل تلك التي ستواجهها خلال هذا الفصل.
يتعلق إعداد الحدث بجميع العناصر التي يتم إرجاعها بواسطة المحدد. على سبيل المثال ، من خلال تطبيق إدارة الأحداث على المحدد $('img')، سيؤثر ذلك على جميع علامات <img> للوثيقة. أو من خلال تطبيق إدارة الأحداث على المحدد $('.result')، سيتم تطبيقه على جميع علامات الفصل result . باختصار ، سوف تفهم: تعليمات واحدة تسمح بإعداد إدارة الأحداث المتعددة . يا له من مدخر للوقت! الأمر متروك لك لإيجاد المحدد الأنسب لكل حالة.
الماوس هو جهاز يستخدم عالميا للتواصل مع الكمبيوتر. يمكنك الإشارة إلى عنصر من خلال الإشارة إليه أو تحديد عنصر أو التركيز عليه بالنقر عليه أو سحب محتويات عنصر ما. الكثير من الأحداث يمكن الوصول إليه في jQuery . في هذا الفصل الفرعي ، سنركز على الأحداث الموضحة في الجدول التالي.
طريقة الحدث المدار
click() النقر على الماوس
dblclick() انقر نقرا مزدوجا فوق
mousedown() اضغط على زر الماوس الأيسر أو الأيمن أثناء وجود المؤشر فوق العنصر
mouseenter()أوmouseover() بداية التمرير للعنصر
mouseout()أوmouseleave() تحوم فوق العنصر
mousemove() تحريك المؤشر فوق العنصر
mouseup() حرر الزر الأيسر أو الأيمن أثناء وجود المؤشر فوق العنصر
scroll() استخدام العجلة بينما يكون المؤشر فوق عنصر متأثر بهذا النوع من الأحداث
النقرات ومواقف الماوس
أدرك جيدًا أنك تعلمت الكثير في الفصول السابقة وأنك تحتاج إلى الاسترخاء. ماذا عن لعبة صغيرة مكتوبة ب jQuery لفهم كيفية عمل أساليب إدارة الأحداث في الماوس؟ سوف نعرض صورة صغيرة في وضع عشوائي على الشاشة. عندما ينقر اللاعب على هذه الصورة ، سيتم عرضها في موقع آخر. هنا هو الرمز المستخدم:

<img id="target" src="petitchat.jpg">

<script src="jquery.js"></script>
<script>
  $(function() {
    // أبعاد النافذة
    var largeur = ($(window).width()) - 50;
    var hauteur = ($(window).height()) - 50;

    // طباعة الصورة الأولى بقياسات  (100, 100)
    var p = $('#target').offset();
    p.top=100;
    p.left=100;
    $('#target').offset(p);
    
    // إدارة الضغط على الماوس و تحريك 
    $("#target").click(function() {
      x = Math.floor(Math.random()*largeur);
      y = Math.floor(Math.random()*hauteur);
      var p = $('#target').offset();
      p.top = y;
      p.left = x;
      $('#target').offset(p);
    });
  });
</script>      
دعونا نلقي نظرة على التعليمات التي تشكل هذا المستند . تشير علامة <img> المعرف #target إلى الصورة petitchat.jpg . يستخدم باقي الكود عبارات jQuery لتغيير موقع الصورة والرد على نقرات المستخدمين.
بعد انتظار توفر DOM ، يتم تخزين أبعاد النافذة في المتغيرات largeurو hauteur :

var largeur = ($(window).width()) - 50;
var hauteur = ($(window).height()) - 50;     
أفهم أنه من الضروري معرفة أبعاد النافذة لعرض الصورة ، ولكن لماذا طرح 50 من العرض والارتفاع؟
حجم الصورة المعروضة هو 50 × 50 بكسل. يؤدي طرح هذه القيم من عرض الإطار وارتفاعه إلى ضمان عرض الصورة دائمًا في الجزء المرئي من النافذة. يتم استخدام طريقة offset() jQuery للحصول أو تعديل إحداثيات الكائن الذي يتم تطبيقه عليه.
وبالتالي ، تقوم التعليمة البرمجية التالية باسترداد إحداثيات الصورة التي لها المعرف target وتعيين النتيجة للمتغير p

var p = $('#target').offset();     
فيما تفيدني معرفة موقع الصورة؟
أنت على حق ، يبدو أن هذه التعليمة ليس لها أي فائدة. ومع ذلك ، من خلال النظر عن قرب أكثر ... باستخدام التعليمات $('#target') و offset() وتخزين نتيجتها في متغير p JavaScript ، فإننا نعرّف في نفس الوقت كائن jQuery والذي يمكن من خلاله تعديل إحداثيات الصورة. هذا ما تفعله الإرشادات التالية عن طريق عرض الصورة في الإحداثيات (100 ، 100):

p.top=100;
p.left=100;    
كل ما تبقى هو تمرير الكائن p في وسيطة الى الدالة offset() لكي تنقل الصورة إلى الإحداثيات (100 ، 100):

$('#target').offset(p);      
كل ما تبقى هو تمرير الكائن p في وسيطة الى الدالة offset() لكي تنقل الصورة إلى الإحداثيات (100 ، 100):

$('#target').offset(p);     
تم إعداد إدارة الحدث للحدث click ، أي عندما ينقر المستخدم على زر الماوس الأيسر:

$("#target").click(function() {    
يتم اختيار موضع عشوائي جديد للصورة (أثناء البقاء داخل النافذة) أثناء انتظار نقرة مستخدم آخر. يتم اختيار وتخزين رقم عشوائي بين 0 وعرض النافذة في المتغير x :

x = Math.floor(Math.random()*largeur);   
Math.random() هي وظيفة JavaScript تقوم بإرجاع رقم عشوائي بين 0 وقيمة قريبة من 1. في هذا المثال ، لتبسيط الأشياء ، سوف نعترف بأن الرقم الذي تم إرجاعه يتراوح بين 0 و 1.
بضرب القيمة التي يتم إرجاعها بواسطة عرض النافذة ، نحصل على رقم بين 0 وعرض النافذة. أخيرًا ، من خلال تطبيق وظيفة JavaScript Math.floor() على هذا الرقم ، نحصل على قيمة الأعداد الصحيحة الأقرب إلى هذا الرقم. هذا هو بالضبط التأثير المطلوب.
يستخدم السطر التالي نفس الأسلوب لاختيار رقم عشوائي بين 0 وارتفاع النافذة. يتم تخزين هذا الرقم في المتغير y .
لتحريك الصورة ، نستخدم التقنية التقليدية. نبدأ بإنشاء كائن jQuery يحتوي على إحداثيات الموضع الحالي للصورة:

var p = $('#target').offset();      
يمكننا تغيير إحداثيات الصورة باستخدام الإحداثيات x و y بشكل عشوائي و المأخوذون في الخطوة السابقة:

p.top = y;
p.left = x;     
ثم ننقل الصورة باستخدام الطريقة offset() :

$('#target').offset(p);    
الكود يعمل بشكل جيد ، يمكنك اختباره في أي متصفح.
من الواضح أنه يمكنك استبدال الطريقة click() بأخرى من اختيارك. على سبيل المثال ، للرد في بداية تمرير الصورة ، ستستخدم هذه التعليمات:

$("#target").mouseenter(function() {  
طريقة التمرير
لإنهاء أساليب الحدث المتعلقة بالماوس ، كل ما تبقى هو كتابة رمز صغير لاستخدام هذه الطريقة scroll() .

<style type="text/css">
  div {
    width: 200px;
    height: 200px;
    overflow: scroll;
    background-color: yellow;
    border: 2px black solid;
  }
</style>

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
    
<script src="jquery.js"></script>
<script>
  $(function() {
    $('div').scroll(function() {
      alert('استعمال عجلة الماوس داخل العلامة div ');
    });
    $(window).scroll(function() {
      alert('استعمال عجلة الماوس داخل المستند');
    });
  });
</script>  
ابتداءا من هنا ، لن أضع كل الكود ولكن فقط العناصر الأساسية. في هذه المرحلة ، يجب أن تكون قادرًا على التعامل مع الكود
للكشف عن استخدام العجلة في العلامة <div>، ما عليك سوى تحديد العلامة وتطبيق الطريقة scroll() :

$('div').scroll(function() {      
يؤدي اكتشاف حركة عجلة الماوس إلى عرض مربع رسالة:

alert('استعمال عجلة الماوس داخل العلامة div ');     
يؤدي اكتشاف حركة عجلة الماوس إلى عرض مربع رسالة:

alert('استعمال عجلة الماوس داخل العلامة div ');    
للكشف عن استخدام العجلة في المستند ، قم بالشيء نفسه ، بإدخال الكلمة windowفي المحدد ، دون وضع علامات اقتباس:

$(window).scroll(function() {  
هنا أيضًا ، يؤدي اكتشاف حركة الروليت إلى عرض مربع رسالة:

alert('استعمال عجلة الماوس داخل المستند');
إذا كانت النافذة كبيرة جدًا ، فلن تتمكن من اختبار استخدام العجلة. تذكر تغيير حجم النافذة ليكون التمرير ممكنًا.
WHICH و TYPE
في بعض الحالات الخاصة ، قد يكون من الضروري معرفة زر الماوس الذي تم الضغط عليه. للقيام بذلك ، سوف نستخدم الطريقة event.which التي تُرجع إحدى القيم التالية:
  • 1 : الضغط على زر اليسار.
  • 2 : الضغط على زر المركزي.
  • 3 : الضغط على الزر الأيمن.
بالنسبة لنوع الحدث الذي تم إثارته بواسطة إجراء إدارة الحدث ، سوف نستخدم هذه الطريقة event.type . قد تكون القيمة التي تم إرجاعها click، dblclick، mousedown، mouseenter، mouseover، mouseleave، mouseout، mousemove أو mouseup .
دعونا نرى كيفية استخدام كلتا الطريقتين في الممارسة.

اضغط على الصورة بإحدى ازرار.<br ></code>
<img id="target" src="petitchat.jpg"><br />
<span id="rapport"></span>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#target').mousedown(function(e){
      $('#rapport').html(الحدث : ' + e.type + '. الزر الضغوط : ' +  e.which );
    });
  });
</script>     
يُعد رمز jQuery مديرًا للحدث فيما يتعلق بعلامة المعرّف #target، أي الصورة. هذا المدير يلتقط الحدث mousedown . لاحظ المدخل e الذي تم تمريره إلى الدالة:

$('#target').mousedown(function(e){     
الطرق e.type و e.which تستخدم للإشارة إلى نوع الحدث وأثار تم الضغط على زر. يتم عرض هذه المعلومات في علامة <span> المعرف #rapport :

$('#rapport').html('الحدث : ' + e.type + '. الزر المضغوط : ' +  e.which );      

لوحة المفاتيح


تعد لوحة المفاتيح أيضًا أداة أساسية للتواصل مع الكمبيوتر. على الويب ، يتم استخدامها بشكل أساسي لإدخال البيانات النصية في النماذج. jQuery قادر على التقاط ثلاثة أحداث متعلقة بلوحة المفاتيح.
طريقة الحدث المدار
keydown() لوحة المفاتيح keypress
keyup() الافراج عن مفتاح لوحة المفاتيح ضغطت سابقا
keypress() الضغط باستمرار على لوحة المفاتيح
دعونا نرى كيفية استخدام هذه الأساليب عن طريق التفكير في حالة عملية. على سبيل المثال ، سنقوم بعرض مستطيل أخضر صغير في كل مرة يتم فيها إضافة حرف إلى علامة <textarea> . سوف يتحول هذا المستطيل إلى اللون الأبيض عند تحرير المفتاح. هنا هو الكود المستخدم:

<style type="text/css">
  #lumiere {
    width: 10px;
    height: 10px; 
    background-color: white; }
</style>

<div id="lumiere"></div>
<textarea id="target"></textarea>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#target').keydown(function(){
      $('#lumiere').css('background-color', 'green');
    });
    $('#target').keyup(function(){
        $('#lumiere').css('background-color', 'white');
    });
  });
</script>     
يقوم كود jQuery باعداد إجراءين للحدث: أحدهما في eventkeydown والآخر الحدث thekeyup . عند الضغط على مفتاح على لوحة المفاتيح ، يتحول لون خلفية العلامة <div> إلى اللون الأخضر. عند تحرير المفتاح ، تتحول العلامة إلى اللون الأبيض مرة أخرى.
في بعض البرامج المكتوبة في jQuery ، قد يكون من الضروري معرفة أي مفتاح على لوحة المفاتيح تم الضغط عليه. لذلك ، سوف نستخدم الطريقة event.which التي تُرجع هذه المعلومات بدقة. بالنسبة لنوع الحدث الذي تم إثارته بواسطة إجراء إدارة الحدث ، سوف تستخدم هذه الطريقة event.type . يمكن أن تكون القيمة التي تم إرجاعها keydown، keypress أو keyup، وفقًا لطريقة الحدث المستخدمة. دعونا نرى كيفية استخدام الطريقة event.which بطريقة عملية.

<form>
  دع خيالك يذهب الي بعيد: أدخل بضع كلمات <br />
  <textarea id="saisie"></textarea>
</form><br />
الحرف المكتوب : <span id="unelettre"></span>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#saisie').keypress(function(e) {
      $('#unelettre').text(e.which);  //keyCode
    });
  });
</script>     
تتم مطالبة المستخدم بكتابة بضع كلمات في مربع النص متعدد الأسطر. ثم يتم عرض كل حرف مكتوب أسفل مربع الإدخال. يُعـد كود jQuery متصرف أحداث على علامة المعرّف #saisie، وهذا يعني على <textarea> . يتم ارجاع المفتاح المكتوب في لوحة المفاتيح ويقع عرضه في العلامة <span>، كما هو مبين في الشكل التالي.
jQuery web
تُرجع الطريقة e.which رمز مفتاح الدخول
الحرف ASCII الحرف ASCII الحرف ASCII الحرف ASCII الحرف ASCII
space 32 3 51 F 70 Y 89 l 108
! 33 4 52 G 71 Z 90 m 109
" 34 5 53 H 72 [ 91 n 110
# 35 6 54 I 73 \ 92 o 111
$ 36 7 55 J 74 ] 93 p 112
% 37 8 56 K 75 ^ 94 q 113
& 38 9 57 L 76 _ 95 r 114
' 39 : 58 M 77 ` 96 s 115
( 40 ; 59 N 78 a 97 t 116
) 41 60 O 79 b 98 u 117
* 42 = 61 P 80 c 99 v 118
+ 43 62 Q 81 d 100 w 119
, 44 ? 63 R 82 e 101 x 120
- 45 @ 64 S 83 f 102 y 121
. 46 A 65 T 84 g 103 z 122
/ 47 B 66 U 85 h 104 { 123
0 48 C 67 V 86 i 105 | 124
1 49 D 68 W 87 j 106 } 125
2 50 E 69 X 88 k 107 ~ 126
مع keydown() و keyup() ، هذه هو نسخة مبسطة من رمز ASCII حيث يتم الجمع بين الأحرف الصغيرة والأحرف الكبيرة.
     >
مفتاح قانون مفتاح قانون مفتاح قانون مفتاح قانون
مسافة للخلف 8 6 54 الخامس 86 F3 114
التبويب 9 7 55 ث 87 F4 115
دخول 13 8 56 س 88 F5 116
تغير 16 9 57 هناك 89 F6 117
السيطرة 17 الى 65 ض 90 F7 118
البديل 18 ب 66 نوافذ اليسار 91 F8 119
وقفة 19 ج 67 ويندوز الصحيح 92 F9 120
فير ماج 20 د 68 اختيار 93 F10 121
فرار 27 البريد 69 0 لوحة المفاتيح 96 F11 122
الصفحة السابقة 33 و 70 1 لوحة المفاتيح 97 F12 123
الصفحة التالية 34 ز 71 2 لوحة المفاتيح 98 Num Lock 144
نهاية 35 ح 72 3 لوحة المفاتيح 99 تنكر توقف 145
الأصل 36 أنا 73 4 لوحة المفاتيح 100 . 186
اليسار 37 ي 74 5 لوحة المفاتيح 101 = 187
أعلى 38 ك 75 6 لوحة المفاتيح 102 ، 188
حق 39 ل 76 7 لوحة المفاتيح 103 - 189
منخفض 40 م 77 8 لوحة المفاتيح 104 . 190
إنس 45 ن 78 9 لوحة المفاتيح 105 / 191
حذف 46 س 79 * 106 ` 192
0 48 ص 80 + 107 [ 219
1 49 ف 81 - 109 \ 220
2 50 ص 82 . 110 ] 221
3 51 الصورة 83 / 111 الفضاء 222
4 52 تي 84 F1 112 - -
5 53 ش 85 F2 113 - -
إذا كنت لا ترغب في الحصول على رمز الحرف ولكن الحرف نفسه ، فتأكد من استخدام الطريقة keypress() :

$('#saisie').keypress(function(e) {     
واستبدل السطر التالي بـ:

var c = String.fromCharCode(e.which);
$('#unelettre').text(c);  
تسترجع العبارة الأولى الكود المكتوب من لوحة المفاتيح ( e.which) ، وتحوله إلى حرف ( String.fromCharCode) ويخزنه في المتغير c . يعرض البيان الثاني هذا الحرف في علامة المعرف #unelettre، أي في <span> .

العناصر


لقد جمعنا هنا أساليب الحدث المتعلقة بكسب وفقدان focus ، وتعديل الحجم والمحتويات ، واختيار عنصر.
طريقة الحدث المٌدار
focus() استقبال التركيز من قبل العنصر
blur() فقدان التركيز من قبل العنصر
focusin() استقبال التركيز من قبل عنصر أو أحد أطفالها
focusout() فقدان التركيز من قبل عنصر أو أحد أطفالها
resize() تغيير حجم عنصر
change() تحرير عنصر
الطرق focus() و blur() على التوالي للكشف عن استلام focus وفقدان focus من عنصر في نموذج. يمكن أن يحدث هذا بعد الضغط على مفتاح أو مجموعة من مفاتيح لوحة المفاتيح ( Tab أو Maj+ Tab على سبيل المثال) أو عن طريق النقر بالماوس.
الطرق focusin() و focusout() قابلة للمقارنة لأساليب focus() و blur() ويمكن أن تحل محلها. ومع ذلك ، يكتشفون أيضًا الاستقبال وفقدان focus لعنصر الأصل.
FOCUS() و BLUR()
سيوضح هذا الكود الصغير ما قلته للتو. أولا ، دعونا ننظر إلى الأساليب focus() و blur() .

<form>
  انقر فوق مربعات النصوص <p>
  <input type="text" class="f" id="Zone-de-texte-1"><p>
   <input type="text" class="f" id="Zone-de-texte-2"><br />
</form><br />

  الحصول على Focus : في مربع النص <span id="resultat"></span><br />
  فقدان focus :في مربع النص <span id="resultat2"></span>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('.f').focus(function() {
      $('#resultat').text($(this).attr('id'));
    });
    $('.f').blur(function() {
      $('#resultat2').text($(this).attr('id'));
    });

  });
</script>     
يحتوي نص المستند بشكل أساسي على مربعين للنص وعلامتين <span> . عندما يعطي المستخدم focus على أحد مربعات النص ، <span> يتم تغيير محتويات كليهما . يشير الأول إلى معرف عنصر التحكم الذي تلقى focus ، بينما يشير الثاني إلى معرف عنصر التحكم الذي فقد focus .
إجراء الحدث هو المسؤول عن عرض في <span>الأول . الطريقة المستخدمة هي focus() . الحدث المثير سيكون استقبال focus :

$('.f').focus(function() {     
فحص محدد . جميع علامات الفئة f المعنية ، وهي مربعي النص. عند تنفيذ وظيفة الحدث ، يتم عرض معرف ( attr('id')) العلامة التي أدت إلى الحدث ( $(this)) ( text) في علامة المعرف #resultat( $('#resultat')) ، وهذا يعني في العلامة <span> الأولى :

$('#resultat').text($(this).attr('id'));      
إجراء الحدث الثاني هو المسؤول عن عرض في <span> الثانية . الطريقة المستخدمة هي blur() . الحدث المثير سيكون فقدان focus :

$('.f').blur(function() {     
هذه الطريقة مخصصة لعلامات الفصل f، وبالتالي مربعي النص. عند تنفيذ وظيفة الحدث ، يتم عرض معرف ( attr('id')) العلامة التي أدت إلى الحدث ( $(this)) ( text) في علامة المعرف #resultat2( $('#resultat2')) ، وهذا يعني في العلامة <span>الثانية .
يوضح الشكل التالي صفحة الويب بعد التركيز على مربع النص الثاني ، ثم على المربع الأول.
jQuery web
يتم تحديث كل من <span> بناءً على العنصر الذي يحتوي على focus
FOCUSIN () و FOCUSOUT ()
سنركز الآن على الأساليب focusin() و focusout()، ونظهر اختلافاتهم عن الأساليب focus() و blur() . لهذا ، سيتم إنشاء علامتين <fieldset> تحتوي كل منهما على علامتين <input type="text"> . سيتم اختبار كسب وفقدان focus على مستوى العلامة <fieldset> . من خلال التركيز على مربع النص ، سيتم انعكاس الحدث مرة أخرى على العلامة الأصلية ، <fieldset> والتي ستعرض المعلومات وفقًا لذلك.

<form>
  انقر فوق مربعات النصوص<p>
  <fieldset id="premier">
    <legend> groupe   1</legend>
    <input type="text" class="f" id="Zone-de-texte-1"><p>
    <input type="text" class="f" id="Zone-de-texte-2"><br />
  </fieldset>

  <fieldset id="deuxieme">
    <legend> groupe 2</legend>
    <input type="text" class="f" id="Zone-de-texte-3"><p>
    <input type="text" class="f" id="Zone-de-texte-4"><br />
  </fieldset>
</form><br />

الحصول على Focus : في مربع النص <span id="resultat"></span><br />
فقدان focus :في مربع النص<span id="resultat2"></span>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('fieldset').focusin(function() {
      $('#resultat').text($(this).attr('id'));
    });
    $('fieldset').focusout(function() {
      $('#resultat2').text($(this).attr('id'));
    });
  });
</script>     
يحتوي نص المستند على علامتي <fieldset> تعريف #premier و #deuxieme . تحتوي كل من هذه العلامات على تسمية توضيحية ومربعي نص. باتباع علامتين <fieldset> ، يتم استخدام علامتين <span> للإشارة إلى اي <fieldset> يكسب focus و ايهما يفقده.
نختبر إجراء الحدث الأول الحصول على focus. الطريقة focusin() يتم تطبيقها على العناصر fieldset، أي على العلامتين <fieldset> :

$('fieldset').focusin(function() {     
عندما تتحصل العلامة <fieldset> أو أحد أولادها (العلامات <legend>و <input type="text">) على focus ، يتم تنفيذ هذه الطريقة. المعرف ( attr('id')للعلامة) <fieldset>والد ( $(this)يتمعرضها ( text) في العلامة المعرفة #resultat ( $('#resultat'))، وهذا يعني في العلامة الأولى <span> :

  $('#resultat').text($(this).attr('id'));    
يعرض العلاج المشابه في العلامة الثانية <span>اسم العلامة <fieldset>التي فقدت focus :

$('fieldset').focusout(function() {
  $('#resultat2').text($(this).attr('id'));
});  
حاول استبدال الطرق focusin() و focusout() بالطرق focus() و blur() وجرب الكود من جديد. تستطيع بذلك ان تفهم الفرق بين هاتين المجموعتين من الطرق وتعرف متى تستخدم واحدة أو أخرى.
تغيير الحجم RESIZE()
سنركز الآن على طريقة الحدث resize() . يتم تنفيذ هذه الطريقة كلما تغير حجم النافذة. سوف نستخدمها لعرض > أبعاد النافذة داخل <span> في كل مرة يتم تنفيذها:

<span id="resultat"></span>

<script src="jquery.js"></script>
<script>
  $(function() {
    $(window).resize(function() {
      var taille = ' حجم النافذة : ' + $(window).width() + 'px x ' + $(window).height() + 'px';
      $('#resultat').text(taille);
    });
  });
  </script>      
نص المستند بسيط للغاية ، لأنه يحتوي على علامة واحدة فقط <span>والتي سنعرض بها أبعاد النافذة. أما بالنسبة للعلاج ، فهو بسيط للغاية. في البداية ، يتم تخزين أبعاد النافذة ( $(window).width و $(window).height) في المتغير taille :

  var taille = ' حجم النافذة : ' + $(window).width() + 'px x ' + $(window).height() + 'px';      
ثم taille يتم نسخ محتويات المتغير ( text(taille)) في علامة <span>المعرف #resultat ( $('#resultat')) :

  $('#resultat').text(taille);     
حاول تغيير حجم النافذة ، سترى أنه يعمل!
CHANGE()
لإنهاء أساليب الحدث المتعلقة بالعناصر ، سوف نركز على الطريقة change() . يتم تنفيذ هذه الطريقة كلما تغير محتوى العنصر المعني. ويمكن استخدامها على العلامات <input>، <textarea> و <select> . كمثال ، سنكتشف التغييرات في القائمة المنسدلة ونعرض رسالة وفقًا لذلك.

<form>
  حدد قيمة من القائمة المنسدلة
  <select>
    <option>أحب jQuery</option>
    <option>أعشق jQuery</option>
    <option> انا مجنون jQuery</option>
    <option>jQuery ? لم أسمع به أبدا !</option>
  </select>
</form><br />

<span id="resultat"></span><br />

<script src="jquery.js"></script>
<script>
  $(function() {
    $('select').change(function() {
        $('#resultat').text('لقد اخترت للتو "' + $(this).val() +'".');
    });
  });
</script>    
يقوم نص المستند بإعداد قائمة منسدلة تحتوي على أربعة عناصر. سيتم تحديد العنصر المحدد في القائمة في علامة <span> المعرفة #resultat . الجزء الأكثر إثارة للاهتمام من الكود هو بالطبع بين العلامات <script> و </script> . change()يتم تطبيق طريقة الحدث على العلامة <select> . كلما اختار المستخدم قيمة من القائمة ، يتم تنفيذ هذه الطريقة:

  $('select').change(function() {     
يتم عرض نص العنصر المحدد في القائمة ( $(this).val()) في علامة <span> المعرفة #resultat ( $('#resultat').text) :

  $('#resultat').text('لقد اخترت للتو "' + $(this).val() +'".');      
يوضح الشكل التالي مثالًا للتنفيذ.
jQuery web

الصفحات


باتطبيق load() على العنصر window، تتيح طريقة الحدث اختبار التحميل الكامل للصفحة ، بما في ذلك النصوص والصور والكائنات الأخرى التي تقوم بتكوينها. بالنسبة للطريقة unload() ، يتم تشغيلها عندما يطلب المستخدم تغيير الصفحة. دعونا نرى كيفية استخدام كلا الطريقتين:

<img src="canard.jpg"><br />
<a href="https://www.arabclassroom.com"> انقر هنا للذهاب إلى موقع ArabClassroom </a>

<script src="jquery.js"></script>
<script>
  $(function() {
    alert('تم تحميل DOM');
    $(window).load(function() {
        alert('تم تحميل الصفحة بالكامل');
    });
    $(window).unload(function() {
        alert('لقد طلبت تغيير الصفحات');
    });
  });
</script>      
يحتوي نص المستند على صورة ورابط يشير إلى موقع ArabClassroom . عند توفر DOM ، يتم عرض مربع حوار:

alert('تم تحميل DOM');     
يتم تحميل محتوى الصفحة. عندما تكون الصورة والرابط في الذاكرة ، $(window).load() يتم تنفيذ الطريقة الحدث . ثم يتم عرض مربع حوار آخر:

alert('تم تحميل الصفحة بالكامل');      
يتم تطبيق الطريقة unload() دائمًا على العنصر window، أي على نافذة المتصفح. والطريقة load() يمكن تطبيقها على عنصر آخر وهو أمر يرتبط مع URL كالعلامة <img>، <script>، <frame>أو <iframe> . في هذه الحالة ، يتم تنفيذ الكود المرتبط بهذه الطريقة عندما يتم تحميل العنصر المقابل وأطفاله (إن وجدت) بالكامل.
على سبيل المثال ، سوف نستخدم الإرشادات التالية لعرض أبعاد الصورة بعد تحميلها بالكامل:

$('#image1').load(function() {
  alert(this.width + ' x ' + this.height);
}     
أين يمثل #image1 معرف الصورة.
  • في طريقة إدارة نوع الحدث mousedown(function(e)) ، e.which تشير إلى أي زر تم الضغط عليه (1 للزر الأيسر ، 2 للزر الأوسط ، 3 للزر الأيمن). في أسلوب إدارة من نوع الحدث keypress(function(e)) ، e.which تُرجع كود ASCII الخاص بالمفتاح المضغوط. يمكن تحويل هذا الرمز إلى حرف باستخدام وظيفة JavaScript String.fromCharCode() .
  • نستخدم الطريقة focus() لإجراء معالجة بعد اكتساب focus بواسطة عنصر وطريقة blur() لإجراء علاج بعد فقدان focus بواسطة عنصر. إذا كان اكتساب focus وفقدانه قد يؤثران أيضًا على عناصر العنصر ، فنستخدم الأساليب focusin() و focusout() .
  • بتطبيق load() على العنصر window، تتيح لك الطريقة تنفيذ التعليمات البرمجية عند تحميل الصفحة بالكامل ، بما في ذلك النصوص والصور والكائنات الأخرى التي تقوم بتكوينها. بالنسبة للطريقة unload() فإنه يسمح بتنفيذها قبل تغيير الصفحة التي طلبها المستخدم مباشرة.