ads مکان تبلیغات شما
زمان جاری : چهارشنبه 12 مهر 1402 - 12:45 قبل از ظهر
نام کاربری :
پسورد :

ads ads ads ads
پاسخ جدید
نویسنده پیام
iman
آنلاین

ارسال‌ها : 62
عضویت: 12 /8 /1393
محل زندگی: K@rAj
سن: 14
شناسه یاهو: imanbabaei7979
تشکرها : 10
تشکر شده : 94
آموزش JQuery ازصفر تا 100 همراه با مثال

سلام دوستان.
قصد دارم JQuery رو از صفر تا 100 همراه با مثال بهتون آموزش بدم.
چندتا نکته هست اگر دوستان رعایت کنند ممنون میشم.
برای جلوگیری از زیاد شدن صفحات تاپیک دوستان لطف کنن پاسخی ارسال نکنند.
آموزش به صورت چندین قسمتی میباشد و در هر قسمت بخشی از JQuery رو همراه با مثال برای شما توضیح میدم.
برای شروع تاریخچه JQuery رو گذاشتم تا دوستانی که آشنایی ندارند آشنا بشن.

قسمت اول : آشنایی با JQuery

جی کوئری چیست ؟
درسالهای متمادی ، جاوااسکریپت هم یادگیریش سخت بود و منبع آموزشی خوب براش کم پیدا می شد، هم کاربرد قابل قبولی براش نبود و هم باعث مشکلات امنیتی میشد.

اما با گذشت زمان، رونق گرفتن AJAX، بیشتر شدن ایده های سمت کلاینت افزایش امنیت مرورگرها که به دلیل توسعه مرورگرها بود، جاوااسکریپت خواهان بیشتری پیدا کرد.اما وقتیJQueryمتولد شدتحولی در محیط وب به وجود اومد.
JQuery یک کتابخانه یا Library جاوا اسکریپت میباشد قابلیت هایی زیادی دارد از جمله ساخت انیمیشن در وب و متحرک سازی عناصر کنترل event ها و ... .
این کتابخانه با جاوا اسکریپت نوشته شده است و به دلیل کم حجم بودن وclient side بودن و سازگاری با اکثر مرورگر ها محبوبیت زیادی دارد.
Jquery یک نرم افزار open source میباشد و استفاده از آن برای همه رایگان میباشد و و تحت LICENSE های GPL و MIT میباشد.

تاریخچه جی کوئری ؟

Jquery توسط john resig جان رزیگ طراحی شده است.
جان رزیگ برای اولین بار در 22 آگوست سال 2005 از یک کتابخانه جاوا اسکریپت برای اسفاده از css selectors استفاه کرد و پس از آن در 14 ژانویه 2006 جی کوئری را به صورت رسمی معرفی کرد و وبلاگ و بسایت آن را راه اندازی کرد و پس از آن تا به حال با کمک تیم جی کوئری اقدام به رفع اشکالات و افزودن امکانات جدید به این کتابخانه کردند.

ویژگی های جی کوئری ؟

به عناصر موجود در پرونده دسترسی پیدا کرد و ان‌ها تغییر و دستکاری نمود.
کنترل اسان و قدرتمند تر رویدادها(Events)
دستکاری CSS
ایجاد افکت و حرکات انیمیشین
توسعه دادن افزایه ها
برنامه‌های کوچک سودمند
قابلیت نوشتن پلاگین
Ajax
استفاده از عناصر DOM
اجر شدن در همه مرور گر ها
یادگیری و استفاده آسان و ...

امضا کاربر


سه شنبه 20 آبان 1393 - 15:23
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
تشکر شده: 8 کاربر از iman به خاطر این مطلب مفید تشکر کرده اند: javadkhof & saman & scriptcamp & naserabdollah & 00mostafa00 & scd22 & ali054 & k4rim &
iman
آفلاین



ارسال‌ها : 62
عضویت: 12 /8 /1393
محل زندگی: K@rAj
سن: 14
شناسه یاهو: imanbabaei7979
تشکرها : 10
تشکر شده : 94
پاسخ : 1 RE آموزش JQuery ازصفر تا 100 همراه با مثال

سلام دوستان ببخشید یه مقدار دیر شد.
خب بریم سراغ این قسمت :


قسمت دوم : نحوه استفاده از JQuery


