jQuery به زبان ساده - قسمت اول
اگر به امر شریف طراحی و یا برنامه نویسی وب مشغول هستید یا در حال یاد گرفتن بوده و در آینده نزدیک میخواهید به این گروه عظیم پیوست بخورید (:دی) حتما اسم جاوا اسکریپت (JavaScript) رو شنیده اید. پس فرض رو بر این میگیریم که میدونیم جاوا اسکریپت چی هست و به چه کاری میاد و دیگه توضیحی در اون مورد نمیدم.
jQuery به زبان خیلی ساده، مجموعه ای از دستورات و توابعی هست که با جاوا اسکریپت نوشته شده و داخل یک فایل قرار گرفته شده. حالا به چه دردی میخوره؟
استفاده از این کتابخونه (Library) از پیش ساخته شده به ما کمک میکنه تا در استفاده از جاوا اسکریپت، خیلی کار ها رو خیلی ساده تر از قبل انجام بدیم، کدهای تکراری ننویسیم و قابلیت Event Handling (یعنی کنترل رویدادها مثل کلیک شدن یک دکمه) و انیمیشن در صفحه به سادگی در اختیار ما قرار بگیره و یکی از موارد اصلی کاربرد اون، ارتباط بسیار ساده و سریع با اجرا صفحه (DOM) هست و البته یکی از قابلیت های مهم وب سایت های امروزی یعنی AJAX ، تنها با چند خط نوشتن کد توسط ما انجام پذیر هست و بقیه کارها در پشت صحنه توسط کتابخونه jQuery انجام میشه.
jQuery کاملا رایگان میباشد و قابل دریافت از سایت خودش یعنی : http://jQuery.com
اما چون قسمت کد سایت گوگل (code.google.com) چشم دیدن ما ایرانی ها رو نداره، اگر از اونجا نتونستید فایل رو دانلود کنید، میتونین از لینک زیر، فایل اصلی و در واقع همون کتابخونه jQuery رو دانلود کنید:
jQuery Version 1.3.2 (بهتره رایت کلیک کنید و "سیو تارگت از" رو انتخاب کنید :دی)
بعد از دانلود، فایل رو باید unzip کنید تا برسید به یک فایل با پسوند js که در واقع همون فایل اصلی کتابخونه jQuery هست.
خوب حالا یک قدم پیشرفت کردیم. یه مقداری فهمیدیم jQuery چیه و فایل کتابخونه رو هم حالا روی کامپیوتر خودمون داریم. مرحله بعد استفاده از این فایل و چند تا مثال کوچک میباشد.
این فایل باید در هر صفحه ای که میخواهید از jQuery استفاده کنید، در فایل HTML خودتون، به اون یه ارتباط بدید و حتما بهتر از من میدونین که این کار رو باید به صورت زیر انجام داد:
<script type="text/javascript" src="jQuery1.3.2.js"></script>
و حتما باز هم میدونید که این کد رو باید در قسمت <head> قرار بدید و در بخش src باید آدرس فایل jQuery رو داد.
بسیار خوب، حالا ما کتابخونه رو نصب کردیم و میتونیم از قابلیت هاش استفاده کنیم. اما قبل از مثال ها، ممکنه این سوال پیش بیاد که وجود این فایل، حجم صفحه رو سنگین نمیکنه ؟ خوب این فایل حدودا 60kb حجم داره و نمیشه گفت حجم زیادیه، مخصوصا در این زمان که حتی سرعت های بالاتر از 128kb، سرعتهای معمول و استاندارد در اینترنت شناخته شده اند. البته در کشور ما، هنوز خیلی از دوستان هستند که از خطوط 56K استفاده میکنند. اما خوب نکته اینجاست، که این فایل فقط یک بار، بار اولی که صفحه دیده میشه، روی هارددیسک بازدیدکننده دانلود میشه و در دفعات بعدی که از سایت شما بازدید میشه، این فایل از روی هارد دیسک بازدیدکننده فراخونی میشه ( یعنی همون Cache ) و در کل شاید 2 تا 3 ثانیه سرعت لود شدن سایت شما در دفعه اول پایین بیاد که میشه از اون چشم پوشی کرد و البته همونطور که گفتم در سرعتهای بالا که این حجم فایل اصلا چیزی نیست که قابل بحث باشه، و حجم این کتابخونه، به هیچ وجه از نکات منفی اون به حساب نمیاد!
خوب بریم سر قسمت مثال ها. اول از همه باید ببینیم که چجوری میشه 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 هست که میتونه به صورت مستقیم با اجزا صفحه در ارتباط باشه.
مثال زیر رو ببینید و بعدش منتظر باشید تا قسمت های بعدی..
البته سایت jquery.com در زمینه آموزش فوق العاده کامل و غنی هست، میتونین از اونجا کلی چیز میز یاد بگیرید :دی
<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>
*این مطالب از خودم میباشد! اگر در اون مورد اشتباهی میبینید، ممنون میشم که اعلام کنید و استفاده از این مطلب آزاد هست و اگر دوست دارید با انصاف باشید، منبع رو هم ذکر کنید.