آموزش jquery

آموزش jquery جلسه اول :

هدف jQuery، ساده سازی استفاده از JavaScript در وبسایت های شماست.
قبل از مطالعه درباره ی jQuery، شما باید اطلاعاتی پایه ای و اساسی درباره ی HTML، CSS و JavaScript داشته باشید.
jQuery چیست؟
jQuery یک کتابخانه ی JavaScript است و شعار معروفی که برای ان بکار برده می شود “نوشتن کمتر، کار بیشتر” تا حدودی گویای اهداف ان  است. هدف jQuery، ساده سازی استفاده از JavaScript در وبسایت های شماست.
jQuery بسیاری از وظایف رایج را که برای انجام دادن آن ها  به خط های فراوانی از کُدهای JavaScript نیاز است، می گیرد و با استفاده ار متُدهایی، کاری می کند که با استفاده از یک خط کُد ساده، بتوان آن ها را فرا خواند.
jQuery بسیاری از پیچیدگی های JavaScript را مانند فراخوانی AJAX، ساده می کند.
کتابخانه ی jQuery شامل این ویژگی هاست:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities
علاوه بر این ها، jQuery تقریباً برای هر وظیفه ای یک plugin دارد.
چرا jQuery؟
Framework های فراوانی برای JavaScript وجود دارد، ولی این طور که به نظر می آید، jQuery محبوب ترین و قابل گسترش ترین آن هاست.
بسیاری از کمپانی های بزرگ مانند Google، Microsoft، IBM و Netflix از jQuery استفاده می کنند.
آیا jQuery در همه ی مرورگرها کار می کند؟
گروه jQuery از مشکلات cross-browser آگاهی دارند و این آگاهی را وارد کتابخانه ی jQuery کرده اند.

نصب jQuery
اضافه کردن jQuery به صفحات وب شما
راه های فراوانی برای استفاده از jQuery در وبسایت تان وجود دارد. شما می توانید کتابخانه ی jQuery را از www.jQuery.com دانلود کنید. همچنین می توانید از jQuery یک CDN  مانند Google استفاده کنید.
دانلود jQuery
دو نسخه از jQuery برای دانلود وجود دارد:
نسخه ی Production: این نسخه به دلیل کوچک و فشرده بودن، برای وبسایت های live است.
نسخه ی Development: این نسخه برای آزمایش و توسعه است و هم کُدهایش قابل خواندن است و هم فشرده نیست.
هر دوی این نسخه ها را می توان از www.jQuery.com دانلود کرد.
کتابخانه ی jQuery یک فایل ساده ی JavaScript است و می توان آن را با یک برچسب <script> HTML که در بخش <head> قرار دارد، ارجاع داد.

jquery
فایل های دانلود شده را باید در همان جایی قرار دهید که می خواهید صفحاتتان آن جا استفاده شود.
آیا می دانید چرا =”text/javascript” را در <script> تایپ نکردیم؟
نیازی به انجام این کار در HTML5 نیست. JavaScript زبان رمزنگاری پیش فرض در HTML5 و در همه ی مرورگرهای مدرن است.
راه های دیگر
اگر نمی خواهید خودتان jQuery را دانلود و میزبانی کنید، می توانید از آن از یک شبکه ی تحویل محتوا (Content Delivery Network یا CDN) استفاده کنید.
هم Google و هم Microsoft ، jQuery را میزبانی می کنند.
برای استفاده از jQuery از Google و Microsoft، باید مورد زیر را به یاد داشته باشید:
2

مزیت استفاده از jQuery میزبانی شده توسط  Google و Microsoft: بسیاری از کاربران، jQuery را هنگام بازدید از سایت های مختلف از Google و Microsoft دانلود می کنند. در نتیجه، هنگام بازدید سایت شما، jQuery از کَش ( cache) بالا خواهد آمد و سایت شما سریع تر بالا می آید. همچنین، CDNها تضمین می کنند که هنگامی که یک کاربر یک فایل را از آن درخواست کند، آن فایل از نزدیک ترین سِروِر به کاربر، به وی ارائه شود و در نتیجه ی این کار، زمان بارگذاری سریع تر شود.

3با jQuery، شما المان های HTML را انتخاب می کنید و روی آن ها کار انجام می دهید.

jQuery Syntax
jQuery بصورت سفارشی  برای انتخاب المان های HTML و انجام عملیات روی آن هاست. Syntax اساسی، $(selector).action() می باشد.
•    علامت $ برای تعریف و دسترسی به jQuery
•    یک (selector) برای جستجوی المان HTML
•    یک action() برای اجرا روی المان
مثال ها:
$(this).hide() المان را مخفی می کند.
$(“p”).hide() تمامی المان های <p> را مخفی می کند.
$(“.test”).hide() تمامی المان ها را با مخفی می کند.
$(“#test”).hide() تمامی المان ها را با id=”test” مخفی می کند.
آیا با انتخاب کننده (selector)های CSS آشنا هستید؟
jQuery از CSS برای انتخاب المان ها استفاده می کند. در این باره، در بخش های بعدی بیشتر صحبت خواهیم کرد.

Document Ready Event
اگر کد های مختلف را بررسی کرده باشیدحتماً متوجه شده اید که تمامی متُدهای jQuery در مثال های ما در یک document ready event قرار دارند:
4

این کار از اجرای کُدهای jQuery قبل از پایان بارگذاری و آماده شدن مدارک (document )، جلوگیری می کند.
صبر کردن برای بارگذاری کامل و آماده شدن محتوا قبل از کار با آن ها این اجازه را به شما می دهد که کُدهای JavaScript را قبل از المان ها و محتوا  در بخش بالا داشته باشید.
در این چند مثال، اگر متُدها قبل از بارگذاری کامل المان ها و محتوا اجرا شوند، عملیات روی آن ها با شکست مواجه می شود:
•    مخفی کردن المانی که هنوز ایجاد نشده است
•    تلاش برای فهمیدن سایز عکسی که هنوز بارگذاری نشده است
تیم jQuery یک متُد خیلی کوتاه تر برای document ready event ایجاد کرده است:
5

از syntaxی که دوست دارید، استفاده کنید. به نظر من، document ready event هنگام خواندن کُدها قابل درک تر است.

نویسنده : امیرعمادی

دیدگاه بسته است