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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط
 
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:التابع <code>‎‎.addClass()‎‎</code>‎ في jQuery}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:التابع <code>‎‎.addClass()‎‎</code>‎ في jQuery}}</noinclude>
−
 
 
== <code>‎.addClass( className )‎</code> ==
 
== <code>‎.addClass( className )‎</code> ==
  
سطر 10: سطر 9:
  
 
=== <code>‎.addClass( className )‎</code> ===
 
=== <code>‎.addClass( className )‎</code> ===
−
أضيفت في الإصدار: 1.0
+
أضيفت في الإصدار: 1.0.
  
 
==== <code>className</code> ====
 
==== <code>className</code> ====
سطر 16: سطر 15:
  
 
=== <code>‎.addClass( function )‎</code> ===
 
=== <code>‎.addClass( function )‎</code> ===
−
أضيفت في الإصدار: 1.4
+
أضيفت في الإصدار: 1.4.
  
 
==== <code>Function</code> ====
 
==== <code>Function</code> ====
 
دالة على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Integer|Integer]] index, [[JavaScript/String|String]] currentClassName )‎</code> وتُعيد [[JavaScript/String|سلسلة نصيّة]].
 
دالة على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Integer|Integer]] index, [[JavaScript/String|String]] currentClassName )‎</code> وتُعيد [[JavaScript/String|سلسلة نصيّة]].
  
−
دالة تُعيد اسم أو عدة أسماء لأصناف مفصولةً بمسافة بينها لإضافتها إلى اسم الصّنف أو أسماء الأصناف الموجودة. <code>this</code> هو العنصر الحالي. تستقبل فهرس موقع العنصر في المجموعة واسم أو أسماء الأصناف الموجودة كوسائط لها.  
+
دالة تُعيد اسم أو عدة أسماء لأصناف مفصولةً بمسافة بينها لإضافتها إلى اسم الصّنف أو أسماء الأصناف الموجودة. المعامل <code>[[JavaScript/this|this]]</code> يمثِّل العنصر الحالي. تستقبل فهرس موقع العنصر في المجموعة واسم أو أسماء الأصناف الموجودة كوسائط لها.  
  
 
من المهم أن نلاحظ أن هذا التّابع لا يستبدل الصّنف الحالي، بل يضيفه ببساطة ملحقًا إياه بأي صنف معين مسبقًا للعناصر.
 
من المهم أن نلاحظ أن هذا التّابع لا يستبدل الصّنف الحالي، بل يضيفه ببساطة ملحقًا إياه بأي صنف معين مسبقًا للعناصر.
  
−
قبل إصدار jQuery 1.2/2.2 كان التّابع ‎<code>.addClass()</code>‎ يتحكم بخاصيّة الكائن <code>className</code> للعناصر المحدّدة وليس بخاصيّة HTML <code>‏class</code>‏، وحالما تتغيّر خاصيّة الكائن يُحدِّث المتصفّح خاصيّة HTML وفق ذلك، وتفسير هذا السّلوك هو أنّ هذا التّابع كان يعمل فقط للمستندات ذات الصّياغة HTML DOM (على سبيل المثال مستندات XML غير النقيّة).
+
قبل إصدار jQuery 1.2/2.2 كان التّابع ‎<code>.addClass()</code>‎ يتحكم بخاصيّة الكائن <code>className</code> للعناصر المحدّدة وليس بخاصيّة HTML <code>‏class</code>‏، وحالما تتغيّر خاصيّة الكائن يُحدِّث المتصفّح خاصيّة HTML وفق ذلك، وتفسير هذا السّلوك هو أنّ هذا التّابع كان يعمل فقط للمستندات ذات الصّياغة HTML DOM (أي ليس على مستندات XML الصَرفة [pure XML]).
  
 
تغيّر هذا السّلوك بدءًا من إصدار jQuery 1.12/2.2 لتحسين الدّعم لمستندات XML وتضمين مستندات SVG أيضًا. وبدءًا من هذا الإصدار استُخدِمَت خاصيّة HTML <code>‏class</code> بدلًا من ذلك، لذا يُمكِن استخدام التّابع <code>‎.addClass()</code>‎ مع مستندات XML أو SVG.
 
تغيّر هذا السّلوك بدءًا من إصدار jQuery 1.12/2.2 لتحسين الدّعم لمستندات XML وتضمين مستندات SVG أيضًا. وبدءًا من هذا الإصدار استُخدِمَت خاصيّة HTML <code>‏class</code> بدلًا من ذلك، لذا يُمكِن استخدام التّابع <code>‎.addClass()</code>‎ مع مستندات XML أو SVG.
  
−
من الممكن إضافة أكثر من صنف في نفس الوقت، مفصولةً بمسافة بينها، إلى مجموعة العناصر المُطابقة كما يلي:
+
من الممكن إضافة أكثر من صنف في نفس الوقت، مفصولةً بمسافة بينها، إلى مجموعة العناصر المُطابقة كما يلي:<syntaxhighlight lang="javascript">
 +
