تبلیغات
یادداشت های من - آموزش JQuery جلسه اول: معرفی JQuery

یادداشت های روزانه من درباره اینترنت، سیاست، آبکنار، رایانه، شعر، فناوری اطلاعات و ...
هر چیزی که بهش علاقه دارم

حسین (کیوان) جهانبخش آبکنار

جستجو

 

آموزش JQuery جلسه اول: معرفی JQuery

یکشنبه 1 خرداد 1390   03:48 ب.ظ

کتابخانه جی کوئری را می توان با یک خط کد به صفحه وب افزود.


قبل از جی کوئری چه چیزی باید بدانید؟

قبل از مطالعه جی کوئری شما باید اطلاعات پایه ای درباره این مباحث داشته باشید:

  • HTML
  • CSS
  • JavaScript

JQuery چیست؟

جی کوئری کتابخانه ای از توابع جاوااسکریپت است.

جی کوئری یک کتابخانه جاوا اسکریپت سبک با ویژگی «کمتر بنویس، بیشتر کار انجام بده» است.

کتابخانه جی کوئری شامل خصوصیات زیر است:

  • انتخاب عناصر HTML
  • دستکاری عناصر HTML
  • دستکاری CSS
  • توابع رویداد (event) HTML
  • انیمیشن ها و افکت های جاوااسکریپت
  • پیمایش و اصلاح HTML DOM
  • AJAX
  • یک سری ابزارهای دیگر

 

افزودن کتابخانه JQuery به صفحه

تمام کتابخانه جی کوئری در یک فایل جاوااسکریپت ذخیره شده که شامل تمام توابع جی کوئری است. این کتابخانه را می توانید از سایت JQuery.com دانلود نمایید.

با یک خط کد زیر می توانید این کتابخانه را برای استفاده به صفحه وب خود وصل کنید. دقت کنید که این خط باید بین تو تگ <head> و </head> صفحه اضافه نمایید.

<script type="text/javascript" src="jquery.js"></script>

اولین مثال JQuery

مثال زیر نحوه استفاده از تابع hide() را نشان می دههد که با استفاده از آن تمام عناصر <p> صفحه را مخفی می کنیم.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

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

دانلود JQuery

دو ورژن از جی کوئری برای دانلود وجود دارد: یک مدل کوچک و یک مدل فشرده نشده که دومی بیشتر برای برنامه نویسان، برای مطالعه کدها و بررسی آنهاست.

هر دو نسخه را می توانید از همان سایت JQuery.com دانلود نمایید.

جایگزین های دانلود

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

  • گوگل:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  • مایکروسافت:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>

 


پ ن : این مجموعه آموزش ها از سایت W3C ترجمه شده و خواهد شد. جهت آشنایی خودم و دیگران منتشر می کنم.


نوشته شده توسط : حسین (کیوان) جهانبخش آبکنار

نوع مطلب : JQuery ،طراحی وب ،