کاربرد JQuery در طراحی صفحات وب چیست؟

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


کاربرد jQuery  در طراحی سایت

در دنیای طراحی وب، تمام وب سایت‌ها و صفحات وب از دو بخش server-side (بخش سرور) و client-side (بخش کاربری) تشکیل شده‌اند. بخش کاربری قسمتی از سایت است که ما می‌توانیم به کمک مرورگرهای مختلف آن را مشاهده کنیم. برای طراحی بخش کاربری سایت از زبان‌های نشانه‌ گذاری مانند HTML، CSS و همچنین از زبان برنامه نویسی جاوا اسکریپت و کتابخانه معروف آن یعنی JQuery استفاده می‌شود. برای درک کاربرد JQuery ابتدا باید آشنایی اولیه با زبان جاوا اسکریپت داشته باشیم.

 بیشتر بخوانید:

javascript

زبان جاوا اسکریپت چیست؟

می‌توان گفت، صفحات وبی که صرفا با زبان‌های نشانه گذاری HTML و CSS طراحی شده‌اند، پویا (dynamic) نمی‌باشند، لذا ما برای طراحی صفحات وب پویا به زبان برنامه نویسی جاوا اسکریپت نیاز خواهیم داشت. در ادامه، بخش کوچکی از کاربردهای فراوان جاوا اسکریپت برای درک بهتر کاربرد جاوا اسکریپت آورده شده است. در مثال زیر، چند خط کد ساده جاوا اسکریپت در داخل تگ‌های HTML قرار داده شده است که می‌توانیم به کمک این کدها کاربرد زبان جاوا اسکریپت را بهتر درک کنیم.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq</title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
    <button    id="btn">click</button>
    <p id="p1">pagraph</p>
    <script>
        $("#btn").click(function(){
        $(".p1").hide();
    })
    </script>
</body>

 آشنایی بیشتر با جاوا اسکریپت:

 کدهای مربوط به جاوا اسکریپت داخل تگ های </script><script> قرار داده شده‌اند. این کدها چه کاری انجام می‌دهند؟ به وسیله این کدها در صورت کلیک بر روی دکمه button می‌توانیم محتوی تگ <p> که شامل paragraph می‌شود را حذف کنیم و این همان کاری است که ما با زبان‌های نشانه گذاری HTML و CSS قادر به انجام آن نیستیم و برای اجرای این دستورالعمل نیاز به زبان برنامه نویسی مانند جاوا اسکریپت داریم. 

تا به این جای مقاله ما تا حدودی با کاربرد زبان جاوا اسکریپت در صفحات وب آشنا شدیم و اکنون می‌توانیم کاربرد کتابخانه JQuery را بهتر درک کنیم.

 JQuery چیست؟

jquery

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

JQuery همچنین به برنامه نویسان این امکان را می‌دهد که پلاگین‌هایی برای کتابخانه جاوا اسکریپت ایجاد کنند. از دیگر امکاناتی که جی‌ کوئری به توسعه دهندگان می‌دهد این است که تکه برنامه‌های سطحِ پایینِ مبادله‌ای (ارتباط مرورگر با کاربر) یا انیمیشنی و حتی افکت‌های پیشرفته و سطح بالا و اشیاء فرضی را نیز ایجاد نمایند.

سینتکس کلی JQuery

سینتکس کلی JQuery به صورت زیر است:

$("p").click(function(){
  // action goes here!!
});

برخی از کاربردهای jquery به شرح زیر است:

  • قابلیت دستکاری و تغییر خصوصیات CSS
  • متحرک سازی و قرار دادن افکت روی عناصر وب سایت
  • ساخت پلاگین‌ها
  • کنترل آسان Events
  • ایجاد افکت و حرکات animation
  • برنامه‌های کوچک سودمند
  • کار با Ajax

کاربرد لایبرری (Library) در برنامه نویسی وب

اگر با مفهوم لایبرری آشنا نباشیم، شاید در درک کاربرد JQuery دچار مشکل شویم. در تعریف لایبرری (Library) می‌توان گفت که لایبرری‌ها شامل یک سری کدهای پرکاربرد هستند که برنامه نویس یا برنامه نویسانی قبلا آن‌ها را کد نویسی و کامپایل کرده‌اند تا ما بتوانیم به وسیله این کدهای آماده که کتابخانه یا لایبرری نامیده می‌شوند، یک سری ویژگی‌ها یا دستورات را به پروژه خود اضافه کنیم. استفاده از لایبرری‌ها باعث می‌شود که ما از کدهای کمتری استفاده کنیم و همچنین در وقت خود صرفه جویی کنیم. (برای دانلود انواع لایبرری‌ها در زبان‌های برنامه نویسی مختلف می‌توانید از سایت Github استفاده کنید)
برای مثال اگر قصد داشته باشیم در صفحه وب خود از یک  swipe menu استفاده کنیم، به جای اینکه از ابتدا عمل کد نویسی را انجام دهیم، می‌توانیم با استفاده از لایبرری جی کوئری و یکی از پلاگین‌های این کتابخانه، در مدت زمان کمتری و در صورت نیاز با اعمال تغییراتی به هدف خود برسیم.  

فرا بگیرید:

آموزش CSS

آموزش HTML مقدماتی

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