آموزش jQuery بخش اول
170 روز پیش
پويا صادقى , jQuery
jQuery یکی از بهترین کتابخونه های جاوا اسکریپته. فکر نمیکنم جمله ای بهتر از Write less, Do more بتونه دلیل استفاده از این framework رو توجیه کنه 
اگه بخوام بیشتر توضیح بدم ، jQuery مجموعه ای از توابع جاوااسکریته که به شما اجازه میده بدون داشتن تسلط کامل
به Javs Script (و فقط با آشنایی نسبی با Syntax این زبان) ، صفحه های جالب و کاربرپسند درست کنید
چه بدی هایی داره؟
- حجمش برای کاربرانی که از اینترنت ذغالی مثل DialUp و GPRS استفاده میکنن ممکنه یکم زیاد باشه.
(90 کیلوبایت) - استفاده بیش از حد از کدهای jQuery در یک صفحه ، باعث کاهش سرعت و کرش کردن مرورگرهایی
مثل IE6 میشه (کی اهمیت میده!!)
چه خوبی هایی داره؟
- کدنویسی کمتر
- داشتن افزونه های مختلف
- سازگاری با 99% مرورگرها
- عدم نیاز به دونستن JavaScript
- استفاده از توابع آماده با چند دستور ساده
- قابلیت کش شدن فایل در اولین بازدید کاربر
- پشتیبانی از event ها
- ساخت انیمیشن و افکت با چند کد ساده
- پشتیبانی از Ajax
- Open Source بودن
- جی کوئری رایج ترین فریم ورک جاوا اسکریپته و پنجاه و یک و نیم درصد از 10000 سایت پربازدید دنیا دارن از jQuery استفاده میکنن.
- طبق آماری که منتشر شده بیشترین مشتری های jQuery سایت های تجاری هستن. سایت های تجاری 21% مصرف کنندگان jQuery رو تشکیل میدن. بعد از اون سایت های فروشگاهی ، فناوری، خبری ، تفریحی و آموزشی هستن.
- فقط کافیه عباراتی مثل jQuery Example رو گوگل کنید تا ببینید چقدر استفاده از jQuery در اینترنت رایجه.
- هیچوقت برای کارهای ساده ای که بدون اسکریپت هم میتونید انجام بدید، از جی کوئری استفاده نکنید.
اگه با CSS3 و چند خط جاوا اسکریت میتونید به هدفتون برسید ، بیخودی یه فایل 90 کیلوبایتی رو تو مرورگر کاربراتون نچـپـونید!
- آخرین نسخه فایل اسکریپتی که در سایت jQuery قرار داره رو دانلود کنید و در سایتتون آپلود کنید. اگرم نخواستین آپلود کنید میتونید از فایلی که در سرور گوگل قرار گرفته استفاده کنید.
فایل رو مثل هر اسکریپت دیگه ای با یه تگ script میتونید در صفحهتون قرار بدید:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
برای کدنویسی هم میتونید یه فایل js دیگه بسازید یا از تگ script استفاده کنید و داخل صفحه html بذارید. برای خوانده شدن کد ها همراه با لود شدن صفحه ، لازمه که از تابع ready استفاده کنیم:
$(document).ready(function(){
YOURCODE
});
تابع hide
برای مخفی کردن یک المنت استفاده میشه. تقریبا کاری که display:none در CSS انجام میده
$(document).ready(function(){
$(".myclass").click(function(){
$(this).hide();
});
});
کد بالا چه کاری میکنه؟ با لود شدن صفحه ، کدها رو آماده اجرا میکنه،
بعد با یه تابع برای رویداد کلیک همه المنت های با کلاس .myclass ایجاد میکنه، این تابع کارش اینه که با کلیک کردن ، خود المنتی که کلیک شده رو hide میکنه.
- به جای .myclass میتونید نام تگ رو بذارید (مثل div و p و span و…) یا میتونید ID المنت ها رو بذارید.
- درست مثل CSS باید قبل از اسم کلاس ها نقطه . و قبل از ID ها باید از # استفاده کنیم.
$(document).ready(function(){
$(".hide_it").click(function(){
$(".myclass").hide();
});
});
همونطور که متوجه شدید 4 روش برای صدا زدن عناصر در jQuery هست:
برای همون عنصری که رویداد رو دریافت کرده
$(this).hide()
برای یک کلاس خاص
$(".classname").hide()
برای یک ID خاص
$("#IDname").hide()
برای یک تگ خاص
$(div).hide()
در بخش دوم آموزش، با سلکتورهای jQuery بیشتر آشنا میشیم
