الفرق بين المراجعتين لصفحة: «jQuery/submit selector»
لا ملخص تعديل |
|||
سطر 3: | سطر 3: | ||
=== الوصف === | === الوصف === | ||
يحدِّد جميع عناصر الإدخال ذات النوع | يحدِّد جميع عناصر الإدخال ذات النوع [[HTML/input/submit|submit]]. | ||
=== <code>jQuery( ":submit" )</code> === | === <code>jQuery( ":submit" )</code> === | ||
أضيف مع الإصدار [http://api.jquery.com/category/version/1.0/ 1.0]. | أضيف مع الإصدار [http://api.jquery.com/category/version/1.0/ 1.0]. | ||
يُستعمَل المحدِّد <code>:submit</code> عادةً مع العناصر <code>[[HTML/input|<input>]]</code> أو <code>[[HTML/button|<button>]]</code>. انتبه إلى أنَّ بعض المتصفحات تعامل العنصر <code>[[HTML/button|<button>]]</code> على أنَّها من النوع | يُستعمَل المحدِّد <code>:submit</code> عادةً مع العناصر <code>[[HTML/input|<input>]]</code> أو <code>[[HTML/button|<button>]]</code>. انتبه إلى أنَّ بعض المتصفحات تعامل العنصر <code>[[HTML/button|<button>]]</code> على أنَّها من النوع [[HTML/input/submit|submit]] ضمنيًّا بينما لا تفعل متصفحات أخرى ذلك (مثل المتصفح Internet Explorer). إن أردت التأكد من عمل الشيفرة عبر جميع المتصفحات، وضمان تحديد العناصر <code>[[HTML/button|<button>]]</code> التي سترسل النموذج بشكل صحيح، فاستعمل الخاصِّيَّة <code>type</code> دومًا وحدِّد قيمتها. | ||
=== ملاحظات إضافية === | === ملاحظات إضافية === |
المراجعة الحالية بتاريخ 03:41، 18 يونيو 2018
المحدد submit:
الوصف
يحدِّد جميع عناصر الإدخال ذات النوع submit.
jQuery( ":submit" )
أضيف مع الإصدار 1.0.
يُستعمَل المحدِّد :submit
عادةً مع العناصر <input>
أو <button>
. انتبه إلى أنَّ بعض المتصفحات تعامل العنصر <button>
على أنَّها من النوع submit ضمنيًّا بينما لا تفعل متصفحات أخرى ذلك (مثل المتصفح Internet Explorer). إن أردت التأكد من عمل الشيفرة عبر جميع المتصفحات، وضمان تحديد العناصر <button>
التي سترسل النموذج بشكل صحيح، فاستعمل الخاصِّيَّة type
دومًا وحدِّد قيمتها.
ملاحظات إضافية
لمَّا كان المحدِّد :submit
هو ملحق في مكتبة jQuery وليس جزءًا من مواصفة CSS، فإنَّ الاستعلامات التي تستعمل :submit
لا يمكنها الاستفادة من سرعة الأداء الذي يوفره تابع DOM الأصلي querySelectorAll()
. للحصول على أداء أفضل في المتصفحات الحديثة، استعمل input[type="submit"]
أو button[type="submit"]
.
أمثلة
إيجاد جميع عناصر الإرسال التي تعد عناصر سليلة (descendants) من العنصر <td>
:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>submit مثالٌ عن استعمال المحدد</title>
<style>
textarea {
height: 45px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form>
<table id="exampleTable" border="1" cellpadding="10" align="center">
<tr>
<th>
نوع العنصر
</th>
<th>
العنصر
</th>
</tr>
<tr>
<td>
<input type="button" value="Input Button">
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>
<input type="file">
</td>
</tr>
<tr>
<td>
<input type="hidden">
</td>
</tr>
<tr>
<td>
<input type="image">
</td>
</tr>
<tr>
<td>
<input type="password">
</td>
</tr>
<tr>
<td>
<input type="radio">
</td>
</tr>
<tr>
<td>
<input type="reset">
</td>
</tr>
<tr>
<td>
<input type="submit">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<select><option>Option</option></select>
</td>
</tr>
<tr>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td>
<button>Button</button>
</td>
</tr>
<tr>
<td>
<button type="submit">Button type="submit"</button>
</td>
</tr>
</table>
</form>
<div id="result"></div>
<script>
var submitEl = $( "td :submit" )
.parent( "td" )
.css({
background: "yellow",
border: "3px red solid"
})
.end();
$( "#result" ).text( "jQuery matched " + submitEl.length + " elements." );
// منع إرسال النموذج
$( "form" ).submit(function( event ) {
event.preventDefault();
});
// مطلقًا :submit أسهل للتعديل، ولا تتعلق هذه الشيفرة بالمحدد HTML شيفرة إضافية لجعل
$( "#exampleTable" ).find( "td" ).each(function( i, el ) {
var inputEl = $( el ).children(),
inputType = inputEl.attr( "type" ) ? " type='" + inputEl.attr( "type" ) + "'" : "" ;
$( el ).before( "<td>" + inputEl[ 0 ].nodeName + inputType + "</td>" );
})
</script>
</body>
</html>