Page 1

‫آﻣﻮزش ‪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 ‫ﻪﺤﻔﺻ‬

Jquery  

Jquery tutorial

Read more
Read more
Similar to
Popular now
Just for you