JQUERY

صفحه 1:


صفحه 2:
جىكوئرى يالا'علا0ز یک کتابخانه جاوا اسکریپت سبک وزن چند مرورگری می‌باشد که برای ساذه کردن نوشن ار وا ‎ig‏ ۲ است. جی کوتری آمروزه مور ‎Be etal‏ است. جی کوئری نرم‌افزار بازمتن و رایگان است که تحت دو پروانه ‎GPL‏ و۷۲۲ 

صفحه 3:
جی‌کوثری شامل ویژگی‌های زیر می به عناصر موجود در پرونده دسترسی پیدا کرده و آنها را دستکاری می نماید. کنترل آسان و قدرتمند تر رویدادها (5اع6۷) دستکاری 655 ايجاد افكت و حرکات انیمیشین 

صفحه 4:
قبل از شروع استفاده از جی کوثری شما باید دانش کافی در زمینه های زیر را داشته باشید: HTML 

صفحه 5:
برای شروع استفاده از جی کوثری ابتدا باید آخرین نسخه ی این کتابخوانه را به صفحه ی خود ارتباط دهید, ا بخونه به صورت یک فایل جاوا اسکریپت ‎law 5 arto a, <Script> GL 5‏ اضافه می شود. 

صفحه 6:
برای دریافت فایل کتابخوانه ی جی کوئری ابتدا به وب سایت 6 اه ز :۷۷۷۷۷۷ رفته و فایل آنرا دریافت نمایید. دو نسخه ی متفاوت برای دریافت وجود دارد: 

صفحه 7:
با جی کوثری شما مق توانید یک چز ۲۱ را انتا ر. ۲ ۱ ۱ آن انجام دهید, نگارش دستوری آن بطور ساده این گونه است: ‎$(selector).action()‏ 5: مشخص کننده ی تعریف یا انتخاب جی کوئری | قسمت (5616000۲): مشخص کننده خواست 

صفحه 8:
به عنوان مثال: - hides the current element. hides all 

صفحه 9:
بايد توجه داشته باشید که تمام متدهای جی کوثری در رخداد 006۷1۲6۴۲ 0۷ نوشته می شوند., این رخداد زمانی انقاق ی اف ک | الا صفحه ی شما لود شده باشند. به بیان دیگر از اجرا شدن متدها قبل از لود شدن کامل صفحه جلوگیری می کند. 

صفحه 10:
تيم جى کوثری برای راحتی کار متد کوتاهتری را برای رخداد 006۳۳6۲۴ ۷ ایجاد كرده است كه به اين صورت می توان از آن استفاده کرد: 

صفحه 11:
تور. به شما امکان‌لنتخابو کار کردن‌ب | اجزلی ۷۱ را ممدهد. به فسیله ی لنتخایگر مه ‎ly‏ 17ل لكا ‎ID, Class, attribute whol. |, arsco‏ مقدار ‎attribute‏ » و لنتخات‌کتید ‎Seed‏ 2 ا می‌شود. 

صفحه 12:
به غنوان مثال» در تكه کد زیر هنگاهی ج کار رت ‎Pe ceca‏ تمامی تگ های <(> مخفی خواهند شد: معن) ly(function(){ 

صفحه 13:
:#۰ ۱0 این سلکتور از ویژگی ۱0 برای جستجو و انتخاب اجزای صفحه انتخاب می کند. مقدار ویژگی 0 باید در صفحه یکتا باشد, برای انتخاب یک جز به وسیله ی ا باید مقدار این elas فرمت اين سلكتور به اين صور 

صفحه 14:
به عنوان مثال, در تکه کد زیر جز از صفحه که ۱0 آن ]۲65 باشد مخفی خواهند شد: ‎(Click)‏ ly(function(){ 

صفحه 15:
۲ عوع۱». ۲6: لین‌سلکتور. جزئی‌از صفحه را که ازکلاس‌مشخص ممع هتنا د راون ‎pe‏ لنتخابموكند. فرمت این سلکتور به این صورت می باشد: ‎ 

صفحه 16:
به عتوان مثال؛ در تکه کد زیر هدگامی ک کار رد لاط جز از صفحه که از کلاس ‎test‏ استفاده می کند (651]"-ووع۱» خواهند شد: (نلع) 

صفحه 17:
(oe 02 Ace ead ee uae eee attribute value NOT equal to "_t 3 ee ee ee ae econ Selects all even <tr> elements eee er eet aes Ec aap) Peer) $(ttceven) peer) ee) 

صفحه 18:
رویداد ها (8۷۵۳۲5): تمام اعمال مختلف کاربر که صفحه ی وب می تواند به آن پاسخ دهد, رویداد نامیده می شود. انواع رخدادهای متادول: 

صفحه 19:
‎sly «SIS» slug, asi sly‏ تمام تگ ‎<p> sh‏ این صورت می توان عمل كرد: ‎ 

صفحه 20:
به عنوان مثال, در تکه کد زیر هنگامی که کاربر روی پاراگراف <0> کلیک ‎iS‏ همان قسمت مخفی خواهد شد: (عنع) 

صفحه 21:
به عنوان مثال دوم, در نکه کد زیر هنگامی که ااشاره گر نمايش داده ا شد: (كاعناء) (function(){ 

صفحه 22:
در این مثال با رویداد 0۵۷6۲ آشنا می شویم. این رویداد دو تابع را دریافت کرده و ترکیبی از رویداد ۳۵۱566۳۷6۲() و رویداد ‎()Mouseleave‏ مى باشد. به عنوان مثال سوم, در تکه کد زیر هنگامی که اشاره گر به قسمت1 وارد شود تابع اول و هنگامی که از 01 خارج شود, تايع دوم اجرا مى شود. (اءذاع) 

صفحه 23:
به عنوان مثال چهارم. در تکه کد زیر هنگامی کاربر روی قسمت ]1۱0۱۱ تمرکز ‎iS‏ تابع اجرا شده و رنگ پس زمینه ی آن تغییر می ‎(Click) .2i5‏ 

صفحه 24:
در کتابخانه ی جی کوتری افکت ها شده است نه عنوان ال ۱ ۱5 

صفحه 25:
با استفاده از جى كوثرى شما من تواندد يى ب إز شد | ا كر ا ۰ ۲۰ كنيد. با استفاده از دو تايع 110]() و ‎ols) we (SHOW‏ این کار را انجام داد: 6124) 

صفحه 26:
فرمت نوشتن اين دو تابع به اين صورت مى باشد: ‎$(selector).hide(speed, callback);‏ ‎$(sel |. show(speed, callback);‏ 50660 ‏پارامتر‎ ٠ 

صفحه 27:
به عنوان مثال کاربرد پارامتر ‎٩0660‏ به این صورت می باشد: (ملعنت) 

صفحه 28:
با ستفاده از تابع 709916() که ترکیبی از دو ‎()Show ail‏ و ‎cual ()Hide‏ توانید وضعیت یک جز را عوض کنید. اين تابع یک جز را که داده و اگر مخفی نباشد آن را مخفی می کند. فرم‌کلی اي دب كا 

صفحه 29:
۳ ‏زیرنخوه‌ی استفاده این تام را‎ lta 

صفحه 30:
مثال زیر نحوه ی استفاده ی این تابع را مشخص کرده است.(80) 

صفحه 31:
در جی کوثری انواع ۴۲66۴ ۳۵06 ها نیز در نظر گرفته شده است. 

صفحه 32:
تابع ۲۵06۱0() یک جز از صفحه که با | ‎is J (Fading)‏ مخفی باشد را به ضورت رمع آلود می دهد. فرم کلی آن به صورت زیر است: 

صفحه 33:
مثال زیر, فرم های مختلف نوشتن این تابع را نمایش می ‎(Click) :2m>‏ ) (6۵۰))ع ۰( هناب 

صفحه 34:
تلبع ادا6۵060() دقیقا بر عکس تابع 6306۱8() عمل میکند, یعنی : صورت مه آلود (۳۵۵۱۳9) محو می کند. فرم کلی این تابع به صورت زیر است: 

صفحه 35:
مثال زیر, فرم های مختلف نوشتن این تابع را نمایش می ‎(Click) :2m>‏ ) (6۵۰))ع ۰( هناب 

صفحه 36:
تابع 6او۳۵۵6۲09() ترکیبی از دو ‎()Fadeln wl‏ و اد۳۵060() است, اگر جز صفحه با تابع ۳۵060۱6() مخفی شده باشد, مانند ‎dos ()Fadeln wl‏ ‎wo‏ اگر جز صفحه با تایع ۴۵06۱0() نمایش داده شده باشد. مانند تابع ]را عمل 

صفحه 37:
عابع ۴۵۵67۵()شفافیت یک جز از صفح رز[ | ۲ ۰ ۲ فرم کلی آن به این صورت می 

صفحه 38:
این مثال کاربرد و طرز استفاده ی این تابع را بیان می ‎(Click).2i5‏ ‎5("button").click(function(){‏ ‎fadeTo("slow",0.15);‏ 

صفحه 39:
در جی کوثری چندین تابع اسلایدی برای افکت دادن به صفحات تعریف شده است: ‎١‏ 8 

صفحه 40:
تايع ‎SG ()SlideDown‏ جز از صفحه را مانند پرده (از بالا به پایین) نمایش می 

صفحه 41:
به عنوان مثال در تکه کد زیر, هنگامی که کاربر روی قسمت : تا کب( پایین) ظاهر قسمت 0۵06۱# به صورت اسلایدی (از بالا به 

صفحه 42:
تابع ملاع5110() يى جز از صفحه را مانند پرده (از پایین به بالا) پنهان فرمت کلی این دستور به این صورت است: 

صفحه 43:
به عتوان مثال در 5 كد رار ‎i se‏ قسمت #ا0306 به صورت اسلايدى (از بايين به 

صفحه 44:
se ()SlideUP 9 ()slideDown gl 99 5» jl ‏نیز ترکییی‎ ()slideToggle wl Pee olan bl ‏آن را‎ Dslidep ‏اكر جز با تس ظاهر شده باشد. مانند تابع‎ مخفى مى " اگر جز با 5 دلاء5110() مخفى شده باشد, : 

صفحه 45:
در اين:مثال طرز استفاده ی این تایه مشحس ۱ ۱ ۱ 

صفحه 46:
در جی کوثری با استفاده از تابع ۵0[0۵06() می توانیم انیمیشن های جدید تعریف کنیم» فرمت کلی آن اه این مب ۳ :عحصاای,0ععه‌ور [ 

صفحه 47:
در این مثال, ‎ee Sis‏ ۲ موجود کلیک کند, قسمت 01۷ به حرکت کرده تا زمائی که ویزگی ‎ul Left‏ 250 پیکسل برسد ۱ $("button").click(function(){ 

صفحه 48:
در این مثال, زمانی که کاربر روی 00الا8 موجود کلیک کند, قسمت 0۷ به ویژگی های تعریف شده تغيير مى كنند. (اءزاك) $("button").click(function(){ -$("div").animate({ 

صفحه 49:
‎ices‏ اینکه: توجه داشته باشید که می توانید چندین ویژگی را همزمان با ‎ 

صفحه 50:
در اين مثال. استفاده از متغیر های + و -+ شرح داده شده است: (0عع) ‎$("button").click(function() {‏ ‎"div").animate({‏ 

صفحه 51:
در اين مثال, استفاده از کلمه های 500۷۷ و ۲۵6 و ۲09916 به عنوان مقادیر شرح داده شده است: ‎(Click)‏ k(function(){ 

صفحه 52:
به صورت پیش فرض, جی کوثری با یک شود, یعنی در صورتی که چندین 

صفحه 53:
در این مثال. معنای صف در انیمیشن پیاده سازی شده است. (عن) ‎$("button").click(function() {‏ ‎var div=$("div");‏ ‎div 1 “slow");‏ ‎low");‏ 

صفحه 54:
تابع 500() در جی کوثری باعث توقف انیمیشن قبل از اجرای کامل آن می شود. قرم کلی این تابع به اين صورت است: | $(selector).stop(stopAll, goToEnd); 

صفحه 55:
کاربرد اصلی تابع 00ا5() شرح داده می شود. 0نع) 

صفحه 56:
کد های جی:کوئزی و جاوا اس کریوت هس ۱۳۱ اگر چه ممکن است گاهی در > انجام إفكت ا 3005| 0000م قبلی اجرا شده و باعث ایجاد خطا شود. برای اجتناب از این خطاها می توانیم از ۳۷۳۸۵0 ) 

صفحه 57:
در این مثال. یک ۴۵۳۷0۳۴ 0۵۱۱01 تعریف شده است که بعد از اجرای افكت اجراامی شود: 00ع) 

صفحه 58:
در این مثال. ۳۵۳6۲۵۳ 03۱۱0361 تعریف نشده است که ‎splay‏ قبل از اجرای افکت نمایش داده می شود: (»عنع) 

صفحه 59:
در جى كول ی شما می توانید چندین تابع را به هم بار متصل كنيد. اين اين امكان را مى دهد كه در يى جمله جندين تايع را روى يك 

صفحه 60:
در اين مثال, ابتدا رنگ قسمت 1 قرمز شده سپس به طرف طرف پایین باز فى ينود ‎(Click)‏ ).slideDown(2000); 

صفحه 61:
کوثری به همراه یک سری از توابع مرتبط با ‎DOM‏ | ‎ks‏ و دستکاری اشبا و ویژگی ها بسیار آسان ‎DOM -ument Object Model ~‏ _ ۰ 0 ب کلستاندار 

صفحه 62:
‎rio aw‏ ساده و کارآمد جهت دستکاری به 2014 در جی کوتری عبارتند از: ‏(): براعمقداردهی با مقدارگیریق سمممتنیی ک‌جز از صفحه به ممرود. ‏۲۷۵۱(): براعمقداردهیی | مقدارگیر: ‏به کار میرود. ‎ 

صفحه 63:
(Click) .am> wo ‏را شرح‎ )(۳۱۲۲/ 9 ()text rio 99 jI ‏در مثال زیر طرز استفاده‎ 5) ۴۵۱ ( ۰ ‏عون‎ ‎alert("Text: " + $("#test").text()); 

صفحه 64:
همچنین در این مثال, طرز استفاده از متد ‎sly ()val‏ خواندن مقدار یک فیلد شرح داده ‎(Click) cu! or‏ 

صفحه 65:
برای دریافت مقدار یک ویژگی از اجزا از مند :388() استفاده عی کنیم سل ۱ نحوه ی استفاده از اين تابع را شرح می دهد. ‎(Click)‏ 1 

صفحه 66:
در اين مثال به طور كامل با نوشتن مقادير با اين 3 تابع آشنا مى شويد. #اءزاع) ‎$("#btn1").click(function(){‏ ‎$("#test1").text("Hello world!");‏ 

صفحه 67:
در اين منال, از ۴۵۳6۲00 0۵۱۱0301 به همراه تابع ۲6() استفاده شده است. ( ‎(Click‏ $("#btn1").click(function(){ 

صفحه 68:
در اين مثال, از ‎Callback Function‏ به همراه تابع ۳۸۲۱() استفاده شده است. ( ‎(Click‏ $("#btn2").click(function(){ “H#test2" ‏لكا ال‎ origText) { 2 116 + “ New html: Hello <b>world! 

صفحه 69:
از متد ‎sly (attr‏ تعیین یا تغییر ویژگی یک جز از صفحه به کار می رود. با یک ما طرز استفاده از آن را توضیح می دهیم. (»لعنلع) 

صفحه 70:
همچنین با این متد مي توانیم چندین ویژگی را به طور همزمان مقدار دهی کنیم, به مثال زیر توجه ‎(Click) iauiS‏ $("button").click(function() { schools.com/jquery", 

صفحه 71:
در این مثال با اضافه کردن یک ۴۵۳00 2۱۱0361 می توانیم تابع دومی برای تشکیل مقدار ویژگی تشکیل دهیم, در مثال زر این کار پیاده سازی شده است. ( ‎(Click‏ lick(function(){ ) function(i,origValue) { 

صفحه 72:
در جی کوثری برای اضافه کردن محتوای جدید به صفحه, 4 متد اصلی تعریف شده است. ۵( ی ک‌مجتوای‌جدید به لنتهاعش‌چارعدیج من ۵(): ی ک‌محتوای‌جدید به 5 6۲): ی کمحتولع‌جد؛ :)(0660۳6 ۰ 

صفحه 73:
به عنوان مثال اول, متد ۵00600( یک متن را به انتهای م <۵> اضافه می کند. معن) 

صفحه 74:
به عنوان مثال دوم, 220 ‎Ss ()Prepend‏ متن را به ابتداى مت <۵> اضافه می کند. معن) 0 

صفحه 75:
به عنوان مثال سوم, متد ‎Ly oie Si ane edb aw a (Jappend » ()prepend‏ به كد شما اضاقه مى كنند. (واعزاء). function appendText() // Create element with HT! // Create with jQuery 

صفحه 76:
به عنوان مثال چهارم. در این مثال با استفاده از ‎(before » (after els‏ ما یک محتوای جدید, قبل و بعد جز مورد نظر درج ‎(Click) <u «xo‏ 

صفحه 77:
به عنوان مثال پنجم, در این مثال با توابع 3806۲() و ۵6۲0۲6() و 3 حالت جدید محتوای جدید را قبل و بعد جز مورد نظر درج می ‎(Glick) .eriS‏ ‎function afterText()‏ >| </b>"; // Create element with HTML i>"). ve"); // Create with jQuery ate with DOM 

صفحه 78:
در جی کوثری به راحتی می توانیم یک جز را از صفحه حذف نماییم, به اين صورت ‎(Click) taS‏ 

صفحه 79:
همچنین در جی کوثری به راحتی می توانیم فرزندان یک جز را از صفحه نماييم, به اين صورت كه: ‎(Click)‏ 

صفحه 80:
pur ag Lb ‏می کنند را حذف می کند: (معنلع)‎ 

صفحه 81:
در جى کوثری 4 بتد اصای برلی تسار و 1 ۲ است. این متدها عبارتند از: ۵001255(): یکا چند کلاس‌به جز انتخابشده اضافه می‌کند. 60155 ۳6۳۱۵۷(): یک | چند کلاس‌به 

صفحه 82:
برای شروع کار با اين 4 ‎sate‏ اين استایل را برای متال های بعدی در نظر بگیرید: important 

صفحه 83:
در مثال اول».ما:با استفاده از تابع 30001555( یک کلاس . ۱۱ ۱۰ نسبت می دهیم, ‎cs al isl coos aul‏ انتخاب کرد: (»عنع) 

صفحه 84:
در مثال دوم, ما با استفاده از تابع ۳6۳۱0۷66۱255( یک کلاس را از اجزای ‎a‏ حذف. (Click) :auiS ‏می‎ 

صفحه 85:
در مثال سوم, ما با استفاده از تابع 66۱255اوو60() یک کلاس را از اجزای صفحه حذف و اضافه می کنیم: (»عنع) 

صفحه 86:
در جی کوثری متد 655() برای برگرداندن مقدار یک ویژگی 655 اسفاده .. شود. برای برگرداندن یک ویژگی: (لعنلع) . 

صفحه 87:
قدار به اين صورت است: اين متد براى انتساب يك مقدار به اي ‎Pi aaa‏ ریا ۰۳۰۱۹۹ ل به عنوان مثال برای انتساب ر: ‎(Click46‏ 

صفحه 88:
فرم کلی این متد برای انتساب چندین مقدار همزمان به این صورت است: 

صفحه 89:


صفحه 90:
آژاکس, تکنیک تبادل اطلاعات با یک سرور و بروزر وب بدون بارگذاری مجدد تمام صفحه می باشد. آزاکس در سال 2005 توسط گوگل و سرویس ‎(Google Suggest)‏ ميونت داكت 509965 600916 با استفاده از آزاكسبا جستجوء آنرا به سرور ارسالمىكند و 

صفحه 91:
آژاکس, مبتنی بر استاندارد های اینترنت است و از تر: Jew Liglejom poo lsMblJol_isl— :XMLHttpRequest object 

صفحه 92:
اين مثال دارای یک قسم ‎<MLDoc‏ تابعى به اسم 20 

صفحه 93:
<!DOCTYPE html> <htmi> <body> lange this text</h2></div> onclick="loadXMLDoc()">Change 

صفحه 94:
سپس برای نوشتن کد های آژاکس, نگ <ع[56۲> را به در نگ <6۵0> اضافه می کنیم: <head> 

صفحه 95:
تمام مرورگرهای جدید (غیر از ۱۶5 و ۱26) از آبجکت ‎XMLHttpRequest‏ ‎oe‏ اين شی برای ارسال و دریافت داده ها در پشت صحنه براین امکان بروز کردن بخش های صفحه ی وب بدون بارگذاری مت آن امکان پذیر است! براى ايجاد يى نمونه لوا لاه به اين صور همچنین برای مرورگر: 

صفحه 96:
حال برای کتترل مرورگرها, ابتدا چک می ‎wo ilu, XMLHttpRequest jI LI oS puiS‏ كند؟ در غير اين صورت یک ‎so obul ActiveXObject‏ var xmlhttp; if (window.XMLHttpRequest) code for 1E7+, Firefox, Chrot Opera, Safari 

صفحه 97:
برای ارسال یک درخواست به سرور از متد های (006() و 56۳0۵() این شی استفاده می کنیم: 

صفحه 98:
فرم کلی متد 0060() به این صورت است: ‎(method, url,async)‏ ۵0 روش ارسا-له رخولستاع6 و ‎Post‏ 

صفحه 99:
فرم کلی متد 56۵() به این صورت است: 

صفحه 100:
یک مثال ساده از ارسال درخواست به روش 66۲: 

صفحه 101:
یک مفال ساده از ارسال درخواست به روش ۳۵۶۲ 

صفحه 102:
ویژگی ارسال و دریافت غیرهمزمان آژاکس یک مزیت بزرگ برای طراحان وب محسوب ‎nro‏ شود, بسیاری از وظایفی که روی سرور شوند زمان زبادى را مصرف مى كنند و قبل از أزاكس ابن مسال گاهی با ‎E‏ ‏خطا و توقف صفحه مٍ با وجود آژاکس, کردن برای دریافت پاسخ از سرور نیست. اما 

صفحه 103:
هنگامی که از 250-07116 استفاده می کنید, یک تابع برای اچرا در زمانی که پاسخ دریافت شد در رویداد۵0۲6205126113096 تعری xmihttp.onreadystatechange=function() 

صفحه 104:
برای استفاده از حالت 25۷6<]6156, سومین پارامتر تابع 0۴06۳() را به ‎puss False‏ دهید. |ET","ajax_info.txt" false); 

صفحه 105:
برای دریافت پاسخ از سرور, از ویژگی ‎responseXML L_ responseText‏ از شی 2۱۱۲۱۲۲۵86۵65۲ استفاده کنید. L, :responseText 

صفحه 106:
در صورتی که پاسخ سرور شما یک داده ی 2۱ نمی باشد, از ۷ استفاده کنید, که می توانید مستقیما از آن به استفاده 

صفحه 107:
در صورتی که پاسخ سرور شما یک داده ی ]۱ مى باشد, و شما بخواهید آن را ماتند یک شی ۲ ۳ از ویژگی ۲۵5۵0056 استفاده کنید. ( ‎(Example2‏ -xmiDoc=xmlhttp.responseXML; yTagName("ARTIST"); 

صفحه 108:
‎sly‏ استفاده از رویداد 0(۲۳6۵0۷5۲۵۲66۳۵۳96 به جدول زیر توجه نما ‏اس ‏رت یت :1 ی ‎Perea IS eee Cho 7 200: "OK" 0 ‎ ‎status 

صفحه 109:
مثال نشان می دهدکه زمایی کار رد ال ‎ee‏ ‏نه با یک سرور ارتباط برقرار می کند. Example_3 هنگامی که کاربر کارا «منالاع»!011 نوشته شده 

صفحه 110:
شرح اين كد: اگر قسمت ورود متن خالی باشد, تابع مقدار قسمت 201156 حذف کرد و تا تمام می شود. در غیر ایینصورت, تابع 50۷/۳۷:۳۴() به ترتیب: یک نمونه از 2۸۱۳۱۲0۳69۷65۴ تعریف یک تابع برای اجرا تا زمان دریافت پاسخ از سرور درخواست زا به يك كايل روف ور ار ‎anil‏ ک بارا ‎ 

صفحه 111:
اين 2 ‎etal sit‏ ات يكّاه داده دريافت و نمايش مى دهد. هنگامی که کاربر یک آیتم را انتخاب کند, ‎wo Leal ()showUser whi‏ شود: چک می کند که آیا کاربر یک آیتم را انتخاب کرده است؟ یک نمونه 5 ‎no yas XMLHttpRequest‏ کند. یک تابع برای اچرا تا زمان دربافت پاسخ از 

صفحه 112:
هنگامی که درخواست توسط جاوا اسکریپت به فایل ۳۲۱۴ ارسال شود: ‎PHP‏ بککانکشررا به سمتا0 ۱0۷5 ب ار شخص مورد نظر یافت می شود. یک جدول ‎HTML‏ توا 

صفحه 113:
WWW.W3SCHOOL.COM 

‏JQUERY تهیه کننده :حسن پیرانی  جی‌کوئری یا jQueryی-ک کتابخان-ه جاوا اس-کریپت س-بک وزن چند مرورگری می‌باش-د ک-ه برای س-اده کردن نوشت-ن اس-کریپ‌های س-مت کالین-ت طراحی شده اس-ت .ج-ی کوئری امروزه محبوبتری-ن کتابخان-ه جاوا اس-کریپت در حال استفاده است. ‏ ج-ی کوئری نرم‌افزار بازمت-ن و رایگان اس-ت ک-ه تح-ت دو پروانه GPLوMIT منتشر می‌شود. ‏ ج-ی کوئری ب-ه توس-عه دهندگان ای-ن اختیار را م-ی ده-د ک-ه تک-ه برنامه‌های سطح پایی-ن مبادل-ه ای (ارتباط مرورگ-ر ب-ا کاربر) و ی-ا انیمیشن-ی و حتی افکت‌های پیشرفت-ه و س-طح باال و ایجاد اشی-ا فرض-ی را ایجاد کنند .ب-ه کارگ-یری هم-ه این اجزای ج-ی کوئری کم-ک می‌کن-د ص-فحات وب قدرتمن-د و داینامی-ک(پوی-ا) داشته باشیم. جی‌کوئری  جی‌کوئری شامل ویژگی‌های زیر می باشد: به عناصر موجود در پرونده دسترسی پیدا کرده و آنها را دستکاری می نماید کنترل آسان و قدرتمند تر رویدادها ()Events دستکاری CSS ایجاد افکت و حرکات انیمیشین توسعه دادن پالگین ها برنامه‌های کوچک سودمند (تهیه ی اطالعات User agentو ).. کتابخوانه ی Ajax جی‌کوئری  قب-ل از شروع اس-تفاده از ج-ی کوئری شم-ا بای-د دان-ش کاف-ی در زمین-ه های زیر را داشته باشید: ‏HTML  ‏CSS  ‏JavaScript  جی‌کوئری  برای شروع اس-تفاده از ج-ی کوئری ابتدا بای-د آخری-ن نس-خه ی ای-ن ک-تابخوانه را ب-ه ص-فحه ی خود ارتباط دهی-د ،ای-ن کتابخون-ه ب-ه ص-ورت ی-ک فای-ل جاوا اسکریپت و با تگ < >Scriptبه صفحه ی شما اضافه می شود. ><head ><script src="jquery.js"></script ></head ‏ توجه داشته باشید که تگ < >Scriptدر تگ Headباید نوشته شود. جی‌کوئری  برای دریاف--ت فای--ل کتابخوان--ه ی ج--ی کوئری ابتدا ب--ه وب سایت www.jQuery.comرفت-ه و فای-ل آنرا دریاف-ت نمایید .دو نسخه ی متفاوت برای دریافت وجود دارد: نس-خه ی :Productionای-ن نس-خه برای اس-تفاده آنالی-ن م-ی باش-د ،زیرا حج-م فایل فشرده و کوچک شده است. نسخه ی : Developmentاین نسخه برای تست و توسعه می باشد که ب-ه صورت کد باز قرار داده شده است. جی‌کوئری  ب-ا ج-ی کوئری شم-ا م-ی توانی-د ی-ک ج-ز HTMLرا انتخاب و ی-ک عمل را بر روی آن انجام دهید ،نگارش دستوری آن بطور ساده این گونه است: )($(selector).action ‏ عالمت :$مشخص کننده ی تع-ریف یا انتخاب جی کوئری است. ‏ قس-مت ( :)selectorمشخ-ص کننده ی درخواس-ت ی-ا جس-تجوی قسمت HTML است. ‏ قس-مت :)(actionمشخ-ص کننده ی عم-ل موردنظ-ر بر روی جز انتخاب شده است. جی‌کوئری :به عنوان مثال  $(this).hide() - hides the current element.  $("p").hide() - hides all <p> elements.  $(".test").hide() - hides all elements with class="test".  $("#test").hide() - hides the element with id="test". جی‌کوئری   بای-د توج-ه داشت-ه باشی-د ک-ه تمام متدهای جی کوئری در رخداد Document Readyنوشت-ه م-ی شون-د ،ای-ن رخداد زمان-ی اتفاق م-ی افت-د که تمام اجزای ص-فحه ی شم-ا لود شده باشند .ب-ه بیان دیگ-ر از اجرا شدن متده-ا قبل از لود شدن کامل صفحه جلوگیری می کند. {)($(document).ready(function // jQuery methods go here... ;)} جی‌کوئری  تی-م ج-ی کوئری برای راحت-ی کار ،متد ک-وتاهتری را برای رخداد Document Readyایجاد کرده است که به این صورت می توان از آن استفاده کرد: {)($(function // jQuery methods go here... ;)} ‏ ‏ ‏ جی‌کوئری  :Selectorا-ن-تخاب-گر ی--ا س--لکتور ،ب---ه ش--ما ا-م-کانا-ن-تخابو ک--ار ک--رد-نب---ا ا-جزا-ی HTMLرا م-ید-هد .ب---ه و-س-یله ی ا-ن-تخاب-گ-ر م-یت---وا-ن-ی-د ش--م-ا م-یت---وا-ن-ید ا-جزا-ی ص--فحه را ب---ر ا-س-اس ،ID، Class، attributeم-قدار attributeو ...ج-ستجو و ا-ن-تخاب ک--نید .ا-ن-تخاب-گ--ر در ج---ی ک--وئری ب-----ا عال-م---ت )($م-شخ--ص م-یش--ود. ‏ :Element Selectorای-ن انتخابگ-ر ی-ک ج-ز از ص-فحه را بر اس-اس ت-گ آن انتخاب می کند .به عنوان مثال می توانیم تمام تگ های < >Pرا انتخاب کنیم: )"$("p ‏ جی‌کوئری  ب-ه عنوان مثال ،در تک-ه ک-د زی-ر هنگام-ی ک-ه کاربر روی Buttonکلی-ک کند، تمامی تگ های < >pمخفی خواهند شد)Click( : {)($(document).ready(function {)($("button").click(function ;)($("p").hide ;)} ;)} جی‌کوئری  id Selector#:ای-ن س-لکتور از ویژگ-ی IDبرای جستجو و انتخاب اجزای ص-فحه انتخاب م-ی کند .مقدار ویژگ-ی idبای-د در ص-فحه یکت-ا باش-د ،بنابر این برای انتخاب ی-ک ج-ز ب-ه وس-یله ی IDبای-د مقدار ای-ن ویژگ-ی را ب-ه ص-ورت یکتا وارد نمایید. ‏ فرمت این سلکتور به این صورت می باشد: )"$("#test جی‌کوئری  ب-ه عنوان مثال ،در تک-ه ک-د زی-ر هنگام-ی ک-ه کاربر روی Buttonکلی-ک کن-د ،آن جز از صفحه که IDآن testباشد مخفی خواهند شد)Click( : {)($(document).ready(function {)($("button").click(function ;)($("#test").hide ;)} ;)} جی‌کوئری  :The .class Selectorا-ی-نس--لکتور ،ج-زئ-یاز ص--فحه را ک--ه از-ک-ال-سم-شخص ا-س---------------------------------------------تفاد-ه ش--ده م-یک--ند ،ا-ن-تخابم-یک--ند. ‏ فرمت این سلکتور به این صورت می باشد: )"$(".test جی‌کوئری  ب-ه عنوان مثال ،در تک-ه ک-د زی-ر هنگام-ی ک-ه کاربر روی Buttonکلی-ک کن-د ،آن ج-ز از ص-فحه ک-ه از کالس testاس-تفاده م-ی کن-د ( )"class="testمخفی خواهند شد)Click(: {)($(document).ready(function {)($("button").click(function ;)($(".test").hide ;)} ;)} جی‌کوئری :به مثال های متفاوت از کاربرد سلکتور ها توجه کنید Syntax Description $("*") Selects all elements $(this) Selects the current HTML element $("p.intro") Selects all <p> elements with class="intro" $("p:first") Selects the first <p> element $("ul li:first") Selects the first <li> element of the first <ul> $("ul li:first-child") Selects the first <li> element of every <ul> $("[href]") Selects all elements with an href attribute $ Selects all <a> elements with a target ("a[target='_blank']") attribute value equal to "_blank" جی‌کوئری $("a[target! ='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank" $(":button") Selects all <button> elements and <input> elements of type="button" $("tr:even") Selects all even <tr> elements $("tr:odd") Selects all odd <tr> elements  د به-ی توان-فحه ی وب م-ه ص-ف کاربر ک- تمام اعمال مختل:)Events( ا-رویداد ه . رویداد نامیده می شود،آن پاسخ دهد  :انواع رخدادهای متادول  Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll blur unload mouseleave جی‌کوئری  برای تعری-ف رویداد «کلی-ک» برای تمام ت-گ های < >pای-ن ص-ورت می توان عمل کرد: ;)($("p").click ‏ قدم بعدی مشخص کردن عملی است که باید انجام شود: {)($("p").click(function !!// action goes here ;)} جی‌کوئری  ب-ه عنوان مثال ،در تک-ه ک-د زی-ر هنگام-ی ک-ه کاربر روی پاراگراف < >pکلیک کند ،همان قسمت مخفی خواهد شد)Click( : {)($("p").click(function ;)($(this).hide ;)} جی‌کوئری  ب-ه عنوان مثال دوم ،در تک-ه ک-د زی-ر هنگام-ی ک-ه اشاره گ-ر وارد قسمت p1 شود ،پیغام زیر نمایش داده خواهد شد)Click( : {)($("#p1").mouseenter(function ;)"!alert("You entered p1 ;)} جی‌کوئری  در ای-ن مثال ب-ا رویداد hoverآشن-ا م-ی شویم .ای-ن رویداد دو تاب-ع را دریافت کرده و ترکیبی از رویداد )(mouseenterو رویداد )(mouseleaveمی باشد. ‏ ب-ه عنوان مثال س-وم ،در تک-ه ک-د زی-ر هنگام-ی ک-ه اشاره گ-ر ب-ه قس-مت p1وارد شود تابع اول و هنگامی که -از p1خارج شود ،تابع دوم اجرا می شود)Click( . {)($("#p1").hover(function ;)"!alert("You entered p1 }, {)(function ;)"!alert("Bye! You now leave p1 ;)} جی‌کوئری  به عنوان مثال چهارم ،در تک-ه ک-د زیر هنگام-ی کاربر روی قس-مت inputتمرکز کند ،تابع اجرا شده و رنگ پس زمینه ی آن تغییر می کند)Click( . {)($("input").focus(function ;)"$(this).css("background-color","#cccccc ;)} جی‌کوئری  در کتابخان-ه ی ج-ی کوئری افک-ت های-ی برای کار ب-ا ص-فحات وب در نظ-ر گرفته شده است ،به عنوان مثال افکت های: )(Hide() and Show ‏ )(Toggle ‏ )(Fade ‏ )(Animate ‏ جی‌کوئری  ب-ا اس-تفاده از ج-ی کوئری شم-ا م-ی توانی-د ی-ک ج-ز از ص-فحه را پنهان کرده ی-ا دوباره ظاهر کنید .با استفاده از دو تابع )(Hideو )(Showمی توان این کار را انجام داد)Click( : {)($("#hide").click(function ;)($("p").hide ;)} {)($("#show").click(function ;)($("p").show ;)} جی‌کوئری  فرمت نوشتن این دو تابع به این صورت می باشد: ;)$(selector).hide(speed,callback ;)$(selector).show(speed,callback ‏ ‏ ‏ پارامت-ر Speedمشخ-ص کننده ی س-رعت اجرای تاب-ع م-ی باش-د ک-ه ی-ک عدد با واحد میلی ثانیه یا یکی از مقادیر Slow, Fastرا دریافت می کند. ‏ پارامتر Callbackنام تابعی است که بعد از اجرای این تابع باید اجرا شود. جی‌کوئری  به عنوان مثال کاربرد پارامتر Speedبه این صورت می باشد)Click( : {)($("button").click(function ;)$("p").hide(1000 ;)} جی‌کوئری  ب-ا س-تفاده از تاب-ع )(Toggleک-ه ترکیب-ی از دو تاب-ع )(Showو )(Hideاس-ت می توانید وضعیت یک جز را عوض کنید .این تابع یک جز را که مخفی باشد ،نمایش داده و اگر مخفی نباشد آن را مخفی می ک-ند. ‏ فرم کلی این دستور به شکل زیر است: ;)$(selector).toggle(speed,callback ‏ جی‌کوئری  مثال زیر نحوه ی استفاده ی این تابع را مشخص کرده است. {)($("button").click(function ;)($("p").toggle ;)} جی‌کوئری  مثال زیر نحوه ی استفاده ی این تابع را مشخص کرده است)Click(. {)($("button").click(function ;)($("p").toggle ;)} جی‌کوئری . ها نیز در نظر گرفته شده استFade Effect در جی کوئری انواع  fadeIn()  fadeOut()  fadeToggle()  fadeTo() جی‌کوئری   تاب-ع )(FadeInی-ک ج-ز از ص-فحه ک-ه مخف-ی باش-د را ب-ه ص-ورت مه آلود نمای----------------------------ش ()Fading می دهد. ‏ فرم کلی آن به صورت زیر است: ;)$(selector).fadeIn(speed,callback ‏ جی‌کوئری )Click( : فرم های مختلف نوشتن این تابع را نمایش می دهد،مثال زیر $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); جی‌کوئری   تاب-ع )(fadeoutدقیق-ا بر عک-س تاب-ع )(fadeInعم-ل میکن-د ،یع-ن-ی ی-ک ج-ز را به صورت مه آلود ( )Fadingمحو می کند. ‏ فرم کلی این تابع به صورت زیر است: ;)$(selector).fadeOut(speed,callback ‏ جی‌کوئری )Click( : فرم های مختلف نوشتن این تابع را نمایش می دهد،مثال زیر $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); جی‌کوئری   تابع )(FadeToggleترکیبی از دو تابع )(FadeInو )(FadeOutاست، ‏ اگ-ر جز ص-فحه با تابع )(Fadeoutمخفی شده باشد ،مانند تابع )(FadeInعمل می کند. ‏ اگر جز صفحه با تابع )(FadeInنمایش داده شده باشد ،مانند تابع )(FadeOut عمل می ک-ند. ‏ فرم کلی این تابع به صورت زیر است: ;)$(selector).fadeToggle(speed,callback ‏ جی‌کوئری  تابع )(FadeToشفافیت یک جز از صفحه را با حالت مه آلود تغییر می دهد. ‏ فرم کلی آن به این صورت می باشد: ;)$(selector).fadeTo(speed,opacity,callback ‏ ‏ پارامتر Opacityمشخص کننده ی میزان شفافیت جز از 0تا 1است. جی‌کوئری )Click(.این مثال کاربرد و طرز استفاده ی این تابع را بیان می کند $("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); }); جی‌کوئری   در ج-ی کوئری چندی-ن تاب-ع اس-الیدی برای افک-ت دادن ب-ه ص-فحات تعریف شده است: )(slideDown ‏ )(slideUp ‏ )(slideToggle ‏ جی‌کوئری  تابع )(SlideDownیک جز از ص-فحه را مانن-د پرده (از باال به پایین) نمایش می دهد. ‏ فرمت کلی این دستور به این صورت است: ;)$(selector).slideDown(speed,callback ‏ جی‌کوئری  ب-ه عنوان مثال در تک-ه ک-د زی-ر ،هنگام-ی ک-ه کاربر روی قس-مت flip#کلی-ک کند، قسمت panel#به صورت اسالیدی (از باال به پایین) ظاهر می شود)Click( . {)($("#flip").click(function ;)($("#panel").slideDown ;)} جی‌کوئری  تابع )(SlideUpیک جز از صفحه را مانند پرده (از پایین به باال) پنهان می کند. ‏ فرمت کلی این دستور به این صورت است: ;)$(selector).slideUp(speed,callback ‏ جی‌کوئری  ب-ه عنوان مثال در تک-ه ک-د زی-ر ،هنگام-ی ک-ه کاربر روی قس-مت flip#کلی-ک کند، قسمت panel#به صورت اسالیدی (از پایین به باال) پنهان می شود)Click( . {)($("#flip").click(function ;)($("#panel").slideUp ;)} جی‌کوئری  تابع )(slideToggleنی-ز ترکیب-ی از ه-ر دو تابع )(slideDownو )(slideUpمی باشد .به این صورت که: ‏ اگ-ر ج-ز ب-ا تابع )(slideDownظاه-ر شده باش-د ،مانن-د تاب-ع )(slideUpآن را مخفی می کند. ‏ اگ-ر ج-ز ب-ا تاب-ع )(slideUpمخف-ی شده باش-د ،مانن-د تاب-ع )(slideDownآن را ظاهر می کند. ;)$(selector).slideToggle(speed,callback جی‌کوئری  در این مثال طرز استفاده ی این تابع مشخص شده است)Click(. {)($("#flip").click(function ;)($("#panel").slideToggle ;)} جی‌کوئری  در ج-ی کوئری ب-ا اس-تفاده از تاب-ع )(Animateم-ی توانی-م انیمیش-ن های جدید تع-ریف کنیم .فرمت کلی آن به این صورت است. ;)$(selector).animate({params},speed,callback پارامتر paramsمقادیر CSSجدید را برای شی تعیین می کند. جی‌کوئری  در ای-ن مثال ،زمان-ی ک-ه کاربر روی Buttonموجود ک-لی-ک کن-د ،قس-مت divبه حرکت کرده تا زمانی که ویژگی Leftآن 250پیکسل برسد)Click( . {)($("button").click(function ;)}'$("div").animate({left:'250px ;)} ‏ توج-ه کنی-د ک-ه ب-ه ص-ورت پی-ش فرض ،اجزای HTMLویژگ-ی Positionآن staticاس-ت ک-ه نم-ی توان-د حرک-ت داده شود .بنابرای-ن فراموش نکنی-د که برای ای-ن کار ،ابتدا ی-ک CSSتعری-ف کرده و ویژگ-ی Positionآ-ن را ب-ا مقادیر relative, fixed, absoluteمقداردهی کنید. جی‌کوئری  در ای-ن مثال ،زمان-ی -ک-ه کاربر روی Buttonموجود کلی-ک کن-د ،قس-مت divبه ویژگ-ی های تعریف شده تغییر می ک-نند)Click( . {)($("button").click(function {($("div").animate ‏left:'250px', ‏opacity:'0.5', ‏height:'150px', 'width:'150px ;)} ;)} جی‌کوئری  نکته ی اول اینک-ه :توجه داشت-ه باشی-د ک-ه م-ی توانی-د چندین ویژگ-ی را همزمان با هم تغییر دهید. ‏ نکت-ه ی دوم اینک-ه :شم-ا م-ی توانی-د تمام-ی ویژگ-ی های موجود در CSSها را دستکاری کنید. ‏ نکت-ه ی س-وم اینک-ه :همچنی-ن کتابخان-ه ی کار ب-ا رن-گ ه-ا ب-ه ص-ورت جداگ-ان-ه باید دانلود و ضمیمه شود. جی‌کوئری )Click( : شرح داده شده است+- و+= استفاده از متغیر های،در این مثال $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); جی‌کوئری  ه عنوان مقادیر- بToggle وHide وShow ه های-تفاده از کلم- اس،ن مثال-در ای )Click( :شرح داده شده است $("button").click(function(){ $("div").animate({ height:'toggle' }); }); جی‌کوئری   ب-ه ص-ورت پی-ش فرض ،ج-ی کوئری ب-ا ی-ک کارای-ی ص-ف مانن-د انیمیش-ن ارائ-ه می شود ،یع-ن-ی در ص-ورتی ک-ه چندی-ن تاب-ع )(Animateپش-ت س-ر ه-م نوشته شود، جی کوئری یک صف درونی ایجاد ک-رده و آن ها را تک تک اجرا می کند. جی‌کوئری )Click( . معنای صف در انیمیشن پیاده سازی شده است،در این مثال $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); جی‌کوئری   تاب-ع )(Stopدر ج-ی کوئری باع-ث توق-ف انیمیش-ن قب-ل از اجرای کام-ل آ-ن می شود. ‏ فرم کلی این تابع به این صورت است: ;)$(selector).stop(stopAll,goToEnd ‏ ‏ پارامت-ر اختیاری ،stopAllباع-ث متوق-ف شدن تمام انیمیشن های موجود در صف می شود .به صورت پیش فرض این پارامتر غیرفعال است. ‏ پارامت-ر اختیاری ،goToEndمشخ-ص م-ی کن-د ک-ه آی-ا انیمیش-ن جاری بالفاصله خاتمه یابد یا خیر .به صورت پیش فرض این پارامتر غیرفعال است. جی‌کوئری  در این مثال ،کاربرد اصلی تابع )(stopشرح داده می شود)Click( . {)($("#stop").click(function ;)($("#panel").stop ;)} جی‌کوئری  ک-د های ج-ی کوئری و جاوا اس-کریپت ب-ه ص-ورت خ-ط ب-ه خ-ط اجرا می شوند. اگ-ر چ-ه ممک-ن اس-ت گاه-ی در حال انجام افک-ت ه-ا ،ک-د بعدی قب-ل از اتمام کد قبلی اجرا شده و باعث ایجاد خطا شود. ‏ برای اجتناب از ای-ن خطاه-ا م-ی توانی-م از Callback Functionه-ا استفاده کنیم. ‏ یک Callback Functionبعد از اتمام افکت جاری اجرا می شود. ‏ فرمت کلی آن به این صورت است: ;)$(selector).hide(speed,callback جی‌کوئری د از اجرای-ه بع-ت ک-ف شده اس- تعریCallback Function ک- ی،ن مثال-در ای )Click( :افکت اجرا می شود $("button").click(function(){ $("p").hide("slow",function(){ alert("The paragraph is now hidden"); }); }); جی‌کوئری   قبل از،ه پیغام-ت ک-ف نشده اس- تعریCallback Function ،ن مثال-در ای )Click( :اجرای افکت نمایش داده می شود $("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden"); }); جی‌کوئری   در ج-ی کوئری شم-ا م-ی توانی-د چندی-ن تاب-ع را ب-ه ه-م زنجیروار متص-ل کنید .این تکنیک به شم-ا این امکان را م-ی ده-د ک-ه در یک جمله چندین تابع را روی یک جز اجرا کنید. ‏ نکت-ه :در ای-ن روش ،مرورگ-ر برای اجرای چندی-ن دس-تور تنه-ا ی-ک بارب-ه دنبال جز می گردد. ‏ برای نوشت-ن تواب-ع ب-ه ای-ن روش کافیس-ت تنه-ا تواب-ع را پش-ت س-ر ه-م ب-ا عالمت . (نقطه) به هم متصل کنید. جی‌کوئری  در ای-ن مثال ،ابتدا رنگ قس-مت p1قرم-ز شده س-پس به طرف باال و در آخ-ر به طرف پایین باز می شود)Click( : ;)$("#p1").css("color","red").slideUp(2000).slideDown(2000 جی‌کوئری  یک-ی از ویژگ-ی های مه-م ج-ی کوئری امکان دس-تکاری DOMهاس-ت .جی کوئری ب-ه همراه ی-ک س-ری از تواب-ع مرتب-ط ب-ا DOMارائ-ه شده اس-ت که دسترسی و دستکاری اشیا و ویژگی ها را بسیار آسان می سازد. ‏ ‏DOM = Document Object Model ‏ DOMی--کا-س-تاندارد ب---را-ید-س-ترس-یب---ه ب---ه HTMLو XMLت---ع-ری-فم-یک--ند. جی‌کوئری  سه متد ساده و کارآمد جهت دستکاری به DOMدر جی کوئری عبارتند از: ‏ :)(Textب---را-یم-قدارد-هیی--ا م-قدار-گ-یریق -س-متم-تن-یی---کج-ز از ص--فحه ب---ه ک--ار م-یرود. ‏ :)(Htmlب---را-یم-قدارد-هیی--ا م-قدار-گ-یریم-ت-نی---کق -س-متب---ه ه-مرا-ه ک--د HTML ب---ه ک--ار م-یرود. ‏ :)(Valب---را-یم-قدارد-ه-یی---ا م-قدار-گ-یریاز ی---کف--یل-د ق -س-متف--رم ص--فحه ب---ه ک--ار م-یرود. جی‌کوئری )Click( .() را شرح می دهدHTML () وtext در مثال زیر طرز استفاده از دو متد $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); جی‌کوئری همچنی-ن در ای-ن مثال ،طرز اس-تفاده از مت-د )(valبرای خواندن مقدار ی-ک فیلد شرح داده شده است)Click( . {)($("#btn1").click(function ;))(alert("Value: " + $("#test").val ;)} جی‌کوئری برای دریاف-ت مقدار ی-ک ویژگ-ی از اجزا از مت-د )(attrاس-تفاده م-ی کنیم .مثال زیر نحوه ی استفاده از این تابع را شرح می دهد)Click( . {)($("button").click(function ;))"alert($("#w3s").attr("href ;)} جی‌کوئری )Click( . تابع آشنا می شوید3 با نوشتن مقادیر با این-ور کامل-در این مثال به ط $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); جی‌کوئری ( .ت-تفاده شده اس-() اسtext ع-ه همراه تاب- بCallback Function از،ن مثال-در ای )Click $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); جی‌کوئری ( .ت-تفاده شده اس-() اسhtml ع-ه همراه تاب- بCallback Function از،ن مثال-در ای )Click $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world! </b> (index: " + i + ")"; }); }); جی‌کوئری از مت-د )(attrبرای تعیی-ن ی-ا تغیی-ر ویژگ-ی ی-ک ج-ز از ص-فحه ب-ه کار م-ی رود .ب-ا یک مثال، طرز استفاده از آن را توضیح می دهیم)Click( . {)($("button").click(function ;)"$("#w3s").attr("href","http://www.w3schools.com/jquery ;)} جی‌کوئری  به،م-ی کنی-ه طور همزمان مقدار ده-ی را ب-ن ویژگ-م چندی-ی توانی-د م-ن مت-ا ای-ن ب-همچنی )Click( :مثال زیر توجه کنید $("button").click(function(){ $("#w3s").attr({ "href" : "http://www.w3schools.com/jquery", "title" : "W3Schools jQuery Tutorial" }); }); جی‌کوئری در ای-ن مثال ب-ا اضاف-ه کردن ی-ک Callback Functionم-ی توانی-م تاب-ع دومی برای تشکی-ل مقدار ویژگ-ی تشکی-ل دهی-م ،در مثال زی-ر ای-ن کار پیاده س-ازی شده اس-ت( . )Click {)($("button").click(function {)$("#w3s").attr("href", function(i,origValue ;"return origValue + "/jquery ;)} ;)} جی‌کوئری در ج-ی کوئری برای اضاف-ه کردن محتوای جدی-د ب-ه ص-فحه 4 ،مت-د اص-لی تعریف شده است: ‏ :)(Appendی--کم-حتوا-یج-دید ب---ه ا-ن-ته-ایش--ئج-ار-یدر-ج م-یک--ند. ‏ :)(prependی--کم-حتوا-یج-دید ب---ه ا-ب-تدا-یش--ئج-ار-یدر-ج م-یک--ند. ‏ :)(afterی--کم-حتوا-یج-دید ب---ع-د از ش--ئج-ار-یدر-ج م-یک--ند. ‏ :)(beforeی--کم-حتوا-یج-دید ق--بلاز ش--ئج-ار-یدر-ج م-یک--ند. جی‌کوئری  ب-ه عنوان مثال اول ،مت-د )(appendی-ک مت-ن را ب-ه انتهای مت-ن موجود در تگ < >pاضافه می کند)Click( . ;)"$("p").append("Some appended text. جی‌کوئری  ب-ه عنوان مثال دوم ،مت-د )(prependی-ک مت-ن را ب-ه ابتدای مت-ن موجود در تگ < >pاضافه می کند)Click( . ;)"$("p").prepend("Some prepended text. جی‌کوئری ک متن را-د ی-ت جدی-ه حال-ه س-() بappend () وprepend د- مت،وم-ه عنوان مثال س-ب )Click( .به کد شما اضافه می کنند function appendText() { var txt1="<p>Text.</p>"; // Create element with HTML var txt2=$("<p></p>").text("Text."); // Create with jQuery var txt3=document.createElement("p"); // Create with DOM txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); } جی‌کوئری // Append the new elements   ب-ه عنوان مثال چهارم ،در ای-ن مثال ب-ا اس-تفاده از تواب-ع )(afterو )(beforeما یک محتوای جدید ،قبل و بعد جز مورد نظر درج می ک-نیم)Click( . ;)"$("img").after("Some text after ;)"$("img").before("Some text before جی‌کوئری  حالت جدید محتوای3 () وbefore () وafter در این مثال با توابع،به عنوان مثال پنجم )Click( .جدید را قبل و بعد جز مورد نظر درج می کنیم  function afterText() { var txt1="<b>I </b>"; // Create element with HTML var txt2=$("<i></i>").text("love "); // Create with jQuery var txt3=document.createElement("big"); // Create with DOM txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); } جی‌کوئری // Insert new elements after img  در ج-ی کوئری ب-ه راحت-ی م-ی توانی-م ی-ک ج-ز را از ص-فحه حذف نمایی-م ،ب-ه این صورت که)Click( : ;)($("#div1").remove ‏ ‏ در ص-ورت حذف ی-ک ج-ز از ص-فحه ،تمام اجزای داخل-ی آ-ن (فرزندان) نیز حذف خواهند شد! جی‌کوئری  همچنی-ن در ج-ی کوئری ب-ه راحت-ی م-ی توانی-م فرزندان یک ج-ز را از صفحه حذف نماییم ،به این صورت که)Click( : ;)($("#div1").empty ‏ جی‌کوئری  ب-ه عنوان مثال ،اگ-ر بخواهی-م فیلت-ر خاص-ی برای حذف اجزا اعمال کنی-م ،آن فیلت-ر را ب-ه عنوان پارامت-ر ب-ه مت-د )(removeارس-ال م-ی ک-نیم .مثال زی-ر تمامی اس------تفاده ‏italic کالس از ک------ه های------ی پاراگراف می کنند را حذف می کند)Click( : ;)"$("p").remove(".italic جی‌کوئری  در ج-ی کوئری 4مت-د اص-لی برای دس-تکاری خود CSSه-ا نی-ز تعریف شده است .این متدها عبارتند از: ‏ :)(addClassی--کی--ا چ-ند ک--ال-سب---ه ج-ز ا-ن-تخابش--ده ا-ضاف-ه م-یک--ند. ‏ :)(removeClassی--کی--ا چ-ند ک--ال-سب---ه ج-ز ا-ن-تخابش--ده ا-ضاف-ه م-یک--ند. ‏ تب---ی-ندو ح-ا--لتق--بل-یج-اب-جای-یا-ن-جام :)(toggleClassت---رک-یب-یاز دو م-ت-د ق--بل-یا-س ، م-ید-هد. ‏ :)(cssب---را-یب---رگردا-ندنی--ا ت---عیینم-قدار و-یژگ-ی CSSها ب---ه ک--ار م-یرود. جی‌کوئری  برای شروع کار با این 4متد ،این استایل را برای مثال های بعدی در نظر بگیرید: .important { ;font-weight:bold ;font-size:xx-large } .blue { ;color:blue } جی‌کوئری  در مثال اول ،م-ا ب-ا اس-تفاده از تاب-ع )(addclassی-ک کالس ب-ه اجزای صفحه نس-بت م-ی دهی-م ،البت-ه توج-ه داشت-ه باشی-د ک-ه م-ی توان چندی-ن جز را همزمان انتخاب کرد)Click( : {)($("button").click(function ;)"$("h1,h2,p").addClass("blue ;)"$("div").addClass("important ;)} جی‌کوئری  در مثال دوم ،م-ا ب-ا اس-تفاده از تاب-ع )(removeclassیک کالس را از اجزای حذف ص-----------------------------------------------فحه می کنیم)Click( : {)($("button").click(function ;)"$("h1,h2,p").removeClass("blue ;)} جی‌کوئری  در مثال س-وم ،م-ا ب-ا اس-تفاده از تاب-ع )(toggleclassیک کالس را از اجزای صفحه حذف و اضافه می کنیم)Click( : {)($("button").click(function ;)"$("h1,h2,p").toggleClass("blue ;)} جی‌کوئری  در ج-ی کوئری مت-د )(CSSبرای برگرداندن مقدار یک ویژگ-ی CSSاس-تفاده می شود. ;)"css("propertyname برای برگرداندن یک ویژگی)Click( : ;)"$("p").css("background-color جی‌کوئری  فرم کلی این متد برای انتساب یک مقدار به این صورت است: ;)"css("propertyname","value ‏ ‏ ب-ه عنوان مثال برای انتس-اب رن-گ زرد ب-ه ای-ن ص-ورت پیاده س-ازی م-ی شود( : )Click46 ;)"$("p").css("background-color","yellow ‏ جی‌کوئری  فرم کلی این متد برای انتساب چندین مقدار همزمان به این صورت است: ;)}css({"propertyname":"value","propertyname":"value",... ‏ ‏ ب-ه عنوان مثال برای انتس-اب رن-گ زرد و س-ایز 200ب-ه ای-ن ص-ورت پیاده سازی می شود)Click47( : ;)}"$("p").css({"background-color":"yellow","font-size":"200% ‏ جی‌کوئری AJAX Asynchronous JavaScript and XML.  آژاک-س ،تکنی-ک تبادل اطالعات ب-ا ی-ک س-رور و بروزرس-انی بخ-ش های صفحات وب بدون بارگذاری مجدد تمام صفحه می باشد. ‏ آژاک-س در س-ال 2005توس-ط گوگ-ل و سرویس ()Google Suggest محبوبیت پیدا کرد. ‏ Google Suggestب---ا ا-س-تفاد-ه از آژا-ک-س ب---ا ت---ای-په-ر ک--ارا-ک-تر در ن--وار ج-س-تجو ،آ-نرا ب---ه س--رور ار-س-ا-لم-یک--ن-د و س--رور ی---کل--یس-تب---ه عنوا-نن--تیجه ی ج-ستجو ب---ر م-یگ--ردا-ند. ‏ مثال های-ی از کاربرد آژاک-س ،م-ی توان به GMAILو Google Mapsو ... اشاره کرد. آژاکس  آژاکس ،مبتنی بر استاندارد های اینترنت است و از ترکیب: ‏ :XMLHttpRequest objectب---را-یت---باد-لا-ط-ال-عاتغ-یر ه-مزمانب---ا س--رور ‏ :JavaScript/DOMب---را-ین--مای-شو ت---ع-ام-لب---ا ا-ط-ال-عات ‏ :CSSب---را-یف--رم داد-نب---ه ا-ط-ال-عات ‏ تط-ال-عات :XMLب---را-یا-س-تفاد-ه ب---ه عنوا-نم-دلب---را-یار-سا-لو در-یاف ا- ‏ نکته :برنامه های آژاکس سیستم عامل و مرورگر مستقل هستند! آژاکس  برای درک بهت-ر آژاک-س ،ب-ا ی-ک مثال شروع م-ی کنیم .مثال زی-ر را اجرا کنید و نتیجه را ببینید!()Example1 ‏ ای-ن مثال دارای ی-ک قس-مت( )divو ی-ک دکم-ه ( )buttonم-ی باشد .ای-ن دکمه تابع-ی به اسم )(loadXMLDocرا فراخوانی می کند. آژاکس <!DOCTYPE html> <html> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" Content</button> </body> </html> آژاکس onclick="loadXMLDoc()">Change :-افه می کنیم-> اضhead< > را به در تگscript< تگ،سپس برای نوشتن کد های آژاکس <head> <script> function loadXMLDoc() { .... AJAX script goes here ... } </script> </head> آژاکس   تمام مرورگرهای جدی-د (غی-ر از IE5و )IE6از آبجکت XMLHttpRequest پشتیبان-ی م-ی کنند .ای-ن ش-ی برای ارس-ال و دریاف-ت داده ه-ا در پش-ت صحنه اس-تفاده م-ی شود .بنابرای-ن امکان بروز کردن بخ-ش های صفحه ی وب بدون بارگذاری مجدد کل آن امکان پذیر است! ‏ برای ایجاد یک نمونه XMLHttpRequestبه این صورت عمل می کنیم: ;)(variable=new XMLHttpRequest ‏ ‏ همچنین برای مرورگر های IE5و :IE6 ;)"variable=new ActiveXObject("Microsoft.XMLHTTP ‏ آژاکس ی می- پشتیبانXMLHttpRequest ا از-ه آی-م ک-ی کنی-ک م- ابتدا چ،ا-حال برای کنترل مرورگره : ایجاد می کنیمActiveXObject کند؟ در غیر این صورت یک var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } آژاکس   برای ارس-ال ی-ک درخواس-ت ب-ه س-رور از مت-د های )(Openو )(Sendای-ن شی استفاده می ک-نیم: ;)xmlhttp.open("GET","ajax_info.txt",true ;)(xmlhttp.send آژاکس  فرم کلی متد )(Openبه این صورت است: ‏ ::methodرو-شار-سا-لدر-خوا-س-ت Getو Post ‏ :urlم-سیر ار-سا-لدر-خوا-س-تب---ه س--رور ‏ :asyncم-قدار Trueی--عنیار-سا-لغ-یر ه-مزمانو Falseی--عنیار-سا-له-مزمان )open(method,url,async ‏ آژاکس  فرم کلی متد )(sendبه این صورت است: ‏ هتر-سا-لب---ا رو-ش Postا-س-تفاد-ه م-یش--ود. :Stringج ا )send(string ‏ آژاکس :Get یک مثال ساده از ارسال درخواست به روش   xmlhttp.open("GET","demo_get2.asp? fname=Henry&lname=Ford",true); xmlhttp.send(); آژاکس  :Post یک مثال ساده از ارسال درخواست به روش   xmlhttp.open("POST","ajax_test.asp",true);  xmlhttp.setRequestHeader("Content-type","application/xwww-form-urlencoded");  xmlhttp.send("fname=Henry&lname=Ford"); آژاکس  ویژگ-ی ارس-ال و دریاف-ت غیرهمزمان آژاک-س ی-ک مزیت بزرگ برای طراحان وب محس-وب م-ی شود ،بس-یاری از وظایف-ی ک-ه روی س-رور انجام م-ی شوند زمان زیادی را مص-رف م-ی کنن-د و قب-ل از آژاک-س ای-ن مس-اله گاه-ی باعث بروز خط-ا و توق-ف ص-فحه میشد .ب-ا وجود آژاک-س ،جاوا اس-کریپت مجبور ب-ه صبر کردن برای دریافت پاسخ از سرور نیست ،اما می تاند در کنار آن: ‏ اسکریپت های دیگر را در کنار انتظار برای پاسخ سرور اجرا کند. ‏ زمانی که پاسخ سرور آماده شد ،با آن برخورد ک-ند. آژاکس ت شد در-خ دریاف-ه پاس-ی ک-ع برای اجرا در زمان-ک تاب- ی،د- کنی-ی-تفاده م- اسasync=true ه از-ی ک-هنگام : کنید- تعریفonreadystatechangeرویداد xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); آژاکس   برای اس-تفاده از حال-ت ،async=falseس-ومین پارامت-ر تاب-ع )(Openرا به Falseتغییر دهید. ;)xmlhttp.open("GET","ajax_info.txt",false ‏ ‏ نکت-ه :در ای-ن روش ،جاوااس-کریپت ت-ا زمان-ی ک-ه پاس-خ س-رور را دریاف-ت نکن-د به اجرا ادام-ه نخواه-د داد و اگ-ر ای-ن زمان طوالن-ی شود باع-ث بروز خط-ا ی-ا توقف آن می شود. آژاکس  برای دریاف-ت پاس-خ از س-رور ،از ویژگ-ی responseTextیا responseXML از شی XMLHttpRequestاستفاده کنید. ‏ :responseTextپ---اس-خ را ب---ه عنوا-نر-ش-ته ب---ر م-یگ--ردا-ند. ‏ :responseXMLپ---اس-خ را ب---ه عنوا-نداد-ه ی XMLب---ر م-یگ--ردا-ند. آژاکس  در ص-ورتی ک-ه پاس-خ س-رور شم-ا ی-ک داده ی XMLنم-ی باش-د ،از ویژگی responseTextاس-تفاده کنی-د ،ک-ه م-ی توانی-د مس-تقیما از آ-ن ب-ه عنوان ی-ک متن استفاده کنید: ‏document.getElementById("myDiv").innerHTML=xmlhttp.resp ;onseText ‏ آژاکس د آن را-ا بخواهی- و شم،د-ی باش- مXML ک داده ی-ا ی-رور شم-خ س-ه پاس-رتی ک-و-در ص ( .تفاده کنید-- اسresponseXML ی-- از ویژگ،د-- برگردانیXML ی--ک ش--د ی--مانن )Example2 xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("myDiv").innerHTML=txt; آژاکس  : به جدول زیر توجه نماییدonreadystatechange برای استفاده از رویداد Property Description Stores a function (or the name of a function) to be called onreadystate automatically each time the readyState property change changes readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready status 200: "OK" 404: Page not found آژاکس   ای-ن مثال نشان م-ی ده-د ک-ه زمان-ی کاربر در حال تای-پ اس-ت ،ی-ک صفحه ی وب چگونه با یک سرور ارتباط برقرار می کند. ‏ ‏Example_3 ‏ هنگام-ی ک-ه کاربر کاراکتری را تای-پ م-ی کن-د ،تاب-ع )(showHintکه در رویداد onkeyupنوشته شده است ،اجرا می شود. آژاکس  شرح این کد: ‏ اگ-ر قس-مت ورود مت-ن خال-ی باش-د ،تاب-ع مقدار قس-مت txtHintحذف کرده و ت-ابع تمام می شود. ‏ در غیر ایینصورت ،تابع )(showHintبه ترتیب: ‏ ‏ یک نمونه از XMLHttpRequestتعریف می کند. ‏ یک تابع برای اجرا تا زمان دریافت پاسخ از سرور تعریف می کند. ‏ درخواست را به یک فایل روی سرور ارسال می کند. ‏ توج-ه داشت-ه باشی-د ک-ه ی-ک پارامت-ر ( )Qبه URLاضافه شده اس-ت ،ک-ه مقدار تایپ شده ی کاربر است. فایل-ی ک-ه توس-ط جاوا اس-کریپت از س-رور درخواس-ت م-ی شود به نام gethint.php است که حاوی یک -تکه کد ساده ی تطبیق الگو و جستجو در آرایه است. آژاکس  در ای-ن مثال ،نشان م-ی دهی-م ک-ه چگون-ه ی-ک ص-فحه ی وب چگون-ه ب-ه وسیله ی آژاک-س اطالعات را از یک پایگاه داده دریافت و نمایش می دهد. ‏ هنگامی که کاربر یک آیتم را انتخاب کند ،تابع )(showUserاجرا می شود: چک می کند که آیا کاربر یک آیتم را انتخاب کرده است؟ یک نمونه از XMLHttpRequestتعریف می کند. یک تابع برای اجرا تا زمان دریافت پاسخ از سرور تعریف می کند. درخواست را به یک فایل روی سرور ارسال می کند. ‏ توج-ه داشت-ه باشی-د ک-ه ی-ک پارامت-ر ( )Qبه URLاضاف-ه شده اس-ت ،که مقدار تایپ شده ی کاربر است. آژاکس  هنگامی که درخواست توسط جاوا اسکریپت به فایل PHPارسال شود: PHP ی--کک--ان-کشنرا ب---ه س--مت MySQLب---از م-یک--ند. شخص مورد نظر یافت می شود. ی-ک جدول HTMLتولی-د شده و فرس-تاده م-ی شود ت-ا در قسمت txtHintقرار گیرد. آژاکس ...تمام شد سوالی هست؟؟؟ :منبع ‏WWW.W3SCHOOL.COM