آموزش Selector ها و Event ها در jQuery

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

آموزش Selector ها و Event ها در jQuery

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

Selector های جی کوئری

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

حال شما دوستان عزیز باید توجه کنید که Selector ها میتوانند عنصر مورد نظر را بر اساس آی دی (id)، کلاس (class)، نوع (type)، صفت (attribute)، مقادیر صفات (value) و … یافته و جهت انجام اعمال دلخواه، در اختیار شما قرار دهند و سپس شما اعمال دلخواه خود را روی آن ها صورت دهید. در جی کوئری علاوه بر Selector های اختصاصی موجود در این کتابخانه، میتوانید از تمامی Selector های استاندارد CSS نیز استفاده کنید.که خب این یک قابلیت بسیار خوب برای شما است.

دوستان ذکر این نکته نیز مهم است که تمامی Selector ها در جی کوئری با یک علامت دلار که با پرانتز همراهی میشود به نمایش در می آیند به صورت شکل زیر:

$()

اما خب دوستان در ادامه این آموزش به شرح انواع مختلف Selector ها خواهیم پرداخت.

انتخابگر عناصر

دوستان عزیز اولین مورد انتخابگر عناصر است.Selector یا انتخابگر عناصر همانطور که از نامش مشخص است، مسئول یافتن عنصر (element) مشخص شده توسط شماست و باید آن را پیدا کرده و برای شما قرار دهد. این انتخابگر، نام عنصر را دریافت کرده و آن را انتخاب میکند. مثلا فرض کنیم میخواهیم تمامی عناصر p موجود در صفحه را انتخاب کنیم. برای این کار از کد زیر استفاده میکنیم :

$("p")

حالا در یک مثال کاربردی میخواهیم کاری کنیم که وقتی کاربر روی دکمه ای کلیک میکند، تمامی عناصر p موجود در صفحه، محو شوند خب برای این منظور شما میتوانید از کد زیر استفاده کنید که در ادامه به توضیح آن خواهم پرداخت:

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

انتخابگر id

مورد بعدی انتخابگر id است.این Selector جهت یافتن عنصر مربوطه، از id مشخص شده در تگ HTML استفاده میکند که خب ممکن است شما در این باره اطلاعاتی داشته باشید. هر id در هر صفحه باید منحصر به فرد باشد. بنابراین وقتی شما از انتخابگر id استفاده میکنید، هدف شما باید پیدا کردن تنها یک عنصر منحصر به فرد باشد که خب فقط در این حالت شما میتوانید گزینه مورد نظر خود را پیدا کنید. فرض کنیم میخواهیم عنصری با آی دی test را در صفحه انتخاب کنیم، برای این کار از کد زیر استفاده میکنیم :

$("#test")

خب دوستان توجه کنید که حالا این بار مثال قبل را کمی تغییر میدهیم تا بتوانیم مثالی جدید برای این مورد ایجاد کنیم. میخواهیم کاری کنیم که وقتی کاربر روی دکمه ای در صفحه کلیک میکند، عنصری که آی دی آن معادل test است محو شود. برای این کار از کد زیر استفاده میکنیم :

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

انتخابگر class

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

$(".test")

دوستان توجه کنید که در این قسمت با استفاده از Selector بالا، عنصری که دارای کلاس test بوده را انتخاب کرده ایم. حالا میخواهیم کاری کنیم که وقتی کاربر روی دکمه ای کلیک میکند، عنصری که دارای کلاس test باشد، در صفحه محو شود برای این منظور میتوان از کد زیر استفاده کرد:

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

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

$("*")
انتخاب تمام عناصر

$(this)
انتخاب عنصر فعلی

$("p.intro")
انتخاب همه ی تگ های پاراگراف که کلاس intro دارند

$("p:first")
انتخاب اولین تگ پاراگراف

$("ul li:first-child")
انتخاب اولین عنصر li از تمامی عناصر ul

$("[href]")
انتخاب تمامی عناصری که از href استفاده کرده اند

$("a[target='_blank']")
انتخاب تمامی لینک هایی که در صفحه جدید باز میشوند

$(":button")
انتخاب تمامی دکمه ها یا ورودی هایی که از نوع دکمه تعریف شده اند

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

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

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

1. نشانه گر موس را روی یک قسمت از صفحه وب قرار دهیم
2. روی یکی از موارد موجود در صفحه وب کلیک کنیم.
3. و…

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

$("p").click();

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

$("p").click(function(){
  // action goes here!!
});

آشنایی با Event های پر کاربرد جی کوئری

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

اولین مورد از این وقایع Clickاست

