المحدد ID ("#id") في jQuery
المحدد 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>