JQuery چیست ؟ ( جی کوئری چیست ؟)

jQuery یک کتابخانه از جاوا اسکریپت است که پیمایش اسناد اچ تی ام ال ، رسیدگی به رویدادها، متحرک سازی و تعاملات ای جکس (AJAX) را به منظور توسعه سریع وب تسهیل می کند. jQuery به گونه ای طراحی شده است تا روشی را که با آن جاوا اسکریپت را می نویسید تغییر دهد.........

جی کوئری چیست ؟ یک چارچوب جاوا اسکریپت است که هدف آن آسان ساختن استفاده از  جاوا اسکریپت در صفحات طراحی وب سایت شماست.

شما می توانید جی کوئری را به صورت یک لایه انتزاعی توصیف کنید زیرا قابلیت های بسیاری را که می باید در خطوط بیشماری از کد جاوا اسکریپت می نوشتید گرفته و آنها را در توابعی (functions) که می توانید تنها در یک خط کد فراخوانی کنید پنهان می کنند.

جی کوئری جایگزینی برای جاوا اسکریپت نیست و با این که برخی میانبرهای نحوی نوشتاری را در اختیارتان می گذارد اما کدی که هنگام استفاده از جی کوئری خواهید نوشت هنوز هم جاوا اسکریپت می باشد.

آموزش جیکوئری تلاش می کند تا بسیاری از دستورات پیچیده  جاوا اسکریپت نظیر فراخوانی های  ای جکس (AJAX) و عملیاتهای DOM را ساده تر کند تا بتوانید این اعمال را بدون این که دانش زیادی درباره جاوا اسکریپت داشته باشید به اجرا بگذارید. شما می توانید  تقریباً برای انجام هر کاری یک پلاگین جی کوئری را پیدا نمائید.



چرا JQuery استفاده کنیم ؟

شما با آموزش jquery به راحتی با کمترین دانش برنامه نویسی میتوانید نحوه کد نویسی jquery رو درک کنید.

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

کاربرد های jquery 

یکی از کاربرد های مهم jquery داشتن دستورات بسیار ساده و قابل درک در زمینه بکار گیری تکنولوژِی ای جکس می باشد. به طوری که  می توانید یک طراحی سایت را با کمک jquery به صورت فول ای جکس طراحی کنید.

ویژگی‌های کلیدی jQuery

  • ایجاد امکان دسترسی به بخشهایی از یک صفحه بدون نیاز به ابزارهای جاوا اسکریپت و عدم نیاز به کد نویسی های زیاد.
  • جی کوئری مکانیسم سریع و موثری برای جستجو ، یافتن و انتخاب بخشهای مورد نظر از یک صفحه را بدون نیاز به ابزار جاوا اسکریپت، در اختیار ما قرار میدهد.
  • امکان تغییر ظاهر یک صفحه؛ البته  آموزش CSS ابزار قدرتمندی در تغییر صفحات بما میدهد اما قادر به انجام اینکار در مرورگرهای مختلف که استانداردهای متفاوتی دارند، نیست. اما جی کوئری براحتی میتواند هر نوع مرورگری را ساپورت کند و حتی قادر است که مختصات ویژه صفحات وب را، حتی بعد از دستکاری و تغییر ساختاری و ظاهر، دوباره تغییر دهد.
  • جی کوئری نه تنها تغییرات ظاهری و ناچیز را، بلکه صرفا با چند کلیک ساده، می‌تواند محتوای صفحات مورد نظر کاربر را هم تغییر کلی بدهد و مثلا متن یا عکسی را تغییر داده و یا تصویر یا لیستی را درون متنهای آن صفحه اضافه و یا از آن حذف کند. حتی میتواند تمام ساختار HTML صفحات را کاملا تغییر دهد.
  • یکی از امکانات کتابخانه جی کوئری کنترل و جلوگیری از اتفاقات غیرمنتظره ایست که بهنگام کلیک کردن یک کاربر بر یک لینک رخ میدهند و مثلا باعث کند شدن یا درهمریختگی مرورگرها میشوند. ابزار event-handler در جی کوئری این وظیفه را بسادگی و بدون نیاز به استفاده از جاوا اسکریپت انجام میدهد.
  • افزودن انیمیشن (Fade) به یک صفحه؛ کسب فیدبک از (یا به) کاربران، امری بسیار مهم است و جی کوئری این ویژگی را بسادگی با استفاده از امکاناتی همچون Fade و غیره بما میدهد.
  • کسب اطلاعات از یک سرور بدون نیاز به ریفرش کردن آن صفحه (که اصطلاحا به آن AJAX می‌گویند) جی کوئری اینکار را بدون نیاز به دانستن مختصات ویژه هر سرور و صرفا با مراجعه مستقیم به نتایج آن صفحه (محتویات سرور) انجام میدهد.
  • ساده سازی عملکردهای مشترک / تکراری جاوا اسکریپت : جی کوئری علاوه بر انجام بسیار ساده تغییرات کلی در متن و ظاهر صفحات وب، حتی قادر به ساده تر کردن عملیات ساختار سازی همچون Iteration And Array Manipulation هم هست.

