سبد خرید
0
No products in the cart.

آشنایی مقدماتی با جی کوئری – JQuery

آشنایی مقدماتی با جی کوئری – JQuery

آشنایی مقدماتی با جی کوئری – JQuery

جی کوئری یک کتابخانه از زبان برنامه نویسی جاوا اسکریپت می باشد با این امکان که دیگر کد نویسی برای ایجاد تغییرات در کد های HTML همانند سابق سخت و پیچیده نخواهد بود ایجاد افکت های انیمیشن ، ایجکس و دسترسی به المانهای مورد نظر بسیار ساده تر از روش های قدیمی با جاوا اسکریپت هم اکنون توسط این کتابخانه پر کاربرد امکان پذیر بوده و تسریع گردیده است . با کتابخانه JQuery کمتر بنویسید و بیشتر انجام دهید یعنی با کد های کوتاه عملیات مورد نظر خود را در صفحه وب پیاده سازی کنید . همچنین جی کوئری امروزه قابل اجرا در تمامی مرورگر هاست و امکانات بی نظیری را در اختیار توسعه دهندگان وب قرار می دهد .

برای استفاده از دستورات جی کوئری باید کتابخانه آن را دانلود و به پروژه خود اضافه کنید . کتابخانه جی کوئری به در دو نسخه قابل دسترسی می باشد :

۱ . نسخه اول فشرده شده یا compressed می باشد که برای استفاده در هاست و پروژه واقعی مناسب می باشد چراکه حجم آن کاهش یافته و منجر به کندی بارگذاری وبسایت شما نخواهد شد .

۲ . نسخه دوم غیر فشرده شده یا uncompressed می باشد که تقریبا حجمی سه برابری نسبت به نسخه فشرده شده دارد و بیشتر مناسب برنامه نویسان حرفه ای بوده که نیاز به دسترسی به کدهای جی کوئری دارند یا قصد دارند تغییراتی در آن اعمال کنند ، البته نسخه مناسب برای تست و تکمیل پروژه به صورت لوکال نیز می باشد .

کتابخانه جی کوئری را می توانید از وبسایت jQuery.com دانلود و به به پروژه خود اضافه کنید .

روش دیگری برای اضافه کردن کتابخانه jQuery به پروژه وجود دارد ، باید از یک CDN مانند گوگل استفاده کنید در این روش نیاز به دانلود کتابخانه و قرار دادن در فولدر روت پروژه نیست و تنها می توانید آن را از یک سورس آنلاین در پروژه خود فراخوانی کنید .

و اما برای یادگیری جی کوئری چه پیش نیاز هایی لازم و یا ضروری است ، آشنایی با :

۱ . JavaScript

2 . HTML

3 . Css

 

از آنجایی که هدف از تولید jQuery  ساده سازی پیچیدگی های کد نویسی جاوا اسکریپت می باشد پس می توان جی کوئری را همان جاوا اسکریپت دانست با دستورات خلاصه تر و کاربردی تر  لذا برای کسب مهارت در استفاده از این کتابخانه قدرتمند باید با زبان جاوا اسکریپت آشنایی خوبی داسته باشید . همچنین تسلط بر HTML و Css از دیگر ملزومات می باشد چراکه بدون آشنایی با ساختار تگ ها و استایل ها نمی توانید از دستورات جی کوئری در طراحی وب بهره ببرید.

آشنایی مقدماتی با جی کوئری – JQuery

چطور از jQuery در طراحی وبسایت استفاده کنیم ؟

قدم اول همانطور که در ابتدا اشاره شد اضافه کردن کتابخاته جی کوئری به پروژه می باشد در کد زیر کتابخانه هم به صورت آفلاین از فولدر روت و هم بصورت آنلاین فراخوانی شده است . برای اینکه مرورگر بتواند دستورات جی کوئری را اجرا کند باید آدرس کتابخانه را درون تگ باز و بسته اسکریپت قرار دهیم ، محل قرار گیری آدرس کتابخانه جی کوئری می تواند هم در تگ Head باشد و هم در تگ Body توصیه می شود که در تگ هد قرار گیرد به شکل زیر :

جی کوئری

نکته قابل توجه :

تصور کنید قصد داریم یک تصویر را در صفحه مورد نظر مخفی یا اصطلاحا Hide کنیم زمانی که صفحه وب را باز میکنیم تصویر قبل از ظاهر شدن ناپدید شود یعنی قبل از لود یا بارگذاری کامل صفحه با حرکت ماوس کاربر ایونتی اتفاق افتاده و افکت مورد نظر اجرا شود ، طبیعتا در این حالت اتفاق مذکور یک باگ محسوب می شود پس برای جلو گیری از چنین اتفاقاتی دستورات جی کوئری را درون فانکشن یا تابع زیر می نویسیم که بعد از لود کامل صفحه دستورات اجرا شوند .در هنگامی که کتابخانه جی کوئری در تگ هد فراخوانی میشود بهتر است حتما این دستور را در اولین تگ اسکریپت و سایر تگ ها قرار گیرد و کلیه کدهای jQuery درون آن نوشته شود .

$(document).ready(function(){

jQuery codes;

});

jQuery

مباحثی که باید در جی کوئری فرا گرفت :

 . jQuery Syntax :

قواعد دستوری یا دستور زبان جی کوئری و جاوا اسکریپت

 . jQuery Selector :

شناخت سلکتور ها که شامل id و class در جی کوئری می شود .

 . jQuery Events :

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

ایونت ها شامل ایونت های ماوس ، کیبورد ، فرمها و ویندوز می شوند .

 . jQuery Effects :

دستورات کنترلی که در هنگام وقوع یک ایونت و یا هر عملیات تعریف شده ی دیگری رخ می دهد را ایفکت گویند انواع مختلفی هم دارند مانند :

hide , show , animate , fade , stop , slide و  غیره

 . Document Object Model :

Dom در واقع استانداردی تعریف شده است که توسط آن می توان به فایل های HTML و XML دسترسی داشت .

. jQuery Methods :

متدهای مهم جی کوئری که امکانات بسیاری را در اختیار توسعه دهنده وب قرار می دهند . در اینجا به برخی از آنان اشاره می کنیم  :

Get – Set – Add – Remove – Css – Dimensions  و …

. jQuery Ancstors :

تگ های والد و متد هایی برای دسترسی به آنها

. jQuery Descendants :

تگ های فرزند و چگونگی پیدا کردن آنها از طریق تگ های والد آنان

. jQuery Siblings :

پیدا کردن المان های هم جوار یا هم ردیف

. jQuery Filtering :

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

ایجکس همان روش تبادل اطلاعات با یک سرور و آپدیت یک صفحه وب بدون نیاز به بارگذاری مجدد صفحه می باشد .

. jQuery Load :

بارگذاری اطلاعات از سرور و جای گذاری آن در المان مورد نظر

. jQuery Get/Post :

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

. jQuery noConflict :

در فریم ورک های دیگر همانند جی کوئری علامت اختصاری $ استفاده می شود اما اگر از چند فریم ورک همزمان در یک صفحه وب که همگی دارای علامت $ می باشند استفاده کنیم منجر به متوقف شدن یک یا بعضی از آنها خواهد شد با استفاده از متد noConflict میتوانید به جای استفاده از $ از واژه jQuery استفاده کنید و این مشکل را برطرف سازید .

. jQuery Filters :

متدی کاربردی برای ایجاد فیلتر و یا جست و جو (search) مرتبط با یک المان

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

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

ارسال دیدگاه

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

توسط
تومان