آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش پیدا کردن و انتخاب المان ها بر اساس attribute

دوره های مرتبط با این مقاله

پیدا کردن و انتخاب المان ها بر اساس attribute

در آموزش قبلی، دیدیم که چگونه می توان المان ها را با توجه به کلاس یا شناسه ی آن ها انتخاب کرد( به آموزش انتخاب عناصر وب بر اساس کلاس و شناسه با jquery مراجعه کنید). این دو خاصیت (property) به خاطر اینکه برای استایل دهی به المان ها با CSS مورد استفاده قرار می گیرند، با هم مرتبط می باشند. اما با کتابخانه ی jQuery، می توان المان ها را بر اساس هر نوع خصیصه (attribute) پیدا و انتخاب کرد. در کتابخانه ی jQuery چندین انتخابگر خصیصه (attribute selector) وجود دارد که در مقاله ی حاضر به شرح برخی از آن ها می پردازیم.


انتخاب المان بر اساس خصیصه ی معین

می توان المان ها را بر اساس attribute یکسان انتخاب کرد. دقت داشته باشید که مثال بعدی ایجاب نمی کند که attribute مقدار معینی داشته باشد یا حتی آن attribute اصلا مقداری داشته باشد. دستور نگارش برای نوشتن و استفاده از این selector به صورت زیر می باشد:


نمونه یک

    Test 1
Test 2
Test 3
امتحان کنید

بنابراین، یک [] درج کرده و داخل آن اسم attribute دلخواه را ذکر می کنید.
در نمونه ی بالا، با استفاده از یک انتخاب گر خصیصه (attribute selector)، کلیه ی المان هایی که attribute آن ها title می باشد را گزنیش کرده و سپس با استفاده از تابع .css()به المان های مزبور underline اعمال می کنیم. همان طور که پیشتر گفته شد، این کوئری با تمامی المان هایی که خصیصه ی آن ها title می باشد، صرف نظر از مقدارشان، منطبق می شود. اما گاهی لازم است یک المان را که attribute آن دارای مقدار مشخص است، پیدا کنیم.


انتخاب المان هایی که attribute آن ها دارای مقدار مشخص می باشد

در زیر مثالی را مشاهده می کنید که همه ی المان هایی که خصیصه ی آن ها دارای مقدار مشخص است را پیدا می کند:


نمونه دو

    Link 1
Link 2
Link 3
امتحان کنید

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");

امیدواریم که این مطلب در مورد آموزش Jquery و JavaScript برایتان مفید و مناسب بوده باشد.
در صورت داشتن هر گونه سوال، پیشنهاد و یا انتقاد حتماً از قسمت نظرات در پایین صفحه آن را برای ما ارسال کنید.

اگر تمایل دارید به سایر محتوای آموزش برنامه نویسی دسترسی پیدا کنید می توانید به آموزش های گام به گام برنامه نویسی مراجعه کنید.

از اینجا بهترین کتابهای برنامه نویسی را دریافت کنید : کتاب های آموزش برنامه نویسی


کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

  • 1218
  •    1378
  • تاریخ ارسال :   1395/01/15

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .