پیش از پرداختن به این کلاس، لازم به یادآوری است که گاهی میتوان از Constant به جای Enum استفاده نمود که چنین کاری مشکلات خاص خود را خواهد داشت که برای درک بهتر این موضوع، در ادامه ابتدا در فضای لوکالهاست پروژهای با نامی دلخواه همچون enum ساخته سپس فایلی به نام composer.json حاوی ساختار زیر در مسیر روت این پروژه ایجاد میکنیم:

{}

همانطور که ملاحظه میشود، یک آبجکت خالی ایجاد کردهایم؛ سپس کامند زیر را اجرا میکنیم:

/var/www/enum$ composer dump-autoload -o

در صورت موفقیتآمیز بودن کامند فوق، خواهیم دید که پوشهای جدید تحت عنوان vendor در مسیر روت پروژه ساخته میشود که حاوی فایلی تحت عنوان autoload.php است که با استفاده از آن به سادگی قادر خواهیم بود تا به صورت خودکار، کلاسهای مورد استفاده در جایجای پروژه را ایمپورت نماییم (جهت آشنایی بیشتر با پروسهٔ اُتولودینگ در زبان برنامهنویسی پیاچپی، میتوانید به آموزشآشنایی با مفاهیم Class و Object در متودولوژی OOP مراجعه نمایید.) حال در ادامه پوشهٔ دیگری تحت عنوان classes در مسیر روت این پروژه ایجاد میکنیم که وظیفهٔ نگهداری کلاسهای مختلف را دارا است اما پیش از ساخت هر گونه کلاسی، مجدد به فایل composer.json بازگشته و آن را به صورت زیر تکمیل میکنیم:

{
    "autoload": {
        "psr-4": {
            "EnumSample\\": "classes"
        }
    }
}

در واقع، بر اساس استاندارد PSR-4 نِیماِسپیسی با نامی دلخواه همچون EnumSample ساخته که به پوشهٔ classes اشاره دارد (در همین راستا، توصیه میشودبرای کسب اطلاعات بیشتر در این خصوص به آموزش آشنایی با مفهوم PHP Standard Recommendationمراجعه نمایید.) در ادامه، داخل پوشهٔ classes فایلی به نام User.php حاوی محتویات زیر میسازیم:

?php
namespace EnumSample;

class User
{
     const GENDER_MALE = 0;
     const GENDER_FEMALE = 1;
     const STATUS_INACTIVE = 0;
     const STATUS_ACTIVE = 1;
}

پس از تعریف نِیماِسپیس، در بلوک کد فوق کلاسی ساختهایم تحت عنوان User که در آن چهار کانستنت مختلف ایجاد کردهایم که در دو گروه اِلِمان مختلف تقسیمبندی شدهاند که عبارتند از *_GENDER و *_STATUS و هر کدام از آنها حاوی یک سری تنظیمات برای به ترتیب جنسیت و وضعیت آبجکتی از جنس یوزر میباشند. به نوعی میتوان هر کدام از گروههای فوق را به عنوان یک Enum در نظر گرفت و همانطور که پیش از این اشاره کردیم، این اصطلاح به مجموعهاز از اِلِمانهای مختلف اما مرتبط با هم اشاره دارد. حال در ادامه فایل دیگری میسازیم به نام UserFactory.php و کدهای زیر را داخل آن مینویسیم:

?php
namespace EnumSample;

class UserFactory
{
    public function create(string $email, int $gender, int $status)
    {
        return "user email is: " . $email . "\nand gender is: " . $gender . "\nand status is: " . $status . "\n";
    }
}

کلاسUserFactory وظیفهٔ ساخت یک کاربر جدید را بر عهده دارد و برای همین منظور هم داخل آن متدی تحت عنوان ()create نوشتهایم که سه پارامتر ورودی میگیرد و داخل این متد صرفاً مقادیر پارامترهای ورودی را ریترن کردهایم. حال خارج از پوشهٔ classes و در مسیر روت پروژه، فایل دیگری میسازیم به نام index.php و داخل آن آبجکت جدیدی از روی این کلاس میسازیم:

?php
require_once "vendor/autoload.php";

$newUser = new EnumSample\UserFactory();
echo $newUser-create('hi@example.com', EnumSample\User::GENDER_MALE, EnumSample\User::STATUS_INACTIVE);

همانطور که ملاحظه میشود، ابتدا به ساکن فایل autoload.php را با استفاده از دستورrequire_once ایمپورت کردهایم سپس از روی کلاسUserFactory آبجکتی به نام newUser$ ساخته و در خط آخر هم با فراخوانی متد ()create و پاس دادن یک سری آرگومان، این متد را تکمیل کردهایم و در صورتی که این فایل را اجرا کنیم، در خروجی خواهیم دید:

PHP Fatal error:  Uncaught Error: Class 'EnumSample\UserFactory' not found in /var/www/enum/index.php:4

