آموزش jQuery
jQuery یک لایبرری سبک است که به منظور تسهیل فرآیند کدنویسی با زبان جاوااسکریپت توسعه یافته است. در واقع، جیکوئری قابلیت‌هایی که نیاز به ده‌ها خط کدنویسی با زبان جاوااسکریپت دارند را در قالب متدهایی پیاده‌سازی نموده که صرفاً با یک خط کد دقیقاً می‌توان به همان قابلیت دست یافت. در همین راستا، در آموزش ابتدا با پروسهٔ نصب این لایبرری آشنا شده سپس خواهیم دید که به چه شکل می‌توان آن را می‌توان به منظور طراحی صفحات پویا مورد استفاده قرار داد.
راهنمای نصب jQuery
اساساً دو راه‌کار کلی به منظور نصب و استفاده از این لایبرری وجود دارد؛ اول این که لایبرری مذکور را دانلود نمود و به صورت لوکال آن را لود کرد و راه‌کار دیگر هم این که با استفاده از یک شبکهٔ توزیع محتوا (سی‌دی‌ان) این لایببری را لود نمود.
چنانچه بخواهیم راه‌کار اول را دنبال نموده و به عبارتی با دانلود جیکوئری آن را به صورت لوکال لود کنیم، دو راه‌کار پیش روی ما است؛ اول این که نسخهٔ به اصطلاح Production جیکوئری را دانلود کنیم و دوم هم این که از نسخهٔ Development استفاده نماییم با این توضیح که نسخهٔ نسخه Production به منظور دیپلوی روی سرورهای اصلی سایت استفاده می‌شود چرا که فشرده‌سازی شده به طوری که حجم صفحه خیلی افزایش پیدا نمی‌کند اما نسخهٔ Development برای محیط توسعه مناسب است با این توضیح که کدها غیرفشرده و خوانا هستنند (به منظور دانلود این لایبرری، با مراجعه به لینک Download jQuery در سایت رسمی جیکوئری می‌توان هر کدام از نسخه‌‌های فوق که تمایل داشته باشید را دانلود نمایید.)
برای شروع کار با این لایبرری، پوشه‌ای با نامی دلخواه همچون jquery ساخته سپس داخل آن فایل دانلودی را قرار می‌دهیم و سپس فایلی تحت عنوان index.html ساخته و آن را به صورت زیر تکمیل می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
</body>
</html>همان‌طور که ملاحظه می‌شود، در بخش هِد این صفحه با استفاده از تگ <script></script> اقدام به بارگزاری فایل مذکور کرده‌ایم و از آنجا که HTML5 به صورت خودکار زبان جاوااسکریپت را می‌شناسد، دیگر همچون گذشته نیازی به درج اَتریبیوت "type="text/javascript نخواهیم داشت و از این لحظه به بعد فایل فوق آماده برای کدنویسی با لایبرری جیکوئری است. اگر هم بخواهیم با استفاده از یک شبکهٔ توزیع محتوا اقدام به بارگزاری جیکوئری کنیم، می‌توانیم فایل فوق را به صورت زیر ریفکتور نماییم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<!-- <script src="jquery-3.4.1.js"></script> -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
</body>
</html>اساساً می‌توان گفت که مزیت استفاده از سی‌دی‌ان برای لود کردن لایبرری‌هایی همچون جیکوئری در این است که شبکه‌های توزیع محتوا تمام تلاش خود را به کار می‌گیرند تا از نزدیک‌ترین سرور به محل جغرافیایی کاربر فایل درخواستی را لود کنند و همین مسئله منجر به پایین آمدن زمان لود صفحه خواهد شد (در همین راستا، توصیه می‌کنیم به مقالهٔ JsDelivr | Cdnjs | Google Libraries | Microsoft CDN: چهار CDN برای میزبانی پروژه‌های اپن‌سورس مراجعه نمایید.) پیش از شروع کدنویسی با لایبرری جیکوئری، برای آن که اطمینان حاصل کنیم هر کدی که نوشته‌ایم صرفاً پس از لود کامل صفحه اجرا خواهد شد، از دستور زیر استفاده می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<!-- <script src="jquery-3.4.1.js"></script> -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
</body>
<script>
$(document).ready(function () {
});
</script>
</html>به طور مثال، اگر صفحه به طور کامل بارگزاری نشده باشد و بخواهیم مثلاً یکی از تگ‌های اچ‌تی‌ام‌ال را پنهان کنیم، تَسک مذکور عملی نخواهد شد چرا که صفحه هنوز آماده کار با جیکوئری نشده است اما با درج کدی که داخل تگ‌های <script></script> نوشته‌ایم، این تضمین ایجاد می‌شود که مشکلی برنخواهیم خورد.
آشنایی با مفهوم Selector در jQuery
یکی از مهم‌ترین بخش‌های این لایبرری مفهومی است تحت عنوان Selector که این امکان را در اختیار توسعه‌دهندگان فرانت‌اند می‌گذارد تا تگ‌های اچ‌تی‌ام‌ال را هدف قرار داده، آن‌ها را انتخاب نموده و در نهایت کاری که مد نظر دارند را روی آن‌ها اِعمال نمایند. اساساً سِلِکتورها بر اساس تگ، شناسه، کلاس، اَتریبیوت و ... می‌توانند تگ‌های اچ‌تی‌ام‌ال را بیابند و تمامی سِلِکتورهای جیکوئری با علامت $ شروع می‌شوند. به طور مثال، برای انتخاب کلیهٔ تگ‌های <p></p> در یک صفحه می‌توان از دستور ('p')$ استفاده نمود:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
<script>
$(document).ready(function () {
$('p').css('color', '#ffde57');
});
</script>
</html>همان‌طور که ملاحظه می‌شود، داخل تگ‌های <body></body> دو جفت تگ <p></p> درج نموده‌ایم و با استفاده از سِلِکتور p آن‌ها را هدف قرار داده و با استفاده از اَکشنی تحت عنوان ()css که در ادامهٔ آموزش بیشتر با مفهومش آشنا خواهیم شد، رنگ آن‌ها را تغییر داده‌ایم به طوری که اگر این فایل را داخل مرورگر باز نماییم، می‌بینیم که رنگ نوشته‌ها به زرد تغییر پیدا کرده است. همچنین اگر بخواهیم یک اِلِمان را بر اساس شناسه (آی‌دی) بیابیم، می‌توانیم از علامت # سپس درج شناسهٔ مذکور استفاده نماییم. به طور مثال، برای یافتن تگی همچون <div id="wrapper"></div> می‌توان از سِلِکتور ("wrapper#")$ استفاده نمود:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<div id="wrapper">Some Text</div>
</body>
<script>
$(document).ready(function () {
$('#wrapper').css('color', '#ffde57');
});
</script>
</html>توجه داشته باشیم که صرفاً زمانی می‌توانیم از این سِلِکتور استفاده کنیم که فقط و فقط یک اِلِمان با شناسهٔ wrapper در صفحه موجود باشد. در عین حال، اگر چندین و چند اِلِمان مختلف در صفحه داشته باشیم که از یک کلاس به‌خصوص برخوردارند، مثلاً چندین تگ <div class="container"></div>، می‌توان از سِلِکتوری به صورت ("container.")$ استفاده نمود:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</body>
<script>
$(document).ready(function () {
$('.container').css('color', '#ffde57');
});
</script>
</html>لازم به یادآوری است که علائم "" و '' کاربردی یکسان در انتخاب سِلِکتورها دارند. همچنین یک سری سِلِکتور دیگر نیز در لایبرری جیکوئری داریم که در مثال‌های زیر برخی از آن‌ها را مورد بررسی قرار خواهیم داد:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<p class="intro">Paragraph 1</p>
<p class="intro">Paragraph 2</p>
</body>
<script>
$(document).ready(function () {
$('p.intro').css('color', 'red');
});
</script>
</html>سِلِکتور p.intro کلیهٔ تگ‌های <p></p> که دارای کلاس intro هستند را انتخاب می‌کند. اگر هم بخواهیم تا صرفاً اولین تگ <p></p> را انتخاب کنیم، از سِلِکتور زیر استفاده می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<p class="intro">Paragraph 1</p>
<p class="intro">Paragraph 2</p>
</body>
<script>
$(document).ready(function () {
$('p:first').css('color', 'red');
});
</script>
</html>چنانچه صفحه را رِفرش کنیم، می‌بینیم که فقط رنگ اولین تگ تغییر پیدا کرده است. به عنوان مثالی دیگر نیز داریم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</body>
<script>
$(document).ready(function () {
$('[href]:first').css('color', 'red');
});
</script>
</html>سِلِکتور فوق فقط اولین اِلِمانی را هدف قرار می‌دهد که دارای اَتریبیوت href باشد. به عنوان مثالی دیگر در ارتباط با لینک‌ها داریم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<a href="#">Link 1</a>
<a href="#" target="_blank">Link 2</a>
</body>
<script>
$(document).ready(function () {
$("a[target='_blank']").css('color', 'red');
});
</script>
</html>سِلِکتور فوق نیز هر تگ <a></a> که مقدار اَتریبیوت target آن برابر با blank_ باشد را انتخاب می‌کند. به عنوان نمونه‌ای از لیست‌ها نیز داریم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</body>
<script>
$(document).ready(function () {
$('ul li:first-child').css('color', 'red');
});
</script>
</html>در واقع، سِلِکتور فوق اولین تگ <li></li> لیست فوق را انتخاب می‌کند (جهت آشنایی با لیست کامل سِلِکتورها در جیکوئری، می‌توانید به لینک jQuery Selectors در سایت رسمی این لایبرری مراجعه نمایید.)
آشنایی با مفهوم Event در jQuery
هر عملی که کاربر روی یک صفحهٔ اچ‌تی‌ام‌ال انجام می‌دهد تحت عنوان Event شناخته می‌شود. به طور مثال، کلیک کردن روی یک دکمه، تکان دادن ماوس و کارهایی از این دست همگی ایونت (رویداد) هستند. برای درک بهتر سازوکار ایونت‌ها در جیکوئری، در ادامه کدی می‌نویسیم که اگر کاربر روی اِلِمانی با شناسهٔ wrapper کلیک کرد، رنگ آن عوض شود:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<div id="wrapper">Some Text</div>
</body>
<script>
$(document).ready(function () {
$('#wrapper').click(function(){
$(this).css('color', 'blue');
});
});
</script>
</html>همان‌طور که ملاحظه می‌شود، اِلِمانی با شناسهٔ wrapper ایجاد کرده‌ایم سپس داخل تگ‌های <script></script> دستور داده‌ایم تا اگر کاربر روی اِلِمانی با آی‌دی wrapper کلیک کرد، رنگش تغییر کند. آنچه در ارتباط با کد فوق نیاز به توضیح بیشتر دارد، سِلِکتور (this)$ است. در واقع، کارکرد این سِلِکتور را می‌توان به «این اِلِمانی که رویش کلیک شد» تفسیر نمود؛ به عبارت بهتر، در کد فوق دستور داده‌ایم تا این اِلِمانی که رویش کلیک شده را هدف قرار داده و رنگش را تغییر دهد. دو مورد از دیگر ایونت‌ها ()mouseenter و ()mouseleave است که برای درک بهتر کارکرد آن‌ها، قطعه کد زیر را مد نظر قرار می‌دهیم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<div id="wrapper">Some Text</div>
</body>
<script>
$(document).ready(function () {
$('#wrapper').mouseenter(function(){
$(this).css('color', 'blue');
});
$('#wrapper').mouseleave(function(){
$(this).css('color', 'red');
});
});
</script>
</html>اگر این فایل را داخل مرورگر اجرا کنیم، می‌بینیم که با هاور کردن روی متن موجود در صفحه رنگ آن به آبی تغییر می‌کند و زمانی که نشانگر ماوس را کنار می‌کشیم، رنگ متن به قرمز تغییر پیدا خواهد کرد (جهت آشنایی با لیست کامل ایونت‌های جیکوئری، می‌توانید به لینک jQuery Events مراجعه نمایید.)
آشنایی با مفهوم Effect در jQuery
در لایبرری جیکوئری یک سری اِفکت (جلوه) داریم که می‌توان پس از انجام یک ایونت، آن‌ها را فراخوانی کرد. به طور مثال، در کد زیر قصد داریم تا دو دکمه ایجاد کنیم که یکی مسئول پنهان کردن متن و دیگری مسئول نمایش آن است:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="hide-text">Hide Text</button>
<button id="show-text">Show Text</button>
<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Totam, quae alias distinctio laudantium molestias,
ut culpa odio quas aliquam libero eveniet illum incidunt repellendus nemo deleniti,
labore consequuntur facere? Iusto?
</div>
</body>
<script>
$(document).ready(function () {
$('#hide-text').click(function () {
$('#text').hide(3000);
});
$('#show-text').click(function () {
$('#text').show();
});
});
</script>
</html>همان‌طور که ملاحظه می‌شود، دو دکمه ساخته‌ایم که هر کدام آی‌دی منحصربه‌فردی دارا است و متنی را نیز داخل تگ‌های <div></div> درج کرده و برای این اِلِمان شناسه‌ای همچون text در نظر گرفته‌ایم. در ادامه، دستور داده‌ایم که اگر کاربر روی دکمه‌ای با شناسهٔ hide-text کلیک کرد، اِلِمانی با شناسهٔ text پنهان گردد و این در حالی است که برای اَکشن ()hide آرگومانی همچون ۳۰۰۰ میلی‌ثانیه در نظر گرفته‌ایم بدان معنا که پروسهٔ پنهان کردن این اِلِمان ۳ ثانیه به طول خواهد انجامید و در ادامه نیز گفته‌ایم که اگر کاربر روی اِلِمانی با آی‌دی show-text کلیک کرد، بلوکی که پنهان کرده بودیم آشکار گردد (علاوه بر درج آرگومان ورودی این دو فانکشن بر حسب میلی‌ثانیه، می‌توان از مقادیر slow و fast نیز استفاده کرد.)
علاوه بر متدهای ()hide و ()show، می‌توان از متدی تحت عنوان ()toggle نیز استفاده نمود به طوری که هر دو تَسک فوق را در قالب یک اَکشن انجام خواهد داد:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="toggle-text">Toggle Text</button>
<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Totam, quae alias distinctio laudantium molestias,
ut culpa odio quas aliquam libero eveniet illum incidunt repellendus nemo deleniti,
labore consequuntur facere? Iusto?
</div>
</body>
<script>
$(document).ready(function () {
$('#toggle-text').click(function () {
$('#text').toggle('slow');
});
});
</script>
</html>می‌بینیم که قابلیت قبلی صرفاً با ایجاد یک دکمه عملی شده است (برای مشاهدهٔ لیست کامل اِفکت‌های جیکوئری، می‌توانید به لینک jQuery Effects مراجعه نمایید.)
آشنایی با مفهوم Callback Function در jQuery
نیاز به توضیح نیست که کدهای نوشته‌شده با زبان جاوااسکریپت خط به خط اجرا می‌شوند و در ارتباط با اِفکت‌های جیکوئری گاهی نیاز خواهیم داشت تا پس از تکمیل یک اِفکت، کدهای دیگری اجرا گردند و اینجا است که می‌باید با مفهوم Callback آشنا باشیم. به منظور درک بهتر این موضوع، کدهای زیر را مد نظر قرار می‌دهیم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Totam, quae alias distinctio laudantium molestias,
ut culpa odio quas aliquam libero eveniet illum incidunt repellendus nemo deleniti,
labore consequuntur facere? Iusto?
</div>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#text').hide('slow', function(){
alert('The text is hidden.');
});
});
});
</script>
</html>همان‌طور که ملاحظه می‌شود، به عنوان آرگومان دوم متد ()hide از یک فانکشن بی‌نام استفاده کرده‌ایم به طوری که پس از تکمیل پروسهٔ پنهان شدن متنی که روی صفحه نوشته‌ایم، یک پاپ‌آپ در معرض دید کاربر قرار خواهد گرفت. برای آن که دقیق‌تر با مفهوم کال‌بک آشنا شویم، کدهای فوق را به صورت زیر ریکفتور می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Totam, quae alias distinctio laudantium molestias,
ut culpa odio quas aliquam libero eveniet illum incidunt repellendus nemo deleniti,
labore consequuntur facere? Iusto?
</div>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#text').hide('slow');
alert('The text is hidden.');
});
});
</script>
</html>همان‌طور که می‌بینیم، به محض کلیک روی دکمهٔ مذکور قبل از این که متن پنهان شود، پاپ‌آپ اجرا خواهد شد و این در حالی است که در صورت استفاده از کال‌بک، این تضمین ایجاد می‌گردد که متد ()hide به طور کامل اجرا شده سپس کدهای بعدی اجرا گردند.
آشنایی با مفهوم Method Chaining در jQuery
در لایبرری جیکوئری این امکان برای توسعه‌دهندگان فرانت‌اند فراهم شده تا یک سری متد مختلف را یکی پس از دیگری به صورت زنجیروار اجرا کنند که به این کار Method Chaining گفته می‌شود. به طور مثال، در کدهای زیر ابتدا رنگ متن تغییر کرده سپس متن مذکور طی ۲ ثانیه بسته و مجدد طی ۲ ثانیه باز می‌شود:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Totam, quae alias distinctio laudantium molestias,
ut culpa odio quas aliquam libero eveniet illum incidunt repellendus nemo deleniti,
labore consequuntur facere? Iusto?
</div>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#text').css('color', 'red').slideUp(2000).slideDown(2000);
});
});
</script>
</html>در صورتی که روی دکمهٔ قرارگرفته داخل صفحه کلیک کنیم، خواهیم دید که متدهای جیکوئری یکی پس از دیگری به ترتیب اجرا خواهند شد.
آشنایی با مفهوم DOM Manipulation در jQuery
یکی از قابلیت‌های منحصربه‌فرد جیکوئری برخورداری از یک سری متدهایی است که برای کار با Document Object Model یا به اختصار DOM تعبیه شده‌اند. به طور خلاصه، می‌توان گفت که منظور از DOM استانداردی به منظور دستیابی و به‌روزرسانی ساختار، محتوا، شکل و شمایل اِلِمان‌های اچ‌تی‌ام‌ال است. در لایبرری جیکوئری متدهای ()text و ()html به همراه ()val به منظور کار با DOM تعبیه شده‌اند. برای درک بهتر این موضوع، در کدهای زیر ابتدا ()text را مورد بررسی قرار می‌دهیم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Totam, quae alias distinctio laudantium molestias,
ut culpa odio quas aliquam libero eveniet illum incidunt repellendus nemo deleniti,
labore consequuntur facere? Iusto?
</div>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
alert($('#text').text());
});
});
</script>
</html>متد ()text متن موجود در اِلِمانی با شناسهٔ text را ریترن می‌کند و می‌بینیم که با کلیک بر روی دکمهٔ مذکور، این متد در یک پاپ‌آپ در معرض دیدمان قرار می‌گیرد. همچنین اگر بخواهیم این متن را آپدیت کنیم، می‌توانیم از کدهای زیر استفاده نماییم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Totam, quae alias distinctio laudantium molestias,
ut culpa odio quas aliquam libero eveniet illum incidunt repellendus nemo deleniti,
labore consequuntur facere? Iusto?
</div>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#text').text('The updated text.');
});
});
</script>
</html>از طریق کدهای فوق دستور داده‌ایم تا در صورت کلیک روی دکمهٔ موجود داخل صفحه، اِلِمانی با شناسهٔ text هدف قرار داده شده و متن جدیدی برایش در نظر گرفته شود. همچنین کاربرد متد ()html نیز به صورت زیر است:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<div id="text">Lorem ipsum dolor sit amet <strong>consectetur adipisicing</strong> elit.
Totam, quae alias distinctio laudantium molestias,
ut culpa odio quas aliquam libero eveniet illum incidunt repellendus nemo deleniti,
labore consequuntur facere? Iusto?
</div>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
alert($('#text').html());
});
});
</script>
</html>داخل متن موجود از تگ‌های <strong></strong> استفاده نموده‌ایم و با کلیک روی دکمه خواهیم دید که ساختار اچ‌تی‌ام‌ال اِلِمانی با شناسهٔ text در معرض دیدمان قرار می‌گیرد و اگر هم بخواهیم تا ساختار اچ‌تی‌ام‌ال این اِلِمان را آپدیت کنیم، می‌توانیم از نمونه کد زیر استفاده نماییم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Totam, quae alias distinctio laudantium molestias,
ut culpa odio quas aliquam libero eveniet illum incidunt repellendus nemo deleniti,
labore consequuntur facere? Iusto?
</div>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#text').html('<ul><li>Item 1</li><li>Item 2</li></ul>');
});
});
</script>
</html>در تفسیر کدهای فوق باید گفت که متد ()html این وظیفه را دارا است تا ساختار اِلِمانی که هدف قرار داده شده را آپدیت کند. به طور مثال، دستور داده‌ایم تا در صورت کلیک روی دکمهٔ مذکور، اِلِمانی با شناسهٔ text را یافته و کدهای مرتبط با یک لیست به جای آن قرار گیرد. متد ()val نیز برای فیلدهای یک فرم کاربرد دارد به طوری که برای مثال داریم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<form>
<input type="text" id="username">
</form>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
alert($('#username').val());
});
});
</script>
</html>یک فرم بسیار ساده ساخته‌ایم که حاوی فیلدی با شناسهٔ username است و از طریق جیکوئری نیز دستور داده‌ایم تا در صورت کلیک روی دکمه، مقداری که داخل این فیلد وارد شده در قالب یک پنجرهٔ پاپ‌آپ در معرض دید کاربر قرار گیرد. اگر هم بخواهیم تا مقدار فیلد فوق‌الذکر را به‌روزرسانی کنیم، می‌توانیم از نمونه کد زیر استفاده نماییم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<form>
<input type="text" id="username">
</form>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#username').val('some value');
});
});
</script>
</html>همان‌طور که ملاحظه می‌شود، به عنوان آرگومان متد ()val از یک استرینگ دلخواه استفاده نموده‌ایم به طوری که با کلیک بر روی دکمه موجود، آن استرینگ به جای مقدار ورودی فیلد مذکور در نظر گرفته خواهد شد.
یکی دیگر از متدهای مرتبط با این حوزه ()attr نام دارد که این وظیفه را دارا است تا مقدار در نظر گرفته شده برای یک اَتریبیوت خاص را ریترن کند به طوری که برای نمونه داریم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<a href="https://example.com">Link</a>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
alert($('a').attr('href'));
});
});
</script>
</html>همان‌طور که ملاحظه می‌شود، لینکی ساخته‌ایم که از طریق جیکوئری دستور داده‌ایم تا در صورت کلیک روی دکمه، این لینک هدف قرار داده شده و مقدار اَتریبیوت href آن بازگردانده شود. همچنین متد ()attr به منظور سِت کردن مقداری جدید نیز به صورت زیر می‌تواند مورد استفاده قرار گیرد:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<a href="https://example.com">Link</a>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('a').attr('href', 'https://sokanacademy.com');
});
});
</script>
</html>در واقع، به محض کلیک کردن روی دکمهٔ موجود، مقدار در نظر گرفته شده برای اَتریبیوت href از https://example.com به https://sokanacademy.com تغییر پیدا می‌کند. همچنین توجه داشته باشیم که در آنِ واحد نیز می‌توان بیش از دو اَتریبیوت را با استفاده از متد ()attr به صورت زیر مقداردهی کرد:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<a href="https://example.com">Link</a>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('a').attr({
'href': 'https://sokanacademy.com',
'title': 'Ths is a title'
});
});
});
</script>
</html>همان‌طور که ملاحظه می‌شود، از یک جفت علائم {} داخل متد ()attr استفاده کرده، سپس یک سری به اصطلاح Key/Value برای آن در نظر گرفته‌ایم (جهت مشاهدهٔ لیست متدهای کار با DOM، می‌توانید به لینک jQuery Attributes مراجعه نمایید.)
لازم به ذکر است که با استفاده از لایبرری جیکوئری به سادگی می‌توان محتوای جدیدی به اِلِمان‌های موجود در صفحه افزود به طوری که مثلاً داریم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<p id="paragraph-1">This is paragraph 1.</p>
<p id="paragraph-2">This is paragraph 1.</p>
<p id="paragraph-3">This is paragraph 1.</p>
<p id="paragraph-4">This is paragraph 1.</p>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#paragraph-1').append(' some text appended.');
$('#paragraph-2').prepend('some text prepended. ');
$('#paragraph-3').after(' some text added after.');
$('#paragraph-4').before(' some text added before.');
});
});
</script>
</html>در حقیقت سازوکار متد ()append بدین صورت است که آرگومان ورودی را به انتهای اِلِمان انتخابی می‌افزاید؛ متد ()prepend آرگومان ورودی‌اش را به ابتدای اِلِمان انتخابی اضافه می‌کند؛ متد ()after نیز محتوای موجود به عنوان آرگومان ورودی‌اش را پس از اِلِمان انتخابی اضافه می‌کند و در نهایت به متد ()before می‌رسیم که آرگومان ورودی را قبل از اِلِمان انتخابی می‌افزاید. در عین حال توجه داشته باشیم که با استفاده از این متدها می‌توان کدهای اچ‌تی‌ام‌ال را نیز به اِلِمان انتخابی منتسب کرد. به طور مثال، در ادامه خواهیم دید که به چه شکل می‌توان با استفاده از متد ()after یک لیست پس از تگ <p></p> افزود:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<p id="paragraph-1">This is paragraph 1.</p>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
var list = '<ul>'+
'<li>Item 1</li>'+
'<li>Item 2</li>'+
'<li>Item 3</li>'+
'</ul>';
$('#paragraph-1').after(list);
});
});
</script>
</html>پس از آشنایی با نحوهٔ افزودن یک سری اِلِمان جدید به اِلِمان‌های موجود در صفحه، حال نوبت به بررسی نحوهٔ حذف اِلِمان‌ها می‌رسد به طوری که خواهیم داشت:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<div id="wrapper">
<p id="paragraph-1">This is paragraph 1.</p>
<p id="paragraph-2">This is paragraph 2.</p>
<p id="paragraph-3">This is paragraph 3.</p>
</div>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#wrapper').remove();
});
});
</script>
</html>در جیکوئری متدی داریم تحت عنوان ()remove که اِلِمان انتخابی + کلیهٔ دیگر اِلِمان‌های موجود داخل آن را حذف می‌کند به طوری که در مثال فوق با کلیک بر روی دکمه، اِلِمانی با شناسهٔ wrapper به علاوهٔ هر سه پاراگراف موجود در آن حذف می‌شوند. در مقابل، متد دیگری داریم به نام ()empty و همان‌طور که از نام این متد مشخص است، این وظیفه را دارا است تا فقط محتوای اِلِمان انتخابی را حذف کند:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">Button</button>
<div id="wrapper">
<p id="paragraph-1">This is paragraph 1.</p>
<p id="paragraph-2">This is paragraph 2.</p>
<p id="paragraph-3">This is paragraph 3.</p>
</div>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#paragraph-2').empty();
});
});
</script>
</html>پس از کلیک بر روی دکمهٔ فوق، می‌بینیم که محتوای پاراگرافی با شناسهٔ paragraph-2 حذف می‌شود و این در حالی است که اِلِمان فوق را با استفاده از ابزار اینسپِکتور مرورگر چک کنیم، می‌بینیم که <p id="paragraph-2"></p> سر جایش باقی است و صرفاً محتوای آن حذف شده است.
آشنایی با مفهوم CSS Manipulation در jQuery
یکی دیگر از ویژگی‌های کاربردی جیکوئری آن است که می‌توان با استفاده از این لایبرری اقدام به تغییر استایل اِلِمان‌های موجود در صفحه کرد که برای درک بهتر این موضوع، مثال زیر را مد نظر قرار می‌دهیم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}
</style>
</head>
<body>
<button id="btn">Button</button>
<div id="wrapper">
<p id="paragraph-1">This is paragraph 1.</p>
<p id="paragraph-2">This is paragraph 2.</p>
<p class="important" id="paragraph-3">This is paragraph 3.</p>
<p id="paragraph-4">This is paragraph 4.</p>
</div>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#paragraph-1').css('color', 'green');
$('#paragraph-2').addClass('important');
$('#paragraph-3').removeClass('important');
$('#paragraph-4').toggleClass('important');
});
});
</script>
</html>در صورت اجرای این فایل داخل مرورگر و کلیک بر روی دکمهٔ موجود در صفحه، به خوبی عملکرد هر یک از متدهای فوق مشخص خواهد شد به طوری که متد ()css دو پارامتر ورودی می‌گیرد که پارامتر اول مربوط به پراپرتی و پارامتر دوم مرتبط با مقدار آن پراپرتی است. متد ()addClass نیز این وظیفه را دارا است تا کلاس سی‌اس‌اسی که از قبل تعریف شده را به اِلِمان مد نظر اضافه کند و متد ()removeClass دقیقاً عکس مورد فوق است و در نهایت به ()toggleClass می‌رسیم که با فراخوانی آن، یک کلاس به اِلِمان مذکور اضافه شده و با فراخوانی مجدد کلاس مذکور حذف خواهد شد. همچنین در نظر داشته باشیم که با استفاده از متد ()css می‌توان در آنِ واحد بیش از یک پراپرتی را مقداردهی کرد به طوری که مثلاً داریم:
<!DOCTYPE html>
<html>
<head>
<title>SokanAcademy jQuery Tutorial</title>
<script src="jquery-3.4.1.js"></script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}
</style>
</head>
<body>
<button id="btn">Button</button>
<div id="wrapper">
<p id="paragraph-1">This is paragraph 1.</p>
<p id="paragraph-2">This is paragraph 2.</p>
<p class="important" id="paragraph-3">This is paragraph 3.</p>
<p id="paragraph-4">This is paragraph 4.</p>
</div>
</body>
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#paragraph-1').css({
'color': 'green',
'font-size': '100px'
});
$('#paragraph-2').addClass('important');
$('#paragraph-3').removeClass('important');
$('#paragraph-4').toggleClass('important');
});
});
</script>
</html>همان‌طور که ملاحظه می‌شود، با قرار دادن علائم {} داخل متد ()css توانسته‌ایم پراپرتی‌های color و font-size را مقداردهی کنیم.
جمع‌بندی
اگرچه که jQuery به نسبت رقبایی همچون React یا Vue کمی قدیمی به نظر می‌رسد، اما بسیاری از پروژه‌ها هستند که کماکان با این لایبرری توسعه داده شده‌اند و توسعه داده می‌شوند و از آنجا که یادگیری اصول کار با جیکوئری بسیار ساده است، می‌توان با صرف اندک زمانی اقدام به یادگیری آن نماییم.
