آموزش jQuery

jQuery یک کتابخانه کمکی جاوا اسکریپت با شعار کد کمتر و عملکرد بیشتر میباشد. هدف اصلی از ایجاد این کتابخانه بالا بردن سرعت تولید نرم افزارهای مبتنی بر وب با ایجاد متدهای گوناگون جایگزین جاوا اسکریپت برای انتخاب المانهای HTML، هندل کردن رویدادها، جلوه های بصری، AJAX و بسیاری دیگر از عملکردهای جاوا اسکریپت میباشد که بدون استفاده از این کتابخانه پیاده سازی عمکردهای مشابه این متدها در جاوا اسکریپت زمانبر خواهد بود. همچنین دیگر هدف این کتابخانه برطرف کردن تفاوتهای اجرای جاوا اسکریپت در بروزرهای مختلف میباشد. این کتابخانه همچنان تحت توسعه و کد نویسی فعال میباشد و با ارائه هر نسخه شاهد بهبود سرعت اجرا و قابلیتهای جدید در آن هستیم. با وجود اینکه استفاده از این کتابخانه در حدود 70 کیلوبایت به حجم صفحه وب می افزاید اما مزایای استفاده از این کتابخانه کاملاً ارزش 70 کیلو بایت حجم اضافه برای صفحات وب را دارد.

مقالات مرتبط

jQuery یک کتابخانه استاندارد شامل بسیاری از توابع و متد های از پیش نوشته شده به زبان جاوااسکریپت است. این توابع قابلیت هایی را که با کدنویسی زیاد در جاوا اسکریپت بدست می آوردید را تنها در یک خط ارائه میدهند. با این توابع پیمایش و تغییرات (حتی ایجاد) تگ های HTML و رسیدگی به انواع event ها و effect هاو متحرک سازی و تعاملات Ajax ای به راحتی انجام پذیر است و از آنجایی که کدها جدا از فایل HTML هستند ، کنترل و بهینه سازی آنها ساده است.

در این سری مقالات به آموزش گام به گام مفاهیم jQuery خواهیم پرداخت. با ما همراه باشید. (این سری مقالات برداشت آزادی است از کتاب JavaScript jQuery, The Missing Manual)

برای استفاده از کتابخانه جی کوئری باید ابتدا آن را به صفحه اچ تی ام ال خود اضافه کنیم: به دو روش فایل کتابخانه jquery را به صفحه خود اضافه میکنیم:

استفاده از فایل کتابخانه به روی سرورهای آنلاین مثل google و قرار دادن کد زیر داخل تگ head صفحه مان:

روش دوم دانلود فایل کتابخانه jQuery از سایت jquery.com است. پسوند این فایل js میباشد. اگر فرض کنیم این فایل را در پوشه js قرار داده باشیم، باید کد زیر را در بالای صفحه مان داخل تگ head بنویسیم:

حال که فایل کتابخانه را به صفحه تان اضافه کرده اید، نوبت به تگ دوم script میرسد تا بتوانید از کتابخانه جی کوئری استفاده کنید.

یک تابع از پیش تعریف شده است که متظر میماند تا تمامی کدهای HTML صفحه لود شوند سپس کدهای اسکریپت شما را اجرا کند. حرف $ به صورت مخففی برای کلمه jquery است. میتوانید خود کلمه jquery را هم به جای آن استفاده کنید. document تعیین کننده صفحه یا سندی است که میخواهیم تابع در آن اجرا شود . function هم تابعی شامل کدهای اسکریپتی ماست که میخواهیم به محض لود شدن صفحه اجرا شود.

مفهوم اصلی در جی کوئری را میتوان اینطور در نظر گرفت:"تگ را پیدا کن، متد را اجرا کن" مبحث اصلی ما در مقاله امروز این است که چطور المنت ها را در صفحه پیدا کنیم و سپس متدهای لازم را بر روی آنها اجرا کنیم.

برای پیدا کردن یک المنت در صفححه بهتر است با مفهوم DOM آشنا شویم:

وقتی بروزر فایل HTML را لود میکند، تمامی محتوی فایل را(به همراه فایل CSS ) در صفحه نمایش میدهد. اما این تمام کاری نیست که بروزر با tag ها و attribute ها و محتوی صفحه میکند. بلکه بروزر یک مدل از HTML صفحه هم میسازد و نگهداری میکند که برای دسترسی به کلیه عناصر صفحه بکار میرود. این مدل از صفحه Document Object Model یا به اختصار DOM نامیده میشود. DOM اطلاعاتی را که جاوااسکریپت برای تعامل با صفحه احتیاج دارد در اختیارش قرار میدهد. این DOM است که امکان انتخاب المنت ها و تغییر و ایجاد آنها را به jQuery میدهد. DOM یک فایل جاوااسکریپتی نیست بلکه یک استاندارد است که همه بروزر ها از آن تبعیت میکنند.

برای بررسی چگونگی DOM به صفحه HTML ساده زیر توجه کنید:

میبینیم که در این صفحه هم مثل همه صفحات دیگر برخی المنت ها در واقع wrapper یا پوشاننده المنت های دیگر هستند. مدل DOM برای دسترسی به عناصر موجود در صفحه HTML از یک درخت سلسله مراتبی استفاده میکند.

DOM

تگ < HTML > ریشه درخت و بقیه تگ ها به ترتیب شاخه ها و برگ ها را تشکیل میدهند. هر یک از این تگ ها و خصیصه ها و متن ها یک شی واحد به نام node در DOM هستند.

انتخاب المنت های صفحه با jQuery

همانطور که اشاره شد برای تغییرات در المنت های HTML باید اول آنها را انتخاب کنیم تا بتوانیم توابع jQuery را بر آنها اعمال کنیم. jQuery از انتخاب گرهای CSS برای پیدا کردن المنت های صفحه استفاده میکند که فرمت کلی آن به این صورت است:

به عنوان مثال

تگی در صفحه را که دارای ID برابر با banner میباشد پیدا میکند. علامت $ نشان میدهد که شما با ID آن المنت کار میکنید. حال که المنت را پیدا کردید میتوانید هرکدام از توابع jQuery را بر آن اعمال کنید. به عنوان مثال میتوانید HTML آن را تغییر دهید:

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

انتخاب المنت ها از روی ID آنها

به عنوان مثال فرض کنیم در صفحه خود تگ زیر را داریم:

به دو روش در کد jQuery خود میتوانیم به تگ زیر دسترسی داشته باشیم:

روش DOM:

روش jQuery:

انتخاب المنت ها از روی نام آنها

به عنوان مثال برای دسترسی به تگ های < a> در صفحه خواهیم داشت:

روش DOM:

روش jQuery:

انتخاب المنت ها از روی نام کلاس آنها

به عنوان مثال برای دسترسی به < li class="submenu"> میتوان از سلکتور jQuery همراه با نقطه و نام کلاس استفاده کنیم.

Selector های پیشرفته

jQuery همچنین سلکتور های css پیشرفته تری را برای شما فراهم میکند که میتوان به صورت زیر آنها را دسته بندی کرد:

Descendent Selectors(انتخاب گرهای نزولی)

برای انتخاب تگ هایی که داخل تگ دیگری قرار دارند. فرض کنیم لیستی از لینک ها داریم که داخل یک < ul > با ID برابر navbar قرار دارند. برای انتخاب تگ های a مینویسیم:

Child Selectors (انتخاب گرهای فرزند)

این انتخاب گرها هم مانند Descendent ها هستند با این تفاوت که تگ فرزند بلافاصله بعد از تگ والد می آید. به عنوان مثال برای انتخاب تگ های < p > که در شکل بالا به آن اشاره شد، خواهیم داشت:

Attribute Selectors(انتخاب گرهای خصیصه)

jQury به شما اجازه میدهد که tag را بر این اساس انتخاب کنید که آیا آن تگ خصیصه خاصی دارد یا خصیصه ای با مقدار مشخص دارد یا نه. برخی از این انتخاب گرها عبارتند از:

[attribute] المنت هایی را انتخاب میکند که خصیصه خاصی دارند مثلا کد زیر تمامی تگ های < a > را انتخاب میکند که خصیصه href دارند.

[attribute=“value”] المنت هایی را انتخاب میکند که یک خصیصه با مقدار خاصی دارند. مثلا کد زیر تمام textbox ها در صفحه انتخاب میکند:

[attribute^=“value”] المنت هایی را میابد که دارای خصیصه ای هستند که با یک مقدار خاص شروع میشود. مثلا در کد زیر تمامی لینک ها به آدرسی خارج از سایتتان انتخاب میشود.

[attribute$=“value”] المنت هایی را انتخاب میکند که خصیصه آنها به یک مقدار مشخص ختم میشود مثلا برای چک کردن file extensions

[attribute*=“value”] المنت هایی را انتخاب میکند که خصیصه آنها شامل یک مقدار خاص برابر با value است. مثلا برای پیدا کردن لینک هایی که به یک دامنه خاص اشاره میکنند:

jQuery Filters

jQuery به شما اجازه میدهد انتخاب خود را بر اساس ویژگی های خاصی فیلتر کنید. مثلا :even تنها المنت های فرد در لیست انتخاب شما را برمیگرداند. برخی از این فیلترها عبارتند از:

:even و :odd به ترتیب المنت های فرد و زوج را از لیست انتخابی شما برمیگرداند.

:first و :last اولین و آخرین المنت را از گروه المنت ها برمیگرداند. مثلا اگر بخواهید اولین پاراگراف را در صفحه انتخاب کنیم خواهیم داشت:

:not برای انتخاب المنت هایی که نوع خاصی از selector ها را ندارند. مثلا انتخاب تگ هایی که کلاس navButton ندارند.

یا انتخاب لینک هایی که با http:// شروع نمیشوند.

:has انتخاب المنت هایی که شامل selector دیگری هستند. مثلا برای انتخاب < li > هایی که داخل آنها تگ a وجود دارد مینویسیم:

:contains برای پیدا کردن المنت هایی که شامل متن خاصی هستند. مثلا برای پیدا کردن تمامی لینک هایی که کلمه Click Me در آن نوشته شده، داریم:

:hidden المنت هایی را مشخص میکند که از صفحه پنهان شده اند. مثلا برای المنت هایی که display آنها به none تنظیم شده. در کد زیر ما div هایی که Hidden شده اند را انتخاب و آنها را visible میکنیم:

در قسمت بعدی برخی از توابع اصلی jQuery را برای ایجاد و تغییر در المنت های HTML مرور میکنیم.پایدار باشید.