آموزش مقدماتی jQuery و آشنایی با جی کوئری

صفحه نخست » آموزش وردپرس » آموزش مقدماتی jQuery و آشنایی با جی کوئری
طراحی سایت

education-foundation-jquery-parswp

آموزش مقدماتی jQuery

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

حتما بخوانید : طراحی پاپ آپ های مختلف با Icegram

پیش نیاز ها
برای اینکه بتوانید وارد دنیای jQuery شوید لازم است که حدافل دانش و آشنایی مقدماتی در زمینه های زیر داشته باشید :

  • HTML
  • CSS
  • JavaScript

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

jQuery چیست؟ چرا از jQuery استفاده میکنیم؟
جی کوئری یک کتابخانه سبک جاوااسکریپت است که به شما اجازه میدهد با نوشتن کد کمتر، کارهای بیشتری انجام دهید. هدف جی کوئری این است که استفاده از جاوااسکریپت را در سایت به حداقل سادگی برساند. با استفاده از جی کوئری میتوان از تکرار بی شمار خط ها در جاوااسکریپت جلوگیری کرده و بسیاری از کارهای پیچیده را تنها با فراخوانی یک متد در یک خط کوتاه انجام داد. همچنین با به کار گیری جی کوئری، بسیاری از اعمال دیگر مثل فراخوانی های AJAX و اعمال تغییرات در DOM بسیار ساده تر میشود. در زیر مختصرا به برخی از امکانات جی کوئری اشاره میکنیم :

  • اعمال تغییرات در DOM/HTML
  • اعمال تغییرات در استایل های CSS
  • متد وقایع HTML
  • پیاده سازی افکت ها و انیمیشن ها
  • ایجکس
  • ابزار های کمکی

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

لازم به ذکر است که کتابخانه ها و فریم ورک های دیگری هم برای استفاده از JavaScript وجود دارد ولی کتابخانه جی کوئری در بین این کتابخانه ها و فریم ورک ها از همه محبوب تر است و کمپانی های بزرگی مثل گوگل، IBM، مایکروسافت و نت فلیکس از آن بهره میبرند.
لازم به ذکر است که تیم جی کوئری توانسته کاری کند که این کتابخانه روی تمام مرورگر های اصلی و مهم به شکلی یکسان اجرا شود. حتی اینترنت اکسپلورر ۶!

حتما بخوانید : آموزش قرار دادن کد امنیتی Captcha برای وردپرس

چگونه جی کوئری را به سایت اضافه کنیم؟
اگر میخواهید از جی کوئری در سایت های وردپرسی استفاده کنید، لازم نیست (و نباید) هیچ کاری برای فراخوانی آن انجام دهید. وردپرس به صورت پیشفرض این فراخوانی را در سایت انجام میدهد اما برای استفاده از جی کوئری در سایت های دیگر دو روش پیش رو دارید :

  • میتوانید جی کوئری را از سایت رسمی اش (jquery.com) دانلود کرده و آن را مستقیما از سایت خود فراخوانی کنید.
  • یا اینکه میتوانید از طریق CDN هایی مانند گوگل آن را در سایت فراخوانی کنید.

در ادامه به شرح هر دو روش میپردازیم.

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

دانلود جکوئری : لینک دانلود

اگر برایتان سوال است که بین نسخه Production و Development کدام یک را دانلود کنید باید بدانید که نسخه ی Production نسخه ای فشرده و مخصوص سایت هایی است که لایو و در حال کار هستند و نسخه Development مخصوص محیط های توسعه است. کد نسخه ی Development فشرده نبوده و کاملا قابل خواندن است. اگر هم بین انتخاب نسخه ی ۱ و ۲ جی کوئری شک دارید لازم است مد نظر داشته باشید که نسخه ۲ جی کوئری از اینترنت اکسپلورر ۶ و ۷ و ۸ پشتیبانی نمیکند.
پس از دانلود جی کوئری از سایت رسمی اش، کافی است آن را در تگ <head> سایت خود صدا کنید :

<script src="jquery-1.12.1.min.js"></script>

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

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

از سرور گوگل :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

از سرور مایکروسافت :

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>

در اینجا لازم است به چند نکته اشاره کنیم. اول اینکه مد نظر داشته باشید آدرس فوق را میتوانید بر اساس ورژن مورد نیازتان تغییر دهید. دوم اینکه اگر از CDN استفاده میکنید باید مزایا و معایب آن را هم در نظر داشته باشید. مثلا بسیاری از کاربران ایرانی ممکن است نتوانند جی کوئری را از روی سرور گوگل بارگذاری کنند. اما به طور کلی اگر مبحث کاربران ایرانی را در نظر نگیریم، استفاده از CDN به میزبانی جی کوئری توسط خود شما ارجحیت خواهد داشت به این دلیل که بسیاری از افراد قبلا در سایت های دیگر این کتابخانه ها را دریافت کرده اند و وقتی وارد سایت شما میشوند، این کتابخانه از کش مرورگر آنها بارگذاری میشود. همچنین CDN ها همیشه سعی میکنند فایل را از نزدیک ترین سرور به محل کاربر برای وی ارسال کنند که همین موارد میتواند به بالاتر رفتن سرعت بارگذاری کمک کند.

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

آشنایی با سینتکس یا نحوه نگارش jQuery
در ساده ترین حالت Syntax جی کوئری به شکل زیر است :

$(selector).action()
  • علامت $ جی کوئری را تعریف کرده و مورد دسترسی قرار میدهد
  • selector نشان دهنده ی عنصر html ای است که مایلیم مورد دسترسی قرار دهیم
  • action نشان دهنده ی عملی است که مایلیم جی کوئری انجام دهد.

به مثال های زیر توجه کنید :

$(this).hide()
عنصر فعلی را محو میکند

$("p").hide()
تمامی عناصر پاراگراف را محو میکند

$(".test").hide()
تمامی عناصری که دارای کلاس test باشند را محو میکند

$("#test").hide()
تمامی عناصری که دارای آی دی test باشند را محو میکند

استفاده از واقعه Document Ready
ابتدا اجازه بدهید به این نکته اشاره کنیم که منظور از واقعه همان event است. احتمالا دقت کرده اید که تمام کد های جی کوئری در میان کد زیر قرار میگیرند :

$(document).ready(function(){

   // jQuery methods go here...

});

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

  • سعی در مخفی کردن عنصری که هنوز ایجاد نشده
  • سعی در دریافت ابعاد تصویری که هنوز بارگذاری نشده

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

البته برای استفاده از واقعه document ready از حالت کوتاه تر زیر نیز میتوانید استفاده کنید :

$(function(){

   // jQuery methods go here...

});

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

اشتراک گذاری :
مطالب زیر را حتما بخوانید

تغییر آدرس ورود وردپرس با پلاگین

سلام خدمت همراهان وردپرس؛ یکی از راههای جلوگیری از نفوذ ربات ها و همچنین هکرها به ...

آمار حرفه ای وردپرس با WP Statistics

مشاهده آمار کامل وردپرس با WP Statistics همیشه استفاده از برنامه ای که بتواند آمار ...

ایمن سازی وردپرس با افزونه iThemes Security

ایمن سازی وردپرس با افزونه iThemes Security ایمن سازی وردپرس یکی از دغدغه های ...

دیدگاه کاربران
نظرات کاربران برای این مطلب را دنبال کنید


برای نمایش دیدگاه کلیک کنید
    ۰ دیدگاه ثبت شده
اطلاعات پست

۲۹۳۰

بازدید

۰

دیدگاه

0

علاقه مندی

5 از 1 رای