الفرق بين المراجعتين لصفحة: «jQuery/descendant selector»
< jQuery
لا ملخص تعديل |
Khaled-yassin (نقاش | مساهمات) لا ملخص تعديل |
||
| (مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:محدد العناصر السليلة | <noinclude>{{DISPLAYTITLE:محدد العناصر السليلة في jQuery}}</noinclude> | ||
== محدد العناصر السليلة | == محدد العناصر السليلة ("ancestor descendant") == | ||
=== الوصف === | === الوصف === | ||
| سطر 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> | ||
| سطر 67: | سطر 66: | ||
[http://api.jquery.com/descendant-selector/ صفحة Descendant Selector في توثيق jQuery الرسمي]. | [http://api.jquery.com/descendant-selector/ صفحة Descendant Selector في توثيق jQuery الرسمي]. | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Selectors]] | [[تصنيف: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>