الفرق بين المراجعتين لصفحة: «jQuery/class selector»
< jQuery
Kinan-mawed (نقاش | مساهمات) أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:محدد الأصناف <code>".class"</code> في jQuery}}</noinclude>' |
لا ملخص تعديل |
||
| (5 مراجعات متوسطة بواسطة مستخدم واحد آخر غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:محدد الأصناف <code>".class"</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:محدد الأصناف <code>".class"</code> في jQuery}}</noinclude> | ||
== محدد الأصناف == | |||
=== الوصف === | |||
يُستخدَم مُحدِّد الأصناف في تحديد كافّة العناصر التي تمتلك الصّنف المُعطَى. | |||
=== <code>jQuery( ".class" )</code> === | |||
أضيفت في الإصدار: 1.0. | |||
==== <code>class</code> ==== | |||
الصّنف المطلوب البحث عنه. يُمكِن للعنصر أن يمتلك عدّة أصناف، يجب أن يتطابق واحد منها فقط مع هذه القيمة. | |||
تستخدم jQuery لأجل مُحدِّدات الأصناف الدالة <code>[[JavaScript/Document/getElementsByClassName|getElementsByClassName()]]</code> الأصليّة في JavaScript إن كان المتصفّح يدعمها. | |||
=== أمثلة === | |||
إيجاد العنصر الذي يمتلك الصّنف <code>myClass</code>:<syntaxhighlight lang="html"> | |||
<!doctype html> | |||
<html lang="en"> | |||
<head> | |||
<meta charset="utf-8"> | |||
<title>class مثال عن المحدد</title> | |||
<style> | |||
div, span { | |||
width: 120px; | |||
height: 40px; | |||
float: left; | |||
padding: 10px; | |||
margin: 10px; | |||
background-color: #EEEEEE; | |||
} | |||
</style> | |||
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> | |||
</head> | |||
<body> | |||
<div class="notMe">عنصر div ذو الصنف "notMe"</div> | |||
<div class="myClass">عنصر div ذو الصنف "myClass"</div> | |||
<span class="myClass">عنصر span ذو الصنف "myClass"</span> | |||
<script> | |||
$( ".myClass" ).css( "border", "3px solid red" ); | |||
</script> | |||
</body> | |||
</html> | |||
</syntaxhighlight>إيجاد العنصر الذي يمتلك الصّنفين <code>myClass</code> و <code>otherclass</code> معًا:<syntaxhighlight lang="html"> | |||
<!doctype html> | |||
<html lang="en"> | |||
<head> | |||
<meta charset="utf-8"> | |||
<title>class مثال عن المحدد</title> | |||
<style> | |||
div, span { | |||
width: 120px; | |||
height: 40px; | |||
float: left; | |||
padding: 10px; | |||
margin: 10px; | |||
background-color: #EEEEEE; | |||
} | |||
</style> | |||
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> | |||
</head> | |||
<body> | |||
<div class="notMe">عنصر div ذو الصنف "notMe"</div> | |||
<div class="myClass otherclass">عنصر div ذو الصنف "myClass"</div> | |||
<span class="myClass otherclass">عنصر span ذو الصنف "myClass"</span> | |||
<script> | |||
$( ".myclass.otherclass" ).css( "border", "13px solid red" ); | |||
</script> | |||
</body> | |||
</html> | |||
</syntaxhighlight> | |||
==<span>مصادر</span>== | |||
*<span>[http://api.jquery.com/class-selector/ صفحة محدد الأصناف ".class" في توثيق jQuery الرسمي].</span> | |||
[[تصنيف:jQuery]] | |||
[[تصنيف:jQuery Selectors]] | |||
المراجعة الحالية بتاريخ 06:55، 28 مايو 2018
محدد الأصناف
الوصف
يُستخدَم مُحدِّد الأصناف في تحديد كافّة العناصر التي تمتلك الصّنف المُعطَى.
jQuery( ".class" )
أضيفت في الإصدار: 1.0.
class
الصّنف المطلوب البحث عنه. يُمكِن للعنصر أن يمتلك عدّة أصناف، يجب أن يتطابق واحد منها فقط مع هذه القيمة.
تستخدم jQuery لأجل مُحدِّدات الأصناف الدالة getElementsByClassName() الأصليّة في JavaScript إن كان المتصفّح يدعمها.
أمثلة
إيجاد العنصر الذي يمتلك الصّنف myClass:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>class مثال عن المحدد</title>
<style>
div, span {
width: 120px;
height: 40px;
float: left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="notMe">عنصر div ذو الصنف "notMe"</div>
<div class="myClass">عنصر div ذو الصنف "myClass"</div>
<span class="myClass">عنصر span ذو الصنف "myClass"</span>
<script>
$( ".myClass" ).css( "border", "3px solid red" );
</script>
</body>
</html>
إيجاد العنصر الذي يمتلك الصّنفين myClass و otherclass معًا:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>class مثال عن المحدد</title>
<style>
div, span {
width: 120px;
height: 40px;
float: left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="notMe">عنصر div ذو الصنف "notMe"</div>
<div class="myClass otherclass">عنصر div ذو الصنف "myClass"</div>
<span class="myClass otherclass">عنصر span ذو الصنف "myClass"</span>
<script>
$( ".myclass.otherclass" ).css( "border", "13px solid red" );
</script>
</body>
</html>