$( "p" ).addClass( "myClass yourClass" );
 +
</syntaxhighlight>يُستَخدَم هذا التّابع عادةً مع التّابع <code>[[jQuery/removeClass|‎.removeClass()]]</code>‎ للتبديل بين أصناف العناصر من صنف إلى آخر، كما يلي:<syntaxhighlight lang="javascript">
 +
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
 +
 
 +
</syntaxhighlight>أُزيل هنا الصّنفان <code>myClass</code> و <code>noClass</code> من كل الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code> وأُضيف الصّنف <code>yourClass</code>.
 +
 
 +
بدءًا من إصدار jQuery 1.4 أصبح التّابع <code>‎.addClass()</code>‎ قادرًا على استقبال دالة كوسيط:<syntaxhighlight lang="javascript">
 +
$( "ul li" ).addClass(function( index ) {
 +
  return "item-" + index;
 +
});
 +
</syntaxhighlight>انطلاقًا من قائمة غير مُرتّبة تحتوي على عنصري <code>[[HTML/li|<nowiki><li></nowiki>]]</code> يُضيف هذا المثال الصّنف <code>‎"item-0"</code>‎ لعنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> الأول و ‎<code>"item-1"</code>‎ للعنصر الثاني .
 +
 
 +
=== أمثلة ===
 +
إضافة الصّنف <code>‎"selected"</code>‎ للعناصر المُطابقة:<syntaxhighlight lang="html">
 +
<!doctype html>
 +
<html lang="en">
 +
<head>
 +
  <meta charset="utf-8">
 +
  <title>addClass مثال عن التابع</title>
 +
  <style>
 +
  p {
 +
    margin: 8px;
 +
    font-size: 16px;
 +
  }
 +
  .selected {
 +
    color: blue;
 +
  }
 +
  .highlight {
 +
    background: yellow;
 +
  }
 +
  </style>
 +
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 +
</head>
 +
<body>
 +
 +
<p>مرحبًا</p>
 +
<p>و</p>
 +
<p>وداعًا</p>
 +
 +
<script>
 +
$( "p" ).last().addClass( "selected" );
 +
</script>
 +
 +
</body>
 +
</html>
 +
 
 +
</syntaxhighlight>إضافة الأصناف <code>‎"selected"‎</code> و <code>‎"highlight"</code>‎ للعناصر المُطابقة:<syntaxhighlight lang="html">
 +
<!doctype html>
 +
<html lang="en">
 +
<head>
 +
  <meta charset="utf-8">
 +
  <title>addClass مثال عن التابع</title>
 +
  <style>
 +
  p {
 +
    margin: 8px;
 +
    font-size: 16px;
 +
  }
 +
  .selected {
 +
    color: red;
 +
  }
 +
  .highlight {
 +
    background: yellow;
 +
  }
 +
  </style>
 +
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 +
</head>
 +
<body>
 +
 +
<p>مرحبًا</p>
 +
<p>و</p>
 +
<p>وداعًا</p>
 +
 +
<script>
 +
$( "p:last" ).addClass( "selected highlight" );
 +
</script>
 +
 +
</body>
 +
</html>
 +
 
 +
</syntaxhighlight>تمرير دالة إلى التّابع ‎<code>.addClass()‎</code> لإضافة الصّنف <code>‎"green"‎</code> إلى عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> يملك مسبقًا الصّنف‎<code>"red"</code> ‎:<syntaxhighlight lang="html">
 +
<!doctype html>
 +
<html lang="en">
 +
<head>
 +
  <meta charset="utf-8">
 +
  <title>addClass مثال عن التابع</title>
 +
  <style>
 +
  div {
 +
    background: white;
 +
  }
 +
  .red {
 +
    background: red;
 +
  }
 +
  .red.green {
 +
    background: green;
 +
  }
 +
  </style>
 +
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 +
</head>
 +
<body>
 +
 +
<div>يجب أن يكون هذا العنصر أبيض</div>
 +
<div class="red">سيكون هذا العنصر أخضر لأنه يمتلك الصنفين green و red
 +
  سيكون أحمرًا إن فشل تنفيذ التابع addClass</div>
 +
<div>يجب أن يكون هذا العنصر أبيض</div>
 +
<p>لا يوجد هنا أي عنصر div أخضر</p>
 +
 +
<script>
 +
$( "div" ).addClass(function( index, currentClass ) {
 +
  var addedClass;
 +
 +
  if ( currentClass === "red" ) {
 +
    addedClass = "green";
 +
    $( "p" ).text( "هنالك عنصر div أخضر وحيد" );
 +
  }
 +
 +
  return addedClass;
 +
});
 +
</script>
 +
 +
</body>
 +
</html>
 +
 
 +
</syntaxhighlight>
 +
 
 +
== مصادر ==
 +
* [http://api.jquery.com/addClass/ صفحة التابع ‎.addClass()‎ في توثيق jQuery الرسمي].
 +
[[تصنيف:jQuery]]
 +
[[تصنيف:jQuery Method]]
 +
[[تصنيف:jQuery Manipulation]]
 +
[[تصنيف:jQuery Attributes]]

المراجعة الحالية بتاريخ 23:31، 1 يونيو 2018

‎.addClass( className )‎

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

كائن jQuery.

الوصف

يُستخدَم التّابع ‎.addClass()‎ لإضافة الصّنف أو الأصناف المُحدَّدة لكل عنصر من مجموعة العناصر المُطابقة.

‎.addClass( className )‎

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

className

سلسلة نصيّة من الكائن String، وتُمثِّل صنف أو عدة أصناف مفصولة بمسافة بينها لإضافتها إلى الخاصيّة class لكل عنصر مُطابق.

‎.addClass( function )‎

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

Function

دالة على الشكل Function( Integer index, String currentClassName )‎ وتُعيد سلسلة نصيّة.

دالة تُعيد اسم أو عدة أسماء لأصناف مفصولةً بمسافة بينها لإضافتها إلى اسم الصّنف أو أسماء الأصناف الموجودة. المعامل this يمثِّل العنصر الحالي. تستقبل فهرس موقع العنصر في المجموعة واسم أو أسماء الأصناف الموجودة كوسائط لها.

من المهم أن نلاحظ أن هذا التّابع لا يستبدل الصّنف الحالي، بل يضيفه ببساطة ملحقًا إياه بأي صنف معين مسبقًا للعناصر.

قبل إصدار jQuery 1.2/2.2 كان التّابع ‎.addClass()‎ يتحكم بخاصيّة الكائن className للعناصر المحدّدة وليس بخاصيّة HTML ‏class‏، وحالما تتغيّر خاصيّة الكائن يُحدِّث المتصفّح خاصيّة HTML وفق ذلك، وتفسير هذا السّلوك هو أنّ هذا التّابع كان يعمل فقط للمستندات ذات الصّياغة HTML DOM (أي ليس على مستندات XML الصَرفة [pure XML]).

تغيّر هذا السّلوك بدءًا من إصدار jQuery 1.12/2.2 لتحسين الدّعم لمستندات XML وتضمين مستندات SVG أيضًا. وبدءًا من هذا الإصدار استُخدِمَت خاصيّة HTML ‏class بدلًا من ذلك، لذا يُمكِن استخدام التّابع ‎.addClass()‎ مع مستندات XML أو SVG.

من الممكن إضافة أكثر من صنف في نفس الوقت، مفصولةً بمسافة بينها، إلى مجموعة العناصر المُطابقة كما يلي:

$( "p" ).addClass( "myClass yourClass" );

يُستَخدَم هذا التّابع عادةً مع التّابع ‎.removeClass()‎ للتبديل بين أصناف العناصر من صنف إلى آخر، كما يلي:

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

أُزيل هنا الصّنفان myClass و noClass من كل الفقرات <p> وأُضيف الصّنف yourClass. بدءًا من إصدار jQuery 1.4 أصبح التّابع ‎.addClass()‎ قادرًا على استقبال دالة كوسيط:

$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});

انطلاقًا من قائمة غير مُرتّبة تحتوي على عنصري <li> يُضيف هذا المثال الصّنف ‎"item-0"‎ لعنصر <li> الأول و ‎"item-1"‎ للعنصر الثاني .

أمثلة

إضافة الصّنف ‎"selected"‎ للعناصر المُطابقة:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass مثال عن التابع</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: blue;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>مرحبًا</p>
<p>و</p>
<p>وداعًا</p>
 
<script>
$( "p" ).last().addClass( "selected" );
</script>
 
</body>
</html>

إضافة الأصناف ‎"selected"‎ و ‎"highlight"‎ للعناصر المُطابقة:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass مثال عن التابع</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: red;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>مرحبًا</p>
<p>و</p>
<p>وداعًا</p>
 
<script>
$( "p:last" ).addClass( "selected highlight" );
</script>
 
</body>
</html>

تمرير دالة إلى التّابع ‎.addClass()‎ لإضافة الصّنف ‎"green"‎ إلى عنصر <div> يملك مسبقًا الصّنف‎"red" ‎:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass مثال عن التابع</title>
  <style>
  div {
    background: white;
  }
  .red {
    background: red;
  }
  .red.green {
    background: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
 <div>يجب أن يكون هذا العنصر أبيض</div>
 <div class="red">سيكون هذا العنصر أخضر لأنه يمتلك الصنفين green و red
   سيكون أحمرًا إن فشل تنفيذ التابع addClass</div>
 <div>يجب أن يكون هذا العنصر أبيض</div>
 <p>لا يوجد هنا أي عنصر div أخضر</p>
 
<script>
$( "div" ).addClass(function( index, currentClass ) {
  var addedClass;
 
  if ( currentClass === "red" ) {
    addedClass = "green";
    $( "p" ).text( "هنالك عنصر div أخضر وحيد" );
  }
 
  return addedClass;
});
</script>
 
</body>
</html>

مصادر

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