آموزش رایگان jQuery | صفر تا صد جی کوئری
جیکوئری (jQuery) یک کتابخانه کوچک جاوا اسکریپت است که موجب میشود کار با HTML آسان‌تر شود. این کتابخانه کارکردهای زیادی برای دست‌کاری عناصر صفحه‌های وب ارائه میکند که موجب میشود برای ایجاد محتوای دینامیک مفید باشد. در همه جا حضور دارد و با اختلاف زیادی رایج‌ترین کتابخانه جاوا اسکریپت محسوب میشود. این کتابخانه در سیستم‌های بزرگی مانند وردپرس ادغام شده است و سؤال‌های مربوط به جاوا اسکریپت در وب‌سایت StackOverflow غالباً از طریق جیکوئری پاسخ داده می‌شوند. این یک کتابخانه و نه یک فریمورک است. یک کتابخانه برخی ابزارهای مفید برای کاربرد شما ارائه میکند یا یک مشکل را که جاوا اسکریپت خالص در آن عملکرد خوبی ندارد حل میکند. یک فریمورک مانند Recat یا Vue ساختار مستحکم‌تری محسوب میشود و ارتباط بیشتری با طرز کار اپلیکیشن دارد.
جیکوئری JQuery چیست؟
جیکوئری (jQuery) کتاب خانه ای سریع، کوچک و پر از ویژگی از زبان جاوا اسکریپت است و برنامه نویسی را بسیار ساده میکند. یادگیری کتاب خانه ای همچون jQuery (جیکوئری) بسیار ساده تر از یادگیری زبان جاوا اسکریپت است. شعار jQuery "کمتر بنویس و بیشتر انجام بده"است. و هدفش استفاده آسان و سریع از امکانات جاوا اسکریپت در وب سایت است. این ساده سازی از دسترسی به عناصر و اشیاء وب سایت تا کنترل رویدادهای آن ها می باشد و همچنین یک سری امکانات از پیش آماده شده را به شما ارائه میدهد. این کتابخانه کارکردهای زیادی برای دست‌کاری عناصر صفحه‌های وب ارائه میکند که موجب میشود برای ایجاد محتوای دینامیک مفید باشد.
فواید و کاربرد های جیکوئری چیست؟
جیکوئری همه جا حضور دارد و با اختلاف زیادی رایج‌ترین کتابخانه جاوا اسکریپت محسوب میشود. این کتابخانه در سیستم‌های بزرگی مانند وردپرس ادغام شده است و سؤال‌های مربوط به جاوا اسکریپت در وب‌سایت StackOverflow غالباً از طریق جیکوئری پاسخ داده می‌شوند. این کتابخانه روش میانبری برای بسیاری از کارکردهای این برنامه ارائه میکند. برای دست‌کاری HTML نیز استفاده میشود که غالباً کاری طولانی و ملال‌آور محسوب میشود. جیکوئری ساختار بسیار کوتاه‌تر و تمیزتری ارائه میکند و به جای این که صدها بار عبارت document.getElementByID() را وارد کنید، میتوانید تنها با یک کاراکتر این کار را انجام دهید و بدین ترتیب زمان توسعه به شدت کوتاه میشود. بزرگ‌ترین حسن آن در تابع سلکتور آن است که برای یافتن عناصر در HTML استفاده میشود و به آن‌ها اشاره میکند.
چرا جیکوئری؟
شما با استفاده از جیکوئری میتوانید دستورات جاوا اسکریپت را خیلی ساده تر و راحت تر اجرا کنید. برای مثال اگر انجام یک کار با جاوا اسکریپت نیاز به ۱۰۰ خط کدنویسی دارد، شما میتوانید همان کار را با جیکوئری تنها با ۱۰ خط کد انجام دهید. دقیقا همان چیزی که شعار آن توضیح میدهد: کدهای کمتری بنویس، ولی کارهای بیشتری انجام بده. نکته‌ای که وجود دارد این است که جیکوئری یک چیز خیلی عجیب و غریب نیست. یک فایل است که شما وارد پروژه‌ی خودتان میکنید و میتوانید از آن استفاده کنید. اگر این فایل را باز کنید، با کدهای جاوا اسکریپت خام و خالص مواجه میشوید.
JQuery در چه جاهایی استفاده می شود؟
جیکوئری یک فایل چند کیلوبایتی است. اما همین فایل کوچک، قدرت فوق العاده‌ای دارد و کارهای بسیار زیادی میتوان با آن انجام داد.
- انیمیشن ها و افکت های زیبایی به المان هایتان اضافه کنید. برای مثال وقتی که کاربر روی یک المان کلیک کرد، افکت های مختلفی روی آن اجرا شود.
- درخواست های Ajax به سمت سرور ارسال کنید و اطلاعات را بدون refresh صفحه از دیتابیس دریافت کنید.
- تگ های HTML یا محتویات صفحه وب خود را اضافه، حذف، ادیت و… کنید. برای مثال یک تگ <div> اضافه کنید یا یک تگ <p> حذف کنید یا یک Class یا id خاص را به یک تگ خاص اضافه کنید.
- اسلایدرهای عکس زیبا بسازید
- منوهای باز شونده‌ی زیبا طراحی کنید (مانند منوهای بالای سایت یادیفای که با رفتن موس روی آن‌ها، زیر منوهایی برای شما نمایش داده میشود).
- به فرم های ثبت نام، ورود و… اعتبار سنجی را اضافه کنید. برای مثال چک کنید که اگر رمز کاربر کمتر از ۸ کاراکتر بود، اجازه‌ی ثبت نام به کاربر داده نشود.
- و بسیاری کارهای دیگر که میتواند به جذاب شدن صفحات وب شما بسیار کمک کند.
ویژگی های جیکوئری
- قابلیت اجرا بر روی مرورگرهای رایج مانند اینترنت اکسپلورر، فایرفاکس، کروم و...
- قابلیت تغییر خصوصیات CSS
- متحرک سازی و قرار دادن افکت روی عناصر وب سایت
- کار با ایجکس
- کنترل آسان و قدرتمندتر رویدادها (Events)
- ایجاد افکت و حرکات انیمیشن
- توسعه دادن پلاگین ها
به کارگیری همه این اجزای جی کوئری کمک میکند صفحات وب قدرتمند و داینامیک (پویا) داشته باشیم.
مزایای جیکوئری
جیکوئری امروزه محبوبترین کتابخانه جاوا اسکریپت در حال استفاده است. جیکوئری نرم‌افزار متن باز(open source) و رایگان است که تحت دو پروانه GPL و MIT منتشر میشود. دستور زبان جیکوئری به گونه‌ای طراحی شده است که عمل هدایت به پرونده را آسان تر نموده است. بدین صورت که میتوان حرکات انیمیشن و رویدادهایی را در صفحه ایجاد کرد و به وسیله آن نرم‌افزارهای مبتنی بر Ajax را ایجاد نموده و توسعه داد. همچنین این اختیار را به برنامه نویسان میدهد که پلاگین هایی برای کتابخانه جاوا اسکریپت ایجاد کنند.
آیا جیکوئری موجب کند شدن وب‌سایت میشود؟
افزودن انواع مختلف کتابخانه‌ها، فریمورک‌ها و کدها به وب‌سایت، ساده‌ترین روش برای کُند ساختن زمان بارگذاری صفحه به خصوص برای کاربران موبایل یا اتصال‌های شبکه ضعیف محسوب میشود. با این حال جیکوئری یک استثنا در این زمینه است، چون حجم بسیار کمی دارد و همه جا استفاده میشود. بنابراین اگر از یک CDN محبوب مانند گوگل به آن ارجاع بدهید، این احتمال وجود دارد که بیش از نیمی از کاربران شما از قبل آن را روی سیستم خود به صورت کش‌شده داشته باشند و نیازی به دانلود هیچ چیزی از روی سرور شما نداشته باشند. با این حال این موضوع به تنهایی توجیهی برای گنجاندن آن در وب‌سایت نیست، زیرا همچنان باید از حافظه سیستم کاربر بارگذاری و اجرا شود که همه این‌ها به زمان نیاز دارند.
مشکلات کار با JQuery
اگر کاربر شما کتابخانه جیکوئری را روی سیستم خود به صورت کش‌شده نداشته باشد، میتوانید از نسخه minify و gzipp-شده آن استفاده کنید که تنها 28.78 کیلوبایت حجم دارد و احتمالاً حتی از حجم HTML شما نیز کمتر است. از آنجا که جیکوئری موجب مسدود شدن رندر صفحه میشود، باید آن را پیش از نمایش صفحه بارگذاری کنید. برای کاربران موبایل چیز خوبی محسوب نمی‌شود. اگر می‌خواهید وب‌سایت غالباً استاتیک خود را تا حد امکان روی همه دستگاه‌ها در سریع‌ترین زمان ممکن بارگذاری کنید، احتمالاً بهتر است به جای جیکوئری از جاوا اسکریپت خالص استفاده کنید. اما اگر وب‌سایت شما به مقدار زیادی دینامیک است، جی کوئری و دیگر کتابخانه‌ها ارزش استفاده را دارند، چون سرعت توسعه را بالا می‌برند. برای وب‌سایت‌های داخل سازمانی، پنل‌های ادمین یا هر چیزی که در مواجهه با کاربر نیست، گنجاندن این برنامه موجب ایجاد هیچ دغدغه‌ای نخواهد بود.
پیش نیازهای دوره آموزش JQuery
قبل از اینکه دوره ی آموزش رایگان jQuery را شروع کنید، شما باید دانش پایه ای(حداقلی) از موارد زیر را داشته باشید:
- HTML
- CSS
- JavaScript
شما می توانید برای یادگیری موارد بالا از آموزش های کدیاد استفاده کنید.
آیا باید از جیکوئری استفاده کنیم؟
جیکوئری یک کتابخانه و نه یک فریمورک است. یک کتابخانه برخی ابزارهای مفید برای کاربرد شما ارائه میکند یا یک مشکل را که جاوا اسکریپت خالص در آن عملکرد خوبی ندارد حل میکند. یک فریمورک مانند Recat یا Vue ساختار مستحکم‌تری محسوب میشود و ارتباط بیشتری با طرز کار اپلیکیشن دارد. اما در زمینه اپلیکیشن‌های بزرگ، مزیت‌های آن کم‌رنگ‌تر می‌شوند. زیرا این کتابخانه برای تبدیل شدن به موتور وب اپلیکیشن‌ها طراحی نشده است، بلکه غالباً به جای فریمورک‌های پیچیده‌تر برای ساخت صفحه‌های دینامیک ساده مورد استفاده قرار می‌گیرد. این کتابخانه برای ساخت اپلیکیشن‌های ساده عملکرد خوبی دارد، اما استفاده از آن روی پروژ‌ه‌های بزرگ‌تر دشوار است. در این موارد شما احتمالاً به سازمان‌دهی بیشتر، ماژولار بودن و قابلیت بسط پذیری نیاز دارید که فریمورک‌های کامل در اختیار شما قرار می‌دهند.
سخن پایانی
با این حال این برنامه نفوذ بسیار گسترده‌تری از یک فریمورک بزرگ مانند React دارد. بنابراین اگر نمی‌خواهید کار چندان صیقل‌یافته‌ای تولید کنید، این برنامه میتواند کمک زیادی به پاک‌سازی کد شما بکند. اگر روی کدبیس از قبل موجود کار میکنید، افزودن جیکوئری در مقایسه با یک فریمورک کامل بسیار آسان‌تر است و نیاز به ریفکتور، یادگیری و به‌روزرسانی کمتری دارد. به علاوه جیکوئری بسیار ساده‌تر از اغلب فریمورک‌های وب است و نیازمند بازنگری در طرز کار کد نیست. جیکوئری در نهایت یک کتابخانه برای دست‌کاری DOM است. از این رو اگر در یک مورد خاص به دست‌کاری‌های DOM فراتر از سطحی که جاوا اسکریپت خالص ارائه میکند نیاز دارید. بنابراین برنامه میتواند برای شما مناسب باشد.
سرفصل های دوره
شروع کار با jQuery
Selectors و Filters
ایجاد و تغییر محتوای html
آشنایی با Events یا رویداد ها
آشنایی با Event یا رویداد ها قسمت 2
آشنایی با Event یا رویداد ها قسمت 3
بررسی Effect ها (Fade و Slide)
بررسی Effect ها (animation)
Selectors و Filters (قسمت 2)
Get در سند html با جی کوئری
Set کردن و تغییر در DOM
حذف المان ها در DOM
css Manipulation
پیشمایش در DOM یا Traversing
پیشمایش در DOM یا Traversing (قسمت 2)
پیشمایش در DOM یا Traversing (قسمت 3)
دریافت داده با َAjax
دریافت داده با Ajax (قسمت 2)
کار با Shorthand Methods
دریافت داده از نوع XML و JSON
ارسال اطلاعات کاربر توسط Ajax
دریافت لیست کاربران با Ajax
ایجاد قابلیت جستجوی آنی با Ajax
شروع پروژه عملی - ساخت preloader
پروژه عملی - ساخت اسلایدر
پروژه عملی - ساخت ProgressBar (قسمت 1)
پروژه عملی - ساخت ProgressBar (قسمت 2)
پروژه عملی - پیاده سازی Services Tabs
پروژه عملی - پیاده سازی Working Section
پروژه عملی - استفاده از Jquery Magnifier
پروژه عملی - قسمت Testimonials
پروژه عملی - قسمت Clients و Counter
پروژه عملی - قسمت Header
پروژه عملی - پیاده سازی Scrolling
پروژه عملی - پیاده سازی Animation المان ها
پیشنیاز های دوره چه چیزهایی هستند؟
- این دوره پیشنیازی ندارد
نظرات دانشجویان
مدرس دوره
محمد هاشمی
چهار ساله که تو حوزه برنامه نویسی و IT بعنوان مدرس , مشاور و کارشناس فعالیت میکنم … و تخصص اصلیم برنامه نویسی وب مبتی بر کتابخانه های جاوااسکریپت هست
سوالات متداول
یک کتابخانه کوچک و جذاب جاوا اسکریپت است که کار ما را با استفاده از زبان نشانه گذاری HTML آسان تر می کند. ما با استفاده JQuery کد های کمتری در وب سایت می نویسیم ولی کارهای بیشتری انجام می دهیم. این کتابخانه دارای دسته بندی انیمیشن های منحصر به فرد است که می توانیم در وب سایتمان استفاده کنیم. ما با استفاده از این کتابخانه به تمام عناصر موجود در کتابخانه دسترسی خواهیم داشت.
این کتابخانه شگفت انگیز، ویژگی ها و کاربرد های بسیار زیادی را در اختیار برنامه نویسان و توسعه دهندگان قرار خواهد داد که برخی از منحصر به فرد ترین ویژگی های آن عبارت اند از : (قابلیت اجرا بر روی اکثر مرورگر ها، تغییر خصوصیات CSS، متحرک سازی و قرار گیری افکت بر روی عناصر وب، کار با Ajax، توسعه پلاگین و …).
بسیاری از برنامه نویسان و توسعه دهندگان JQuery، را پر از مزیت می بینند که این مزیت ها باعث محبوبیت و استفاده حداکثر توسط جامعه توسعه دهندگان و برنامه نویسان شده است. مهمترین مزیت استفاده از JQuery، متن باز بودن یا Open source بودن آن است. از دیگر مزیت های استفاده از کتابخانه JQuery می توان به مدیریت انیمیشن ها و کنترل عناصر صفحه وب اشاره کرد.
اضافه کردن کتابخانه ها یا فریمورک ها به یک پروژه باعث افزایش حجم کلی آن می شود اما کتابخانه JQuery با همه کتابخانه ها متفاوت است. حجم این کتابخانه به قدری پایین است که هیچ اختلالی در روند کارکرد وب سایت درست نمی کند. یکی از قابلیت های این کتابخانه استفاده از آن به صورت آنلاین است که با استفاده از CDN انجام می پذیرد.
در این دوره آموزشی منحصر به فرد، در قدم اول به مفاهیم مقدماتی و آشنایی با کتابخانه JQuery خواهیم پرداخت و در ادامه به سراغ Event ها و المان های اصلی، انیمیشن ها خواهیم رفت. در آخر هم یک پروژه عملی کامل را باهم پیش خواهیم برد.
دوره آموزش رایگان صفر تا صد JQuery برای افرادی که علاقه مند به کنترل و مدیریت حرفه ای عناصر صفحات وب هستند بسیار مناسب است. همچنین این دوره آموزشی برای افرادی که دوست دارند تا در صفحات وب از انیمیشن ها استفاده کنند و همچنین کد های کمتر با جاوا اسکریپت بنویسند بسیار پیشنهاد می شود.
بله، دوره آموزش رایگان صفر تا صد JQuery پیش نیاز اصلی آن داشتن دانش پایه (مقدماتی) از زبان های نشانه گذاری HTML , CSS و زبان برنامه نویسی Javascript می باشد. اگر هنوز با این موارد آشنا نیستید، از طریق دوره های آکادمی برنامه نویسی کدیاد سریعا اقدام کنید.
یکی از مزیت های مهم این دوره آموزشی، آموزش جامع و کامل کتابخانه JQuery می باشد. از دیگر مزیت های این دوره آموزشی رایگان می توان به پروژه محور بودن اشاره کرد. در این دوره دانشجویان بعد از گذراندن هر مفهوم، با تمرین و تکرار و انجام دادن یک پروژه عملی آن مفهوم را بهتر یاد خواهند گرفت.