الفرق بين المراجعتين لصفحة: «jQuery/hasClass»
< jQuery
جميل-بيلوني (نقاش | مساهمات) هذه الصفحة من مساهمات عدنان أمزيان. |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة) | |||
| سطر 3: | سطر 3: | ||
=== القيم المعادة === | === القيم المعادة === | ||
يعيد قيمة منطقية Boolean. | يعيد قيمة منطقية [[JavaScript/Boolean|Boolean]]. | ||
=== الوصف === | === الوصف === | ||
| سطر 16: | سطر 16: | ||
يمكن إسناد أكثر من صنف إلى العناصر. نعبر عن هذا في [[HTML]] بفصل أسماء الأصناف بمسافة فارغة:<syntaxhighlight lang="html"> | يمكن إسناد أكثر من صنف إلى العناصر. نعبر عن هذا في [[HTML]] بفصل أسماء الأصناف بمسافة فارغة:<syntaxhighlight lang="html"> | ||
<div id="mydiv" class="foo bar"></div> | <div id="mydiv" class="foo bar"></div> | ||
</syntaxhighlight>سيعيد التابع <code>.hasClass()</code> القيمة <code>true</code> إذا كان الصنف المبحوث عنه مسندًا إلى العنصر المحدد حتى إن كان هذا العنصر يمتلك أصنافًا أخرى. إذا طبقنا الشيفرة التالية مثلًا على عنصر [[HTML]] السابق، فسيعيد التابع القيمة <code>true</code>:<syntaxhighlight lang=" | </syntaxhighlight>سيعيد التابع <code>.hasClass()</code> القيمة <code>true</code> إذا كان الصنف المبحوث عنه مسندًا إلى العنصر المحدد حتى إن كان هذا العنصر يمتلك أصنافًا أخرى. إذا طبقنا الشيفرة التالية مثلًا على عنصر [[HTML]] السابق، فسيعيد التابع القيمة <code>true</code>:<syntaxhighlight lang="javascript"> | ||
$( "#mydiv" ).hasClass( "foo" ) | $( "#mydiv" ).hasClass( "foo" ) | ||
</syntaxhighlight>كما سيعيد <code>true</code> في الشيفرة الآتية: <syntaxhighlight lang=" | </syntaxhighlight>كما سيعيد <code>true</code> في الشيفرة الآتية: <syntaxhighlight lang="javascript"> | ||
$( "#mydiv" ).hasClass( "bar" ) | $( "#mydiv" ).hasClass( "bar" ) | ||
</syntaxhighlight>بينما ستُعاد القيمة <code>false</code> في الشيفرة التالية:<syntaxhighlight lang=" | </syntaxhighlight>بينما ستُعاد القيمة <code>false</code> في الشيفرة التالية:<syntaxhighlight lang="javascript"> | ||
$( "#mydiv" ).hasClass( "quux" ) | $( "#mydiv" ).hasClass( "quux" ) | ||
</syntaxhighlight>أصبح هذا التابع يدعم صفحات | </syntaxhighlight>أصبح هذا التابع يدعم صفحات XML بدءًا من إصدار jQuery 1.12/2.2 بما فيها SVG. | ||
=== أمثلة === | === أمثلة === | ||
البحث عن الفقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code> التي تحتوي على الصنف "selected":<syntaxhighlight lang="html"> | البحث عن الفقرة <code>[[HTML/p|<nowiki><p></nowiki>]]</code> التي تحتوي على الصنف <code>"selected"</code>:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 58: | سطر 58: | ||
= مصادر = | = مصادر = | ||
* [http://api.jquery.com/hasClass/ صفحة التابع .hasClass() في توثيق jQuery الرسمي.] | * [http://api.jquery.com/hasClass/ صفحة التابع .hasClass() في توثيق jQuery الرسمي.] | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery | [[تصنيف:jQuery Attributes]] | ||
[[تصنيف:jQuery Manipulation]] | |||
المراجعة الحالية بتاريخ 08:09، 5 يونيو 2018
.hasClass( className )
القيم المعادة
يعيد قيمة منطقية Boolean.
الوصف
حدد إن كانت العناصر التي اختيرت سابقًا تمتلك صنفًا معينًا أم لا.
.hasClass( className )
أُضيف مع الإصدار: 1.2.
className
سلسلة نصية تمثل اسم الصنف المراد البحث عنه.
يمكن إسناد أكثر من صنف إلى العناصر. نعبر عن هذا في HTML بفصل أسماء الأصناف بمسافة فارغة:
<div id="mydiv" class="foo bar"></div>
سيعيد التابع .hasClass() القيمة true إذا كان الصنف المبحوث عنه مسندًا إلى العنصر المحدد حتى إن كان هذا العنصر يمتلك أصنافًا أخرى. إذا طبقنا الشيفرة التالية مثلًا على عنصر HTML السابق، فسيعيد التابع القيمة true:
$( "#mydiv" ).hasClass( "foo" )
كما سيعيد true في الشيفرة الآتية:
$( "#mydiv" ).hasClass( "bar" )
بينما ستُعاد القيمة false في الشيفرة التالية:
$( "#mydiv" ).hasClass( "quux" )
أصبح هذا التابع يدعم صفحات XML بدءًا من إصدار jQuery 1.12/2.2 بما فيها SVG.
أمثلة
البحث عن الفقرة <p> التي تحتوي على الصنف "selected":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hasClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>This paragraph is black and is the first paragraph.</p>
<p class="selected">This paragraph is red and is the second paragraph.</p>
<div id="result1">First paragraph has selected class: </div>
<div id="result2">Second paragraph has selected class: </div>
<div id="result3">At least one paragraph has selected class: </div>
<script>
$( "#result1" ).append( $( "p:first" ).hasClass( "selected" ).toString() );
$( "#result2" ).append( $( "p:last" ).hasClass( "selected" ).toString() );
$( "#result3" ).append( $( "p" ).hasClass( "selected" ).toString() ) ;
</script>
</body>
</html>