آموزش مقدماتی تا پیشرفته جی کوئری (jquery) آشنایی با رویداد mouseover ورود نشانه گر موس

به نام خدا با فصل دوم آموزش جی کوئری درخدمت شما عزیزان هستیم.در فصل اول ما به بررسی توابع پرداختیم اما در این فصل قصد داریم درباره Event ها یا همان رویدادها صحبت کنیم.در فصل قبلی شما با رویداد Click آشنا شدید اما غیر از این رویداد ، رویدادهای دیگری نیز وجود دارند که در این فصل از آموزش به آن خواهیم پرداخت.در این جلسه قصد داریم درباره رویداد mouseover صحبت کنیم و مثالی ساده رو با استفاده از این رویداد انجام بدیم.استفاده از رویداد mouseover باعث میشه وقتی اشاره گر موس رو روی یک عنصر قرار گرفت آنگاه این رویداد فرخوانی شود و یک تابعی را اجرا کند. ساختار این تابع نیز بدین گونه هست که با استفاده از علامت دالر $ یک عنصر را انتخاب یا select میکنیم سپس با استفاده از رویداد mouseover ، وقتی که اشاره گر موس روی عنصر مورد نظر قرار گرفت ، تابع مورد نظر را فراخوانی و اجرا میکند.بنابراین در این قسمت قصد داریم یک button و یک div ایجاد کنیم که وقتی موس روی button قرار گرفت (کلیک نه) این div ما ظاهر شود. برای شروع کار ابتدا کتابخانه جی کوئری را با استفاده ا از تگ script به پروژه اضافه میکنیم.گام بعدی با استفاده از تگ button یک دکمه به نام Run تعریف میکنیم و بهش یک آیدی ID به نام btn میدیم.سپس درون تگ body از تگ div استفاده میکنیم و بهش یک آیدی ID به نام box میدیم بعد درون تگ body از کدهای css استفاده میکنیم و به div مون استایل style میدیم.در قدم بعدی یک تگ script دیگه ایجاد میکنیم و درونش با استفاده از علامت دالر $ عنصر داکیومنت document را انتخاب یا select میکنیم که زمانی که این داکیومنت document ما کاملا لود شد بیا و فانکشنی رو اجرا کن که وقتی کاربر ، موس را روی button برد ، عنصر div ما رو پنهان کنه.بنابراین با استفاده از علامت دالر $ عنصر button را انتخاب یا select میکنیم سپس با استفاده از رویداد mouseover ، وقتی موس روی عنصر button قرار گرفت ، با علامت دالر $ عنصر div را انتخاب میکنیم و با استفاده از تابع hide عنصر div رو پنهان میکنیم .بنابراین وقتی برنامه رو اجرا میکنیم و موس رو روی دکمه Run میبریم رویداد mouseover فراخوانی میشه و تابع hide رو اجرا میکنه که درنتیجه باعث میشه عنصر div پنهان شه.

رویداد mouseover Mouseover mouseover در جی کوئری رویدادها در جی کوئری آشنایی با رویدادها در جی کوئری event در جی کوئری event در jquery آموزش جی کوئری آموزش jquery آموزش رایگان جی کوئری آموزش رایگان jquery آموزش حرفه ای جی کوئری بهترین آموزش جی کوئری آموزش جی کوئری pdf آموزش پیشرفته جی کوئری زبان برنامه نویسی جی کوئری تمرین جی کوئری آموزش رایگان طراحی سایت آموزش سی شارپ آموزش جاوااسکریپت آموزش صفر تا صد جی کوئری رایگان تابع hide در جی کوئری
2757لینک مرتبط آپلود سریع ویدیو ورود یا عضویت