به آموزشگاه بیاموز خوش آمدید!

سبد خرید (0)


مقدمه آموزش jQuery

jQuery (جی کوئری)

آموزش jQuery (جی کوئری) - مقدمه

jQuery (جی کوئری) یکی از کتابخانه های محبوب JavaScript است.

jQuery (جی کوئری) به حق، برنامه نویسی JavaScript را آسان کرده است.

یادگیری jQuery (جی کوئری)، آسان است و از آموزش آن لذت خواهید برد.


آموزش jQuery (جی کوئری) با استفاده از مثال

در هر فصل برای آموزش بهتر از مثال های "خودتان امتحان کنید" استفاده شده است.

می توانید با ویرایشگری که در اختیارتان است، کد jQuery (جی کوئری) را ویرایش کنید و با کلیک روی دکمه "ویرایش کردن" نتیجه آن را مشاهده کنید.

مثال (مقدمه آموزش jQuery)

$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
خودتان امتحان کنید »

برای مشاهده نتیجه کد بالا روی دکمه "خودتان امتحان کنید" کلیک کنید.

هم اکنون یادگیری jQuery (جی کوئری) را آغاز کنید!


قبل از شروع آموزش، چه چیزی را باید بدانید؟

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


jQuery (جی کوئری) چیست؟

jQuery (جی کوئری) یک کتابخانه کم وزن، به معنی: "کارهای زیاد با نوشتن کد کمتر" است.

هدف از این آموزش، بکارگیری آسانتر JavaScript در وب سایتتان است.

jQuery (جی کوئری)، بسیاری از کارهای پیچیده در JavaScript مانند: AJAX، دستکاری عناصر و ... را ساده کرده است.

در آموزش jQuery به موارد زیر خواهیم پرداخت:

  • آموزش دستکاری محتوای عناصر HTML با توجه به مدل DOM (اگر مایلید درباره مدل DOM بیشتر بدانید، لطفاً به لینک DOM Home مراجعه کنید)
  • آموزش دستکاری ظاهر عناصر HTML با استفاده از CSS
  • آموزش مدیریت کلیه رویدادهای عناصر HTML
  • آموزش متحرک سازی
  • آموزش AJAX
  • آموزش امکانات مفید دیگر

توجه: علاوه بر آموزش های بالا، jQuery (جی کوئری) تقریباً برای هر کاری که تصور کنید یک Plugin دارد.


برای آموزش یکی از کتابخانه های JavaScript چرا jQuery (جی کوئری)?

کتابخانه های زیادی برای JavaScript وجود دارد، اما بنظر می رسد که jQuery (جی کوئری) در بین آنها محبوب تر و همچنین توسعه پذیرتر است.

بعضی از شرکت های بزرگی که از jQuery (جی کوئری) استفاده کرده اند:

  • Google
  • Microsoft
  • IBM
  • Netflix
lamp

آیا jQuery (جی کوئری) در تمام مرورگرها کار می کند؟
تیم jQuery (جی کوئری)، بر استانداردهای مختلف در مرورگرهای مختلف اشراف دارند و این موضوع در کتابخانه jQuery (جی کوئری) دیده شده است.
jquery در تمام مرورگرهای اصلی (حتی IE6) بطور یکسان اجرا خواهد شد.

دیدگاه‌ها  

+1 # mhmdd 1395-06-09 00:22
سلام یه سوال داشتم میخواستم بدونم switch case در جاوا با switch case در jquery تفاوتن دارد؟؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-07-24 21:26
با سلام.
از لحاظ منطق در همه‌ی زبان‌ها switch case یه مفهوم رو داره، ولی از لحاظ گرامری باید با زبان موردنظر چک کنید. یعنی سینتکش رو ببینید.
تو اکثر زبان‌های خانواده‌ی C تقریبا شبیه هم هست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # elnaz 1395-04-09 09:28
سلام خسته نباشید
تو بعضی سایت ها برای یک موضوع یک عکس گذاشته میشه اما وقتی روی عکس میریم (بدون اینکه کلیکی انجام بشه) عکس تغییر میکنه ، اموزش این موضوع رو کجا میتونم پیدا کنم؟ مرسی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1395-04-09 12:55
سلام ممنون
قبل از هر چیز لطفا به توضیح ارائه شده در مورد واژه Hover توجه فرمایید.
Hover چیست؟ در صفحات وب زمانی که موس کاربر روی عنصری قرار میگیرد Hover اتفاق افتاده است و این اتفاق را می توان در CSS و یا Jquery تشخیص داد و کارهای لازم را به ازای آن انجام داد.
راه حل سوال شما در CSS:
img {
background-imag e: url('images/tile_4.jpg');
}

