jQuery چیست ؟

jQuery یک کتابخانه استاندارد و آماده شامل تعدادی متد و توابع نوشته شده به زبان javascript می باشد . از توابع و متدهای این کتابخانه برای کار با عناصر و تگ های موجود در صفحات HTML , ASP.Net و یا PHP استفاده می شود . به طور کلی با استفاده از این متدهای از پیش تعریف شده ، می توانید تغییراتی را در عناصر و تگ های HTML ایجاد کرده و یا نحوه نمایش آنها را تغییر دهید . برای مثال می توانید یک عنصر HTML را با کلیک بر روی یک دکمه فرمان پنهان کرده و یا در صورت مخفی بودن آن را نمایش دهید.

زبان jQuery دارای یک شعار معروف است. این شعار می گوید کمتر بنویسید ، بیشتر انجام دهید ( write less , do more ) . به طور کلی کتابخانه jQuery شامل موارد زیر می باشد:

در استفاده از jQuery شما نیاز ندارید برای انجام کارهای مورد نظرتان یک تابع جدید بنویسید . فقط کافی است عنصر مورد نظر خود را انتخاب کرده و سپس متد مورد نظر را فراخوانی نموده تا آن عنصر را تغییر دهد.

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

 

HTML

CSS

javascript

 

نحوه استفاده از کتابخانه jQuery :

همانطور که گفتیم ، jQuery دارای یک کتابخانه استاندارد و آماده می باشد . شما بایستی برای استفاده از jQuery ، فایل این کتابخانه را به صفحه خود متصل کنید. کتابخانه jQuery در یک فایل مجزا که از نوع فایل های javascript و با نام jQuery.js است، نگهداری می شود. شما برای اتصال فایل این کتابخانه به صفحه مورد نظرتان از 2 روش می توانید استفاده کنید:

دانلود فایل کتابخانه jQuery بر روی کامپیوتر و یا سرور سایت خودتان و سپس اتصال آن به صفحه.

استفاده از فایل کتابخانه jQuery بر روی سرورهای آنلاین مثل سرور Microsoft یا Google.

در ادامه به معرفی 2 روش فوق می پردازیم .

روش اول : در روش اول شما بایستی جدیدترین فایل کتابخانه jQuery را از سایت www.jQuery.com دانلود کرده و سپس آن را در پوشه اصلی سایت خود قرار دهید . سپس با استفاده از یک تگ < Script > که در قسمت < Head > صفحه قرار می دهید ، فایل کتابخانه را به صفحه متصل کنید . در قسمت زیر این روش را نشان داده ایم :

< head >
< script type = " text/javascript " src="jquery.js" > < /script >
< head/ >

روش دوم : در روش دوم، شما لینک دسترستی به فایل کتابخانه jQuery ، که بروی سرور مورد نظرتان است را در یک تگ < Script > و در قسمت < Head > صفحه قرار می دهید . در این حالت صفحه در هنگام لود شدن ، به سرور وصل شده و از کتابخانه آنلاین استفاده می کند . در قسمت زیر هر 2 لینک و طریقه استفاده از آنها را نمایش داده ایم:

< head >
< script type = " text/javascript " src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js " > < /script >
< head/ >
 
< head >
< script type = " text/javascript " src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js " > < /script >
< head/ >

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

 

یک مثال از کاربرد jQuery :

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

در مثال زیر یک صفحه فرضی با 2 پاراگراف و یک تیتر داریم . می خواهیم تا کاربر بتواند با کلیک بر روی یک دکمه فرمان پارگراف های موجود در صفحه را پنهان کند. روش کار به این شرح است :

در ابتدا به وسیله یکی از لینک های معرفی شده، صفحه خود را به کتابخانه jQuery متصل کرده ایم . سپس یک دکمه فرمان و یک تیتر و 2 پاراگراف را بروی صفحه ایجاد کرده ایم. با کلیک کاربر بر روی دکمه فرمان، متد ( ) Hide که یکی از متدهای jQuery است ، اجرا شده و باعث می شود تا تمام پاراگراف های ( تگ های < p > ) موجود بر روی صفحه پنهان شوند. همانطور که در خروجی مشاهده می کنید تابع ایجاد شده فقط بر روی عناصری که تگ آنها از نوع < p > ( پاراگراف ) است ، اثر می گذارد و مثلا با تگ تیتر < h2 > کاری ندارد.

< html >
< head >
< script type="text/javascript" src="jquery.js" > < /script >
< script type="text/javascript" >
}()(document).ready(function)$
}()(button").click(function")$
;()(p").hide")$
;({
;({
<script/>
<head/>
<body>
<h2> This is a heading</h2>
<p> This is a paragraph . </p>
<p> This is another paragraph. </p>
<button> Click me</button>
<body/>
<html/>

 

برای شروع خوبه حتما به موراد کاربردی بیشتری میرسیم

نمونه ای از آخرین کارهای ما

آموزش jquery قسمت اولReviewed by Goolexacom on Mar 23Rating: 5.0

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اگر ربات نیستی جواب بده *

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت