الفرق بين المراجعتين ل"jQuery/change"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - 'JQuery' ب'jQuery')
 
(7 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:التابع <code>‎‎.change()‎‎</code>‎ في jQuery}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:التابع <code>‎‎.change()‎‎</code>‎ في jQuery}}</noinclude>
−
 
+
==<code>‎.change( handler )‎</code>==
−
== <code>‎.change( handler )‎</code> ==
 
−
 
 
 
===القيمة المعادة===
 
===القيمة المعادة===
−
كائن [[JQuery/jQuery|jQuery]].
+
كائن [[jQuery/jQuery|jQuery]].
 
===الوصف===
 
===الوصف===
 
يُستخدَم التابع ‎<code>.change()‎</code> في ربط مُعالِج الأحداث (event handler) لتغيير حدث JavaScript أو إطلاق هذا الحدث على عنصر ما.
 
يُستخدَم التابع ‎<code>.change()‎</code> في ربط مُعالِج الأحداث (event handler) لتغيير حدث JavaScript أو إطلاق هذا الحدث على عنصر ما.
−
 
+
===<code>‎.change( handler )‎</code>===
−
=== <code>‎.change( handler )‎</code> ===
 
 
أضيفت في الإصدار: 1.0.
 
أضيفت في الإصدار: 1.0.
−
 
 
====<code>handler</code>====
 
====<code>handler</code>====
 
دالة على الشكل [[JavaScript/Function|‎Function]]( [[JavaScript/Event|Event]] eventObject )‎، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُطلَق فيها الحدث.
 
دالة على الشكل [[JavaScript/Function|‎Function]]( [[JavaScript/Event|Event]] eventObject )‎، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُطلَق فيها الحدث.
−
 
+
===<code>‎.change( [eventData ], handler )‎</code>===
−
=== <code>‎.change( [eventData ], handler )‎</code> ===
 
 
أضيفت في الإصدار: 1.4.3.
 
أضيفت في الإصدار: 1.4.3.
−
 
 
====<code>eventData</code>====
 
====<code>eventData</code>====
 
أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيّة استخدام أي نوع)، ويُمثِّل كائن يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.
 
أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيّة استخدام أي نوع)، ويُمثِّل كائن يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.
 
====<code>handler</code>====
 
====<code>handler</code>====
 
دالة على الشكل [[JavaScript/Function|‎Function]]( [[JavaScript/Event|Event]] eventObject )‎، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُطلَق فيها الحدث.
 
دالة على الشكل [[JavaScript/Function|‎Function]]( [[JavaScript/Event|Event]] eventObject )‎، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُطلَق فيها الحدث.
−
 
+
===<code>‎.change()‎</code>===
−
=== <code>‎.change()‎</code> ===
 
 
أضيفت في الإصدار: 1.0.
 
أضيفت في الإصدار: 1.0.
  
سطر 28: سطر 21:
  
 
يُعدُّ هذا التّابع اختصارًا للتابع  <code>‎.on( "change", handler )</code>‎ في أول شكلين له، وللتّابع ‎<code>.trigger( "change" )‎</code> في شكله الثّالث.
 
يُعدُّ هذا التّابع اختصارًا للتابع  <code>‎.on( "change", handler )</code>‎ في أول شكلين له، وللتّابع ‎<code>.trigger( "change" )‎</code> في شكله الثّالث.
 +
 +
يُرسَل الحدث <code>change</code> إلى العنصر عندما تتغيّر قيمته، ويكون هذا الحدث محدودًا لعناصر ‎<code>[[HTML/input|<input>]]</code>‎، و ‎<code>[[HTML/textarea|<textarea>]]</code>‎، و ‎<code>[[HTML/select|<select>]]</code>‎. يُطلَق هذا الحدث مباشرةً بالنسبة لمربّعات الاختيار و<nowiki/>[[HTML/input/checkbox|مربّعات التأشير]] و<nowiki/>[[HTML/input/radio|أزرار الانتقاء]] (radio buttons) عندما يختار المستخدم باستخدام الفأرة، ولكن يُؤجَّل بالنسبة لأنواع العناصر الأخرى حتى يفقد العنصر التركيز عنه.
 +
 +
لنأخذ مثال HTML التالي:<syntaxhighlight lang="html">
 +
<form>
 +
  <input class="target" type="text" value="Field 1">
 +
  <select class="target">
 +
    <option value="option1" selected="selected">الخيار 1</option>
 +
    <option value="option2">الخيار 2</option>
 +
  </select>
 +
</form>
 +
<div id="other">
 +
  إطلاق معالج الحدث
 +
</div>
 +
</syntaxhighlight>يُمكِن ربط مُعالِج الحدث إلى عنصر  <code>[[HTML/input|‎<input>]]</code>‎ ومربّع الاختيار:<syntaxhighlight lang="javascript">
 +
$( ".target" ).change(function() {
 +
  alert( "استًدعي معالج الأحداث للتابع .change()" );
 +
});
 +
</syntaxhighlight>عندما نختار الخيار الثاني الآن من القائمة المنسدلة، فستُعرَض رسالة التنبيه، وستُعرَض أيضًا إن غيّرنا النص في الحقل ثمّ ضغطنا بعيدًا عنه. إن فقد الحقل التركيز عنه دون تغيير المحتوى فلن يُطلَق الحدث. لإطلاق الحدث يدويًّا استخدم التابع <code>‎.change()‎</code> دون وسائط:<syntaxhighlight lang="javascript">
 +
$( "#other" ).click(function() {
 +
  $( ".target" ).change();
 +
});
 +
</syntaxhighlight>بعد تنفيذ هذه الشيفرة سيُعطينا الضغط على عبارة "إطلاق مُعالِج الحدث" رسالة التنبيه. ستُعرَض الرسالة مرتين بسبب ربط مُعالِج الأحداث مرتين مع الحدث <code>change</code> على كل من عنصري الحقل.
 +
 +
بدءًا من إصدار jQuery 1.4 ينتقل (bubble) الحدث <code>change</code> في متصفح Internet Explorer، وبالتالي يكون سلوكه متوافقًا مع الحدث في المتصفحات الحديثة الأخرى.
 +
 +
'''ملاحظة:''' لن يُطلِق تغيير قيمة عنصر <code>[[HTML/input|<input>]]</code> باستخدام JavaScript الحدث <code>change</code>، مثل تغييرها عبر التّابع ‎<code>[[jQuery/val|.val()]]</code>‎.
 +
=== ملاحظات إضافيّة===
 +
لمّا كان التّابع ‎<code>.change()</code>‎ مُجرَّد اختصار  للتابع <code>‎.on( "change", handler )</code>‎، فمن الممكن إلغاء الحدث باستخدام ‎<code>.off( "change" )‎</code>.
 +
 +
=== أمثلة ===
 +
إرفاق حدث <code>change</code> إلى عنصر الاختيار الذي يحصل على النص لكل خيار ويكتبه ضمن عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>، ثمّ يُطلِق الحدث لرسم النص المبدئي:<syntaxhighlight lang="html">
 +
<!doctype html>
 +
<html lang="en">
 +
<head>
 +
  <meta charset="utf-8">
 +
  <title>مثال عن التّابع change</title>
 +
  <style>
 +
  div {
 +
    color: red;
 +
  }
 +
  </style>
 +
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 +
</head>
 +
<body>
 +
 +
<select name="sweets" multiple="multiple">
 +
  <option>شوكولا</option>
 +
  <option selected="selected">حلويات</option>
 +
  <option>حلوى/option>
 +
  <option selected="selected">كراميل</option>
 +
  <option>كعك</option>
 +
  <option>بسكويت</option>
 +
</select>
 +
<div></div>
 +
 +
<script>
 +
$( "select" )
 +
  .change(function () {
 +
    var str = "";
 +
    $( "select option:selected" ).each(function() {
 +
      str += $( this ).text() + " ";
 +
    });
 +
    $( "div" ).text( str );
 +
  })
 +
  .change();
 +
</script>
 +
 +
</body>
 +
</html>
 +
</syntaxhighlight>لإضافة اختبار تحقّق لكافّة عناصر <code>[[HTML/input|<input>]]</code> النصيّة:<syntaxhighlight lang="javascript">
 +
$( "input[type='text']" ).change(function() {
 +
  // تحقّق من المُدخلات باستخدام $( this ).val()
 +
});
 +
</syntaxhighlight>
 +
==<span>مصادر</span>==
 +
