JQuery چیست؟

JQuery چیست؟

JQuery یک کتابخانه جاوااسکریپتی سبک و سریع است که شعارش “کمتر بنویس و بیشتر انجام بده” و هدفش استفاده آسان و سریع از امکانات جاوااسکریپت در وب سایت است. برای یادگیری JQuery باید اطلاعات پایه ای در مورد HTML، CSS و JavaScript داشته باشید.
جی کوئری کارهایی که نیازبه کدنویسی های فراوان جاوااسکریپت دارد را به گونه ای ساده می کند که می توانید با یک خط کد همه آنها را انجام دهید.

کتابخانه JQuery شامل امکانات زیر می باشد:

  • کار با HTML/DOM
  • کار با CSS
  • توابع و رویدادهای HTML
  • انیمیشن و افکت ها
  • ای جکس(AJAX)
  • و امکانات دیگر
نکته: علاوه بر این امکانات، جی کوئری پلاگین های(قطعه کدهای آماده) فراوانی دارد که توسط خود توسعه دندگان نوشته شده و هر روز به تعداد آنها افزوده می شود.

 
چرا JQuery؟

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

تعدادی از بزرگترین شرکتهای وب که از JQuery استفاده می کنند عبارتند از:

  • گوگل
  • مایکروسافت
  • آی بی ام
  • نت فلیکس
نکته: جی کوئری تقریبا در تمام مرورگرها کار می کند.

 
نحوه استفاده از جی کوئری

برای استفاده از Jquery در صفحات وب می توانید از روشهای زیر استفاده کنید:

  • دانلود کتابخانه JQuery از سایت jquery.com
  • اضافه کردن جی کوئری به صفحه با استفاده از CDN

دانلود JQuery

دو نسخه از جی کوئری برای دانلود وجود دارد:

  • Production Version: این نسخه برای استفاده نهایی در وبسایت تولید شده است زیر از نظر حجمی کوچک شده و فشرده شده است.
  • Development Version: این نسخه برای زمان تست و توسعه وب سایت است زیرا کدهای درون آن بعلت فشرده نشدن خوانا بوده و قابل اشکال زدایی می باشد.

هردو نسخه از سایت jquery.com قابل دانلود می باشد.

نحوه استفاده

کتابخانه Jquery یک فایل از نوع JavaScript است و بوسیله تگ

نکته: باید فایل دانلود شده را در همان پوشه ای که آدرس دهی می کنید، قرار دهید. در مثال بالا فایل باید در پوشه ی jsFiles قرار گیرد.

روشهای جایگزین دانلود

اگر نمی خواهی جی کوئری را دانلود کرده و در هاست وبسایتتان قرار دهید می توانید از CDN(Content Delivery Network) استفاده کنید.

گوگل و مایکروسافت هردو این امکان را فراهم آورده اند. برای استفاده از جی کوئری روی سرورهای گوگل یا مایکروسافت می توانید بصورت زیر عمل کنید:

Google CDN:

Microsoft CDN:

یکی از بزرگترین نتایج استفاده از CDN این است که کاربری که قبلا از یک سایتی که از CDN استفاده کرده است، بازدید کرده اگر از سایت شما نیز بازدید کند چون قبلا جی کوئری سایت قبلی در سیستم کاربر cache شده است، دیگر برای سایت شما دانلود نشده و سرعت بارگزاری سایت بالا می رود.
JQuery Syntax

قالب دستوری جی کوئری به گونه ای ایجاد شده تا بتوان کنترلهای html را یافته و عملیاتی را بر روی آنها انجام داد.

قالب دستوری پایه ای بصورت $(selector).action() می باشد

  • علامت $ برای دسترسی به کتابخانه JQuery
  • بخش “(selector)” که در آن نام کنترل، شناسه ی آن یا یک query برای یافتن کنترلی که می خواهیم عملیات را بر روی آن انجام دهیم، قرار می گیرد.
  • بخش “.action()” که عملیاتی که می خواهیم بر روی کنترل تعریف شده در بخش “(selector)” انجام دهیم را در آن می نویسیم.

