الفرق بين المراجعتين لصفحة: «jQuery/id selector»
جميل-بيلوني (نقاش | مساهمات) لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 11: | سطر 11: | ||
المعرف المراد البحث عنه، والذي يُمنح للعنصر عبر الخاصية <code>id</code>. | المعرف المراد البحث عنه، والذي يُمنح للعنصر عبر الخاصية <code>id</code>. | ||
تستعمل محددات المعرف (ID selectors) في مكتبة jQuery الدالة <code>document.getElementById()</code> في JavaScript. عندما يضاف محدد آخر لمحدد المعرف، مثل <code>h2#pageTitle</code>، فستتحقق jQuery مجددًا من العناصر بناءًا على المحدد المضاف قبل أن تختار العنصر المطابق. | تستعمل محددات المعرف (ID selectors) في مكتبة jQuery الدالة <code>[[JavaScript/Document/getElementById|document.getElementById()]]</code> في JavaScript. عندما يضاف محدد آخر لمحدد المعرف، مثل <code>h2#pageTitle</code>، فستتحقق jQuery مجددًا من العناصر بناءًا على المحدد المضاف قبل أن تختار العنصر المطابق. | ||
عند استدعاء <code>jQuery()</code> (أو <code>()$</code>) بتمرير المحدد id كمعامل، فستعيد كائنًا من النوع jQuery يحتوي على عنصر DOM واحد (في حالة وجود العنصر المبحوث عنه) أو لا يحتوى على أي عنصر (في حال عدم وجوده). | عند استدعاء <code>[[jQuery/jQuery|jQuery()]]</code> (أو <code>()$</code>) بتمرير المحدد id كمعامل، فستعيد كائنًا من النوع jQuery يحتوي على عنصر DOM واحد (في حالة وجود العنصر المبحوث عنه) أو لا يحتوى على أي عنصر (في حال عدم وجوده). | ||
يجب أن تكون قيمة الخاصية <code>id</code> فريدة ويجب استعمالها مرة واحدة في الصفحة. إن أُسند لعنصرين أو أكثر نفس قيمة المعرف <code>id</code>، فإن الاستعلامات التي تستعمل هذا المعرف ستختار أول عنصر مطابق من شجرة DOM. لا يجب الاعتماد على سلوك محدد المعرفات في هذه الحالة. مع ذلك، تُعدُّ الصفحة التي تحتوي على أكثر من عنصر له المعرف (id) ذاته صفحةً غير صالحة. | يجب أن تكون قيمة الخاصية <code>id</code> فريدة ويجب استعمالها مرة واحدة في الصفحة. إن أُسند لعنصرين أو أكثر نفس قيمة المعرف <code>id</code>، فإن الاستعلامات التي تستعمل هذا المعرف ستختار أول عنصر مطابق من شجرة DOM. لا يجب الاعتماد على سلوك محدد المعرفات في هذه الحالة. مع ذلك، تُعدُّ الصفحة التي تحتوي على أكثر من عنصر له المعرف (id) ذاته صفحةً غير صالحة. | ||
| سطر 20: | سطر 20: | ||
=== أمثلة === | === أمثلة === | ||
تحديد العنصر الذي يمتلك المعرف myDiv وإعطاءه إطارًا أحمر اللون:<syntaxhighlight lang="html"> | تحديد العنصر الذي يمتلك المعرف <code>myDiv</code> وإعطاءه إطارًا أحمر اللون:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 47: | سطر 47: | ||
</html> | </html> | ||
</syntaxhighlight>تحديد العنصر الذي يمتلك المعرف myID.entry[1] وإعطاءه إطارًا أحمر اللون. لاحظ أنه يجب تهريب بعض الرموز باستعمال المحرف <code>\</code>:<syntaxhighlight lang="html"> | </syntaxhighlight>تحديد العنصر الذي يمتلك المعرف <code>myID.entry[1]</code> وإعطاءه إطارًا أحمر اللون. لاحظ أنه يجب تهريب بعض الرموز باستعمال المحرف <code>\</code>:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
المراجعة الحالية بتاريخ 09:35، 29 مايو 2018
المحدد ID
الوصف
يختار هذا المحدد العنصر الذي يمتلك المعرف id المعطى.
jQuery( "#id" )
أضيف مع الإصدار: 1.0.
id
المعرف المراد البحث عنه، والذي يُمنح للعنصر عبر الخاصية id.
تستعمل محددات المعرف (ID selectors) في مكتبة jQuery الدالة document.getElementById() في JavaScript. عندما يضاف محدد آخر لمحدد المعرف، مثل h2#pageTitle، فستتحقق jQuery مجددًا من العناصر بناءًا على المحدد المضاف قبل أن تختار العنصر المطابق.
عند استدعاء jQuery() (أو ()$) بتمرير المحدد id كمعامل، فستعيد كائنًا من النوع jQuery يحتوي على عنصر DOM واحد (في حالة وجود العنصر المبحوث عنه) أو لا يحتوى على أي عنصر (في حال عدم وجوده).
يجب أن تكون قيمة الخاصية id فريدة ويجب استعمالها مرة واحدة في الصفحة. إن أُسند لعنصرين أو أكثر نفس قيمة المعرف id، فإن الاستعلامات التي تستعمل هذا المعرف ستختار أول عنصر مطابق من شجرة DOM. لا يجب الاعتماد على سلوك محدد المعرفات في هذه الحالة. مع ذلك، تُعدُّ الصفحة التي تحتوي على أكثر من عنصر له المعرف (id) ذاته صفحةً غير صالحة.
إن احتوى المعرف (id) على رموز مثل . أو :، فيجب إضافة المحرف \ قبل هذه الرموز لتجنب أي فهم خطأ لها من قبل jQuery.
أمثلة
تحديد العنصر الذي يمتلك المعرف myDiv وإعطاءه إطارًا أحمر اللون:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>id demo</title>
<style>
div {
width: 90px;
height: 90px;
float: left;
padding: 5px;
margin: 5px;
background-color: #eee;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
<script>
$( "#myDiv" ).css( "border", "3px solid red" );
</script>
</body>
</html>
تحديد العنصر الذي يمتلك المعرف myID.entry[1] وإعطاءه إطارًا أحمر اللون. لاحظ أنه يجب تهريب بعض الرموز باستعمال المحرف \:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>id demo</title>
<style>
div {
width: 300px;
float: left;
padding: 2px;
margin: 3px;
background-color: #eee;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="myID.entry[0]">id="myID.entry[0]"</div>
<div id="myID.entry[1]">id="myID.entry[1]"</div>
<div id="myID.entry[2]">id="myID.entry[2]"</div>
<script>
$( "#myID\\.entry\\[1\\]" ).css( "border", "3px solid red" );
</script>
</body>
</html>