تبلیغات

دوره H جی کوئری: درس 1: بررسی اجمالی جی کوئری

دوره آموزشی H جی کوئری

دوره H جی کوئری
درس 1: بررسی اجمالی جی کوئری


دوره‌های H
دوره‌ی H، یک دوره‌ی فشرده می‌باشد که برای زبان‌های برنامه‌نویسی مختلفی در نظر گرفته شده است و در آن بصورت خلاصه و مفید، به بیان مهم‌ترین مباحث هر زبان برنامه‌نویسی پرداخته می‌شود تا بتوان در کوتاه‌ترین زمان ممکن، به ابتدایی‌ترین موارد موجود در یک زبان برنامه نویسی مسلط شد. برای مطالعه بیشتر و لیست تمامی دروس این دوره کلیک کنید...

جی کوئری چیست؟!

قبلا در «این مطلب» که خارج از این دوره است، در مورد ماهیت جی کوئری بطور کامل توضیح دادیم. اما برای یاد آوری هم که شده، یک توضیح خلاصه در ادامه خواهیم داشت.

جی کوئری یک کتابخانه‌ی سریع، کوچک و با ویژگی‌های قدرتمندی برای زبان جاوا اسکریپت است. این کتابخانه، کار با سند HTML را بسیار ساده می‌کند. جی کوئری به زبان جاوا اسکریپت نوشته شده و در واقع تمام قدرت خود را از جاوا اسکریپت می‌گیرد؛ بناربراین قبل از اینکه کار با جی کوئری را شروع کنید، باید جاوا اسکریپت بلد باشید.

پس ...
جی کوئری یک کتابخانه‌ی نوشته شده به زبان جاوا اسکریپ و برای خود جاوا اسکریپت است. کتابخانه‌ای که در وب استفاده می‌شود! چراکه خود زبان جاوا اسکریپت (یعنی سینتکس)، در محیط‌های دیگری مثل فتوشاپ و … کاربرد دارد.

ابتدا نگاهی بیندازیم به روند نمونه برداری از یک سند HTML با جاوا اسکریپت خالص:
برای مثال فرض کنید بخواهیم عنصر یا المنت HTML ای که آیدی آن برابر FuLLKade است را گرفته و سپس کد HTML بین آن را به Welcome back تغییر دهیم. بصورت زیر:

حالا برای انجام همین کار در jQuery، بصورت زیر عمل می‌کنیم:

چقدر ساده، چقدر زیبا! البته در درس‌ها و بخش‌های آینده، قواعد و سینتکس جی کوئری را به شما یاد خواهم داد؛ ولی فعلا خواستم تا با یک مثال ساده، نشان دهم که انجام چنین کارهایی در جی کوئری چقدر ساده است.

یکی دیگر از مزیت‌های بزرگ جی کوئری، این است که شما نیازی به نگرانی در مورد این که آیا مرورگرهای مختلف، کدتان را پشتیبانی می‌کند یا نه، ندارید. کدی که نوشته‌اید در تمامی مرورگرهای اصلی، بطور یکسان کار خواهد کرد؛ حتی اینترنت اکسپلورر اون هم نسخه 6! 😀

فراخوانی جی کوئری در سند HTML

شما می‌توانید فایل JS کتابخانه‌ی جی کوئری را بطور مستقیم از سایت رسمی آن دانلود کرده و در پروژه خود استفاده کنید؛ ولی پیشنهاد می‌کنم که آن را از CDN (Content Delivery Network)های معتبری مثل گوگل و مایکروسافت در پروژه خود فراخوانی کنید. که من خودم از CDN خود سایت جی‌کوئری در این آموزش استفاده می‌کنم. بنابراین می‌توان بصورت زیر، آن را در صفحه بارگزاری کرد:

گفتیم که جی کوئری یک کتابخانه‌ی جاوا اسکریپت است؛ بنابراین طبیعیتا پسوند js دارد.

بهترین جا برای نوشتن کد جی کوئری در زمان لود سایت

فرض کنید شما در حال قدم زدن به سمت من هستید و 500 متر با من فاصله دارید، در هنگامی که فاصله شما از من (یا من از شما) مثلا به 400 متر می‌رسد، من دستم را دراز می‌کنم تا با شما دست بدهم!!!!! حالا در سند HTML وقتی کاربر سایت ما را باز می‌کند، باید چه موقع کدِ خود را اجرا کنیم؟! (منظور کدی که در ارتباط با عنصار HTML است)

