0

سبد خرید شما خالی است.

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

رویدادهای جی کوئری-درس پنجم

نویسنده رعنا زارع
امتیاز مطلب
تعداد بازدید 89
تاریخ بروزرسانی ۲۳ شهریور ۱۳۹۶

 آموزش جی کوئری (JQuery)

درس پنجم :  رویدادهای جی کوئری (JQuery Events)

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

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

تمام کارهایی که کاربر می تواند در صفحه وب انجام دهد و صفحه وب قادر است به آنها پاسخ دهد ، رویداد (Event) گفته می شود. به عبارتی دیگر هر رویداد نماینده ی لحظه ای است که اتفاقی در صفحه رخ می دهد.

به عنوان مثال :

کلیک کردن بر روی یکی از عناصر صفحه .

حرکت موس بر روی یکی از عناصر صفحه.

و… .

برای درک بهتر رویدادهای جی کوئری و نحوه کاربرد آنها بهتر است بدانید واژه « رویداد » اغلب به همراه فعل« اتفاق افتادن » به کار برده می شود .به عنوان مثال : رویدادondblclick  زمانی اتفاق می افتد که کاربر روی یک عنصر HTML دوبار کلیک کند .

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

      رویداد های موس :

Click                             dblclick                              mouseenter                       mouseleave 

      رویدادهای صفحه کلید :

Keypress                             keydown                         keyup

      رویداد های فرم :

Submit                    change                      focus                       blur

      رویدادهای صفحه/پنجره :

Load                             resize                       scroll                      unload

نحوه استفاده از رویدادهای جی کوئری :

اکثر وقایعی که در یک صفحه وب اتفاق می افتد دارای یک تابع معادل در جی کوئری هستند .

به عنوان مثال:

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

$("p").ondblclick ();

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

("p").ondblclick (function(){

  // action goes here!!

});

آموزش رویدادهای جی کوئری

رایج ترین رویدادهای جی کوئری :

این متد به شما اجازه می دهد تا یک تابع را زمانی که صفحه کاملاً بارگذاری شد، اجرا کنید.

$(document).ready()

این متد، یک تابع را برای پاسخ دادن به رویداد onclick یک عنصر، به آن اختصاص می دهد.

زمانی که کاربر روی یک عنصر HTML کلیک کند، رویداد onclick اتفاق می افتد.

click()

 

مثال:

در کد زیر زمانی که کاربر روی هر کدام از تگ های  <p> در صفحه کلیک کند، پاراگراف مورد نظر پنهان می شود .

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

این متد، یک تابع را برای پاسخ دادن به رویداد ondblclick یک عنصر، به آن اختصاص می دهد.

dblclick()

مثال :

در کد زیر زمانی که کاربر روی یک عنصر HTML دابل کلیک کند، رویداد ondblclick اتفاق می افتد.

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

این متد، یک تابع را برای پاسخ دادن به رویداد onmouseover یک عنصر، به آن اختصاص می دهد.

mouseenter()

مثال :

در کد زیر زمانی که موس کاربر روی یک عنصر HTML قرار می گیرد، رویداد onmouseover اتفاق می افتد.

$("#p1").mouseenter(function(){
 alert("You-entered-p1!");
});

این متد، یک تابع را برای پاسخ دادن به رویداد onmouseout یک عنصر، به آن اختصاص می دهد.

mouseleave()

مثال:

در کد زیر زمانی که موس کاربر از روی یک عنصر HTML خارج می شود، رویداد onmouseout اتفاق می افتد.

$("#p1").mouseleave(function(){
 alert("Bye!You-now-leave-p1!");
});

این متد، یک تابع را برای پاسخ دادن به رویداد onmousedown یک عنصر، به آن اختصاص می دهد.

mousedown()

مثال :

در کد زیر زمانی که موس کاربر روی یک عنصر HTML قرار دارد و چپ کلیک کند، رویداد onmousedown اتفاق می افتد.

$("#p1").mousedown(function(){
 alert("Mouse-down-over-p1!");
});

این متد، یک تابع را برای پاسخ دادن به رویداد onmouseup یک عنصر، به آن اختصاص می دهد.

mouseup()

مثال :

در کد زیر زمانی که موس کاربر روی یک عنصر HTML قرار دارد و چپ کلیک را رها کند، رویداد onmouseup اتفاق می افتد.

$("#p1").mouseup(function(){
 alert("Mouse-up-over-p1!");
});

این متد، همزمان دو تابع را برای پاسخ دادن به رویداد onmouseover و onmouseout یک عنصر، به آن اختصاص می دهد.

hover()

مثال :

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

$("#p1").hover(function(){
 alert("You-entered-p1!");
 },
 function(){
 alert("Bye!You-now-leave-p1!");
});

این متد، یک تابع را برای پاسخ دادن به رویداد onfocus یک عنصر، به آن اختصاص می دهد.

focus()

مثال :

در کد زیر زمانی که علامت چشمک زن مکان نما روی یکی از اجزای فرم، مانند: Text Box قرار گیرد، رویداد onfocus اتفاق می افتد.

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

