آﻣﻮزش jQuery
blog.monavarian.ir
ﻓﺼﻞ اول :ﮐﻠﯿﺎت jquery Jqueryﭼﯿﺴﺖ ؟ Jqueryﯾﮏ ﮐﺘﺎﺑﺨﺎﻧﻪ ﺑﺴﯿﺎر ﻣﻔﯿﺪ ﺑﺮای ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺳﺖ . Jqueryﺑﺴﯿﺎر ﺳﺎده و ﮐﺎرآﻣﺪ اﺳﺖ و ﻣﺸﮑﻞ ﺟﺎوااﺳﮑﺮﯾﭙﺖ را ﺑﺮای ﺗﻄﺎﺑﻖ ﺑﺎ ﺑﺮوزرھﺎی ﻣﺨﺘﻠﻒ ﺑﺮطﺮف ﻧﻤﻮده . ﯾﺎدﮔﯿﺮی jqueryﺑﺴﯿﺎر آﺳﺎن اﺳﺖ . در Jqueryﮐﺪ ﺟﺎوااﺳﮑﺮﯾﭙﺖ از ﻓﺎﯾﻞ htmlﺟﺪا ﺷﺪه و ﺑﻨﺎﺑﺮاﯾﻦ ﮐﻨﺘﺮل ﮐﺪ ھﺎ و ﺑﮫﯿﻨﻪ ﺳﺎزی آﻧﮫﺎ ﺑﺴﯿﺎر ﺳﺎده ﺗﺮ ﺧﻮاھﺪ ﺷﺪ . Jqueryﺗﻮاﺑﻌﯽ ﺑﺮای ﮐﺎر ﺑﺎ اﯾﺠﺎﮐﺲ ﻓﺮاھﻢ ﻧﻤﻮده و در اﯾﻦ زﻣﯿﻨﻪ ﻧﯿﺰ ﮐﺎر را ﺑﺴﯿﺎر ﺳﺎده ﮐﺮده اﺳﺖ . در jqueryﻣﯿﺘﻮان از ﺧﺼﻮﺻﯿﺖ ﻓﺮاﺧﻮاﻧﯽ زﻧﺠﯿﺮه ای ﻣﺘﺪ ھﺎ اﺳﺘﻔﺎده ﻧﻤﻮد و اﯾﻦ ﺑﺎﻋﺚ ﻣﯿﺸﻮد ﭼﻨﺪﯾﻦ ﮐﺪ ﻓﻘﻂ در ﯾﮏ ﺳﻄﺮ ﻗﺮار ﮔﯿﺮد و در ﻧﺘﯿﺠﻪ ﮐﺪ ﺑﺴﯿﺎر ﻣﺨﺘﺼﺮ ﮔﺮدد.
ﭘﯿﺶ ﻧﯿﺎزھﺎ : ﺑﺮای داﻧﺴﺘﻦ jqueryﺑﺎﯾﺪ ﺑﺎ زﺑﺎﻧﮫﺎی CSS ، htmlو ﺟﺎوااﺳﮑﺮﯾﭙﺖ آﺷﻨﺎﯾﯽ داﺷﺘﻪ ﺑﺎﺷﯿﺪ .
ﭼﮕﻮﻧﻪ از زﺑﺎن jqueryاﺳﺘﻔﺎده ﮐﻨﯿﻢ ؟ ﺷﻤﺎ ﺗﻨﮫﺎ ﻧﯿﺎز دارﯾﺪ ﮐﻪ آﺧﺮﯾﻦ ﻧﺴﺨﻪ jqueryرا از ﺖﯾﺎﺳ http://jquery.comﺑﺼﻮرت راﯾﮕﺎن داﻧﻠﻮد ﮐﻨﯿﺪ .اﯾﻦ ﻓﺎﯾﻞ ﯾﮏ ﻓﺎﯾﻞ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺑﺎ ﭘﺴﻮﻧﺪ jsاﺳﺖ ﮐﻪ ﺑﺎﯾﺪ آن را در ﻓﺎﯾﻞ htmlﺧﻮد در ﻗﺴﻤﺖ ><head ﻓﺮاﺧﻮاﻧﯽ ﻧﻤﺎﯾﯿﺪ . ><script type="text/javascript" src="jquery.js"></script ﺪﻌﺑ ﻣﯿﺘﻮاﻧﯿﺪ ﮐﺪ ھﺎی ﺟﯿﮑﻮﺋﺮی ﻣﻮرد ﻧﻈﺮ ﺧﻮد را در ﯾﮏ ﺗﮓ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﺟﺪاﮔﺎﻧﻪ ﺑﻨﻮﯾﺴﯿﺪ .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل : >"<script type="text/javascript {)($(document).ready(function {)($("p").click(function ;)($(this).hide ;)} ;)} ></script ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻗﻄﻌﻪ ﮐﺪ زﯾﺮ ھﻨﮕﺎﻣﯽ ﮐﻪ روی ﻋﺒﺎرت " " Click Meﮐﻠﯿﮏ ﺷﻮد اﯾﻦ ﺗﮓ ﭘﻨﮫﺎن ) ( hideﻣﯿﺸﻮد . ><html ><head ><script type="text/javascript" src="jquery.js"></script >"<script type="text/javascript {)($(document).ready(function
ﻪﺤﻔﺻ 1
آﻣﻮزش jQuery
blog.monavarian.ir
{)($("p").click(function ;)($(this).hide ;)} ;)} ></script ></head ><body ><p> Click Me <p ></body ></html
ھﻤﺎن طﻮر ﮐﻪ در ﮐﺪ ﺑﺎﻻ ﻣﯿﺒﯿﻨﯿﺪ ﺗﻤﺎم ﮐﺪھﺎی jqueryدرون ﯾﮏ ﺗﺎﺑﻊ ﺑﻪ ﻧﺎم $ﻧﻮﺷﺘﻪ ﺷﺪه و ﻗﺎﺑﻞ اﺳﺘﻔﺎده ھﺴﺘﻨﺪ . ﺑﻪ ﺟﺎی ﺣﺮف $ﻣﯿﺘﻮان از ﻧﺎم ﮐﺎﻣﻞ آن jQueryاﺳﺘﻔﺎده ﮐﺮد . در ﺧﻂ اول ﮐﺪ )ﻻﺎ ﺪﮐ ﻌﻄﻗ ﺠﻨ ﻂﺧ ( ﺗﺎﺑﻌﯽ را ھﻨﮕﺎﻣﯽ ﮐﻪ ﺑﺮﻧﺎﻣﻪ ﻣﺎ آﻣﺎده اﺟﺮاﺷﺪن اﺳﺖ ﺻﺪا ﻣﯿﺰﻧﯿﻢ ) ھﻨﮕﺎﻣﯽ ﮐﻪ روﯾﺪاد readyاز ﺷﯽ documentﺻﺪا زده ﺷﺪه اﺳﺖ ( . در اﯾﻦ ﺗﺎﺑﻊ ﻣﯿﮕﻮﯾﯿﻢ )ﺧﻂ دوم ﮐﺪ ( :ھﻨﮕﺎﻣﯽ ﮐﻪ روی ھﻤﻪ ﺗﮕﮫﺎی " "pﮐﻠﯿﮏ ﺷﺪ ﺗﺎﺑﻌﯽ ﺻﺪا زده ﺷﻮد ﮐﻪ ﮐﺎرش اﯾﻦ اﺳﺖ ﮐﻪ اﯾﻦ ﺗﮓ )ﺗﮕﯽ ﮐﻪ روﯾﺶ ﮐﻠﯿﮏ ﺷﺪه ( را ﭘﻨﮫﺎن ) ( hideﺪﯾﺎﻤﻧ . ﺑﻪ ھﻤﯿﻦ ﺳﺎدﮔﯽ .ﺣﺎل اﮔﺮ ﺻﺪ ﺗﺎ ﺗﮓ pھﻢ در ﻗﺴﻤﺖ bodyﻓﺎﯾﻞ ﺧﻮد ﺑﻨﻮﯾﺴﯿﻢ .ھﻨﮕﺎﻣﯽ ﮐﻪ روی ھﺮﮐﺪام ﮐﻠﯿﮏ ﻣﯿﺸﻮد اﯾﻦ ﺗﺎﺑﻊ اﺟﺮا ﻣﯿﺸﻮد . اﮔﺮ ﻧﮕﺮان ﺳﺎﺧﺘﺎر ﻣﺒﮫﻢ jqueryھﺴﺘﯿﺪ ﺑﺎﯾﺪ ﺑﻪ ﺷﻤﺎ اطﻤﯿﻨﺎن دھﻢ ﮐﻪ ﺑﺰودی در طﯽ روﻧﺪ اﯾﻦ آﻣﻮزش ﺑﻪ اﯾﻦ ﺳﺎﺧﺘﺎر ﻋﺎدت ﮐﺮده و از آن ﻟﺬت ﺧﻮاھﯿﺪ ﺑﺮد . ﻪﺘﮑﻧ :ﺷﻤﺎ ھﻤﭽﻨﯿﻦ ﻣﯿﺘﻮاﻧﯿﺪ ﮐﺪھﺎی ﺧﻮد را در ﯾﮏ ﻓﺎﯾﻞ jsﺟﺪاﮔﺎﻧﻪ ﺑﻨﻮﯾﺴﯿﺪ و ﺳﭙﺲ آن را ﭘﺲ از ﻓﺮاﺧﻮاﻧﯽ ﮐﺘﺎﺑﺨﺎﻧﻪ ، jquery.jsﻓﺮاﺧﻮاﻧﯽ ﻧﻤﺎﯾﯿﺪ : ><script type="text/javascript" src="jquery.js"></script ><script type="text/javascript" src="mycode.js"></script ﻪﻣﺎﻧﺮﺑ ideﻣﻨﺎﺳﺐ ﺑﺮای : jquery ﺷﻤﺎ ﻣﯿﺘﻮاﻧﯿﺪ ﮐﺪھﺎی jqueryرا در ﺗﻤﺎم ﺑﺮﻧﺎﻣﻪ ھﺎی طﺮاﺣﯽ وب ﻣﺎﻧﻨﺪ Zend Dreamweaver Studion , Eclips,ﺑﻨﻮﯾﺴﯿﺪ اﻣﺎ ﻣﻌﺮوﻓﺘﺮﯾﻦ ﻣﺤﯿﻂ ﺑﺮای ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ jqueryدر ﺣﺎل ﺣﺎﺿﺮ ﻧﺮم اﻓﺰار open sourceﻪﺑ ﻧﺎم AptanaStudioاﺳﺖ ﮐﻪ ﺑﺮای ﮐﺪ ﻧﻮﯾﺴﯽ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﻧﻮﺷﺘﻪ ﺷﺪه اﻣﺎ ﻪﻧﺎﺨﺑﺎﺘﮐ jqueryھﻢ ﺑﻪ آن اﺿﺎﻓﻪ ﺷﺪه ﮐﻪ اﻟﺒﺘﻪ در اﯾﻦ زﻣﺎن ﮐﻪ ﺑﻨﺪه ﻣﺸﻐﻮل ﻧﻮﺷﺘﻦ اﯾﻦ آﻣﻮزش ھﺴﺘﻢ ﺑﺎﯾﺪ ﻧﺮم اﻓﺰار را ﺟﺪاﮔﺎﻧﻪ داﻧﻠﻮدﻧﻤﺎﯾﯿﺪ و ﮐﺘﺎﺑﺨﺎﻧﻪ راھﻨﻤﺎی jqueryرا ﺟﺪاﮔﺎﻧﻪ ﺗﮫﯿﻪ و ﺑﺮ روی آن ﻧﺼﺐ ﮐﻨﯿﺪ : ﻧﺮم اﻓﺰار Aptanaرا از ﺳﺎﯾﺖ http://www.aptana.comداﻧﻠﻮد ﻧﻤﺎﯾﯿﺪ .
ﻪﺤﻔﺻ 2
آﻣﻮزش jQuery
blog.monavarian.ir
ﻪﻧﺎﺨﺑﺎﺘﮐ jqueryرا ﮐﻪ ﺑﺮای Aptanaﺗﮫﯿﻪ ﺷﺪه از ﺳﺎﯾﺖ http://www.bitstorm.org/edwin/jqueryدرﯾﺎﻓﺖ ﻧﻤﺎﯾﯿﺪ و ﯾﺎ درﯾﺎﻓﺖ ﻣﺴﺘﻘﯿﻢ از ھﻤﯿﻦ وﺑﻼگ : ﻟﯿﻨﮏ درﯾﺎﻓﺖ http://blog.monavarian.ir/wp-content/aptana_jquery-111_sdoc.zip : وارد ﻧﺮ اﻓﺰار Aptanaﺪﯾﻮﺷ : ﻪﺑ ﺖﻤﺴﻗ Windows -> Show view -> Otherھﻤﺎﻧﻨﺪ ﺷﮑﻞ زﯾﺮ وارد ﺷﻮﯾﺪ :
ﭘﻨﺠﺮه زﯾﺮ ﻧﻤﺎﯾﺶ ﻣﯿﺎﺑﺪ .ﻣﺎﻧﻨﺪ ﺷﮑﻞ در ﻗﺴﻤﺖ Aptana viewsروی Prefrencesﮐﻠﯿﮏ ﮐﻨﯿﺪ :
ﻪﺤﻔﺻ 3
آﻣﻮزش jQuery
blog.monavarian.ir
در ﭘﻨﺠﺮه preferencesروی دﮐﻤﻪ Addﮐﻠﯿﮏ ﮐﻨﯿﺪ .ﺑﻪ ﻣﺴﯿﺮ ﻓﺎﯾﻞ ﮐﺘﺎﺑﺨﺎﻧﻪ ) jquryﺷﺎﻣﻞ دو ﻓﺎﯾﻞ js و ( sdocﺑﺮوﯾﺪ و آن را ﺑﻪ ﭘﻨﺠﺮه اﺿﺎﻓﻪ ﮐﻨﯿﺪ :
ﻪﺤﻔﺻ 4
آﻣﻮزش jQuery
blog.monavarian.ir
ھﻤﺎن طﻮر ﮐﻪ در ﺗﺼﻮﯾﺮ ﻓﻮق ﻣﯿﺒﯿﻨﯿﺪ .اﯾﻦ ﮐﺘﺎﺑﺨﺎﻧﻪ ﺑﻪ Aptanaاﺿﺎﻓﻪ ﺷﺪه اﺳﺖ .ﺣﺎل در ﺻﻮرﺗﯽ ﮐﻪ ﻞﯾ ﻓ ﮏﯾ htmlﺎﯾ jsﺑﺎز ﮐﻨﯿﺪ .ﻣﯿﺘﻮاﻧﯿﺪ درون آن ھﻨﮕﺎم ﻧﻮﺷﺘﻦ ﮐﺪھﺎی jqueryاز ﭘﻨﺠﺮه راھﻨﻤﺎ اﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ :
در ﺻﻮرﺗﯽ ﮐﻪ اﯾﻦ ﭘﻨﺠﺮه ﺑﺎز ﻧﺸﺪ ﺑﺮای ﺑﺎز ﮐﺮدن آن ﻣﯿﺘﻮاﻧﯿﺪ از ﮐﻠﯿﺪ ھﺎی ﺗﺮﮐﯿﺒﯽ Ctrl+Space اﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ .
ﻪﺤﻔﺻ 5
آﻣﻮزش jQuery
blog.monavarian.ir
ﻓﺼﻞ دوم :ﺷﺮوع آﻣﻮزش ﺳﺎﺧﺘﺎر ﮐﻠﯽ دﺳﺘﻮرات : در jqueryﺷﻤﺎ ﺗﻌﺪادی ﮓﺗ htmlرا اﻧﺘﺨﺎب ﮐﺮده ) ( selectorو ﺑﺮ روی آﻧﮫﺎ ﻋﻤﻠﯿﺎﺗﯽ ) ( actionsاﻧﺠﺎم ﻣﯿﺪھﯿﺪ . ;)($(selector).action در ﮐﺪ ﻓﻮق : •
$ھﻤﺎن ﺷﯽ jQueryاﺳﺖ .
•
Selectorﻧﺎم ﯾﮏ اﻟﻤﻨﺖ ﯾﺎ ﻣﺸﺨﺼﺎت ﯾﮏ ﺳﺮی اﻟﻤﻨﺖ ﺑﺮا اﻧﺘﺨﺎب ﺷﺪن اﺳﺖ .
•
)( actionھﻢ ﻋﻤﻠﯽ اﺳﺖ ﮐﻪ روی اﻟﻤﻨﺖ ھﺎی اﻧﺘﺨﺎﺑﯽ اﻧﺠﺎم ﻣﯿﺸﻮد .
ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل :
)( : $(this).hideﻋﻨﺼﺮ ﺟﺎری را ﻣﺨﻔﯽ ﻣﯿﮑﻨﺪ )( : $("p").hideﻋﻤﻞ ﭘﻨﮫﺎن ﺷﺪن را ﺑﺮای ﺗﻤﺎم ﺗﮓ ھﺎی ""pﻣﻮﺟﻮد در ﺻﻔﺤﻪ اﻋﻤﺎل ﻣﯿﮑﻨﺪ )( : $("p.test").hideﺗﻤﺎم ﺗﮓ ھﺎی pﮐﻪ ﮐﻼﺳﺸﺎن " "testﺗﻌﺮﯾﻒ ﺷﺪه را ﭘﻨﮫﺎن ﻣﯿﮑﻨﺪ. )( : $("#test").hideﺗﮕﯽ ﮐﻪ آﯾﺪی آن " "testاﺳﺖ را ﻣﺨﻔﯽ ﻣﯿﮑﻨﺪ.
ﻪﺘﮑﻧ :ھﻤﺎن طﻮر ﮐﻪ ﻣﺸﺎھﺪه ﻓﺮﻣﻮدﯾﺪ ﻗﺴﻤﺖ selectorﺑﺮای اﻧﺘﺨﺎب ﻣﺠﻤﻮﻋﻪ ای از ﻋﻨﺎﺻﺮ از ﺳﺎﺧﺘﺎر CSSﺗﺒﻌﯿﺖ ﻣﯿﮑﻨﺪ .در اﯾﻦ ﻣﻮرد ﺑﻌﺪا ﻣﻔﺼﻞ ﺗﺮ ﺗﻮﺿﯿﺢ داده ﺧﻮاھﺪ ﺷﺪ . : $(document).ready در jqueryﺳﻌﯽ ﻣﯿﺸﻮد ﺗﻤﺎم ﮐﺪ ھﺎ در روﯾﺪاد $(document).readyاﺟﺮا ﺷﻮد . {)($(document).ready(function --- jQuery functions ---;)} اﯾﻦ روﯾﺪاد ھﻨﮕﺎﻣﯽ اﺗﻔﺎق ﻣﯽ اﻓﺘﺪ ﮐﻪ ﺻﻔﺤﻪ ﺟﺎری ﮐﺎﻣﻼ ﻟﻮد ﺷﺪه ﺑﺎﺷﺪ و آﻣﺎده اﺟﺮا ﺑﺎﺷﺪ .اﺟﺮای دﺳﺘﻮرات در ﺧﺎرج از روﯾﺪاد document.readyﻣﯿﺘﻮاﻧﺪ ﻣﺸﮑﻼﺗﯽ را ﺑﻮﺟﻮد آورد ﻣﺜﻼ : •
ﭘﻨﮫﺎی ﮐﺮدن ) ( hideﻋﻨﺼﺮی ﮐﻪ ھﻨﻮز ﻟﻮد ﻧﺸﺪه ﺑﺎﻋﺚ ﺑﺮوز ﺧﻄﺎ ﯾﺎ اﺟﺮا ﻧﺸﺪن ﮐﺪ ﻣﯿﺸﻮد.
ﻪﺤﻔﺻ 6
آﻣﻮزش jQuery
•
blog.monavarian.ir
ﺗﻐﯿﯿﺮ ﺳﺎﯾﺰ ﯾﮏ ﻋﮑﺴﯽ ﮐﻪ ھﻨﻮز ﺑﻪ طﻮر ﮐﺎﻣﻞ ﻟﻮد ﻧﺸﺪه ﻧﯿﺰ ﻣﯿﺘﻮاﻧﺪ ﺑﺎﻋﺚ اﯾﺠﺎد ﻣﺸﮑﻞ در ﻧﻤﺎﯾﺶ ﺳﺎﯾﺖ ﮔﺮدد.
: Jquery Selectors ﻂﺳﻮﺗ Selectorھﺎ ﺷﻤﺎ ﻣﯿﺘﻮاﻧﯿﺪ ﯾﮏ ﻋﻨﺼﺮ htmlﯾﺎ ﺗﻌﺪادی از ﻋﻨﺎﺻﺮ htmlﺑﺎ ﯾﮏ ﺧﺼﻮﺻﯿﺖ ﻣﺸﺘﺮک را اﻧﺘﺨﺎب ﻧﻤﺎﯾﯿﺪ . ﺑﺮای اﻧﺘﺨﺎب ﺗﮓ ھﺎ ﻣﯿﺘﻮان از ﻧﺎم آﻧﮫﺎ ،ﺧﺼﻮﺻﯿﺎت ﺗﻌﺮﯾﻒ ﺷﺪه آﻧﮫﺎ )ﺪﻨﻧﺎﻣ idﺎﯾ classﺎﯾ hrefو ( ...و ﯾﺎ ﻣﺤﺘﻮی داﺧﻠﯽ آﻧﮫﺎ اﺳﺘﻔﺎده ﮐﺮد . •
ﺑﺮای اﻧﺘﺨﺎب ﺗﮕﮫﺎی ھﻢ ﻧﺎم ،ﻧﺎم ﺗﮓ را در ﻗﺴﻤﺖ Selecotrsﻣﯿﻨﻮﯾﺴﯿﻢ : اﻧﺘﺨﺎب ﺗﻤﺎم ﭘﺎراﮔﺮاﻓﮫﺎ $("p") : اﻧﺘﺨﺎب ﺗﻤﺎم ﻟﯿﻨﮏ ھﺎ $("a") :
•
ﺑﺮای اﻧﺘﺨﺎب ﺗﮕﯽ ﺑﺎ ﯾﮏ آﯾﺪی ﺧﺎص آﯾﺪی را ﺑﻪ ھﻤﺮاه #ﻣﯿﻨﻮﯾﺴﯿﻢ : )"$("#test
ﮐﺪ ﺑﺎﻻ ﺗﮕﯽ ﺑﺎ آﯾﺪی testرا اﻧﺘﺨﺎب ﻣﯿﮑﻨﺪ . •
ﺑﺮای اﻧﺘﺨﺎب ﺗﮕﯽ ﺑﺎ ﯾﮏ ﺧﺼﻮﺻﯿﺖ ) ( Attributeآن ﺧﺼﻮﺻﯿﺖ و ﻣﻘﺪارش را ﺑﯿﻦ ][ ﻣﯿﻨﻮﯾﺴﯿﻢ : $("[href='http://blog.monavarian.ir'" ) :
ﮐﺪ ﺑﺎﻻ ﺗﻤﺎم اﻟﻤﻨﺘﮫﺎﯾﯽ را ﮐﻪ دارای ﺧﺼﻮﺻﯿﺖ hrefﺑﺎ ﻣﻘﺪار http://blog.monavarian.irھﺴﺖ را اﻧﺘﺨﺎب ﻣﯿﮑﻨﺪ. ﻪﺘﮑﻧ :ﻣﯿﺘﻮان ﺑﻪ ﺟﺎی ﻣﺴﺎوی در ﮐﺪ ﺑﺎﻻ از =! و ﯾﺎ =$اﺳﺘﻔﺎده ﮐﺮد :
)"]' : $("[href!='#اﻧﺘﺨﺎب ﺗﻤﺎم اﻟﻤﻨﺘﮫﺎ ﮐﻪ hrefآﻧﮫﺎ ﻣﺨﺎﻟﻒ ﻋﺒﺎرت #ﺪﺷﺎﺑ )"]' : $("[href$='.jpgاﻧﺘﺨﺎب ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﮐﻪ ﻋﺒﺎرت داﺧﻞ hrefآﻧﮫﺎ ﺑﻪ .jpgﺧﺘﻢ ﺷﻮد ) .ﺗﻤﺎم ﻟﯿﻨﮏ ھﺎﯾﯽ ﮐﻪ ب ﺗﺼﻮﯾﺮ ﻟﯿﻨﮏ ﺷﺪه اﻧﺪ (
•
ﻣﯿﺘﻮاﻧﯿﺪ از ﺗﺮﮐﯿﺐ اﯾﻦ selectorھﺎ اﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ :
)" : $("p.testﺗﻤﺎم ﺗﮓ ھﺎی pﮐﻪ ﮐﻼﺳﺸﺎن testاﺳﺖ . )" : $("div#mainﮓﺗ divﮐﻪ آﯾﺪی آن mainاﺳﺖ .
ﻪﺤﻔﺻ 7
آﻣﻮزش jQuery
blog.monavarian.ir
)" : $("div#main .noteﺗﻤﺎم ﺗﮓ ھﺎﯾﯽ ﺑﺎ ﮐﻼس noteﻪﮐ داﺧﻞ ﮓﺗ divﺑﺎ آﯾﺪی mainھﺴﺘﻨﺪ . دﻗﺖ ﻧﻤﺎﯾﯿﺪ ﮐﻪ در اﯾﻦ ﻣﺜﺎل .noteﺑﺎ ﯾﮏ ﻓﺎﺻﻠﻪ از div#mainدرج ﺷﺪه . ﻪﺘﮑﻧ :ﺑﻪ دو اﻧﺘﺨﺎب زﯾﺮ دﻗﺖ ﻧﻤﺎﯾﯿﺪ : )"$("p.test )"$("p .test ظﺎھﺮا اﯾﻦ دو ﮐﺪ ﺷﺒﯿﻪ ھﻢ ھﺴﺘﻨﺪ )در دوﻣﯽ ﯾﮏ ﻓﺎﺻﻠﻪ spaceﺑﯿﻦ pو .testوﺟﻮد دارد ( .اﻣﺎ اوﻟﯽ ﺗﮕﮫﺎ pﺑﺎ ﮐﻼس testرا اﻧﺘﺨﺎب ﻣﯿﮑﻨﺪ .در ﺣﺎﻟﯽ ﮐﻪ دوﻣﯽ ﺗﻤﺎم ﺗﮕﮫﺎی ﺑﺎ ﮐﻼس testﮐﻪ درون ﺗﮕﮫﺎی pﻗﺮار دارﻧﺪ اﻧﺘﺨﺎب ﺧﻮاھﺪ ﮐﺮد .
•
ﺑﺮای اﻧﺘﺨﺎﺑﮫﺎی ﺧﺎص ﯾﮏ ﺳﺮی ﻧﻤﺎد اﺿﺎﻓﻪ ﻧﯿﺰ ﺗﻌﺮﯾﻒ ﺷﺪه اﺳﺖ :
)" : $("ul li:firstاوﻟﯿﻦ liاز ﺗﮓ ھﺎی ulرا اﻧﺘﺨﺎب ﻣﯿﻨﻤﺎﯾﺪ . )" : $("tr:evenﺗﻤﺎم ﺳﻄﺮ ھﺎی زوج ﺟﺪول . )" : $("tr:oddﺗﻤﺎم ﺳﻄﺮ ھﺎی ﻓﺮد ﺟﺪول . )") : $("input:not(:emptyﺗﻤﺎم inputھﺎﯾﯽ ﮐﻪ ﺧﺎﻟﯽ ﻧﯿﺴﺘﻨﺪ
ﺑﺮای دﯾﺪن ﻣﺮﺟﻊ Selectorھﺎ ﺑﻪ ﺑﺨﺶ ﭘﯿﻮﺳﺖ ھﺎ ﻣﺮاﺟﻌﻪ ﻧﻤﺎﯾﯿﺪ .
: jQuery Event Functions Eventsﭼﯿﺴﺖ ؟ Eventﯾﺎ روﯾﺪاد واﻗﻌﻪ ھﺎﯾﯽ اﺳﺖ ﮐﻪ در ﯾﮏ ﺻﻔﺤﻪ وب اﺗﻔﺎق ﻣﯽ اﻓﺘﺪ .ﻣﺜﻼ روﯾﺪاد click ھﻨﮕﺎﻣﯽ ﮐﻪ ﮐﻠﯿﮑﯽ روی ﻋﻨﺼﺮی زده ﻣﯿﺸﻮد اﯾﻦ روﯾﺪاد از آن ﻋﻨﺼﺮ اﺗﻔﺎق ﻣﯽ اﻓﺘﺪ .ﯾﺎ روﯾﺪاد readyاز ﻋﻨﺼﺮ documentھﻨﮕﺎﻣﯽ ﮐﻪ ﺻﻔﺤﻪ آﻣﺎده اﺟﺮا ﻣﯿﺸﻮد اﺗﻔﺎق ﻣﯽ اﻓﺘﺪ . ﭼﻨﺪ ﺗﺎ از روﯾﺪاد ھﺎ در : jquery •
:mouseoverھﻨﮕﺎﻣﯽ ﮐﻪ ﻣﻮس روی ﺷﯽ ﻗﺮار ﻣﯿﮕﯿﺮد
•
: mouseoutھﻨﮕﺎﻣﯽ ﮐﻪ ﻣﻮس از روی ﺷﯽ ﮐﻨﺎر ﻣﯿﺮود .
•
: Dblclickھﻨﮕﺎم دﺑﻞ ﮐﻠﯿﮏ ﮐﺮدن روی ﺷﯽ اﺗﻔﺎق ﻣﯽ اﻓﺘﺪ .
•
: Focusھﻨﮕﺎم ﻓﻮﮐﻮس ﮐﺮدن روی ﯾﮏ ﺷﯽ اﺗﻔﺎق ﻣﯽ اﻓﺘﺪ .
ﻪﺤﻔﺻ 8
آﻣﻮزش jQuery
•
blog.monavarian.ir
: Blurھﻨﮕﺎﻣﯽ ﮐﻪ ﺷﯽ از ﺣﺎﻟﺖ ﻓﻮﮐﻮس ﺧﺎرج ﻣﯿﺸﻮد اﺗﻔﺎق ﻣﯽ اﻓﺘﺪ .
: jQuery Event Functionsﺗﻮاﺑﻌﯽ ھﺴﺘﻨﺪ ﮐﻪ ھﻨﮕﺎﻣﯽ ﮐﻪ ﯾﮏ روﯾﺪاد در ﮐﺪ htmlاﺗﻔﺎق ﻣﯽ اﻓﺘﺪ ﺑﻄﻮر اﺗﻮﻣﺎﺗﯿﮏ اﺟﺮا ﻣﯿﺸﻮﻧﺪ . ﻣﺜﻼ ﻣﯿﺘﻮان در jqueryﮔﻔﺖ ھﻨﮕﺎﻣﯽ ﮐﻪ روی ﯾﮏ selectorﮐﻠﯿﮏ ﺷﺪ ﺗﺎﺑﻌﯽ اﺟﺮا ﺷﻮد .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل : {)($("button").click(function ;)($("p").hide ;)} ﮐﺪ ﻓﻮق ﺑﺮ روی روﯾﺪاد ﮐﻠﯿﮏ ﺗﻤﺎم ﺗﮓ ھﺎی buttonﺗﺎﺑﻌﯽ اﺟﺮا ﻣﯿﮑﻨﺪ .اﯾﻦ ﺗﺎﺑﻊ ﺗﻤﺎم ﭘﺎراﮔﺮاف ھﺎی ﻣﻮﺟﻮد در ﺻﻔﺤﻪ را hideﻣﯿﮑﻨﺪ .در واﻗﻊ ھﻨﮕﺎم اﺟﺮای ﺻﻔﺤﻪ . htmlاﮔﺮ روی ھﺮ دﮐﻤﻪ ای ﮐﻪ در ﺻﻔﺤﻪ ﻣﻮﺟﻮد اﺳﺖ ﮐﻠﯿﮏ ﺷﻮد ،ﺗﻤﺎم ﺗﮓ ھﺎی pﻣﻮﺟﻮد در ﺻﻔﺤﻪ ﭘﻨﮫﺎی ﻣﯿﺸﻮد.
ﻪﺘﮑﻧ :روﯾﺪاد ھﺎ را ﺑﻪ دو ﺻﻮرت در ﮐﺪ ﻣﯿﺘﻮان اﺳﺘﻔﺎده ﮐﺮد : •
ﺣﺎﻟﺖ اول وﻗﺘﯽ ﮐﻪ ﻣﯿﺨﻮاھﯿﻢ ﺑﺮای روﯾﺪادی ﺗﺎﺑﻌﯽ ﺑﻨﻮﯾﺴﯿﻢ : )} … $(selector).event(function(){ … some code
•
ﺣﺎﻟﺖ دوم وﻗﺘﯽ اﺳﺖ ﮐﻪ ﻣﯿﺨﻮاھﯿﻢ ﯾﮏ روﯾﺪاد را ﺻﺪا ﺑﺰﻧﯿﻢ : )($(selector).event
در اﯾﻦ ﺣﺎﻟﺖ روﯾﺪاد ﻣﺮﺑﻮط ﺑﻪ selectorرا ﺻﺪا ﻣﯿﺰﻧﯿﻢ . ﺑﺮای دﯾﺪن ﻣﺮﺟﻊ روﯾﺪاد ھﺎ ﺑﻪ ﭘﯿﻮﺳﺖ ﻣﺮاﺟﻌﻪ ﻧﻤﺎﯾﯿﺪ
: jQuery Name Conflicts jqueryاز ﻋﻼﻣﺖ اﺧﺘﺼﺎری $ﺑﻪ ﺟﺎی jQueryاﺳﺘﻔﺎده ﻣﯿﮑﻨﺪ .ﺑﻌﻀﯽ ﮐﺘﺎﺑﺨﺎﻧﻪ ھﺎی ﺟﺎوااﺳﮑﺮﯾﭙﺖ دﯾﮕﺮ ﻧﯿﺰ از اﯾﻦ ﻧﺎم اﺳﺘﻔﺎده ﻣﯿﮑﻨﻨﺪ .اﮔﺮ ﺷﻤﺎ در ﺻﻔﺤﻪ ﺧﻮد از ﮐﺘﺎﺑﺨﺎﻧﻪ دﯾﮕﺮی ﻧﯿﺰ اﺳﺘﻔﺎده ﻣﯿﮑﻨﯿﺪ ﮐﻪ آن ﮐﺘﺎﺑﺨﺎﻧﻪ ﻧﯿﺰ از ﻧﺎم $اﺳﺘﻔﺎده ﻣﯿﮑﻨﺪ .ﻪﻧﺎ ﺑﺎ ﮐ ﺎﺑ ﺎﻤﺷ jQueryﺑﻪ ﻣﺸﮑﻞ ﺑﺮ ﺧﻮاھﯿﺪ ﺧﻮرد . jQueryﺑﺮای ﺣﻞ اﯾﻦ ﻣﺸﮑﻞ ﺗﺎﺑﻌﯽ دارد ﺑﻪ ﻧﺎم )( noConflictﮐﻪ ﺗﻮﺳﻂ آن ﻣﯿﺘﻮاﻧﯿﺪ ﻧﺎم ﺟﺪﯾﺪ ﺑﺮای ﺻﺪا زدن ﺗﻮاﺑﻊ jQueryاﯾﺠﺎد ﻧﻤﺎﯾﯿﺪ : )(var jq=jQuery.noConflict دﺳﺘﻮر ﻓﻮق ﺑﺎﻋﺚ ﻣﯿﺸﻮد ﺗﺎ ﺷﻤﺎ ﻧﺎم jqرا ﺟﺎﯾﮕﺰﯾﻦ $ﻧﻤﺎﯾﯿﺪ .
ﺑﺮای اﯾﻨﮑﻪ jqueryﺑﻪ ﺑﮫﺘﺮﯾﻦ ﺣﺎﻟﺖ ﻣﻤﮑﻦ ﮐﺎر ﺧﻮد را اﻧﺠﺎم دھﺪ ﺷﻤﺎ ﺑﺎﯾﺪ :
ﻪﺤﻔﺻ 9
آﻣﻮزش jQuery
blog.monavarian.ir
•
ﺗﻤﺎم ﮐﺪ ھﺎی jqueryرا درون event handlerھﺎ ﻗﺮار دھﯿﺪ .
•
ﻤﺗﺎم event handlerھﺎ )ﺗﻮاﺑﻊ روﯾﺪاد ھﺎ ( را درون روﯾﺪاد document.readyﻗﺮار دھﯿﺪ .
•
ﮐﺪھﺎی ﺧﻮد را درون ﯾﮏ ﻓﺎﯾﻞ jsﺟﺪاﮔﺎﻧﻪ ﻗﺮار دھﯿﺪ و آن را درون ﺻﻔﺤﻪ ﺧﻮد ﻓﺮاﺧﻮاﻧﯽ ﮐﻨﯿﺪ.
•
اﮔﺮ ﺗﺎﺑﻊ ھﻢ ﻧﺎم $دارﯾﺪ ﺗﻮﺳﻂ ﺗﺎﺑﻊ noConflictﻧﺎم ﺗﺎﺑﻊ jqueryرا ﺗﻌﻮﯾﺾ ﻧﻤﺎﯾﯿﺪ.
ﯾﮏ ﻣﺜﺎل ﺳﺎده : ><html ><head ><script type="text/javascript" src="jquery.js"></script >"<script type="text/javascript {)($(document).ready(function {)($('a').click(function ;)'alert('clicked )} ;)} ></script ></head ><body ><a href="http://blog.monavarian.ir" > Blog.Monavarian.ir </a ></body ></html
در ﻣﺜﺎل ﺑﺎﻻ : .١اﺑﺘﺪا ﻓﺎﯾﻞ ﮐﺘﺎﺑﺨﺎﻧﻪ jqueryﻞﯾﺎﻓ ﯽﻨﻌﯾ jquery.jsرا ﺻﺪا زدﯾﻢ . .٢در ﺳﻄﺮ ﺑﻌﺪی در ﯾﮏ ﺗﮓ scriptﮔﻔﺘﯿﻢ ﮐﻪ ھﻨﮕﺎﻣﯽ ﮐﻪ روﯾﺪاد readyاز ﺷﯽ documentﺻﺪا زده ﺷﺪ اﯾﻦ ﮐﺎر ھﺎ را اﻧﺠﺎم ﺑﺪه : Clicked ﺗﺎﺑﻌﯽ روی روﯾﺪاد ﮐﻠﯿﮏ ﺗﮓ ھﺎی aﻣﻮﺟﻮد در ﺻﻔﺤﻪ ﺑﻨﻮﯾﺲ )اﯾﻦ ﺗﺎﺑﻊ ﻓﻘﻂ ﻋﺒﺎرترا ﺑﺼﻮرت ﭘﺎپ آپ ﻧﻤﺎﯾﺶ ﻣﯿﺪھﺪ ( .٣در ﺑﺪﻧﻪ ﺻﻔﺤﻪ ﯾﮏ ﺗﮓ aﻧﻮﺷﺘﯿﻢ . .۴ﺑﺎ ذﺧﯿﺮه ﻓﺎﯾﻞ ﺑﺎﻻ ﺑﻪ ﻧﺎم test1.htmlو اﺟﺮای آن در ، browserﻟﯿﻨﮑﯽ را ﻣﯿﺒﯿﻨﯿﻢ ﮐﻪ ﺑﺎ ﮐﻠﯿﮏ روی آن ﻣ ﯾﺎﻤﻧ . ﻋﺒﺎرت clickedﺑﺼﻮرت popupﺪﺑﺎﯾ ﻪﺘﮑﻧ :در ﻣﺜﺎل ﻓﻮق ھﻨﮕﺎﻣﯽ ﮐﻪ روی ﻟﯿﻨﮏ ﮐﻠﯿﮏ ﻣﯿﮑﻨﯿﻢ .ﺑﻌﺪ از ﻧﻤﺎﯾﺶ ﭘﯿﻐﺎم ، clickedﻟﯿﻨﮏ اﺟﺮا ﺷﺪه و ﺑﻪ ﻪﺤﻔﺻ blog.monavarian.irﻣﻨﺘﻘﻞ ﺧﻮاھﯿﻢ ﺷﺪ .اﮔﺮ ﻣﯿﺨﻮاھﯿﺪ ﺗﮓ aروﯾﺪاد ﭘﯿﺸﻔﺮض ﺧﻮد را ﻧﺎدﯾﺪه ﺑﮕﯿﺮد ﻣﯿﺘﻮاﻧﯿﺪ از ﺗﺎﺑﻊ )( preventDefaultاﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ .در اﯾﻦ ﺣﺎﻟﺖ ﺗﮑﻪ ﮐﺪ jqueryﻣﺎ ﺑﻪ ﺷﮑﻞ زﯾﺮ ﺗﻐﯿﯿﺮ ﻣﯿﮑﻨﺪ : {)($(document).ready(function {)$('a').click(function(event ;)'alert('clicked ;)(event.preventDefault )} ;)}
ﻪﺤﻔﺻ 10
آﻣﻮزش jQuery
blog.monavarian.ir
ﻓﺼﻞ ﺳﻮم : : jQuery Effects اﻓﮑﺖ ھﺎ ﺗﻮاﺑﻌﯽ ھﺴﺘﻨﺪ ﮐﻪ ﺑﺮ روی ﻧﻤﺎﯾﺶ ﻋﻨﺎﺻﺮ ﺻﻔﺤﻪ ﻋﻤﻠﯿﺎﺗﯽ اﻧﺠﺎم ﻣﯿﺪھﻨﺪ . اﻓﮑﺖ ھﺎی ﻣﻮﺟﻮد Hide, Show, Toggle, Slide, Fade , Animate : : Hide & Show ﺗﻮﺳﻂ دو ﺗﺎﺑﻊ )( hideو )( showﻣﯿﺘﻮاﻧﯿﺪ ﻋﻨﺎﺻﺮ ﺻﻔﺤﻪ را ﭘﻨﮫﺎن ﯾﺎ آﺷﮑﺎر ﻧﻤﺎﯾﯿﺪ : {)($("#btnhide").click(function ;)($("p").hide ;)} {)($("#btnshow").click(function ;)($("p").show ;)} در ﮐﺪ ﻓﻮق ھﻨﮕﺎﻣﯽ ﮐﻪ روی ﻋﻨﺼﺮی در ﺻﻔﺤﻪ ﺑﺎ آﯾﺪی btnhideﮐﻠﯿﮏ ﺷﻮد ﭘﺎراﮔﺮاﻓﮫﺎی درون ﺻﻔﺤﻪ )ﺗﮕﮫﺎی ( pﭘﻨﮫﺎی ﻣﯿﺸﻮﻧﺪ و ﺑﺎ ﮐﻠﯿﮏ روی ﻋﻨﺼﺮ ﺑﺎ آﯾﺪی btnshowﮐﻠﯿﮏ ﺷﻮد ﭘﺎراﮔﺮاﻓﮫﺎ ﻧﻤﺎﯾﺶ ﻣﯿﺒﺎﺑﻨﺪ . اﯾﻦ دو ﺗﺎﺑﻊ دو ﭘﺎراﻣﺘﺮ speedو callbackﻧﯿﺰ ﻣﯽ ﭘﺬﯾﺮﻧﺪ :
)$(selector).hide(speed,callback )$(selector).show(speed,callback ﭘﺎراﻣﺘﺮ speedﻣﯿﺘﻮاﻧﯿﺪ ﻣﻘﺪارھﺎی ' 'slow' , 'fast' , 'normalو ھﻤﭽﻨﯿﻦ ﻣﻘﺪاری ﺑﻪ ﻣﯿﻠﯽ ﺛﺎﻧﯿﻪ ﺑﭙﺬﯾﺮد . ﭘﺎراﻣﺘﺮ callbackﺗﺎﺑﻌﯽ اﺳﺖ ﮐﻪ ھﻨﮕﺎﻣﯽ ﮐﻪ ﻋﻤﻞ showﺎﯾ hideﺑﻪ طﻮر ﮐﺎﻣﻞ اﻧﺠﺎم ﺷﺪ ﺻﺪا زده ﻣﯿﺸﻮد . {)($("button").click(function ;)$("p").hide(1000 ;)} در ﻣﺜﺎل ﻓﻮق ﺑﺎ ﮐﻠﯿﮏ روی buttonﭘﺎراﮔﺮاف pظﺮف ﻣﺪت ١٠٠٠ﻣﯿﻠﯽ ﺛﺎﻧﯿﻪ ﭘﻨﮫﺎن ﻣﯿﺸﻮد . {)($("button").click(function ;) } ;)'$("p").hide('slow',function(){ alert('hide is finished ;)} در ﻣﺜﺎل ﻓﻮق ﺑﺎ ﮐﻠﯿﮏ روی buttonﭘﺎراﮔﺮاﻓﮫﺎی pﺑﺼﻮرت آھﺴﺘﻪ ﭘﻨﮫﺎن ﻣﯿﺸﻮﻧﺪ و ﭘﺲ از ﭘﻨﮫﺎن ﺷﺪن ﭘﯿﻐﺎم ' 'hide is finishedﺑﺮ روی ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ ﻣﯽ ﯾﺎﺑﺪ .
ﻪﺤﻔﺻ 11
آﻣﻮزش jQuery
blog.monavarian.ir
: Toggle اﯾﻦ اﻓﮑﺖ وﺿﻌﯿﺖ ﻋﻨﺼﺮ ﻣﺮﺑﻮطﻪ را از hideﻪﺑ showو ﺑﻠﻌﮑﺲ ﺗﺒﺪﯾﻞ ﻣﯿﮑﻨﺪ .ﯾﻌﻨﯽ اﮔﺮ ﻋﻨﺼﺮ ﭘﻨﮫﺎن ﺑﺎﺷﺪ ﺑﺎ اﺟﺮای اﯾﻦ اﻓﮑﺖ ﻋﻨﺼﺮ ﭘﯿﺪا ﻣﯿﺸﻮد و اﮔﺮ ﭘﯿﺪا ﺑﺎﺷﺪ ﭘﻨﮫﺎن ﻣﯿﺸﻮد . {)($("#line").click(function ;)($("#lineinfo").toggle ;)} در ﮐﺪ ﻓﻮق ﺑﺎ ﮐﻠﯿﮏ روی ﻋﻨﺼﺮی ﺑﺎ آﯾﺪی lineﻣﺸﺨﺼﺎت آن ﻋﻨﺼﺮ ﮐﻪ در ﻋﻨﺼﺮ دﯾﮕﺮی ﺑﺎ آﯾﺪی lineinfoﻗﺮار دارد ﻧﻤﺎﯾﺶ ﻣﯽ ﯾﺎﺑﺪ و ﺑﺎ ﮐﻠﯿﮏ ﻣﺠﺪد ﭘﻨﮫﺎن ﻣﯿﺸﻮد . اﯾﻦ اﻓﮑﺖ ھﻢ ھﻤﺎﻧﻨﺪ دو اﻓﮑﺖ ﻗﺒﻠﯽ دارای دو ﭘﺎراﻣﺘﺮ speedو Callbackﺪﺷ ﺑ ﯽﻣ .
: Slide
)$(selector).slideDown(speed,callback اﯾﻦ دﺳﺘﻮر selectorرا ﺑﺎ ﺳﺮﻋﺖ speedﺑﻪ ﺳﻤﺖ ﭘﺎﯾﯿﻦ ﺑﺎز ﻣﯿﮑﻨﺪ . )$(selector).slideUp(speed,callback اﯾﻦ دﺳﺘﻮر selectorرا ﺑﺎ ﺳﺖﻋﺮ speedﺑﻪ ﺳﻤﺖ ﺑﺎﻻ ﺟﻤﻊ ﻣﯿﮑﻨﺪ )( hide )$(selector).slideToggle(speed,callback اﯾﻦ دﺳﺘﻮر ﻧﯿﺰ selectorرا ﺑﯿﻦ دو وﺿﻌﯿﺖ ﺑﺎز و ﺑﺴﺘﻪ ﺗﻌﻮﯾﺾ ﻣﯿﻨﻤﺎﯾﺪ . ﭘﺎراﻣﺘﺮ ھﺎی اﯾﻦ ﺗﻮاﺑﻊ ھﻢ ﻣﺎﻧﻨﺪ اﻓﮑﺖ ھﺎی ﻗﺒﻠﯽ ﺗﻨﻈﯿﻢ ﻣﯿﺸﻮﻧﺪ .
: Fade اﯾﻦ اﻓﮑﺖ ھﺎ ﻧﯿﺰ ﺑﺮای ﻧﻤﺎﯾﺶ و ﭘﻨﮫﺎن ﮐﺮدن ﻋﻨﺼﺮ اﺳﺘﻔﺎده ﻣﯿﺸﻮد ﺑﺎ اﯾﻦ ﺗﻔﺎوت ﮐﻪ ﻧﻮع ﭘﻨﮫﺎن ﮐﺮدن و ﻧﻤﺎﯾﺶ دادن ﻋﻨﺎﺻﺮ در اﯾﻦ دﺳﺘﻮران ﻣﺘﻔﺎوت اﺳﺖ و ﺑﺎ ﺗﻐﯿﯿﺮ ﺷﻔﺎﻓﯿﺖ ) ( opacityاﻧﺠﺎم ﻣﯿﺸﻮد.
)$(selector).fadeIn(speed,callback اﯾﻦ ﺗﺎﺑﻊ ﻋﻨﺼﺮ selectorرا در ﺻﻔﺤﮫ ﻧﻤﺎﯾﺎن ﻣﯿﮑﻨﺪ . )$(selector).fadeOut(speed,callback اﯾﻦ ﺗﺎﺑﻊ ﻋﻨﺼﺮ selectorرا در ﺻﻔﺤﮫ ﻣﺨﻔﯽ ﻣﯿﮑﻨﺪ . )$(selector).fadeTo(speed,opacity,callback
ﻪﺤﻔﺻ 12
آﻣﻮزش jQuery
blog.monavarian.ir
اﯾﻦ ﺗﺎﺑﻊ ﭘﺎراﻣﺘﺮی ﺑﻪ ﻋﻨﻮان opacityﻣﯿﭙﺬﯾﺮد ﮐﻪ ﻣﯿﺰان ﺷﻔﺎﻓﯿﺖ را ﺑﯿﻦ دو ﻋﺪد ٠و ١ﺗﻌﯿﯿﻦ ﻣﯿﮑﻨﺪ ﮐﻪ ﻋﺪد ١ ﯾﻌﻨﯽ ﮐﺎﻣﻼ آﺷﮑﺎر و ﻋﺪد ٠ﯾﻌﻨﯽ ﭘﻨﮫﺎن و ﻋﻨﺼﺮ را ﺑﻊ اﻧﺪازه ﻋﺪد ﺷﻔﺎﻓﯿﺖ ،ﺷﻔﺎف ﻣﯿﮑﻨﺪ . ﻼﺜﻣ : {)($("button").click(function ;)$("div").fadeTo("slow",0.25 ;)} در ﮐﺪ ﻓﻮق ﺑﺎ ﮐﻠﯿﮏ روی buttonﺮﺼﻨﻋ divدرون ﺻﻔﺤﻪ ﺑﻪ آراﻣﯽ ﺷﻔﺎف ﻣﯿﺸﻮد ﺗﺎ ﺑﻪ 25درﺻﺪ ﺷﻔﺎﻓﯿﺖ ﺪﺳﺮﺑ .
: Custom Animation )]$(selector).animate({params},[duration],[easing],[callback ﭘﺎراﻣﺘﺮ paramsﭘﺎراﻣﺘﺮھﺎﯾﯽ را ﻣﯿﭙﺬﯾﺮد ﮐﻪ ﻗﺮار اﺳﺖ ھﻤﺰﻣﺎن ﺑﺎ ھﻢ ﺑﺮ روی selectorاﻋﻤﺎل ﺷﻮﻧﺪ . ﻼﺜﻣ : ;)}"animate({width:"70%",opacity:0.4,marginLe :"0.6in",fontSize:"3em ﺗﻤﺎم ﭘﺎراﻣﺘﺮ ھﺎ درون }{ ﻧﻮﺷﺘﻪ ﻣﯿﺸﻮﻧﺪ و ﺑﺎ ﮐﺎﻣﺎ ' ',از ھﻢ ﺟﺪا ﻣﯿﺸﻮﻧﺪ .ھﺮ ﭘﺎراﻣﺘﺮ ﺑﺎ ﻋﻨﻮان و ﺳﭙﺲ " ":و ﺑﻌﺪ ﻣﻘﺪار آن ﻣﺸﺨﺺ ﻣﯿﺸﻮد . ﭘﺎراﻣﺘﺮ durationﻣﺎﻧﻨﺪ ﭘﺎراﻣﺘﺮ speedدر اﻓﮑﺖ ھﺎی ﻗﺒﻠﯽ ﻋﻤﻠﯽ ﻣﯿﮑﻨﺪ ﮐﻪ ﻣﯿﺘﻮاﻧﺪ ﻣﻘﺎدﯾﺮ 'slow' , 'fast' , normalو ﯾﺎ ﻋﺪدی ﺑﻪ ﻣﯿﻠﯽ ﺛﺎﻧﯿﻪ را در ﺑﺮ ﺑﮕﯿﺮد . >"<script type="text/javascript {)($(document).ready(function {)($("#start").click(function ;)"$("#box").animate({le :"100px"},"slow ;)"$("#box").animate({fontSize:"3em"},"slow ;)} ;)} ></script در ﻗﻄﻌﻪ ﮐﺪ ﻓﻮق وﻗﺘﯽ روی ﻋﻨﺼﺮ ﺑﺎ آﯾﺪی startﮐﻠﯿﮏ ﻣﯿﺸﻮد ﻋﻨﺼﺮ #boxدر ﺻﻔﺤﻪ اول ١٠٠ﭘﯿﮑﺴﻞ ﺑﻪ ﺖﻤﺳ ﭼﭗ رﻓﺘﻪ و ﺳﭙﺲ ﻧﻮﺷﺘﻪ ھﺎی داﺧﻠﺶ ﺑﻪ اﻧﺪازه 3emﺧﻮاھﺪ ﺷﺪ . ﻣﯿﺘﻮان ﺧﻄﮫﺎی ۴و ۵را در ﯾﮏ ﺧﻂ ﻧﻮﺷﺖ : ;)"$("#box").animate({le :"100px", fontSize:"3em"},"slow ﮐﻪ اﻟﺒﺘﻪ در اﯾﻦ ﺣﺎﻟﺖ ھﺮ دو ﻣﻘﺪار ھﻤﺰﻣﺎن ﺑﺎ ھﻢ ﺑﻪ #boxاﻋﻤﺎل ﺧﻮاھﺪ ﺷﺪ.
ﻪﺤﻔﺻ 13
آﻣﻮزش jQuery
blog.monavarian.ir
ﻪﺘﮑﻧ :ﻊﺑﺎﺗ )( stopھﻢ ﺑﺮای ﻣﺘﻮﻗﻒ ﮐﺮدن اﻓﮑﺖ در ﺣﺎل اﺟﺮا اﺳﺘﻔﺎده ﻣﯿﺸﻮد : ;)($(selector).stop
ﻧﮑﺘﻪ ﻣﮫﻢ :ﺧﺼﻮﺻﯿﺖ ﻓﺮاﺧﻮاﻧﯽ زﻧﺠﯿﺮه ای :ﻣﯿﺘﻮان ﻣﺘﺪھﺎ را ﺑﺠﺎی ﻧﻮﺷﺘﻦ در ﺧﻄﮫﺎی ﺟﺪاﮔﺎﻧﻪ ، ﭘﺸﺖ ﺳﺮ ھﻢ ﺑﻪ ﯾﮏ ﻋﻨﺼﺮ اﻋﻤﺎل ﮐﺮد ﻣﺜﻼ : ;)$('#box').fadeIn(1000 ;)'$('#box').animate({left:"100px"},'slow ;)$('#box').fadeOut(1000 ﺑﺠﺎی ﮐﺪھﺎی ﻓﻮق ﮐﻪ ھﻤﻪ ﺑﺮ روی ﯾﮏ ﻋﻨﺼﺮ اﻋﻤﺎل ﻣﯿﺸﻮﻧﺪ ﻣﯿﺘﻮان ﻧﻮﺷﺖ : ;)$('#box').fadeIn(1000).animate({left:"100px"},'slow').fadeOut(1000
ﺳﻮال :ﭼﺮا ﺗﺎﺑﻊ Callbackﺑﺎﯾﺪ اﺳﺘﻔﺎده ﺷﻮد ؟ ﮔﺎھﯽ اوﻗﺎت ﻣﺎ ﻧﯿﺎز دارﯾﻢ ﻋﻤﻠﯽ را دﻗﯿﻘﺎ ﺑﻌﺪ از اﻋﻤﺎل ﮐﺎﻣﻞ ﯾﮏ اﻓﮑﺖ اﺟﺮا ﮐﻨﯿﻢ . ﺑﻪ ﻣﺜﺎل زﯾﺮ ﺗﻮﺟﻪ ﻧﻤﺎﯾﯿﺪ : {)($("button").click(function ;)$("p").hide(1000 ;)"alert("The paragraph is now hidden ;)} در اﯾﻦ ﻣﺜﺎل ﻣﺎ ﻣﯿﺨﻮاھﯿﺪ ھﻨﮕﺎﻣﯽ ﮐﻪ ﭘﺎراﮔﺮاف ﺑﻪ طﻮر ﮐﺎﻣﻞ ﭘﻨﮫﺎن ﺷﺪ ﻋﺒﺎرت " the paragraph is now ﯾﺎﻤﻧ .اﻣﺎ در ﻋﻤﻞ اﯾﻦ اﺗﻔﺎق ﻧﻤﯽ اﻓﺘﺪ زﯾﺮا در ﺣﯿﻦ اﻧﺠﺎم ﻋﻤﻞ hideﺧﻂ ﺑﻌﺪی ﻓﺮﻣﺎن ﺻﺪا " hiddenﺪﺑﺎﯾ زده ﺧﻮاھﺪ ﺷﺪ و اﯾﻦ اﻣﺮ ﺑﺎﻋﺚ ﺗﺪاﺧﻞ ﺧﻮاھﺪ ﺷﺪ . اﻣﺎ ﺑﻪ اﯾﻦ ﻣﺜﺎل دﻗﺖ ﻧﻤﺎﯾﯿﺪ : {)($("button").click(function ;)$("p").hide(1000,my_alert ;)} )(function my_alert { ;)"alert("The paragraph is now hidden }
ﻪﺤﻔﺻ 14
jQuery آﻣﻮزش
blog.monavarian.ir
در اﯾﻦ ﺣﺎﻟﺖ دﻗﯿﻘﺎ ﺑﻌﺪ از اﺗﻤﺎم اﻓﮑﺖ. اﺳﺘﻔﺎده ﺷﺪهCallback ﺑﻪ ﻋﻨﻮان ﺗﺎﺑﻊmy_alert در اﯾﻦ ﻣﺜﺎل از ﺗﺎﺑﻊ . ﺻﺪا زده ﻣﯿﺸﻮدmy_alert ﻊﺑﺎﺗhide در ﻣﺜﺎل زﯾﺮ ﻗﺼﺪ دارﯾﻢ ﺗﻌﺪادی ﻟﯿﻨﮏ در ﺻﻔﺤﻪ ﻗﺮار دھﯿﻢ ﮐﻪ ﺑﺎ رﻓﺘﻦ ﻣﻮس روی آﻧﮫﺎ ﺗﻮﺿﯿﺢ ﻣﺨﺘﺼﺮ ﺑﺎ: ﻣﺜﺎل : اﻓﮑﺖ ﻣﻨﺎﺳﺐ ﻧﻤﺎﯾﺶ ﯾﺎﺑﺪ <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('a').mouseover(function(){ $(this).next('div.info').slideDown('slow'); }) $('a').mouseout(function(){ $(this).next('div.info').slideUp('slow'); }); }); </script> <style> ul { list-style:none; margin:0; padding:0; } ul li { padding:3px; background:#EEE; border:1px solid #000000; width:200px; margin:2px; } .info { padding:5px; background:#FFF; color:#000; display:none; } </style> </head> <body> <ul> <li> <a href="http://blog.monavarian.ir" > Blog.Monavarian.ir </a> <div class="info">mohsen monavarian Weblog</div> </li> <li> <a href="http://share.wanted.ir" >wanted.ir </a> <div class="info">The First shared TextBoxes in Iran</div> </li> <li> <a href="http://www.res2ran.com" >Res2Ran.com </a> <div class="info">Shiraz restuarants And FastFoods Guide , Food instructions</div>
15 ﻪﺤﻔﺻ
آﻣﻮزش jQuery
blog.monavarian.ir
></li ></ul ></body ></html
ھﻤﺎﻧﻄﻮر ﮐﻪ در ﮐﺪ ﺑﺎﻻ ﻣﺸﺎھﺪه ﻣﯿﮑﻨﯿﺪ در ﻗﺴﻤﺖ ﮐﺪ jqueryدو ﺗﺎﺑﻊ ﺑﺮای روﯾﺪادھﺎی mouseoverو mouseoutﺗﮕﮫﺎی ) aﻟﯿﻨﮑﮫﺎی ﺻﻔﺤﻪ ( ﻧﻮﺷﺘﻪ ﺷﺪه ﮐﻪ ﺗﺎﺑﻊ اوﻟﯽ ﺑﺎﻋﺚ ﻧﻤﺎﯾﺶ ﺗﮓ div.infoﺑﺎ اﻓﮑﺖ slideDownﻣﯿﺸﻮد و ﺗﺎﺑﻊ دوﻣﯽ ﻧﯿﺰ ﺑﺎ اﻓﮑﺖ slideUpﺗﮓ را ﻣﺨﻔﯽ ﻣﯽ ﮐﻨﺪ . ﺷﻤﺎ ﻣﯿﺘﻮاﻧﯿﺪ ﺑﻪ ﺟﺎی slideDownو slideUpاز اﻓﮑﺖ ھﺎی دﯾﮕﺮی ﮐﻪ در اﯾﻦ ﻓﺼﻞ ﺑﯿﺎن ﺷﺪ اﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ . ﻪﺘﮑﻧ :ﻊﺑﺎﺗ : next ;)$(selector1).next(selector2 اﯾﻦ ﺗﺎﺑﻊ ﺑﻪ دﻧﺒﺎل ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ ﻣﻄﺎﺑﻖ ﺑﺎ selecotr2ﻣﯿﮕﺮدد ﮐﻪ ﭘﺲ از ﻋﻨﺼﺮ selector1در ﺻﻔﺤﻪ ﻣﻮﺟﻮد ﺪﺷﺎﺑ .ﻣﺜﻼ در ﮐﺪ ﺑﺎﻻ دﻧﺒﺎل اوﻟﯿﻦ ﻋﻨﺼﺮ divﺑﺎ ﮐﻼس infoﺑﻌﺪ از ﻋﻨﺼﺮ ﺟﺎری )ﮐﻪ ھﻤﺎن ﺗﮓ aاﻧﺘﺨﺎب ﺷﺪه اﺳﺖ ( ﻣﯽ ﮔﺮدد .
ﻪﺤﻔﺻ 16
آﻣﻮزش jQuery
blog.monavarian.ir
ﻓﺼﻞ ﭼﮫﺎرم : Jqueryو ﺗﻐﯿﯿﺮ ﻣﺤﺘﻮای ﻋﻨﺎﺻﺮ : در jqueryﺷﻤﺎ ﻣﯿﺘﻮاﻧﯿﺪ ﺑﻪ راﺣﺘﯽ ﻣﺤﺘﻮای ﺗﮓ ھﺎ و ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﺻﻔﺤﻪ را ﺗﻐﯿﯿﺮ ﻧﻤﺎﯾﯿﺪ . ﺑﺮای اﯾﻨﮑﺎر ﭼﻨﺪﯾﻦ ﺗﺎﺑﻊ در jqueryوﺟﻮد دارد : ;)$(selector).html(content ﺑﺎ اﯾﻦ دﺳﺘﻮر ﻣﺤﺘﻮی contentرا داﺧﻞ ﻋﻨﺎﺻﺮ Selectorsﻗﺮار ﻣﯿﺪھﺪ . ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل : ;)" $("p#head").html(" Welcome اﯾﻦ ﻗﻄﻌﻪ ﮐﺪ در ﺗﮓ pﺑﺎ آﯾﺪی headﻋﺒﺎرت Welcomeرا ﻣﯿﻨﻮﯾﺴﺪ . ﻪﺘﮑﻧ content :ﻣﯿﺘﻮان ﻣﺘﻦ ﺳﺎده ﯾﺎ htmlﺑﺪﺷﺎ : ;)">$('p').html("<h1> hello </h1 ﺗﻮاﺑﻊ دﯾﮕﺮی ﻧﯿﺰ ﺑﺮای ﺗﻐﯿﯿﺮ ﻣﺤﺘﻮا ﻋﻨﺎﺻﺮ وﺟﻮد دارﻧﺪ : )$(selector).append(content اﯾﻦ ﺗﺎﺑﻊ ﻋﺒﺎرت contentرا ﺑﻪ اﻧﺘﮫﺎی ﻣﺤﺘﻮای Selectorاﺿﺎﻓﻪ ﻣﯿﮑﻨﺪ . )$(selector).prepend(content اﯾﻦ ﺗﺎﺑﻊ ﻋﺒﺎرت contentرا ﺑﻪ اﺑﺘﺪای ﺘﺤﻣﻮای Selectorاﺿﺎﻓﻪ ﻣﯿﮑﻨﺪ . )$(selector).after(content اﯾﻦ ﺗﺎﺑﻊ ﻋﺒﺎرت contentرا ﺪﻌﺑ از ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﻧﻈﯿﺮ Selectorدرج ﻣﯿﮑﻨﺪ . )$(selector).before(content اﯾﻦ ﺗﺎﺑﻊ ﻋﺒﺎرت contentرا ﻞﺒﻗ از ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﻧﻈﯿﺮ Selectorدرج ﻣﯿﮑﻨﺪ .
ﻪﺘﮑﻧ :دﺳﺘﻮر )( htmlﺑﻪ ﺗﻨﮫﺎی ﻣﺤﺘﻮی ﻋﻨﺼﺮ را ﺑﺮﻣﯿﮕﺮداﻧﺪ : ;))(alert($('#box').html ﺗﺎﺑﻊ دﯾﮕﺮی ھﻢ ﺑﺮای ﺧﻮاﻧﺪن ﻣﺤﺘﻮی وﺟﻮد دارد ﺑﻪ ﻧﺎم )( textﮐﻪ ھﻤﺎﻧﻨﺪ ﺗﺎﺑﻊ )( htmlﻋﻤﻞ ﻣﯿﮑﻨﺪ ﺑﺎ اﯾﻦ ﺗﻔﺎوت ﮐﻪ اﯾﻦ ﺗﺎﺑﻊ ﺗﮓ ھﺎی htmlرا ﺣﺬف ﻣﯿﮑﻨﺪ و ﻓﻘﻂ ﻧﻮﺷﺘﻪ را ﺑﺮﻣﯿﮕﺮداﻧﺪ در ﺣﺎﻟﯽ ﮐﻪ )( htmlﺗﻤﺎم ﻣﺤﺘﻮی را ﺑﺎ ﺗﮕﮫﺎﯾﺶ ﺑﺮﻣﯿﮕﺮداﻧﺪ .
ﻪﺤﻔﺻ 17
jQuery آﻣﻮزش
blog.monavarian.ir
: ﺑﻪ ﻣﺜﺎل زﯾﺮ ﺗﻮﺟﻪ ﻧﻤﺎﯾﯿﺪ <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ alert($('#test').text()); alert($('#test').html()); }); </script> </head> <body> <p id="test"> <b> paragraph </b> </p> <button>Click me</button> </body> </html>
" را ﻧﻤﺎﯾﺶ ﻣﯿﺪھﺪ و دوﻣﯿﻦ ﭘﻨﺠﺮهparagraph" ﭘﺲ از اﺟﺮای دﺳﺘﻮر ﻓﻮق و ﮐﻠﯿﮏ رو دﮐﻤﻪ اوﻟﯿﻦ ﭘﻨﺠﺮه ﻣﻘﺪار . <" ﻧﻤﺎﯾﺶ داده ﻣﯿﺸﻮدb> paragraph </b>" ﻋﺒﺎرت
: ( ﯽﺷAttribute) ﺗﻐﯿﯿﺮ ﺧﺼﻮﺻﯿﺎت . دﺳﺘﺮﺳﯽ ﭘﯿﺪا ﮐﺮدhtml ﻣﯿﺘﻮان ﺑﻪ ﺧﺼﻮﺻﯿﺎت ﯾﮏ ﺗﮓattr() ﻊﺑﺎﺗ ﻂﺳﻮﺗ $(selector).attr(attribute); . از ﻋﻨﺼﺮ اﻧﺘﺨﺎﺑﯽ را ﺑﺮ ﻣﯿﮕﺮداﻧﺪattribute ﺧﺼﻮﺻﯿﺖ $(selector).attr(attribute,value); . را ﻧﺴﺒﺖ ﻣﯿﺪھﺪvalue از ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ ﻣﻘﺪارattribute ﺑﻪ ﺧﺼﻮﺻﯿﺖ : ﻼﺜﻣ $('a').attr('href'); . ﻣﻮﺟﻮد در ﺻﻔﺤﻪ را ﺑﺮ ﻣﯿﮕﺮداﻧﺪa از اوﻟﯿﻦ ﺗﮓhref ﻣﻘﺪار ﺧﺼﻮﺻﯿﺖ $(this).attr('id','newName'); . ﺗﻐﯿﯿﺮ ﻧﺎم ﻣﯿﺪھﺪnewName ﻋﻨﺼﺮ ﺟﺎری را ﺑﻪid ﻣﻘﺪار
: ﻋﻨﺎﺻﺮ ﻓﺮم ھﺎvalue دﺳﺘﺮﺳﯽ ﺑﻪ $(selector).val(); $(selector).val(newValue);
18 ﻪﺤﻔﺻ
jQuery آﻣﻮزش
blog.monavarian.ir
. ( ﻋﻨﺎﺻﺮ ﻣﻮﺟﻮد در ﻓﺮم ھﺎ دﺳﺘﺮﺳﯽ و ﻣﻘﺪارش را ﺗﻐﯿﯿﺮ دھﯿﻢvalue) ﻣﯿﺘﻮاﻧﯿﻢ ﺑﻪ ﻣﺤﺘﻮاval() ﻊﺑﺎﺗ ﻂﺳﻮﺗ : ﺑﻪ ﻣﺜﺎل ھﺎی زﯾﺮ ﺗﻮﺟﻪ ﻧﻤﺎﯾﯿﺪ $('input#name').val(); . را ﺑﺮ ﻣﯿﮕﺮداﻧﺪname ﺑﺎ آﯾﺪیinput ﺮﺼﻨﻋvalue ﻣﻘﺪار $('select.foo option:selected').val(); $('select.foo').val('two');
. ﺑﺎز اﺳﺖ ﻣﻘﺪار اﻧﺘﺨﺎﺑﯽ را ﺑﺮﻣﯿﮕﺮداﻧﺪdropdown ھﻨﮕﺎﻣﯽ ﮐﻪ ﭘﻨﺠﺮه
. ﺗﻨﻈﯿﻢ ﻣﯿﮑﻨﺪtwo را روی ﻣﻘﺪارfoo ﺑﺎ ﮐﻼسselect ﻣﻘﺪار اﻧﺘﺨﺎب ﺷﺪه ﻋﻨﺼﺮ $('input:checkbox:checked').val(); . ﻣﻘﺪار ﭼﮏ ﺑﺎﮐﺲ اﻧﺘﺨﺎب ﺷﺪه را ﺑﺮ ﻣﯿﮕﺮداﻧﺪ $('input:radio[name=bar]:checked').val(); . را ﺑﺮ ﻣﯿﮕﺮداﻧﺪbar ﻣﻘﺪار اﻧﺘﺨﺎب ﺷﺪه از دﮐﻤﻪ ھﺎی رادﯾﻮﯾﯽ در ﮔﺮوه ﺑﺎ ﻧﺎم : ﻣﺜﺎل <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("input:button").click(function () { var text = $(this).val(); $("input:text").val(text); }); }) </script> </head> <body> <div> <input type="button" value="First" /> <input type="button" value="Secont" /> <input type="button" value="third" /> </div> <input type="text" value="click a button" /> </body> </html>
. آن دﮐﻤﻪ ھﺎ در ﺗﮑﺴﺖ ﺑﺎﮐﺲ ﻧﻤﺎﯾﺶ ﻣﯽ ﯾﺎﺑﺪvalue ﭘﺲ از اﺟﺮا ﺑﺎ ﮐﻠﯿﮏ روی ھﺮ دﮐﻤﻪ ﻣﻘﺪار
19 ﻪﺤﻔﺻ
آﻣﻮزش jQuery
blog.monavarian.ir
ﻢﺠﻨ ﻞﺼﻓ : ﺗﻐﯿﯿﺮ اﺳﺘﺎﯾﻞ در ﺟﯽ ﮐﻮﺋﺮی : ﻂﺳﻮﺗ jqueryﻣﯿﺘﻮاﻧﯿﺪ ﻣﺴﺘﻘﯿﻤﺎ اﺳﺘﺎﯾﻞ ﯾﮏ ﺷﯽ را در ﺻﻔﺤﻪ ﺗﻐﯿﯿﺮ دھﯿﺪ .ﺑﺮای ﺗﻐﯿﯿﺮ اﺳﺘﺎﯾﻞ ﭼﻨﺪ ﺗﺎﺑﻊ ﻣﮫﻢ وﺟﻮد دارد :
)$(selector).css(name,value )}$(selector).css({properties )$(selector).css(name )$(selector).height(value )$(selector).width(value
§ § § § §
ﻊﺑﺎﺗ ﻂﺳﻮﺗ cssﺑﻪ ﺳﻪ روش ﻓﻮق ﻣﯿﺘﻮان ﻣﻘﺪار اﺳﺘﺎﯾﻞ ﻋﻨﺎﺻﺮ را ﺗﻐﯿﯿﺮ داد . )$(selector).css(name,value در اﯾﻦ دﺳﺘﻮر ﻣﻘﺪار valueرا ﺑﺮای ﺧﺼﻮﺻﯿﺖ nameدر ﺗﻤﺎم ﻋﻨﺎﺻﺮ htmlﺎﺑ ﻖﺑ ﻄﻣ selectorﺗﻨﻈﯿﻢ ﻣﯿﮑﻨﺪ. ;)"$("p").css("background-color","yellow ﻋﺒﺎرت ﺑﺎﻻ رﻧﮓ ﭘﯿﺶ زﻣﯿﻨﻪ ھﻤﻪ ﭘﺎراﮔﺮاف ھﺎی ﻣﻮﺟﻮد در ﺻﻔﺤﻪ را ﺑﻪ زرد ﺗﺒﺪﯾﻞ ﻣﯿﮑﻨﺪ.
$(selector).css({properties}) : اﯾﻦ دﺳﺘﻮر ﺑﺮای ﺗﻨﻈﯿﻢ ﭼﻨﺪﯾﻦ ﺧﺼﻮﺻﯿﺖ cssﺑﺮای ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﺪ ﺎﺑ ﯽﻣ ﯽ .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل : ;)}"$("p").css({"background-color":"yellow","font-size":"200%
ﻋﺒﺎرت ﻓﻮق رﻧﮓ ﭘﯿﺶ زﻣﯿﻨﻪ ﭘﺎراﮔﺮاﻓﮫﺎ را زرد و اﻧﺪازه ﻧﻮﺷﺘﻪ آﻧﮫﺎ را دوﺑﺮاﺑﺮ ﻣﯿﮑﻨﺪ .ھﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯿﺒﯿﻨﯿﺪ ھﺮ ﺧﻮﺻﻮﺻﯿﺖ ﺑﺎ ﯾﮏ ﮐﺎﻣﺎ " ",از ﺧﺼﻮﺻﯿﺖ ﺑﻌﺪی ﺟﺪا ﻣﯿﺸﻮد و ھﻤﻪ ﺧﺼﻮﺻﯿﺖ ھﺎ ﺑﯿﻦ } و { ﻗﺮار ﮔﺮﻓﺘﻪ اﻧﺪ. $(selector).css(name) : اﯾﻦ دﺳﺘﻮر ﻣﻘﺪار ﺧﺼﻮﺻﯿﺖ nameاز ﻋﻨﺼﺮ selectorرا ﺑﺮﻣﯿﮕﺮداﻧﺪ .ﻼﺜﻣ : ;)"$(this).css("color ﻋﺒﺎرت ﻓﻮق ﻣﻘﺪار رﻧﮓ ﻧﻮﺷﺘﻪ ﻋﻨﺼﺮ ﺟﺎری را ﺑﺮﻣﯿﮕﺮداﻧﺪ . )$(selector).height(value )$(selector).width(value
ﻪﺤﻔﺻ 20
§ §
jQuery آﻣﻮزش
blog.monavarian.ir
: ھﺎ اﺳﺘﻔﺎده ﻣﯿﺸﻮدselector ﺑﻪ ﺗﺮﺗﯿﺐ ﺑﺮای ﺗﻐﯿﯿﺮ اﻧﺪازه ﻋﺮض و ارﺗﻔﺎعheight وwidth دو ﺗﺎﺑﻊ $("#boxinfo").height("200px"); . ﭘﯿﮑﺴﻞ ﻣﯿﮑﻨﺪ٢٠٠ در ﺻﻔﺤﻪ راboxinfo ﻋﺒﺎرت ﻓﻮق ﻣﻘﺪار ارﺗﻔﺎق ﻋﻨﺼﺮی ﺑﺎ آﯾﺪی $(this).width("200px").height("200px"); .ﭘﯿﮑﺴﻞ ﻣﯿﮑﻨﺪ٢٠٠ ﻋﺒﺎرت ﻓﻮق اﻧﺪازه ﻋﺮض و ارﺗﻔﺎع ﻋﻨﺼﺮ ﺟﺎری را ﺑﺮاﺑﺮ در ﺻﻮرﺗﯽ ﮐﻪ ﺑﺪون ﭘﺎراﻣﺘﺮ اﺳﺘﻔﺎده ﺷﻮﻧﺪ ﺑﻪ ﺗﺮﺗﯿﺐ ﻣﻘﺪار ﻋﺮض و ارﺗﻔﺎع ﻋﻨﺼﺮheight وwidth دو ﺗﺎﺑﻊ: ﻪﺘﮑﻧ .اﻧﺘﺨﺎﺑﯽ را ﺑﺮ ﻣﯿﮕﺮداﻧﻨﺪ
: اﻓﺰودن و ﺣﺬف ﮐﻼس $(selector).addClass(classname); $(selector).removeClass(classname); را ﺑﻪ ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ اﺿﺎﻓﻪ ﻧﻤﻮد و ﯾﺎ اﮔﺮ ﻋﻨﺎﺻﺮی دارایcss ﺗﻮﺳﻂ دو دﺳﺘﻮر ﻓﻮق ﻣﯿﺘﻮان ﯾﮏ ﮐﻼس . ﮐﻼﺳﯽ ھﺴﺘﻨﺪ آن ﮐﻼس را ﺣﺬف ﮐﺮد : ﻣﺜﺎل <html> <head> <script src="jquery.js" type="text/javascript" ></script> <script type="text/javascript"> $(document).ready(function(){ $('button').mouseover(function(){ $('p').addClass('info'); }) $('button').mouseout(function(){ $('p').removeClass('info'); }) }) </script> <title>Example 1</title> <style> .info { background:#000; color:#FFF; } </style> </head> <body> <button>move mouse to add or remove </button> <p>paragraph 1</p> <p class="info"> paragraph 2 whit class info</p> </body>
21 ﻪﺤﻔﺻ
آﻣﻮزش jQuery
blog.monavarian.ir
در ﮐﺪ ﻓﻮق ﭘﺲ از اﺟﺮا ﺑﺎ ﺑﺮدن ﻣﻮس روی دﮐﻤﻪ ﮐﻼس infoﺑﻪ ﭘﺎراﮔﺮاف ھﺎ اﻋﻤﺎل ﻣﯿﺸﻮد و ﺑﺎ ﺑﺮن ﻣﻮس ﺑﻪ ﺧﺎرج از دﮐﻤﻪ ﮐﻼس infoﺣﺬف ﻣﯿﺸﻮد. ﻪﺘﮑﻧ :ﺗﻮﺳﻂ دﺳﺘﻮر ) $(selector).toggleClass(contentﻣﯿﺘﻮان ﺑﻪ ﻋﻨﺼﺮی ﮐﻼﺳﯽ را اﺿﺎﻓﻪ ﮐﺮد و در ﺻﻮرﺗﯽ ﮐﻪ ﻋﻨﺼﺮ از اﯾﻦ ﮐﻼس اﺳﺘﻔﺎده ﻣﯿﮑﻨﺪ آن را ﺣﺬف ﮐﺮد ) .ﺗﻐﯿﯿﺮ وﺿﻌﯿﺖ ﺑﯿﻦ اﺿﺎﻓﻪ و ﺣﺬف ﮐﻼس contentﺑﺮای ﻋﻨﺼﺮ . ( selector ): hasClass(classname ﻣﺸﺨﺺ ﻣﯿﮑﻨﺪ ﮐﻪ آﯾﺎ ﻋﻨﺼﺮ دارای ﮐﻼس classnameھﺴﺖ ﯾﺎ ﺧﯿﺮ . ) )'if ( $('#mydiv').hasClass('info ;)'alert('mydiv has class info )(: position )($(selector).position اﯾﻦ ﺗﺎﺑﻊ ﻓﺎﺻﻠﻪ selectorرا از ﺑﺎﻻ و ﭼﭗ ﺻﻔﺤﻪ ﻣﺸﺨﺺ ﻣﯿﮑﻨﺪ .ﺑﺮای دﺳﺘﺮﺳﯽ ﺑﻪ ﻓﺎﺻﻠﻪ ﺑﺎﻻ از .topو ﺑﺮای دﺳﺘﺮﺳﯽ ﺑﻪ ﻓﺎﺻﻠﻪ ﭼﭗ از .leftاﺳﺘﻔﺎده ﻣﯿﺸﻮد : ;)(var pos = $('#mydiv').position ;var left = pos.left ;var top = pos.top
ﻪﺤﻔﺻ 22
آﻣﻮزش jQuery
blog.monavarian.ir
ﻢﺸﺷ ﻞﺼﻓ : jQueryو اﯾﺠﺎﮐﺲ : Jqueryﮐﺘﺎﺑﺨﺎﻧﻪ ای ﺑﺴﯿﺎر ﮐﺎرآﻣﺪ ﺑﺮای ﮐﺎر ﺑﺎ ﺗﮑﻨﻮﻟﻮژی Ajaxدر ﺧﻮد دارد ﮐﻪ در اﯾﻦ ﻓﺼﻞ ﺑﻪ ﻣﻌﺮﻓﯽ آن ﺧﻮاھﯿﻢ ﭘﺮداﺧﺖ . ﻗﺒﻞ از ﺷﺮوع ﺑﺎﯾﺪ ﺑﺪاﻧﯿﻢ Ajaxﭼﯿﺴﺖ ؟ Ajaxﻣﺨﺘﺼﺮ ﺷﺪه ﻋﺒﺎرت Asynchronous JavaScript and XMLﻣﯿﺒﺎﺷﺪ .اﯾﻦ ﺗﮑﻨﻮﻟﻮژی اوﻟﯿﻦ ﺑﺎر ﺑﺮای اﺳﺘﻔﺎده از داده ھﺎی Xmlدر ﺟﺎوا اﺳﮑﺮﯾﭙﺖ اﯾﺠﺎد ﺷﺪ. Ajaxﯾﮏ زﺑﺎن ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﻧﯿﺴﺖ .ﺑﻠﮑﻪ ﺗﮑﻨﻮﻟﻮژی ﺑﺮای ارﺗﺒﺎط ﺑﺎ ﺳﺮور از طﺮﯾﻖ ﺟﺎوااﺳﮑﺮﯾﭙﺖ و اﯾﺠﺎد ﺻﻔﺤﺎت داﯾﻨﺎﻣﯿﮏ ﻣﯿﺒﺎﺷﺪ . ھﺴﺘﻪ اﺻﻠﯽ اﯾﺠﺎﮐﺲ ﺷﯿﯽ ﺑﻪ ﻧﺎم XMLHttpRequestﺪﺷ ﺑ ﯽﻣ . ﺑﻄﻮر ﻣﺨﺘﺼﺮ :اﯾﺠﺎﮐﺲ ارﺗﺒﺎط ﻏﯿﺮ ﻣﺴﺘﻘﯿﻢ و ﺗﺒﺎدل اطﻼﻋﺎت ﺑﺎ وب ﺳﺮور اﺳﺖ ﺑﻄﻮرﯾﮑﻪ ھﻤﻪ ﭼﯿﺰ در ﺑﮏ ﮔﺮاﻧﺪ اﺗﻔﺎق ﺑﯿﺎﻓﺘﺪ و ﻧﺘﯿﺠﻪ ﻓﻘﻂ در ﻗﺴﻤﺘﯽ از ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ ﯾﺎﺑﺪ ﺑﻄﻮرﯾﮑﻪ ﮐﻞ ﺻﻔﺤﻪ ﻧﯿﺎز ﺑﻪ ﺑﺎزﻧﮕﺮی )رﻓﺮش ( ﻧﺪاﺷﺘﻪ ﺑﺎﺷﺪ . اﯾﺠﺎﮐﺲ در : jquery
در jqueryﺗﻮاﺑﻌﯽ ﺑﺮای ﮐﺎر ﺑﺎ اﯾﺠﺎﮐﺲ وﺟﻮد دارد ﮐﻪ ﮐﺎر را ﺑﺎ اﯾﻦ ﺗﮑﻨﻮﻟﻮژی ﺑﺴﯿﺎر آﺳﺎن ﻧﻤﻮده اﺳﺖ . ﺗﻮﺳﻂ اﯾﻦ ﺗﻮاﺑﻊ ﻣﯿﺘﻮان ﺗﺒﺎدل اطﻼﻋﺎت را ﺑﺎ ﺳﺮور ﺑﺼﻮرت TXT , HTML , XMLو JASONو ﺑﺎ اﺳﺘﻔﺎده از دو ﻣﺘﺪ GETو POSTاﻧﺠﺎم داد . و ﺷﻤﺎ ﻣﯿﺘﻮاﻧﯿﺪ اطﻼﻋﺎت ﻧﺘﯿﺠﻪ ﮐﻪ از ﺳﺮور ﺑﺪﺳﺖ ﻣﯽ آﯾﺪ را در ﻋﻨﺼﺮ اﻧﺘﺨﺎﺑﯽ ) ( selectorﻪﺑ ﯾﺎﻤﻧﺶ در آورﯾﺪ . در اداﻣﻪ ﺑﻪ ﺑﺮرﺳﯽ اﯾﻦ ﺗﻮاﺑﻊ ﺧﻮاھﯿﻢ ﭘﺮداﺧﺖ : ﻊﺑﺎﺗ : load )$(selector).load(url,data,callback
اﯾﻦ ﺗﺎﺑﻊ ﻓﺎﯾﻞ ﻣﻮﺟﻮد در آدرس urlرا ﺧﻮاﻧﺪه و ﭘﺲ از اﺟﺮای ﮐﺎﻣﻞ ﻧﺘﯿﺠﻪ را در ﻋﻨﺼﺮ اﻧﺘﺨﺎﺑﯽ ) ( Selectorﻧﻤﺎﯾﺶ ﻣﯿﺪھﺪ . ﯾﮏ ﻣﺜﺎل ﺳﺎده : ﻓﺮض ﮐﻨﯿﺪ ﻓﺎﯾﻠﯽ ﺑﺎ ﻧﺎم loadtxt.txtدر ﭘﻮﺷﻪ filesﺳﺮور دارﯾﺪ و ﻣﯿﺨﻮاھﯿﺪ ﺑﺎ ﮐﻠﯿﮏ روی دﮐﻤﻪ ای آن را در ﺻﻔﺤﻪ ﺑﻪ ﻧﻤﺎﯾﺶ در آورﯾﺪ : ><html ><head
ﻪﺤﻔﺻ 23
آﻣﻮزش jQuery
blog.monavarian.ir
><script type="text/javascript" src="jquery.js"></script >"<script type="text/javascript {)($(document).ready(function {)($("button").click(function ;)'$('#result').load('files/loadtxt.txt ;)} ;)} ></script ></head ><body ><button>Click to Load Data</button ><div id="result"></div ></body ></html
ﭘﺲ از اﺟﺮای اﯾﻦ ﺑﺮﻧﺎﻣﻪ ﺑﺎ ﮐﻠﯿﮏ روی دﮐﻤﻪ ﻣﺤﺘﻮی ﻣﻮﺟﻮد در ﻓﺎﯾﻞ ﺗﮑﺴﺖ در ﮓﺗ divﯽﻣ ﺶﯾ ﻤﻧ ﯾﺪﺑﺎ . ﻊﺑﺎﺗ loadدو آرﮔﻮﻣﺎن دﯾﮕﺮ دارد .آرﮔﻮﻣﺎن : dataزﻣﺎﻧﯽ ﮐﻪ ﺷﻤﺎ ﻣﯿﺨﻮاھﯿﺪ ﯾﮏ اﺳﮑﺮﯾﭗ زﺑﺎن ﺳﺮور را )ﻓﺎﯾﻠﮫﺎی phpﺎﯾ aspﺎﯾ aspxو ( ...از ﺳﺮور ﺑﺨﻮاﻧﯿﺪ و ﺑﺎﯾﺪ دﯾﺘﺎﯾﯽ را ﺑﺮای ﭘﺮدازش ﺑﻪ آن اﺳﮑﺮﯾﭙﺖ ﺑﻔﺮﺳﺘﯿﺪ ﺗﻮﺳﻂ اﯾﻦ آرﮔﻮﻣﺎن اﯾﻦ ﮐﺎر را اﻧﺠﺎم ﻣﯿﺪھﯿﺪ . آرﮔﻮﻣﺎن Callbackﻧﯿﺰ ﺗﺎﺑﻌﯽ اﺳﺖ ﮐﻪ ھﻨﮕﺎﻣﯽ ﮐﻪ ﻋﻤﻠﯿﺎت ﻟﻮد ﺑﻪ طﻮر ﮐﺎﻣﻞ اﻧﺠﺎم ﺷﺪ اﺟﺮا ﺧﻮاھﺪ ﺪﺷ . ﻣﺜﺎل : ﻓﺮض ﮐﻨﯿﺪ ﺷﻤﺎ در ﭘﻮﺷﻪ filesدر ﺳﺮور ﻓﺎﯾﻠﯽ ﺑﻪ ﻧﺎم loadname.phpدارﯾﺪ ﮐﻪ ﻣﺤﺘﻮای آن ﺑﺼﻮرت زﯾﺮ اﺳﺖ : <?php ;]'$name = $_REQUEST['name ;echo 'Welcome '.$name >? ﮐﺎر اﯾﻦ ﻪﻣﺎﻧﺮﺑ اﯾﻦ اﺳﺖ ﮐﻪ ﻧﺎﻣﯽ را ﺑﻪ ﻋﻨﻮان داده درﯾﺎﻓﺖ ﻣﯿﮑﻨﺪ و ﭘﯿﺎم ﺧﻮش آﻣﺪ را ﻧﻤﺎﯾﺶ ﻣﯿﺪھﺪ . ﺣﺎل ﻣﯿﺨﻮاھﯿﺪ ﺑﺮﻧﺎﻣﻪ ای ﺑﻨﻮﯾﺴﯿﺪ ﮐﻪ ﮐﺎرﺑﺮی در ﺟﻌﺒﻪ Textﯾﮏ ﻧﺎم وارد ﻧﻤﺎﯾﺪ و ﭘﺲ از ﮐﻠﯿﮏ روی دﮐﻤﻪ .ﻧﺎم ﺑﻪ ﻓﺎﯾﻞ ﻓﻮق ﻓﺮﺳﺘﺎده ﺷﻮد و ﻧﺘﯿﺠﻪ ﻧﻤﺎﯾﺶ داده ﺷﻮد و ﭘﺲ از اﺗﻤﺎم ﮐﺎر ﭘﯿﻐﺶﯾﺎ ﻧ ﯽﻣﺎ دھﺪ : ><html ><head ><script type="text/javascript" src="jquery.js"></script >"<script type="text/javascript {)($(document).ready(function {)($("button").click(function
ﻪﺤﻔﺻ 24
آﻣﻮزش jQuery
blog.monavarian.ir
;)(var inputname = $('input#name').val ;)$('#result').load('files/loadname.php',{name:inputname},finish_load ;)} ;)} )(function finish_load { ;)'alert('load finish } ></script ></head ><body Please Enter Your Name : ><input type="text" id="name" / ><button>Click to Load Data</button ><dir id="result"></dir ></body ></html
ھﻤﺎن طﻮر ﮐﻪ در ﮐﺪ ﻓﻮق ﻣﯿﺒﯿﻨﯿﺪ ﭘﺲ از ﮐﻠﯿﮏ روی دﮐﻤﻪ buttonاﺑﺘﺪا ﺗﻮﺳﻂ ﺗﺎﺑﻊ valﻣﻘﺪار ﻣﻮﺟﻮد در textboxرا ﺧﻮاﻧﺪه و در ﻣﺘﻐﯿﺮ inputnumﻗﺮار ﻣﯿﺪھﯿﻢ .ﺳﭙﺲ ﺑﺎ اﺳﺘﻔﺎده از دﺳﺘﻮر loadاﯾﻦ ﻣﻘﺪار را ﺑﻪ ﻓﺎﯾﻞ loadname.phpﻣﯽ ﻓﺮﺳﺘﯿﻢ و در ﭘﺎﯾﺎن ھﻨﮕﺎﻣﯿﮑﻪ ﭘﺎﺳﺦ از ﺳﺮور داده ﺷﺪ و ﭘﯿﺎم ﺧﻮش آﻣﺪ ﻧﻤﺎﯾﺶ ﯾﺎﻓﺖ ﺗﺎﺑﻊ finish_loadاﺟﺮا ﻣﯿﺸﻮد و ﻋﺒﺎرت " "load finishﺑﺮ روی ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ داده ﺧﻮاھﺪ ﺷﺪ . ﻪﺘﮑﻧ : ١ﻊﺑﺎﺗ )( : valاﯾﻦ ﺗﺎﺑﻊ ﻣﻘﺪار ﯾﮏ ﻋﻨﺼﺮ ﻓﺮم را ﺑﺮﻣﯿﮕﺮداﻧﺪ و در ﺻﻮرﺗﯽ ﮐﻪ ﻣﻘﺪار داﺷﺘﻪ ﺑﺎﺷﺪ آن ﻣﻘﺪار را ﺑﻪ ﺧﺼﻮﺻﯿﺖ valueﻋﻨﺼﺮ اﻧﺘﺨﺎﺑﯽ selectorﻧﺼﺒﺖ ﻣﯿﺪھﺪ. ;)$(selector).val(content ﻪﺘﮑﻧ : ٢در ﺻﻮرﺗﯽ ﮐﻪ ﭼﻨﺪ داده را ﻣﯿﺨﻮاھﯿﺪ ﺑﻪ ﻋﻨﻮان dataﺮﺳ ﻪﺑور ارﺳﺎل ﻧﻤﺎﯾﯿﺪ آﻧﮫﺎ را داﺧﻞ } و { ﻗﺮار داده و ھﺮ داده را ﺑﺎ ﮐﺎﻣﺎ " ",از داده ﺑﻌﺪی ﺟﺪا ﻧﻤﺎﯾﯿﺪ : }{var1:value1,var2:value2,var3:value3 ﻊﺑﺎﺗ ): $.ajax(option ﺳﻄﺢ ﭘﺎﯾﯿﻦ ﺗﺮﯾﻦ ﺗﺎﺑﻊ ﮐﺎر ﺑﺎ اﯾﺠﺎﮐﺲ در ﺟﯽ ﮐﻮﺋﺮی ﺗﺎﺑﻊ ajaxﺪﺷ ﺑ ﯽﻣ .ﺑﺮای اﺳﺘﻔﺎده از اﯾﻦ ﺗﺎﺑﻊ ﺑﺎﯾﺪ ﺗﻤﺎم ﭘﺎراﻣﺘﺮ ھﺎی ارﺳﺎل را ﺗﻮﺳﻂ آرﮔﻮﻣﺎن optionﺑﻪ ﺳﺮور ارﺳﺎل ﻧﻤﺎﯾﯿﻢ . ﻣﺜﺎل ﺳﺎده : {($.ajax url: 'ajax/test.html', { )success: function(data ;)$('.result').html(data ;)'alert('Load was performed. } ;)}
ﻪﺤﻔﺻ 25
آﻣﻮزش jQuery
blog.monavarian.ir
در اﯾﻦ ﻣﺜﺎل ﺗﺎﺑﻊ ajaxﻞﯾﺎﻓ test.htmlرا از ﺳﺮور ﻓﺮاﺧﻮاﻧﯽ ﮐﺮده و ﻧﺘﯿﺠﻪ را در ﻋﻨﺼﺮی ﺑﺎ ﮐﻼس result ﻧﻤﺎﯾﺶ ﻣﯿﺪھﺪ . ﮐﺎر ﺑﺎ اﯾﻦ ﺗﺎﺑﻊ ﺑﻪ ﻧﺴﺒﺖ ﺳﺎﯾﺮ ﺗﻮاﺑﻌﯽ ﮐﻪ ﻣﻌﺮﻓﯽ ﺧﻮاھﺪ ﺷﺪ دﺷﻮار ﺗﺮ ﻣﯿﺒﺎﺷﺪ .ﺑﻨﺎ ﺑﺮاﯾﻦ ﭘﯿﺸﻨﮫﺎد ﻣﯿﺸﻮد از اﯾﻦ ﺗﺎﺑﻊ ﻓﻘﻂ در ﻣﻮاﻗﻊ ﻧﯿﺎز اﺳﺘﻔﺎده ﺷﻮد و ﺑﻪ ﺟﺎی آن از ﺗﻮاﺑﻊ ﺳﺎده ﺷﺪه اﺳﺘﻔﺎده ﮔﺮدد . ﻊﺑﺎﺗ $.get :و : $.post ;)$.post(url,data,callback,type ;)$.get(url,data,callback,type اﯾﻦ دو ﺗﺎﺑﻊ ھﻤﺎن طﻮر ﮐﻪ از ﻧﺎﻣﺸﺎن ﭘﯿﺪاﺳﺖ ﺑﺎ دو ﻣﺘﺪ ﻣﺨﺘﻠﻒ postو getاﺳﮑﺮﯾﭙﺖ urlرا از ﺳﺮور ﻓﺮاﺧﻮاﻧﯽ ﻧﻤﻮده و ﻧﺘﯿﺠﻪ را ﺗﻮﺳﻂ ﺗﺎﯾﻊ callbackﺑﺮﻣﯿﮕﺮداﻧﻨﺪ. • • • •
: urlآدرس اﺳﮑﺮﯾﭙﺘﯽ ﮐﻪ ﺳﻤﺖ ﺳﺮور ﺑﺎﯾﺪ اﺟﺮا ﺷﻮد : Dataداده ھﺎﯾﯽ ﮐﻪ ﺑﻪ ﺳﺮور ﻓﺮﺳﺘﺎده ﻣﯿﺸﻮد {name:value,name:value,…} : : Callbackﺗﺎﺑﻌﯽ اﺳﺖ ﮐﻪ ھﻨﮕﺎﻣﯽ ﮐﻪ داده ھﺎ از ﺳﺮور ﺑﻪ طﻮر ﮐﺎﻣﻞ ﺑﺎرﮔﺰاری ﺷﺪ ﺻﺪا زده ﻣﯿﺸﻮد . : Typeﻧﻮع داده ھﺎی ﺧﺮوﺟﯽ از ﺳﺮور را ﻣﺸﺨﺺ ﻣﯿﮑﻨﺪ و ﻣﯿﺘﻮاﻧﺪ ﻣﻘﺎدﯾﺮ ) (html,xml,json,jasonp,script,textﺪﺷﺎﺑ
ﺗﻨﮫﺎ ﺗﻔﺎوت اﯾﻦ دو ﺗﺎﺑﻊ در ﻧﻮع ارﺳﺎل داده ﺑﻪ ﺳﺮور اﺳﺖ ﮐﻪ اوﻟﯽ از ﻣﺘﺪ postاﺳﺘﻔﺎده ﻣﯿﻨﻤﺎﯾﺪ و دوﻣﯽ از ﻣﺘﺪ . getﺎﻨﺑﺑﺮاﯾﻦ در ﺻﻮرﺗﯽ ﮐﻪ ﻣﯿﺨﻮاھﯿﺪ ﻓﻘﻂ ﻓﺎﯾﻠﯽ را از ﺳﺮور ﺑﺎزﺧﻮاﻧﯽ ﻧﻤﺎﯾﯿﺪ و ﻗﺼﺪ ارﺳﺎل داده ﺑﻪ ﺳﺮور را ﻧﺪارﯾﺪ ،ﺑﮫﺘﺮ اﺳﺖ از ﺗﺎﺑﻊ getاﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ ) .و ﯾﺎ ﺗﺎﺑﻊ . ( load )اﮔﺮ در ﻣﻮرد اﯾﻦ دو ﻣﺘﺪ آﺷﻨﺎﯾﯽ ﻧﺪارﯾﺪ ﺑﻪ آﻣﻮزش زﺑﺎﻧﮫﺎی ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ﺗﺤﺖ ﺳﺮور ﻣﺎﻧﻨﺪ phpﺎﯾ aspﻣﺮاﺟﻌﻪ ﻧﻤﺎﯾﯿﺪ (. ﻣﺜﺎل : ﻣﺜﺎﻟﯽ ﮐﻪ در ﺑﺎﻻ ﺑﺮای ﺗﺎﺑﻊ ajaxﻧﻮﺷﺘﻪ ﺷﺪ را ﺑﺎ ﺗﺎﺑﻊ getﺑﺼﻮرت زﯾﺮ ﻣﯿﺘﻮان ﻧﻮﺷﺖ : { )$.get('ajax/test.html', function(data ;)$('.result').html(data ;)'alert('Load was performed. ;)} و ﯾﺎ ﻣﺜﺎﻟﯽ دﯾﮕﺮ :در اﯾﻦ ﻣﺜﺎل ﻣﯿﺨﻮاھﯿﻢ ھﻤﺎن ﻣﺜﺎﻟﯽ را ﮐﻪ در اﺑﺘﺪای ﻓﺼﻞ ﺑﺮای ﺗﺎﺑﻊ loadﻧﻮﺷﺘﯿﻢ ﺑﺎ ﻊﺑﺎﺗ postﺑﻨﻮﯾﺴﯿﻢ .در اﯾﻦ ﺻﻮرت ﻗﺴﻤﺖ ﮐﺪ ﻣﺎ ﺑﻪ ﺷﮑﻞ زﯾﺮ ﺗﻐﯿﯿﺮ ﺧﻮاھﺪ ﮐﺮد : {)($(document).ready(function {)($("button").click(function ;)(var inputname = $('input#name').val {)$.post('files/loadname.php',{name:inputname},function(Data ;)$('#result').html(Data ;)(finish_load
ﻪﺤﻔﺻ 26
آﻣﻮزش jQuery
blog.monavarian.ir
;)} ;)} ;)} ھﻤﺎن طﻮر ﮐﻪ در ﻣﺜﺎل ﻣﯿﺒﯿﻨﯿﺪ .ﻊﺑﺎﺗ callbackﺑﺎ ﻣﻘﺪار dataﭘﺲ از ﻓﺮاﺧﻮاﻧﯽ ﮐﺎﻣﻞ loadname.php ﺻﺪا زده ﻣﯿﺸﻮد و در اﯾﻦ ﺗﺎﺑﻊ ﻣﻘﺪار dataﮐﻪ ھﻤﺎن ﻧﺘﯿﺠﻪ اﺟﺮای اﺳﮑﺮﯾﭙﺖ loadname.phpاﺳﺖ ﻣ ﯾﺎﻤﻧ . ﺗﻮﺳﻂ دﺳﺘﻮر ) html(dataدر ﻋﻨﺼﺮ ﺑﺎ آﯾﺪی resultﺪﺑﺎﯾ
ﻊﺑﺎﺗ : getScript )$.getScript(url,callback
ﻊﺑﺎﺗ ، getScriptﺑﺮای ﻓﺮاﺧﻮاﻧﯽ و اﺟﺮای ﯾﮏ ﻓﺎﯾﻞ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ) ( jsﺑﻪ ﮐﺎر ﺑﺮده ﻣﯿﺸﻮد . اﯾﻦ ﺗﺎﺑﻊ ﺳﺎده ﺷﺪه ﺗﺎﺑﻊ ajaxﺑﺎ ﻓﺮﻣﺖ زﯾﺮ ﻣﯽ ﺑﺎﺷﺪ : {($.ajax url: url, dataType: 'script', success: success ;)} ﻣﺜﺎل : ;)"$.getScript("test.js اﯾﻦ ﻣﺜﺎل ﺑﺎﻋﺚ ﻓﺮاﺧﻮاﻧﯽ و اﺟﺮای ﻓﺎﯾﻞ test.jsﻣﯿﺸﻮد .
{)($.getScript("http://blog.monavarian.ir/test.js", function ;)"alert("Script loaded and executed. ;)} در ﻣﺜﺎل ﻓﻮق ﻓﺎﯾﻞ test.jsدر آدرس blog.monavarian.irﻓﺮاﺧﻮاﻧﯽ ﻣﯿﺸﻮد و در ﺻﻮرﺗﯽ ﮐﻪ ﻓﺮاﺧﻮاﻧﯽ ﺑﺎ ﻣﻮﻓﻘﯿﺖ اﻧﺠﺎم ﺷﻮد ﭘﯿﻐﺎم ﻣﻨﺎﺳﺐ ﻧﻤﺎﯾﺶ ﻣﯽ ﯾﺎﺑﺪ . ﻪﺘﮑﻧ :ﻣﯿﺘﻮاﻧﯿﺪ از اﯾﻦ ﺗﺎﺑﻊ ھﻨﮕﺎﻣﯽ اﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ ﮐﻪ ﻣﯿﺨﻮاھﯿﺪ ﻣﺘﻐﯿﺮ ھﺎی ﺳﺮاﺳﺮی را در ﯾﮏ ﻓﺎﯾﻞ ﺟﺪاﮔﺎﻧﻪ ﻗﺮار دھﯿﺪ و ﺑﻌﺪ در ﺑﺮﻧﺎﻣﻪ ھﺎ از آن اﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ . ﻊﺑﺎﺗ : getJSON اﯾﻦ ﺗﺎﺑﻊ ﺑﺮای ﻓﺮاﺧﻮاﻧﯽ ﻓﺎﯾﻞ ﺑﺎ ﻓﺮﻣﺖ Jasonاز ﺳﺮور ﻣﯽ ﺑﺎﺷﺪ .
;)$.getJSON(url,data,callback
ﺗﻮی ﭘﺮاﻧﺘﺰ ) ﻣﺨﺘﺼﺮی درﺑﺎره : ( Jason ﻓﺎﯾﻠﮫﺎی ، Jasonﻓﺎﯾﻠﮫﺎی داده ای ھﺴﺘﻨﺪ ﮐﻪ داده ھﺎ را ﺑﺎ ﻓﺮﻣﺖ ﺧﺎﺻﯽ ذﺧﯿﺮه ﻣﯿﮑﻨﻨﺪ .ﻣﺎﻧﻨﺪ ﻓﺎﯾﻠﮫﺎی xml ﻓﺎﯾﻠﮫﺎی Jasonﻧﯿﺰ دارای ﯾﮏ ﻓﺮﻣﺖ ﺧﺎص ﺑﺮای ذﺧﯿﺮه اطﻼﻋﺎت ﻣﯽ ﺑﺎﺷﻨﺪ . ﺳﺎﺧﺘﺎر ھﺮ ﺷﯽ jasonﺑﻪ ﺻﻮرت روﺑﺮو ﻣﯽ ﺑﺎﺷﺪ : } … {string : value , string:value , Valueھﺎ ﻣﯿﺘﻮاﻧﻨﺪ ﺷﺎﻣﻞ ﻣﻘﺎدﯾﺮ string , object , number , array , true , false , nullﺪﻨﺷﺎﺑ . ﺳﺎﺧﺘﺎر Arrayدر jasonﻧﯿﺰ ﺑﻪ ﻓﺮم زﯾﺮ ﻣﯽ ﺑﺎﺷﺪ :
ﻪﺤﻔﺻ 27
jQuery آﻣﻮزش
blog.monavarian.ir
[item1,item2,item3,…]
. ﻧﯿﺰ ﺧﻮد ﻣﯿﺘﻮاﻧﺪ ﺷﺎﻣﻞ ﻣﻘﺎدﯾﺮ ﻣﻌﺮﻓﯽ ﺷﺪه در ﺑﺎﻻ ﺑﺎﺷﺪitem ھﺮ
. ﻣﺮاﺟﻌﻪ ﻧﻤﺎﯾﯿﺪhttp://www.json.org ﺑﻪ آدرسJason ﺑﺮای ﮐﺴﺐ اطﻼﻋﺎت ﺑﯿﺸﺘﺮ ﺑﻪ ﺳﺎﯾﺖ ﻣﺮﺟﻊ ﺑﺮرﺳﯽ ﮐﺮده و ﺳﭙﺲ ﻂﺳﻮﺗjquery در اﯾﻦ ﻣﺜﺎل ﻗﺼﺪ دارﯾﻢ ﻓﺮﻣﯽ را ﺗﻮﺳﻂ ﺗﻮاﺑﻊ: post ﮏﯾ ﻣﺜﺎل ﺎﺑ ﻠﮐ : ﺑﻪ ﺳﺮور ﻓﺮﺳﺘﺎده و ﻧﺘﯿﺠﻪ را ﻧﻤﺎﯾﺶ دھﯿﻢpost ﻊﺑﺎﺗ ﺑﺮرﺳﯽ ﻣﯿﮑﻨﺪ ﮐﻪ ﻧﺎمforms.php ﺎﻓﯾﻞ اﺳﮑﺮﯾﭙﺖ. ﺑﺮای ﻣﺜﺎل ﻣﯿﺨﻮاھﯿﻢ ﯾﮏ ﻓﺮم ﺳﺎده ورود اﯾﺠﺎد ﻧﻤﺎﯾﯿﻢ و در١ در ﺻﻮرﺗﯽ ﮐﻪ ﻣﻮﺟﻮد ﺑﺎﺷﺪ ﻣﻘﺪار. ﮐﺎرﺑﺮی و ﮐﻠﻤﻪ ﻋﺒﻮر داده ﺷﺪه در ﻟﯿﺴﺖ ﮐﺎرﺑﺮان ﻣﻮﺟﻮد اﺳﺖ : ﻣﺤﺘﻮی اﯾﻦ ﻓﺎﯾﻞ ﺑﻪ ﺻﻮرت زﯾﺮ اﺳﺖ. ﺻﻮرﺗﯽ ﮐﻪ ﻣﻮﺟﻮد ﻧﺒﺎﺷﺪ ﻣﻘﺪار ﺻﻔﺮ را ﺑﺮ ﻣﯿﮕﺮداﻧﺪ <?php $users = array ( 'admin' => 'demo', 'test' => 'test', 'user' => 'pass', ); $username = trim($_POST['username']); $pass = trim($_POST['password']); if ( array_search($pass,$users) == $username ) echo '1'; else echo '0'; ?> . ذﺧﯿﺮه ﻣﯿﮑﻨﯿﻢfiles اﯾﻦ ﻓﺎﯾﻞ را در ﭘﻮﺷﻪ : html در ﻓﺎﯾﻞ اﺻﻠﯽ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="jquery.js" type="text/javascript" ></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> $(document).ready(function(){ $('input').focus(function(){ $('input').removeClass('select'); $(this).addClass('select'); }); $('form').submit(function(event){ event.preventDefault(); var user = $('input#username').val(); var pass = $('input#pass').val(); if (!user) { $('.result').html('please Enter username'); $('input#username').focus(); } else if(!pass) { $('.result').html('please Enter password');
28 ﻪﺤﻔﺻ
jQuery آﻣﻮزش
blog.monavarian.ir
$('input#pass').focus(); } else { $.post('files/forms.php',{username:user,password:pass},function(data){ if (data == '1') { $('.result').html('Login Success <br/> welcome '+user); $('form').hide(); } else if (data == '0') $('.result').html('username or password is not correct') else $('.result').html('can not connect to server') }) } return false; }) }) </script> <title>Form Validation</title> <style> .result { color:#FF0000; } .select { background:#fff; border:2px solid #0000ff; } </style> </head> <body> <div class="result" > </div> <form action="#" > <input type="text" name="username" id="username" /> <input type="password" name="pass" id="pass" /> <input type="submit" value="Login"/> </form> </body> </html>
ﻓﺮم ﺑﺮرﺳﯽ ﻣﯿﮑﻨﺪ و در ﺻﻮرت ﺧﺎﻟﯽ ﺑﻮدنsubmit در اﺑﺘﺪا ھﻨﮕﺎم. ھﻤﺎن طﻮر ﮐﻪ در ﮐﺪ ﺑﺎﻻ ﻣﺸﺎھﺪه ﻣﯽ ﮐﻨﯿﺪ ﭘﯿﻐﺎم ﻣﻨﺎﺳﺐ درج ﻣﯿﮑﻨﺪ و ﺳﭙﺲ ﻧﺸﺎﻧﮕﺮ را ﺑﻪ ﻓﯿﻠﺪ ﺧﺎﻟﯽ ھﺪاﯾﺖ ﻣﯽ ﮐﻨﺪpass و ﯾﺎusername ﻓﯿﻠﺪھﺎی . ( focus) ﻣﯿﻔﺮﺳﺘﺪ و در ﻧﺘﯿﺠﻪforms.php اﯾﻦ ﻣﻘﺎدﯾﺮ را ﺑﻪ ﻓﺎﯾﻞ. وارد ﺷﺪه ﺑﺎﺷﺪpass وusername در ﺻﻮرﺗﯽ ﮐﻪ ﺑﺎﺷﺪ ﭘﯿﻐﺎم ﺧﻮش آﻣﺪ ﻧﻤﺎﯾﺶ ﻣﯿﺪھﺪ و ﻓﺮم را١ در ﺻﻮرﺗﯽ ﮐﻪ ﻧﺘﯿﺠﻪ ﻓﺮﺳﺘﺎده ﺷﺪه از ﺳﺮور: ﺑﺮرﺳﯽ ﻣﯿﮑﻨﺪ . ( ﺎﻤ ﯽﻣﯾﺪ در ﻏﯿﺮ اﯾﻦ ﺻﻮرت ﭘﯿﻐﺎم ﻣﻨﺎﺳﺐ را درج ﻣﯽ ﻧﻤﺎﯾﺪhide) ﯽﻔﺨﻣ
29 ﻪﺤﻔﺻ
آﻣﻮزش jQuery
blog.monavarian.ir
ﻓﺼﻞ ھﻔﺘﻢ : ﭘﯿﻤﺎﯾﺶ ﻋﻨﺎﺮﺻ : ( Tree Traversal ) : html ھﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯿﺪاﻧﯿﺪ ھﺮ ﺻﻔﺤﻪ htmlاز ﺗﻌﺪادی ﺗﮕﮫﺎی ﺗﻮ در ﺗﻮ ﺗﺸﮑﯿﻞ ﺷﺪه اﺳﺖ .ھﺮ ﺗﮓ ﻓﺮزﻧﺪ ﺗﮓ ﺑﯿﺮوﻧﯽ و ﭘﺪر ﺗﮓ ھﺎی دروﻧﯽ اش ﻣﯽ ﺑﺎﺷﺪ .ھﻤﭽﻨﯿﻦ ﺑﻪ ﺗﮓ ھﺎ ی ﮐﻨﺎر ھﻢ در ﯾﮏ ﺳﻄﺢ ﻧﯿﺰ ﺗﮓ ھﺎی ھﻤﺴﺎﯾﻪ ﮔﻔﺘﻪ ﻣﯿﺸﻮد . ﺑﺮای دﺳﺘﺮﺳﯽ ﺑﻪ ﻋﻨﺎﺻﺮ ﺻﻔﺤﻪ ﻋﻼوه ﺑﺮ اﻧﺘﺨﺎب ﺧﺼﻮﺻﯿﺖ ﻣﺸﺘﺮﮐﯽ از آﻧﮫﺎ ﻣﯿﺘﻮان از ﺗﻌﺎرﯾﻒ ﻣﺮﺑﻮط ﺑﻪ ﭘﯿﻤﺎﯾﺶ درﺧﺘﯽ آﻧﮫﺎ اﺳﺘﻔﺎده ﻧﻤﻮد . ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل در ﮐﺪ روﺑﺮو : ><html ><head ><title> test page </title ></head > <body ><div ><ul ><li> one </li ><li> two </li ><li> three </li ></ul ></div ></body ></html در ﻣﺜﺎل ﺑﺎﻻ : ھﻤﻪ ﺗﮓ ھﺎ ﻓﺮزﻧﺪ ﺗﮓ htmlھﺴﺘﻨﺪ • ﮓﺗ headﭘﺪر ﺗﮓ titleو در ﻧﺘﯿﺠﻪ ﺗﮓ titleﻓﺮزﻧﺪ ﺗﮓ headﺪﺷ ﺑ ﯽﻣ . • ﺗﮓ ھﺎ liھﻤﺴﺎﯾﻪ ﯾﺎ ھﻢ ﻧﮋاد )ﺑﺮادر ﯾﺎ ﺧﻮاھﺮ ( ﯾﮑﺪﯾﮕﺮ ھﺴﺘﻨﺪ و ھﻤﮕﯽ ﻓﺮزﻧﺪ ulھﺴﺘﻨﺪ و ھﻤﭽﻨﯿﻦ • در ﺳﻄﺢ ﺑﺎﻻﺗﺮ ﻓﺮزﻧﺪ ﺗﮓ divو bodyو . html ﮓﺗ ulﻧﯿﺰ ﻓﺮزﻧﺪ divو bodyو htmlاﺳﺖ . • ﮓﺗ bodyھﻤﺴﺎﯾﻪ ﺗﮓ headو ﻓﺮزﻧﺪ htmlاﺳﺖ . • ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ ﺗﻌﺎرﯾﻒ ﻓﻮق .ﺗﻮاﺑﻌﯽ در jQueryﺑﺮای ﭘﯿﻤﺎﯾﺶ درﺧﺘﯽ ﻋﻨﺎﺻﺮ htmlاﯾﺠﺎد ﺷﺪه ﮐﻪ در اﯾﻦ ﻓﺼﻞ آﻧﮫﺎ را ﺷﺮح ﺧﻮاھﯿﻢ داد : $(selector).children([selector]) : ;)]$(selector).parent([selector ﻊﺑﺎﺗ )( childrenﻓﺮزﻧﺪھﺎی ﻋﻨﺼﺮ اﻧﺘﺨﺎﺑﯽ را ﺑﺮ ﻣﯿﮕﺮداﻧﺪ .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل : ;)'$('ul').children().css('background','Red دﺳﺘﻮر ﺑﺎﻻ ﺑﺎﻋﺚ ﻣﯿﺸﻮد رﻧﮓ ﭘﯿﺶ زﻣﯿﻨﻪ ﺗﻤﺎم ﺗﮕﮫﺎی درون ﺗﮓ ) ulﻓﺮزﻧﺪ ھﺎی ulﯾﺎ ھﻤﺎن ﺗﮕﮫﺎی ( liﺰﻣﺮﻗ ﺷﻮد . ھﻤﭽﻨﯿﻦ ﺷﻤﺎ ﻣﯿﺘﻮاﻧﯿﺪ از آرﮔﻮﻣﺎن selectorاﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ ﺗﺎ ﻓﺮزﻧﺪ ھﺎی ﺧﺎﺻﯽ از ﺗﮕﮫﺎ را اﻧﺘﺨﺎب ﻧﻤﺎﯾﯿﺪ . ﺑﻪ ﻣﺜﺎل زﯾﺮ ﺗﻮﺟﻪ ﻧﻤﺎﯾﯿﺪ : ><div ><span>Hello</span ><p class="selected">Hello Again</p ><div class="selected">And Again</div ><p>And One Last Time</p ></div
اﮔﺮ در اﯾﻦ ﻣﺜﺎل ﮐﺪ زﯾﺮ را اﺟﺮا ﮐﻨﯿﻢ : ;)"$("div").children(".selected").css("color", "blue
ﻪﺤﻔﺻ 30
آﻣﻮزش jQuery
blog.monavarian.ir
در اﯾﻦ ﻣﺜﺎل ﻓﺮزﻧﺪھﺎﯾﯽ از ﺗﮕﮫﺎی divاﻧﺘﺨﺎب ﻣﯿﮑﻨﺪ ﮐﻪ دارای ﮐﻼس selectedﺑﺎﺷﺪ ﺑﻨﺎﺑﺮ اﯾﻦ ﻧﺘﯿﺠﻪ دﺳﺘﻮر ﻓﻮق :
Hello Hello Again And Again And One Last Time ﻊﺑﺎﺗ )( parentﭘﺪر ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ را ﺑﺮ ﻣﯿﮕﺮداﻧﺪ )اوﻟﯿﻦ ﭘﺪر ( . ;)'$('li').parent().addClass('listExpander در اﯾﻦ ﻣﺜﺎل ﺑﻪ اوﻟﯿﻦ واﻟﺪ ﻋﻨﺎﺻﺮ liدر ﺻﻔﺤﻪ ﮐﻼس listExpanderرا اﻋﻤﺎل ﻣﯿﮑﻨﺪ . ھﻤﺎﻧﻨﺪ ﺗﺎﺑﻊ )( childrenاﯾﻦ ﺗﺎﺑﻊ ﻧﯿﺰ ﻣﯿﺘﻮاﻧﺪ ﻣﻘﺪار selectorرا ﻗﺒﻮل ﮐﻨﺪ : >"<div class="one >"<div class="two ><span class="text" > click </span ></div ><div در ﻣﺜﺎل ﻓﻮق : $('span').parent() : ﻪﺑ divﺑﺎ ﮐﻼس twoاﺷﺎره ﻣﯿﮑﻨﺪ .در ﺻﻮرﺗﯽ ﮐﻪ $('span').parent('.one') : ﻪﺑ divﺑﺎ ﮐﻼس oneاﺷﺎره ﻣﯿﮑﻨﺪ . ﻪﺘﮑﻧ :دﻗﺖ ﻧﻤﺎﯾﯿﺪ ﮐﻪ ﺗﺎﺑﻊ )( parentﻓﻘﻂ ﯾﮏ ﻋﻨﺼﺮ را ﺑﻪ ﻋﻨﻮان ﭘﺪر ﺑﺮ ﻣﯿﮕﺮداﻧﺪ .اﮔﺮ ﺑﺨﻮاھﯿﺪ ھﻤﻪ واﻟﺪھﺎی ﯾﮏ ﻋﻨﺼﺮ را ﺑﺮﮔﺮداﻧﯿﺪ ﻣﯿﺘﻮاﻧﯿﺪ از ﺗﺎﺑﻊ )( parentsاﺳﺘﻔﺎده ﮐﻨﯿﺪ : $('span').parents() : در اﯾﻦ ﻣﺜﺎل ﺗﻤﺎم واﻟﺪ ھﺎی ) spanﯾﻌﻨﯽ ھﻢ divﺑﺎ ﮐﻼس twoو ھﻢ divﺑﺎ ﮐﻼس ( oneرا ﺑﺮ ﻣﯿﮕﺮداﻧﺪ . ﻊﺑﺎﺗ : parentsUntil() : ;)]$(selector).parentsUntil([parent_selector )ﻪﻤﻠﮐ untilﯽﻨ ﻣ ﻪﺑ "ﺗﺎ اﯾﻨﮑﻪ " ﻣﯽ ﺑﺎﺷﺪ و ھﻤﺎﻧﻄﻮر ﮐﻪ از ﻣﻌﻨﯽ اﯾﻦ ﻋﺒﺎرت ﻣﺸﺨﺺ اﺳﺖ ﺗﺎﺑﻊ ﻓﻮق ﺗﻤﺎﻣﯽ واﻟﺪھﺎی ﻋﻨﺼﺮ selectorرا ﺗﺎ رﺳﯿﺪن ﺑﻪ ﻋﻨﺼﺮ parent_selectorﺑﺮ ﻣﯿﮕﺮداﻧﺪ . ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﮔﺮ در ﻣﺜﺎل اول اﯾﻦ ﻓﺼﻞ ﮐﺪ زﯾﺮ را ﺑﻨﻮﯾﺴﯿﻢ : ;)'$('li').parentsUntil('body').addClass('test ﺑﻪ ﺗﻤﺎم ﺗﮓ ھﺎی واﻟﺪ liﺎﺗ ﮓﺗ ) bodyﺗﮕﮫﺎی ulو ( divﮐﻼس testرا اﺿﺎﻓﻪ ﻣﯿﮑﻨﺪ . ﻊﺑﺎﺗ )( nextو )(: prev ;)]$(selector).next([selector ;)]$(selector).prev([selector اﯾﻦ دو ﺗﺎﺑﻊ ھﻢ ھﻤﺎﻧﻄﻮر ﮐﻪ از ﻧﺎﻣﺸﺎن ﭘﯿﺪاﺳﺖ ﺑﺮای ﺑﺪﺳﺖ آوردن ﻋﻨﺼﺮ ﺑﻌﺪی ) ( nextو ﻋﻨﺼﺮ ﻗﺒﻠﯽ ) prev ( اﺳﺘﻔﺎده ﻣﯿﺸﻮﻧﺪ : ><ul ><li>list item 1</li ><li>list item 2</li ><li class="third-item">list item 3</li ><li>list item 4</li ><li class="test">list item 5</li ></ul
در ﻣﺜﺎل ﻓﻮق ﺑﺎ اﺟﺮای ﮐﺪ : ;)'$('li.third-item').next().css('color', 'red
ﮐﺪ ﻓﻮق ﺑﺎﻋﺚ ﻣﯿﺸﻮد ﻋﺒﺎرت list item 4ﺑﻪ رﻧﮓ ﻗﺮﻣﺰ ﻧﻤﺎﯾﺶ داده ﺷﻮد .
ﻪﺤﻔﺻ 31
jQuery آﻣﻮزش
blog.monavarian.ir
$('li.third-item').next().css('color', 'blue');
. را ﺑﻪ رﻧﮓ آﺑﯽ ﻧﻤﺎﯾﺶ ﻣﯿﺪھﺪlist item 2 اﯾﻦ ﮐﺪ ﻋﺒﺎرت $('li.third-item').next('.test').css('background-color', 'blue');
. را ﺑﺎ ﭘﯿﺶ زﻣﯿﻨﻪ آﺑﯽ ﻧﻤﺎﯾﺶ ﻣﯿﺪھﺪlist item 5 اﯾﻦ ﮐﺪ ﻋﺒﺎرت $('li.third-item').next('.test').prev().css('background-color', 'Red'); . را ﺑﺎ ﭘﯿﺶ زﻣﯿﻨﻪ ﻗﺮﻣﺰ ﻧﻤﺎﯾﺶ ﻣﯿﺪھﺪlist item 4 اﯾﻦ ﮐﺪ ﻋﺒﺎرت
: اﯾﺠﺎد ﺷﺪه اﻧﺪjquery ﺗﻮاﺑﻊ زﯾﺮ ﻧﯿﺰ ﺑﺮای ﭘﯿﻤﺎﯾﺶ ﺑﮫﺘﺮ ﻋﻨﺎﺻﺮ ﻗﺒﻠﯽ و ﺑﻌﺪی در: ﻪﺘﮑﻧ $(selector).nextAll([nextselector]) $(selector).prevAll([prevselector]) ( prevselector ﺎﯾnextselector را ﺑﺮ ﻣﯿﮕﺮداﻧﺪ )ﺎﺑ ﻖﺑ ﻄﻣselector ازprev و ﻗﺒﻞnext ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﺑﻌﺪ $(selector).nextUntil([nextselector]) $(selector).prevUntil([prevselector]) . ﺑﺮ ﻣﯿﮕﺮداﻧﺪprevselector وnextselector را ﺗﺎ ﻋﻨﺼﺮselector ازprev و ﻗﺒﻞnext ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﺑﻌﺪ : siblings() ﻊﺑﺎﺗ $(selector).siblings([sibling_selector]) ﻣﺸﺨﺺ ﺷﺪه ﺑﺎﺷﺪsibling_selector و در ﺻﻮرﺗﯽ ﮐﻪ. را ﺑﺮ ﻣﯿﮕﺮداﻧﺪselector اﯾﻦ ﺗﺎﺑﻊ ھﻢ ﻧﮋاد ھﺎی . ﻣﻘﺎدﯾﺮی ﮐﻪ ﺑﺎ اﯾﻦ ﻋﻨﺎﺻﺮ ﻣﻄﺎﺑﻖ ﺑﺎﺷﻨﺪ ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body > <ul> <li > one </li> <li class="test" > two </li> <li class="test2" > three </li> </ul> <script> $("li.test").siblings().css("background", "yellow"); </script> </body> </html>
. ھﺎ اﺿﺎﻓﻪ ﻣﯿﺸﻮدli رﻧﮓ ﭘﯿﺶ زﻣﯿﻨﻪ زرد ﺑﻪ ﺳﺎﯾﺮ، test ﺑﺎ ﮐﻼسli در ﻣﺜﺎل ﺑﺎﻻ ﺑﻪ ﻏﯿﺮ از ﺧﻮد : ﺪﻨﺷﺎﺑtest2 ھﺎﯾﯽ اﻧﺘﺨﺎب ﻣﯿﺸﻮﻧﺪ ﮐﻪ دارای ﮐﻼسli در ﺻﻮرﺗﯿﮑﻪ ﮐﺪ ﺑﺎﻻ را ﺑﻪ ﺷﮑﻞ زﯾﺮ ﺗﻐﯿﯿﺮ دھﯿﻢ ﻂﻘﻓ $('li.test').siblings('.test2').css('background','yellow'); : find() ﻊﺑﺎﺗ $(selector).find(find_selector) . ﻣﯿﮕﺮدد و آن ﻋﻨﺼﺮ را ﺑﺮ ﻣﯿﮕﺮداﻧﺪfind_selector ﺑﻪ دﻧﺒﺎلselector در ﻓﺮزﻧﺪھﺎیfind ﻪﺑﺎﺗ
32 ﻪﺤﻔﺻ
آﻣﻮزش jQuery
blog.monavarian.ir
اﯾﻦ ﺗﺎﺑﻊ ﺷﺒﯿﻪ ﺗﺎﺑﻊ )( childrenﻋﻤﻞ ﻣﯿﮑﻨﺪ و ﺗﻨﮫﺎ ﺗﻔﺎوت آن اﯾﻦ اﺳﺖ ﮐﻪ ﺗﺎﺑﻊ childrenﻓﻘﻂ ﯾﮏ ﺳﻄﺢ ﻓﺮزﻧﺪ را ﺟﺴﺘﺠﻮ ﻣﯿﮑﻨﺪ .ھﻤﭽﻨﯿﻦ در ﺗﺎﺑﻊ ) find(selectorﭘﺎراﻣﺘﺮ selectorاﻟﺰاﻣﯽ اﺳﺖ )ﻣﯿﺘﻮان ﺑﺮای اﻧﺘﺨﺎب ھﻤﻪ از ﻋﺒﺎرت '*' اﺳﺘﻔﺎده ﮐﺮد ( : )'*'($(selector).find ﻣﺜﺎل : >"<ul class="level-1 ><li class="item-i">I</li <li class="item-ii">II >"<ul class="level-2 ><li class="item-a">A</li <li class="item-b">B >"<ul class="level-3 ><li class="item-1">1</li ><li class="item-2">2</li ><li class="item-3">3</li ></ul ></li ><li class="item-c">C</li ></ul ></li ><li class="item-iii">III</li ></ul
اﮔﺮ در ﻣﺜﺎل ﻓﻮق ﮐﺪ زﯾﺮ را ﺑﻨﻮﯾﺴﯿﻢ : ;)'$('li.item-ii').find('li').css('background-color', 'red
اﯾﻦ ﮐﺪ رﻧﮓ ﭘﯿﺶ زﻣﯿﻨﻪ ﻋﺒﺎرت ھﺎی A , B , 1 ,2,3, Cرا ﻗﺮﻣﺰ ﻣﯿﮑﻨﺪ .اﻣﺎ ھﻤﯿﻦ ﻋﻤﻞ ﺑﺎ ﺗﺎﺑﻊ childrenﺗﻨﮫﺎ ﺑﺮ روی ﻋﺒﺎرات A,B,Cاﻋﻤﺎل ﻣﯿﺸﻮد . ﻊﺑﺎﺗ )(: closest )$(selector).closest(closest_selector اﯾﻦ ﺗﺎﺑﻊ ھﻢ ﻣﺎﻧﻨﺪ )( parentsﻋﻤﻞ ﻣﯿﮑﻨﺪ .اﻣﺎ ﺗﻔﺎوت ھﺎﯾﯽ ﺑﯿﻦ اﯾﻦ دو ﺗﺎﺑﻊ وﺟﻮد دارد : ﻪﺑﺎﺗ closestاز ﺧﻮد ﻋﻨﺼﺮ اﻧﺘﺨﺎﺑﯽ ﭘﯿﻤﺎﯾﺶ را ﺷﺮوع ﻣﯿﮑﻨﺪ .در ﺻﻮرﺗﯽ ﮐﻪ ﺗﺎﺑﻊ parentsاز اوﻟﯿﻦ • واﻟﺪ ﺷﺮوع ﺑﻪ ﭘﯿﻤﺎﯾﺶ ﻣﯿﮑﻨﺪ . ﻊﺑﺎﺗ closestﻋﻤﻠﯿﺎت ﭘﯿﻤﺎﯾﺶ را ﺗﺎ رﺳﯿﺪن ﺑﻪ ﻋﻨﺼﺮ اﻧﺘﺨﺎﺑﯽ ) ( closest_selectorاﻧﺠﺎم ﻣﯿﺪھﺪ در • ﺻﻮرﺗﯽ ﮐﻪ در ﺗﺎﺑﻊ parentsاﺑﺘﺪا ﻋﻤﻠﯿﺎت ﺗﺎ اﻧﺘﮫﺎ ) ( rootاﻧﺠﺎم ﻣﯿﺸﻮد .ﺳﭙﺲ ھﻤﻪ ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎب ﺷﺪه در ﯾﮏ ﻣﺘﻐﯿﺮ tempرﯾﺨﺘﻪ ﺷﺪه و ﺳﭙﺲ آﻧﮫﺎﯾﯽ ﮐﻪ ﻣﻄﺎﺑﻖ ﺑﺎ ﺷﺮط )ﺮﺼﻨﻋ ( selectorﺪﺷ ﺑ ﯽﻣ را از ﺑﯿﻦ آﻧﮫﺎ اﻧﺘﺨﺎب ﻣﯿﮑﻨﺪ .ﺑﻨﺎﺑﺮاﯾﻦ ﺳﺮﻋﺖ اﺟﺮای ﺗﺎﺑﻊ closestﺑﯿﺸﺘﺮ اﺳﺖ . ﻊﺑﺎﺗ closestﻣﯿﺘﻮاﻧﺪ ﺻﻔﺮ ﯾﺎ ﯾﮏ ﻋﻨﺼﺮ ﺑﺮ ﮔﺮداﻧﺪ در ﺻﻮرﺗﯽ ﮐﻪ ﺗﺎﺑﻊ parentsﺮﺼﻨ ﺪ ﭼ ﯾ ﯾ ﺎ ﺮﻔﺻ • ﺑﺮ ﻣﯿﮕﺮداﻧﺪ . در ﻣﺜﺎل ﺑﺎﻻ :
)'$('li.item-a').closest('ul').css('background-color','red ﺑﺎﻋﺚ ﻣﯿﺸﻮد رﻧﮓ ﭘﯿﺶ زﻣﯿﻨﻪ ulﺑﺎ ﮐﻼس level-2ﻗﺮﻣﺰ ﺷﻮد . ﻊﺟﺮﻣ ﻞﺼﻓ http://api.jquery.com/category/traversing/tree-traversal :
ﻪﺤﻔﺻ 33
آﻣﻮزش jQuery
blog.monavarian.ir
ﻓﺼﻞ ھﻢﺘﺸ
اﻓﺰوﻧﻪ ھﺎ ) ﭘﻼﮔﯿﻦ ھﺎ : ( Plugins ﺑﺮﺧﯽ طﺮاﺣﺎن وب ﻋﻼوه ﺑﺮ ﮐﺘﺎﺑﺨﺎﻧﻪ ﺗﻮاﺑﻊ jqueryﺑﺮای ﻣﺮﺗﻔﻊ ﺳﺎﺧﺘﻦ ﻧﯿﺎزھﺎی ﺧﺎص ﺧﻮد و دﯾﮕﺮان ،اﻗﺪام ﺑﻪ ﻦﺘﺷﻮﻧ ﻣﺘﺪھﺎ و ﺗﻮاﺑﻌﯽ ﺑﺮ روی jqueryﮐﺮده اﻧﺪ و اﯾﻦ ﺗﻮاﺑﻊ را در ﻗﺎﻟﺐ ﻓﺎﯾﻠﮫﺎی ﺟﺎوااﺳﮑﺮﯾﭙﺖ ) ( jsﻣﺠﺰا اراﺋﻪ ﻧﻤﻮده اﻧﺪ . ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺳﺎﯾﺖ http://apycom.com/menus/1-white-smoke.htmlﭘﻼﮔﯿﻨﯽ اراﺋﻪ ﻣﯿﺪھﺪ ﺑﺮای ﺳﺎﺧﺖ ﺎﺑ ﻨﻣ . jquery ھﺮ ﭘﻼﮔﯿﻦ ﻣﻤﮑﻦ اﺳﺖ ﺷﺎﻣﻞ ﯾﮏ ﯾﺎ ﭼﻨﺪ ﻓﺎﯾﻞ ﺟﺎوااﺳﮑﺮﯾﭙﺖ و ﻓﺎﯾﻠﮫﺎی ﻣﺮﺗﺒﻂ )ﺎﯾ ﺮﯾ ﺼﺗ ﺪﻨ ﺎﻣ اﺳﺘﺎﯾﻞ ﯾﺎ ( .. ﺪﺷﺎﺑ .ھﻤﭽﻨﯿﻦ ﺑﺮای اﺳﺘﻔﺎده ھﺮ ﭘﻼﮔﯿﻦ ﺑﺎﯾﺪ ﺑﻪ آﻣﻮزش ﻧﺼﺐ آن ﭘﻼﮔﯿﻦ ﻣﺮاﺟﻌﻪ ﻧﻤﻮد .اﻣﺎ ﯾﮏ ﻧﮑﺘﻪ را ھﻤﯿﺸﻪ ﺑﺎﯾﺪ رﻋﺎﯾﺖ ﮐﺮد و آن اﯾﻦ اﺳﺖ ﮐﻪ ﻓﺎﯾﻞ ﺟﺎوااﺳﮑﺮﯾﭙﺖ ﭘﻼﮔﯿﻦ ھﻤﯿﺸﻪ ﺑﺎﯾﺪ ﺑﻌﺪ از ﻓﺎﯾﻞ jquery.jsﻓﺮا ﺧﻮاﻧﯽ ﺷﻮد . ﺑﺮای درﯾﺎﻓﺖ ﭘﻼﮔﯿﻦ ھﺎی jqueryﺑﻪ ﻣﺮﺟﻊ آن در آدرس http://plugins.jquery.comﻣﺮاﺟﻌﻪ ﻧﻤﺎﯾﯿﺪ . اﯾﺠﺎد ﯾﮏ ﭘﻼﮔﯿﻦ ﺑﺮای : jquery ﺑﺮای اﯾﺠﺎد ﭘﻼﮔﯿﻦ ﺳﺎده ﺗﺮﯾﻦ راه اﯾﻦ اﺳﺖ ﮐﻪ ﻣﺘﺪھﺎی ﻣﻮرد ﻧﻈﺮ را ﺗﻮﺳﻂ ﺷﯽ query.fnاﯾﺠﺎد ﮐﺮده و آن ھﺎ را در ﻗﺎﻟﺐ ﯾﮏ ﻓﺎﯾﻞ jsذﺧﯿﺮه ﻧﻤﻮد .ھﻤﭽﻨﯿﻦ ﺑﺮای ﺗﻌﺮﯾﻒ ﺗﻮاﺑﻊ آﻧﮫﺎ را ﻣﯿﺘﻮان ﺗﻮﺳﻂ ﺷﯽ jQueryاﯾﺠﺎد ﻧﻤﻮد. ﯾﮏ ﻣﺜﺎل ﺳﺎده : در اﯾﻦ ﻣﺜﺎل ﭘﻼﮔﯿﻨﯽ ﺳﺎده ﺑﺮای ﮐﻨﺘﺮل ﺧﻄﺎ اﯾﺠﺎد ﺷﺪه : { )(jQuery.fn.debug = function {)(return this.each(function ;)alert(this ;)} ;} { )jQuery.log = function(message { )if(window.console ;)console.debug(message { } else ;)alert(message } ;}
ﮐﺪ ﻓﻮق را ﺑﺎ ﻧﺎم jquery.debug.jsذﺧﯿﺮه ﻣﯿﮑﻨﯿﻢ . در ﮐﺪ ﺑﺮ ﻧﺎﻣﻪ ﺑﻌﺪ از ﻓﺎﯾﻞ jquery.jsاﯾﻦ ﻓﺎﯾﻞ را ﻓﺮاﺧﻮاﻧﯽ ﻣﯽ ﮐﻨﯿﻢ : ><script type="text/javascript" src="jquery.js"></script ><script type="text/javascript" src="query.debug.js"></script ﺣﺎل ﻣﯿﺘﻮاﻧﯿﻢ از اﯾﻦ ﺗﻮاﺑﻊ اﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﻢ : ;)($("div p").debug
و ﯾﺎ در اﯾﻦ ﻋﺒﺎرت : { try // do some error prone stuff { )} catch(exception ;)$.log(exception }
ﭼﻨﺪ ﻧﮑﺘﻪ ﻣﮫﻢ ﺑﺮای ﻧﻮﺷﺘﻦ ﭘﻼﮔﯿﻦ ﻣﺪ ﻧﻈﺮ داﺷﺘﻪ ﺑﺎﺷﯿﺪ : ﻧﺎم ﻓﺎﯾﻞ ﭘﻼﮔﯿﻦ را ﺑﺎ ﻓﺮﻣﺖ jquery.pluginName.jsﻧﺎﻣﮕﺬاری ﻧﻤﺎﯾﯿﺪ ﻣﺎﻧﻨﺪ jquery.debug.js : • ﺗﻤﺎم ﻣﺘﺪ ھﺎ در jquery.fnﻧﻮﺷﺘﻪ ﺷﻮد و ﺗﻤﺎم ﺗﻮاﺑﻊ در ) jqueryﻣﺎﻧﻨﺪ ﻣﺜﺎل ﻓﻮق ( • در داﺧﻞ ﻣﺘﺪ ھﺎ ﻣﺘﻐﯿﺮ thisﯽﺷ ﻪﺑ ) jqueryھﻤﺎن ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ ﮐﻪ ﺗﺎﺑﻊ ﺑﺮاﯾﺸﺎن اﺟﺮا ﺷﺪه ( • اﺷﺎره ﻣﯿﮑﻨﺪ .ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل :
ﻪﺤﻔﺻ 34
آﻣﻮزش jQuery
blog.monavarian.ir
;)($('p').debug در داﺧﻞ ﺗﺎﺑﻊ debugﻣﺘﻐﯿﺮ thisﻪﺑ " "pاﺷﺎره ﻣﯽ ﮐﻨﺪ. ﺗﻤﺎم ﻣﺘﺪ ھﺎ و ﺗﻮاﺑﻊ ﺑﺎﯾﺪ ﺑﺎ ﻋﻼﻣﺖ ﺳﯿﻤﯽ ﻦﻟﺎﮐ "; " ﺗﻤﺎم ﺷﻮﻧﺪ .در ﻏﯿﺮ اﯾﻨﺼﻮرت ھﻨﮕﺎم ﻓﺸﺮده • ﺳﺎزی ﮐﺪ ھﺎ ﺑﺎ ﻣﺸﮑﻞ ﻣﻮاﺟﻪ ﻣﯿﺸﻮﻧﺪ . ﻣﻘﺪار ﺑﺎزﮔﺸﺘﯽ ﻣﺘﺪھﺎی ﻧﻮﺷﺘﻪ ﺷﺪه ﺑﺎﯾﺪ از ﺟﻨﺲ ﺷﯽ jqueryﺑﺎﺷﻨﺪ ﻣﮕﺮ ﺑﻄﻮر ﺻﺮﯾﺢ ﻣﺸﺨﺺ • ﺷﺪه ﺑﺎﺷﻨﺪ . در ﺻﻮرﺗﯽ ﮐﻪ ﻣﯿﺨﻮاھﯿﺪ ﻣﺘﺪ ﺷﻤﺎ ﺑﺮای ﺗﻤﺎم ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ اﺟﺮا ﮔﺮدد از روﯾﺪاد this.eachﺑﺮای • ﻧﻮﺷﺘﻦ روﯾﺪاد ﺑﺮای ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ اﺳﺘﻔﺎده ﮐﻨﯿﺪ ھﻤﯿﺸﻪ ﺑﺮای ﺳﺮﺑﺎرﮔﺰاری ﺗﺎﺑﻊ از jquery.fnﺑﻪ ﺟﺎی $.fnاﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ .زﯾﺮا ﻣﻤﮑﻦ اﺳﺖ ﺑﺮﺧﯽ • از ﮐﺎرﺑﺮان ﺗﻮﺳﻂ ﺗﺎﺑﻊ )( noConflictاز ﻧﺎم ﻣﺴﺘﻌﺎر دﯾﮕﺮی ﺑﺠﺎی $اﺳﺘﻔﺎده ﻧﻤﻮده ﺑﺎﺷﻨﺪ و در اﯾﻦ ﺻﻮرت ﻧﻤﯿﺘﻮاﻧﻨﺪ از ﮐﺪ ﺷﻤﺎ اﺳﺘﻔﺎده ﮐﻨﻨﺪ .اﻟﺒﺘﻪ ﻣﯿﺘﻮاﻧﯿﺪ در داﺧﻞ ﺗﻮاﺑﻊ ﺗﺎن از $اﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ) .در ﻣﻮرد ﺗﺎﺑﻊ noConflictدر ﻓﺼﻞ اول ﺗﻮﺿﯿﺢ داده ﺷﺪه اﺳﺖ ( . راه دﯾﮕﺮ ﺑﺠﺎی اﺳﺘﻔﺎده از ﺗﺎﺑﻊ jQueryﺑﻪ ﺟﺎی . $ﻗﺮار دادن ھﻤﻪ ﮐﺪھﺎی ﭘﻼﮔﯿﻦ در ﯾﮏ ﺑﻼک ﺑﻪ • ﻓﺮﻣﺖ زﯾﺮ اﺳﺖ ;)(function($) { …. })(jQuery اﯾﻦ ﮐﺎر ﭼﻨﺪ ﻓﺎﯾﺪه دارد .اول اﯾﻨﮑﻪ ﮐﺪھﺎ ﻣﺤﺎﻓﻈﺖ ﻣﯿﺸﻮﻧﺪ و در ﺻﻮرﺗﯽ ﮐﻪ ﺗﺎﺑﻌﯽ ھﻢ ﻧﺎم ﺑﺎ ﺗﻮاﺑﻊ اﺳﺘﻔﺎده ﺷﺪه در ﭘﻼﮔﯿﻦ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﺑﻪ ﻣﺸﮑﻞ ﺑﺮ ﻧﻤﯿﺨﻮرﯾﺪ و ھﻤﭽﻨﯿﻦ ﻓﺎﯾﺪه دﯾﮕﺮ اﯾﻦ ﮐﺎر اﯾﻦ اﺳﺖ ﮐﻪ ﻣﯿﺘﻮاﻧﯿﺪ ﺗﻮاﺑﻊ و ﻣﺘﻐﯿﺮ ھﺎ را از دﺳﺘﺮس ﺳﺎﯾﺮ ﺑﺮﻧﺎﻣﻪ ھﺎ ﭘﻨﮫﺎن ﮐﻨﯿﺪ و در ﻧﺘﯿﺠﻪ از ﺗﻐﯿﯿﺮات اﺣﺘﻤﺎﻟﯽ آﻧﮫﺎ ﺟﻠﻮﮔﯿﺮی ﻧﻤﺎﯾﯿﺪ .ﭘﺲ ﺗﻮﺻﯿﻪ ﻣﯿﺸﻮد ﮐﺪھﺎی ﭘﻼﮔﯿﻦ ﺧﻮد را در اﯾﻦ ﺑﻼک ﺗﻌﺮﯾﻒ ﮐﻨﯿﺪ . ﻼﺜﻣ : { )(function($ ;var x,y,z ;)})(jQuery در اﯾﻦ ﻣﺜﺎل ﻣﺘﻐﯿﺮ ھﺎی x ,y ,zﻣﺘﻐﯿﺮھﺎی ﺳﺮاﺳﺮی ﻧﯿﺴﺘﻨﺪ و ﻓﻘﻂ داﺧﻞ ھﻤﯿﻦ ﺑﻼک ﻗﺎﺑﻞ اﺳﺘﻔﺎده اﻧﺪ . ھﻤﯿﻦ ﻣﻄﺎﻟﺐ ﻓﻮق ﺑﺮای ﻧﻮﺷﺘﻦ ﯾﮏ ﭘﻼﮔﯿﻦ ﺳﺎده ﮐﻔﺎﯾﺖ ﻣﯿﮑﻨﺪ .ﺷﻤﺎ ﻣﯿﺘﻮاﻧﯿﺪ ﺑﺎ اﺳﺘﻔﺎده از ھﻤﯿﻦ ﻗﻮاﻧﯿﻦ اﻗﺪام ﺑﻪ ﻧﻮﺷﺘﻦ ﭘﻼﮔﯿﻦ و اﺳﺘﻔﺎده از آن در وﺑﺴﺎﯾﺖ ﺧﻮد ﻧﻤﺎﯾﯿﺪ . ﺣﺎل ﺑﮫﺘﺮ اﺳﺖ ﭘﻠﻪ ﭘﻠﻪ آﻣﻮزش اﯾﺠﺎد ﭘﻼﮔﯿﻦ را ﭘﯿﺶ ﺑﺒﺮﯾﻢ : ﺗﻔﺎوت ﻣﺘﺪ ) ( Methodو ﺗﺎﺑﻊ ) ( functionدر : jQuery ﺑﻪ ﻣﺜﺎل ﺑﺎﻻ دﻗﺖ ﻧﻤﺎﯾﯿﺪ .در ﻣﺜﺎل ﺑﺎﻻ ﯾﮏ ﻣﺘﺪ و ﯾﮏ ﺗﺎﺑﻊ اﯾﺠﺎد ﺷﺪه اﺳﺖ .ﻧﺤﻮه اﯾﺠﺎد ﺗﻮاﺑﻊ در jQueyﻪﺑ ﻓﺮﻣﺖ زﯾﺮ ﻣﯽ ﺑﺎﺷﺪ : ; } … { )…jQuery.funcName = function(a,b, و ﺗﻌﺮﯾﻒ ﻣﺘﺪ ﺑﻪ ﺻﻮرت زﯾﺮ ﻣﯽ ﺑﺎﺷﺪ : ; } ;jQuery.fn.MethodName= function(options,…){ … return this ﺑﺮای ﺻﺪا زدن ﺗﻮاﺑﻪ از ﻋﺒﺎرت )… $.funcName(a,b,اﺳﺘﻔﺎده ﻣﯿﻨﻤﺎﯾﯿﻢ در ﺻﻮرﺗﯽ ﮐﻪ ﺑﺮای ﺻﺪا زدن ﻣﺘﺪ ھﺎ از ﻋﺒﺎرت ). $(selector).methodName(options ھﻤﺎن طﻮر ﮐﻪ ﻗﺒﻼ ﺑﯿﺎن ﺷﺪ ﻣﺘﺪ ھﺎ ﺣﺘﻤﺎ ﺑﺎﯾﺪ ﻣﻘﺪار ﺑﺮﮔﺸﺘﯽ از ﺟﻨﺲ ﺷﯽ jQueryداﺷﺘﻪ ﺑﺎﺷﻨﺪ .اﯾﻦ ﺑﺪﻟﯿﻞ ﺧﺼﻮﺻﯿﺖ ﻓﺮاﺧﻮاﻧﯽ زﻧﺠﯿﺮه ای ﻣﺘﺪ ھﺎﺳﺖ )ھﺮ ﻣﺘﺪ ﺷﯽ ﻧﺘﯿﺠﻪ را ﺑﺮ ﻣﯿﮕﺮداﻧﺪ و ﻣﺘﺪ ﺑﻌﺪی روی ﻧﺘﯿﺠﻪ ﻋﻤﻠﯿﺎت ﺟﺪﯾﺪی اﻧﺠﺎم ﻣﯿﺪھﺪ و ﻣﺠﺪدا ﺷﯽ را ﺑﺮ ﻣﯿﮕﺮداﻧﺪ و اﯾﻦ ﻋﻤﻞ ﺑﺼﻮرت زﻧﺠﯿﺮه وار ﺗﺎ ﭘﺎﯾﺎن زﻧﺠﯿﺮه اداﻣﻪ ﭘﯿﺪا ﻣﯿﮑﻨﺪ ( در ﺻﻮرﺗﯽ ﮐﻪ در ﺗﻮاﺑﻊ اﻣﮑﺎن ﻓﺮاﺧﻮاﻧﯽ زﻧﺠﯿﺮه ای وﺟﻮد ﻧﺪارد و ﻣﯿﺘﻮاﻧﺪ ﻣﻘﺪار ﺑﺮﮔﺸﺘﯽ ﻧﺪاﺷﺘﻪ ﺑﺎﺷﺪ .
ﻪﺤﻔﺻ 35
آﻣﻮزش jQuery
blog.monavarian.ir
اﺳﺘﻔﺎده از روﯾﺪاد : this.each اﮔﺮ ﻣﯿﺨﻮاھﯿﺪ ﻣﺘﺪ ﺷﻤﺎ ﺑﺮای ﺗﻤﺎم ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ ) ( selectorsاﺟﺮا ﮔﺮدد از روش زﯾﺮ اﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﺪ . {)(jQuery.fn.newMethod = function {)(return this.each(function ﮐﺪھﺎی ﺷﻤﺎ … // ;)} ;} ھﻤﺎن طﻮر ﮐﻪ ﻣﯿﺒﯿﻨﯿﺪ از ﻋﺒﺎرت return this.eachاﺳﺘﻔﺎده ﺷﺪه ﮐﻪ در اﯾﻦ ﺣﺎﻟﺖ ﭘﺲ از اﺟﺮای ﺗﺎﺑﻊ روﯾﺪاد ، eachﺷﯽ ﺟﺎری را ﻧﯿﺰ ﺑﺮ ﻣﯽ ﮔﺮداﻧﺪ . ﻦﯾﺪﻨﭼ ﻦﺘﺷﻮﻧ ﻊﺑﺎﺗ در ﯾﮏ ﭘﻼﮔﯿﻦ : ﻓﺮض ﮐﻨﯿﺪ ﺷﻤﺎ ﻗﺼﺪ ﻧﻮﺷﺘﻦ ﭼﻨﺪﯾﻦ ﻣﺘﺪ را دارﯾﺪ : ;} jQuery.logError = function() { ... ;} jQuery.logWarning = function() { ... ;} jQuery.logDebug = function() { ... ﺷﻤﺎ ﻣﯿﺘﻮاﻧﯿﺪ اﯾﻦ ﺗﻮاﺑﻊ را در ﯾﮏ ﺷﯽ ﻗﺮار دھﯿﺪ : { = jQuery.log error : function() { ... }, warning : function() { ... }, } debug : function() { ... ;}
ﺗﻌﯿﯿﻦ ﭘﺎراﻣﺘﺮ ﺑﺮای ﻣﺘﺪ ھﺎ ) :ﭘﺎراﻣﺘﺮ : ( options ﺷﻤﺎ ﻣﯿﺘﻮاﻧﯿﺪ ﺑﺮای ﻣﺘﺪ ھﺎ ﭘﺎراﻣﺘﺮ ھﺎی ﺛﺎﺑﺖ و ﯾﺎ optionsﺑﻨﻮﯾﺴﯿﺪ .ﭘﺎراﻣﺘﺮ optionsدر jqueryﮐﻤﮏ ﻣﯿﮑﻨﺪ ﺗﺎ ﺑﺠﺎی ﻧﻮﺷﺘﻦ ﺗﻌﺪاد زﯾﺎدی ﭘﺎراﻣﺘﺮ ﺑﺮای ﺗﺎﺑﻊ آﻧﮫﺎ را ﺑﺎ ﻓﺮﻣﺖ optionsﺑﻨﻮﯾﺴﯿﻢ و ھﺮ ﮐﺪام را ﮐﻪ ﺧﻮاﺳﺘﯿﻢ در زﻣﺎن ﺻﺪا زدن ﻣﺘﺪ ،ﺗﻐﯿﯿﺮ دھﯿﻢ .ﺳﺎﺧﺘﺎر optionsﺑﻪ ﺻﻮرت روﺑﺮو ﻣﯽ ﺑﺎﺷﺪ : } … { parametr1 : value , parametr2:value , ﺣﺎل در ﺗﻌﺮﯾﻒ ﮐﺪ : { )$.fn.newMethod = function(options { = var opt name : 'default' , size : 5 , flag : true ;} } ھﻤﺎن طﻮر ﮐﻪ در ﻣﺜﺎل ﻣﯿﺒﯿﻨﯿﺪ ﻣﺘﻐﯿﺮی ﺑﺮای ﺗﻌﺮﯾﻒ ﭘﯿﺶ ﻓﺮض ھﺎی optionsﺑﻪ ﻧﺎم optاﯾﺠﺎد ﻧﻤﻮدﯾﻢ .ﺣﺎل ﺑﺎﯾﺪ راھﯽ ﭘﯿﺪا ﺷﻮد ﮐﻪ اﯾﻦ ﻣﺘﻐﯿﺮ را ﺑﻪ optionsﻧﺴﺒﺖ دھﯿﻢ .ﺗﺎﺑﻌﯽ در jqueryﺑﻪ ﻧﺎم extendوﺟﻮد دارد ﮐﻪ ﮐﺎر ﺗﻮﺳﻌﻪ ﮐﺪھﺎ ﺑﺮای jqueryرا اﻧﺠﺎم ﻣﯿﺪھﺪ .ﺑﺎ اﯾﻦ ﺗﺎﺑﻊ در اﯾﺠﺎد ﭘﻼﮔﯿﻦ ﮐﺎرھﺎی زﯾﺎدﺗﺮی دارﯾﻢ اﻣﺎ در اﯾﻨﺠﺎ ﺑﺮای ﺗﻮﺳﻌﻪ ﻣﻘﺎدﯾﺮ ﭘﯿﺶ ﻓﺮض optionsاﺳﺘﻔﺎده ﻣﯿﺸﻮد : ;)var setting = $.extend(opt,options در ﺣﻘﯿﻘﺖ ﺗﮑﻪ ﮐﺪ ﺑﺎﻻ را ﻣﯿﺘﻮان ﺑﻄﻮر ﮐﺎﻣﻞ ﺑﺼﻮرت زﯾﺮ ﻧﻮﺷﺖ : { )$.fn.newMethod = function(options { = var opt name : 'default' , size : 5 , flag : true
ﻪﺤﻔﺻ 36
jQuery آﻣﻮزش
blog.monavarian.ir
}; var setting = $.extend(opt,options); }
: jquery.extend ﻣﯿﺘﻮاﻧﯿﻢ از اﯾﻦ ﺗﺎﺑﻊ ﺑﺮای. اﺳﺘﻔﺎده ﮐﺮدﯾﻢoptions ﺑﺮای ﺗﻌﻤﯿﻢ ﻣﺘﻐﯿﺮھﺎیextend ھﻤﺎﻧﻄﻮر ﮐﻪ در ﻣﺜﺎل ﺑﺎﻻ از . ھﺎی ﺟﺪﯾﺪ اﺳﺘﻔﺎده ﮐﺮدselector ﺗﻌﻤﯿﻢ دادن ﻣﺘﺪ ھﺎ و ﯾﺎ ﺣﺘﯽ ﺗﻌﺮﯾﻒ : در ﺗﻌﺮﯾﻒ ﭘﻼﮔﯿﻦ ھﺎ ﺑﺮای اﯾﻨﮑﻪ ﭼﻨﺪ ﻣﺘﺪ ھﻢ ﺷﮑﻞ را ﺗﻌﺮﯾﻒ ﻧﻤﺎﯾﯿﻢ ﻣﯿﺘﻮاﻧﯿﻢ از دﺳﺘﻮر زﯾﺮ اﺳﺘﻔﺎده ﮐﻨﯿﻢ
jQuery.fn.extend({ check : function() { ... }, uncheck : function() { ... }, toggleCheck : function() { ... } }); : ھﺎ اﺳﺘﻔﺎده ﮐﺮدselector ﺪﻨﻧﺎﻣjquery ﻣﯿﺘﻮان ﺑﺮای ﺗﻌﻤﯿﻢ ﺳﺎﯾﺮ اﺷﯿﺎءextend ھﻤﭽﻨﯿﻦ از ﺗﺎﺑﻊ jQuery.extend(jQuery.expr[":"], { text : "a.type=='text'", radio : "a.type=='radio'", checkbox : "a.type=='checkbox'" }); : ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ ﻗﻮاﻧﯿﻦ ﻓﻮق ﻣﺜﺎل ﺳﺎده از ﺳﺎﺧﺘﺎر ﯾﮏ ﭘﻼﮔﯿﻦ ﺑﻪ ﺻﻮرت زﯾﺮ ﻣﯽ ﺑﺎﺷﺪ (function($) { $.fn.myPlugin = function(settings) { var config = {var1: 'val1',var2 : 'val2'}; if (settings) $.extend(config, settings); this.each(function() { // element-specific code here }); return this; }; })(jQuery); : و ﺑﺮای ﺻﺪا زدن اﯾﻦ ﭘﻼﮔﯿﻦ $('p').myPlugin(); $('p').myPlugin({var1 : 'string'}); $('p').myPlugin({var2 : 'values',var1 : 'values'}); : ﻟﺎ ﻣ ﻪﺑﮫﺎی زﯾﺮ ﺗﻮﺟﻪ ﻧﻤﺎﯾﯿﺪ : ﭘﻼﮔﯿﻦ ﺳﺎده: ١ ﻣﺜﺎل jQuery.fn.firstPlugin = function () { return this.each (function () { alert (this.id); }); };
: ﻓﺮاﺧﻮاﻧﯽ ﺗﺎﺑﻊ
$('#test').firstPlugin();
37 ﻪﺤﻔﺻ
jQuery آﻣﻮزش
blog.monavarian.ir
: ( ) ﺑﺎ ﭘﺎراﻣﺘﺮ: ٢ ﻣﺜﺎل . ﺑﺮ ﻣﯿﮕﺮداﻧﺪtext ﭘﻼﮔﯿﻦ زﯾﺮ دو ﻋﺪد ﻣﯿﮕﯿﺮد و ﻋﻤﻠﯿﺎﺗﯽ را ﺑﺎ آن دو ﻋﺪد اﻧﺠﺎم ﻣﯿﺪھﺪ و ﻧﺘﯿﺠﻪ را ﺑﺼﻮرت ﯾﮏ : ( اﺳﺖ+ )ﻋﻤﻠﯿﺎت ﭘﯿﺶ ﻓﺮض ﺟﻤﻊ (function($){ $.fn.calc = function (number1, number2, options) { var myoptions = $.extend ( {operation: "+",label: "The result is"}, options); return this.each(function(){ var msg = myoptions.label + " (" + myoptions.operation + ") : "; var result = eval( number1+' '+ myoptions.operation+' '+ number2 ); return $(this).html(msg + result); }); }; })(jQuery);
. اﺳﺘﻔﺎده ﻣﯿﺸﻮدoptions.var ازoptions ھﻤﺎن طﻮر ﮐﻪ در ﮐﺪ ﻣﺸﺎھﺪه ﻣﯿﮑﻨﯿﺪ ﺑﺮای دﺳﺘﺮﺳﯽ ﺑﻪ ﻣﻘﺎدﯾﺮ . وﻟﯽ ﺳﺎﯾﺮ ﭘﺎراﻣﺘﺮ ھﺎی ﺗﺎﺑﻊ در ﺗﺎﺑﻊ ﻣﺴﺘﻘﯿﻢ ﻗﺎﺑﻞ دﺳﺘﺮس ﻣﯽ ﺑﺎﺷﺪ : ﺗﻮﺳﻂ ﻣﺜﺎل ھﺎی زﯾﺮ اﯾﻦ ﭘﻼﮔﯿﻦ را ﺗﺴﺖ و ﻧﺘﯿﺠﻪ را ﻣﺸﺎھﺪه ﻣﯽ ﻧﻤﺎﯾﯿﻢ $('#test').calc(4,2); // result : The result is (+) : 6 $('#test').calc(4,2,{operation:'*'}); // result : The result is (*) : 8 $('#test').calc(4,2,{operation:'/',label:'calculate operation '}); // result : calculate operation (/) : 2 را ﺑﺼﻮرت اﺳﺘﺎﺗﯿﮏ ﺗﻌﺮﯾﻒ ﻧﻤﺎﯾﯿﻢ ﺗﺎ ﻣﺴﺘﻘﯿﻤﺎ ﺑﺘﻮان آﻧﮫﺎ را ﺗﻐﯿﯿﺮoptions ﻣﯿﺘﻮاﻧﯿﻢ ﻣﻘﺪار ﭘﯿﺶ ﻓﺮض: ﻪﺘﮑﻧ : داد در ای ﺻﻮرت ﮐﺪ ﺑﺎﻻ ﺑﻪ ﻓﺮم زﯾﺮ ﺗﺒﺪﯾﻞ ﺧﻮاھﺪ ﺷﺪ (function($){ $.fn.calc = function (number1, number2, options) { var myoptions = $.extend ( $.fn.calc.defaultvars, options); var t = $(this); return this.each(function(){ var msg = myoptions.label + " (" + myoptions.operation + ") : "; var result = eval( number1+' '+ myoptions.operation+' '+ number2 ); return $(this).html(msg + result); }); }; $.fn.calc.defaultvars = { operation: "+", label: "The result is" }; })(jQuery); در اﯾﻦ ﺣﺎﻟﺖ اﮔﺮ ﺑﺨﻮاھﯿﻢ در ﺑﺮﻧﺎﻣﻪ ﯾﮏ ﺑﺎر ﻣﻘﺪار ﭘﯿﺶ ﻓﺮض را ﺗﻐﯿﯿﺮ داده و در ﺗﻤﺎم ﮐﺪھﺎی ﺑﻌﺪی از ﻣﻘﺪار : ﺟﺪﯾﺪ اﺳﺘﻔﺎده ﻧﻤﺎﯾﯿﻢ ﻣﯿﺘﻮاﻧﯿﻢ ﻣﺎﻧﻨﺪ ﻣﺜﺎل زﯾﺮ ﻋﻤﻞ ﮐﻨﯿﻢ
38 ﻪﺤﻔﺻ
آﻣﻮزش jQuery
blog.monavarian.ir
;'*' = $.fn.calc.defaultvars.operation اﮔﺮ ﺑﻌﺪ از ﺗﻌﺮﯾﻒ ﻋﺒﺎرت ﺑﺎﻻ ﮐﺪ زﯾﺮ را ﺑﻨﻮﯾﺴﯿﻢ :
;)$('#test').calc(4,2 // result : The result is (*) : 8
) ﭘﯿﺸﻨﮫﺎد :ﺑﺮای ﯾﺎدﮔﯿﺮی ﺑﮫﺘﺮ ﭘﯿﺸﻨﮫﺎد ﻣﯿﺸﻮد ﮐﺪھﺎی ﭘﻼﮔﯿﻦ ﻣﻮﺟﻮد در ﺳﺎﯾﺖ http://plugins.jquery.comرا درﯾﺎﻓﺖ و ﺳﻮرس ھﺎ را ﻣﺸﺎھﺪه ﻧﻤﺎﯾﯿﺪ .اﯾﻦ ﻣﯿﺘﻮاﻧﺪ ﺑﻪ ﺷﻤﺎ در اراﺋﻪ ﺳﺎﺧﺘﺎر ﻣﻨﺎﺳﺐ ﺑﺮای ﻧﻮﺷﺘﻦ ﭘﻼﮔﯿﻦ ﯾﺎری رﺳﺎﻧﺪ (
ﻪﺤﻔﺻ 39
آﻣﻮزش jQuery
blog.monavarian.ir
ﻞﺼﻓ ﻧﮫﻢ ﺑﺮﺧﯽ ﺗﻮاﺑﻊ ﻣﻔﯿﺪ jquery در اﯾﻦ ﻓﺼﻞ ﺑﺮﺧﯽ از ﺗﻮاﺑﻊ ﻣﻮﺟﻮد در ﮐﺘﺎﺑﺨﺎﻧﻪ ﺟﯽ ﮐﻮﺋﺮی را ﻣﻌﺮﻓﯽ ﺧﻮاھﯿﻢ ﮐﺮد . : lengthاﯾﻦ ﻣﺘﻐﯿﺮ ﺑﺮای ھﺮ ﺷﯽ jqueryﺗﻌﺮﯾﻒ ﺷﺪه و اﻧﺪازه آن ﺷﯽ را ﺑﺮ ﻣﯿﮕﺮداﻧﺪ .در ﺻﻮرﺗﯽ ﮐﻪ ﺷﯽ stringﺑﺎﺷﺪ طﻮل رﺷﺘﻪ را ﺑﺮ ﻣﯿﮕﺮداﻧﺪ و در ﺻﻮرﺗﯽ ﮐﻪ ﯾﮏ selectorرا ﺑﺎ اﯾﻦ ﺗﺎﺑﻊ ﺻﺪا ﺑﺰﻧﯿﻢ ﺗﻌﺪاد ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ را ﻧﺸﺎن ﻣﯿﺪھﺪ . ﺑﻨﺎﺑﺮ اﯾﻦ ﺗﻮﺳﻂ اﯾﻦ ﺗﺎﺑﻊ ﻣﯿﺘﻮاﻧﯿﻢ ﺗﺸﺨﺼﯽ دھﯿﻢ ﮐﻪ آﯾﺎ ﺷﯽ ﻣﻮﺟﻮد اﺳﺖ ﯾﺎ ﺧﯿﺮ : } … { )If ($('.info').length : jQuery.browserاﯾﻦ ﺷﯽ ﺑﺮای ﺑﺮرﺳﯽ ﺑﺮوزر ﮐﺎرﺑﺮ ﺑﮑﺎر ﻣﯿﺮود و از ﺑﺮوزر ھﺎی زﯾﺮ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﺪ :
)webkit (as of jQuery 1.4 )safari (deprecated opera msie mozilla
• • • • •
ﻼﺜﻣ : )If ($.browser.msie ;)alert('you are using internet explorer )elseif ($.browser.mozilla ;)' alert('you are using mozilla firefox browser اﯾﻦ ﺷﯽ ﻣﺘﻐﯿﺮی ﺑﻪ ﻧﺎم versionدارد ﮐﻪ ورژن ﺑﺮوزر ﮐﺎرﺑﺮ را اراﺋﻪ ﻣﯿﺪھﺪ : $.browser.version ﻼﺜﻣ : )If ($.browser.opera ;) alert('you are using opera version : ' + $.browser.version
) : jQuery.globalEval( code اﯾﻦ ﺗﺎﺑﻊ ﯾﮏ codeﺟﺎوااﺳﮑﺮﯾﭙﺖ را ﺑﺼﻮرت ﺳﺮاﺳﺮی اﺟﺮا ﻣﯿﮑﻨﺪ :
{)(function test )";jQuery.globalEval("var newVar = true } ﺣﺎل اﮔﺮ ﺗﺎﺑﻊ )( testرا ﺻﺪا ﺑﺰﻧﯿﻢ .ﻣﺘﻐﯿﺮ newVarﺑﺎ ﻣﻘﺪار trueاﯾﺠﺎد ﻣﯿﮑﻨﺪ و ﻣﯿﺘﻮان در ﺗﻤﺎم ﺑﺮ ﻧﺎﻣﻪ از آن اﺳﺘﻔﺎده ﮐﺮد )ﻣﺘﻐﯿﺮ ﺳﺮاﺳﺮی ( . ): jQuery.inArray(value , array اﯾﻦ ﺗﺎﺑﻊ ﻣﻘﺪار valueرا در آراﯾﻪ arrayﺟﺴﺘﺠﻮ ﮐﺮده و اﯾﻨﺪﮐﺲ اوﻟﯿﻦ ﺧﺎﻧﻪ از آراﯾﻪ را ﮐﻪ ﻣﻘﺪار valueﺑﺎ آن ﻣﺴﺎوی اﺳﺖ ﺑﺮ ﻣﯿﮕﺮداﻧﺪ .
;)]var index = $.inArray(2,[1,2,3,4,5 ﻧﺘﯿﺠﻪ index=1 :
): jQuery.isFunction(obj اﯾﻦ ﺗﺎﺑﻊ ﻣﺸﺨﺺ ﻣﯿﮑﻨﺪ آﯾﺎ ﭘﺎراﻣﺘﺮ ارﺳﺎل ﺷﺪه objاز ﻧﻮع ﺗﺎﺑﻊ ﻣﯽ ﺑﺎﺷﺪ ﯾﺎ ﺧﯿﺮ .در ﺻﻮرت ﺗﺎﺑﻊ ﺑﻮدن Obj ﻣﻘﺪار اﯾﻦ ﺗﺎﺑﻊ trueﻣﯿﺸﻮد و در ﻏﯿﺮ اﯾﻦ ﺻﻮرت false
ﻪﺤﻔﺻ 40
آﻣﻮزش jQuery
blog.monavarian.ir
): jQuery.isArray(obj اﯾﻦ ﺗﺎﺑﻊ ﻧﯿﺰ در ﺻﻮرﺗﯽ ﮐﻪ ﭘﺎراﻣﺘﺮ ارﺳﺎﻟﯽ ) ( objاز ﺟﻨﺲ آراﯾﻪ ﺑﺎﺷﺪ ،ﻣﻘﺪار trueو در ﺻﻮرﺗﯽ ﮐﻪ ﻧﺒﺎﺷﺪ falseﺑﺮ ﻣﯿﮕﺮداﻧﺪ .
ﻪﺤﻔﺻ 41
آﻣﻮزش jQuery
blog.monavarian.ir
ﭘﯿﻮﺳﺖ ھﺎ ﭘﯿﻮﺳﺖ jquery Selectors :١ ﻣﺛﺎل
ﺷﺮح ) :اﻧﺘﺨﺎب ﻣﯿﮑﻨﺪ ... ھﻤﻪ ﻋﻨﺎﺻﺮ
Selector )"*"($
*
)"$("#lastname
#id
)"$(".intro
.class
)"$("p
element
)"$(".intro.demo
.class.class
اوﻟﯿﻦ ﭘﺎراﮔﺮاف > <pدر ﺻﻔﺤﻪ
)"$("p:first
:first
آﺧﺮﯾﻦ > <pﻪﺤﻔﺻ
)"$("p:last
:last
ھﻤﻪ ﺳﻄﺮ ھﺎی زوج ﺟﺪول
)"$("tr:even
:even
ھﻤﻪ ﺳﻄﺮ ھﺎی ﻓﺮد ﺟﺪول
)"$("tr:odd
:odd
ﭼﮫﺎرﻣﯿﻦ ﻋﻨﺼﺮ ﻟﯿﺴﺖ )اوﻟﯿﻦ ﻋﻨﺼﺮ 0ﺪﺷ ﺑ ﯽﻣ (
)")$("ul li:eq(3
):eq(index
ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﻟﯿﺴﺖ ﺑﻌﺪ از ﻋﻨﺼﺮ ﭼﮫﺎرم
)")$("ul li:gt(3
):gt(no
ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﻟﯿﺴﺖ ﻗﺒﻞ از ﻋﻨﺼﺮ ﭼﮫﺎرم
)")$("ul li:lt(3
):lt(no
ﺗﻤﺎم ﺗﮓ ھﺎی inputﮐﻪ ﺧﺎﻟﯽ ﻧﯿﺴﺘﻨﺪ
)")$("input:not(:empty
):not(selector
)"$(":header
:header
ﻋﻨﺼﺮی ﺑﺎ آﯾﺪی lastname ھﻤﻪ ﻋﻨﺎﺻﺮ ﮐﻪ دارای ﮐﻼس introھﺴﺘﻨﺪ ھﻤﻪ ﺗﮕﮫﺎی > <pﻣﻮﺟﻮد در ﺻﻔﺤﻪ ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﮐﻪ دارای ﮐﻼﺳﮫﺎی introو demoھﺴﺘﻨﺪ
ﺗﻤﺎم ﺗﮕﮫﺎی ھﺪر )…>( <h1><h2><h3 ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﻣﺘﺤﺮک ﺻﻔﺤﻪ
:animated
ھﻤﻪ ﻋﻨﺎﺻﺮی ﺻﻔﺤﻪ ﮐﻪ دارای ﻣﺤﺘﻮی helloھﺴﺘﻨﺪ ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﺻﻔﺤﻪ ﮐﻪ ﻓﺮزﻧﺪ ﻧﺪارﻧﺪ ) دروﻧﺸﺎن ﺗﮕﯽ ﺗﻌﺮﯾﻒ ﻧﺸﺪه(
ﺗﻤﺎم ﭘﺎراﮔﺮاﻓﮫﺎی ﻣﺨﻔﯽ درون ﺻﻔﺤﻪ ﺗﻤﺎم ﺟﺪوﻟﮫﺎی ﻧﻤﺎﯾﺎن در ﺻﻔﺤﻪ )اﻧﺘﺨﺎب ﭼﻨﺪ ( selectorﺗﻤﺎم ﺗﮓ ھﺎی thو ﺗﻤﺎم ﺗﮓ ھﺎی tdو
ﻪﺤﻔﺻ 42
)")'$(":contains('hello
):contains(text
)"$(":empty
:empty
)"$("p:hidden
:hidden
)"$("table:visible
:visible
)"$("th,td,.intro
s1,s2,s3
jQuery آﻣﻮزش
blog.monavarian.ir
intro ﺗﻤﺎم ﺗﮓ ھﺎی دارای ﮐﻼس [attribute]
ھﺴﺘﻨﺪhref ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﮐﻪ دارای ﺧﺼﻮﺻﯿﺖ
$("[href]")
[attribute=value] $("[href='#']") [attribute!=value] $("[href!='#']") [attribute$=value] $("[href$='.jpg']")
ﺪﺷﺎﺑ# آﻧﮫﺎ ﺑﺮاﺑﺮhref ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﺻﻔﺤﻪ ﮐﻪ ﺧﺼﻮﺻﯿﺖ ﺪﺷﺎﺑ# آﻧﮫﺎ ﻣﺨﺎﻟﻒhref ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﺻﻔﺤﻪ ﮐﻪ ﺧﺼﻮﺻﯿﺖ . ﺧﺘﻢ ﺷﻮد.jpg آﻧﮫﺎ ﺑﻪhref ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﮐﻪ ﺧﺼﻮﺻﯿﺖ
:input
$(":input")
ﺗﻤﺎم ﻋﻨﺎﺻﺮ ﻓﺮم ﺻﻔﺤﻪ
:text
$(":text")
text ھﺎیinput ﺗﻤﺎم
:password
$(":password")
:radio
$(":radio")
:checkbox
$(":checkbox")
:submit
$(":submit")
:reset
$(":reset")
:button
$(":button")
button ھﺎی از ﻧﻮعinput ﺗﻤﺎم
:image
$(":image")
( image button ) image ھﺎی از ﻧﻮعinput ﺗﻤﺎم
:file
$(":file")
:enabled
$(":enabled")
ھﺎی ﻓﻌﺎلinput ﺗﻤﺎم
:disabled
$(":disabled")
ھﺎی ﻏﯿﺮ ﻓﻌﺎلinput ﺗﻤﺎم
:selected
$(":selected")
select ﺗﻤﺎم ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎب ﺷﺪه از ﯾﮏ ﺟﻌﺒﻪ
:checked
$(":checked")
ﻤﺗﺎم ﭼﮏ ﺑﺎﮐﺲ ھﺎی اﻧﺘﺨﺎب ﺷﺪه
ھﺴﺘﻨﺪpassword ھﺎ ﮐﻪ ﻧﻮعinput ﺗﻤﺎم ﺗﻤﺎم دﮐﻤﻪ ھﺎی رادﯾﻮﯾﯽ ﺻﻔﺤﻪ ﺗﻤﺎم ﭼﮏ ﺑﺎﮐﺲ ھﺎی ﺻﻔﺤﻪ ﻪﺤﻔﺻsubmit ﺗﻤﺎم دﮐﻤﻪ ھﺎی ﻪﺤﻔﺻreset ﺗﻤﺎم دﮐﻤﻪ ھﺎی
file ھﺎی از ﻧﻮعinput ﺗﻤﺎم
43 ﻪﺤﻔﺻ
آﻣﻮزش jQuery
blog.monavarian.ir
ﭘﯿﻮﺳﺖ jquery Event Functions : ٢ روﯾﺪادھﺎی : jQuery ﺗﺎﺑﻊ اﺟﺮا ﻣﯽ ﺷﻮد وﻗﺘﯽ روﯾﺪاد readyاز ﺷﯽ ) documentھﻨﮕﺎﻣﯽ ﮐﻪ ﺻﻔﺤﻪ آﻣﺎده اﺟﺮا ﻣﯿﺒﺎﺷﺪ( از ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ ﺧﺎرج ) ( blurﻢﯾ ﺷ ﯽﻣ
ﺗواﺑﻊ روﯾداد )$(document).ready(function )$(selector).blur(function
ﻣﺤﺘﻮی ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ ﺗﻐﯿﯿﺮ ﻣﯿﮑﻨﺪ
)$(selector).change(function
روی ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ ﮐﻠﯿﮏ ﻣﯿﺸﻮد
)$(selector).click(function
روی ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎب دﺑﻞ ﮐﻠﯿﮏ ﻣﯿﺸﻮد
)$(selector).dblclick(function
ﺧﻄﺎﯾﯽ روی ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎب اﺗﻔﺎق ﻣﯽ اﻓﺘﺪ
)$(selector).error(function
روی ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎب ﻓﻮﮐﻮس ﻣﯿﺸﻮد ) ﺲﮑ ﺮﺑ ( blur
)$(selector).focus(function
روی ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎب ﮐﻠﯿﺪی ﻓﺸﺎر داده ﻣﯿﺸﻮد
)$(selector).keydown(function
روی ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ ﮐﻠﯿﺪ زده ﻣﯿﺸﻮد
)$(selector).keypress(function
ﮐﻠﯿﺪ ﻓﺸﺎر داده ﺷﺪه روی ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ رھﺎ ﻣﯿﺸﻮد ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎب ﻟﻮد )ﺑﺎرﮔﺰاری ( ﻣﯽ ﺷﻮد
)$(selector).keyup(function )$(selector).load(function
روی ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ ﮐﻠﯿﮏ ﭼﭗ ﻣﻮس زده ﺷﻮد )ﻗﺒﻞ از رھﺎ ﺷﺪن ﮐﻠﯿﮏ (
)$(selector).mousedown(function
ﻣﻮس وارد ﻧﺎﺣﯿﻪ ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎب ﺷﻮد
)$(selector).mouseenter(function
ﻣﻮس از ﻧﺎﺣﯿﻪ ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ ﺧﺎرج ﺷﻮد
)$(selector).mouseleave(function
ﻧﺸﺎﻧﮕﺮ ﻣﻮس روی ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ ﺣﺮﮐﺖ ﮐﻨﺪ
)$(selector).mousemove(function
ﻧﺸﺎﻧﮕﺮ ﻣﻮس از روی ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ ﮐﻨﺎر رود
)$(selector).mouseout(function
ﻧﺸﺎﻧﮕﺮ ﻣﻮس روی ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ ﺑﺮود
)$(selector).mouseover(function
ﮐﻠﯿﮏ ﻣﻮس رھﺎ ﺷﻮد
)$(selector).mouseup(function
وﻗﺘﯽ ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ ﺗﻐﯿﯿﺮ اﻧﺪازه دھﺪ
)$(selector).resize(function
وﻗﺘﯽ روی ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ scrollﺷﻮد
)$(selector).scroll(function
ﻪﺤﻔﺻ 44
jQuery آﻣﻮزش
blog.monavarian.ir
ﺷﻮدselect اﻧﺘﺨﺎب، وﻗﺘﯽ ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ
$(selector).select(function) $(selector).submit(function)
. ﺷﻮدsubmit وﻗﺘﯽ ﻓﺮﻣﯽ
$(selector).unload(function)
ﻦﺘﺴ ﻞﺜﻣ ﺻﻔﺤﻪ وب. ( ﻣﯿﺸﻮدunoad) ھﻨﮕﺎﻣﯽ ﮐﻪ ﻋﻨﺼﺮی ﺣﺬف
45 ﻪﺤﻔﺻ
آﻣﻮزش jQuery
blog.monavarian.ir
: jQuery Trigger Functions ﮔﺎھﯽ ﻻزم اﺳﺖ ﻣﺴﺘﻘﯿﻤﺎ ﺗﻮﺳﻂ ﮐﺪ روﯾﺪادی را ﺻﺪا ﺑﺰﻧﯿﻢ ) ﺗﺎﺑﻊ ھﺎی ﻣﺮﺑﻮط ﺑﻪ روﯾﺪاد ﺻﺪا زده ﻣﯿﺸﻮد ( .ﻪﺑ اﯾﻦ ﻋﻤﻞ triggerﮔﻔﺘﻪ ﻣﯿﺸﻮد . ﻣﺜﺎل :در ﻣﺜﺎل زﯾﺮ روﯾﺪاد ﮐﻠﯿﮏ از دﮐﻤﻪ ﺑﺎ آﯾﺪی demoﺻﺪا زده ﺷﺪه اﺳﺖ .ﺑﻨﺎﺑﺮ اﯾﻦ ﺗﻤﺎم ﺗﻮاﺑﻌﯽ ﮐﻪ ﺑﻪ اﯾﻦ روﯾﺪاد وﺻﻞ ﺷﺪه اﻧﺪ اﺟﺮا ﺧﻮاھﻨﺪ ﺷﺪ .
)($("button#demo").click ﺑﺎﻋﺚ اﺟﺮای :
ﺗواﺑﻊ
روﯾﺪاد blurاز ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ )( selectors
)($(selector).blur
روﯾﺪاد changeاز ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ
)($(selector).change
روﯾﺪاد clickاز ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ
)($(selector).click
روﯾﺪاد dblclickاز ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﯽﺑ
)($(selector).dblclick
روﯾﺪاد ﺧﻄﺎ از ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ
)($(selector).error
روﯾﺪاد ﻓﻮﮐﻮس از ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ
)($(selector).focus
روﯾﺪاد keydownاز ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ
)($(selector).keydown
روﯾﺪاد keypressاز ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ
)($(selector).keypress
روﯾﺪاد keyupاز ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ
)($(selector).keyup
روﯾﺪاد selectاز ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ
)($(selector).select
روﯾﺪاد submitاز ﻋﻨﺎﺻﺮ اﻧﺘﺨﺎﺑﯽ
)($(selector).submit
ﻪﺤﻔﺻ 46
jQuery آﻣﻮزش
blog.monavarian.ir
ﭘﯿﺸﻨﮫﺎدات ﺧﻮد و ھﻤﭽﻨﯿﻦ ﺑﺮای رﻓﻊ اﺷﮑﺎل و ﺑﺤﺚ و ﺗﺒﺎدﻟﯽ ﻧﻈﺮ در ﻣﻮرد اﯾﻦ آﻣﻮزش ﺑﻪ، ﺑﺮای ارﺳﺎل ﻧﻈﺮات . ﻣﺮاﺟﻌﻪ ﻧﻤﺎﯾﯿﺪjquery و ﺑﻪ ﺑﺨﺶ اﻣﻮزشhttp://blog.monavarian.ir وﺑﻼگ http://blog.monavarian.ir ﻣﺤﺴﻦ ﻣﻨﻮرﯾﺎن ٨٨ اﺳﻔﻨﺪ
: ﻊﺑﺎﻨﻣ http://blog.monavarian.ir http://w3schools.com http://jquery.com http://www.learningjquery.com http://snook.ca/archives/javascript/jquery_plugin http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial http://www.myinkblog.com/2009/08/10/learn-how-to-create-your-own-jquery-plugin
47 ﻪﺤﻔﺻ