مقدمه ای بر jQuery

مقدمه ای بر jQuery

مقدمه ای بر jQuery

مقدمه

HTML، CSS و جاوا اسکریپت سه زبان اصلی وب هستند. ما وب‌ سایت‌هایمان را با HTML ساختار می‌دهیم، آنها را با CSS استایل می‌دهیم، و قابلیت‌های تعاملی را با جاوا اسکریپت اضافه می‌کنیم. در واقع، اکثر انیمیشن ها و هر عملی که در نتیجه کلیک کردن، قراردادن موس روی چیزی یا اسکرول کاربر اتفاق می افتد با جاوا اسکریپت ساخته می شوند.

jQuery کتابخانه ای نوشته شده با جاوا اسکریپت است که با هدف «کمتر بنویس، بیشتر انجام بده» طراحی شده است. jQuery یک زبان برنامه نویسی نیست، بلکه ابزاری است که برای مختصرتر نوشتن کارهای رایجی است که با جاوا اسکریپت انجام می دهیم. jQuery دارای مزیت cross-browser با مرورگرها است، به این معنی که می توانید مطمئن باشید که خروجی کد شما به یک صورت در همه مرورگرهای مدرن نمایش داده می شود.

با مقایسه یک برنامه ساده "Hello World!" در جاوا اسکریپت و جی کوئری، ما می توانیم تفاوت نحوه نوشتن هر دو را ببینیم.

جاوا اسکریپت

document.getElementById("demo").innerHTML = "Hello, World!";


jQuery

$("#demo").html("Hello, World!");

این مثال کوتاه نشان می‌دهد که چگونه jQuery می‌تواند به همان نتیجه نهایی جاوا اسکریپت ساده به روشی مختصرتر دست یابد.

اهداف

این راهنما نیازی به دانش قبلی از jQuery ندارد و موضوعات زیر را پوشش می دهد:

  • نحوه نصب jQuery در پروژه وب.

  • تعریف مفاهیم مهم توسعه وب مانند API، DOM، و CDN.

  • انتخاب کننده ها، رویدادها و جلوه های رایج جی کوئری.

  • مثال هایی عملی برای آزمایش مفاهیم آموخته شده در طول این مقاله.

پیش نیازها

قبل از شروع این راهنما به موارد زیر نیاز دارید:

  • دانش اولیه از HTML و CSS. از قبل باید بدانید که چگونه یک وب سایت ساده راه می توانید اندازی کنید و با انتخابگرهای CSS مانند شناسه ها، کلاس ها و شبه عناصر آشنایی داشته باشید.

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

تنظیم jQuery

jQuery یک فایل جاوا اسکریپت است که در HTML خود به آن لینک خواهید داد. دو راه برای گنجاندن jQuery در یک پروژه وجود دارد:

  • یک نسخه محلی از آن را دانلود کنید.

  • پیوند دادن به یک فایل jQuery از طریق شبکه تحویل محتوا (CDN).
توجه: شبکه تحویل محتوا (CDN) سیستمی از چندین سرور است که محتوای وب را بر اساس موقعیت جغرافیایی به کاربر تحویل می‌دهد. وقتی از طریق CDN به یک فایل jQuery میزبانی شده پیوند می‌دهید، به طور بالقوه سریع‌تر و کارآمدتر از زمانی که آن را روی سرور خود میزبانی کرده باشید، به دست کاربر می‌رسد.

ما از CDN برای ارجاع به jQuery در مثال های خود استفاده خواهیم کرد. می توانید آخرین نسخه جی کوئری را در کتابخانه های میزبانی گوگل بیابید. اگر به جای آن می خواهید آن را دانلود کنید، می توانید یک نسخه از jQuery را از وب سایت رسمی آن دریافت کنید.

ما این تمرین را با ایجاد یک پروژه وب کوچک آغاز خواهیم کرد. این شامل style.css در دایرکتوری css/، scripts.js در دایرکتوری js/ و یک index.html اصلی در ریشه پروژه خواهد بود.

project/ 
├── css/ 
| └── style.css 
├── js/
| └── scripts.js 
└── index.html

برای شروع، یک اسکلت HTML بسازید و آن را به عنوان index.html ذخیره کنید. index.html

<!doctype html> 
<html lang="en"> 
<head> 
 <title>jQuery Demo</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
</body> 
</html>

درست قبل از بسته شدن تگ </body> به CDN جی کوئری پیوند دهید و سپس فایل جاوا اسکریپت سفارشی خود، scripts.js را بعد از آن بنویسید.

index.html

<!doctype html> 
<html lang="en"> 
<head> 
<title>jQuery Demo</title> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="js/scripts.js"></script> 
</body> 
</html>

فایل جاوا اسکریپت شما (scripts.js) باید بعد از کتابخانه jQuery در فایل HTML گنجانده شود وگرنه کار نخواهد کرد.

توجه: اگر یک نسخه محلی از jQuery دانلود کرده اید، آن را در پوشه js/ خود ذخیره کنید و به آن در js/jquery.min.js پیوند دهید.

در این مرحله، کتابخانه jQuery اکنون در سایت شما بارگذاری شده است و شما به API jQuery دسترسی کامل دارید.

نیاز به کمک یا مشاوره دارید؟ با شماره 77637159-021 تماس بگیرید. ما آماده پاسخگویی هستیم!
توجه: رابط برنامه‌نویسی برنامه (API) رابطی است که به برنامه‌های نرم‌افزاری اجازه می‌دهد تا با یکدیگر تعامل داشته باشند. در این مورد، API جی کوئری حاوی تمام اطلاعات و اسناد مورد نیاز برای دسترسی به jQuery است.

استفاده از jQuery

استفاده از jQuery

در هسته خود، jQuery برای ارتباط با عناصر HTML در مرورگر، از DOM استفاده می کند.

مدل شیء سند (DOM) اختصاری برای Document Object Model است و روشی است که توسط آن جاوا اسکریپت (و jQuery) با HTML در مرورگر تعامل برقرار می‌کند. برای آنکه ببینید دقیقا DOM چه چیزی است، در مرورگر وب خود، روی صفحه وب فعلی کلیک راست کنید Inspect را انتخاب کنید. با این کار Developer Tools باز می شود. کد HTML ای که در اینجا مشاهده می کنید DOM است.

هر عنصر HTML یک گره در DOM در نظر گرفته می‌شود - شیئی که جاوا اسکریپت می‌تواند آن را لمس کند و با آن ارتباط برقرار کند. این اشیاء در یک ساختار درختی مرتب شده‌اند که <html> سر ریشه است و هر عنصر تودرتو در HTML، یک شاخه در امتداد درخت است. جاوا اسکریپت می تواند هر یک از این عناصر را اضافه، حذف و یا تغییر دهد.

اگر دوباره روی سایت کلیک راست کنید و روی View Page Source کلیک کنید، خروجی HTML خام وب سایت را خواهید دید. در ابتدا آسان است که DOM را با منبع HTML اشتباه بگیرید، اما آنها متفاوت هستند - کد منبع صفحه دقیقا همان چیزی است که در فایل HTML نوشته شده است. و ثابت است و تغییر نخواهد کرد و تحت تأثیر جاوا اسکریپت قرار نخواهد گرفت. اما DOM پویا است و می تواند تغییر کند.

بیرونی ترین لایه DOM، لایه ای که کل گره <html> را می پوشاند، شی document است. برای شروع دستکاری صفحه با jQuery، ابتدا باید مطمئن شویم که سند "آماده" است.

فایل scripts.js را در دایرکتوری js/ خود ایجاد کنید و کد زیر را تایپ کنید:

js/scripts.js

$(document).ready(function() { 
// all custom jQuery will go here 
});

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

در مقدمه این مقاله، یک برنامه ساده «Hello World!» ساده را مشاهده کردید. برای استفاده از جی کوئری و چاپ متن در مرورگر با استفاده از آن، ابتدا یک عنصر پاراگراف خالی با شناسه demo روی آن ایجاد می کنیم.

index.html

... 
<body> 
<p id="demo"></p>
 ...

جی کوئری با علامت دلار ($) فراخوانی و نشان داده می شود. ما با استفاده از سینتکس CSS و با کمک jQuery به DOM دسترسی پیدا می کنیم و یک عملیات را با کمک یک متد روی آن اعمال می کنیم. مثال زیر، یک مثال ابتدایی از جی کوئری است که از این الگو پیروی می کند.

$("selector").method();

از آنجایی که یک ID با یک نماد هش (#) در CSS نشان داده می شود، ما با انتخابگر #demo به شناسه ای با نام demo دسترسی خواهیم داشت. ()html متدی است که کد HTML یک عنصر را تغییر می دهد.

اکنون می‌خواهیم «Hello Wordl» سفارشی خود را داخل بخش ready() جی کوئری قرار دهیم. کدهای زیر را در در فایل scripts.js خود بنویسید:

js/scripts.js

$(document).ready(function() { 
 $("#demo").html("Hello, World!"); 
});

هنگامی که فایل را ذخیره کردید، می توانید فایل index.html خود را در مرورگر خود باز کنید. اگر همه چیز به درستی کار کند، خروجی Hello, World! را خواهید دید.

اگر قبلا با کار با DOM ناآشنا بودید، اما اکنون می توانید آن را در عمل مشاهده کنید. روی متن "Hello, World!" روی صفحه راست کلیک کنید و Inspect Elementرا انتخاب کنید. اکنون DOM

Hello, World!

را نمایش می دهد. اگر View Page Source، را بزنید تنها پاراگراف خالی

را خواهید دید که قبلا نوشته بودیم.

انتخاب کنندگان (Selectors)

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

برای دسترسی به انتخابگرها، از نماد $ و به دنبال آن پرانتز () استفاده کنید.

$("selector")

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

در زیر مروری کوتاه بر برخی از پرکاربردترین انتخابگرها ارائه شده است.

  • $("*") - همه (Wildcard): همه عناصر را در صفحه، انتخاب می‌کند.

  • $(this) - عنصر فعلی (Current): عنصر فعلی را انتخاب می‌کند که در یک تابع روی آن کار می‌شود.

  • $("p") - تگ (Tag): همه تگ های <p> را انتخاب می کند.

  • $(.example") - کلاس (Class): همه عناصری را انتخاب می‌کند که شامل کلاس مربوطه هستند.

  • $("#example") - شناسه (ID): عنصری با شناسه منحصر به فرد را انتخاب می کند.

  • $("[type='text']") - ویژگی (Attribute): همه عناصر با متن اعمال شده بعنوان ویژگی type انتخاب می‌کند.

  • $("p:first-of-type") - عنصر شبه (Pseudo Element): اولین <p> را انتخاب می کند.

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

رویدادهای جی کوئری (Events)

در برنامه Hello, World به عنوان مثال، کد به محض بارگیری صفحه و آماده شدن سند اجرا می شود و بنابراین برای اجرای آن، نیازی به تعامل با کاربر نیست. در این مورد، می‌توانستیم متن را مستقیما در HTML بنویسیم، بدون اینکه جی کوئری را خسته کنیم. با این حال، اگر بخواهیم متنی را با کلیک یک دکمه در صفحه نمایان کنیم، باید از jQuery استفاده کنیم.

به فایل index.html خود برگردید و یک عنصر <button> اضافه کنید. ما از این دکمه برای گوش دادن به رویداد کلیک خود استفاده خواهیم کرد.

index.html

... 
<body> 
<button id="trigger">Click me</button>
 <p id="demo"></p>

از متد click() برای فراخوانی تابعی استفاده می کنیم که حاوی کد Hello, World! ما باشد.

js/scripts.js

$(document).ready(function() { 
 $("#trigger").click(); 
});

عنصر <button> ما، یک شناسه به نام trigger دارد که با $("#trigger") آن را انتخاب می کنیم. با افزودن click() به آن می‌گوییم که به رویداد کلیک گوش دهد، اما هنوز تمام نشده است. اکنون تابعی را که حاوی کد ما است، در داخل متد click() فراخوانی می کنیم.

function() { 
$("#demo").html("Hello, World!"); 
}

کد نهایی، به صورت زیر است:

js/scripts.js

$(document).ready(function() { 
$("#trigger").click(function() { 
$("#demo").html("Hello, World!"); 
}); 
});

فایل scripts.js را ذخیره کنید و index.html را در مرورگر خود، باز کنید. اکنون وقتی روی دکمه، کلیک می کنید، متن Hello, World! ظاهر خواهد شد.

رویداد یا Event، هر زمانی است که کاربر با مرورگر تعامل داشته باشد. معمولا این کار با ماوس یا صفحه کلید انجام می شود. مثالی که ما ایجاد کردیم از یک رویداد کلیک استفاده می کرد. از مستندات رسمی jQuery، می توانید لیست کاملی از متدهای رویدادهای jQuery را مشاهده کنید. در زیر مروری کوتاهی بر برخی از متداول‌ترین متد‌های رویدادها خواهیم داشت.

  • click()- Click: با یک کلیک ماوس اجرا می شود.

  • hover() - Hover: زمانی اجرا می‌شود که ماوس روی یک عنصر قرار می‌گیرد.

  • ()mouseenter و ()mouseleave به ترتیب فقط برای زمان هایی که ماوس روی یک عنصر وارد یا خارج می شود اعمال می شود.

  • submit() - Submit: هنگام ارسال فرم اجرا می شود.

  • scroll() - Scroll: هنگامی که صفحه اسکرول می شود اجرا می شود.

  • keydown() - Keydown: زمانی اجرا می‌شود که کلیدی از صفحه‌کلید را فشار دهید.

برای متحرک کردن یا محو کردن تصاویر هنگام حرکت کاربر به پایین صفحه، از متد ()scroll استفاده کنید. برای خروج از منو با استفاده از کلید ESC، از متد ()keydown استفاده کنید. برای ایجاد یک منوی آکاردئونی کشویی، از متد ()click استفاده کنید.

درک رویدادها برای ایجاد محتوای پویا با جی کوئری برای وب سایت ها ضروری است.

جلوه های جی کوئری

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

تگ های <button> و <p> فعلی را از داخل فایل index.html خود حذف کنید و موارد زیر را به سند HTML خود اضافه کنید:

index.html

... 
<body> 
<button class="trigger">Open</button> 
<section class="overlay"> 
<button class="trigger">Close</button> 
</section> 
...

در فایل style.css خود، از حداقل مقدار کد نویسی CSS برای مخفی کردن پاپ آپ و نمایش آن در مرکز صفحه استفاده خواهیم کرد. این کار را با overlay و display:none انجام خواهیم داد.

css/style.css

.overlay 
{ 
display: none; 
position: fixed; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
height: 200px; 
width: 200px; 
background: gray; 
}

در فایل scripts.js، از متد toggle() استفاده می‌کنیم که ویژگی display در CSS را بین none و block تغییر می‌دهد و پس از کلیک کردن، پاپ را مخفی می‌کند و با کلیک مجدد، آن را نشان می‌دهد.

js/scripts.js

$(document).ready(function() { 
 $(".trigger").click(function() { 
$(".overlay").toggle(); 
}); 
});

فایل index.html را روی مرورگر خود باز کنید. اکنون می توانید با کلیک بر روی دکمه ها، نمایان بودن مدال (modal) را تغییر دهید. می توانید ()toggle را به ()fadeToggle یا ()slideToggle تغییر دهید تا چند افکت داخلی دیگر از jQuery را ببینید.

در زیر مروری کوتاه بر برخی از متداول‌ترین متد‌های افکت گذاری خواهیم داشت.

  • toggle() - Toggle: قابلیت مشاهده یک عنصر یا عناصر را تغییر می دهد.

  • ()show و ()hide: افکت های یک طرفه مروبوط به Toggle هستند.

  • fadeToggle() - Fade Toggle: قابلیت مشاهده عنصر را تغییر می دهد و شفافیت یک عنصر یا عناصر را متحرک می کند.

  • ()fadeIn و ()fadeOut افکت های یک طرفه مرتبط با fadeToggle هستند.

  • slideToggle() - Slide Toggle قابلیت مشاهده یک عنصر یا عناصر را با جلوه حرکت کشویی تغییر می دهد.
  • ()slideDown و ()slideUp افکت های یک طرفه مرتبط با slideToggle هستند.

  • animate() - Animate انیمیشن های سفارشی را بر روی ویژگی های CSS یک عنصر اعمال می کند.

از رویدادهای jQuery برای گوش دادن به تعامل کاربران نظیر کلیک روی یک دکمه، استفاده می کنیم و از جلوه های jQuery برای دستکاری بیشتر روی عناصر، استفاده می کنیم.

نتیجه گیری و کلام پایانی

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

از این نقطه، شما باید درک عمیق تری از قابلیت های jQuery داشته باشید و در مسیر نوشتن کدهای خود قدم بر دارید.

موفق باشید!

مطالب مرتبط

مقدمه ای بر jQuery
مقدمه ای بر jQuery
مقالات سایت
بدون نظر

نوشته شده توسط

ادمین

شرکت نویا سیستم، ارائه دهنده کلیه خدمات برنامه نویسی و ساخت اپلیکیشن های سفارشی.

مشاهده همه مطالب:

هنوز نظری ثبت نشده است.

یک نظر بگذارید

کد امنیتی: