آموزش jQuery (جی کوئری) | از مقدماتی

سلام به شما همراهان روکسو. به دوره ی آموزش jQuery (جی کوئری) خوش آمدید. در این دوره قصد داریم شما را با این کتابخانه قدرتمند جاوا اسکریپت آشنا کنیم و روش استفاده از آن را به شما آموزش دهیم. پیش نیاز دوره آموزش jQuery آشنایی با HTML ،CSS و جاوا اسکریپت است.

جی کوئری چیست؟

جی کوئری یکی از کتابخانه های جاوا اسکریپت است. شاید بپرسید کتابخانه جاوا اسکریپت چیست؟ در پاسخ باید بگوییم که کتابخانه های جاوا اسکریپت مجموعه ای از کدها و توابع جاوا اسکریپت هستند که می توانیم با استفاده از آن‌ ها و به کار بستن چارچوب های آن ها از بسیاری ویژگی ها و قابلیت هایشان استفاده کنیم.

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

برخی از کارهایی که می توان با استفاده از کتابخانه جی کوئری انجام داد:

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

چرا جی کوئری ؟

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

اضافه کردن جی کوئری به یک صفحه وب

دو راه برای استفاده از جی کوئری در یک صفحه وب وجود دارد:

۱: دانلود جی کوئری و استفاده آن

۲: اتصال به لینک جی کوئری از طریق اینترنت

روش اول:

پس از دانلود جی کوئری از سایت آن jQuery.com باید آن را به صفحه HTML خود متصل کنیم. برای این کار یک تگ <script> در <head> ایجاد می کنیم و src آن را برابر با آدرس فایل جی کوئری با پسوند .js قرار می دهیم.

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

روش دوم:

در این روش پس از باز کردن تگ <script> در <head> مقدار src را برابر با آدرس اینترنتی فایل آن قرار می دهیم. گوگل هم از این روش استفاده می کند.

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

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

ساختار و Syntax جی کوئری

ساختار دستورات جی کوئری از دو بخش تشکیل شده است؛ یک انتخاب کننده یا Selector و یک Action

$(selector).action()

علامت $ به جی کوئری اشاره دارد و نشان می دهد که ما در حال نوشتن یک دستور جی کوئری هستیم.
Selector ابزاری برای انتخاب یک یا چند عنصر در صفحه است.
Action عملی است که می خواهیم بر روی عنصر انتخاب شده انجام دهیم.

چند مثال:

$("p").hide() – تگ های p را مخفی می کند

$(".test").hide() – عناصر با کلاس test را مخفی می کند

$("#test").hide() – عنصری با id tset را مخفی می کند

اجرای جی کوئری پس از لود کامل صفحه

تمامی کدهای جی کوئری که ما می نویسیم باید در یک رویداد نوشته شود تا قبل از بارگذاری کامل صفحه، کدهای جی کوئری ما اجرا نشود:

$(document).ready(function(){

  // کد های جی کوئری در اینجا نوشته میشود

});

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

Selector ها در جی کوئری

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

انواع selector ها:

۱: انتخاب عنصر بر اساس نام آن:

("p")$

در مثال بالا شما تمامی عناصر p (پاراگراف) های صفحه را انتخاب کرده اید.

مثال کامل آن:

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

در نمونه ی بالا ما ابتدا دکمه ها را انتخاب کرده ایم و سپس برای رویداد کلیک بر روی آن یک function تعریف کرده ایم که در آن function ابتدا پاراگراف ها را انتخاب و سپس آن ها را hide می کنیم. (در ادامه بیشتر درباره توابع و دستورات صحبت می کنیم فعلا فقط سعی کنید روش استفاده از selector ها را درک کنید.)

۲: انتخاب عنصر براساس id:

با استفاده از این selector می توانیم عناصر را بر اساس id آن ها انتخاب کنیم. ساختار آن نیز به شکل زیر است:

("test#")$

(مانند دیگر selector ها ابتدا علامت $ و سپس پرانتز را می نویسیم و سپس با استفاده از علامت # به id مورد نظر اشاره می کنیم)

مثال بالا عنصری با id test را انتخاب می کند.

3: انتخاب بر اساس نام کلاس:

با استفاده از این selector عناصر را بر اساس نام کلاس آن ها انتخاب می کنیم.

برای اشاره به کلاس ها از نقطه قبل از نام کلاس اسفاده می کنیم.

مثال:

("test.")$

مثال بالا عناصری که کلاس test دارند را انتخاب می کند.

خلاصه این قسمت

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

امیدوارم این قسمت از آموزش jQuery برای شما مفید بوده باشد. در قسمت های آينده بیشتر وارد کدنویسی و ویژگی های این کتابخانه قدرتمند خواهیم شد.

منبع: سایت W3Schools