img:hover {
background-imag e: url('/images/Market.png');
}

راه حل سوال شما در jQuery:
ابتدا تصور فرمایید که چند تگ img در صفحه تان دارید:
<img class="xyz" data-alt-src="/ images/Market.p ng" src="/images/ti le_4.png" />
<img class="xyz" data-alt-src="/ images/Somethin g.png" src="/images/ti le_5.png" />

همان طور که در بالا مشاهده می کنید به تمام img ها یک کلاس یکسان با مقدار "xyz" داده ایم و سپس یک ویژگی با نام data-alt-src برای هر img در نظر گرفته ایم و آدرس عکس جایگزین به ازای قرار گرفتن موس روی تصویر را برای آن تنظیم کرده یم.
حالا برای جایگزین کردن عکس ها به ازای اتفاق افتادن Hover از کد زیر استفاده می کنیم:
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt -src');
$this.data('alt -src', $this.attr('src '));
$this.attr('src ', newSource);
}
$(function () {
$('img.xyz').ho ver(sourceSwap, sourceSwap);
});

متد Hover در jquery دو پارامتر میگیرد و این دو پارامتر در واقع دو Function هستند و اولین پارامتر رخداد mouseenter و دومین پارامتر رخداد mouseleave را مشخص می کند.
در فانکشن sourceSwap زمانی که برای اولین بار صدا زنده می شود یعنی زمانی که موس روی عنصر قرار می گیرد (mouseenter) مقداری که برای ویژگی data-alt-src در نظر گرفته ایم بعنوان آدرس جدید برای Src تصویر در نظر گرفته می شود و در ادامه مقدار ویژگی data-alt-src با مقدار src تعویض می شود. بدین ترتیب زمانی که برای بار دوم فانکشن sourceSwap صدا زده می شود یعنی زمانی که موس از روی عکس کنار رفت (mouseleave) همه چیز به حالت عادی خودش بر میگردد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # احمدرضا 1394-08-25 09:06
باسلام
من می خواهم برنامه نویسی یاد بگیرم باید از کجا و از کدام زبان برنامه نویسی استفاده کنم. متشکرم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # Guest 1394-11-01 13:32
به نظر من از ویژوال بیسیک شروع کنید ولی در نهایت باید سی شارپ یا جاواوب را یاد بگیرید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # محمدرضا_ 1394-11-08 13:30
پایتون بهترین زبان برای شروع برنامه نویسی ست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # مهرداد صلاحی 1394-08-25 09:25
با سلام.

برای شروع می تونید از همین سایت استفاده کنید. ترجیحا از زبانی که خودتون دوست دارید، شروع کنید ولی معمولا خانواده بیسیک راحت تر هستند برای یادگیری و خانواده زبانهای C دوست داشتنی تر. اکثرا از C شروع می کنن! البته منظورم از C زبانهای خانواده C هست، مثل #C، جاوا، جاوااسکریپت، PHP و ... .
این زبانها از لحاظ گرامی شباهت زیادی با C دارن.

موفق باشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # java 1394-08-18 13:48
سلام به بچه های گل بیاموز و مدیریت محترم اقای پهلوان
و دوست خوبم استاد صلاحی که تو این مدت یادگیریم تو این سایت واقعا کمکم کرد تشکر کنم
فقط یه چند تا سوال خیلی ابتدایی دارم و کاملا هم جوابشو میدونم فقط میخوام اساتید راهنمایی اخر رو بهم بکنن
من الان html,css,css3,j avascript,jquer y,ajax رو کامل اوکی شدم
الان من بین دو راهی گیر کردم نمیدونم برم پی php یا asp.net با این حال که میدونم php اصلا قبل مقیاس با asp نیستش تموم تفاوتاشونم میدونم اگه هم شروع کنم با کار به asp سی شارپ و وبی دات نت رو بلدم فقط یه حسی بهم میگه فعلا پی اچ پی رو یاد بگیرم چون پی اچ پی هم زبان کمی نیست و خیلی از کارای آدمو راه میندازه بعد که کاملا اوکی شدم برم سمت یادگیری asp.net نمیدونم اساتید عزیز لطفا راهنمایی های آخرو بهم بکنید خدایی گیرم
مرسی از این همه زحماتتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # مهرداد صلاحی 1394-08-18 14:45
با سلام و تشکر.
ببین دوست عزیز مقایسه PHP و ASP.net خیلی معنا داره. هر کدوم معایب و مزایای خودشون رو دارن. اگر فکر میکنید PHP یک زبان ساده یا پایین تر از ASP.net هست، اشتباه میکنید!!!
من خودم php کار میکنم و به جرئت میتونم بگم، فوق العاده قدرتمند و فوق العاده قوی هست. از نظر من قابل قیاس با ASP.net نیست. ولی هیچوقت نمیگم PHP بهتر از ASP.net هست.

