آموزش jQuery (جی کوئری) - مقدمه
jQuery (جی کوئری) یکی از کتابخانه های محبوب JavaScript است.
jQuery (جی کوئری) به حق، برنامه نویسی JavaScript را آسان کرده است.
یادگیری jQuery (جی کوئری)، آسان است و از آموزش آن لذت خواهید برد.
آموزش jQuery (جی کوئری) با استفاده از مثال
در هر فصل برای آموزش بهتر از مثال های "خودتان امتحان کنید" استفاده شده است.
می توانید با ویرایشگری که در اختیارتان است، کد jQuery (جی کوئری) را ویرایش کنید و با کلیک روی دکمه "ویرایش کردن" نتیجه آن را مشاهده کنید.
مثال (مقدمه آموزش jQuery)
$("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 (جی کوئری) استفاده کرده اند:
- Microsoft
- IBM
- Netflix
 |
آیا jQuery (جی کوئری) در تمام مرورگرها کار می کند؟ |
|---|
دیدگاه‌ها
سلام ممنون بابت مطالب عالیتون خواستم خواهش کنم برای react js , react native, webpack هم مطالب اموزشی بذارید ممنون
آیا می توان همه methods and property های javascript را درون jquery استفاده کرد؟
بله از methodها و propertyهای JavaScript می توان در بین کدهای jQuery استفاده نمود.
$(document).rea dy(function(){
$("p")
.filter(function(){
return $("span", this).length == 2;
})
.css("background-color", "yellow");
});
معنی کد بالا رو در jQuery میخواستم ، با تشکر از آموزش هاتون
کد بالا در قسمت آموزش فیلترها در jQuery ارائه شده است:
beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_traversing_filter
اما توضیح مثال بالا:
خط 2: تمام P های موجود در صفحه را انتخاب می کند.
خط 3: با استفاده از متد Filter در JQuery قصد داریم، P های انتخاب شده را فیلتر کنیم.
خط 4: تمامیِ تگ های p که دو تگ span در داخل آنها قرار دارد را برمی گرداند.
خط 5: پس زمینه تگ های انتخاب شده را زرد می کند.
آموزشهای بیشتر در مورد فیلترها در جی کوئری:
beyamooz.com/jquery/360-jquery-reff/3318-filter
وافعا متشکر از سایت عالی تون ، فقط بی زحمت می شه بگین خود function () توی هرکدام از مداحل چه کاری می کند ؟
باسلام و خسته نباشید. آموزش جی کوئری عالی بود.
باتشکر
سلام یه سوال داشتم میخواستم بدونم switch case در جاوا با switch case در jquery تفاوتن دارد؟؟؟
با سلام.
از لحاظ منطق در همه‌ی زبانها switch case یه مفهوم رو داره، ولی از لحاظ گرامری باید با زبان موردنظر چک کنید. یعنی سینتکش رو ببینید.
تو اکثر زبانهای خانواده‌ی C تقریبا شبیه هم هست.
سلام خسته نباشید
تو بعضی سایت ها برای یک موضوع یک عکس گذاشته میشه اما وقتی روی عکس میریم (بدون اینکه کلیکی انجام بشه) عکس تغییر میکنه ، اموزش این موضوع رو کجا میتونم پیدا کنم؟ مرسی
سلام ممنون
قبل از هر چیز لطفا به توضیح ارائه شده در مورد واژه 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) همه چیز به حالت عادی خودش بر میگردد.
باسلام
من می خواهم برنامه نویسی یاد بگیرم باید از کجا و از کدام زبان برنامه نویسی استفاده کنم. متشکرم
به نظر من از ویژوال بیسیک شروع کنید ولی در نهایت باید سی شارپ یا جاواوب را یاد بگیرید
پایتون بهترین زبان برای شروع برنامه نویسی ست.
با سلام.
برای شروع می تونید از همین سایت استفاده کنید. ترجیحا از زبانی که خودتون دوست دارید، شروع کنید ولی معمولا خانواده بیسیک راحت تر هستند برای یادگیری و خانواده زبانهای C دوست داشتنی تر. اکثرا از C شروع می کنن! البته منظورم از C زبانهای خانواده C هست، مثل #C، جاوا، جاوااسکریپت، PHP و ... .
این زبانها از لحاظ گرامی شباهت زیادی با C دارن.
موفق باشید.
سلام به بچه های گل بیاموز و مدیریت محترم اقای پهلوان
و دوست خوبم استاد صلاحی که تو این مدت یادگیریم تو این سایت واقعا کمکم کرد تشکر کنم
فقط یه چند تا سوال خیلی ابتدایی دارم و کاملا هم جوابشو میدونم فقط میخوام اساتید راهنمایی اخر رو بهم بکنن
من الان html,css,css3,j avascript,jquer y,ajax رو کامل اوکی شدم
الان من بین دو راهی گیر کردم نمیدونم برم پی php یا asp.net با این حال که میدونم php اصلا قبل مقیاس با asp نیستش تموم تفاوتاشونم میدونم اگه هم شروع کنم با کار به asp سی شارپ و وبی دات نت رو بلدم فقط یه حسی بهم میگه فعلا پی اچ پی رو یاد بگیرم چون پی اچ پی هم زبان کمی نیست و خیلی از کارای آدمو راه میندازه بعد که کاملا اوکی شدم برم سمت یادگیری asp.net نمیدونم اساتید عزیز لطفا راهنمایی های آخرو بهم بکنید خدایی گیرم
مرسی از این همه زحماتتون
با سلام و تشکر.
ببین دوست عزیز مقایسه PHP و ASP.net خیلی معنا داره. هر کدوم معایب و مزایای خودشون رو دارن. اگر فکر میکنید PHP یک زبان ساده یا پایین تر از ASP.net هست، اشتباه میکنید!!!
من خودم php کار میکنم و به جرئت میتونم بگم، فوق العاده قدرتمند و فوق العاده قوی هست. از نظر من قابل قیاس با ASP.net نیست. ولی هیچوقت نمیگم PHP بهتر از ASP.net هست.
شما کمی با هر دو آشنا شو، ببین با کدوم راحت تری. هر کدوم رو که انتخاب کردی، همونو ادامه بده. بعد از یه مدت که تو برنامه نویسی اکی و مسلط شدی، سوئیچ کردن به زبانهای دیگه خیلی برات سخت نخواهد بود.
با سلام
من زمانی که از جی کوئری استفاده می کنم و بطور صحیح کد ها را می نویسم و به صفحه لینک می کنم جی کوئری اجرا نمی شود از ویرایشگر نود پد پلاس پلاس استفاده میکنم و زبان را بروری جاوا اسکریپت تنظیم می کنم مشکل از کجاست؟
با سلام.
در صورت کار صحیح بودن کدهای شما، این احتمال داره که فایل jquery به طور صحیح لینک نشده است.
کد لینک رو بذارید.
در ضمن استفاده از ویرایشگر کاملا شخصی هست و این مورد ربطی به خطای ایجاد شده در صفحات ندارن. گر چه بعضی از ویرایشگرها به شما امکان خطایابی خیلی آسان‌تری ارایه می‌دن.
به نقل از amin:
پیشنهاد بنده این است که از نرم افزار dreamweaver استفاده نمایید.
سلام خدا قوت.
این برنامه رو من فقط روی سیستم های 64 بیتی دیدم. برای 32 بیتی چیزی هست؟
با سلام و تشکر.
باید باشه! الآن اکثر سیستم‌ها 64 بیتی هستند، و به همین خاطر تو آموزشها و نصب نرم افزارها معمولا 64 بیتی رو معرفی می‌کنن. برای اطلاعات بیشتر میتونید به سایت سازنده این نرم افزار که adobe هست، مراجعه کنید.
دریم ویور غیر رایگان است
ایا می شود کتابخانه جی کوئری را به نوت پد پلاس پلاس اضافه کرد ؟
اگر میشود چگونه ؟
توجه داشته باشید که کتابخانه های جاوااسکریپت از قبیل جی کوئری، یا انگولار یا بوتسترپ را می توان به تمام سند های html اضافه کرد. بعنوان مثال نحوه ی اضافه کردن جی کوئری در نوتپد ++ به این صورت است که ابتدا شما جی کوئری را دانلود کنید و سپس فایل jquery.min.js(دقت کنید که نام دقیق آن ممکن است متفاوت باشد) را به پوشه ای که فایل اچ تی ام ال شما قرار دارد منتقل کنید. سپس در فایل اچ تی ام ال مورد نظر، بین تگ head دستور زیر را اضافه کنید:
<script type="text/java script" src="/jquery.min.js" ></script>
دقت کنید که نام های قرمز رنگ باید با هم یکی باشند و شما باید به جای آنها نام فایلی که دانلود کرده اید را قرار دهید.
از سایت کدام جی کوئری را دانلود کنم x.1 یا x.2
جی کوئری 2.x دقیقا همانند جی کوئری نسخه 1.x می باشد با این تفاوت که نسخه ی 2.x در اینترنت اکسپلورر 6 یا 7 یا 8 پشتیبانی نمی شود.
پس شما می توانید با توجه به نیاز خودتان، نسخه ی مورد نظر را دانلود کنید.
در کدام ویرایشگر کد جی کوئری را بنویسیم که قابلیت خطایابی داشته
به نقل از amin:
با دریم ویور بنویس
این لینک رو ببین
citywp.ir
دریم‌ویور این قابلیت رو داره. ولی این نرم افزار کلا به درد طراحی میخوره تا برنامه‌نویسی.
برای برنامه‌نویسی IDEهای بهتری مثل نت‌بینز و Zend Studio و ... هم هست که خیلی بهتر و حرفه‌ای‌تر هست.
با سلام.
ویرایشگرهای مختلفی برای کدنویسی به زبانهای مختلف طراحی شده است که با اندکی سرچ می توانید اسم و حتی IDE موردنظر رو دانلود کنید.
اما بر حسب تجربه ی شخصی، استفاده از نرم افزار NetBeans بسیار عالی است. این IDE به شدت کارا و برای اکثر زبانهای برنامه نویسی هست. jQuery هم در این نرم افزار ساپورت میشه، و شما میتونید با استفاده از این نرم افزار هم خیلی راحت کدنویسی کنید و هم اینکه میتونید خیلی راحت کدهای خودتون رو دیباگ کنید.
این نرم افزار برای IPهای ایران قابل دسترسی نیست، و برای دانلود اون از خود سایت سازنده باید از VPN استفاده کنید. همچنین بدونید این نرم افزار سورس باز هست و به طور رایگان قابل استفاده است.
قابلیت اپدیت شدن داره و با نصب پلاگین میتونید قدرت IDE رو چندین برابر کنید.
موفق باشید.
من هر متنی رو که توسط جی کوئری در صفحه html چاپ میکنم ، به شکل علامت سوال نمایش داده میشه.
مثلا دستورات زیر ، موقع نمایش همه علامت سوال میشن .
1
document.write("سلام من تبدیل به علامت سوال میشم")
این تگ و بذار بالای صفحه HTML تو بخش HEAD
<meta http-equiv="con tent-type" content="text/h tml; charset=utf-8"/ >
با سلام
هنگام ذخیره کردن فایل html گزینه Encoding را بر روی UTF-8 قرار دهید.
سلام ممنون از آموزش های خوبتون
سلام واقعا دمتون گرم..
باید خیلی بزرگ مرد باشین که چنین کار بزرگی انجام دادین....
آموزش jQuery عالی بود.
یه سوال داشتم
آیا با jquery میشه مثل جاوا اسکریپت یه ساعت با عقربه های متحرک ساخت ؟
منظورم اینه که تمام کارایی های جاوا اسکریپت مثل همین مثالی که زدم رو jquery داره یا نه ؟
با تشکر از سایت خوبتون .
فقط کافی است که واژه ی "jquery clock" را در گوگل Search کنید...!
با سلام
میخواستم بدونم میشه مستقیم jQuery رو یاد بگیرم بدون اینکه سراغ جاوا اسکریپت برم .
بله
یعنی اگه مستقیم سراغ یاد گیری jQuery برم به مشکل بر نمیخورم یعنی اینکه jQuery هیچ پیش نیازی مربوط به جاوا اسکریپت نداره
مسلماً اگر با مفاهیم JavaScript آشنا باشید، jQuery را سریع تر فراخواهید گرفت. اما هیچ اشکالی وجود ندارد که کسی بدون آشنایی با دستورات JavaScript به سراغ jQuery برود.
البته ذکر این مطلب هم خالی از لطف نیست که jQuery پیاده سازی شد تا کاربران وب راحتر سمت Client کد بزنند و خود را درگیر زحماتی که در JavaScript وجود دارد نکنند. پس با خیال راحت برید سراغ jQuery ...!
سلام به همه ی فعالان عرصه ی دانش، با تشکر از مطالب خوب تان،منتظر آموزش Silverlight 5 از سایت شما هستم.
سلام و خسته نباشید به شما عزیزانی که این سایت رایگان در اختیار همه گذاشتید،خیلی ممنون از زحماتتون،فقط لطفا مثل سایت عالیتون در پاسخ گویی به نظرات هم عالی باشید،
راستی آموزش وردپرس هم میذارید؟ باز هم ممنون
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: