جستجو برای:
  • صفحه اصلی
  • وبلاگ تخصصی جاوااسکریپت
    • جاوااسکریپت
    • Angular
    • Nodejs
    • Reactjs
    • Vuejs
    • Electronjs
    • دیتابیس MongoDB
    • کتابخانه های جاوا اسکریپت
    • فریمورک های جاوا اسکریپت
  • تونل یادگیری رایگان
    • آموزش رایگان جاوااسکریپت
      • 1) جاوااسکریپت چیست ؟
      • 2) بارگذاری جاوااسکریپت
      • 3) کامنت گذاشتن در جاوااسکریپت
      • 4) متغیرها در جاوااسکریپت
      • 5) عملگرها در جاوااسکریپت
      • 6) انواع داده در جاوااسکریپت
      • 7) اعداد در جاوااسکریپت
      • 8) رشته ها در جاوااسکریپت
      • 9) متد های رشته در جاوااسکریپت
      • 10) آرایه ها در جاوااسکریپت
      • 11) متدهای آرایه در جاوااسکریپت
      • 12) مرتب سازی آرایه در جاوااسکریپت
      • 13) اشیا در جاوااسکریپت
      • 14) توابع در جاوااسکریپت
      • 15) توابع ریاضی در جاوااسکریپت
      • 16) دستور شرطی if در جاوااسکریپت
      • 17) دستور Switch در جاوااسکریپت
      • 18) آموزش حلقه for در جاوااسکریپت
      • 19) آموزش حلقه while
    • آموزش رایگان جی کوئری
      • 1) جی کوئری چیست ؟
      • 2) نصب جی کوئری
      • 3) سینتکس جی کوئری
      • 4) سلکتورها در جی کوئری
      • 5) رویداد ها در جی کوئری
      • 6) Hide و Show در جی کوئری
      • 7) افکت Fade در جی کوئری
      • 8) افکت Slide در جی کوئری
      • 9) انیمیشن در جی کوئری
      • 10) افکت ها در جی کوئری
      • 11) دسترسی به محتوای تگ ها (Get)
      • 12) ارسال اطلاعات به تگ ها (Set)
    • آموزش های کامل جاوااسکریپت
      • آموزش کامل Operators (عملگرها)
      • آموزش کامل حلقه ها و شرط ها
      • آموزش کامل Objects (اشیا)
      • آموزش کامل Arrays (آرایه ها)
      • آموزش کامل Functions (توایع)
  • دوره ها
    • دوره رایگان جاوااسکریپت
    • دوره رایگان عملگرها (Operators)
    • دوره رایگان شرط ها و حلقه ها
    • دوره رایگان اشیا (Objects)
    • دوره رایگان آرایه ها (Arrays)
    • دوره رایگان توابع (Functions)
    • دوره پروژه محور هیولای جاوااسکریپت
    • دوره رایگان React مقدماتی
    • دوره پروژه محور هیولای React
  • نقشه راه یادگیری جاوااسکریپت
 