شما کمی با هر دو آشنا شو، ببین با کدوم راحت تری. هر کدوم رو که انتخاب کردی، همونو ادامه بده. بعد از یه مدت که تو برنامه نویسی اکی و مسلط شدی، سوئیچ کردن به زبانهای دیگه خیلی برات سخت نخواهد بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # amin 1394-07-24 16:42
با سلام
من زمانی که از جی کوئری استفاده می کنم و بطور صحیح کد ها را می نویسم و به صفحه لینک می کنم جی کوئری اجرا نمی شود از ویرایشگر نود پد پلاس پلاس استفاده میکنم و زبان را بروری جاوا اسکریپت تنظیم می کنم مشکل از کجاست؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهرداد صلاحی 1394-07-24 17:01
با سلام.
در صورت کار صحیح بودن کدهای شما، این احتمال داره که فایل jquery به طور صحیح لینک نشده است.

کد لینک رو بذارید.
در ضمن استفاده از ویرایشگر کاملا شخصی هست و این مورد ربطی به خطای ایجاد شده در صفحات ندارن. گر چه بعضی از ویرایشگرها به شما امکان خطایابی خیلی آسان‌تری ارایه می‌دن.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1394-07-16 18:22
به نقل از amin:
در کدام ویرایشگر کد جی کوئری را بنویسیم که قابلیت خطایابی داشته

پیشنهاد بنده این است که از نرم افزار dreamweaver استفاده نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # فاطمه 1394-11-19 17:15
سلام خدا قوت.
این برنامه رو من فقط روی سیستم های 64 بیتی دیدم. برای 32 بیتی چیزی هست؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-11-19 23:20
با سلام و تشکر.
باید باشه! الآن اکثر سیستم‌ها 64 بیتی هستند، و به همین خاطر تو آموزشها و نصب نرم افزارها معمولا 64 بیتی رو معرفی می‌کنن. برای اطلاعات بیشتر می‌تونید به سایت سازنده این نرم افزار که adobe هست، مراجعه کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # amin 1394-07-16 20:37
دریم ویور غیر رایگان است
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # amin 1394-07-16 16:52
ایا می شود کتابخانه جی کوئری را به نوت پد پلاس پلاس اضافه کرد ؟
اگر میشود چگونه ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-07-16 18:17
توجه داشته باشید که کتابخانه های جاوااسکریپت از قبیل جی کوئری، یا انگولار یا بوتسترپ را می توان به تمام سند های html اضافه کرد. بعنوان مثال نحوه ی اضافه کردن جی کوئری در نوتپد ++ به این صورت است که ابتدا شما جی کوئری را دانلود کنید و سپس فایل jquery.min.js(دقت کنید که نام دقیق آن ممکن است متفاوت باشد) را به پوشه ای که فایل اچ تی ام ال شما قرار دارد منتقل کنید. سپس در فایل اچ تی ام ال مورد نظر، بین تگ head دستور زیر را اضافه کنید:
<script type="text/java script" src="/jquery.min.js" ></script>

دقت کنید که نام های قرمز رنگ باید با هم یکی باشند و شما باید به جای آنها نام فایلی که دانلود کرده اید را قرار دهید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # amin 1394-07-16 20:48
از سایت کدام جی کوئری را دانلود کنم x.1 یا x.2
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-07-16 21:27
از آدرس زیر می توانید جی کوئری را دانلود کنید:
https://jquery.com/download/

توجه کنید که جی کوئری 2.x دقیقا همانند جی کوئری نسخه 1.x می باشد با این تفاوت که نسخه ی 2.x در اینترنت اکسپلورر 6 یا 7 یا 8 پشتیبانی نمی شود.
پس شما می توانید با توجه به نیاز خودتان، نسخه ی مورد نظر را دانلود کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # amin 1394-07-14 16:58
در کدام ویرایشگر کد جی کوئری را بنویسیم که قابلیت خطایابی داشته
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مصطفی k 1395-07-24 13:33
به نقل از amin:
در کدام ویرایشگر کد جی کوئری را بنویسیم که قابلیت خطایابی داشته

