الفرق بين المراجعتين ل"jQuery/button selector"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:المحدد <code>‎‎‎:button‎</code>‎ في jQuery}}</noinclude>')
 
 
(4 مراجعات متوسطة بواسطة مستخدم واحد آخر غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:المحدد <code>‎‎‎:button‎</code>‎ في jQuery}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:المحدد <code>‎‎‎:button‎</code>‎ في jQuery}}</noinclude>
 +
== المحدد <code>‎‎:button</code> ==
 +
 +
===الوصف===
 +
يُحدِّد عناصر الأزرار <code>[[HTML/button|<button>]]</code> والعناصر التي من نوع <code>button</code>.
 +
 +
=== <code>‎jQuery( ":button" )‎</code> ===
 +
أضيفت في الإصدار: 1.0.
 +
 +
المُحدِّد المُكافِئ لـ ‎<code>$( ":button" )‎</code> باستخدام CSS هو ‎<code>$( "button, input[type='button']" )‎</code>.
 +
 +
=== ملاحظات إضافيّة===
 +
*لمّا كان <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> وتحديدها:<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>

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=jQuery/button_selector&oldid=8865"