همانطور که در قسمت قبل گفتیم jquery یک کتاب خانه javascript هست و برای استفاده از jquery شما باید کتابخانه jquery رو توی سند خودتون فرخوانی کنید تا بتونید طبق ساختار jquery کد بزنید و از plugin های مختلف اون استفاده کنید.
شما میتونید کتابخانه jquery رو از وبسایت JQuery.com دانلود کنید.
کتابخانه jquery دو نوع یا مدل داره یکی نسخه کامل کتابخانه و باز آن هست و دیگری نسخه mini اون هستش که از نظر حجمی حجم mini یه چیزی بین 70 تا 100 کیلوبایت هستش اما نسخه کاملش حدود 280 کیلوبایته.
از لحاظ کارایی هیچ تفاوتی بین این دو نوع وجود نداره و فرقی که بین اونها هست اینه که نسخهmini فضای خالی و comment نداره و به صورت خطی نوشته شده. به قول معروف whitespace و comment هاش رو برداشتن.
بهتره که از نسخه mini استفاده کنید چون هم حجمش کم تره و هم اینکه سرعت بارگذاری بالاتری داره.
کتابخانه jquery یه فایل با پسوند js هستش که برای load کردن اون توی صفحه مثل بقیه فایل های جاوااسکریپت این کار رو انجام میدیم.
به این روش که با استفاده از تک script و خصوصیت src اون رو بیت تگ head داخل صفحه مورد نظر load میکنیمش.

در ضمن شما میتونید این کارو هم به دو صورت انجام بدید یکی اینکه فایل jquery رو از google یا microsoft داخل صفحه loadکنید و دیگری هم اینکه فایل رو دانلود کنید و کنار سندتون قرار بدید و مستقیم از طریق هاست خودتون این کارو انجام بدید.



روش مستقیم :


کد:
<div style="text-align: right;">< head> < script type="text/javascript" src="jquery.js">< /script > < /head></div>



از طریق google :



کد:
<div style="text-align: right;">< head> < script type= "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">< /script > < /head></div>



از طریق microsoft :


کد:
<div style="text-align: right;">< head> < script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" >< /script > < /head></div>




شما میتونید از یکی از روش های بالا jquery رو توی صفحه خودتون لود کنید.
اگر از طریق google و microsoftاین کارو خواستید انجام بدید و به نسخه های قدیمی تر نیاز داشتید کافیه اسم فایل و پسوند رو پاک کنید و بعد آدرس رو تو مرورگر بزنید تا لیست نسخه ها براتون نمایش داده بشه.
بعد از load کردن jquery سند شما آماده هست تا کد های jquery رو اجرا کنه.

این قسمت به پایان رسید و در قسمت بعدی syntax اصلی jquery یا همون ساختار دستوری رو با مثال آموزش میدم.

امضا کاربر


پنجشنبه 22 آبان 1393 - 12:13
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
تشکر شده: 3 کاربر از iman به خاطر این مطلب مفید تشکر کرده اند: javadkhof / scd22 / ali054 /
ehsan
آفلاین



ارسال‌ها : 23
عضویت: 11 /8 /1393
محل زندگی: اسکینک
شناسه یاهو: doatishe@att.net
تشکرها : 6
تشکر شده : 24
پاسخ : 2 RE آموزش JQuery ازصفر تا 100 همراه با مثال
دمت گرم ایشالله اموزاشتو ادامه بدی
شنبه 24 آبان 1393 - 14:42
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
تشکر شده: 1 کاربر از ehsan به خاطر این مطلب مفید تشکر کرده اند: scd22 /
scd22
آفلاین



ارسال‌ها : 2
عضویت: 16 /8 /1393
تشکرها : 9
پاسخ : 3 RE آموزش JQuery ازصفر تا 100 همراه با مثال
خوب و مفید بود.ممنون
یکشنبه 25 آبان 1393 - 20:24
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
ali054
آفلاین



ارسال‌ها : 60
عضویت: 12 /8 /1393
محل زندگی: تهران
سن: 21
شناسه یاهو: baner054
تشکرها : 59
تشکر شده : 36
پاسخ : 4 RE آموزش JQuery ازصفر تا 100 همراه با مثال
ممنون

امضا کاربر
تو هر تاپیکی که برم تشکر میزنم
چیزی ازم کم نمیشه
اصلا این مدلی حال میکنم چیکار داری


چهارشنبه 28 آبان 1393 - 07:30
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
k4rim
آفلاین



ارسال‌ها : 144
عضویت: 12 /8 /1393
محل زندگی: skinak
سن: 16
شناسه یاهو: toolsin
تشکرها : 31
تشکر شده : 68
پاسخ : 5 RE آموزش JQuery ازصفر تا 100 همراه با مثال
ممنون
چهارشنبه 28 آبان 1393 - 13:27
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر
bonyan
آفلاین



ارسال‌ها : 22
عضویت: 7 /12 /1395
پاسخ : 6 RE آموزش JQuery ازصفر تا 100 همراه با مثال
با سپاس از مطالب مفیدتون

سه شنبه 16 خرداد 1396 - 13:16
نقل قول این ارسال در پاسخ گزارش این ارسال به یک مدیر





برای ارسال پاسخ ابتدا باید لوگین یا ثبت نام کنید.