الفرق بين المراجعتين لصفحة: «jQuery/descendant selector»
< jQuery
Khaled-yassin (نقاش | مساهمات) طلا ملخص تعديل |
Khaled-yassin (نقاش | مساهمات) لا ملخص تعديل |
||
| (9 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: | <noinclude>{{DISPLAYTITLE:محدد العناصر السليلة في jQuery}}</noinclude> | ||
== | == محدد العناصر السليلة ("ancestor descendant") == | ||
=== الوصف === | === الوصف === | ||
يُحدِد جميع العناصر التي تنتمي إلى سلف معين. | |||
=== <code>jQuery( "ancestor descendant" )</code> === | === <code>jQuery( "ancestor descendant" )</code> === | ||
| سطر 12: | سطر 12: | ||
==== <code>Descendant</code> ==== | ==== <code>Descendant</code> ==== | ||
محدد لتصفية العناصر | محدد لتصفية العناصر السليلة. | ||
يمكن أن يكون | يمكن أن يكون سليل عنصرٍ ما هو إبن هذا العنصر، أو حفيده، أو ابن الحفيد، وهكذا. | ||
=== أمثلة === | === أمثلة === | ||
تنسيق كافة حقول الإدخال <code>[[HTML/input|<input>]]</code> السليلة من نموذج <code>[[HTML/form|<form>]]</code> بإضافة إطارٍ ذي لونٍ أزرق ونمط خطه منقط. وإعطاء خلفية صفراء لحقول الإدخال <code>[[HTML/input|<input>]]</code> السليلة من مجموعة حقول <code>[[HTML/fieldset|<fieldset>]]</code> سليلة من نموذج <code>[[HTML/form|<form>]]</code>:<syntaxhighlight lang="html"> | |||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 43: | سطر 43: | ||
<form> | <form> | ||
<div> | <div>النموذج محاط بإطار أخضر.</div> | ||
<label for="name"> | <label for="name">إبن النموذج:</label> | ||
<input name="name" id="name"> | <input name="name" id="name"> | ||
<fieldset> | <fieldset> | ||
<label for="newsletter"> | <label for="newsletter">ابن ابن النموذج، ابن عنصر fieldset:</label> | ||
<input name="newsletter" id="newsletter"> | <input name="newsletter" id="newsletter"> | ||
</fieldset> | </fieldset> | ||
</form> | </form>مثيل النموذج: <input name="none"> | ||
<script> | <script> | ||
| سطر 65: | سطر 64: | ||
== مصادر == | == مصادر == | ||
[http://api.jquery.com/descendant-selector/ صفحة | [http://api.jquery.com/descendant-selector/ صفحة Descendant Selector في توثيق jQuery الرسمي]. | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Selectors]] | |||
المراجعة الحالية بتاريخ 14:10، 5 يونيو 2018
محدد العناصر السليلة ("ancestor descendant")
الوصف
يُحدِد جميع العناصر التي تنتمي إلى سلف معين.
jQuery( "ancestor descendant" )
أُضيف مع الإصدار: 1.0.
ancestor
أي مُحدِد صالح.
Descendant
محدد لتصفية العناصر السليلة.
يمكن أن يكون سليل عنصرٍ ما هو إبن هذا العنصر، أو حفيده، أو ابن الحفيد، وهكذا.
أمثلة
تنسيق كافة حقول الإدخال <input> السليلة من نموذج <form> بإضافة إطارٍ ذي لونٍ أزرق ونمط خطه منقط. وإعطاء خلفية صفراء لحقول الإدخال <input> السليلة من مجموعة حقول <fieldset> سليلة من نموذج <form>:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>descendant demo</title>
<style>
form {
border: 2px green solid;
padding: 2px;
margin: 0;
background: #efe;
}
div {
color: red;
}
fieldset {
margin: 1px;
padding: 3px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form>
<div>النموذج محاط بإطار أخضر.</div>
<label for="name">إبن النموذج:</label>
<input name="name" id="name">
<fieldset>
<label for="newsletter">ابن ابن النموذج، ابن عنصر fieldset:</label>
<input name="newsletter" id="newsletter">
</fieldset>
</form>مثيل النموذج: <input name="none">
<script>
$( "form input" ).css( "border", "2px dotted blue" );
$( "form fieldset input" ).css( "backgroundColor", "yellow" );
</script>
</body>
</html>