مروری بر jQuery – آموزش jQuery

چهارشنبه ۱۷ مرداد ۱۳۹۷
بازدید ۱,۷۳۰ نفر
آرتین
(9 امتیاز از 2 رای)
Loading...

تصویر jquery-overview_2682 مروری بر jQuery - آموزش jQuery

مروری بر jQuery

jQuery چیست؟

jQuery یک کتابخانه جاوا اسکریپت سریع و سبک می باشد که در سال 2006 توسط John Resig با شعار “نوشتن کمتر، انجام بیشتر” ساخته شده است. jQuery کار پردازش رویداد، انیمشین سازی و تعاملات Ajax را برای توسعه سریع وب، ساده می کند. در زیر ویژگی های مهم و اصلی که توسط jQuery پشتیبانی می شوند را مشاهده می کنید:

امکان دستکاری DOM: در واقع با jQuery به راحتی می توانید عناصر DOM را انتخاب کنید، با آن ها ارتباط برقرار کرده و محتوای آنها را با استفاده از موتور جستجوگر متن باز به نام Sizzle تغییر دهد.
مدیریت رویدادها: jQuery به ما اجازه می دهد تا رویداد های بسیاری از رویدادهای که ممکن است در صفحه اتفاق بیافتد را به راحتی مدیریت کنیم.
پشتیبانی از AJAX: با استفاده از تکنولوژی AJAX می توانید یک سایت واکنش گرا با ویژگی های بسیار ایجاد کنید.
انیمیشن ها: jQuery متدهای درون ساخت زیادی برای ایجاد و مدیریت انیمیشن ها دارد.
سبک وزن بودن: jQuery کتابخانه بسیار سبک وزن است – حدود 19kb در اندازه (Minified و gzip).
پشتیبانی از انواع مرورگرها: jQuery به خوبی در انواع مرورگرها مانند ، FF 2.0+، Safari 3.0+، Chrome و Opera 9.0+ کار می کند.
آخرین تکنولوژی: jQuery از انتخابگرهای CSS3 و قواعد نحوی XPath پشتیبانی می کند.

نحوه استفاده از jQuery؟

در این جا دو راه برای استفاده از کتابخانه jQuery وجود دارد که عبارت اند از:

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

نصب jQuery به صورت محلی

به آدرس https://jquery.com/download رفته و آخرین نسخه آن را دانلود کنید.
سپس فایل دانلود شده jquery-2.1.3.min.js را در داخل یکی از پوشه های وب سایت خود قرار دهید.

مثال

<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>

<html>

<head>

<title>The jQuery Example</title>

</script>

$(document).ready(function() {

document.write("Hello, World!");

});

</script>

</head>

<body>

<h1>Hello</h1>

</body>

</html>

نتیجه اجرای کد بالا

Hello, World!

1	Hello, World!

نصب از روی CDN

شما می توانید آخرین نسخه کتابخانه jQuery را از CDN (شبکه تحویل محتوا) به سند خود اضافه کنید. در این آموزش ما از نسخه موجود در 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>

<html>

<head>

<title>The jQuery Example</title>

src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

</script>

$(document).ready(function() {

document.write("Hello, World!");

});

</script>

</head>

<body>

<h1>Hello</h1>

</body>

</html>

امتحان کنید

نتیجه اجرای کد بالا

Hello, World!

1	Hello, World!

نحوه فراخوانی توابع کتابخانه ای jQuery

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

برای انجام این کار، یک رویداد آماده برای سند را به صورت زیر ثبت می کنیم:

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

$(document).ready(function() {

// do stuff when DOM is ready

});

برای فراخوانی هر تابع کتابخانه ای jQuery، می توانید از تگ های اسکریپت 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

<html>

<head>

<title>The jQuery Example</title>

src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

</script>

$(document).ready(function() {

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

});

</script>

</head>

<body>

Click on this to see a dialogue box.

</div>

</body>

</html

امتحان کنید

نتیجه اجرای کد بالا

Click on this to see a dialogue box.

1	Click on this to see a dialogue box.

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

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

/* Filename: custom.js */
$(document).ready(function() {
   $("div").click(function() {
      alert("Hello, world!");
   });
});

/* Filename: custom.js */

$(document).ready(function() {

$("div").click(function() {

alert("Hello, world!");

});

حال شما می توانید فایل custom.js را به سند 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" src = "/jquery/custom.js">
      </script>
   </head>
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

<html>

<head>

<title>The jQuery Example</title>

src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

</script>

</script>

</head>

<body>

Click on this to see a dialogue box.

</div>

</body>

</html>

نتیجه اجرای کد بالا

Click on this to see a dialogue box.

1	Click on this to see a dialogue box.

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

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

JQuery - مبانی و مفاهیم JQuery - مقدمه