الفرق بين المراجعتين لصفحة: «jQuery/checkbox selector»
< jQuery
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
||
| سطر 10: | سطر 10: | ||
يُكافِئ التعبير <code>$( ":checkbox" )</code> استخدام <code>$( "[type=checkbox]" )</code>. وكما هو الحال مع مُحدِّدات الأصناف الزائفة (تلك التي تبدأ بـ "<code>:</code>") فمن المفضّل أن نسبقها باسم العنصر أو أي مُحدِّد آخر وإلّا سيُطبَّق المُحدِّد العام (universal selector). أي بمعنى آخر تُكافِئ <code>$( ':checkbox' )</code> كتابة <code>$( "*:checkbox" )</code> لذلك يجب استخدام <code>$("input:checkbox")</code> بدلًا من ذلك. | يُكافِئ التعبير <code>$( ":checkbox" )</code> استخدام <code>$( "[type=checkbox]" )</code>. وكما هو الحال مع مُحدِّدات الأصناف الزائفة (تلك التي تبدأ بـ "<code>:</code>") فمن المفضّل أن نسبقها باسم العنصر أو أي مُحدِّد آخر وإلّا سيُطبَّق المُحدِّد العام (universal selector). أي بمعنى آخر تُكافِئ <code>$( ':checkbox' )</code> كتابة <code>$( "*:checkbox" )</code> لذلك يجب استخدام <code>$("input:checkbox")</code> بدلًا من ذلك. | ||
=== ملاحظات إضافيّة=== | |||
*لمّا كان <code>:checkbox</code> عبارة عن امتداد jQuery وليس جزءًا من مواصفات CSS، فلن تستفيد الاستعلامات التي تستخدم <code>:checkbox</code> من زيادة الأداء المُقدَّمة عن طريق التّابع <code>querySelectorAll()</code> الأصلي في DOM، وللحصول على أداء أفضل في المتصفحات الحديثة استخدم <code>[type="checkbox"]</code> بدلًا من ذلك. | |||
=== أمثلة === | |||
إيجاد كافّة مربّعات التأشير:<syntaxhighlight lang="html"> | |||
<!doctype html> | |||
<html lang="en"> | |||
<head> | |||
<meta charset="utf-8"> | |||
<title>مثال عن المحدد checkbox</title> | |||
<style> | |||
textarea { | |||
height: 25px; | |||
} | |||
</style> | |||
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> | |||
</head> | |||
<body> | |||
<form> | |||
<input type="button" value="زر إدخال"> | |||
<input type="checkbox"> | |||
<input type="checkbox"> | |||
<input type="file"> | |||
<input type="hidden"> | |||
<input type="image"> | |||
<input type="password"> | |||
<input type="radio"> | |||
<input type="reset"> | |||
<input type="submit"> | |||
<input type="text"> | |||
<select> | |||
<option>خيار</option> | |||
</select> | |||
<textarea></textarea> | |||
<button>زر</button> | |||
</form> | |||
<div></div> | |||
<script> | |||
var input = $( "form input:checkbox" ) | |||
.wrap( "<span></span>" ) | |||
.parent() | |||
.css({ | |||
background: "yellow", | |||
border: "3px red solid" | |||
}); | |||
$( "div" ) | |||
.text( "بالنسبة لهذا النوع وجد " + input.length + "عنصر." ) | |||
.css( "color", "red" ); | |||
// منع تقديم الطلب | |||
$( "form" ).submit(function( event ) { | |||
event.preventDefault(); | |||
}); | |||
</script> | |||
</body> | |||
</html> | |||
</syntaxhighlight> | |||
مراجعة 13:24، 23 مايو 2018
المحدد :checkbox
الوصف
يُستخدَم المُحدِّد :checkbox في تحديد جميع العناصر ذات النوع مربّع تأشير (checkbox).
jQuery( ":checkbox" )
أضيفت في الإصدار: 1.0.
يُكافِئ التعبير $( ":checkbox" ) استخدام $( "[type=checkbox]" ). وكما هو الحال مع مُحدِّدات الأصناف الزائفة (تلك التي تبدأ بـ ":") فمن المفضّل أن نسبقها باسم العنصر أو أي مُحدِّد آخر وإلّا سيُطبَّق المُحدِّد العام (universal selector). أي بمعنى آخر تُكافِئ $( ':checkbox' ) كتابة $( "*:checkbox" ) لذلك يجب استخدام $("input:checkbox") بدلًا من ذلك.
ملاحظات إضافيّة
- لمّا كان
:checkboxعبارة عن امتداد jQuery وليس جزءًا من مواصفات CSS، فلن تستفيد الاستعلامات التي تستخدم:checkboxمن زيادة الأداء المُقدَّمة عن طريق التّابعquerySelectorAll()الأصلي في DOM، وللحصول على أداء أفضل في المتصفحات الحديثة استخدم[type="checkbox"] بدلًا من ذلك.
أمثلة
إيجاد كافّة مربّعات التأشير:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>مثال عن المحدد checkbox</title>
<style>
textarea {
height: 25px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form>
<input type="button" value="زر إدخال">
<input type="checkbox">
<input type="checkbox">
<input type="file">
<input type="hidden">
<input type="image">
<input type="password">
<input type="radio">
<input type="reset">
<input type="submit">
<input type="text">
<select>
<option>خيار</option>
</select>
<textarea></textarea>
<button>زر</button>
</form>
<div></div>
<script>
var input = $( "form input:checkbox" )
.wrap( "<span></span>" )
.parent()
.css({
background: "yellow",
border: "3px red solid"
});
$( "div" )
.text( "بالنسبة لهذا النوع وجد " + input.length + "عنصر." )
.css( "color", "red" );
// منع تقديم الطلب
$( "form" ).submit(function( event ) {
event.preventDefault();
});
</script>
</body>
</html>