در قسمت قبلی با سینتکس jQuery آشنا شدیم. در این بخش از سری آموزش جی کوئری قصد داریم به شما نحوه استفاده از سلکتورها در jQuery را آموزش بدیم.
انتخاب عناصر با جی کوئری
جاوا اسکریپت, اغلب برای دریافت یا ویرایش محتوا یا مقادیر عناصر HTML و همچنین برای اعمال افکت های مانند نمایش, مخفی و انمیشن و غیره.. در صفحه وب استفاده می شود.
اما قبل از انجام هر عملیاتی نیاز است که عنصر HTML هدف را با سلکتورها در jQuery پیدا یا انتخاب کنید.
انتخاب عناصر با جاوا اسکریپت واقعا حوصله بر است اما اینجا جی کوئری مثل جادو کار می کنید.
قابلیت انتخاب ساده و آسان المان های DOM یکی از قدرتمندترین خصوصیات جی کوئری است.
نکته : جی کوئری تقریبا تمام سلکتور های تعریف شده در CSS3 را پشتیبانی می کند که البته سلکتورهای سفارشی خود را نیز دارد. این سلکتورهای سفارشی تا حد زیادی قابلیت سلکتورها در jQuery را افزایش می دهد.
در بخش زیر به شما چندین روش معمول برای انتخاب المان های روی صفحه و کار با آن ها را با جی کوئری نشان می دهیم.
انتخاب عناصر با ID
می توانید از سلکتور ID برای انتخاب یک المان که id منحصر به فرد در صفحه را دارد استفاده کنید.
برای مثال, کد جی کوئری زیر, زمانی که سند آماده (ready) بود, یک المان که خصوصیت id بصورت id=”netparadis” را دارد را انتخاب و هایلایت می کند.
|
1 2 3 4 5 6 |
<script type="text/javascript"> $(document).ready(function(){ // Highlight element with id netparadis $("#netparadis").css("background", "yellow"); }); </script> |
در مثال بالا, $(document).ready() یک رویداد است که برای دستکاری امن صفحه با jQuery استفاده می شود.
کد داخل این رویداد فقط یکبار زمانی اجرا می شود که DOM کاملا لود شده و آماده است. در مورد رویدادها در جی کوئری در آموزش بعدی, بیشتر صحبت می کنیم.
انتخاب عناصر با نام کلاس
از سلکتور class می توانید برای انتخاب المان ها با کلاس مشخص استفاده کنید.
برای مثال, کد جی کوئری زیر, زمانی که سند آماده (ready) بود, المان هایی که خصوصیت کلاس بصورت class=”netparadis” را دارند, انتخاب می کند.
|
1 2 3 4 5 6 |
<script type="text/javascript"> $(document).ready(function(){ // Highlight elements with class netparadis $(".netparadis").css("background", "yellow"); }); </script> |
انتخاب المان ها با نام تگ
این سلکتور برای انتخاب المان هایی برای پایه نام عنصر را انتخاب می کند.
برای مثال, کد jQuery زیر , زمانی که سند آماده (ready) بود, المان های <p> را انتخاب و هایلایت می کند.
|
1 2 3 4 5 6 |
<script type="text/javascript"> $(document).ready(function(){ // Highlight paragraph elements $("p").css("background", "yellow"); }); </script> |
انتخاب المان ها با خصوصیت
می توانید از سلکتور خصوصیت (attribute) برای انتخاب یک المان که یکی از خصوصیات تگ های HTML را داد استفاده کنید مثال برای لینک های خصوصیت target یا اینپوت ها از type و غیره..
برای مثال کد jQuery زیر , زمانی که سند آماده (ready) بود, همه المان های <input> با type=”text” را انتخاب و هایلایت می کنند.
|
1 2 3 4 5 6 |
<script type="text/javascript"> $(document).ready(function(){ // Highlight paragraph elements $('input[type="text"]').css("background", "yellow"); }); </script> |
انتخاب المان ها سلکتور CSS مرکب
می توانید از ترکیب سلکتورهای CSS , حتی انتخاب خود را دقیق تر کنید.
برای نمونه, می توانید از سلکتور کلاس به همراه یک سلکتور دیگر برای پیدا کردن المان های در یک سند که type و class مشخصی دارند بهره ببرید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> $(document).ready(function(){ // Highlight only paragraph elements with class mark $("p.mark").css("background", "yellow"); // Highlight only span elements inside the element with ID mark $("#mark span").css("background", "yellow"); // Highlight li elements inside the ul elements $("ul li").css("background", "red"); // Highlight li elements only inside the ul element with id mark $("ul#mark li").css("background", "yellow"); // Highlight li elements inside all the ul element with class mark $("ul.mark li").css("background", "green"); // Highlight all anchor elements with target blank $('a[target="_blank"]').css("background", "yellow"); }); </script> |
سلکتورهای سفارشی jQuery
به علاوه سلکتورهای تعریف شده CSS , خود jQuery نیز سلکتورهای شخصی برای افزایش کارایی انتخاب عناصر در صفحه وب ارایه داده است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script type="text/javascript"> $(document).ready(function(){ // Highlight table rows appearing at odd places $("tr:odd").css("background", "yellow"); // Highlight table rows appearing at even places $("tr:even").css("background", "orange"); // Highlight first paragraph element $("p:first").css("background", "red"); // Highlight last paragraph element $("p:last").css("background", "green"); // Highlight all input elements with type text inside a form $("form :text").css("background", "purple"); // Highlight all input elements with type password inside a form $("form :password").css("background", "blue"); // Highlight all input elements with type submit inside a form $("form :submit").css("background", "violet"); }); </script> |
امیدوارم در این بخش آموزش جی کوئری, از سلکتورها در jQuery نهایت استفاده را برده باشید.
در بخش بعدی با رویدادهای جی کوئری که بحث بسیار مهمی است, آشنا می شوید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید
