آموزش JQuery

آموزش JQuery - مرور کلی

 

jQuery چیست؟

jQuery یک کتابخانه جاوا اسکریپت سریع و مختصر است که توسط John Resig در سال 2006 با شعار خوب " کمتر بنویسید، بیشتر بخوانید " ایجاد شده است. 

jQuery ساده سازی حرکت سند HTML، مدیریت رویداد، انیمیشن سازی و تعاملات Ajax  برای توسعه وب سریع است.

jQuery یک ابزار جاوا اسکریپت است که برای ساده سازی وظایف مختلف با نوشتن کد کم طراحی شده، در اینجا لیستی از ویژگی های اصلی و مهمی را که توسط jQuery پشتیبانی شده مشاهده می کنیم: 

  • DOM manipulation (دستکاری DOM ): jQuery انتخاب المان های DOM، عبور از آنها و اصلاح مطالب با استفاده از مرورگر متن باز موتور جستجوگر به نام Sizzle را آسان نموده است. 
  • Handling Event: jQuery یک روش عالی برای ضبط انواع مختلفی از رویدادها، مانند کلیک کاربر بر روی لینک را بدون نیاز به هماهنگی با کد HTML و با استفاده از خود event handler (مدیریت رویداد) ارائه می دهد. 
  • پشتیبانی از AJAX : jQuery به شما در پاسخگویی سایت و توسعه ویژگی های غنی با استفاده از فناوری AJAX بسیار کمک می کند.
  • انیمیشن ها: jQuery همراه با بسیاری از اثرات انیمیشن ساخته شده است که می توانید از آن ها در وب سایت های خود استفاده کنید. 
  • حجم کم: jQuery کتابخانه بسیار کم حجم است و تنها حدود KB 19 می باشد (Minified و gzip).
  • پشتیبانی از Cross Browser :  jQuery دارای پشتیبانی متقابل مرورگر است و به خوبی در IE 6.0+، FF 2.0+، Safari 3.0+، Chrome و Opera 9.0+ کار می کند.
  • آخرین تکنولوژی: jQuery از selectorهای CSS3 و دستور نگارش (syntax) پایه XPath پشتیبانی می کند.

 

چگونه از jQuery استفاده کنیم؟

دو راه برای استفاده از jQuery وجود دارد. 

  • نصب Local: شما می توانید کتابخانه jQuery را در دستگاه محلی خود دانلود کنید و آن را در کد HTML خود قرار دهید.
  • CDN Based Version: می توانید کتابخانه jQuery را به کد HTML خود بطور مستقیم از شبکه تحویل محتوا (CDN) اضافه کنید.

 

نصب Jquery به روش Local

برای دانلود آخرین نسخه موجود، به https://jquery.com/download/ بروید.

در حال حاضر فایل jquery-2.1.3.min.js را در یک پوشه (مانند /jquery )از وب سایت خود دانلود کنید.

مثال

حال می توانید کتابخانه jquery را در فایل HTML خود به صورت زیر قرار دهید:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

 

 

نسخه مبتنی بر CDN

می توانید کتابخانه jquery را مستقیما به کد HTML از شبکه تحویل محتوا (CDN) اضافه کنید. گوگل و مایکروسافت مطالب را برای آخرین نسخه ارائه می کنند. 

ما در این آموزش از کتابخانه نسخه CDN Google استفاده می کنیم.

مثال

حال اجازه دهید مثال بالا را با استفاده از کتابخانه jquery از Google CDN بازنویسی کنیم.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

 

 

چگونه توابع کتابخانه jquery  را فراخوانی کنیم؟

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

اگر می خواهید یک رویداد بر روی صفحه شما کار کند، باید آن را در داخل تابع  $(document).ready() فراخوانی کنید. تمام موارد به محض بارگذاری DOM و پیش از بارگیری محتویات صفحه لود می شوند. برای انجام این کار یک رویداد آماده برای سند را به صورت زیر ثبت می کنیم:

$(document).ready(function() {
   // do stuff when DOM is ready
});

برای فراخوانی هر تابع کتابخانه jquery ، مانند کد های زیر از تگ های script (اسکریپت) HTML استفاده کنید.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

 

نحوه استفاده از اسکریپت های سفارشی

بهتر است کد اصلی را در فایل جاوا اسکریپت سفارشی: custom.js به صورت زیر بنویسیم.

/* Filename: custom.js */
$(document).ready(function() {

   $("div").click(function() {
      alert("Hello, world!");
   });
});

اکنون می توانیم فایل custom.js را در فایل HTML به صورت زیر وارد نماییم.Code 

که نتایج زیر را به همراه دارد:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

 

استفاده از چندین کتابخانه

می توانید بدون در هم آمیختن کتابخانه ها از چندین کتابخانه به صورت همزمان استفاده کنید. برای مثال می توانید از کتابخانه های jquery و MooTool جاوا اسکریپت استفاده نمایید. می توانید روش jQuery noConflict را برای جزئیات بیشتر بررسی کنید. 

گام بعدی چیست؟

اگر نمونه های فوق را درک نکرده اید نگران نشوید. در فصل بعد آنها را درک خواهید کرد. در فصل بعدی چند مورد مفاهیم اساسی که از جاوا اسکریپت معمولی آمده را پوشش دهد.   

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش JQuery

Learn JQuery

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...