خانه / برنامه نویسی / نصب JQUERYو معرفی چند دستور ساده و کاربردی
q

نصب JQUERYو معرفی چند دستور ساده و کاربردی

جی کوئری

یکی از محبوب ترین و پرکاربردترین کتابخانه های جاوا اسکریپت مخصوص نوشتن کدهای سمت مشتری در HTML هستش، و همونطور که میدونید هر کتابخونه شامل یکسری متد هاست، پس شما هر کدی که بخواهید با جی کوئری بنویسید، با جاوا اسکریپت هم خواهید توانست نوشت ، پس با این حساب مزیت استفاده از جی کوئری چی میتونه باشه؟

یعنی در عین اینکه میتونید نوشتن کد رو نسبت به جاوا اسکریپت تا حد چشمگیری کمتر کنید ، و سرعت رو افزایش

همچنین باعث میشه عملیات بیشتری رو انجام بدید. همونطور که میدونید کدهای جاوا اسکریپت اجراهای متفاوتی در

مرورگرهای مختلف داره که به همین دلیل گاهی اوقات مجبوریم زحمت زیادی رو برای بازنویسی کدها متحمل شیم اما

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

شما با استفاده از جی کوئری می توانید برای زیبا سازی فوق العاده صفحات وب سایت از جمله انواع مختلف متحرک سازی، افزودن انیمیشن و افکت، اسلاید شو های زیبا ، استفاده ساده تر از اجکس و…. بهره ببرید.

 قبل از شروع چند تا نکته رو گوشزد کنم و بعد بریم سراغ نصب  پیشنیاز یادگیری جی کوئری، آشنایی مقدماتی

با کدهای جاوا اسکریپت و البته CSS و HTML هستش.� جی کوئری سه نوع مختلف کتابخانه داره که ما� برای

شروع کار از کتابخانه عمومی رایگانش که در و ب سایت www.jquery.com وجود داره استفاده می کنیم

 دو نوع دیگه یعنی jquery-ui برای انواع افکت ها و jquery mobile برای طراحی اپلیکشن های موبایل

اشاره خواهیم کرد

مرحله اول

رفتن به وب سایت رسمی جی کوئری و دانلود کتابخانه از ادرس www.jquery.com
وارد صفحه ای مانند زیر می شوید

خب با انتخاب Download در صفحه اصلی ،وارد صفحه ای مانند زیر خواهیم شد:

در این بخش میتونید دو نسخه از جی کوئری یعنی نسخه 1 و 2 رو ببینید که برای دانلود در دسترس شما قرار داده

شدن. ما کارمون رو با دانلود جی کوئری نسخه 1 جلو میبریم چرا که نسخه 2 هنوز در بعضی از مرورگرها پشتیبانی

نمیشن. در نسخه 1 دو نوع از این کتابخانه برای دانلود در دسترس قرار داده شده:

نسخه compressed, production jQuery 1.12.0: همونطور که از نامش پیداست، به صورت فشرده شده هستش

و دلیل حجم پایین، حذف توضیحات اضافه می باشد. اما خب باید به این نکته توجه داشت که در صورت حجم پایین کد

، سرعت اجرا بالاتر میره، پس از این نسخه برای وب سایت استفاده می کنیم. خب روی این لینک کلیک کنید تا بتونیم

کدهاش رو ببینیم:

نسخه uncompressed, development jQuery 2.2.0:�

یا نسخه غیر فشرده که با حجم بالاتر اما با توضیحات بیشتر موجود هست. این نسخه بیشتر مورد توجه کسانی

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

ها بهتر متوجه اش بهش. خب حالا این لینک رو هم باز میکنم تا بتونم کدهای مرتب اش رو ببینم:

برمیگردیم سراغ نسخه فشرده تا ذخیرش کنیم. روش ذخیره کردن بسیار سادست. کافیه که از منوی فایل مرورگر گزینه Save Page As… رو انتخاب کنید و مسیر دلخواه رو توی سیستم تون بهش بدید:


خب حالا یه نکته قابل توجه دوستانی بگم که هم چنان اصرار دارن از نسخه فشرده نشده استفاده کنن. من هر دو نسخه uncompressed و compressed رو دانلود کردم و کنار هم قرار دادم. به حجم هاشون دقت کنید.

در ابتدا باید فایل جی کوئری� رو در محیط برنامه نویسیتون کپی کنید.� توجه داشته باشید که از یک محیط

مناسب بسته به نوع زبان و کارتون برای جی کوئری استفاده کنید.� حالا باید جی کوئری رو به پروژه مون لینک بدیم.

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

تگ head یا body قرار بگیرید. برای وارد کردن� جی کوئری باید از تگی با نام script� استفاده کنیم. نحوه ساخت

این تگ:

که در واقع در قسمت src باید نام فایل جی کوئری را کپی و paste کنید.

خب توجه کنید که اگر جی کوئری در تگ body قرار داده بشه، ابتدا تمام فایل های css و html در صفحه لود میشن

و بعد نوبت به جی کوئری میرسه. حالا لینک جی کوئری رو هم برقرار کردیم. نوبت میرسه به بکارگیری کتابخانه

جی کوئری.

نکته: چنانچه مایل نیستید فایل jQuery در میان� فایل های پروژه تان قرار بگیره، می توانید از CDN های شرکت

هایی مانند مایکروسافت و گوگل استفاده کنید:

کدهای جی کوئری داخل تگ باز و بسته script نوشته میشن. پس یک تگ باز و بسته script دیگر برای

شروع کار ایجاد میکنم:

مر حله درم

Syntax جی کوئری:

دستورات جی کوئری به گونه ای هستند که می توان تمام عناصر موجود در html را یافت و بر روی آن

ها عملیات مورد نظر را پیاده سازی کرد.

ساختار پایه ای زبان جی کوئری به شکل زیر می باشد که آن را شرح می دهیم:

خب علامت $ مخصوص دسترسی به کتابخانه جی کوئری هستش یعنی برای انتخاب و دسترسی

� عناصر در html از این علامت استفاده می شود.

Selector:

خب بالا گفتیم که باید عنصر یا عناصر html مورد نظر را انتخاب کرده و به جی کوئری معرفی کنیم

تا بتوانیم تغییرات مورد نظر را بر روی آن ها اعمال کنیم. بنابراین برای جستجوی عناصر از Selector

استفاده می کنیم. پس سلکتور می تونه روی تمام تگ های html و کلاس های Css عملیات خاص

مد نظر مارو اعمال کنه.

خب حالا پس از انتخاب عناصر مورد نظر باید مطرح کنیم که باید چه عملیاتی برای آن ها انجام شود.

با استفاده از action() تعیین می کنیم که چه کارهایی انجام شود.

دستور انتخاب در جی کوئری با استفاده از نام کلاس، شناسه و یا نام تگ صورت می گیرد. به مثال های زیر توجه کنید:

در این مثال من میخواهم به جی کوئری دستور بدهم تا تمام پاراگراف های موجود در صفحه مخفی کند، پاراگراف در html با

� مشخص میشه و دستور hide برای مخفی کردن بکار میره پس شکل دستور بصورت زیر خواهد بود:

 

آسون بود نه؟
خب حالا باید یه نکته خیلی مهم رو بگم. شما ممکنه به جی کوئری دستوری رو بدید که روی عنصری عملیات

خاصی رو اعمال کنه، اما هنوز اون عنصر توی صفحه لود یا بارگذاری نشده و این موضوع براتون مشکل ایجاد کنه.

خب پس باید دستور بدیم که وقتی عملیات روی عناصر توی صفحه اعمال شه که حتما قبلش صفحه بارگذاری

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

توجه کنید داره میگه هر موقع که داکیومنت یعنی صفحه مون ready یا آماده شد و کاملا لود شد

بیا یکسری توابع رو صدا بزن که عملیات مورد نظر در درون آکولاد باز و بسته نوشته میشن. توجه

کنید که function میتونه آرگومان هم داشته باشه که البته در حال حاضر آرگومانی نداره. حالا هر

دستوری که به جای (//code) نوشته بشه، بعد از لود شدن صفحه اجرا میشه. حواستون باشه

این کد رو در ابتدای پروژ ها بنویسید.

برای جا افتادن مطلب بیایم یک دستور ساده رو بنویسیم. تابع Alert رو در جاوا اسکریپت یادتون میاد؟

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

در واقع ورودیش میشه همون متن مورد نظرمون. حالا من اینجا میخوام به محض لود شدن صفحه، پیام

Welcome نمایش داده بشه.

خب حالا اگه برنامه رو ذخیره کنید و در یک مرور گر اجرا کنید، میبینید که به محض لود شدن صفحه،

پیغام Welcome نمایش داده میشه.

به دستورات زیر توجه کنید:

دستور زیر تمامی عناصر موجود در صفحه را مخفی می کند.

خب با توجه به ساختاری که در ابتدا فرا گرفتیم، به تشریح خط بالا می پردازیم. علامت $ به شی جی کوئری

اشاره کرده و در داخل پرانتز مربوط به انتخاب عناصر، علامت * به معنای همه عناصر موجود در صفحه است پس

اکشنی که رخ خواهد داد،� یعنی hide به معنای مخفی کردن ، بر روی تمامی عناصر صفحه اعمال خواهد شد.

این دستور میگه برو توی کدها بگرد و تمام عناصری که نام کلاسشان Firstexample است رو مخفی کن. دات قبل از اسم کلاس رو فراموش نکنید.

مثال بالا عنصری که شناسه یا ID آن Example است را مخفی میکنه. حواستون باشه علامت # قبل از آوردن اسم شناسه حتما باید نوشته شود.

پاپ کده

درباره‌ی majidkingkm

پاسخ دهید

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