0
آموزش jquery قسمت اول
آموزش jquery قسمت اول
در این دوره قصد داریم تا به صورت کامل نحوه کار با jquery را آموزش دهیم.
در صورت آماده بودن هر قسمت از آموزش jquery به صورت مجزا در سایت قرار می گیرد. در صورتی که مایل به یادگیری jquery هستید پیشنهاد می کنیم این دوره را دنبال کنید تا jquery به صورت گام به گام یاد بگیرید.
پیش نیازها:
- تجربه کاری با جاوا اسکریپت (فراخوانی توابع ، ایجاد اشیا و دستکاری آنها و ..)
- درک کامل HTML (وظیفه jquery آزمایش تگ ها و عناصر HTML است)
- تجربه کاری با CSS (جی کوئری امکانات مناسبی برای کار با استایل ها دارد)
در صورتی که این پیش نیازها را نمی دانید نگران نباشید در صورت نیاز این مورد را در داخل آموزش توضیح خواهیم داد.
دلایل یادگیری jquery :
- خلق جلوه های ویژه در گرافیک سایت
- کار با Ajax
- نیاز مبرم در وب سایت های تحت Asp.Net MVC و PHP
- و...
JQuery چیست؟
JQuery یک نوع جدید از کتابخانه های جاوا اسکریپت است. JQuery کتابخانه ای سریع و سبک که با قدرت تمام پیمایش اسناد HTML ، مدیریت رخدادها ، انیمیشن کردن عناصر ، آزمایش داده ها و تعامل با Ajax را ارائه می کند. به صورتی کلی JQuery برای تغییر در شیوه اسکریپت نویسی جاوا اسکریپت طراحی شده است.
نحوه نصب JQuery :
نخستین باید برای شروع کار با JQuery ابتدا از سایت www.jquery.com آخرین نسخه JQuery را دانلود کنید. در ادامه جهت کار و آشنایی با سایت JQuery و سایت های مرتبط نیز توضیح داده خواهد شد.
در سایت JQuery به دو صورت می توانید فایل های JQuery را دانلود کنید:
Production : این نسخه شامل تمام ویژگی های اصلی کتابخانه با حجم بسیار پایین است. دلیل اصلی حجم پایین این نوع فایل حذف فاصله های خالی و توضیحات در فایل است.
Developer : این نسخه شامل توضیحات کامل و امکان خواندن راحت آن است. بالطبع دارای حجم بیشتری است.
نکته:
توصیه میشود در هنگام توسعه و برنامه نویسی وب جهت راحتی کار و اشکال زدایی سریع تر از نسخه دوم استفاده کنید.
در این آموزش ما از آخرین نسخه jquery یعنی نسخه 2.1.3 استفاده می کنیم.
از چه IDE ی برای کار با JQuery استفاده کنم؟
برای کار با JQuery از یک ویرایش گر ساده متن مانند Notepad می توانید استفاده کنید. ولی نرم افزار های قدرتمندی مانند ویژال استادیو ، Notepad++ و همچنین نرم افزارهای که جهت کار با زبان های برنامه نویسی است، می توانید استفاده کنید.
نرم افزاری که ما در این آموزش استفاده می کنیم ویژال استادیو است و برای شما هم توصیه می کنیم.
نحوه لینک کردن فایل JQuery به صفحه:
برای لینک کردن فایل JQuery باید در قسمت تگ باز و بسته head صفحه کد زیر را بنویسید :
<script src="jquery/jquery-2.1.3.min.js"></script>
اگر به کد بالا نگاه کنید ابتدا از تگ script استفاده شده و در src نیز مسیر فایل مشخص شده که ما فایل
jquery-2.1.3.min.js را داخل پوشه jquery کپی کردیم و در نهایت تگ script را بستیم.
نکته:
اگر به نام فایل jquery نگاه کنید از .min استفاده شده یعنی این فایل یک فایل فشرده است که در بالا توضیح دادیم
مثالی ساده ای از JQuery :
در اینجا یک مثال ساده از jquery میزنیم تا در قسمت های بعدی به صورت مفصل به آموزش جزء به جزء jquery بپردازیم.
کدهای زیر را در نظر بگیرید :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("www.iranganj.ir");
});
</script>
</head>
<body>
</body>
</html>
اگر برنامه بالا را اجرا کنید خواهید دید که هنگام اجرا برنامه یک پیغام که آدرس سایت ایران گنج است را نمایش می دهد.
در کدهای بالا از کاراکتر $ استفاده کردیم که همان jquery است یعنی شما می توانید به جای $ از کلمه jquery استفاده کنید. سپس از کلمه document داخل پرانتز استفاده شده که اشاره به همین صفحه جاری می کند. و سپس از .ready استفاد شده است.
ما تمام کدهای jquery را داخل این function می نویسیم. در این مثال ما از تابع alert استفاده کردیم و یک پیغام را نمایش دادیم.
نکته بسیار مهم:
اصولا لینک فایل های jquery را قبل از تگ بسته body قرار می دهند و همچنین کدهای jquery را در انتهای صفحه می نویسند تا صفحه سریع تر لود شود. ولی ما در این آموزش تمام کدها را داخل تگ باز بسته head می نویسیم.
این مطلب را به اشتراک بگذارید...
نظر / سوال