*<span>[http://api.jquery.com/change/ صفحة التابع ‎‎‎‎.change()‎ في توثيق jQuery الرسمي].</span>
 +
[[تصنيف:jQuery]]
 +
[[تصنيف:jQuery Method]]
 +
[[تصنيف:jQuery Events]]

المراجعة الحالية بتاريخ 09:21، 24 يونيو 2018

‎.change( handler )‎

القيمة المعادة

كائن jQuery.

الوصف

يُستخدَم التابع ‎.change()‎ في ربط مُعالِج الأحداث (event handler) لتغيير حدث JavaScript أو إطلاق هذا الحدث على عنصر ما.

‎.change( handler )‎

أضيفت في الإصدار: 1.0.

handler

دالة على الشكل ‎Function( Event eventObject )‎، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُطلَق فيها الحدث.

‎.change( [eventData ], handler )‎

أضيفت في الإصدار: 1.4.3.

eventData

أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيّة استخدام أي نوع)، ويُمثِّل كائن يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.

handler

دالة على الشكل ‎Function( Event eventObject )‎، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُطلَق فيها الحدث.

‎.change()‎

أضيفت في الإصدار: 1.0.

لا يقبل هذا الشكل من التّابع أيّة وسائط.

يُعدُّ هذا التّابع اختصارًا للتابع ‎.on( "change", handler )‎ في أول شكلين له، وللتّابع ‎.trigger( "change" )‎ في شكله الثّالث.

يُرسَل الحدث change إلى العنصر عندما تتغيّر قيمته، ويكون هذا الحدث محدودًا لعناصر ‎<input>‎، و ‎<textarea>‎، و ‎<select>‎. يُطلَق هذا الحدث مباشرةً بالنسبة لمربّعات الاختيار ومربّعات التأشير وأزرار الانتقاء (radio buttons) عندما يختار المستخدم باستخدام الفأرة، ولكن يُؤجَّل بالنسبة لأنواع العناصر الأخرى حتى يفقد العنصر التركيز عنه.

لنأخذ مثال HTML التالي:

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">الخيار 1</option>
    <option value="option2">الخيار 2</option>
  </select>
</form>
<div id="other">
  إطلاق معالج الحدث
</div>

يُمكِن ربط مُعالِج الحدث إلى عنصر ‎<input>‎ ومربّع الاختيار:

$( ".target" ).change(function() {
  alert( "استًدعي معالج الأحداث للتابع .change()" );
});

عندما نختار الخيار الثاني الآن من القائمة المنسدلة، فستُعرَض رسالة التنبيه، وستُعرَض أيضًا إن غيّرنا النص في الحقل ثمّ ضغطنا بعيدًا عنه. إن فقد الحقل التركيز عنه دون تغيير المحتوى فلن يُطلَق الحدث. لإطلاق الحدث يدويًّا استخدم التابع ‎.change()‎ دون وسائط:

$( "#other" ).click(function() {
  $( ".target" ).change();
});

بعد تنفيذ هذه الشيفرة سيُعطينا الضغط على عبارة "إطلاق مُعالِج الحدث" رسالة التنبيه. ستُعرَض الرسالة مرتين بسبب ربط مُعالِج الأحداث مرتين مع الحدث change على كل من عنصري الحقل.

بدءًا من إصدار jQuery 1.4 ينتقل (bubble) الحدث change في متصفح Internet Explorer، وبالتالي يكون سلوكه متوافقًا مع الحدث في المتصفحات الحديثة الأخرى.

ملاحظة: لن يُطلِق تغيير قيمة عنصر <input> باستخدام JavaScript الحدث change، مثل تغييرها عبر التّابع ‎.val()‎.

 ملاحظات إضافيّة

لمّا كان التّابع ‎.change()‎ مُجرَّد اختصار للتابع ‎.on( "change", handler )‎، فمن الممكن إلغاء الحدث باستخدام ‎.off( "change" )‎.

أمثلة

إرفاق حدث change إلى عنصر الاختيار الذي يحصل على النص لكل خيار ويكتبه ضمن عنصر <div>، ثمّ يُطلِق الحدث لرسم النص المبدئي:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>مثال عن التّابع change</title>
  <style>
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<select name="sweets" multiple="multiple">
  <option>شوكولا</option>
  <option selected="selected">حلويات</option>
  <option>حلوى/option>
  <option selected="selected">كراميل</option>
  <option>كعك</option>
  <option>بسكويت</option>
</select>
<div></div>
 
<script>
$( "select" )
  .change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .change();
</script>
 
</body>
</html>

لإضافة اختبار تحقّق لكافّة عناصر <input> النصيّة:

$( "input[type='text']" ).change(function() {
  // تحقّق من المُدخلات باستخدام $( this ).val()
});

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=jQuery/change&oldid=11180"