MEGA JS
  • صفحه اصلی
  • وبلاگ تخصصی جاوااسکریپت
    • جاوااسکریپت
    • Angular
    • Nodejs
    • Reactjs
    • Vuejs
    • Electronjs
    • دیتابیس MongoDB
    • کتابخانه های جاوا اسکریپت
    • فریمورک های جاوا اسکریپت
  • تونل یادگیری رایگان
    • آموزش رایگان جاوااسکریپت
      • 1) جاوااسکریپت چیست ؟
      • 2) بارگذاری جاوااسکریپت
      • 3) کامنت گذاشتن در جاوااسکریپت
      • 4) متغیرها در جاوااسکریپت
      • 5) عملگرها در جاوااسکریپت
      • 6) انواع داده در جاوااسکریپت
      • 7) اعداد در جاوااسکریپت
      • 8) رشته ها در جاوااسکریپت
      • 9) متد های رشته در جاوااسکریپت
      • 10) آرایه ها در جاوااسکریپت
      • 11) متدهای آرایه در جاوااسکریپت
      • 12) مرتب سازی آرایه در جاوااسکریپت
      • 13) اشیا در جاوااسکریپت
      • 14) توابع در جاوااسکریپت
      • 15) توابع ریاضی در جاوااسکریپت
      • 16) دستور شرطی if در جاوااسکریپت
      • 17) دستور Switch در جاوااسکریپت
      • 18) آموزش حلقه for در جاوااسکریپت
      • 19) آموزش حلقه while
    • آموزش رایگان جی کوئری
      • 1) جی کوئری چیست ؟
      • 2) نصب جی کوئری
      • 3) سینتکس جی کوئری
      • 4) سلکتورها در جی کوئری
      • 5) رویداد ها در جی کوئری
      • 6) Hide و Show در جی کوئری
      • 7) افکت Fade در جی کوئری
      • 8) افکت Slide در جی کوئری
      • 9) انیمیشن در جی کوئری
      • 10) افکت ها در جی کوئری
      • 11) دسترسی به محتوای تگ ها (Get)
      • 12) ارسال اطلاعات به تگ ها (Set)
    • آموزش های کامل جاوااسکریپت
      • آموزش کامل Operators (عملگرها)
      • آموزش کامل حلقه ها و شرط ها
      • آموزش کامل Objects (اشیا)
      • آموزش کامل Arrays (آرایه ها)
      • آموزش کامل Functions (توایع)
  • دوره ها
    • دوره رایگان جاوااسکریپت
    • دوره رایگان عملگرها (Operators)
    • دوره رایگان شرط ها و حلقه ها
    • دوره رایگان اشیا (Objects)
    • دوره رایگان آرایه ها (Arrays)
    • دوره رایگان توابع (Functions)
    • دوره پروژه محور هیولای جاوااسکریپت
    • دوره رایگان React مقدماتی
    • دوره پروژه محور هیولای React
  • نقشه راه یادگیری جاوااسکریپت
0
ورود / ثبت نام

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

16 تیر 1398
ارسال شده توسط محمدرضا حاجی مقصودی
یادگیری جی کوئری
4.51k بازدید

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

تونل یادگیری جی کوئری

پس از اینکه با سلکتورها در Jquery و انواع آنها آشنا شدیم، لازم است تا رویداد ها (events) را یاد بگیریم. رویداد ها بیانگر این هستند که چه زمانی، چه دستوری روی سلکتور ما اعمال شود.

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

دستوراتی که جی کوئری برای رویداد ها در اختیار ما قرار میدهد ساده و جامع هستند که به راحتی میتوان تمامی تغییراتی که میخواهیم را، توسط رویداد ها مختلفی بر روی عناصر html خود اعمال کنیم.

نحوه نوشتن رویداد ها در جی کوئری

برای مشخص کردن یک رویداد یا Event ابتدا سلکتور را قرار میدهیم و پس از آن event را همراه آن می آوریم. به مثال زیر توجه کنید:

$("h1").click();

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

$("h1").click(function(){
// این دستورها اجرا شود
});

انواع رویداد در JQUERY

رویداد document.ready

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

بیشتر بخوانید  2) نصب جی کوئری

رویداد ()click

رویداد ()click زمانی که کاربر روی سلکتور کلیک کند دستورات را اجرا میکند. کد زیر نشان میدهد که زمانی که بر روی هر کدام از تگ های h1 کلیک شود آن عنصر پنهان میشود.

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

رویداد ()dblclick

رویداد ()dblclick زمانی دستورات را اجرا میکند که دو بار بر روی سلکتورمان کلیک کنیم. استفاده از این سلکتور در تلفن های همراه و تاچ کمی ما را با مشکل مواجه میکند اما بر حسب نیاز می توان از این رویداد استفاده کنیم.

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

رویداد ()mouseenter

دستورات رویداد ()mouseenter زمانی اجرا میشوند که نشانه گر موس بر روی سلکتورمان قرار بگیرد. به عنوان مثال، زمانی که نشانه گر موس را روی عنصر html با آی دی test قرار بگیرد یک پیغام به ما نمایش داده میشود.

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

رویداد ()mouseleave

