الفرق بين المراجعتين ل"jQuery/button selector"
< jQuery
اذهب إلى التنقل
اذهب إلى البحث
Kinan-mawed (نقاش | مساهمات) |
|||
(3 مراجعات متوسطة بواسطة مستخدم واحد آخر غير معروضة) | |||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المحدد <code>:button</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:المحدد <code>:button</code> في jQuery}}</noinclude> | ||
− | |||
== المحدد <code>:button</code> == | == المحدد <code>:button</code> == | ||
سطر 12: | سطر 11: | ||
=== ملاحظات إضافيّة=== | === ملاحظات إضافيّة=== | ||
− | *لمّا كان <code>:button</code> عبارة عن امتداد jQuery | + | *لمّا كان <code>:button</code> عبارة عن امتداد jQuery وليس جزءًا من مواصفات CSS، فلن تستفيد الاستعلامات التي تستخدم <code>:button</code> من زيادة الأداء المُقدَّمة عن طريق التّابع <code>[[JavaScript/Document/querySelectorAll|querySelectorAll()]]</code> الأصلي في DOM، وللحصول على أداء أفضل في المتصفحات الحديثة عند استخدام <code>:button</code> لتحديد العناصر، اختر أولًا العناصر باستخدام مُحدِّد CSS النقي ثم استخدم <code>[[jQuery/filter|.filter(":button")]]</code>. |
=== أمثلة === | === أمثلة === | ||
− | إيجاد كافّة عناصر <code>[[HTML/input|<input>]]</code> من النوع <code>button</code> وتحديدها: | + | إيجاد كافّة عناصر <code>[[HTML/input|<input>]]</code> من النوع <code>button</code> وتحديدها:<syntaxhighlight lang="html"> |
+ | <!doctype html> | ||
+ | <html lang="en"> | ||
+ | <head> | ||
+ | <meta charset="utf-8"> | ||
+ | <title>مثال عن المحدد button</title> | ||
+ | <style> | ||
+ | textarea { | ||
+ | height: 35px; | ||
+ | } | ||
+ | div { | ||
+ | color: red; | ||
+ | } | ||
+ | fieldset { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border-width: 0; | ||
+ | } | ||
+ | .marked { | ||
+ | background-color: yellow; | ||
+ | border: 3px red solid; | ||
+ | } | ||
+ | </style> | ||
+ | <script src="https://code.jquery.com/jquery-1.10.2.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <form> | ||
+ | <fieldset> | ||
+ | <input type="button" value="Input Button"> | ||
+ | <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> | ||
+ | </fieldset> | ||
+ | </form> | ||
+ | |||
+ | <div></div> | ||
+ | |||
+ | <script> | ||
+ | var input = $( ":button" ).addClass( "marked" ); | ||
+ | $( "div" ).text( "وجدت بالنسبة لهذا النوع " + input.length + "عناصر." ); | ||
+ | // منع تقديم الطلب | ||
+ | $( "form" ).submit(function( event ) { | ||
+ | event.preventDefault(); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | </body> | ||
+ | </html> | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | ==مصادر== | ||
+ | *<span> </span>[http://api.jquery.com/button-selector/ صفحة المحدد :button في توثيق jQuery الرسمي]. | ||
+ | [[تصنيف:jQuery]] | ||
+ | [[تصنيف:jQuery Selectors]] |
المراجعة الحالية بتاريخ 08:46، 21 مايو 2018
المحدد :button
الوصف
يُحدِّد عناصر الأزرار <button>
والعناصر التي من نوع button
.
jQuery( ":button" )
أضيفت في الإصدار: 1.0.
المُحدِّد المُكافِئ لـ $( ":button" )
باستخدام CSS هو $( "button, input[type='button']" )
.
ملاحظات إضافيّة
- لمّا كان
:button
عبارة عن امتداد jQuery وليس جزءًا من مواصفات CSS، فلن تستفيد الاستعلامات التي تستخدم:button
من زيادة الأداء المُقدَّمة عن طريق التّابعquerySelectorAll()
الأصلي في DOM، وللحصول على أداء أفضل في المتصفحات الحديثة عند استخدام:button
لتحديد العناصر، اختر أولًا العناصر باستخدام مُحدِّد CSS النقي ثم استخدم .filter(":button")
.
أمثلة
إيجاد كافّة عناصر <input>
من النوع button
وتحديدها:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>مثال عن المحدد button</title>
<style>
textarea {
height: 35px;
}
div {
color: red;
}
fieldset {
margin: 0;
padding: 0;
border-width: 0;
}
.marked {
background-color: yellow;
border: 3px red solid;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form>
<fieldset>
<input type="button" value="Input Button">
<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>
</fieldset>
</form>
<div></div>
<script>
var input = $( ":button" ).addClass( "marked" );
$( "div" ).text( "وجدت بالنسبة لهذا النوع " + input.length + "عناصر." );
// منع تقديم الطلب
$( "form" ).submit(function( event ) {
event.preventDefault();
});
</script>
</body>
</html>