این متد، یک تابع را برای پاسخ دادن به رویداد onBlur یک عنصر، به آن اختصاص می دهد.

blur()

مثال :

در کد زیر زمانی که تمرکز از روی یکی از اجزای فرم خارج شود، رویداد onBlur اتفاق می افتد.

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

ممنون از اینکه با تیم وبیار همراه بودید وباز هم توصیه تیم وبیار به شما دوستان عزیز : سعی کنید با صرف زمان کافی و با تمرین رویدادهای جی کوئری که در این قسمت  از آموزش جی کوئری به آن پرداختیم با آنها و نحوه استفده هر کدام بیشتر آشنا شوید. شما میتوانید با مراجعه به کدهای  سایت های مختلف موجود در اینترنت و یا همین سایت وبیار (راست کلیک > view page source) با نحوه به کارگیری درست رویدادهای جی کوئری آشنا شوید.

برای انجام طراحی سایت های حرفه ای و بهینه سازی آنها وبیار را به خاطر بسپارید.

مطالب مرتبط
افزایش فروش طراحی سایت
مطالعه : 10 دقیقه

با طراحی سایت تخصصی به اهداف فروش پر درآمد برسید     یکی از بزرگترین و مهمترین اهداف تیم وب یار، کمک به افزایش فروش و درآمد مشتریان است. در واقع تخصص اصلی ما بازاریابی و مارکتینگ است که در قالب مشاوره، طراحی سایت ارزان و زیبا، تبلیغات، آموزش های تکنیکی و مفید به مدیران در جهت مدیریت بهتر نیروها و … می باشد و هدف از طراحی سایت، افزایش فروش و درآمد شماست.   هدف ما از طراحی سایت، افزایش فروش و درآمد شماست   يک وب سايت سئو شده! امروزه تمام افراد جامعه داراي کامپيوتر و موبایل و تبلت هستند که دسترسي به اينترنت را برای آنان بسیار راحت کرده است. این افراد برای انتخاب و خرید هر چیز کوچکی ابتدا در اینترنت به جستجو می پردازند و با مقایسه و داشتن اطلاعات کامل اقدام به خرید می کنند. پس هر کس که دارای یک وبسایت موفق و سئو شده باشد در نتایج جستجو دیده خواهد شد. تیم وب یار، با ارائه خدمات طراحي وب سايت با تخصص و مهارت لازم، مي تواند به شما در ساخت يک وب سايت کمک کند که منافع اين واقعیت را که اينترنت کامل ترين ابزار تجارت (خريد و فروش) اين قرن خواهد بود را به شما خواهد داد. تجربه هاي حرفه اي که شرکت طراحي وب سايت ما بکار مي برد […]

seo-webyar-کلاس های آموزشی سئو وب یار
مطالعه : 2 دقیقه

کلاس های آموزشی سئو در اصفهان بهترین راه برای یاد گیری علوم سئو و استاندارد های طراحی سایت از صفر است زیرا بدون خطا و در کنار متخصصین سئو سایت در اصفهان سایت خود را با آسودگی تحلیل و آموزش های مربوط به آنالیز، بهینه سازی و روش های سئو گوگل یاد خواهید گرفت. طراحی سایت وب یار کلاس های آموزشی کامل سئو با ۳۰ سرفصل آموزشی، هم چنین دوره ی کامل تر آن با ۵۰ سرفصل آموزشی برای علاقمندان در شهر اصفهان و شهرهای حومه اصفهان برگزار می کند. چرا سئو و اهمیت سئو: خیلی از مدیران زمانی که با شرکت ما تماس می گیرند، از ما می پرسند که سایت آنان همانند خیلی از شرکت های رقبایشان در صفحات اول گوگل نمایش داده نمی شود؟ یا درخواست طراحی سایتی را دارند که وقتی کاربران، مطلبی مرتبط با سایت آن ها را جستجو می کنند سایت آن ها در صفحه ی اول و دوم گوگل نمایش داده بشود، این همان سئو است که شاید بارها افراد از آن استفاده بکنند اما شاید نام تخصصی آن را نداند، یا اینکه چه اتفاقاتی افتاده که یک وب سایت در صفحات اول گوگل قرار گرفته است؟ سئو کردن سایت یعنی تولید کردن صفحات وبی که برای موتورهای جستجو جالب هستند و باعث شود که شما در نتایج یک موتور جستجوی بزرگ بیشترین […]

مطالعه : 7 دقیقه