زمانی که نشانه گر موس را از روی سلکتور برداریم دستورات رویداد mouseleave در جی کوئری اجرا میشود. مثال زیر بر عکس مثال بالا عمل میکند و با خارج شدن موس به ما پیغام نشان میدهد.

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

رویداد ()mousedown

زمانی که یکی از کلید های راست، میانی یا چپ موس بر روی المان مشخص شده فشرده شده است و رها نشده است دستورات رویداد ()mousedown بر روی سلکتور اعمال میشود.

$(".p1").mousedown(function(){
alert("Mouse down");
});

رویداد ()mouseup

هنگامی که کلید راست یا میانی یا چپ موش را از حالت فشار داده شده رها کنیم دستورات رویداد ()mouseup در Jquery اجرا می شود.

$(".p1").mouseup(function(){
alert("Mouse up");
});

رویداد ()hover

رویداد hover متشکل از دو رویداد mouseenter و mouseleave است. هنگام کار با این رویداد از دو تابع استفاده میکنیم که به ترتیب اجرا میشوند.

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

رویداد ()focus

در فایل html که المان های فرم قرار دارند، زمانی که رو هر input کلیک کنیم و قصد وارد کردن اطلاعات را داشته باشیم این رویداد وارد صحنه میشود و دستورات موجود در رویداد ()focus آن اجرا می شود. در مثال زیر زمانی که روی هر input کلیک کنیم رنگ زمینه ی آن تغییر میکند.

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

رویداد ()blur

هر input که رویداد focus روی آن فعال شده را از دست بدهد این رویداد فعال میشود و دستورات داخل آن اجرا می شوند. مثال زیر بیانگر این ویژگی است.

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

استفاده از چند رویداد روی یک سلکتور در جی کوئری

برای اینکه از چند رویداد روی سلکتور استفاده کنیم از دستور on بهره میبریم. این دستور این امکان را فراهم میکند تا چندین رویداد را همزمان روی یک سلکتورتنظیم کنیم. مانند کد زیر از دستور on استفاده میکنیم.

$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
اشتراک گذاری:
برچسب ها: تونل یادگیریجی کوئرییادگیری جی کوئری

مطالب زیر را حتما مطالعه کنید

ارسال اطلاعات به تگ ها در جی کوئری

12) ارسال اطلاعات به تگ ها با جی کوئری (Set)

دسترسی به محتوای html با جی کوئری

11) دسترسی به محتوای تگ ها با جی کوئری

افکت ها در جی کوئری

10) افکت ها در جی کوئری (تکمیلی)

انیمیشن در جی کوئری

9) انیمیشن در جی کوئری (Animation)

افکت Slide در جی کوئری

8) افکت Slide در جی کوئری

افکت Fade در جی کوئری

7) افکت Fade در جی کوئری

1 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • فاطمه گفت:
    20 آبان 1399 در 12:40

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

    برای پاسخ دادن وارد شوید

دیدگاهتان را بنویسید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.

جستجو برای:
هیولای جاوااسکریپت

آموزش پروژه محور جاوااسکریپت

آموزش پروژه محور جاوااسکریپت

دسته‌ها
  • Angular
  • Denojs
  • Electronjs
  • Mongo DB
  • Nodejs
  • React
  • Vue
  • ابزار و تکنولوژی
  • جاوااسکریپت
  • فریم ورک ها
  • کتابخانه ها
  • وبلاگ
  • یادگیری React
  • یادگیری جاوااسکریپت
  • یادگیری جی کوئری
جاوااسکریپت را از کجا شروع کنیم؟

نقشه راه یادگیری جاوا اسکریپت

MEGAJS | مگا جی اس

جدیدترین نوشته ها
  • ۲6) تمرین عملگرها: جا به جایی متغیرها با جاوااسکریپت
  • Typescript چیست؟ چرا باید ازش استفاده کنیم؟
  • ۲۵) آموزش اولویت عملگرها در جاوااسکریپت
  • ۲۴) آموزش عملگرهای منطقی در جاوااسکریپت
درباره MEGA JS، دنیای جذاب جاوااسکریپت

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