چرا jQuery بهتر از سایر ابزارها است؟

در سالهای اخیر افزایش گرایش به آموزش HTML باعث افزایش کارایی پکیج های Framework های جاوا اسکریپتی شده، بعضی پکیج ها عملیات خاص و محدود و بعضی دیگر کارهای انیمیشن و غیره را تسهیل می کنند. اما جی کوئری سعی می کند تا تمام این حوزه ها را پوشش دهد.

ارایه و شناسایی و تغییر مختصات صفحات وب، متضمن آشنایی طراحان وب با کدها و خطاهای مربوط به CSS و … است ، ولی جی کوئری این کار را برای طراحان آسانتر نموده است.
ساپورت های Extension در جی کوئری طوری تنظیم شده اند که پلاگینها را میتوان بسادگی اضافه یا حذف نمود و ساختار درونی Basic jQuery طوری نوشته شده که بهنگام دانلود براحتی برای سایر آیتم های صفحه وب قابل شناسایی اند و براحتی با ایجاد ماژول‌های ساده میتوان تغییرشان داد.
یکی از مشکلات طراحی سایت و طراحان وب همانا متفاوت بودن پیش شرط ها و مختصات مرورگرها و عدم هماهنگی آنها با یکدیگر و یا با نرم افزار های جدید است. جی کوئری قادر است که با هر مرورگری کار کرده و با کاهش کدها و ساده سازی کار را آسانتر کند.
با استفاده از تکنیک Implicit Iteration قادر خواهید بود که بسیاری از لوپ ها را بصورت دسته جمعی (و نه تک به تک) بررسی و در وقت صرفه جویی کرده و بدین ترتیب نیاز به کدنویسی طولانی نداشته باشید.



نصب و راه اندازی  JQuery

برای اینکه بتوانیم از امکانات jquery استفاده کنیم بایستی  آخرین نسخه کتابخانه jquery رو از سایت jquery.comدانلود کنیم .

سه مدل برای دانلود وجود دارد : 

  •  Minified : که خیلی فشرده شده و برای استفاده تجاری استفاده میشه و ۱۵ کیلوبایت هم می باشد.(به دلیل لود شدن سریع)
  • Uncompressed : که به صورت غیر فشرده هست و حجمش حدود ۹۴ کیلو بایت می باشد. و برای توسعه یا فراگیری مورد استفاده قرار میگیرد.
  • Packed : حجمی حدود ۲۹ کیلوبایت داره و به صورت gzip فشرده نشده .

 

بعد از دانلود شما باید کتابخانه را در صفحات خود نصب کنید .

طریق نصب جی کوئری به دو صورت  inline  و  external می باشد.

اما نحوه نوشتن کدها نیز به همین دو روش میباشد :

  •  به صورت inline : در این روش کدها در همان صفحه ای که میخواهیم جیکوئری را فراخوانی کنیم نوشته میشود ، توصیه میشود از این روش کمتر استفاده کنید. 
  •  به صورت external : در این حالت شما یک فایل با پسوند sample.js ایجاد میکنید. و تمامی کد های خود را در این فایل مینویسید. و سپس فایل sampale.js را در صفحات خود فراخوانی میکنید.