متن ارور حاکی از آن است که کلاسی تحت عنوانUserFactory با نِیماِسپیسEnumSample شناخته نشده است که برای رفع این مشکل، کامند زیر را اجرا میکنیم:

$ composer dump-autoload -o

کاری که این دستور انجام میدهد آن است که کلاسهای جدید که داخل پروژهٔ خود ایجاد کردهایم را به رسمیت خواهد شناخت و اگر اکنون مجدد این فایل را اجرا کنیم، به عنوان خروجی خواهیم داشت:

user email is: hi@example.com
and gender is: 0
and status is: 0

در ارتباط با آرگومانهای دوم و سوم این متد باید گفت که از کانستنتهای موجود داخل کلاس Userاستفاده نمودهایم و در نگاه اول این کد به درستی کار میکند اما مشکل اینجا است که با توجه به در نظر گرفتن مقدار صفر برای کانستنتهایGENDER_MALE وSTATUS_INACTIVE، حتی اگر توسعهدهنده سهواً جای این دو آرگومان را اشتباه در نظر گیرد، کد به صورت کاملاً تصادفی باز هم درست کار خواهد کرد به طوری که مثلاً داریم:

echo $newUser-create('hi@example.com', EnumSample\User::STATUS_INACTIVE, EnumSample\User::GENDER_MALE);

همچنین با توجه به این که از قابلیت Type Hinting زبان برنامهنویسی پیاچپی استفاده ننمودهایم، متد فوق را به صورت زیر نیز میتوان بدون هیچ گونه مشکلی کال نمود:

echo $newUser-create('hi@example.com', 2, 3);

و به عنوان خروجی نیز خواهیم داشت:

user email is: hi@example.com
and gender is: 2
and status is: 3

برای رفع این معضل، میتوان با استفاده از کلاسSplEnumکدهای اصولیتری اما آنچه در ادامه قصد داریم مورد بررسی قرار دهیم، یک لایبرری اپنسورس است تحت عنوانPHP Enumمیباشد که با الهام از کلاس فوق توسعه یافته است.

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

راهنمای نصبjQuery

اساساً دو راهکار کلی به منظور نصب و استفاده از این لایبرری وجود دارد؛ اول این که لایبرری مذکور را دانلود نمود و به صورت لوکال آن را لود کرد و راهکار دیگر هم این که با استفاده از یک شبکهٔ توزیع محتوا (سیدیان) این لایببری را لود نمود.

چنانچه بخواهیم راهکار اول را دنبال نموده و به عبارتی با دانلود جیکوئری آن را به صورت لوکال لود کنیم، دو راهکار پیش روی ما است؛ اول این که نسخهٔ به اصطلاحProduction جیکوئری را دانلود کنیم و دوم هم این که از نسخهٔDevelopment استفاده نماییم با این توضیح که نسخهٔ نسخهProduction به منظور دیپلوی روی سرورهای اصلی سایت استفاده میشود چرا که فشردهسازی شده به طوری که حجم صفحه خیلی افزایش پیدا نمیکند اما نسخهٔ Development برای محیط توسعه مناسب است با این توضیح که کدها غیرفشرده و خوانا هستنند (به منظور دانلود این لایبرری، با مراجعه به لینکDownload jQueryدر سایت رسمی جیکوئری میتوان هر کدام از نسخههای فوق که تمایل داشته باشید را دانلود نمایید.)

برای شروع کار با این لایبرری، پوشهای با نامی دلخواه همچون jquery ساخته سپس داخل آن فایل دانلودی را قرار میدهیم و سپس فایلی تحت عنوان index.html ساخته و آن را به صورت زیر تکمیل میکنیم:

!DOCTYPE html
html

head
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy jQuery Tutorial/title
    script src="jquery-3.4.1.js"/script
/head

body
    pParagraph 1/p
    pParagraph 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy jQuery Tutorial/title
    script src="jquery-3.4.1.js"/script
/head

body
    ul
        liChild 1/li
        liChild 2/li
        liChild 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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 strongconsectetur 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
    titleSokanAcademy 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('ulliItem 1/liliItem 2/li/ul');
        });
    });
/script

/html

در تفسیر کدهای فوق باید گفت که متد ()html این وظیفه را دارا است تا ساختار اِلِمانی که هدف قرار داده شده را آپدیت کند. به طور مثال، دستور دادهایم تا در صورت کلیک روی دکمهٔ مذکور، اِلِمانی با شناسهٔ text را یافته و کدهای مرتبط با یک لیست به جای آن قرار گیرد. متد ()val نیز برای فیلدهای یک فرم کاربرد دارد به طوری که برای مثال داریم:

!DOCTYPE html
html

head
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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'+
                            'liItem 1/li'+
                            'liItem 2/li'+
                            'liItem 3/li'+
                        '/ul';
            $('#paragraph-1').after(list);
        });
    });
/script

/html

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

!DOCTYPE html
html

head
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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
    titleSokanAcademy 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 را مقداردهی کنیم.