برای مثال:

  • $(this).hide() : کنترل جاری را که this به آن اشاره می کند مخفی می کند.
  • $(“p”).hide() : تمام کنترلهای

    را مخفی می کند.

  • $(“.test”).hide() : تمام کنترلهایی که دارای کلاس test هستند، مخفی می کند.
  • $(“#test”).hide() : کنترلی که دارای ID با نام test هست را مخفی می کند.

رویداد Document Rready

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

$(document).ready(function(){

// jQuery methods go here…

});

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

در زیر مواردی است از اینکه دستورات قبل از بارگزاری کامل صفحه انجام شده و موجب خطا می شود:

  • مخفی کردن کنترلی که هنوز ایجاد نشده است.
  • گرفتن اندازه ی تصویری که هنوز بارگزاری نشده است.
نکته:تیم توسعه ی جی کوئری یک رویداد مختصرتر برای پیاده سازی document ready ایجاد کرده است:
$(function(){

// jQuery methods go here…

});

 

انتخاب کننده های جی کوئری(JQuery Selectors)

انتخاب کننده ها مهمترین بخش کتابخانه جی کوئری است. انتخاب کننده ها این امکان را به شما می دهد که کنترلهای html را انتخاب کرده و بر روی آنها عملیاتی را انجام دهید.

بوسیله انتخاب کننده ها می توانید کنترلها را براساس id، کلاس، نوع، خصوصیات، مقادیر و … آنها انتخاب کنید. تمام انواع انتخاب کننده ها در JQuery با علامت $() مشخص می شوند.

انتخاب بر اساس کنترل

انتخاب کننده ها میتوانند بر اساس نام تگ کنترل را پیدا کنند.

می توانید تمام تگ های

روی صفحه را با دستور زیر انتخاب کنید:

$(“p”)

مثال: در قطعه کد زیر اگر کاربر بر هر کنترل button روی صفحه کلیک کند تمام کنترلهای

مخفی می شوند.

$(document).ready(function(){

$(“button”).click(function(){

$(“p”).hide();

});

});

 

انتخاب بر اساس id

برای یافتن یک کنترل براساس id باید id آنرا همراه با # بنویسید:

$(“#test”)

مثال: در قطعه کد زیر اگر کاربر بر هر کنترل button روی صفحه کلیک کند تمام کنترلهایی که id با نام test دارند مخفی می شوند.

$(document).ready(function(){

$(“button”).click(function(){

$(“#test”).hide();

});

});

 

انتخاب بر اساس کلاس

جی کوئری می تواند کنترل را بر اساس کلاس آن پیدا کند.

برای یافتن یک کنترل براساس id باید id آنرا همراه با . بنویسید:

$(“.test”)

مثال: در قطعه کد زیر اگر کاربر بر هر کنترل button روی صفحه کلیک کند تمام کنترلهایی که کلاسی با نام test دارند مخفی می شوند.

$(document).ready(function(){

$(“button”).click(function(){

$(“.test”).hide();

});

});

 

مثالهایی دیگر از کاربرد انتخاب کننده ها

دستور عملکرد
$(“*”) انتخاب تمام کنترلها
$(this) انتخاب کنترل جاری
$(“p.intro”) انتخاب همه کنترلهای از نوع

که دارا کلاس intro هستند

$(“p:first”) انتخاب اولین کنترل

$(“ul li:first”) انتخاب اولین
  • از اولین
    • $(“ul li:first-child”) انتخاب اولین
    • های تمام کنترلهای
      • $(“[href]”) انتخاب تمام کنترلهایی که دارای خصوصیت href هستند
        $(“a[target=’_blank’]”) انتخاب تمام کنترلهای از نوع که خصوصیت target آنها برابر با “_blank” باشد
        $(“a[target!=’_blank’]”) انتخاب تمام کنترلهای از نوع که خصوصیت target آنها برابر با “_blank” نباشد
        $(“:button”) انتخاب تمام کنترلهای از نوع
        $(“tr:even”) انتخاب تمام سطرهای زوج جداول
        $(“tr:odd”) انتخاب تمام سطرهای فرد جداول

        برای دریافت اطلاعات بیشتر درباره انتخاب کننده ها می توانید به سایت w3school.com مراجعه کنید.

        رویدادها (Events) در JQuery

        پاسخی که صفحات وب به اقدامات بازدیدکنندگان بر روی آنها، می دهند رویداد نامیده می شود.

        یک رویداد نشاندهنده لحظه ای است که اتفاقی رخ میدهد.

        برای مثال:

        • حرکت دادن موس روی یک کنترل(mouseMove)
        • انتخاب یکی از گزینه های radio button
        • کلیک کردن بر روی یک کنترل

        واژه ی “fires”(رخ دادن) اغلب برای رویدادها استفاده می شود. مثلا: “رویداد keypress زمانی که یک کلید فشرده می شود اتفاق می افتد(keypress fires).

        در ذیل تعدادی از رویدادهای مشهور DOM وجود دارد:

        Document/Window Events Form Events Keyboard Events Mouse Events
        load submit keypress click
        resize change keydown dblclick
        scroll focus keyup mouseenter
        unload blur
        mouseleave

        قالب دستوری JQuery برای پیاده سازی رویداد متدها(Event Methods)

        در جی کوئری برای بسیاری از رویدادهای Dom جایگزینی وجود دارد.

        برای ایجاد رویداد متد کلیک بر روی تمام پاراگرافهای روی صفحه، بصورت زیر عمل می کنیم:

        $(“p”).click();

        مرحله بعدی این است که تعیین کنیم وقتی که رویداد رخ داد چه عملی باید انجام شود.باید یک تابع به رویداد موردنظر اضافه کرد:

        $(“p”).click(function(){

        //عمل موردنظر اینجا قرار می گیرد

        });

        پراستفاده ترین رویداد متدهای JQuery

        $(document).ready()

        این رویداد متد به ما اجازه می دهد تا بتوانیم به محض این که صفحه بطور کامل بارگزاری شد، کاری را انجام دهیم.

        Click()

        قابلیت تعیین یک تابع به رویداد کلیک یک کنترل را دارد.

        برای دریافت اطلاعات کامل درباره ی رویدادمتدهای JQuery می توانید به سایت w3school.com مراجعه کنید.

         

        منبع:

        http://w3schools.com

        با ما باشید