المحدد ‎‎‎:password‎‎ في jQuery

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

المحدد password:

الوصف

يحدِّد جميع عناصر الإدخال ذات النوع "password".

‎jQuery( ":password" )‎

أضيف مع الإصدار 1.0.

المحدِّد ‎$( ":password" )‎ يكافئ ‎$( "[type=password]" )‎. يفضَّل أن يُسبق هذا المحدِّد، كما في محدِّدات الصنف الزائف (pseudo-class selectors) التي تبدأ بنقطتين ":"، باسم وسمٍ (tag) أو محدِّد آخر وإلا سيُسبق بالمحدِّد العام "*" بشكل ضمني. بعبارة أخرى، استعمال المحدِّد بالشكل ‎$( ":password" )‎ يكافئ تمامًا ‎$( "*:password" )‎، لذا يجب استعمال ‎$( "input:password" )‎ مثلًا عوضًا عن ذلك.

ملاحظات إضافية

لمَّا كان المحدِّد ‎:password هو ملحق في مكتبة jQuery  وليس جزءًا من مواصفة CSS، فإنَّ الاستعلامات التي تستعمل ‎:password لا يمكنها الاستفادة من سرعة الأداء الذي يوفره تابع DOM الأصلي querySelectorAll()‎. للحصول على أداء أفضل في المتصفحات الحديثة، استعمل [type="password"‎].

أمثلة

إيجاد جميع العناصر <input> التي من النوع "password":

<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>password مثالٌ عن استعمال المحدد</title>
  <style>
  textarea {
    height: 45px;
  }
  </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="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 = $( "input:password" ).css({
  background: "yellow",
  border: "3px red solid"
});
$( "div" )
  .text( "For this type jQuery found " + input.length + "." )
  .css( "color", "red" );
 
// منع إرسال النموذج
$( "form" ).submit(function() {
  return false;
});
</script>
 
</body>
</html>

مصادر