با دریم ویور بنویس
این لینک رو ببین
citywp.ir
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-07-24 22:44
دریم‌ویور این قابلیت رو داره. ولی این نرم افزار کلا به درد طراحی میخوره تا برنامه‌نویسی.

برای برنامه‌نویسی IDEهای بهتری مثل نت‌بینز و Zend Studio و ... هم هست که خیلی بهتر و حرفه‌ای‌تر هست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-07-15 12:56
با سلام.
ویرایشگرهای مختلفی برای کدنویسی به زبانهای مختلف طراحی شده است که با اندکی سرچ می توانید اسم و حتی IDE موردنظر رو دانلود کنید.

اما بر حسب تجربه ی شخصی، استفاده از نرم افزار NetBeans بسیار عالی است. این IDE به شدت کارا و برای اکثر زبانهای برنامه نویسی هست. jQuery هم در این نرم افزار ساپورت میشه، و شما میتونید با استفاده از این نرم افزار هم خیلی راحت کدنویسی کنید و هم اینکه میتونید خیلی راحت کدهای خودتون رو دیباگ کنید.

این نرم افزار برای IPهای ایران قابل دسترسی نیست، و برای دانلود اون از خود سایت سازنده باید از VPN استفاده کنید. همچنین بدونید این نرم افزار سورس باز هست و به طور رایگان قابل استفاده است.
قابلیت اپدیت شدن داره و با نصب پلاگین میتونید قدرت IDE رو چندین برابر کنید.

موفق باشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # mohammadian 1394-07-02 09:33
من هر متنی رو که توسط جی کوئری در صفحه html چاپ میکنم ، به شکل علامت سوال نمایش داده میشه.
مثلا دستورات زیر ، موقع نمایش همه علامت سوال میشن .

1
document.write("سلام من تبدیل به علامت سوال میشم")
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # شهربانو دوستی 1394-07-02 10:57
با سلام
هنگام ذخیره کردن فایل html گزینه Encoding را بر روی UTF-8 قرار دهید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+7 # Reza Bahrami 1394-01-29 13:17
یه سوال داشتم
آیا با jquery میشه مثل جاوا اسکریپت یه ساعت با عقربه های متحرک ساخت ؟
منظورم اینه که تمام کارایی های جاوا اسکریپت مثل همین مثالی که زدم رو jquery داره یا نه ؟
با تشکر از سایت خوبتون .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیر پهلوان صادق 1394-01-30 09:39
فقط کافی است که واژه ی "jquery clock" را در گوگل Search کنید...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # Reza Bahrami 1394-01-24 22:17
با سلام
میخواستم بدونم میشه مستقیم jQuery رو یاد بگیرم بدون اینکه سراغ جاوا اسکریپت برم .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1394-01-24 22:44
بله
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # Reza Bahrami 1394-01-24 23:25
یعنی اگه مستقیم سراغ یاد گیری jQuery برم به مشکل بر نمیخورم یعنی اینکه jQuery هیچ پیش نیازی مربوط به جاوا اسکریپت نداره
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1394-01-24 23:41
مسلماً اگر با مفاهیم JavaScript آشنا باشید، jQuery را سریع تر فراخواهید گرفت. اما هیچ اشکالی وجود ندارد که کسی بدون آشنایی با دستورات JavaScript به سراغ jQuery برود.
البته ذکر این مطلب هم خالی از لطف نیست که jQuery پیاده سازی شد تا کاربران وب راحتر سمت Client کد بزنند و خود را درگیر زحماتی که در JavaScript وجود دارد نکنند. پس با خیال راحت برید سراغ jQuery ...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+21 # جاوید تقوی 1393-08-25 21:06
سلام به همه ی فعالان عرصه ی دانش، با تشکر از مطالب خوب تان،منتظر آموزش Silverlight 5 از سایت شما هستم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+23 # پوریا 1393-07-17 23:35
سلام و خسته نباشید به شما عزیزانی که این سایت رایگان در اختیار همه گذاشتید،خیلی ممنون از زحماتتون،فقط لطفا مثل سایت عالیتون در پاسخ گویی به نظرات هم عالی باشید،
راستی آموزش وردپرس هم میذارید؟ باز هم ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+19 # monir 1393-02-17 15:41
salam
miduni faghat mikhastam begam saitet aalie..
tu saitaye irani injur saita kam peida mishe.
vali shoma kheili zahmat keshidio, khub kar kardi.
khaste nabashi :roll:
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن