jQuery

|

آموزش جی کوئری قسمت پنجم

قسمت سوم کهparctical-examples هست میخواهیم مورد بررسی قرار بدیم.در این بخش 2 فایل آموزشی داریم که در اصل فایل آموزشی اول بدون jquery یک table رو به نمایش میگذاره حالا این table یک سری سطر و ستون داره و به این شکل براتون به نمایش میگذاره.

(آموزش جی کوئری(قسمت پنجم

کدی هم که برایش نوشتیم داخل script که مربوط به کد jquery هست ما اینجا هیچ آیتمی لحاظ نکردیم یک استایل درون صفحه ایی اعمال کردیم برای یک سری از آیتم ها مثل TR TD و هچنین TH table اومدیم یک سری property های css رو اعمال کردیم یک تگ table هم داریم که آیدی thelist رو داره و اون table هستش که شما دیدید ما با ساختار خود html کاری نداریم چرا که توی آموزش html کامل خدمتتون توضیح دادیم همچنین با ساختار خود css هم کاری نداریم چون توی آموزش css این ساختار رو هم کامل خدمتتون توضیح دادیم در اصل ما خواستیم تفاوتی بین table باشه که حالا کد jquery داره و table باشه که کد jquery نداره اون table که کد jquery نداشت رو دیدید.

آموزش جی کوئری قسمت پنجم

آموزش جی کوئری قسمت پنجم

آموزش جی کوئری قسمت پنجم

این table که براش کد jquery اعمال کردیم همون table هست که حالا یک مقدار هوشمندانه که حالا ماوس روی یک مقدار قرار میگیره برای ما این تغییرات رو داخل خودش داره اعمال میکنه ونمایش میده دقیقا این table هست که داخل آموزش قبل دیدید تفاوتش اینه که jquery رو بهش اضافه کردیم.خب ببینیم برای jquery این بخش ما چه کاری اومدیم کردیم.دقیقا استایل مون همون هست البته 3تا کلاس odd even highlighted اضافه شده بهش که در ادامه خدمتتون توضیح میدیم بقیه کد یعنی کد html مون که مربوط به جدول هست هم هست.کدی که برای jquery اومدیم نوشتیم این جا دیگه document جاری و document.3d رو فراخونی نکردیم اومدیم function رو مستقیم فراخونی کردیم باز دوباره داخل {} خود function که از اینجا تا این جا هستش اومدیم یک سری کد هارو زدیم که اون ها هم همگی با $ یا jquery شروع میشوند.document اول رو اومدیم آیدی thelist قرار دادیم که داخلش TR هایی هستند که به صورت زوج هستند این میشه document جاری ما.حالا میخواییم روی این یک سری کار هارو انجام بدیم دقیقا مثل قسمت های گذشته که ما گفتیم document رو اینجا قرار میدیم یعنی document رو اینجا میگیریم و حالا با استفاده از . یک سری property داریم اینجا که یک سری کارهارو میتونیم انجام بدیم که اینجا ما خواستیم یک کلاسی رو با نام odd اضافه بکنیم به این TR هایی که زوج هستند و داخل آیدی thelist هستند آیدی thelist داخل این کدی که ما اینجا داریم تنها table هستش که ما داریم و آیدی thelist رو اینجا داره دقیقا میخواییم TR هایی که زوج هستند بیان یک کلاس odd بهشون اضافه بشه و TR هایی هم که فرد هستند یک کلاس even بهشون اضافه بشه این 2تا کد jquery دقیقا این کارو برامون انجام میده که 2تا کلاس برای ما اضافه میکنه به TR هایی که کد html هستند.این کلاس ها رو اومدیم داخل استایلمون تعریف کردیم یعنی کلاس odd و کلاس even رو اومدیم به این شکل تعریف کردیم که برای odd backgroundcolor خاصی در نظر گرفتیم و برای even هم همچنین که باهمدیگر تفاوت داشته باشند.بعد از اون اومدیم document مون رو TR های داخل همین table که آیدی thelist رو دارند در نظر گرفتیم و حالا از property hover جی کوئری استفاده کردیم.hover به این معنی که شما ماوس تون رو ریو یک آتمی ببریت و برگردونید یعنی شما 2بار دارید کاری رو انجام میدید یعنی یک بار ماوس تون روی آیتمی قرار میگیره یک اتفاقی میفته ماوستون رو که برگردوندید از اون حالت باید به حالت قبلی برگرده پس 2تا function ما نیاز داریم function ها به صورت toggle class تعریف میشن و یک سان هم هستند.ما function اول رو به این صورت اومدیم تعریف کردیم که اومدیم گفتیم که آیتم جاری یعنی document جاری مون رو وقتی this قرار دادیم یعنی ماوس روی هر آیتمی قرار گرفت این this میشه همون آیتم و حالا toggle class jquery رو فراخونی کردیم و کلاس highlighted رو بهش دادیم که این کلاس highlighted رو هم این جا توی استایلمون اومدیم تعریف کردیم که گفتیم که font weight برد بشه یعنی ماوس وقتی روی هر آیتمی قرار گرفت font ش برد بشه و همچنین background color خاصی رو داشته باشه که تغییر بکنه یعنی که ماوس روی آن قرار گرفته.دقیقا همین رو وقتی که از hover استفاده میکنیم دوبار باید این تابع رو استفاده بکنیم با کاما هم از هم جدا بکنیم به خاطر این که یک بار ماوس روی آن قرار میگیره و یک بار هم از روی آیتم کنار میاد.اگه یکبار شما این function هارو قرار بدید ماوس وقتی روی آیتم قرار میگیره وقتی هم که برمیگرده باز دوباره تغییرات رو داره ولی وقتی 2بار شما استفاده میکنید ماوس روی آیتم که قرار میگیره تغییرلت رو میگیره وقتی ام که از روی آیتم میره کنار برمیگرده به حالت اولیه خودش یعنی 2بار شما تغییر رو شاهد هستید.دقیقا این کدی هستش که ما برای jquery در نظر گرفتیم اینجا هم که میاد کلاس های odd و even رو دقیقا به این TR هایی که زوج به صورت rutime کلاس زوج رو میگیرند بعد میاد از کلاس css کلاس زوج خونده میشه این رنگ رو میگیره TR هایی هم که به صورت فرد هستند توسط jquery میان کلاس even رو میگیرند بعد توسط این م css میان background color تغییر میده در نهایت قسمت نهایی رو در پایین میبینید.

(آموزش جی کوئری(قسمت پنجم

(آموزش جی کوئری(قسمت پنجم

آموزش جی کوئری قسمت پنجم

دریافت آخرین مطالب وبلاگ در کانال داتینه

بهاره شهسواری

بهاره شهسواری ، کارشناس نرم افزار هستم .
از سال 91 مشغول به یادگیری زبان های css ,html , javascript و jquery شدم
و از سال 93 به صورت اختصاصی به فعالیت در حوزه css و html پرداختم. علاوه بر کد نویسی به گرافیک هم علاقه مند هستم.

نظرات
نظر بدهید