رفتن به مطلب

آموزش جی کوئری قسمت اول


Moderator

پست های پیشنهاد شده

امروز چه کار خواهیم کرد :

 

 

  1. دریافت فریم ورک جی کوئری
  2. ساختن فایل HTML
  3. قرار دادن فایلHTML و جی کوئری در یک فولدر
  4. لینک کردن فریم ورک جی کوئری در فایل HTML
  5. ساختن جعبه و ظاهر سازی آن توسط CSS
  6. محو کردن جعبه توسط کد های جی کوئری

 

مرحلۀ اول دریافت فریم ورک جی کوئری :

برای این کار کافیست به سایت جی کوئری بروید و فریم ورک را دانلود کنید. دقت کنید که برای دانلود دو تا گزینه دارید. PRODUCTION و DEVELOPMENT تفاوت چندانی با هم ندارند. در آینده سر فرصت تفاوت این دو را برایتان خواهم گفت. ما برای آموزش از نسخۀ پانزده کیلوبایتی PRODUCTION استفاده می کنیم.

 

مرحلۀ دوملینک کردن فریم ورک جی کوئری در فایل HTML :

شما می توانید با هر برنامۀ ادیتِ متنی که می خواهید کد ها را ویرایش کنید. Aptana برنامۀ تخصصی کار با کدهای جاوا اسکریپت است ولی شما می توانید با Dreamweaverیا Visual Studio و حتی Notpad کار کنید. پیشنهاد من Dreamweaver است. خب ، شما باید در ابتدا یک فایل با پسوند .htm بسازید و اسم آن را Index بگذارید و فریم ورکی که دانلود کردید در فولدری که فایل Index هست قرار دهید سپس کدهای زیر را در فایل Index وارد کنید :

 

[TABLE]

[TR]

[TD=class: number]01[/TD]

[TD=class: content]DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " لینک ها تنها برای اعضای سایت قابل نمایش است. ">[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]02[/TD]

[TD=class: content]<html xmlns=" لینک ها تنها برای اعضای سایت قابل نمایش است. ">[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]03[/TD]

[TD=class: content]<head>[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]04[/TD]

[TD=class: content]<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]05[/TD]

[TD=class: content]<title>Untitled Document</title>[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]06[/TD]

[TD=class: content][/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]07[/TD]

[TD=class: content]</head>[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]08[/TD]

[TD=class: content]<body>[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]09[/TD]

[TD=class: content]</body>[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]10[/TD]

[TD=class: content]</html>[/TD]

[/TR]

[/TABLE]

 

البته اگر شما از برنامه های ویرایش کد استفاده می کنید هنگام شروع کار با یک فایل HTML تمام کد های بالا به صورت پیش فرض درون فایل شما وجود دارد. برای لینک کردن فریم ورک در فایل Index کافیست کد پایین را زیر تگ قرار دهید.

 

[TABLE]

[TR]

[TD=class: number]1[/TD]

[TD=class: content]<script type="text/javascript" src="jquery-1.3.2.min.js"></script>[/TD]

[/TR]

[/TABLE]

 

مرحلۀ سوم ساختن جعبه :

خب الان قسمت شیرین قضیه شروع میشه. ما قصد داریم یک جعبۀ قرمز بسازیم که محو بشه ! حتماً می دونید که برای شکل دادن و کلاً ظاهر عناصر هر صفحۀ وب سایت نیاز به کدهایCSS هست. ما می توانیم کد ها را در یک فایل جدا با پسوند CSSبنویسم و به فایل Index لینک کنیم یا اینکه در خود فایل Index کد های CSS را قرار دهیم. اینجا به دلیل کم بودن کد ها ما آنها را در فایل Index می نویسیم ولی برای ساختن وب سایت به دلیل حجم زیاد کد های CSS ، این کار باعث کند شدن سرعت سایت خواهد شد.

برای شروع احتیاج به یک جعبه و یک لینک داریم که وقتی روی آن کلیک می کنیم جعبه حرکت کند :

 

[TABLE]

[TR]

[TD=class: number]1[/TD]

[TD=class: content]<div id="box"></div>[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]2[/TD]

[TD=class: content]<a href="https://go.20script.ir/index.php?url=https://go.20script.ir/index.php?url=&anchor="> Click Here To Fade out !</a>[/TD]

[/TR]

[/TABLE]

 

