[h=2]مقدمه و معرفی jQuery[/h] jQuery چیست ؟ jQuery یک کتابخانه استاندارد و آماده شامل تعدادی متد و توابع نوشته شده به زبان JavaScript می باشد . از توابع و متدهای این کتابخانه برای کار با عناصر و تگ های موجود در صفحات HTML , ASP.Net و یا PHP استفاده می شود . به طور کلی با استفاده از این متدهای از پیش تعریف شده ، می توانید تغییراتی را در عناصر و تگ های HTML ایجاد کرده و یا نحوه نمایش آنها را تغییر دهید . برای مثال می توانید یک عنصر HTML را با کلیک بر روی یک دکمه فرمان پنهان کرده و یا در صورت مخفی بودن آن را نمایش دهید . زبان jQuery دارای یک شعار معروف است . این شعار می گوید کمتر بنویسید ، بیشتر انجام دهید ( write less , do more ) . به طور کلی کتابخانه jQuery شامل موارد زیر می باشد : در استفاده از jQuery شما نیاز ندارید برای انجام کارهای مورد نظرتان یک تابع جدید بنویسید . فقط کافی است عنصر مورد نظر خود را انتخاب کرده و سپس متد مورد نظر را فراخوانی نموده تا آن عنصر را تغییر دهد . قبل از مطالعه و استفاده از بخش jQuery ، شما بایستی با مطالب زیر آشنایی کامل داشته باشید : HTML CSS JavaScript [HR][/HR] نحوه استفاده از کتابخانه jQuery : همانطور که گفتیم ، jQuery دارای یک کتابخانه استاندارد و آماده می باشد . شما بایستی برای استفاده از jQuery ، فایل این کتابخانه را به صفحه خود متصل کنید . کتابخانه jQuery در یک فایل مجزا که از نوع فایل های JavaScript و با نام jQuery.js است ، نگهداری می شود . شما برای اتصال فایل این کتابخانه به صفحه مورد نظرتان از 2 روش می توانید استفاده کنید : دانلود فایل کتابخانه jQuery بر روی کامپیوتر و یا سرور سایت خودتان و سپس اتصال آن به صفحه . استفاده از فایل کتابخانه jQuery بر روی سرورهای آنلاین مثل سرور Microsoft یا Google . در ادامه به معرفی 2 روش فوق می پردازیم . روش اول : در روش اول شما بایستی جدیدترین فایل کتابخانه jQuery را از سایت jQuery: The Write Less, Do More, JavaScript Library دانلود کرده و سپس آن را در پوشه اصلی سایت خود قرار دهید . سپس با استفاده از یک تگ < Script > که در قسمت < Head > صفحه قرار می دهید ، فایل کتابخانه را به صفحه متصل کنید . در قسمت زیر این روش را نشان داده ایم : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] < head > < script type = " text/javascript " src="jquery.js" > < /script > < /head > [/TD] [/TR] [/TABLE] روش دوم : در روش دوم ، شما لینک دسترستی به فایل کتابخانه jQuery ، که بروی سرور مورد نظرتان است را در یک تگ < Script > و در قسمت < Head > صفحه قرار می دهید . در این حالت صفحه در هنگام لود شدن ، به سرور وصل شده و از کتابخانه آنلاین استفاده می کند . در قسمت زیر هر 2 لینک و طریقه استفاده از آنها را نمایش داده ایم : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax ( سرور مایکروسافت ) [/TD] [TD="class: prdes, align: left"] < head > < script type = " text/javascript " src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js " > < /script > < /head > [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax ( سرور گوگل ) [/TD] [TD="class: prdes, align: left"] < head > < script type = " text/javascript " src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js " > < /script > < /head > [/TD] [/TR] [/TABLE] پس از اتصال کتابخانه jQuery به صفحه خودتان ، هر زمان که یک متد jQuery را فراخوانی می کنید ، برنامه سورس آن متد را از کتابخانه دریافت کرده و سپس اجرا می نماید . در مثال بخش بعد به روش کلی کار با توابع jQuery و یک نمونه از کاربرد آن اشاره می نماییم . [HR][/HR] یک مثال از کاربرد jQuery : jQuery کاربردهای جالب و فراوانی دارد و به طراحان وب توانایی های زیادی را برای خلق جلوه ها و دینامیک کردن صفحات می دهد . در مثال زیر روش کلی استفاده از ساختار jQuery را نشان داده و یکی از کاربردهای مهم آن یعنی پنهان کردن عناصر موجود بر روی صفحه را نمایش می دهیم . در مثال زیر یک صفحه فرضی با 2 پاراگراف و یک تیتر داریم . می خواهیم تا کاربر بتواند با کلیک بر روی یک دکمه فرمان پارگراف های موجود در صفحه را پنهان کند . روش کار به این شرح است : در ابتدا به وسیله یکی از لینک های معرفی شده ، صفحه خود را به کتابخانه jQuery متصل کرده ایم . سپس یک دکمه فرمان و یک تیتر و 2 پاراگراف را بروی صفحه ایجاد کرده ایم . با کلیک کاربر بر روی دکمه فرمان ، متد ( ) Hide که یکی از متدهای jQuery است ، اجرا شده و باعث می شود تا تمام پاراگراف های ( تگ های < p > ) موجود بر روی صفحه پنهان شوند . همانطور که در خروجی مشاهده می کنید تابع ایجاد شده فقط بر روی عناصری که تگ آنها از نوع < p > ( پاراگراف ) است ، اثر می گذارد و مثلا با تگ تیتر < h2 > کاری ندارد . برای مشاهده عملکرد مثال ، بر روی دکمه فرمان خروجی کلیک نمایید . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < 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> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [h=2]This is a heading[/h] This is a paragraph . This is another paragraph. Click me [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : آموزش jQuery [h=2]ساختار دستوری jQuery[/h] ساختار دستوری jQuery : در قسمت مقدمه ، شما را با یک مثال از زبان jQuery آشنا کردیم . دراین فسمت قصد داریم تا ساختار کلی jQuery را به شما آموزش دهیم . در jQuery شما بیستی ابتدا عنصر یا عناصری که می خواهید در صفحه تغییر دهید ، را انتخاب کنید . سپس متد مورد نظرتان را بر روی آن اجرا نمایید . ساختار کلی دستور jQuery به صورت زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( Selector ) . action ( ) [/TD] [/TR] [/TABLE] در ادامه به توضیح مفهوم ساختار فوق می پردازیم : 1 : علامت $ : این علامت ، علامت خاص زبان jQuery است . این علامت را بایستی در ابتدای هر خط دستوری زبان jQuery قرار دهید . به این وسیله مرورگر تشخیص می دهد که کد نوشته شده ، به زبان $ است و باید چگونه آن را اجرا نماید . 2 : انتخاب کننده ( Selector ) : در قسمت دوم شما باید عنصر و یا عناصر مورد نظر خود را به وسیله انواع انتخاب کننده ( Selector ) انتخاب نمایید . 4 روش برای انتخاب عنصر مورد نظرتان وجود دارد . انتخاب خود عنصر جاری ، انتخاب بر حسب نوع عنصر ، انتخاب بر حسب کلاس ( class ) عنصر و یا انتخاب بر حسب شناسه ( Id ) عنضر . در مثال های زیر انواع این حالت را نمایش می دهیم . در این مثال ها از متد ( ) Hide که باعث پنهان شدن عنصر می شود ، استفاده شده است . در بخش بعدی به طور کامل تر به نحوه انتخاب عناصر در jQuery می پردازیم . مثال های این بخش صرفا برای آشنایی با ساختار این زبان است . انتخاب خود عنصر جاری : این کد باعث می شود تا متد مورد نطر بر روی عنصر جاری اجرا شده و آن را پنهان می کند . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( this ) . hide ( ) [/TD] [/TR] [/TABLE] انتخاب بر حسب نوع کلی عنصر : این کد باعث می شود تا متد مورد نظر بر روی کلیه عناصر از نوع تعیین شده اجرا شود . در مثال زیر اجرا متد کلیه عناصری که از نوع پاراگراف ( < p > ) هستند را پنهان می کند . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( "p" ) . hide ( ) [/TD] [/TR] [/TABLE] انتخاب بر حسب کلاس ( class ) عنصر : این کد باعث می شود تا متد مورد نظر بر روی کلیه عناصر از کلاس تعیین شده اجرا شود . در مثال زیر اجرا متد کلیه عناصری را که از نوع پاراگراف بوده و جز کلاس ( test ) هستند را پنهان می کند . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( "p.text" ) . hide ( ) [/TD] [/TR] [/TABLE] انتخاب بر حسب شناسه ( Id ) عنصر : این کد باعث می شود تا متد مورد نظر بر روی کلیه عنصری که شناسه انحصاری آن ) Id ) تعیین شده اجرا شود . در مثال زیر اجرا متد عنصری را که Id آن برابر با و جز کلاس ( test ) می باشد را پنهان می کند . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( "#.test" ) . hide ( ) [/TD] [/TR] [/TABLE] 3 : انتخاب متد ( action ) : در قسمت سوم شما متدی را که می خواهید بر روی عنصر یا عناصر مورد نظرتان اجرا شود را تعیین می کنید . [HR][/HR] تابع document.ready : این تابع را باید یکبار در ابتدای کلیه دستورات jQuery قرار دهید . قرار دادن این تابع باعث می شود تا قبل از لود ( load ) شدن کامل صفحه ( یا به اصطلاح ready شدن آن ) ، هیچ یک از دستورات jQuery اجرا نشود . اجرا شدن این دستورات قبل از لود کامل صفحه می تواند برای مرورگر مشکل ساز شود . برای مثال ، مثال های ارائه شده در قسمت بالا را در نظر بگیرید . تا زمانی که صفحه کاملا لود نشود ، هیچ یک از عناصر تعیین شده هنوز وجود خارجی ندارن تا متد تعیین شده روی آنها انجام شود . این مسئله می تواند باعث شکست مرورگر شود . در کد زیر نحوه تعریف تابع document.ready تشریح شده است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( document ) . ready ( function ( ) { کد های jQuery را اینجا می نویسید .// }); [/TD] [/TR] [/TABLE] یک مثال کاربردی : پس از تعریف ساختار دستوری jQuery ، تمام موارد فوق را در یک مثال کلی نشان می دهیم . مثال : در مثال زیر 2 پاراگراف داریم که جز کلاس Ex_1 هستند . با کد نوشته شده متد ( ) toggle را بر روی آنها اجرا کرده ایم . این متد عناصری که دیده می شوند را پنهان و عناصر پنهان را آشکار می کند . برای اجرای این متد باید بر روی دکمه فرمان خروجی مثال کلیک نمایید : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ ("button") . click ( function( ){ $ ( " p.Ex_1 " ) . toggle( ); }); }); </script> </head> <body> <p> This is paragraph 1 . </p> <p> This is paragraph 2 . </p> <button> Click me</button> </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] This is paragraph 1 . This is paragraph 2 . Click me [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : آموزش jQuery [h=2]انواع انتخاب کننده ها در jQuery[/h] انواع انتخاب کننده ها در jQuery : در بخش قبل به صورت مختصر به روش انتخاب انواع عناصر در صفحات وب با استفاده از jQuery اشاره کردیم . در این بحش با نگاهی دقیقتر و مثال های عملی ، سعی می کنیم تا شما را با روش انتخاب دقیق هر یک از عناصر مورد نظرتان آشنا کنیم . البته تنوع روش های انتخاب عناصر خیلی زیاد است و ذکر تمام حالات در این بخش نمی گنجد ، ولی سعی می شود بیشتر حالت ها را پوشش دهیم . ضمن اینکه این روش ها را می توان با هم ترکیب کرد . jQuery این امکان را به شما می دهد تا از بین تمام عناصر موجود در یک صفحه ، دقیقا عنصر مورد نظر خود را بر حسب مشخصاتی همچون نوع عنصر ، کلاس ، شناسه و ... انتخاب کرده و متدهای مورد نظرتان را روی آنها انجام دهید . انتخاب خود عنصر جاری : این کد باعث می شود عنصر جاری انتخاب شود . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( this ) [/TD] [/TR] [/TABLE] انتخاب بر حسب نوع کلی عنصر : این کد باعث می شود تا تمام عناصر از نوع < p > ( پاراگراف ) انتخاب شود . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( "p" ) [/TD] [/TR] [/TABLE] انتخاب بر حسب کلاس ( class ) عنصر : این کد باعث می شود تا کلیه عناصری که از نوع پاراگراف بوده و جزءکلاس text هستند ، انتخاب شوند . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( "p.text" ) [/TD] [/TR] [/TABLE] انتخاب بر حسب شناسه ( Id ) عنصر : این کد باعث می شود تا عنصری که شناسه انحصاری ( id ) آن در صفحه برابر مقدار text است ، انتخاب شود . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( "#text" ) [/TD] [/TR] [/TABLE] انتخاب یک تگ با استفاده از محتویات متنی درون آن: : با استفاده از این کد می توانید یک واژه یا متن را تعیین کرده و عنصر یا عنصرهایی را انتخاب کنید ، که آن کلمات در آنها وجود داشته باشند . برای مثال می خواهید از بین پاراگراف های موجود در یک صفحه پاراگرافی را انتخاب کنید که واژه PHP در آن به کار رفته است . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $( "نام عنصر : contains ( متن مورد نظر) " ) example : $( " p : contains ( PHP ) " ) [/TD] [/TR] [/TABLE] مثال : در مثال زیر روش استفاده از کد بالا را به شما نشان داده ایم . این کد باعث می شود تا از بین دو پاراگرافی موجود در صفحه فرضی ، پاراگراف که کلمه PHP در آن است ، مخفی شود . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ ("button") . click ( function( ){ $ ( " p:contains (PHP)" ) . hide(); }); }); </script> </head> <body> < p > Java Script is a client side programing language < /p > < p > PHP is a server side programing language < /p > <button> Click me</button> </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] Java Script is a client side programing language PHP is a server side programing language [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] انتخاب عناصر بر حسب خواص آنها و مقدارشان : این کد باعث می شود تا تمام عناصری که دارای خاصیت href در دورن تگ خودشان هسنتد، انتخاب شوند . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( "[href]" ) [/TD] [/TR] [/TABLE] : این کد باعث می شود تا تمام عناصری که مقدار خاصیت href آنها برابر با مقدار # است، انتخاب شوند . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( "[href]=jQuery;#jQuery " ) [/TD] [/TR] [/TABLE] : این کد باعث می شود تا تمام عناصری که مقدار خاصیت href آنها برابر با مقدار # نیست، انتخاب شوند . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( "[href] ! =jQuery;#jQuery " ) [/TD] [/TR] [/TABLE] : این کد باعث می شود تا تمام عناصری که مقدار خاصیت href آنها با مقدار jpg به پایان می رسد ، انتخاب شوند . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( "[href$='.jpg']" ) [/TD] [/TR] [/TABLE] انتخاب عناصر بر اساس مکان و یا ترتیب قرار گیری آنها: این کد باعث می شود تا آیتم < li > اول لسیت < ol > موجود در صفحه انتخاب شود . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( "ol li:first" ) [/TD] [/TR] [/TABLE] در مثال زیر این مسئله را به صورت عملی نشان می دهیم . در این مثال یک لیست ترتیبی با 3 آیتم داریم . کدی طراحی کردیم که با اجرا شدن آن ، فونت آیتم اول به صورت bold در خواهد آمد . برای اجرای دستور بر روی دکمه فرمان کلیک کنید : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ ("button") . click ( function( ){ $ ( " ol li:first " ) . css( "font-weight","bold" ) ); }); }); </script> </head> <body> < ol > < li > HTML < /li > < li > CSS < /li > < li > Java Script < /li > < /ol > <button> Click me</button> </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] HTML CSS Java Script [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] انتخاب تمام تگ های هدر موجود در صفحه : : این کد باعث می شود تا تمام تگ های هدر ( h1 تا h6 ) موجود در صفحه انتخاب شود . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $( " : header " ) [/TD] [/TR] [/TABLE] مثال : در مثال زیر روش استفاده از کد بالا را به شما نشان داده ایم . فرض کنید دو تا تگ هدر در صفحه وجود دارد . کدی طراحی کردیم که در هنگام اجرا تمام تگ های هدر موجود در صفحه را انتخاب کرده و رنگ آنها را به آبی تغییر می دهد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ ("button") . click ( function( ){ $ ( " : header " ) . css( "color","Blue" ) ); }); }); </script> </head> <body> < h1 > HTML < /h1 > < h4 > Java Script < /h4 > <button> Click me</button> </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [h=1]HTML[/h] [h=4]Java Script[/h] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] انتخاب اولین نمونه از یک نوع تگ در صفحه : : این کد باعث می شود تا اولین نمونه موجود از یک تگ در صفحه انتخاب شود . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $( " نوع عنصر:first " ) example : $( " p:first " ) [/TD] [/TR] [/TABLE] مثال : در مثال زیر روش استفاده از کد بالا را به شما نشان داده ایم . این کد باعث می شود تا از بین دو پاراگراف موجود در صفحه فرضی ، پاراگراف اول انتخاب شده و فونت آن را به یک فونت دیگر تغییر کند . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ ("button") . click ( function( ){ $ ( " p : first " ) . css( "font-family","Arial" ) ); }); }); </script> </head> <body> < p > HTML < /p > < p > Java Script < /p > <button> Click me</button> </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] HTML Java Script [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] انتخاب آخرین نمونه از یک نوع تگ در صفحه : : این کد باعث می شود تا آخرین نمونه موجود از یک تگ در صفحه انتخاب شود . در واقع در کد و مثال های قبلی کافی است واژه کلیدی first را به last تبدیل کنید . [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $( " نوع عنصر:last " ) example : $( " p:last " ) [/TD] [/TR] [/TABLE]
پاسخ : آموزش jQuery [h=2]رویدادها ( events ) در jQuery[/h] رویدادها ( events ) در jQuery : رویدادهای jQuery ، متدهایی هستند که در هنگام اجرای یک واقعه در HTML مثل کلیک بر روی یک عنصر یا عبور موس از روی آن ، فراخوانی و اجرا می شوند . برای مثال شما یک رویداد jQuery طراحی می کنید که در هنگام عبور موس از روی یک پاراگراف ، رنگ پس زمینه آن تغییر کند . رویدادهای jQuery به شما ابزاری می دهند که بوسیله آنها می توانید خصوصیات عناصر مثل رنگ ، پس زمینه و یا قلم نوشته را تغییر داده یا آنها را مخفی و سپس آشکار کنید . syntax یا شکل کلی نوشتن و استفاده از رویدادهای jQuery در صفحات وب به صورت زیر است . در این syntax هر یک از اجزاء را به صورت مجزا توضیح داده ایم : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( " selector " ).event ( function ( ) { ... some code ... } ; [/TD] [/TR] [/TABLE] توضیح هر یک از موارد syntax : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] Parameter [/TD] [/TR] [TR] [TD="class: body, align: right"] علامت $ در ابتدای کلیه دستورات jQuery قرار می گیرد و به مرورگر می فهماند که این دستور یک کد jQuery است . [/TD] [TD="class: header"] $ [/TD] [/TR] [TR] [TD="class: body, align: right"] selector عنصری است که رویداد لازم برای اجرای متد روی آن صورت می گیرد . مثلا کاربر بر روی آن کلیک کرده و یا نشانه گر موس از روی آن عبور می کند . [/TD] [TD="class: header"] selector [/TD] [/TR] [TR] [TD="class: body, align: right"] این رویداد اتفاقی است که باید بر روی selector اتفاق بیفتد تا متد مورد نظر ما اجرا شود . مثلا کاربر بر روی دکمه فرمان کلیک کرده و یا موس از روی عنصر selector عبور کند . آنها کد موجود در function اجرا می شود . [/TD] [TD="class: header"] event [/TD] [/TR] [TR] [TD="class: body, align: right"] این تابع کد دستوری است که می خواهیم در هنگام اجرای متد ، انجام شود . [/TD] [TD="class: header"] function ( ) [/TD] [/TR] [/TABLE] مثال : در مثال زیر یک نمونه کد نوشته شده با syntax بالا را نشان داده ایم . در این کد در هنگام کلیک ( event ) بر روی دکمه فرمان ( selector ) ، تگ پاراگراف ( کد تابع و متد آن ) مخفی می شود : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < 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> <p> example paragraph . click to hide it ! </p> <button> Click me</button> </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] example paragraph . click to hide it ! Click me [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : آموزش jQuery [h=2]لیست رویدادها ( events ) در jQuery[/h] لیست رویدادها ( events ) در jQuery : در این بخش به معرفی مهمترین و پرکاربردترین رویدادهای زبان jQuery می پردازیم . در بخش قبل گفتیم رویدادها اتفاقاتی هستند که بر روی عناصر موجود در صفحات وب انجام می شوند مثل کلیک کردن و یا عبور موس از روی آن . شما می توانید کدهای مورد نظر خود را طوری طراحی کنید که پس از اجرای یک رویداد خاص اجرا شوند . لیست زیر شامل مهمترین رویدادهای jQuery می باشد . برای دریافت اطلاعات و مشاهده مثال های عملی روی نام هر کدام کلیک نمایید : [TABLE="class: ex"] [TR] [TD="class: prname"] نام رویداد [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prname"] blur ( ) [/TD] [TD="class: prbody"] این رویداد زمانی اتفاق می افتد که عنصر مورد نظر فوکوس برنامه را از دست می دهد . [/TD] [/TR] [TR] [TD="class: prname"] change ( ) [/TD] [TD="class: prbody"] این رویداد زمانی اتفاق می افتد که در عنصر مورد نظر تغییری ایجاد می شود . [/TD] [/TR] [TR] [TD="class: prname"] click ( ) [/TD] [TD="class: prbody"] این رویداد زمانی اتفاق می افتد که کاربر بر روی عنصر مورد کلیک می نماید . [/TD] [/TR] [TR] [TD="class: prname"] dblclick ( ) [/TD] [TD="class: prbody"] این رویداد زمانی اتفاق می افتد که کاربر بر روی عنصر مورد دابل کلیک می نماید . [/TD] [/TR] [TR] [TD="class: prname"] focus ( ) [/TD] [TD="class: prbody"] این رویداد زمانی اتفاق می افتد که عنصر مورد فوکوس برنامه را در اختیار می گیرد . [/TD] [/TR] [TR] [TD="class: prname"] focusin ( ) [/TD] [TD="class: prbody"] این رویداد زمانی اتفاق می افتد یک عنصر زیر مجموعه ( child object ) از عنصر مورد نظر فوکوس برنامه را در اختیار می گیرد . [/TD] [/TR] [TR] [TD="class: prname"] focusout ( ) [/TD] [TD="class: prbody"] این رویداد زمانی اتفاق می افتد یک عنصر زیر مجموعه ( child object ) از عنصر مورد نظر فوکوس برنامه را از دست می دهد . [/TD] [/TR] [/TABLE]
پاسخ : آموزش jQuery [h=2]رویدادها در jQuery - رویداد click[/h] رویداد ( ) click در jQuery : رویداد click زمانی اتفاق می افتد که کاربر بر روی عنصر مورد نظر کلیک نماید . با این رویداد برای مثال می توان کدی طراحی کرد که در هنگام کلیک کاربر بر روی یک عنصر رنگ پس زمینه آن عوض شده و یا عنصر مخفی شود . شکل کلی استفاده از این متد به شرح زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( " selector " ).click ( function ( ) { ... some code ... } ; [/TD] [/TR] [/TABLE] توضیح هر یک از موارد syntax : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] Parameter [/TD] [/TR] [TR] [TD="class: body, align: right"] selector کنترلی است که کاربر بر روی آن کلیک می کند . [/TD] [TD="class: header"] selector [/TD] [/TR] [TR] [TD="class: body, align: right"] این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود . [/TD] [TD="class: header"] function ( ) [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: prname"] Example [/TD] [TD="class: prdes, align: left"] $ ( " " ).click ( function ( ) { ... some code } ; [/TD] [/TR] [/TABLE] در چند مثال سعی می کنیم تا استفاده از رویداد click را در عمل به شما نمایش دهیم . مثال : در مثال اول یک پاراگراف داریم . کدی طراحی کرده ایم که در صورتی که کاربر بروی پاراگراف مورد نظر کلیک نماید ، رنگ پس زمینه آن تغییر می کند . برای مشاهده خروجی بر روی پاراگراف کلیک نمایید: [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ (" # P_1 ") . click ( function( ){ $ ( " # P_1 " ) . css( " background-color " , " Yellow " ); }); }); </script> </head> <body> <p id= "P_1" style = "font-size: medium" > jQuery is a very inteligent way for programming . < /p > </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] jQuery is a very inteligent way for programming . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] مثال : در مثال دوم یک تگ div طراحی کرده ایم که در صورت کلیک کاربر بر روی آن ، با استفاده از متد ( ) hide مخفی می شود . برای مشاهده خروجی روی عبارت خروجی مثال کلیک نمایید : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ (" # div_1 ") . click ( function( ){ $ ( " # div_1 " ) . hide ( ); }); }); </script> </head> <body> < div id="div1" style="font-size: medium" border-width: thin; background-color: Lime > In jQuery you can do a lot of things with hmtl elements . <br /> even hide and show them . < /div > </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] In jQuery you can do a lot of things with hmtl elements . even hide and show them . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [HR][/HR]
پاسخ : آموزش jQuery [h=2]رویدادها در jQuery - رویداد dblclick[/h] رویداد ( ) dblclick در jQuery : رویداد dblclick زمانی اتفاق می افتد که کاربر بر روی عنصر مورد نظر دابل کلیک نماید . با این رویداد برای مثال می توان کدی طراحی کرد که در هنگام دابل کلیک کاربر بر روی یک عنصر رنگ پس زمینه آن عوض شده و یا عنصر مخفی شود . شکل کلی استفاده از این متد به شرح زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( " selector " ).dblclick ( function ( ) { ... some code ... } ; [/TD] [/TR] [/TABLE] توضیح هر یک از موارد syntax : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] Parameter [/TD] [/TR] [TR] [TD="class: body, align: right"] selector کنترلی است که کاربر بر روی آن دابل کلیک می کند . [/TD] [TD="class: header"] selector [/TD] [/TR] [TR] [TD="class: body, align: right"] این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود . [/TD] [TD="class: header"] function ( ) [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: prname"] Example [/TD] [TD="class: prdes, align: left"] $ ( " " ).dblclick ( function ( ) { ... some code } ; [/TD] [/TR] [/TABLE] در چند مثال سعی می کنیم تا استفاده از رویداد dblclick را در عمل به شما نمایش دهیم . مثال : در مثال اول یک پاراگراف داریم . کدی طراحی کرده ایم که در صورتی که کاربر بروی پاراگراف مورد نظر دابل کلیک نماید ، فونت نوشته به صورت توپر ( bold ) در می آید . برای مشاهده خروجی بر روی پاراگراف دابل کلیک نمایید: [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ (" # P_1 ") . dblclick ( function( ){ $ ( " # P_1 " ) . css( " font-weight " , " bold " ); }); }); </script> </head> <body> <p id= "P_1" style = "font-size: medium" > jQuery offers developers a lot of tools to work with html elements . < /p > </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] jQuery offers developers a lot of tools to work with html elements . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] مثال : در مثال دوم یک تگ div طراحی کرده ایم که در صورت دابل کلیک کاربر بر روی آن ، با استفاده از متد ( ) slideUp به آرامی مخفی می شود . برای مشاهده خروجی روی عبارت خروجی مثال دابل کلیک نمایید : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ (" # div_1 ") . dblclick ( function( ){ $ ( " # div_1 " ) . slideUp ( ); }); }); </script> </head> <body> < div id="div1" style="font-size: medium" border-width: thin; background-color: Lime > In jQuery you can do a lot of things with hmtl elements . <br /> even hide and show them . < /div > </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] In jQuery you can do a lot of things with hmtl elements . even hide and show them . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : آموزش jQuery [h=2]رویدادها در jQuery - رویداد blur[/h] رویداد ( ) blur در jQuery : رویداد blur در jQuery زمانی اتفاق می افتد که کنترل یا عنصر مورد نظر فوکوس * برنامه را از دست می دهد . می تولنید کدها و توابع مورد نظر خود را طوری طراحی کنید که در هنگام رخ دادن این رویداد ، اجرا شوند . * توضيح فوکوس ( focus ) : در هر لحظه کنترلی که در يک صفحه يا فرم ، انتخاب شده است و به دور آن کادر قرار گرفته به اصطلاح فوکوس برنامه را در اختيار دارد . کنترلی که انتخاب شود ، فوکوس را به دست آورده و کنترلی که از انتخاب خارج شود ، فوکوس را از دست می دهد . شکل کلی استفاده از این متد به شرح زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( " selector " ).focus ( function ( ) { ... some code ... } ; [/TD] [/TR] [/TABLE] توضیح هر یک از موارد syntax : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] Parameter [/TD] [/TR] [TR] [TD="class: body, align: right"] selector عنصر مورد نظری است که فوکوس برنامه را از دست می دهد . مثل یک کادر ورود متن که پس از پرکردن آن توسط کاربر و کلیک بر روی چیزی دیگر ، فوکوس را از دست می دهد . [/TD] [TD="class: header"] selector [/TD] [/TR] [TR] [TD="class: body, align: right"] این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود . [/TD] [TD="class: header"] function ( ) [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: prname"] Example [/TD] [TD="class: prdes, align: left"] $ ( " :input " ).focus ( function ( ) { ... some code } ; [/TD] [/TR] [/TABLE] مثال : در مثال زیر روش استفاده از رویداد blur را نمایش داده ایم . در این مثال یک کادر متن داریم که کاربر باید نام خود را در آن وارد کند . پس از اینکه نام خود را در کادر وارد کرده و بر روی چیز دیگری کلیک نمایید ، کنترل کادر متن فوکوس را از دست داده و تابعی اجرا می شود که رنگ پس زمیننه آن را به خاکستری تبدیل می کند : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ (" # Txt1 ") . blur ( function( ){ $ ( " # Txt1 " ) . css( " background-color " , " Gray " ); }); }); </script> </head> <body> Enter Your Name : < input id="Txt1" type="text" /> </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] Enter Your Name : [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : آموزش jQuery [h=2]رویدادها در jQuery - رویداد chnage[/h] رویداد ( ) change در jQuery : رویداد change زمانی اتفاق می افتد که در کنترل یا عنصر مورد نظر تغییری ایجاد می شود . این رویداد معمولا برای کنترل هایی مثل کادر متن ، گزینه های انتخاب و یا منوهای کرکره ایی که محتویات یا حالات آنها قابل تغییر هستند ، به کار می رود . زمانی که شما متن یک کنترل متن را تغییر داده و یا گزینه یک کادر انتخابی را عوض می کنید ، رویداد change اتفاق می افتد . شکل کلی استفاده از این متد به شرح زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( " selector " ).change ( function ( ) { ... some code ... } ; [/TD] [/TR] [/TABLE] توضیح هر یک از موارد syntax : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] Parameter [/TD] [/TR] [TR] [TD="class: body, align: right"] selector کنترلی است که کاربر آن را تغییر می دهد . [/TD] [TD="class: header"] selector [/TD] [/TR] [TR] [TD="class: body, align: right"] این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود . [/TD] [TD="class: header"] function ( ) [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: prname"] Example [/TD] [TD="class: prdes, align: left"] $ ( " :input " ).change ( function ( ) { ... some code } ; [/TD] [/TR] [/TABLE] در چند مثال سعی می کنیم تا کاربرد این رویداد را در عمل نمایش دهیم . مثال 1: در مثال اول یک کنترل کادر متن قرار داده ایم که کاربر باید نام خود را در آن وارد کند . در صورت وارد کردن متنی در این کادر و تغییر محتویات آن ، رویداد chnage کنترل رخ داده و کدی را اجرا می کند . این کد رنگ پس زمینه کنترل را به خاکستری تبدیل می کند : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ (" # Txt1 ") . change ( function( ){ $ ( " # Txt1 " ) . css( " background-color " , " Gray " ); }); }); </script> </head> <body> Enter Your Name : < input id="Txt1" type="text" /> </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : آموزش jQuery [h=2]رویدادها در jQuery - رویداد focus[/h] رویداد ( ) focus در jQuery : رویداد focus زمانی اتفاق می افتد که کنترل یا عنصر مورد نظر فوکوس برنامه را به دست آورد . یک کنترل یاعنصر زمانی که انتخاب شده و یا به واسطه فشردن متوالی کلید Tab ، مرورگر بر روی آن متمرکز می شود ، فوکوس برنامه را در اختیار می گیرد . می توان کدهایی طراحی کرد که مثلا رنگ پس زمینه یک کادر دریافت متن در هنگام در اختیار گرفتن فوکوس تغییر نماید . شکل کلی استفاده از این متد به شرح زیر است : [TABLE="class: ex"] [TR] [TD="class: prname"] Syntax [/TD] [TD="class: prdes, align: left"] $ ( " selector " ).focus ( function ( ) { ... some code ... } ; [/TD] [/TR] [/TABLE] توضیح هر یک از موارد syntax : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] syntax توضیح [/TD] [/TR] [TR] [TD="class: body, align: center"] توضیح [/TD] [TD="class: header"] Parameter [/TD] [/TR] [TR] [TD="class: body, align: right"] selector کنترل یا عنصری است که فوکوس برنامه را به دست می آورد . [/TD] [TD="class: header"] selector [/TD] [/TR] [TR] [TD="class: body, align: right"] این تابع کد دستوری است که می خواهیم در هنگام رخ دادن رویداد ، انجام شود . [/TD] [TD="class: header"] function ( ) [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: prname"] Example [/TD] [TD="class: prdes, align: left"] $ ( " :input " ).foucs ( function ( ) { ... some code } ; [/TD] [/TR] [/TABLE] در چند مثال سعی می کنیم تا استفاده از رویداد focus را در عمل به شما نمایش دهیم . مثال : در مثال دو کادر دریافت متن داریم . کدی طراحی کرده ایم ، که در هنگام انتخاب هر کدام از کادرهای متن و انتقال فوکوس برنامه به آن رنگ پس زمینه آن عوض می شود . برای مشاهده خروجی کادر های متن را انتخاب کرده و یا با زدن پشت سر هم کلید Tab ، فوکوس برنامه را به آنها انتقال دهید : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ (" :input ") . click ( function( ){ $ ( this ) . css( " background-color " , " Gray " ); }); }); </script> </head> <body> < input type="text" id="Text1" size="10" /> < input type="text" id="Text2" size="10" /> </body> </html> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
