الفرق بين المراجعتين ل"jQuery/checkbox selector"
< jQuery
اذهب إلى التنقل
اذهب إلى البحث
Kinan-mawed (نقاش | مساهمات) |
Kinan-mawed (نقاش | مساهمات) |
||
(3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المحدد <code>:checkbox</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:المحدد <code>:checkbox</code> في jQuery}}</noinclude> | ||
− | |||
== المحدد <code>:checkbox</code> == | == المحدد <code>:checkbox</code> == | ||
سطر 9: | سطر 8: | ||
أضيفت في الإصدار: 1.0. | أضيفت في الإصدار: 1.0. | ||
− | يُكافِئ التعبير <code>$( ":checkbox" )</code> استخدام <code>$( "[type=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> | ||
+ | ==مصادر== | ||
+ | *<span> </span>[http://api.jquery.com/checkbox-selector/ صفحة المحدد :checkbox في توثيق jQuery الرسمي]. | ||
+ | [[تصنيف:jQuery]] | ||
+ | [[تصنيف:jQuery Selectors]] |
المراجعة الحالية بتاريخ 13:26، 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>