دوره های رایگان مگا جی اس

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

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

دوره های هیولای مگا جی اس

دوره ۲۰روش درآمدی هیولای درامدزایی
دوره پروژه محور هیولای جاوا اسکریپت
دوره پروژه محور هیولای ری اکت

فیلم های آموزشی رایگان در

کانال آپارات MEGAJS   کانال آپارات MEGAJS

کانال یوتوب MEGAJS   

تمامی حقوق برای سایت MEGA JS محفوظ می باشد.
ورود به سایت ×
رمز عبور خود را فراموش کرده اید؟
ورود با رمز یکبار مصرف
ارسال کد یکبار مصرف(00:120)
حساب کاربری ندارید؟
ثبت نام
ارسال کد یکبار مصرف(00:120)
بازگشت به ورود

ارسال کد یکبار مصرف (00:120)
بازگشت به ورود
  • (+93) افغانستان
  • (+355) Albania
  • (+213) Algeria
  • (+1) American Samoa
  • (+376) Andorra
  • (+244) Angola
  • (+1) Anguilla
  • (+1) Antigua
  • (+54) Argentina
  • (+374) Armenia
  • (+297) Aruba
  • (+61) Australia
  • (+43) Austria
  • (+994) Azerbaijan
  • (+973) Bahrain
  • (+880) Bangladesh
  • (+1) Barbados
  • (+375) Belarus
  • (+32) Belgium
  • (+501) Belize
  • (+229) Benin
  • (+1) Bermuda
  • (+975) Bhutan
  • (+591) Bolivia
  • (+599) Bonaire, Sint Eustatius and Saba
  • (+387) Bosnia and Herzegovina
  • (+267) Botswana
  • (+55) Brazil
  • (+246) British Indian Ocean Territory
  • (+1) British Virgin Islands
  • (+673) Brunei
  • (+359) Bulgaria
  • (+226) Burkina Faso
  • (+257) Burundi
  • (+855) Cambodia
  • (+237) Cameroon
  • (+1) Canada
  • (+238) Cape Verde
  • (+1) Cayman Islands
  • (+236) Central African Republic
  • (+235) Chad
  • (+56) Chile
  • (+86) China
  • (+57) Colombia
  • (+269) Comoros
  • (+682) Cook Islands
  • (+225) Côte d'Ivoire
  • (+506) Costa Rica
  • (+385) Croatia
  • (+53) Cuba
  • (+599) Curaçao
  • (+357) Cyprus
  • (+420) Czech Republic
  • (+243) Democratic Republic of the Congo
  • (+45) Denmark
  • (+253) Djibouti
  • (+1) Dominica
  • (+1) Dominican Republic
  • (+593) Ecuador
  • (+20) Egypt
  • (+503) El Salvador
  • (+240) Equatorial Guinea
  • (+291) Eritrea
  • (+372) Estonia
  • (+251) Ethiopia
  • (+500) Falkland Islands
  • (+298) Faroe Islands
  • (+691) Federated States of Micronesia
  • (+679) Fiji
  • (+358) Finland
  • (+33) France
  • (+594) French Guiana
  • (+689) French Polynesia
  • (+241) Gabon
  • (+995) Georgia
  • (+49) Germany
  • (+233) Ghana
  • (+350) Gibraltar
  • (+30) Greece
  • (+299) Greenland
  • (+1) Grenada
  • (+590) Guadeloupe
  • (+1) Guam
  • (+502) Guatemala
  • (+44) Guernsey
  • (+224) Guinea
  • (+245) Guinea-Bissau
  • (+592) Guyana
  • (+509) Haiti
  • (+504) Honduras
  • (+852) Hong Kong
  • (+36) Hungary
  • (+354) Iceland
  • (+91) India
  • (+62) Indonesia
  • (+98) ایران
  • (+964) عراق
  • (+353) Ireland
  • (+44) Isle Of Man
  • (+972) Israel
  • (+39) Italy
  • (+1) Jamaica
  • (+81) Japan
  • (+44) Jersey
  • (+962) Jordan
  • (+7) Kazakhstan
  • (+254) Kenya
  • (+686) Kiribati
  • (+965) Kuwait
  • (+996) Kyrgyzstan
  • (+856) Laos
  • (+371) Latvia
  • (+961) Lebanon
  • (+266) Lesotho
  • (+231) Liberia
  • (+218) Libya
  • (+423) Liechtenstein
  • (+370) Lithuania
  • (+352) Luxembourg
  • (+853) Macau
  • (+389) Macedonia
  • (+261) Madagascar
  • (+265) Malawi
  • (+60) Malaysia
  • (+960) Maldives
  • (+223) Mali
  • (+356) Malta
  • (+692) Marshall Islands
  • (+596) Martinique
  • (+222) Mauritania
  • (+230) Mauritius
  • (+262) Mayotte
  • (+52) Mexico
  • (+373) Moldova
  • (+377) Monaco
  • (+976) Mongolia
  • (+382) Montenegro
  • (+1) Montserrat
  • (+212) Morocco
  • (+258) Mozambique
  • (+95) Myanmar
  • (+264) Namibia
  • (+674) Nauru
  • (+977) Nepal
  • (+31) Netherlands
  • (+687) New Caledonia
  • (+64) New Zealand
  • (+505) Nicaragua
  • (+227) Niger
  • (+234) Nigeria
  • (+683) Niue
  • (+672) Norfolk Island
  • (+850) North Korea
  • (+1) Northern Mariana Islands
  • (+47) Norway
  • (+968) Oman
  • (+92) پاکستان
  • (+680) Palau
  • (+970) Palestine
  • (+507) Panama
  • (+675) Papua New Guinea
  • (+595) Paraguay
  • (+51) Peru
  • (+63) Philippines
  • (+48) Poland
  • (+351) Portugal
  • (+1) Puerto Rico
  • (+974) Qatar
  • (+242) Republic of the Congo
  • (+40) Romania
  • (+262) Runion
  • (+7) Russia
  • (+250) Rwanda
  • (+290) Saint Helena
  • (+1) Saint Kitts and Nevis
  • (+508) Saint Pierre and Miquelon
  • (+1) Saint Vincent and the Grenadines
  • (+685) Samoa
  • (+378) San Marino
  • (+239) Sao Tome and Principe
  • (+966) Saudi Arabia
  • (+221) Senegal
  • (+381) Serbia
  • (+248) Seychelles
  • (+232) Sierra Leone
  • (+65) Singapore
  • (+1) Sint Maarten
  • (+421) Slovakia
  • (+386) Slovenia
  • (+677) Solomon Islands
  • (+252) Somalia
  • (+27) South Africa
  • (+82) South Korea
  • (+211) South Sudan
  • (+34) Spain
  • (+94) Sri Lanka
  • (+1) St. Lucia
  • (+249) Sudan
  • (+597) Suriname
  • (+268) Swaziland
  • (+46) Sweden
  • (+41) Switzerland
  • (+963) Syria
  • (+886) Taiwan
  • (+992) Tajikistan
  • (+255) Tanzania
  • (+66) Thailand
  • (+1) The Bahamas
  • (+220) The Gambia
  • (+670) Timor-Leste
  • (+228) Togo
  • (+690) Tokelau
  • (+676) Tonga
  • (+1) Trinidad and Tobago
  • (+216) Tunisia
  • (+90) ترکیه
  • (+993) Turkmenistan
  • (+1) Turks and Caicos Islands
  • (+688) Tuvalu
  • (+1) U.S. Virgin Islands
  • (+256) Uganda
  • (+380) Ukraine
  • (+971) ایلات متحده عربی
  • (+44) پادشاهی متحد بریتانیا
  • (+1) ایالات متحده آمریکا
  • (+598) Uruguay
  • (+998) Uzbekistan
  • (+678) Vanuatu
  • (+58) Venezuela
  • (+84) Vietnam
  • (+681) Wallis and Futuna
  • (+212) Western Sahara
  • (+967) Yemen
  • (+260) Zambia
  • (+263) Zimbabwe

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت