مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش کاربردی آموزش jQuery ، را دنبال می کنند. ما به تازگی در طی بخش های آموزشی دوره، وارد مباحث آشنایی با ساختار و کد نویسی jQuery ، شده ایم. در ادامه این مباحث ، در این بخش به موضوع آشنایی با انتخابگر یا Selector در jQuery ، می پردازیم.
در جلسه قبل تا حدودی با مبحث ساختار کدنویسی در jQuery ، آشنا شدید. همچنین موضوع آشنایی با ساختار زبان jQuery ، را یز بررسی کردیم.
اکنون در این بخش، به ادامه موضوع آشنایی با انتخابگر یا Selector در jQuery ، می پردازیم.
آشنایی با انتخابگر یا Selector در jQuery
آشنایی با انتخابگر یا Selector در jQuery
انتخابگرهای jQuery یا Selector ها، یکی از مهمترین بخش های کتابخانه جی کوئری هستند.
انتخابگرها (Selector )
انتخابگرهای jQuery ، به شما اجازه می دهد که عناصر HTML را انتخاب و دستکاری کنید.
انتخابگرها، از نام (name) ، آی دی (id) یا کلاس (class) ، برای پیدا کردن و انتخاب کردن عناصر html ، استفاده می کند.
تمام Selector ها در jQuery ، با کاراکتر “$” و پرانتز باز و بسته “()” ، تعریف می شوند.
انتخاب عناصر html با نام آن ها
jQuery ، می تواند به عناصر html ، با استفاده از صفت نام آن ها ، دسترسی یابد.
شما می توانید تمام عناصر <p> ، را در یک صفحه وب انتخاب کنید:
مثال: زمانیکه کاربر روی یک button ، کلیک می کند. تمام عناصر <p> ، در آن صفحه مخفی شود:
مثال :
| $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); |
انتخابگر id
انتخابگر id، می تواند به عناصر html ، با استفاده از id آن ها ، دسترسی یابد.
id یک عنصر، باید در یک صفحه منحصر بفرد باشد. بنابراین شما باید از انتخابگر #id استفاده کنید. وقتی که می خواهید یک عنصر منحصر به فرد را پیدا کنید.
برای این منظور باید از ساختار زیر استفاده کنید:
مثال: انتخاب یک عنصر با آی.دی “test”:
مثال: زمانیکه کاربر روی یک button ، کلیک می کند. عنصر با آی دی “test” ، در آن صفحه مخفی شود:
مثال :
| $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); |
انتخابگر کلاس (Class)
انتخابگر id، می تواند به عناصر html ، با استفاده از Class آن ها ، دسترسی یابد.
مثلا پیدا کردن یک عنصر با کلاس “test” :
مثال: زمانیکه کاربر روی یک button ، کلیک می کند. تمام عناصر با کلاس “test” ، در آن صفحه مخفی شود:
مثال :
| $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); |
استفاده از کدهای jQuery ، از یک فایل جداگانه
مانند جاوااسکریپت ، کدهای jQuery ، را در یک فایل جداگانه با پسوند .js قرار می دهید. سپس در صفحه وبی که می خواهید از آن استفاده کنید. آن را در تگ <script> ، داخل تگ <head> ، آدرس دهی می کنید.
مثال:
مثال :
| <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src="my_jquery_functions.js"></script> </head> |
کلام آخر
در این بخش به استفاده از انتخابگر ها (Selector) ، برای پیدا کردن و دستکاری عناصر html در یک صفحه وب ، با استفاده از jQuery ، اشاره کردیم. اکنون با پایه کدنویسی در jQuery ،در قالب موضوع آشنایی با انتخابگر یا Selector در jQuery ، تا حدودی آشنایی پیدا کرده اید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