اگر این کد، قبل از بارگزاری کامل سند HTML اجرا شود، ممکن است هنوز یک یا چند عنصری هنوز بارگزاری (لود) نشده باشند؛ بنابراین اگر کد با آن عناصر ارتباط داشته باشد، به درستی اجرا نخواهد شد! همانند دست من که به شما نمی‌رسد! 😀

اگر قرار است کد  را در زمان باز کردن سایت اجرا کنیم، این را بدانید که بهترین زمان برای اجرای آن، زمان بارگزاری کامل سند است؛ چون وقتی هنوز یک یا چند عنصری در صفحه بارگزاری نشده باشند و کدی که نوشتیم بخواهد با آنها ارتباط برقرار کند، طبیعتا درست عمل نخواهد کرد و به مشکل جدی برخورد می‌کند!

پس باید اینگونه کدها را که شرط را در زمان لود شدن کامل صفحه اجرا کنیم.بدین منظور، از رویداد ready شیء document بصورت زیر استفاده می‌کنیم:

حرف $ در جی کوئری: برای دسترسی به جی کوئری، از $ استفاده می‌شود! همانطور که در بالا دیدید، $ را نوشتیم، سپس به شیء document دسترسی ایجاد کرده و یک تابع به رویداد ready آن اضافه نمودیم. البته در جی کوئری، یک راه میانبور نیز برای نوشتن کد بالا وحود دارد! بصورت زیر:

این کد، همان کار کد قبلی را انجام می‌دهد؛ ولی ساده‌تر از آن است.

[Sahpe tcolor=”black” color=”#FFE0B2″]اگر با دیدن ساختار جی کوئری یا به عبارتی این کدی که در بالا نوشتیم گیج شدید، اصلا نگران نباشید؛ در درس‌های آینده بیشتر توضیح خواهم داد.[/Shape]

یک مثال: در ابتدای درس، مقایسه‌ای بین کد «جاوا اسکریپت خالص» و «کد جاوا اسکریپت نوشته شده با جی کوئری» انجام گرفت. اما بیایید حالا همان کد را بطور کامل‌تر و پس از لود شدن کامل صفحه بنویسیم! بصورت زیر:

Syntax یا قواعد جی کوئری

جی کوئری در واقع، برای انتخاب کردنِ (یا کوئری زدن، پرس و جو کردن) عناصر HTML و انجام اعمال مختلفی بروی آنها استفاده می‌شود؛ که سینتکس ابتدایی آن بصورت زیر است:

  • $ : کلید دسترسی به جی کوئری
  • SELECTOR : یک ساختار رشته‌ای، برای پیدا کردن المنت یا عناصر مورد نظر؛ تا بعدا برروی آنها کاری انجام دهیم.
  • ACTION: کاری که می‌خواهیم بر روی عنصر(های) انتخاب شده انجام دهیم.

مثال:

یادتان هست در مثال قبلی چه چیزی نوشته بودیم؟!

همانطور که می‌بینید، در اینجا المنتی که آیدی آن برابر FuLLKade است را گرفته و سپس تابع html را فراخوانی و مقدار Welcome back را به آن ارسال می‌کنیم. تابع html مقدار بین المنت، یعنی محتوای HTML بین یک المنت را تغییر می‌دهد.

نکته خیلی مهم
اگر قبلا از CSS استفاده کرده باشید، متوجه خواهید شد که جی کوئری از قواعد CSS برای انتخاب کردن استفاده می کند.
نکته خیلی مهم
اگر اکشنی را بعد از انتخاب کردن اجرا نکنیم، می‌توانیم مورد انتخاب شده را درون یک متغیر نگه داشته و بعدا از آن استفاده کنیم.

درس بعدی
تبلیغات
0
کانال تلگرام فول کده
تبلیغات

درباره نویسنده

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس و دانشجوی ارشد رشته شبیه‌ساز هوشمند - در حال نوشتن یه رمان (اگه خدا بخواد و تموم شه ?)

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده بدون دیدگاه