و برای قرمز کردن و ابعاد جعبه کد CSS زیر را بین تگ head قرار میدهیم :

 

[TABLE]

[TR]

[TD=class: number]1[/TD]

[TD=class: content]<style type="text/css">[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]2[/TD]

[TD=class: content]#box }[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]3[/TD]

[TD=class: content] height: 320px;[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]4[/TD]

[TD=class: content] width: 320px;[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]5[/TD]

[TD=class: content] background-color: #F00;[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]6[/TD]

[TD=class: content]{[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]7[/TD]

[TD=class: content]</style>[/TD]

[/TR]

[/TABLE]

 

مرحلۀ چهارم محو کردن جعبه :

تا کنون ما یک جعبه با ابعاد ۳۲۰ در ۳۲۰ به رنگ قرمز داریم که زیر آن لینکی هست که نوشته شده Click Here To Fade out ! . چون بحث از حرکت و محو شدن است سراغ جی کوئری و کد های جاوا می رویم. در این مرحله من توضیحات بیشتری خواهم داد چون بحث یاد گرفتن کد های همین مرحله است. کدهای زیر را دقیقاً زیر کدهای بالا قرار دهید :

 

 

[TABLE]

[TR]

[TD=class: number]1[/TD]

[TD=class: content]<script type="text/javascript">[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]2[/TD]

[TD=class: content][/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]3[/TD]

[TD=class: content] $(function() {[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]4[/TD]

[TD=class: content] $('a').click(function() {[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]5[/TD]

[TD=class: content] $('#box').fadeOut(5000);[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]6[/TD]

[TD=class: content] });[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]7[/TD]

[TD=class: content] });[/TD]

[/TR]

[/TABLE]

 

[TABLE]

[TR]

[TD=class: number]8[/TD]

[TD=class: content]</script>[/TD]

[/TR]

[/TABLE]

 

هم اکنون شما با کلیک بر روی Click Here To Fade out ! میبینید که جعبۀ قرمز در ۵ ثانیه محو می شود.

 

توضیحات :

 

 

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

 

 

 

[TABLE]

[TR]

[TD=class: number]1[/TD]

[TD=class: content]</script><<script type="text/javascript[/TD]

[/TR]

[/TABLE]

 

کدهای جی کوئری برای اجرا باید جای X در این کد قرار بگیرند. ( کد زیر )

 

[TABLE]

[TR]

[TD=class: number]1[/TD]

[TD=class: content]$(function() { XXXX });[/TD]

[/TR]

[/TABLE]

 

کد زیر یعنی اگر روی a کلیک کردم X را اجرا کن.

 

[TABLE]

[TR]

[TD=class: number]1[/TD]

[TD=class: content]$('a').click(function() { X });[/TD]

[/TR]

[/TABLE]

 

کد زیر نشان می دهد روی چه شیئی چه تابعی در چه بازۀ زمانی انجام شود. یعنی حالا که روی a کلیک کردم این تابع را اجرا کن. حالا این تابع چیه ؟ تابع FadeOut را روی شئ#box اجرا کن در پنج هزار میلی ثانیه که میشه ۵ ثانیه.

 

[TABLE]

[TR]

[TD=class: number]1[/TD]

[TD=class: content]$('#box').fadeOut(5000);[/TD]

[/TR]

[/TABLE]

 

جی کوئری یک سری کد به صورت تعریف شده دارد که می توانید از آنها در تابع ثانیه استفاده کنید. برای مثال slow , normal , fast . به صورت زیر

 

[TABLE]

[TR]

[TD=class: number]1[/TD]

[TD=class: content]$('#box').fadeOut('fast');[/TD]

[/TR]

[/TABLE]

 

 

 

  • دقت کنید هنگام استفاده از این توابع زمانی باید آنها را بین ‘ ‘ قرار دهید.
  • توجه داشته باشید کلمۀ fadeout یک کلمۀ کلیدیست. اگر مثلاً آن را با F بنویسید این function اجرا نمی شود.

 

 

 

  • امیدوارم خسته نشده باشید. درسته که روز اول به دلیل توضیحات پایه ای و اساسی کمی طولانی شد ولی مطمئن باشید هر چه جلوتر برویم بیشتر به افکت ها و ویژگی های جی کوئری خواهم پرداخت و زیبایی های آن بیشتر خواهد شد.

 

 

 

منبع: ittutorial

 

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...