قواعد دستوری جیکوئری ( Jquery )

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

ساختار اصلی یک دستور جیکوئری : 

$(selector).action()

$ : برای دسترسی به جیکوئری  به کار میرود.

selector : برای جستجوی عناصر HTML  به کار میرود.

action() : عملی را که که بر روی عنصر بایستی  انجام شود مشخص میکند.

این مثال المنت جاری را مخفی میکند: 

$(this).hide()

برای یک کلاس خاص :

$(".classname").hide()

برای یک ID خاص :

$("#IDname").hide()

برای یک تگ خاص :

$(div).hide()

در ادامه ی آموزش jquery ، این موارد به طور کامل توضیح داده خواهد شد.





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

سلکتور همونطور که از اسمش پیداست برای انتخاب کردن المنت ها (جهت اعمال کد روی اون‌ها) در جی کوئری بکار میرود. برای انتخاب یه عنصر HTML به صورت مستقیم میتوانیم آن را  فراخوانی کنیم.

انتخاب همه عناصر (*)

$(*).hide()

با کد زیر میتوانید همه عناصر صفحه رو فراخوانی کنید.در این مثال همه عناصر با کلیک شدن ، hide میشوند.

$(document).ready(function(){ $("*").click(function(){ $(this).hide(); }); });

انتخاب عناصر در حال حرکت (animated)

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

$("div:animated").hide()

انتخاب عناصر با خصوصیت دلخواه
برای انتخاب عناصر بر اساس خصوصیت ها از کد زیر استفاده میکنیم.
کد زیر لینک هایی که خاصیت href آنها با عبارت http شروع شود را hide میکند.

$('a[href^="http"]').hide()


کد زیر لینک هایی که خاصیت hreflang آنها en باشد یا با -en شروع شوند را hide میکند.

$('a[hreflang|="en"]').hide()


کد زیر عکس‌هایی را که خاصیت Alt آنها  برابر با www.pars-soft.ir باشد را  hide میکند. 

$('img[alt*="www.pars-soft.ir"]').hide()

کد زیر عکسهایی را که شامل کلمه www.pars-soft.ir باشند را انتخاب میکند و  hide میکند. 

$('img[alt~="www.pars-soft.ir"]').hide()


کد زیر همه لینک‌هایی که خصوصیت href آنها با کلمه”html” تموم میشود  را انتخاب میکند و  hide میکند. 

$('a[href$="html"]').hide()

کد زیر فقط div هایی را که خصوصیت کلاس آنها  myclass باشد را انتخاب میکند و  hide میکند. 

$('div[class="myclass"]').hide()


کد زیر فقط div هایی را که خصوصیت کلاس آنها  myclass نباشد را انتخاب میکند و  hide میکند. 

$('div[class!="myclass"]').hide()


انتخاب دکمه ها


کد زیر به همه button ها حاشیه 3 پیکسلی میدهد . در این کد نحوه اعمال یک کد CSS به یک عنصر را می ببینید.

$(":button").css({"border":"3px black solid"});

انتخاب چک‌باکس ها

 کد زیر به همه چک‌باکس ها  حاشیه 3 پیکسلی میدهد .

$(":checkbox").css({"border":"3px black solid"});

اگه بخوایم این نوع کدها فقط در محدوده یک عنصر خاص کار کنند ، به راحتی میتوانیم از اسم کلاس‌ها ، IDها یا تگ ها استفاده کنیم:

$("#container .leftColumn input:checkbox").css({border:"3px black solid"});

انتخاب Input های از نوع File 
برای انتخاب Input هایی که خصوصیت type آن‌ ها مقدار file دارد و برای انتخاب یک فایل جهت آپلود در سایت استفاده میشوند :

$("input:file").css({border:"3px black solid"});

انتخاب عنصرهای check شده
این سلکتور checkbox ها و radio هایی را  که تیک خورده اند (انتخاب شده اند) را انتخاب میکند.

$("input:checked").css({"border":"3px black solid"});

در کد زیر با انتخاب هر دکمه رادیویی موجود در صفحه ، مقدار value آن ، در یک عنصر جدید که کلاس .log دارد ، نمایش داده میشود :

$("input").click(function(){ $(".log").html( $(":checked").val() + " is checked!" ); });

انتخاب عناصر فرزند

درست مثل CSS میتوانیم در jQuery هم ، عناصر فرزند رو فراخوانی کنیم :

$("ul.class1 > li").css({border:"3px black solid"});

انتخاب بر اساس محتوا
با کد contains میتوانیم عنصری که متن خاصی داخلش وجود دارد را انتخاب کنیم.
کد زیر هر پاراگرافی که کلمه pasargad-graphic.com داخلش باشد را  نارنجی میکند.

$("p:contains('pasargad-graphic.com')").css("color", "orange");

انتخاب عنصرهای غیرفعال (disabled)
کد زیر کلمه “DISABLED” را در همه input هایی که غیرفعال شدند مینویسد:

$("input:disabled").val("DISABLED");

انتخاب عنصرهای فعال (enabled)
کد زیر برای همه input هایی که فعال هستند حاشیه قرمز میگذارد:

$("input:enabled").css("border":"1px solid red");

انتخاب عناصر خالی
برای عناصری که هیچ متن یا تگی داخلشان نباشد. مثل تگ های زیر:

<a></a> <li></li> <td></td>

کد زیر همه تگ‌های خالی که داخل تگ body باشند را انتخاب میکند ، متن Empty Tag را داخلشان مینویسد و رنگ پیش زمینه آنها را قرمز میکند :

$("body :empty").text("Empty Tag").css('background','red');

انتخاب بر اساس اندیس
با استفاده از eq میتوانیم از بین تعدادی عنصر یکسان ، عنصری با شماره خاص رو انتخاب کنیم.
اگه یه لیست با 3 تا li داشته باشیم ، شماره اندیس این سها li از 0 تا 2 هست (شمارش اندیس‌ها از 0 شروع میشه)
برای انتخاب عنصر اول:

$("li:eq(0)").css("color","blue" );

برای انتخاب عنصر دوم:

$("li:eq(1)").css("color","blue" );

انتخاب زوج و فرد

کد زیر پاراگراف‌های زوج رو آبی میکند:

$("p:even").css("color","blue");

کد زیر پاراگراف‌های فرد رو قرمز میکند:

$("p:odd").css("color","red");

انتخاب چند عنصر
برای انتخاب یه عنصر، از کدزیر  استفاده میکنیم :

$(".myclass1").css("color":"orange");


برای انتخاب چند تا عنصر ، کافیست نام عنصر را به همراه کاما “,” اضافه کنیم :

$(".myclass1,.myclass2,.myclass3").css("color":"orange");


کد بالا همه عناصری که کلاس myclass1 و myclass2 و myclass3 دارند را انتخاب میکند و رنگشان را به نارنجی تغییر میدهد.

انتخاب عنصر اول
“first” عنصر اول را از بین تعدادی عنصر انتخاب میکند.کد زیر اولین پاراگراف رو انتخاب میکند و border قرمز را به آن میدهد .

$("p:first").css("border":"1px solid red");


انتخاب first-child یا فرزند اول
first-child عنصر فرزند اول را از بین تعدادی عنصر انتخاب میکند. کد زیر اولین پاراگراف داخل تگ div را انتخاب میکند  و border قرمز را به آن میدهد .

$("div p:first-child").css("border":"1px solid red");

انتخاب عنصر آخر
“Last” عنصر آخر را از بین تعدادی عنصر انتخاب میکند.کد زیر آخرین پاراگراف را انتخاب میکند و border سبز را به آن میدهد .

$("p:last").css("border":"1px solid green");


انتخاب last-child یا فرزند آخر
first-child عنصر فرزند اول را از بین تعدادی عنصر انتخاب میکند. تقریبا شبیه Last کار میکند.کد زیر آخرین پاراگراف داخل تگ div را انتخاب میکند و border قرمز را به آن میدهد .

$("div p:last-child").css("border":"1px solid green");

انتخاب فرزند n ام
nth-child فرزند n ام را از بین تعدادی عنصر انتخاب میکند. کد زیر سومین پاراگراف داخل تگ div را انتخاب میکند و رنگ متنش را آبی میکند.

$("div p:nth-child(3)").css("color":"blue");

انتخاب عنصر دارای خصوصیت
با این انتخابگر میشود عناصری را انتخاب کرد که Attribute های خاصی دارند.مثلا با کد زیر همه عکس‌هایی که خصوصیت Alt داشته باشند را انتخاب میکند و  border قرمز را به آن میدهد .

$('img[alt]').css("border":"4px solid red");

منفی کردن انتخابگر با not
هنگامی که میخواهیم نتیجه را برعکس کنیم از این انتخابگر استفاده میکنیم ، کد زیر  به چک باکس های تیک خورده border سه پیکسلی میدهد.

$("input:checked").css({"border":"3px black solid"});


کد زیر  به چک باکس های تیک خورده border سه پیکسلی میدهد ، که با اضافه کردن :not ، چک باکس های تیک نخورده رو انتخاب میکنیم:

$("input:not(:checked)").css({"border":"3px black solid"});

gt: انتخاب عناصر بزرگتر
اگه چندتا پاراگراف داشته باشیم و بخواهیم پیش زمینه پاراگراف سوم به بعد را عوض کنیم، میتوانیم از انتخابگر gt (Greater than…) استفاده کنیم:

$('p:gt(3)').css("background":"yellow");

کد بالا از بین همه پاراگراف ها، فقط پاراگراف سوم به بعد (4 و 5 و 6 و…) را انتخاب میکند.

lt: انتخاب عناصر کوچیکتر
برای انتخاب عناصر قبل از مورد مشخص شده استفاده میشود :

$('p:lt(3)').css("background":"orange");

کد بالا از بین همه پاراگراف ها، فقط پاراگراف‌های قبل از پاراگراف سوم را انتخاب میکند (پاراگراف 1 و 2)و  پیش زمینه آنها را  نارنجی مکیند.

انتخاب عناصر تک فرزند “only-child”
ممکنه این جمله رو متوجه نشید:
“اگه عنصری ، تنها عنصرِ عنصر والدِ خودش باشه ، انتخاب میشود”
پس بیشتر توضیح میدم:
اگه داخل عنصر والد ، 2 تا عنصر فرزند داشته باشیم:

<ul><li></li><li></li></ul>

یعنی ul پدر ، 2تا فرزند li داره ، ولی اگر فقط یک فرزند داشته باشد:

<ul><li></li></ul>

 سلکتور only-child در جی کوئری ، فقط عناصری را انتخاب میکند که هیچ عنصر مشابهی ، قبل یا بعد آنها وجود نداشته باشد. در کد زیر ، فقط li هایی که تک فرزند باشند ، border آبی میگیرند.

$("ul li:only-child").css("border", "3px solid blue");

انتخاب first-child یا فرزند اول
first-child عنصر فرزند اول را از بین تعدادی عنصر انتخاب میکند. تقریبا شبیه first کار میکند. کد زیر اولین پاراگراف داخل تگ div را انتخاب میکند و border قرمز به آن میدهد .

$("div p:first-child").css("border":"1px solid red");







رویداد ها در جی کوئری (Jquery Events)

متدهای دسترسی به رویداد در JQuery جزء توابع اصلی و هسته ی اصلی جی کوئری هستند. Event Handler هامتدهایی هستند که وقتی «اتفاقی در صفحه HTML رخ می دهد» صدا زده می شوند.

در زیر چند مثال از متدهای رویداد در جی کوئری آورده شده است:

مقید کردن یک تابع به رویداد ready یک صفحه (وقتی که لود شدن صفحه کامل شد) 


$(document).ready(function)

مقید کردن یک تابع به یک رویداد کلیک بر روی عناصر انتخاب شده

$(selector).click(function)

مقید کردن یک تابع به رویداد دابل کلیک بر روی عناصر انتخاب شده

$(selector).dblclick(function)

مقید کردن یک تابع به رویداد فوکوس بر روی عناصر انتخاب شده

$(selector).focus(function)

مقید کردن یک تابع به رویداد عبور ماوس از روی عناصر انتخاب شده


$(selector).mouseover(function)