akofaraji.ir
سینتکس jQuery و کار با Selector ها
نوشته شده در تاریخ 13 آذر 1401
نظرات: 0 امتیاز: 10 زمان مطالعه: 16 دقیقه

 

سینتکس جی کوئری

 

یک عبارت jQuery معمولا با علامت $ آغاز می شود و با ; پایان می پذیرد. در واقع علامت $ در کدها یک نام جایگزین برای jQuery است. در کد مثال زیر استفاده از سینتکس جی کوئری را در یک حالت ابتدایی مشاهده می کنید:

کد مثال بالا، عبارت “Hello World” را به کاربر نشان می دهد.

 

شرح کد

 

اگر به تازگی کار با jQuery را آغاز کرده اید، احتمالا می خواهید بدانید که قسمت های مختلف کد مثال قبل چه وظایفی برعهده دارند. بنابراین به شرح قسمت های مختلف کد بالا می پردازیم:

 

تگ <script>


به دلیل آن که jQuery یک کتابخانه جاوا اسکریپت است، شما باید کدهای این کتابخانه را بین تگ های script بنویسید. البته اگر کدهای jQuery در یک فایل جداگانه و خارجی قرار گرفته باشند، باید تگ های script را از ساختار jQuery حذف کنید. (فایل خارجی با پسوند js.)

 

;(document).ready(handler)$


از این عبارت نوعا به عنوان رویداد ready نام می برند. در یک حالت ساده ابتدایی می توان گفت که در واقع handler یک تابع است که نتیجه آن به متد ()ready منتقل می شود تا زمانی که اطمینان حاصل شد صفحه یا document در حالت ready قرار دارد، اجرا شود و در حقیقت document را دستکاری کند و موجب تغییراتی در آن شود. البته همان طور که گفته شد این عملکرد در رویداد ready رخ می دهد (یعنی هنگامی که سلسله مراتب DOM ساخته شده باشند).

متد ()ready نوعا با یک تابع ناشناس بکارگرفته می شود، بنابرانی کد مثال بالا را می توانید به صورت زیر بنویسید:

 

نکته: شما می توانید از هر دو نوع روشی که در مثال های بالا آورده شده است، استفاده کنید. اما بکار بردن عبارت document.ready موجب خوانایی بیشتر کد می گردد.

علاوه بر موارد آورده شده در بالا، می توانید در کنترل کننده (handler) رویداد، کدهای jQuery را به فرمت سینتکس پایه بنویسید تا اجرا شوند، فرمت هایی مانند: ;(selector).(action)$

 

زمانی که selector با یک شیوه ساده از درخت DOM عناصر Html را انتخاب یا select می کند، می تواند این عناصر را با استفاده از action دستکاری کند. به عنوان مثال تغییر مقدار یک ویژگی css مربوط به آن عناصر یا تغییر محتوای عناصر و…

 

حالا در کد زیر مثالی را مشاهده می کنید که متن پاراگرف، بعد از آن که document یا صفحه وب در حالت ready قرار گرفت، تغییر می کند:

 

در کد بالا P توسط Selector در کد jQuery انتخاب شده است. سپس متنی به عنوان متن تگ های <p> صفحه ای که در رویداد ready قرار گرفته است، با استفاده از متد ()text اعمال می شود.

 

متن پاراگرف در مثال بالا به صورت خودکار وقتی که document در حالت ready باشد، تنظیم می شود یا در حقیقت با متن قبلی اش جایگزین می شود. اما در حقیقت اتفاقی که رخ می دهد به این صورت است که ما به عنوان کاربر قبل از تغییرات این چنینی تعاملاتی با آن صفحه خواهیم داشت و معمولا چیزی اتوماتیک تغییر نمی کنند و این تغییرات به صورت تعاملی و در راستای درخواست کاربر تنظیم شده اند. در کد مثال زیر این موضوع بررسی شده است:

 

در کد مثال بالا وقتی که کاربر بر روی دکمه “Replace Text” کلیک می کند، متن پاراگرف تغییر می کند. در واقع تغییر متن پاراگرف پاسخی است به عملکرد کاربر، که با این کار تعامل کاربر با مرورگر فراهم می گردد.

تا اینجا شما با مقدمه و ساختار jQuery آشنا شده اید و می توانید با آموزشی که از سینتکس آن پیدا کرده اید، کار کردن با آن را شروع کنید. در ادامه آموزش ها روی مطالبی عمیق تر می شویم که قبلا از آن ها نام برده شده است.

نکته: در حقیقت، قرار دادن کد در document.ready بدین معناست که کد زمانی اجرا می شود که صفحه مرورگر بارگذاری و یا به عبارتی دیگر درخت DOM ساخته شده باشد.

 

Selector ها در jQuery

 

اکنون می آموزید که چطور با Selector ها کار کنید و با استفاده از jQuery عناصر Html را انتخاب کنید. اینکه از جاوا اسکریپت به عنوان ابزاری برای دریافت یا تغییر محتوا و یا مقدار عناصر Html استفاده شود، بسیار متداول است. همچنین از آن برای اعمال افکت هایی مانند Show ،Hide ،Animations و… استفاده می شود اما لازمه همه این کارها به کنترل گرفتن عناصر مربوطه در Html به کمک Selector ها است. یعنی طی مکانیزمی باید عناصر DOM توسط جاوا اسکریپت Select یا انتخاب شوند.

استفاده مستقیم از جاوا اسکریت جهت اجرای مکانیزم استفاده از Selector ها کاری عذاب آور و دشوار است. یکی از ویژگی های فوق العاده jQuery در همین رابطه است که کار با Selctor ها را بسیار آسان کرده است و این یکی از قدرتمندترین ویژگی های jQuery می باشد.

نکته: jQuery همه Selector هایی را که در CSS3 تعریف شده است، پشتیبانی می کند. همچنین می توانید برای خود Selector بسازید و از این Selector های سفارشی سازی شده استفاده کنید. استفاده از Selector های شخصی توانایی انتخاب عناصر یا تگ های Html را افزایش می دهد.

در بخش های زیر شیوه های معمول Select کردن عناصر و کار با jQuery در استفاده از این مکانیزم شرح داده شده است:

 

انتخاب عناصر با استفاده از ID

 

می توانید از ID ها جهت انتخاب یک عنصر Html خاص از صفحه استفاده کنید. برای مثال در کد زیر عنصر که مقدار ID آن برابر است با mark انتخاب می شود و سپس هنگامی که document در حالت ready باشد، دستکاری ها و اعمال مربوطه روی آن صورت می گیرد:

در کد بالا، قطعه کدی که در ساختار document.ready می آید، هنگامی اجرا می شود که DDOM ساخته شده باشد. در قسمت های آینده مطالب بیش تری راجع به event ها را مشاهده خواهید کرد.

 

انتخاب عناصر Html با استفاده کلاس

 

jQuery می تواند عناصری از صفحه با یک Class خاص را انتخاب و تغییرات لازم را روی آن اعمال کند. به عنوان مثال در کد زیر همه عناصری از Html که مقدار خاصیت class در آن ها برابر mark می باشد، انتخاب می شوند و هنگامی که document در حالت ready قرار گرفت، کد درون ready اجرا می شود:

 

انتخاب عناصر با استفاده از نام آن ها

 

شما می توانید با استفاده از نام عناصر Html آن ها را انتخاب کنید. برای مثال در کد زیر همه عناصر P در صفحه هنگامی که document در حالت ready باشد، هایلایت می شوند:

 

انتخاب عناصر با استفاده از attribute ها

 

می توانید از attribute های عناصر Html بهره بگیرید و آن ها را انتخاب کنید. مثلا می توانید همه لینک هایی را که دارای Target خاصی هستند یا همه فیلدهای input که دارای “type=”text هستند، انتخاب کنید.

مثلا در کد مثال زیر همه input هایی که در آن ها “type=”text هست، انتخاب می شوند و هنگامی که document در حالت ready بود، هایلایت می شوند:

 

انتخاب عناصر با بهره گیری از Selector های پیچیده CSS

 

می توانید Selector های مختلف را با یکدیگر ترکیب کنید تا به انتخاب دقیق تری از عناصر برسید. برای مثال در کد زیر می توانید Class Selector را با Element Seelctor ترکیب کنید تا عناصری را در صفحه پیدا کنید که کلاس و نوع مشخص مشابهی دارند:

 

Selector های سفارشی سازی شده jQuery

 

علاوه بر استفاده از Selector های پیش فرض CSS، شما می توانید Selctor های سفارشی سازی شده خود را بسازید و با این کار قدرت انتخاب عناصر را بالا ببرید:

 

بعد از آشنایی با سینتکس جی کوئری و چگونه کد زدن با استفاده از آن، با Selctor ها در جی کوئری نیز آشنا شده اید. در قسمت بعدی به سراغ event ها یا رویداد می رویم.

 

منبع: سایت روکسو


اگر احساس می کنید این مطلب برای شما مفید بود ، از 1 تا 10 به این مطلب امتیاز دهید

دیدگاه کاربران در مورد این مطلب

ثبت نظر
به نظر خوب میاد!
لطفا نام را وارد کنید
@
لطفا یک ایمیل منحصر به فرد و معتبر انتخاب کنید.
لطفا متن با کلمات و معانی مفهوم دار وارد نمایید