آموزش مقدماتی jQuery – آشنایی با جی کوئری
به درخواست کاربران و همراهان همیشگی مسترکد بر آن شدیم که از این پس آموزش هایی را نیز در زمینه ی جی کوئری و جاوااسکریپت در مجموعه آموزش های مسترکد درج کنیم. بر همین اساس امروز با اولین بخش از این مجموعه آموزش ها با عنوان آموزش مقدماتی jQuery در خدمت شما هستیم. این مقاله ی آموزشی بهترین منبع برای تمام اشخاصی است که با داشتن کمترین اطلاعات درباره ی جاوااسکریپت و جی کوئری مایلند به این عرصه وارد شده و شروع به استفاده از جی کوئری نمایند. بنابراین مطالعه ی این آموزش را به همه ی علاقه مندان این موضوع توصیه میکنیم تا در آینده بتوانید به بهترین شکل سایر آموزش های درج شده در این زمینه را پیگیری نمایید. با ما همراه باشید.
پیش نیاز ها
برای اینکه بتوانید وارد دنیای jQuery شوید لازم است که حدافل دانش و آشنایی مقدماتی در زمینه های زیر داشته باشید :
- HTML
- CSS
- JavaScript
ادامه ی این آموزش را با فرض اینکه شما آشنایی اندکی با موارد بالا دارید پی خواهیم گرفت. البته حتما در آینده مقالاتی پایه ای در رابطه با مضامین فوق در سایت درج میکنیم تا با آنها آشنایی بهتری پیدا کنید.
jQuery چیست؟ چرا از jQuery استفاده میکنیم؟
جی کوئری یک کتابخانه سبک جاوااسکریپت است که به شما اجازه میدهد با نوشتن کد کمتر، کارهای بیشتری انجام دهید. هدف جی کوئری این است که استفاده از جاوااسکریپت را در سایت به حداقل سادگی برساند. با استفاده از جی کوئری میتوان از تکرار بی شمار خط ها در جاوااسکریپت جلوگیری کرده و بسیاری از کارهای پیچیده را تنها با فراخوانی یک متد در یک خط کوتاه انجام داد. همچنین با به کار گیری جی کوئری، بسیاری از اعمال دیگر مثل فراخوانی های AJAX و اعمال تغییرات در DOM بسیار ساده تر میشود. در زیر مختصرا به برخی از امکانات جی کوئری اشاره میکنیم :
- اعمال تغییرات در DOM/HTML
- اعمال تغییرات در استایل های CSS
- متد وقایع HTML
- پیاده سازی افکت ها و انیمیشن ها
- ایجکس
- ابزار های کمکی
در واقع حتی میتوان گفت که جی کوئری برای هر عملی که مد نظر شماست یک پلاگین دارد. کافی است بدانید چه میخواهید و کجا باید پیدایش کنید.
لازم به ذکر است که کتابخانه ها و فریم ورک های دیگری هم برای استفاده از JavaScript وجود دارد ولی کتابخانه جی کوئری در بین این کتابخانه ها و فریم ورک ها از همه محبوب تر است و کمپانی های بزرگی مثل گوگل، IBM، مایکروسافت و نت فلیکس از آن بهره میبرند.
لازم به ذکر است که تیم جی کوئری توانسته کاری کند که این کتابخانه روی تمام مرورگر های اصلی و مهم به شکلی یکسان اجرا شود. حتی اینترنت اکسپلورر 6!
چگونه جی کوئری را به سایت اضافه کنیم؟
اگر میخواهید از جی کوئری در سایت های وردپرسی استفاده کنید، لازم است بدانید که وردپرس به صورت پیشفرض یک نسخه از جی کوئری را به همراه هسته خود در اختیار شما قرار میدهد. بنابراین برای بهره گیری از جی کوئری، نیازی نیست که خودتان فایلی را به سیستم اضافه کنید. تنها کافی است به وردپرس اعلام کنید که لازم است این اسکریپت در سایت شما فراخوانی شود. مثلا :
1 2 3 4 | function theme_scripts() { wp_enqueue_script('jquery'); } add_action('wp_enqueue_scripts', 'theme_scripts'); |
اما برای استفاده از جی کوئری در سایت های دیگر دو روش پیش رو دارید :
- میتوانید جی کوئری را از سایت رسمی اش (jquery.com) دانلود کرده و آن را مستقیما از سایت خود فراخوانی کنید.
- یا اینکه میتوانید از طریق CDN هایی مانند گوگل آن را در سایت فراخوانی کنید.
در ادامه به شرح هر دو روش میپردازیم.
روش اول : اگر مایلید جی کوئری را به طور مستقیم از روی هاست خود فراخوانی کنید، لازم است که ابتدا به بخش دانلود ها در سایت رسمی جی کوئری مراجعه کرده و جی کوئری را دانلود کنید.
اگر برایتان سوال است که بین نسخه Production و Development کدام یک را دانلود کنید باید بدانید که نسخه ی Production نسخه ای فشرده و مخصوص سایت هایی است که لایو و در حال کار هستند و نسخه Development مخصوص محیط های توسعه است. کد نسخه ی Development فشرده نبوده و کاملا قابل خواندن است. اگر هم بین انتخاب نسخه ی 1 و 2 جی کوئری شک دارید لازم است مد نظر داشته باشید که نسخه 2 جی کوئری از اینترنت اکسپلورر 6 و 7 و 8 پشتیبانی نمیکند.
پس از دانلود جی کوئری از سایت رسمی اش، کافی است آن را در تگ <head> سایت خود صدا کنید :
1 | <script src="jquery-1.12.1.min.js"></script> |
توجه داشته باشید که با توجه به ورژن جی کوئری و محل آپلود ممکن است لازم باشد نام فایل و مسیر آن را در کد بالا تغییر دهید.
روش دوم : در روش دوم بجای اینکه جی کوئری را روی هاست قرار دهیم، میخواهیم آن را از یک CDN فراخوانی کنیم. فراخوانی را میتوانید از CDN گوگل یا مایکروسافت انجام دهید.
از سرور گوگل :
1 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> |
از سرور مایکروسافت :
1 | <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script> |
در اینجا لازم است به چند نکته اشاره کنیم. اول اینکه مد نظر داشته باشید آدرس فوق را میتوانید بر اساس ورژن مورد نیازتان تغییر دهید. دوم اینکه اگر از CDN استفاده میکنید باید مزایا و معایب آن را هم در نظر داشته باشید. مثلا بسیاری از کاربران ایرانی ممکن است نتوانند جی کوئری را از روی سرور گوگل بارگذاری کنند. اما به طور کلی اگر مبحث کاربران ایرانی را در نظر نگیریم، استفاده از CDN به میزبانی جی کوئری توسط خود شما ارجحیت خواهد داشت به این دلیل که بسیاری از افراد قبلا در سایت های دیگر این کتابخانه ها را دریافت کرده اند و وقتی وارد سایت شما میشوند، این کتابخانه از کش مرورگر آنها بارگذاری میشود. همچنین CDN ها همیشه سعی میکنند فایل را از نزدیک ترین سرور به محل کاربر برای وی ارسال کنند که همین موارد میتواند به بالاتر رفتن سرعت بارگذاری کمک کند.
آشنایی با سینتکس یا نحوه نگارش jQuery
در ساده ترین حالت Syntax جی کوئری به شکل زیر است :
1 | $(selector).action() |
- علامت $ جی کوئری را تعریف کرده و مورد دسترسی قرار میدهد
- selector نشان دهنده ی عنصر html ای است که مایلیم مورد دسترسی قرار دهیم
- action نشان دهنده ی عملی است که مایلیم جی کوئری انجام دهد.
به مثال های زیر توجه کنید :
1 2 3 4 5 6 7 8 9 10 11 | $(this).hide() عنصر فعلی را محو میکند $("p").hide() تمامی عناصر پاراگراف را محو میکند $(".test").hide() تمامی عناصری که دارای کلاس test باشند را محو میکند $("#test").hide() تمامی عناصری که دارای آی دی test باشند را محو میکند |
استفاده از واقعه Document Ready
ابتدا اجازه بدهید به این نکته اشاره کنیم که منظور از واقعه همان event است. احتمالا دقت کرده اید که تمام کد های جی کوئری در میان کد زیر قرار میگیرند :
1 2 3 4 5 | $(document).ready(function(){ // jQuery methods go here... }); |
بلاک کد بالا در واقع یک event است. قرار دادن کد جی کوئری در event بالا باعث میشود که دستورات جی کوئری به هیچ عنوان پیش از اتمام بارگذاری صفحه اجرا نشوند. اگر برایتان یک علامت سوال ایجاد شده که چه دلیلی دارد برای اجرای کد جی کوئری تا اتمام لود صفحه منتظر بمانیم در اینجا میتوان به دو مثال ساده اشاره کرد که در صورت عدم منتظر ماندن تا بارگذاری کامل صفحه برای اجرای جی کوئری پیش خواهد آمد :
- سعی در مخفی کردن عنصری که هنوز ایجاد نشده
- سعی در دریافت ابعاد تصویری که هنوز بارگذاری نشده
بنابراین لازم است که متد جی کوئری خود را همیشه در واقعه ای که در بالا ذکر شد صدا کنید تا از اتفاق افتادن موارد فوق جلوگیری به عمل آید.
البته برای استفاده از واقعه document ready از حالت کوتاه تر زیر نیز میتوانید استفاده کنید :
1 2 3 4 5 | $(function(){ // jQuery methods go here... }); |
اینکه کدام سینتکس را انتخاب میکنید به خودتان بستگی دارد ولی واضح است که خواندن حالت طولانی تر این کد در زمان مرور دوباره، ساده تر و قابل فهم تر خواهد بود.
این بخش از آموزش را همین جا خاتمه میدهیم. اگر در آینده با مسترکد همراه باشید، این آموزش را به طور کامل تر و مفصل تر با هم ادامه خواهیم داد.
مطالعه بخش دوم : آشنایی با Selector ها و Event ها در jQuery
ممنون خیلی مفید بود در مورد کدنویسی مطالب اموزشی زیاد قرار بدید
وخیلی سطح پایین توضیح بدید که درکش برامون راحت باشه ممنون
خواهش میکنم. انشالله حتما …
سلام
یعنی تا زمانی که یک کد jQuery در صفحه لود شده وجود نداشته باشه library مورد نیاز توسط وردپرس بارگزاری نمیشه؟
ممنون
سلام
این بخش استفاده از جی کوئری در وردپرس رو ما با عرض شرمندگی خیلی بد توضیح داده بودیم … من اصلاحش کردم. الان دوباره اون یه تیکه رو بخونید پاسختون رو میگیرید.
توضیحات بیشتر اینکه :
وردپرس زمانی که نوار مدیریت قابل مشاهده هست، خودش به صورت پیشفرض جی کوئری رو بارگذاری میکنه. خارج از اون (یعنی زمانی که شخصی وارد حساب کاربری نشده و نوار ادمین نشون داده نمیشه) اگر میخواید از جی کوئری استفاده کنید باید این مسئله رو به وردپرس اعلام کنید. (wp_enqueue_script) در این حالت نیازی هم نیست که نگران باشید که احیانا در زمان نمایش نوار مدیریت، جی کوئری دوبار صدا میشه، چون وردپرس خودش کال شما رو میبینه و اسکریپت رو فقط یک بار بارگذاری میکنه.
با سلام و تشکر
سوالی که برای من پیش آمد اینست که با توجه به آموزش شما متوان event داکیومنت را نداشت و تمام کدها به درستی اجرا میشود
ولی مشکلی که من دارم این است که تا این کن داکیومنت را در دستورات jQuery نمینویسم دستورات آن اجرا نمیشود
میخواستم بدونم دلیلش چی هست؟
خیلی به دردم خورد
از دیشب تا الان که نزدیک 6 صبحه قشنگ قفل بودم، بعد یه نکته ابتدایی تو این نوشته بود که مغزمو راه انداخت و کارمو بالاخره این موقع صبح تموم کردم
ممنون