دوره H جی کوئری
درس 1: بررسی اجمالی جی کوئری
جی کوئری چیست؟!
قبلا در «این مطلب» که خارج از این دوره است، در مورد ماهیت جی کوئری بطور کامل توضیح دادیم. اما برای یاد آوری هم که شده، یک توضیح خلاصه در ادامه خواهیم داشت.
جی کوئری یک کتابخانه‌ی سریع، کوچک و با ویژگی‌های قدرتمندی برای زبان جاوا اسکریپت است. این کتابخانه، کار با سند HTML را بسیار ساده می‌کند. جی کوئری به زبان جاوا اسکریپت نوشته شده و در واقع تمام قدرت خود را از جاوا اسکریپت می‌گیرد؛ بناربراین قبل از اینکه کار با جی کوئری را شروع کنید، باید جاوا اسکریپت بلد باشید.
ابتدا نگاهی بیندازیم به روند نمونه برداری از یک سند HTML با جاوا اسکریپت خالص:
برای مثال فرض کنید بخواهیم عنصر یا المنت HTML ای که آیدی آن برابر FuLLKade است را گرفته و سپس کد HTML بین آن را به Welcome back تغییر دهیم. بصورت زیر:
|
1 2 |
var el = document.getElementById("FuLLKade"); el.innerHTML = "Welcome back"; |
حالا برای انجام همین کار در jQuery، بصورت زیر عمل می‌کنیم:
|
1 |
$("#FuLLKade").html("Welcome back"); |
چقدر ساده، چقدر زیبا! البته در درس‌ها و بخش‌های آینده، قواعد و سینتکس جی کوئری را به شما یاد خواهم داد؛ ولی فعلا خواستم تا با یک مثال ساده، نشان دهم که انجام چنین کارهایی در جی کوئری چقدر ساده است.
فراخوانی جی کوئری در سند HTML
شما می‌توانید فایل JS کتابخانه‌ی جی کوئری را بطور مستقیم از سایت رسمی آن دانلود کرده و در پروژه خود استفاده کنید؛ ولی پیشنهاد می‌کنم که آن را از CDN (Content Delivery Network)های معتبری مثل گوگل و مایکروسافت در پروژه خود فراخوانی کنید. که من خودم از CDN خود سایت جی‌کوئری در این آموزش استفاده می‌کنم. بنابراین می‌توان بصورت زیر، آن را در صفحه بارگزاری کرد:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <head> <title>FullKade</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body></body> </html> |
بهترین جا برای نوشتن کد جی کوئری در زمان لود سایت
فرض کنید شما در حال قدم زدن به سمت من هستید و 500 متر با من فاصله دارید، در هنگامی که فاصله شما از من (یا من از شما) مثلا به 400 متر می‌رسد، من دستم را دراز می‌کنم تا با شما دست بدهم!!!!! حالا در سند HTML وقتی کاربر سایت ما را باز می‌کند، باید چه موقع کدِ خود را اجرا کنیم؟! (منظور کدی که در ارتباط با عنصار HTML است)
پس باید اینگونه کدها را که شرط را در زمان لود شدن کامل صفحه اجرا کنیم.بدین منظور، از رویداد ready شیء document بصورت زیر استفاده می‌کنیم:
|
1 2 3 |
$(document).ready(function() { // کدتان را این جا بنویسید }); |
حرف $ در جی کوئری: برای دسترسی به جی کوئری، از $ استفاده می‌شود! همانطور که در بالا دیدید، $ را نوشتیم، سپس به شیء document دسترسی ایجاد کرده و یک تابع به رویداد ready آن اضافه نمودیم. البته در جی کوئری، یک راه میانبور نیز برای نوشتن کد بالا وحود دارد! بصورت زیر:
|
1 2 3 |
$(function() { // کدتان را این جا بنویسید }); |
این کد، همان کار کد قبلی را انجام می‌دهد؛ ولی ساده‌تر از آن است.
[Sahpe tcolor=”black” color=”#FFE0B2″]اگر با دیدن ساختار جی کوئری یا به عبارتی این کدی که در بالا نوشتیم گیج شدید، اصلا نگران نباشید؛ در درس‌های آینده بیشتر توضیح خواهم داد.[/Shape]
یک مثال: در ابتدای درس، مقایسه‌ای بین کد «جاوا اسکریپت خالص» و «کد جاوا اسکریپت نوشته شده با جی کوئری» انجام گرفت. اما بیایید حالا همان کد را بطور کامل‌تر و پس از لود شدن کامل صفحه بنویسیم! بصورت زیر:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>FullKade Website</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <div id="FuLLKade">Test</div> <script> $(function() { $("#FuLLKade").html("Welcome back"); }); </script> </body> </html> |
Syntax یا قواعد جی کوئری
جی کوئری در واقع، برای انتخاب کردنِ (یا کوئری زدن، پرس و جو کردن) عناصر HTML و انجام اعمال مختلفی بروی آنها استفاده می‌شود؛ که سینتکس ابتدایی آن بصورت زیر است:
|
1 |
$("SELECTOR").ACTION() |
- $ : کلید دسترسی به جی کوئری
- SELECTOR : یک ساختار رشته‌ای، برای پیدا کردن المنت یا عناصر مورد نظر؛ تا بعدا برروی آنها کاری انجام دهیم.
- ACTION: کاری که می‌خواهیم بر روی عنصر(های) انتخاب شده انجام دهیم.
مثال:
|
1 2 3 |
$("p").hide() // مخفی کردن تمام پاراگراف ها $(".FuLLKade").hide() // مخفی کردن تمام المنت هایی که کلاس فول کده را دارند $("#FuLLKade").hide() // مخفی کردن المنتی که آیدی فول کده را دارد |
یادتان هست در مثال قبلی چه چیزی نوشته بودیم؟!
|
1 |
$("#FuLLKade").html("Welcome back"); |
همانطور که می‌بینید، در اینجا المنتی که آیدی آن برابر FuLLKade است را گرفته و سپس تابع html را فراخوانی و مقدار Welcome back را به آن ارسال می‌کنیم. تابع html مقدار بین المنت، یعنی محتوای HTML بین یک المنت را تغییر می‌دهد.
کانال تلگرام فول کده
نظرات ثبت شده بدون دیدگاه