طراحی آرم یا لوگو و ست اداری آیا تا حالا به چگونه مجسم شدن برند خودتون تو ذهن مشتریانتون فکر کرده اید؟ فکر می کنید وقتی که نام شرکت یا حوزه ی صنعتی شما در مکانی برده میشه دیگران چه تصویری از برند شما از ذهنشون به سرعت رد میشه؟ به نظر خودتون آرم یا لوگو شما به شکلی هست که بتونه ملکه ذهن دیگران بشه؟ اگر تو پاسخ به همه ی این سوالات شک داری بهتره با تیم طراحی آرم لوگو ست اداری اصفهان وب یار همراه بشی تا اطمینان خاطر پیدا کنی طراحی لوگو و آرم شما به نحوی هست که بتونه بیانگر تخصص شما و برجسته شدن شما در میان رقباتون بشه.     طراحی آرم یا لوگو و ست اداری برای هر شرکت یا مؤسسه یا سازمان یک امر ضروری محسوب می شود. با داشتن یک آرم یا لوگوی منحصر به فرد به راحتی می توانید در میان رقبای خود بیشتر و بهتر بدرخشید. همچنین در میان مشتریان به وسیله آرم یا لوگوی خاص خود شناخته شده و برند می شوید و مشتریان ثابت بسیاری را بدست می آورید. وجود یک نشان زیبا و چشمگیر که در ست اداری شما نیز مشاهده شود احساس خوب همراه با نمایش قدرت شما را در ضمیر مشتریانتان بر می انگیزد. با توجه به اینکه هنوز برخی از مشتریان تفاوت […]

طراحی فروشگاه اینترنتی
مطالعه : 10 دقیقه

طراحی سایت و طراحی فروشگاه اینترنتی امروز با مقایسه طراحی سایت و فروشگاه اینترنتی به سراغ شما آمده ایم تا تفاوت این دو برای شما آشکار شود، چرا که بسیاری از مدیران کسب و کار و مشاغل در زمان سفارش طراحی سایت و یا فروشگاه اینترنتی دچار سردرگمی می شوند و نمی دانند برای هدف خود باید کدام یک را برگزینند. در ادامه با توضیحاتی مختصر و کاربردی در خصوص طراحی سایت و طراحی فروشگاه اینترنتی در خدمت شما هستیم تا بتوانیم بهترین راهنما جهت سفارش طراحی سایت و طراحی فروشگاه اینترنتی برای شما باشیم.     طراحی سایت 1) تعریف اجمالی از طراحی سایت: طراحی سایت و طراحی فروشگاه اینترنتی با زبان های مختلف و با سیستم های مدیریت مختلف از قبیل وردپرس، جوملا، دروپال، نیوک و … در دنیا در حال انجام است که از میان آن ها وردپرس اولین رتبه را به خود اختصاص داده است.   2) مراحل طراحی سایت: همان طور که در مطالب قبل مراحل طراحی سایت و طراحی فروشگاه اینترنتی را برای شما شرح داده ایم طراحی سایت حرفه ای و استاندارد از جلسه مشاوره و انتخاب امکانات که میان طراحان سایت و مشتری است شروع می شود و تا مراحل بعدی طراحی گرافیکی، برنامه نویسی ایستاتیک و داینامیک سایت، تست آزمون و خطا سایت، و پشتیبانی و آموزش سایت ادامه دارد.   […]

سئو فروشگاه اینترنتی
مطالعه : 8 دقیقه

 اصول بهینه سازی فروشگاه اینترنتی سئو سایت فروشگاهی سئو سایت و بهینه سازی سایت بر اساس اصول استاندارد و سئو شده یکی از مهم ترین مراحل طراحی سایت است، اما سئو فروشگاه اینترنتی و اصول بهینه سازی فروشگاه اینترنتی نیز برای افزایش فروش و درآمد مشتریان به شدت حایز اهمیت می باشد و دارندگان فروشگاه های اینترنتی مهم ترین هدفی که از راه اندازی فروشگاه های اینترنتی دارند سوق دادن مشتریانشان به سمت فروشگاه اینترنتی و خرید مشتریانشان از سایتشان میباشد، به همین دلیل سئو سایت فروشگاهی از سئو کد نویسی سئو کانتنت گرفته تا سئو یوزر فرندلی (کاربر پسندانه بودن ظاهر سایت) سئو اکسترنال و دیگر مراحل سئو حایز اهمیت میباشد. بهینه سازی یا سئو یکی از مهمترین موضوعات قابل توجه برای طراحی سایت فروشگاهی می باشد ، اما اصول بهینه سازی فروشگاه اینترنتی آن قدر حایز اهمیت است که فروشگاه اینترنتی شما را دچار رکود یا سقوط میکند، در حالی که در بسیاری از فروشگاه های مبتنی بر وب نادیده گرفته می شود. سئو فروشگاه اینترنتی می تواند ترافیک بیشتری را برای شما به ارمغان آورد ، بنابراین لازم نیست شما تنها بر تبلیغات و لینک ها تمرکز کنید. با انجام تکنیک های عمومی بهینه سازی می توانید تا حدودی به سطحی از سئو دست یابید و جایگاه فروشگاه خود را در نتایج جستجو ارتقاء دهید و از رقبای […]

طراحی سایت حرفه ای
مطالعه : 15 دقیقه

طراحی سایت اصفهان |طراحی سایت حرفه ای | سئو تضمینی سایت تیم طراحی سایت و سئو سایت وب یار به آدرس https://www.webyar.net ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت ,سئوسایت در گوگل و امنیت سرور

دیدگاه ها

دیدگاهتان را بنویسید

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