این واقعه وقتی اتفاق می افتد که کاربر روی عنصر html مورد نظر شما کلیک کرده باشد که خب در همه مواقع این موارد اتفاق می افتد. مثلا در مثال زیر، وقتی کاربر روی پاراگراف کلیک کند، پاراگراف محو خواهد شد برای اطلاعات بیشتر در این مورد میتوانید مثال زیر را مطالعه نمائید:

$("p").click(function(){
    $(this).hide();
});

دومین مورد از این وقایع dblclick است

این واقعه وقتی اتفاق می افتد که کاربر روی عنصر مربوطه دابل کلیک کرده باشد و وقتی این کار را صورت دهد این واقعه نیز صورت میگیرد. مثلا این بار وقتی پاراگراف محو میشود که کاربر روی آن دابل کلیک کند :

$("p").dblclick(function(){
    $(this).hide();
});

سومین مورد از این وقایع mouseenter است

دوستان عزیز توجه کنید که واقعه ی mouseenter همانطور که از نامش هم پیداست، وقتی اجرا میشود که اشاره گر ماوس وارد عنصر HTML مورد نظر شما شده باشد و در غیر اینصورت اجرا نخواهد شد. در مثال پایین وقتی ماوس وارد عنصری دارای آی دی p1 شود، به وی هشداری مبنی بر ورود به این محدوده نشان داده خواهد شد :

$("#p1").mouseenter(function(){
    alert("به p1 خوش آمدید!");
});

چهارمین مورد از این وقایع mouseleave است

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

$("#p1").mouseleave(function(){
    alert("خدانگهدار! p1 را ترک کردید!");
});

پنجمین مورد از این وقایع hover است

دوستان عزیز همانطور که ممکن است بدانید متد hover دو تابع جداگانه میپذیرد که خب این پذیرفتن دو تابع جداگانه یکی از ویژگی های این مورد است. اولین تابع وقتی اتفاق می افتد که ماوس وارد محدوده ی مورد نظر شود و دومین تابع وقتی اتفاق می افتد که ماوس محوطه را ترک کند که خب برای درک بهتر این موضوع در زیر برای شما یک مثال آورده ایم که میتوانید برای یادگیری بهتر شما مفید باشد :

$("#p1").hover(function(){
    alert("وارد p1 شدید!");
},
function(){
    alert("خداحافط! شما p1 را ترک کردید!");
});

ششمین مورد از این وقایع focus است

دوستان همانطور که ممکن است آشنایی داشته باشید این متد بر روی فیلد های یک فرم مورد استفاده قرار میگیرد. این واقعه وقتی اتفاق می افتد که یک فیلد مورد توجه قرار گرفته باشد.دوستان در این قسمت باید توجه کنید که مثلا کاربر با کلیک کردن در فیلد جستجو، آن را فعال کرده باشد. در مثال زیر، پس از اتفاق افتادن واقعه focus، رنگ پس زمینه ی فیلد مورد نظر را تغییر میدهیم به مثال زیر توجه کنید:

$("input").focus(function(){
    $(this).css("background-color", "#ACFF9D");
});

مورد نهایی نیز blur است

دوستان در این قسمت نهایی توجه کنید که این واقعه دقیقا بالعکس واقعه ی focus است. یعنی هرگاه تمرکز روی یک فیلد از بین برود، واقعه ی blur اتفاق می افتد. از این واقعه هم دقیقا به همان شکل که در بالا اشاره شد میتوانید استفاده کنید که خب دیگر مثالی در این رابطه نمیزنم

در نهایت این آموزش هم در مورد یک متد پرکاربرد صحبت میکنم و البته امیدوارم که خسته نشده باشید چون ادامه آموزش را نیز هم باید یاد بگیرید تا آموزش به صورت کامل برای شما مفید فایده باشد

آشنایی با متد on

دوستان ممکن است شما با این متد آشنا باشید ولی در صورتی که نیستید با استفاده از متد on میتوانید تعداد زیادی واقعه را به یک عنصر نسبت دهید. مثلا در کد زیر با استفاده از متد on سه واقعه ی ورود ماوس، خروج ماوس و کلیک را به عنصر p نسبت داده ایم برای درک بهتر به مثال زیر توجه کنید دوستان:

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "gray");
    }, 
    mouseleave: function(){
        $(this).css("background-color", "blue");
    }, 
    click: function(){
        $(this).css("background-color", "violet");
    } 
});

خب دوستان در این قسمت ذکر یک نکته ضروری است.و آن هم این است که از متد on برای نسبت دادن تنها یک event به عنصر مورد نظر نیز میتوان استفاده کرد ولی خوب حالت بالا در استفاده از این متد کاربردی تر خواهد بود و شما باید به آن توجه خاصی داشته باشید.

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

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

منبع: بیگ تم مرجع آموزش وردپرس و هک وردپرس