معرفی کتابخانه jQuery (جی کوئری) و موارد استفاده از آن (همراه با مثال)

jQuery (جی کوئری) یک کتابخانه جاوا اسکریپت منبع باز است. این کتابخانه بسیار سبک است و زمانی که مجبوریم کد کمتری بنویسیم و بهره وری بیشتری داشته باشیم، به ما کمک می کند. در دنیای برنامه نویسی استفاده از کتابخانه ها بسیار مهم است زیرا بهره وری شما را بالا می برد و باعث بهبود سرعت عمل شما می شود. در این مقاله ما به معرفی معروف ترین کتابخانه جاوا اسکریپت می پردازیم که بسیاری از کارهای شما را آسان می کند.

jQuery برای انجام یکسری وظایف رایج که به خطوط زیادی از کد جاوا اسکریپت نیاز دارند، استفاده می شود. این روش را می توان با یک خط کد فراخوانی کرد. بنابراین استفاده از جاوا اسکریپت در وب سایت شما آسان می شود. وب سایت Skillcrush در توضیح تفاوت بین Javascript و jQuery می گوید: "جاوا اسکریپت یک زبان برنامه نویسی مستقل است، در حالی که jQuery مجموعه ای از کد جاوا اسکریپت است (نه زبان خودش)."

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

وب سایت EduCBA

چرا جی کوئری را انتخاب کنیم؟

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

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

کتابخانه jQuery چه کاری انجام می دهد؟

جی کوئری فریم ورکی است که با جاوا اسکریپت ساخته شده است. این ابزار کارآمد به توسعه دهندگان وب کمک می کند تا عملکرد های اضافی را به وب سایت خود اضافه کنند. همچنین محبوب ترین کتابخانه جاوا اسکریپت است که برای دستکاری درخت HTML DOM استفاده می شود. همچنین، مدیریت رویداد ها، انیمیشن CSS و Ajax را ساده می کند.

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

کتابخانه jQuery برای ارتباط با عناصر HTML در مرورگر از طریق DOM استفاده می شود. شما می توانید jQuery را به HTML خود اضافه کنید و با دانلود کتابخانه jQuery از وب سایت jQuery.com یا با گنجاندن jQuery از CDN شروع به استفاده از آن کنید. با کمک کتابخانه جی کوئری عناصر HTML را انتخاب می کنید و اعمال مختلفی را روی آن ها انجام می دهید.

نحو یا Syntax:

$(selector).action()

در اینجا علامت «$» برای تعریف/دسترسی به jQuery، «انتخابگر» یا selector برای یافتن عناصر و action «عمل» برای انجام یک عمل روی این عناصر استفاده می‌شود.

بیایید یک مثال ساده برای اضافه کردن یک دکمه و اضافه کردن رنگ پس زمینه به آن در کد HTML خود با استفاده از jQuery ببینیم.

<!DOCTYPE html>
<html>
  <head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script>
    <script>
    $(document).ready(function(){
    $("button").click(function(){
    alert("Background color = " + $("button").css("background-color"));
    });
    });
    </script>
  </head>
  <body>

  <h2>jQuery Example</h2>
  <button style="background-color:red">Submit</button>

  </body>
</html>

خروجی کد بالا تصویر زیر می باشد:

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

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

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

حالا بیایید یک کد برنامه برای اضافه کردن یک متن در html با استفاده از jQuery را ببینیم.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

});
</script>
</head>
<body>

<p>Simple Text.</p>
<button id="btn1">Append text</button>
</body>
</html>

خروجی کد بالا به این صورت می باشد:

نتیجه گیری

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

منبع: learningjquery.com