jQuery مقدماتی | قسمت اول: مقدمه ای بر jQuery

در این دوره ی آموزشی با کتابخانه ی jQuery آشنا می شوید و یاد می گیرید که جی کوئری چیست و چطور کار با آن را شروع کنید. jQuery یک کتابخانه بزرگ و قدرتمند جاوا اسکریپت است که به کمک آن می توانید بسیاری از وظایفی را که اسکریپت ها انجام می دهند، به سادگی انجام دهید.

جی کوئری چیست؟

jQuery یک کتابخانه غنی جاوا اسکریپت است که بر اساس قاعده «کد کم تر، کار بیش تر» بنا نهاده شده است. از API ها جهت ساختن اسناد HTML و نگهداری آن ها استفاده می کند و همین طور وظایفی مانند مدیریت رویدادها، افکت های تعاملی به صورت انیمیشن در همه مرورگرهای نوین از جمله chrome ،FireFox ،safari و... از جمله مواردی هستند که توسط jQuery انجام می شود.

همچنین jQuery این امکان را به شما می دهد تا بتوانید به سادگی و به سرعت برنامه های بر پایه Ajax بسازید. شرکت های بزرگی هم چون گوگل، مایکروسافت و IBM از jQuery در محصولات خود استفاده می کنند. حتما بتوانید تصور کنید که jQuery چقدر محبوب و قدرتمند است؟

jQuery توسط John Resig در سال 2006 ساخته شد. این کتابخانه در حال حاضر توسط گروهی توسعه دهندگان توسعه داده می شود و تحت عنوان یک پروژه open source یا مبنع باز نگهداری می شود. وقتی که از jQuery استفاده می کنید، به میزان زیادی در کار و زمان صرفه جویی می کنید.

در سری آموزشی jQuery نکات و ویژگی های مختلف jQuery بررسی می شوند و مباحث آن از پایه تا پیشرفته ارائه خواهند شد.

آن چه می توانید با jQuery انجام دهید

• به راحتی می توانید عناصر DOM یا HTML را انتخاب و آن ها و atrribute های مرتبط با آن ها را دستکاری کنید.
• می توانید از افکت هایی هم چون show ،hide و slide ها استفاده کنید.
• می توانید انیمیشن های CSS پیچیده را با کد کمتری بسازید.
• می توانید از Ajax جهت تبادل داده ها بین کاربر و سرور به صورت آسنکرون استفاده کنید.
• می توانید درخت DOM را جهت یافتن عنصری خاص به راحتی پیمایش کنید.
• می توانید چند کار روی یک عنصر را در یک خط کد انجام دهید.
• می توانید ابعاد (CSS) عناصر DOM را تنظیم کنید و یا مقادیر آن را با استفاده از jQuery دریافت کنید.

این لیست این جا به پایان نمی رسد، موارد دیگری هستند که شما می توانید با jQuery انجام دهید، در قسمت های بعدی در رابطه با آن ها خواهید اموخت.

مزیت های استفاده از jQuery

اگر با jQuery آشنا نیستید، احتمالا از اینکه چقدر این کتابخانه ویژه و خاص است، شگفت زده می شوید. در لیست زیر تعدادی از مزیت هایی را که می توانید برای jQuery متصور شوید، مشاهده می کنید:

• صرفه جویی قایل توجه در زمان: می توانید با استفاده از jQuery و بهره گیری از افکت های آماده و مکانیزم Selector ها بخش قابل توجهی را از زمان و کار توسعه کاهش دهید و روی بقیه جنبه های کار توسعه پروژه متمرکز شوید.
• ساده سازی کارهای متداول جاوا اسکریپت: با استفاده از jQuery می توانید بسیاری از کارهای متداول در جاوا اسکریپت را به روش های ساده تری انجام دهید. برای نمونه می توان به استفاده از Ajax در jQuery، که جهت به روزرسانی محتوای صفحه وب بدون رفرش کردن استفاده می شود، اشاره کرد.
• کار کردن آسان با jQuery: کار با jQuery بسیار آسان است. شما می توانید با یک دانش پایه ای از HTML، CSS و جاوا اسکریپت از jQuery بهره ببرید.
• سازگاری با مرورگرها: jQuery با در نظر گرفتن مرورگرهای مدرن ساخته شده و با گروه بزرگی از مروگرهای مدرن مانند Chrome Safari ،FireFox ،Internet Explorer و... سازگار است.
• کاملا رایگان: بهترین قسمت مزیت jQuery، رایگان بود دانلود و استفاده از این کتابخانه است.

نکته: در جاوا اسکریپت برای انتخاب عناصر باید چند خط کد بنویسید اما در jQuery می توانید با استفاده از مکانیزم Selector ها درخت DOM را پیمایش کنید و هر نوع تغییری را اجرا کنید.

این سری آموزش چه مواردی را پوشش می دهد؟

سری آموزشی jQuery همه مباحث و ویژگی های این کتابخانه غنی را پوشش می دهد. شما در سری آموزش jQuery با همه ی موضوعات از پایه تا موارد پیشرفته و مواردی مانند Selector ها، رویدادها و همین طور متدهای مربوط به افکت ها که به تعامل بهتر کاربر با برنامه کمک می کند، آشنا خواهید شد. ویژگی های جالبی مانند اتصال چند متد، اعمال چند تغییر روی عناصر، تغییر DOM مانند تنظیم محتوا یا دریافت محتوای عنصر، حذف و اضافه کردن عناصر یا attribute های آن ها و دریافت یا تنظیم ویژگی های CSS برای عناصر مانند عرض و ارتفاع و... را نیز در این دوره ی آموزشی فرا می گیرید.

