همراهان عزیز، سلام امیدوارم که حالتون خوب باشه و از اموزشهایی که امروز براتون درمورد jquery میخوام بگذارم راضی باشید. برای پیدا کردن المان ها از ویژگیهای المان ها را پیدا کرد.در آموزش قبلی، دیدم که چگونه می توان المان ها را با توجه به کلاس یا شناسه ی آن ها انتخاب کرد. این دو خاصیت (property) به خاطر اینکه برای استایل دهی به المان ها با CSS مورد استفاده قرار می گیرند، با هم مرتبط می باشند. اما با کتابخانه ی jQuery، می توان المان ها را بر اساس هر نوع خصیصه (attribute) پیدا و انتخاب کرد. در کتابخانه ی jQuery چندین انتخابگر خصیصه (attribute selector) وجود دارد که در مقاله ی حاضر به شرح برخی از آن ها می پردازیم.
انتخاب المان بر اساس خصیصه ی معین
می توان المان ها را بر اساس attribute یکسان انتخاب کرد. دقت داشته باشید که مثال بعدی ایجاب نمی کند که attribute مقدار معینی داشته باشد یا حتی آن attribute اصلا مقداری داشته باشد. دستور نگارش برای نوشتن و استفاده از این selector به صورت زیر می باشد:
نمونه یک
?
۱
۲
۳
۴
۵
۶
۷
۸
Test 1
Test 2
Test 3
$(function () {
$(“[title]”).css(“text-decoration”, “underline”);
});
بنابراین، یک [] درج کرده و داخل آن اسم attribute دلخواه را ذکر می کنید.
در نمونه ی بالا، با استفاده از یک انتخاب گر خصیصه (attribute selector)، کلیه ی المان هایی که attribute آن ها title می باشد را گزنیش کرده و سپس با استفاده از تابع .css()به المان های مزبور underline اعمال می کنیم. همان طور که پیشتر گفته شد، این کوئری با تمامی المان هایی که خصیصه ی آن ها title می باشد، صرف نظر از مقدارشان، منطبق می شود. اما گاهی لازم است یک المان را که attribute آن دارای مقدار مشخص است، پیدا کنیم.
انتخاب المان هایی که attribute آن ها دارای مقدار مشخص می باشد
در زیر مثالی را مشاهده می کنید که همه ی المان هایی که خصیصه ی آن ها دارای مقدار مشخص است را پیدا می کند:
نمونه دو
?
۱
۲
۳
۴
۵
۶
۷
۸
Link 1[new window]
Link 2
Link 3[new window]
$(function () {
$(“a[target=’_blank’]”).append(“[new window]”);
});
Selector صرفا به jQuery اعلان می کند تمامی لینک هایی (المان های a) که دارای خصیصه ی target هستند و مقدار آن ها برابر رشته ی “_blank” می باشد را پیدا کرده و سپس متن “[new window]” را به آن ها پیوست (append) نماید. حال اگر بخواهیم المان هایی که مقدار attribute آن ها برابر با مقدار ذکر شده نباشند، انتخاب کنیم، چه اقدامی را بایستی اتخاذ کنیم؟
در پاسخ به این سوال باید گفت که کافی است انتخاب گر را با استفاده از عملگر ” ! ” نقیض نمایید:
$(“a[target!=’_blank’]”).append(” [same window]”);
تنها فرق این نمونه با مثال قبلی در استفاده از عملگر ” ! ” پیش از علامت = می باشد.
نمونه های دیگر:
پیدا کردن المان های input که مقدار خصیصه ی name آن ها با رشته ی معین (مثلا ‘txt’) شروع می شود (با استفاده از عملگر ^=):
$(“input[name^=’txt’]”).css(“color”, “blue”);
پیدا کردن المان های input که مقدار خصیصه ی name آن با رشته ی معین (مثلا letter) پایان می یابد (با استفاده از عملگر $=):
$(“input[name$=’letter’]”).css(“color”, “red”);
پیدا کردن المان های input که مقدار خصیصه ی name آن ها برابر با رشته ی ‘txt’ می باشد:
$(“input[name*=’txt’]”).css(“color”, “blue”);
آ
