همان طور که در قسمت های قبل گفته شد jQuery به زبان خیلی ساده، مجموعه ای از دستورات و توابعی است که با جاوا اسکریپت نوشته شده و داخل یک فایل قرار گرفته شده است. حال می خواهیم ببینیم که از jQuery چگونه باید استفاده کرد؟؟؟؟!!!!
استفاده از این کتابخانه(Library)از پیش ساخته شده به ما کمک میکند تا در استفاده از جاوا اسکریپت، خیلی کار ها را خیلی ساده تر از قبل انجام دهیم،کدهای تکراری را ننویسیم و قابلیتEvent Handling (یعنی کنترل رویدادها مثل کلیک شدن یک دکمه)و انیمیشن در صفحه به سادگی در اختیار ما قرار بگیرد و یکی از موارد اصلی کاربرد آن، ارتباط بسیار ساده و سریع با اجرا صفحه (DOM) است و البته یکی از قابلیت های مهم وب سایت های امروزی یعنی AJAX ، تنها با چند خط نوشتن کد توسط ما انجام پذیر است و بقیه کارها در پشت صحنه توسط کتابخانهjQuery انجام میشود.
jQuery کاملا رایگان می باشد و قابل دریافت از سایت خودش یعنی:http://jQuery.com
بعد از این که فایل کتابخانهء jQUuery را دانلود کردید، فایل رو باید unzip کنید تا به یک فایل با پسوند js.برسید که در واقع همان فایل اصلی کتابخونه jQuery است.
خوب حال یک قدم پیشرفت کرده ایم.تا حدودی متوجه شدیم که jQuery چیست و فایل کتابخانهء آن را هم حالا روی کامپیوتر خودتان دارید. مرحله بعد استفاده از این فایل و چند مثال کوچک است.شما باید در هر صفحه ای که می خواهید از jQuery استفاده کنید به آن یک لینک دهید یعنی باید یک ارتباط ایجاد کنید و باید این کار را به صورت زیر انجام دهید:
<script type=”text/javascript” src=”jQuery1.3.2.js”></script>
این کد باید در قسمت <head> صفحهء HTMLشما قرار بگیرد و در بخش src باید آدرس فایل jQuery را وارد کنید.بسیار خوب، حالا شماکتابخانه را نصب کردید و میتونید از قابلیت های آن استفاده کنید. اما قبل از این که به سراغ مثال ها برویم، ممکن است این سوال پیش بییاد که آیا وجود این فایل، حجم صفحه راسنگین می کند؟ ؟پاسخ این است که این فایل حدودا ۶۰kb حجم دارد وکه البته نمی توان گفت حجم زیادی دارد، مخصوصا در این زمان که حتی سرعت های بالاتر از ۱۲۸kb، سرعتهای معمول و استاندارد در اینترنت شناخته شده اند. البته در کشور ما، هنوز خیلی از دوستان هستند که از خطوط ۵۶K استفاده می کنند. اما خوب نکته اینجاست، که این فایل فقط یک بار، بار اولی که صفحه دیده میشود، روی هارددیسک بازدیدکننده دانلود میشود و در دفعات بعدی که از سایت شما بازدید میشود، این فایل از روی هارد دیسک بازدیدکننده فراخونی میشود ( یعنی همان Cache ) و در کل شاید ۲ تا ۳ ثانیه سرعت لود شدن سایت شما در دفعه اول پایین بییاد که میشود از آن چشم پوشی کرد و البته همانطور که گفتیم در سرعت های بالا این حجم فایل اصلا چیز مهمی نیست.
در اولین مثال از jQuery می خواهیم ببینیم که چه طور می شود jQuery را فراخوانی کرد,
ابتدا بعد از تگ body باید یک تگ script باز کنید و به صورت زیر عمل کنید:
<script type=”text/javascript”>
$(document).ready(function() {
//کدهای شما در اینجا
});
</script>
این قطعه کد، همواره باید در استفاده از jQuery به همین صورت نوشته شود و کد های شما باید در قسمت مشخص شده نوشته شود. در واقع با این قطعه کد ما میخواهیم مطمئن شویم که ابتدا صفحه ما آماده دریافت کدهای کتابخانه هست یا نه. این آمادگی بر اساس لود شدن کامل اجزای صفحه سنجیده می شود.
در جاوا اسکریپت بدون استفاده از کتابخونه jQuery برای اینکه بفهمیم صفحه ما کاملا لود شده است از رویداد onLoad استفاده می کردیم. مشکل onLoad این هست که منتظر می ماند تا کل صفحه بر روی مرورگر کلاینت(کاربر) لود شود و بعد اجرا می شود، یعنی اگردر محتویات سایت شما تعداد زیادی متن و عکس وجود داشته باشد باید همه اونها کامل لود شوند تا onLoad فراخونی شود. اما در jQuery و رویدادdocument.ready تنها کافیست اجزای سازنده صفحه لود بشوند و نه مطالب آن.پس استفاده ازjQuery در بیشتر مواقع می تواند سریعتر از جاوا اسکریپت معمول باشد.
حال می خواهیم بدانیم علامت $ که در قطعه کد بالا بود چه مفهومی دارد؟ ؟ علامت $ در کد jQuery به مفهوم استفاده از اجزا صفحه در دستورات است. مثلا برای دسترسی به تگ لینک که <a> هست می گوییم: (“a”)
و در ادامه کد هم می گوییم که وقتی صفحه ما آماده شد,function را اجرا کن,که کدهای مربوطه را داخل آن می نویسیم.
در مثال زیر، بعد از document.ready تگ a را فراخونی می کنیم و رویداد کلیک را برایش کد نویسی می کنیم.نکته ای که باید به آن خیلی دقت کنید باز و بسته کردن پرانتز ها () و آکولاد {} هاست که با هم اشتباه گرفته نشوند.
نکته دیگری که وجود دارد این است که در تگ لینک a ما هیچ کد جاوا اسکریپتی مثل onclick = function ننوشتیم و این در واقع قدرت jQuery است که می تواند به صورت مستقیم با اجزا صفحه در ارتباط باشد.با دقت در مثال زیر بهتر متوجه خواهید شد!!!
<html>
<head><title>jQuery</title>
<script type=”text/javascript” src=”jQuery1.3.2.js”></script>
</head>
<body>
<script type=”text/javascript”>
$(document).ready(function(){
$(“a”).click(function(){
alert(“Helo World”);
});
});
</script>
<a href=”#”>Click me!</a>
</body>
</html>