در پایان با استفاده از ویژگی «فیلتر کردن عنصر انتخاب شده» عناصر داخل یک عنصر و یا عناصر والد یک عنصر را در درخت DOM پیمایش می کنید، Ajax را پیاده سازی می کنید تا اطلاعات کاربر و سرور بدون لود صفحه مبادله شود و همینطور می آموزید که چطور از تداخل بین کتابخانه های دیگر جاوا اسکریپت و jQuery جلوگیری کنید.

نکته: برای هر مبحث، مثال های واقعی آورده شده است که به شما کمک می کنند تا مطالب مربوط به آن مبحث را فراگیرید. می توانید آن ها را در ویرایشگرهای مختلف کد تست و نتیجه را مشاهده کنید.

شروع کار با jQuery و دانلود آن

جهت کار با jQuery ابتدا باید آن را دانلود و در کد خود وارد کنید. برای این کار 2 نسخه تهیه شده است. یک ورژن فشرده که هنگام Deploy و انتشار برنامه می توانید از آن استفاده کنید و یک نسخه غیرفشرده که هنگام توسعه می توانید از آن بهره ببرید. در واقع ورژن غیر فشرده جهت Debugging مناسب تر است، اما مسلما جهت بارگزاری صفحه و کاربری بهتر هنگام انتشار نهایی باید از نسخه فشرده شده بهره ببرید. لینکی که می توانید jQuery را از آنجا دانلود کنید: https://jQuery.com/download/

زمانی که jQuery را دانلود کردید، مشاهده می کنید که یک فایل با پسوند js. دانلود شده است. دلیل این موضوع این است که jQuery در واقع با جاوا اسکریپت نوشته شده و یک کتابخانه جاوا اسکریپت است. به همین منظور هنگام استفاده از فایل jQuery باید با استفاده تگ <script> آن را در کد HTML خود وارد کنید. در کد زیر نمونه ای از این کار را مشاهده می کنید:

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <meta charset="utf-8">
    <title>Simple HTML Document</title>
    <link rel="stylesheet" href="CSS/style.CSS">
    <script src="js/jQuery-1.11.3.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</HTML>

همیشه باید فایل jQuery را قبل از کدها و فایل هایی که خودتان با آن ساخته اید، اضافه کنید. در غیر این صورت jQuery API هنگامی که کد شما می خواهد به آن دسترسی داشته باشد، در دسترس نخواهد بود.

نکته: همان طور که در کد بالا مشاهده نمودید ما از اضافه کردن "type="text/javascript در تگ <script> خودداری کردیم. به این دلیل که در HTML5 به صورت پیش فرض، جاوا اسکریپت زبان اسکریپتی مرورگر و HTML5 است. اما شما اگر می خواهید می توانید آن را به تگ خود اضافه کنید تا قابلیت خوانایی کد را افزایش دهید.

 وارد کردن jQuery به کد با استفاده از CDN

شیوه ی دیگری که می توانید از jQuery بهره ببرید به استفاده از CDN مربوط می شود. شما می توانید با استفاده از لینک CDN و بدون آن که خودتان فایل jQuery را میزبانی و آن را دانلود کنید از jQuery استفاده کنید.

زمان بارگذاری کمتر، مزیت استفاده از CDN است. در واقع با روش CDN، کتابخانه jQuery در سرورهای مختلف دنیا میزبانی می شود و زمانی که فردی درخواست دسترسی به آن را داشته باشد، نزدیک ترین سرور به محل جغرافیایی آن فرد، درخواست موردنظر او را انجام می دهد.

مزیت دیگری که وجود دارد اینست که اگر فردی از سایت دیگری استفاده کرده باشد که از jQuery بهره ببرد، با مراجعه به سایت شما دیگر نیازی به بارگذاری فایل jQuery ندارد زیرا قبلا یک کپی از jQuery را دریافت کرده و در واقع روی مرورگر کاربر کش شده است.

آدرس CDN برای jQuery توسط MaxCdn فراهم شده است: <script src="https://code.jQuery.com/jQuery-1.12.4.min.js"></script>

شما همچنین می توانید از لینک پیش فرض Google یا Microsoft بهره ببرید.

ایجاد اولین صفحه ی وب قدرتمند با استفاده از jQuery

حالا که اهداف و ویژگی های jQuery را آموختید و مشاهده کردید که چطور باید آن را در کد خود وارد کنید، زمان آن فرا رسیده است که jQuery را در یک مثال واقعی بکار گیرید.

در این قسمت ما یک کد jQuery را به عنوان نمونه اجرا می کنیم که رنگ پیش فرض متن را از قرمز به مشکی تغییر می دهد. در کد زیر می توانید این مثال را مشاهده کنید:

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <meta charset="utf-8">
    <title>My First jQuery Powered Web Page</title>
    <link rel="stylesheet" href="CSS/style.CSS">
    <script src="js/jQuery-1.11.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("h1").CSS("color", "#0088ff");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</HTML>

در کد بالا ما زمانی که Document در حالت یا رویداد Ready قرار گرفته باشد، با استفاده از selector ها تگی را انتخاب کردیم و با استفاده از متد ()CSS ویزگی مربوط به رنگ متن آن را تغییر دادیم.

در این قسمت دانستید که جی کوئری چیست و با آن می توان چه کارهایی انجام داد. همچنین اولین صفحه ی وب خود را با jQuery ایجاد کردید. در قسمت های بعدی درباره رویدادها، Selector ها و متدها مطالب بیش تری خواهید آموخت.