«ث ب ذسا س ثرك س طثب «يچ يؿ س اى جبيس اظ قش ذ ززاضى و س ب و ذسا ا ضا آ ظ زاز اؾز. ؾ ض ی ثمط آي ی 282 آ ظ ؾطيغ آؾب jquery يؿ س : ؾيس

النسخ

1 «ث ب ذسا س ثرك س طثب «يچ يؿ س اى جبيس اظ قش ذ ززاضى و س ب و ذسا ا ضا آ ظ زاز اؾز. ؾ ض ی ثمط آي ی 282 آ ظ ؾطيغ آؾب jquery يؿ س : ؾيس ح سضظب حؿي يب ضا سی ثالي: ثؿبيز بقط: ثؿبيز : رایانامو: ravand@chmail.ir سبضيد ا شكبضا : 1392/9/21 ویرایش دوم: 1393/3/25

2 «ف طؾز ؽب ت» مس...4 سؼبضيف... 4 قش ثط ب زض 5...jquery افىز ب زض 7...jquery 7... Hide() 9...Toggle() 11...slideUp() 11...slideToggle() slidedown() fadein() fadein slideup ط ز ثب Fadeout() 14...fadeTo() Animate() Queue() ض يساز Mouseover() Mouseout() 21...Mousedown() 21...Mousemove() 22...Hover() One() Dblclick() Submit() 25...Keydown() Keyup() Bind() 30...jquery زض Html 30...Remove() زؾش ضار 30...css 32...Attr() 34...appendTo() Text() Val() اػشجبضؾ دي فط ثب خي و ئطی Empty() 41...Get() 42...toggleClass() addclass() 44...append() Prepend() prependto() Wrap() 49...replaceWith()

3 ی خي ب replaceall() insertafter() after() Prev() ثسؾز آ ضز ػطض اضسفبع...53 شس بی 54...Traversing Eq() Find() 56...Parent() Children() كرص وطز فطظ سا...59 شس بی شفطل Each() 62...Index() 62...setInterval() settimeout() چ س سب ثط ب ی وبضثطزی jquery.trim() ؾبذز 65...modal ؾبذز يه اؾاليس ق سصب يط) show )slide...69 ؾبذز يه اؾاليس ق سصب يط) show )slide ثب چ س ع افىز...71 چ س ثب ثب و ه دال ي و ئطی طز وطز div ثب خي و ئطی وكيس ا ساذش سغييط ا ساظ ی div ثب ثطضؾي Resizable() ع ط ض ط...83 ايدىؽ) Ajax ( زض 84...jquery Load() $.post() اضؾب ش ث زيشبثيؽ $.getJSON() $.Ajax() اضؾب مبزيط چه ثبوؽ ث ص ضر آضاي ؾبذز فط ي ثب ايدىؽ زض...95 jquery آد ز ػىؽ ثب و ه ايدىؽ زض...98 jquery بثغ وشبة

4 مس : jquery يىي اظ وشبثرب بی خب ا اؾىطيذز اؾز. و وبض ضا ثطای ب ذي ي ؾبز وطز ث ؼ ضی و ثطای قش يه ثط ب ثب ذ ز خب ا اؾىطيذز ا ىب زاض و ب دج ض ثكي ظيبز وس يؿي و ي ي خي و ئطی وبض ب ضا ضاحز سط يى. ثال ى ثطای قش يه ثط ب ثب خب ا اؾىطيذز دج ض ثكي 30 ذػ وس ث يؿي ي ثب خي و ئطی اي ثط ب ضا ثال زض 5 ذػ ي يؿي. ا جش وس يؿي زض خي و ئطی ؿجز ث ذ ز خب ا اؾىطيذز ذي ي ؾبز سط لبث ف سط اؾز. ديف يبظ ب ثطای يبز يطی html : jquery ا javascript css ق ب لج اظ يبز يطی خي و ئطی خب ا اؾىطيذز ث س ثبقيس ؽ ئ ب فك سط ذ ا يس ث ز. ي ظيبز ظط ضی يؿز. يػ ي بی : jquery Jquery ؿجز ث ذ ز خب ا اؾىطيذز ثب ط ض ط ب ؾبظ بض سط. زاضای افع بی in( )plug ظيبزی ي ثبقس. ؾ ز والي ز ثىبض يط. وس يؿي ؾبز ای زاض. ايدبز شحطن ؾبظی. دكشيجب ي اظ ايدىؽ. ؾ ضؼ ثبظ ث ز اظ زي ط يػ ي بی خي و ئطی اؾز. سؼبضيف: ؾ ز والي ز)ؾ ز وبضثط( چيؿز يؼ ي وبضثط زض وب ذي سط ذ ز ث ثط ب ی ق ب زؾشطؾي زاض. ثال وس بی jquery html ض يك ث ف زؾشطؾي زاقز. ي وس بی php و ؾ ز ؾط ض ؿز ضا يك ث ف زؾشطؾي ديسا وطز. ق ب وسی ضا و ثب php قشي ض ی ؾبيز صاقشي وؿي يش ث ف زؾشطؾي ديسا و خع اي ى د ظ زؾشطؾي ث بؾز ق ب ض زاقش ثبق. شس) method ( چيؿز شس زاذ فمػ والؼ اؾز. ب زض خي و ئطی ثب والؼ قي ث آ ؼ ب و زض php ظثب بی زي ط ؿش س ؾط وبض ساضي. ث ى آ چيعی و زض سؼطيف شس ب ا يز زاضز فطق ا ب ثب س اثغ ؿز زض اي اؾز و يك اظ شس ب ث ص ضر ظ ديط اؾشفبز وطز. يؼ ي ثال ث اي قى : $(".ravandi").eq(1).css({border:"3px #CCCCCC solid").hide(3000); يؼ ي اي ى ط وس اظ شس ب و زض اي دب eq() hide() css() ؿش ثؼس اظ اي ى وبضقب ضا ض ی ػ بصط ا دب زاز ب ضا return يى سب ثؼسی ثش ثبظ ثس يبظ ث ا شربة دسز ض ی ا ب يه وبض زي ا دب ثس. دال ي in( )plug چيؿز ذي ي اظ قطوز ب ثؼس اظ سسي ثطای اي ى ا ىب بر ثط ب بق ثيكشط ثك يب يه ؾطی ا ىب بر ض اظبف ثط ثط ب ای و اظ لج قش ضا ثطای ثط ب ی ضز ظطق آ بز يى و فطز ثب صت وطز يب اظبف وطز ث ثط ب ی لج ي يش اظ اي ا ىب بر خسيس اؾشفبز و. ثطای وبض ثب خي و ئطی ث ؾبيز ثط يس فبي jquery ضا زا ز و يس.

5 قش ثط ب زض : jquery وس بی خي و ئطی// فبي ثبال ضا ثب ب ثال test.htm شذيط و يس. س ظيحبر : ثطای ذ ا س <--وس بيي و اظ وس بی خي و ئطی فط ب ي يط س--!> $('document').ready(function(){ $("button").click(function () { ;("ؾال ضا سی") alert و يس< button > < button />و يه قس وس ب طا ثب ثبض صاضی صفح اظ شس ready() اؾشفبز وطزي. ثب و يه ض ی زو شس click() زؾش ض ضا زضيبفز وطز زؾش ضار زاذ آ اخطا ي ق س زض اي دب زؾش ض ديب ضز ظط ضا زض يه د دط بيف ي ز س. زض اي وشبة ثب شس بی ثيكشطی آق ب ذ ا ي قس. ي س ا يس اظ class id ثطای اضسجبغ زو شس اؾشفبز و يس: alert $('document').ready(function(){ $("#btn").click(function () { ;("ؾال ضا سی") alert <button و يس<" id="btn < button />و يه

6 زضؾز ػي. css ا ثر ا يس اظ class اؾشفبز و يس ث خبی ػال ز # اظ مؽ اؾشفبز و يس. و و زض ؼ آ ظ ثب ض بی زي آق ب ي ق يس. ث خبی ذػ ظيط : ي س ا يس اظ ذػ ظيط اؾشفبز و يس و ؾطيغ سط ػ يى س: $('document').ready(function(){ $(window).load(function() { $(function () { يب حشي : ض ظيط لشي صفح ث ؼ ض وب ثبض عاضی قس ثبػث ي ق ز سبثغ اخطا ق ز. يب اؾشفبز اظ يه سبثغ ث ص ضر ظيط: $(document).ready() function tabe(){ وس بی زاذ سبثغ زو ضا ث ض ظيط ايدبز يى ي و ثب و يه ض ی زو سبثغ فؼب ق ز وس بی زاذ سبثغ اخطا ق ز: و اي ض س ی ذ ز خب ا اؾىطيذز ثىبض ي ض ز. ثط ب ی ظيط ضا ا شحب و يس ثجي يس چ اسفبلي ي افشس <input type="button" "اضؾب "= value onclick="tabe()"/> ;("ا ي ديب ") alert حشي يك وس بی خي و ئطی ض زض لؿ ز $('document').ready(function(){ ;("ثبض صاضی وب صفح ") alert ;("ز ي ديب ") alert قز. <button و يس<" id="btn < button />و يه $("#btn").click(function () { ;("ؾال ضا سی") alert

7 اي ؽ ضی زي ط اظ ا ض ب يبظی يؿز اؾشفبز و ي. Hide(), Show(), Toggle(), slideup(),slidetoggle(), slidedown(),fadein(),slideup(),fadeout(),fadeto(),animate(), slidetoggle() : افىز ب زض jquery hide() : رفي وطز ش. وبض رفي وطز ش ضا ؾبذشبض: $('document').ready(function(){ $("#btn").click(function () { $("#matn").hide(); <button و يس<" id="btn < button />و يه شس hide() )ث ؼ بی رفي( ا دب يس. دبضا شط بيي و ي يطز:. speed,easing,callback <div قش قس <" id="matn < div /> ش $(selector).hide(speed,easing,callback) : Speed و ؾ مساض "fast" "slow" milliseconds ضا ي يطز. ثب ثطای : milliseconds ا ط شس ضا ث اي قى زض ثط ب ی ثبال ث يؿي : ش سر 1000 ي ي ثب ي ؼ ي وكيس و ح ق ز. $("#matn").hide(1000); "slow" ث ؼ بی آ ؿش. "fast" ث ؼ بی ؾطيغ ؾطيغ رفي ي ق ز. "linear" دبضا شط :easing مبزيط "swing" ضا ي يطز.. "swing" : ث ؼ بی ؾب سبة ػي ضلص. ق ب لشي اظ اؾشفبز يى ي ػي حب ز ا ي يك ايدبز ي ق ز. "linear" ث ي قى اؾز ي ع شحطن ؾبظيك فطق زاض.

8 : Callback وبضی و ثؼس اظ وب قس ػ يبر شس hide() ا دب يس س. $("p").hide(1000,function(){ ;("اي دبضا طاف رفي قس") alert وبضی و ثؼس اظ وب قس ػ يبر يؼ ي وب قس وبض رفي ؾبظی ا دب قس زاز ديغب ث ز. <script type="text/javascript" src="jquery.min.js"> $('document').ready(function(){ $("button").click(function() { var mo = "php"; $("." + mo).hide(); و يس< button > < button />و يه <div < div />آ ظ<" class="php زاز مساض شغييط ث خبی ؾ ىش ض: حبال ثطای بيف ش اظ شس show() اؾشفبز يى ي : $('document').ready(function(){ $("#btn").click(function () { $("#matn").show(); <style type="text/css"> #matn{ display:none; </style> <button و يس<" id="btn < button />و يه <div قش قس <" id="matn < div /> ش

9 ثب و يه ض ی زو شس و يه فطاذ ا ي يك ثط ب ی زاذ آ اخطا يك. زض لؿ ز css ب div ضا ثب اؾشفبز اظ زؾش ض display:none; ث ص ضر رفي زضآ ضزي. حبال ثب اخطای شس show() ش ب اظ حب ز رفي ذبضج يك. حب ز بی : display ش ث ص ضر افمي زض يبز: ش رفي يك : ش رفي قس بيف زاز يك : شس show() دبضا شط بی hide() ض ي يط. display:inline; display:none; display:block; : toggle() دبضا شط بی اي شس ث شس hide() اؾز. $(document).ready(function() { $("button").click(function () { $("p").toggle("slow"); و يس< button > < button />و يه ح سضظب حؿي يب ضا سی< p > < p />ؾيس <p> ثب و يه ض ی زو ش ث ص ضر آ ؿش رفي ثب و يه ز ثبض ض ی زو ش ث ص ضر آ ؿش آقىبض ي ق ز. حبال ير اي ثط ب ای ث يؿي و ثب و يه ض ی زو صفح ی ض يي ح ثك ثب و يه ز ثبض صفح ی ض يي بيف زاز ثك ا ث ص ضر افىز: <style type="text/css"> #up { position:absolute; z-index:-1; background-color: #28DD39; height:100px; width:100px;

10 #down { position:absolute; z-index:-2; background-color: #dbbff7; height:100px; width:100px; </style> <script src="jquery.js" type="text/javascript"> $('document').ready(function(){ $("button").click(function () { $("#up").toggle({"left" : "200px" و يس< button > < button />و يه <div ا <" id="up < div /> ش <div ز <" id="down < div /> ش position:absolute; z-index:1; ب ثب اؾشفبز اظ زؾش ضار ظيط الي ايدبز وطزي : ثط ب ی ظيط ثب و يه ض ی زو zaher فؼب ي ق ز. ىؼت بيف زاز ي ق ز ثب و يه ز ثبض ض ی <style type="text/css">.mokaab { display:none; background-color:#d3b2f5; height:200px; width:200px; </style> <script src="jquery.js" type="text/javascript"> $('document').ready(function () { $("button").toggle(zaher,makhfi); زو سبثغ makhfi فؼب ي ق ز.

11 function zaher() { $(".mokaab").show(); function makhfi() { $(".mokaab").hide(); و يس< button > < button />و يه <div class="mokaab"></div> $(document).ready(function() { $('#clickme').click(function() { $('#aks').slideup('slow'); <div id="clickme"> و يه و يس : slideup() </div> <img id="aks" src="header.jpg" width="100" height="123" /> ثب و يه ض ی ش ػىؽ ث آضا ي رفي ي ق ز. سص يط ث دطز وطوط ث آضا ي ث ثبال وكيس يك زض بيز رفي يك. دبضا شط بی اي شس ث شس hide() اؾز. $(document).ready(function() { $('#clickme').click(function() { $('#aks').slidetoggle('slow'); : slidetoggle()

12 <div id="clickme"> و يه و يس </div> <img id="aks" src="header.jpg" width="100" height="123" /> ثب و يه ض ی ش ػىؽ ث دطز وطوط ظب ط ي ق ز. ثب و يه ز ثبض ض ی ش ػىؽ ث دطز <style type="text/css">.mokaab { border: 2px solid #c5b5ec; background-color: #e2d9f9; width: 100px; height: 100px; text-align:center; display:none; </style> $(document).ready(function () { $(".matn").click(function () { $(".mokaab").slidedown("slow"); <div و يس<" class="matn < div />و يه <div < div />ضا سی<" class="mokaab وطوط ث ؾ ز ثبال يط ز زض بيز رفي ي ق ز. دبضا شط بی اي شس ث شس hide() اؾز. : slidedown() ثب و يه ض ی ش ىؼت اظ ثبال ث دبيي بيف زاز ي ق ز. ث ذبؼط slow() حطوز آضا سط اؾز. دبضا شط بی اي شس ث شس hide() اؾز.

13 $(document).ready(function() { $('#clickme').click(function() { $("#aks").fadein("slow"); <style type="text/css"> #aks{ display:none; </style> <div id="clickme"> و يه و يس </div> <img id="aks" src="header.jpg" width="100" height="123" /> display:none; رفي اؾز لشي و ض ی ش و يه ي ق ز شس و يه اخطا قس شس : fadein() ػىؽ ثب زؾش ض fadein() و زاذ شس و يه ؿز اخطا ي ق ز ث آ ؿش ي ثب اؾشفبز اظ اضسجبغ #aks ثب س ػىؽ سص يط ضا بيف ي ز س. دبضا شط بی اي شس ث شس hide() اؾز. ط ز ثب : $(document).ready(function() { $('#pic').slideup().fadein(); <div id="pic"><img src="aks.jpg"></div> fadein slideup

14 $(document).ready(function() { $('#clickme').click(function() { $("#aks").fadeout("slow"); <div id="clickme"> و يه و يس : fadeout() </div> <img id="aks" src="header.jpg" width="100" height="123" /> ثب و يه ض ی ش ػىؽ ح ي ق ز.دبضا شط بی اي شس ث شس hide() اؾز. $(document).ready(function() { $("p:first").click(function () { $(this).fadeto("slow", 0.33); و و و ط ي ق ز< p > < p /> ش ز < p > < p />دبضا طاف :fadeto() زؾش ض p:first ث دبضا طاف ا اقبض زاضز. زؾش ض this ي يس ي ػ صطی و زض ذػ لج ا شربة قس اؾز. يؼ ي يش ؿشي ث خبی this ث ي $(this).fadeto(1500, 0.3); "p:first". ق بض ی 0.33 مساض سبضی ؿز. اظ زؾش ض ظيط ي س ا يس اؾشفبز و يس: دبضا شط بی اي شس ث شس hide() اؾز.

15 $(document).ready(function() { $("#dokme").click(function(){ $("#matn").animate({ width: "80%", opacity: 0.5, marginleft: "0.5px", fontsize: "4em",, 1500 ); <button و يس<" id="dokme < button />و يه <div ح سضظب حؿي يب ضا سی<" id="matn < div />ؾيس ػطض ث ص ضر زضصس اؾز,"80%" width: مساض قفبفيز سبضی,0.5 opacity: : Animate() animate() ب ؽ ضی و اظ اؾ ف ديساؾز ثطای شحطن ؾبظی ث وبض يط. مساض فبص اظ ؾ ز چخ ضا ك يس "0.5px", marginleft: ا ساظ ی ف ز "4em", fontsize: مساض ؾطػز حطوز ش ؿز 1500 <style type="text/css"> #mokaab{ width:50px; height:50px; background-color:#e7e3f6; </style> $(document).ready(function () { $("p").click(function(){ $("#mokaab").animate({height:"120px"

16 ثب و يه ض ی ش اضسفبع ىؼت 120 ديىؿ يك. ؾبذشبض: دبضا شط: < p /> ش < p > <div id="mokaab"></div> (selector).animate({styles,speed,easing,callback) : Styles اي دبضا شط ظط ضی اؾز. سؼطيف يه يب ثيكشط ذص صيز يب مساض css ثطای شحطن ؾبظی. Milliseconds "slow" "fast" : Speed اي دبضا شط اذشيبضی اؾز. كرص وطز ؾطػز شحطن ؾبظی. مبزيطی و ى اؾز ث يطز: : Easing سؼطيف ؾطػز ػ صط زض مبغ رش ف شحطن ؾبظی.اي دبضا شط اذشيبضی اؾز. مساض ديكفطض "swing" اؾز. مبزيطی و ى اؾز ث يطز: "swing" حطوز ث آ ؿش ي زض اثشسا ا ش ب ا ب ؾطيغ سط زض ػ ك. "linear" زض يه ؾطػز ثبثز حطوز ي و س. : Callback اي دبضا شط اذشيبضی اؾز. يه سبثغ و ثؼس اظ وب قس شحطن ؾبظی اخطا ي ق ز. (selector).animate({styles,{options) ؾبذشبض زي ط: دبضا شط ب: : Styles اي دبضا شط ظط ضی اؾز. سؼطيف يه يب ثيكشط ذص صيز يب مساض css ثطای شحطن ؾبظی. : Options اي دبضا شط اذشيبضی اؾز. سؼطيف عي بی اظبفي ثطای شحطن ؾبظی. مبزيطی و ى اؾز ث يطز: speed easing callback step queue specialeasing يه ثب زي ط اظ زاز اؾشبي ث شس animate() :

17 <script src="jquery.js" type="text/javascript"> $(document).ready(function () { $('.box').animate({ "left" : "100px", 1000); $('.box').animate({ "left" : "20px", 500); $('.box').animate({ "left" : "50px", 500); <div class="box" style="height: 30px; width: 30px; background-color: #89BC38; position: absolute;"></div> ثب و يه ض ی زو صفح اظ ؾ ز چخ ثبظ ق ز ثب و يه ز ثبض ثؿش ق ز: <style type="text/css">.slide{ display:none; border:1px navy solid; background-color:#dad7f8; height:250px; width:250px; text-align:center; </style> <script src="jquery.js" type="text/javascript"> $('document').ready(function () { $("button").click(function(){ $(".slide").animate({ width: 'toggle' و يس< button > < button />و يه <div class="slide"> ضز ظط< h1 > < h1 /> ش </div>

18 ض زي ط: ثب و يه ض ی زو ی ا اظ ثبال ث دبيي ظب ط ي ق ز ثب و يه ض ی زو ی ز اظ دبيي ثب ثبال ي ض ز رفي ي ق ز. <style type="text/css">.slide{ display:none; border:1px navy solid; background-color:#dad7f8; height:250px; width:250px; text-align:center; </style> <script src="jquery.js" type="text/javascript"> $('document').ready(function () { $("#btn1").click(function(){ $(".slide").animate({height:'show' $("#btn2").click(function(){ $(".slide").animate({height:'hide' <button و يس<" id="btn1 </ button><br />و يه <button و يس<" id="btn2 < button />و يه <div class="slide"> ضز ظط< h1 > < h1 /> ش </div> : Queue() يس : ث ؼ بی زض صف ايؿشبز اؾز. زض وس ظيط صجط يى سب صفح وب ال ثبض صاضی ثك. ثؼس ديب $(selector).queue(queuename) ؾبذشبض: : queuename يه ضقش قب ب صفز ث ص ضر ديف فطض "fx" اؾز.

19 ض يساز: $(document).ready(function() { $('#pic').queue(function() { ;('صفح وب ال ثبض صاضی قس') alert <div id="pic"><img src="aks.jpg"></div> Event )ض يساز( چيؿز ض يساز ث ذبؼط فؼب يز وبضثط يب لطاض طفش صفح ای زض ط ض ط ث ل ع ي دي سز. ثال وبضثط ب ؼ ضا و يه يى س يب حطوز يس س يب زو ای اظ صفح و يس ضا فكبض يس س. زض اي وشبة ثب چ س اظ ض يساز ب آق ب ي ق يس ث ػ ا ثب چ س ض يساز قب اضز ظيط اؾز: click(),keypress(),submit(),load(),dblclick(),keydown(),change(),resize(),mouseenter(), keyup(),focus(),scroll(),mouseleave(),blur(),unload() : Mouseover() ؾبذشبض ب: دبضا شط: ق ز. $(selector).mouseover() $(selector).mouseover(function){ :Function لشي ب ؼ ض ی ػ صط لطاض ي يطز ض يساز اخطا ي ق ز زؾش ضار زاذ آو الز اخطا ي <style type="text/css"> #mokaab{ width:50px; height:50px; </style> $(document).ready(function () { $('p').mouseover(function(){ $('#mokaab').css( "background", "#e7e3f6" );

20 <div id="mokaab"> < p />ضا سی< p > </div> $(selector).mouseout() لشي ب ؼ يط ض ی ش ىؼت ض ي بيف زاز ي ق ز. : Mouseout() ؾبذشبض ب: $(selector).mouseout(function){ دبضا شط: :Function لشي ب ؼ اظ ض ی ػ صط ثطزاقش ي ق ز ض يساز اخطا ي ق ز زؾش ضار زاذ آو الز اخطا <style type="text/css"> #mokaab{ width:50px; height:50px; background-color:#e7e3f6; </style> $(document).ready(function () { $('p').mouseout(function(){ $('#mokaab').css( "background", "#FFFFFF" ); <div id="mokaab"> < p />ضا سی< p > </div> ي ق ز. لشي ب ؼ اظ ض ی ش ثطزاقش يك ىؼت ث ض ؾفيس سغييط ض يس.

21 Mousedown() : ثب فكبض ب ؼ ض يساز اخطا ي ق ز زؾش ضار زاذ آو الز اخطا ي ق ز. $(selector).mousedown() $(selector).mousedown(function){ $(document).ready(function () { $('p').mousedown(function() { ;('ثب فكبض و يه ب ؼ ػ يى س') alert < p />ضا سی< p > $(selector).mousemove(function){ Mousemove() : ثب حطوز ب ؼ اظ ض ی ػ صط ػ يى س: دبضا شط: :Function <style type="text/css"> #mokaab{ width:50px; height:50px; background-color:#e7e3f6; </style> $(document).ready(function () { $(document).mousemove(function(event){ $("#mokaab").text(event.pagex + "," + event.pagey); <div id="mokaab"></div>

22 ثب حطوز ب ؼ رشصبر ب ؼ زض ىؼت بيف زاز ي ق ز. : Hover() ؾبذشبض: $(selector).hover(infunction,outfunction) دبضا شط ب: : infunction اي دبضا شط ظط ضی اؾز.سؼطيف يه سبثغ اي سبثغ ظ ب ي اخطا ي ق ز و ض يساز ضز ظط ثب اضز قس ب ؼ ض ی ػ صط كرص قس ضخ ز س. : outfunction اي دبضا شط اذشيبضی اؾز.سؼطيف يه سبثغ اي سبثغ ظ ب ي اخطا ي ق ز و ض يساز ضز ظط ثب ذبضج قس ب ؼ اظ ض ی ػ صط كرص قس قس ضخ ز س. <script src="jquery.js" type="text/javascript"> $(function () { $("p").hover(function () { $("p").css("color","blue"); ضز ظط< p><b > < b></p /> ش $(document).ready(function(){ $("p").hover(function(){ $("p").css("background-color","yellow");,function(){ $("p").css("background-color","violet"); < p />ضا سی< p >

23 one() : ض يساز فمػ يه ثبض اسفبق ي افشس: ؾبذشبض: دبضا شط ب: $(selector).one(event,data,function) click اي دبضا شط ظط ضی اؾز. و ي س ا يس يه ع ض يساز ضا سؼطيف و يس ثال ض يساز : Event dblclick و... : Function اي دبضا شط ظط ضی اؾز. لشي ض يساز اسفبق ي افشس سبثغ اخطا ي ق ز. فمػ ثب يه ثبض و يه ظ ي ی div ث ض آثي ي ق ز. $(document).ready(function() { $("div").one('click', function () { $(this).css({ border:"1px #CCCCCC solid", "background-color":"blue" ا < div > < div />خس ز < div > < div />خس ؾ < div > < div />خس :dblclick ؾبذشبض: لشي ض يساز زاث و يه ضخ ي ز س و ض ی ػ صط ا شربة قس زاث و يه ق ز. $(selector).dblclick() $(document).ready(function () { $("p").dblclick(); p> زاث و يه') ondblclick="alert ')">dblclick</p>

24 $(selector).dblclick(function) زض اي دب يه سبثغ ضا اظبف وطزي. دبضا شط: : function اي دبضا شط اذشيبضی اؾز. سبثغ لشي اخطا ي ق ز و ض يساز زاث و يه ضخ ز س. $(document).ready(function () { $("p").dblclick( function () { ;("زاث و يه قس") alert و يه و يس< p > < p />زاث $(selector).submit() $(selector).submit(function) ثبيس حش ب ض ی ش زاث و يه ق ز سب ديغب ظب ط ق ز. Submit() : اي ض يساز لشي ضخ ي ز س و ثب اضؾب فط افمز يك. ؾبذشبض بی شس : دبضا شط: اي دبضا شط اذشيبضی اؾز.سبثغ لشي اخطا ي ق ز و ض يساز submit اسفبق ثي فشس. $(document).ready(function() { $("#form-name").submit(function(e){ alert("submitted"); <form id="form-name" method="get" action="get.php"> <input type="text" name="name" /> /> "اضؾب "= value <input type="submit" </form> : Function

25 <script type="text/javascript" src="jquery.min.js"> $(document).ready(function(){ $("form").submit(function(){ ;("اضؾب قس") alert $("button").click(function(){ $("form").submit(); <form> name:<input type="text" name="firstname"> </form> <button>send</button> يه ثب زي : : Keydown() يى س. ثب فكبض زو ػ ي و س. يؼ ي لشي زو دبيي ي آيس ظ ثبال يب س شس ػ $(document).keydown(function(e){ if (e.keycode == 37) { ;( "زو ی ؾ ز چخ" alert( ثطای اي ى زو ی ضز ظط ق ب لشي و يه قس ثط ب ديغب ثس س ثبيس ق بض ی ط زو ضا ث خبی ػسز 37 لطاض ثس يس. ثال ق بض ی 38 ثطای زو ی ثباليي ىب ب. ق بض ی 39 ثطای ؾ ز ضاؾشي. ق بض ی 40 ثطای زو ی دبيي ي ىب ب... ؾبذشبض: ثطای ا شربة ػ صط

26 $(selector).keydown() $(selector).keydown(function) اظبف وطز يه سبثغ ث ض يساز. keydown دبضا شط: : Function سؼطيف يه سبثؼي و اخطا ي ق ز لشي و ض يساز keydown ضخ ثس س. $(document).keydown(function(e){ switch(e.which) { case 37: // left alert("left"); break; case 38: // up alert("up"); break; case 39: // right alert("right"); break; case 40: // down alert("down"); break;.زض ص ضسي و يچ وسا يه اظ زو بی ىب ب جبقس // default: return;. html تا آخر سند <doctype< اشاره دارد یعنی از html در برنامو ی باال بو اول تا آخر سند Document <script type="text/javascript" src="jquery.min.js"> $(document).ready(function(){ $(".target").keydown(function(){ $(this).css("background","red"); $("button").click(function(){ $(".target").keydown();

27 <input class="target" type="text"> و يس< button > < button />و يه : Keyup() ؾ ز ثبال ثط ز سب ػ و س. : Bind() ثؼس اظ فكبض زو ػ يى س ثبيس حش ب زؾز ذ ز ضا اظ ض ی زو ثطزاضيس يؼ ي زو ث ض يساز و يه ضا ث ػ صط <p> اظبف يى س. ثب ثبض صاضی وب صفح ديغب ظب ط ي ق ز: دبضا شط ب ؾبذشبض آ ث دبضا شط ب ؾبذشبض شس keydown() اؾز. $(document).ready(function(){ $("p").bind("click",function(){ ;("و يه قس") alert و يس< p > < p />و يه $(document).ready(function(){ $(window).bind('load', function () { ;("د دط ی وب ال ثبض صاضی قس") alert

28 $(document).ready(function () { $(document).bind("click", function(e){ var str = "( " + e.pagex + ", " + e.pagey + " )"; $("span").text(str); <span></span> Document و ؾ س html ضا كرص يى س. ثطای ي زض و صفح ا ط و يه ثى يس رشصبر y x ث ق ب بيف زاز ذ ا س قس. ؾبذشبض: $(selector).bind(event,data,function,map) دبضا شط ب : : Event كرص وطز يه يب چ س ض يساز. ثال ض يساز و يه. اي دبضا شط ظط ضی اؾز. ثي ط ض يساز يه فبص لطاض ز يس. ثب ي ثطای چ س ض يساز: $(document).ready(function () { $("p").bind("click mouseout", function() { ;( ".ض يساز ػ وطز" alert( < p /> ش < p > لشي ض ی دبضا طاف و يه ق ز ديب ظب ط ي ق ز لشي ب ؼ اظ ض ی دبضا طاف ثطزاقش ق ز ض يساز ػ يى س ديب ظب ط ي ق ز. : Data اي دبضا شط اذشيبضی اؾز. بيف ديب طا ثب اخطای يه سبثغ.

29 function handlername(e) { alert(e.data.msg); $(document).ready(function(){ $("p").bind("click", {msg: ( handlername,{"ديب " < p />و يه< p > : Function سؼطيف سبثؼي و ثؼس اظ ضخ زاز ض يساز اخطا ي ق ز. : Map قب يه يب ثيكشط ض يساز اظبف قس ث ػ صط اؾز. سبثغ لشي اخطا ي ق ز و ض يسازی اسفبق ثي فشس. <script type="text/javascript" src="jquery.min.js"> $(document).ready(function(){ $("img").bind({ click:function(){ $("p").hide();, mouseover:function(){ $("span").css("color","#374fff"); دبضا طاف حصف ي ق ز< p > < p />اي ش ض ي ي ق ز< span > < span />اي <img src="aks.jpg">

30 : jquery زض Html ؼطفي شس بيي زض ضاثؽ ثب css html text(),html(),attr(),val(),remove(),append(),prepend(),after(),before(),addclass(), removeclass(),toggleclass(),css(),width(),height(),... ث ؼ بی ثطزاقش اؾز. و ب زض ثط ب ی ظيط ي وبض ضا يى ي ثب و يه ثب و ه $(document).ready(function() { $('buttom').click(function() { $('p').remove(); و يس< button > < button />و يه چ س ثب : :remove() ي زؾش ض دبضا طاف اظ اي دب ثطزاقش يك. حصف ي ق ز< p > < p /> ش $(selector).remove() $('document').ready(function(){ $(document.body).css("background", "green"); ظ ي ضا زض ظط ي يط سص يط ظ ي ؾجع ض ي ق ز.يؼ ي لؿ ز: ؾبذشبض: زؾش ضار : css ض ظ ي : document.body

31 $('document').ready(function(){ $('.matn').css("color", "red"); <div < div /> ش <" class="matn زاز اؾشبي ث : div ش ث ض لط ع ي ق ز. $('document').ready(function(){ $('.matn').css("border","3px solid red"); <div < div /> ش <" class="matn $('.matn').css("font-style", "italic"); $('.matn').css("background-color", "#bbbbff"); $('.matn').css("text-decoration", "line-through"); css زض jquery اؾشفبز و يس. زاز : border ض بی زي : ث س ثبقيس ي س ا يس ث ض ثبال اظ وس بی $('document').ready(function(){ $('.matn').css({backgroundcolor: 'yellow',border:'3px solid red', fontweight: 'bold') ا ط css زاز چ س اؾشبي :

32 <div < div /> ش <" class="matn ط ذبصيشي اظ ذبصيز زي ط ثب يه, اظ خسا قس زاذ آو الز{ لطاض طفش اؾز. $(document).ready(function(){ $("#matn,span,p,.matn").css("border","3px solid red"); < p />ضا سی< p > زاز يه اؾشبي ث چ س ػ صط: ثي ط وسا يه يط يصاضي : <div والؼ<" id="matn < div /> ش <div آی زی<" class="matn < div /> ش آذط< span > < span /> ش #matn,span,p,.matn ذص صيبر مبزيط ػ بصط ا شربة قس ضا ثط ي طزا س. $(document).ready(function () { $("p").click(function(){ $("img").attr({ src: "/testi.gif" < p /> ش < p > <img src=""> : Attr()

33 ثب و يه ض ی ش آزضؼ ػىؽ ث س ػىؽ زاز يك. حبال ا ير ا يس و لج اظ و يه ض ی ش ا ظطثسض لط ع ض زض ط ض ط اوؿذ ضض زي ط ط ض ط ب بيف زاز ك ي س ا يس اظ زؾش ض display:none; اؾشفبز و يس. ثؼس اظ و يه ض ی ش display:block; ثك. سص يط بيف زاز ثك. ؾبذشبض بی شس: ثط طزا س مساض يػ ي: س ظي يػ ي مساض: س ظي يػ ي مساض اؾشفبز قس ی يه سبثغ: س ظي يػ ي ب مبزيط رش ف: $(selector).attr(attribute) $(selector).attr(attribute,value) $(selector).attr(attribute,function(index,currentvalue)) $(selector).attr({attribute:value, attribute:value,...) دبضا شط بی : attr width ذص صيز يػ ي: زض اي دب كرص ی ب يه صفز: ثال : Attribute : Value كرص ی مساض يه صفز: 100 Function(index,currentvalue) : سؼيي يه سبثغ و مساض يػ ي يه صفز ضا ثط ي طزا س. $(document).ready(function () { $("p").click(function(){ $("img").attr({width:"100" < p /> ش < p > <img src="1.jpg" width="50"> : Index زضيبفز لؼيز قبذص ػ صط زض د ػ. : Currentvalue زضيبفز مساض خبضی ػ صط ا شربة قس. يه ثب ثطای Function(index,currentvalue) : <!DOCTYPE HTML> <title>attr</title> <style type="text/css">.p1 { background-color: #FFEEEE;.p2 {

34 background-color: #EEFFEE;.p3 { background-color: #EEEEFF; </style> $(function(){ $( "p" ).attr("class",function(index){ return("p" + (index + 3)); < p />دبضا طاف< p > ثب سغييط ػسز 3 ث اػساز يه سب ؾ. ي س ا يس ط والؾي و ثر ا يس ث دبضا طاف ثس يس. ث خبی class ي س ا يس اظ id اؾشفبز و يس زض لؿ ز اؾشبي ث خبی مؽ اظ # اؾشفبز و يس. : appendto() ؾبذشبض: دبضا شط: مبزيطی ض اظبف يى. $(content).appendto(selector) : Content قب ا چيعی ؿز و لطاض ؿز زض س ضز ظط زض ثرف selector اضز و ي. و ثبيس قب س بی html ثبقس. ق ز. : Selector ػ صطی ضا كرص يى س و لطاض اؾز چيعی و س ؾػ content سؼطيف قس ث آ ػ صط اضز $(document).ready(function(){ $("button").click(function(){ ;(' p>').appendto('.matn />ضا سی< p >')$ و يس< button > < button />و يه <div class="matn"></div>

35 matn ضا زاضز اظبف ي ثب و يه ض ی ش ثب و ه appendto وس < p >ضا سی< p /> ث ق ز. div و والؼ $(document).ready(function(){ $("button").click(function(){ var text = $('p').text(); ('ضا سی' == (text if : Text() ;('ؾال ضا سی') p').text ')$ و يس< button > < button />و يه < p />ضا سی< p > ش زاذ دبضا طاف ضا زاذ شغييط text لطاض زاز زض ذػ ثؼسی قطؼي صاقش قس و ا ط مساض زاذ شغييط ؿب ی ضقش ی ضا سی ثبقس ث خبی دبضا طاف لج ي قش ق ز ؾال ضا سی. ز ؿب ی ثطای مبيؿ ث وبض ي ض ز. ؾبذشبض دبضا شط: ثط طزا س حش ای ش : $(selector).text(content) Selector ػ صط ضز ظط و لطاض اؾز مساض طفش ثك يب مساضی ث ف زاز ثك ضا كرص يى س. $(selector).text(function(index,currentcontent)) : Content قب مساضی اؾز و لطاض اؾز ث ػ صط ضز ظط زاز ق ز. : Index لؼيز قبذص ػ صط زض د ػ ضا ثط ي طزا س. : currentcontent مساض خبضی ػ صط ا شربة قس ضا ثط ي طزا س.

36 $(document).ready(function(){ $("button").click(function(){ $("p").text(function(n){ return n; و يس< button > < button />و يه ا < p > < p />دبضا طاف ز < p > < p />دبضا طاف ؾ < p > < p />دبضا طاف <script src="jquery.js" type="text/javascript"> $(function() { $('#btn').click(function() { var nami = $('#name').val(); alert(nami); <form dir="rtl" method="post"> <input type="text" id="name"/><br> </"اضؾب "= value <input type="button" id="btn" </form> زو ضا و يه و يس ثب و يه ض ی زو ش قش قس بيف زاز : Val() مساضی ض زض سىؿز اضز و يس يك ز. دبضا شط ب:

37 $(selector).val(value) <script src="jquery.js" type="text/javascript"> $(function() { $('#btn').click(function() { ;("ضا سی") name').val #')$ <form dir="rtl" method="post"> <input type="text" id="name"/><br> </"اضؾب "= value <input type="button" id="btn" </form> : Value مساضی و ث ػ صط ا شربة قس زاز ي ق ز. $(selector).val(function(index,currentvalue)) function(index,currentvalue) : ثب اؾشفبز اظ اي سبثغ مساض ػ صط ا شربة قس ثط طزا س ي ق ز. <script src="jquery.min.js" type="text/javascript"> $(function() { $('#btn').click(function() { $("#name").val(function(n,c){ ;"مقدار" + c return <form dir="rtl" method="post"> <input type="text" id="name" قبلی"= value </ br ></"مقدار </"اضؾب "= value <input type="button" id="btn" </form>

38 اػشجبضؾ دي فط ثب خي و ئطی : ي ذ ا ي ثط ب ای ث يؿي زض ص ضسي و ش ي زض سىؿز فط قش كس ثبق اخبظ ی اضؾب فط ض ث ب س س. $(function() { ثب و يه ض ی زو فؼب يك // $('#btn').click(function() { زض حب ز ػبزی مساضی زض اؾذ يؿز // $('span').html(''); مبزيط زاذ سىؿز ض زاذ شغييط يصاض // var nami = $('#name').val(); ا ط مساض ی زاذ شغييط يؿز// if(nami == '') { ش "سىؿز ضا دط و يس" ضا زاذ اؾذ لطاض يس // ;('سىؿز ضا دط و يس') span').html ')$ اي زؾش ض وبضی يى و ثط ب ازا ديسا ى // return false; alert(nami); <form dir="rtl" action="test.php" method="post"> <input type="text" id="name"> <span style="color:#ff0000"></span><br/> </"اضؾب "= value <input type="submit" id="btn" ا ط ش ي زض سىؿز جبق ثؼس اظ اخطای ثط ب ق ب لجال ثؼس اظ زؾش ض </form> false; return يه alert("ravandi"); صاقش ثبقي يچي ث ق ب بيف يس. چ ثط ب سب اي وس ش لف يك. ا ط زض ثط ب ی ثبال ق ب لج اظ alert(nami); يه زؾش ض true; return لطاض ثسيس ثبظ ثط ب ث وبض ذ ز ازا يس. مساض شغييط ضا بيف يس. چ ثط ب زض اي دب ش لف كس. حبال ا ط ق ب زض سىؿز يه زو ی space ضا و يه و يس زو اضؾب ضا ثع يس ديغب في س ضا دط و يس بيف زاز يك. دؽ ثبيس ثب و ه trim() مساض ذب ي ضا ثطضؾي و ي ثب اؾشفبز اظ length ؼ وبضاوشط ضا ثطضؾي و ي.

39 دؽ ث خبی ذػ ('' == if(nami اظ ذػ ظيط اؾشفبز و يس: if ( $("#name").val().trim().length == 0 ) زؾش ض ثبال ز چيع ضا ثطضؾي يى س اي ى ا ط سىؿز ذب ي ثبقس ؼ وبضاوشط ب ؿب ی صفط ثبقس. ىش : ا ط ق ب ثب ثط ب بی ؾ ز والي ز ث خي و ئطی خب ا اؾىطيذز اػشجبضؾ دي و يس فطز يش اي اػشجبضؾ دي ض ز ض ثع. دؽ ق ب ثبيس زض ؾ ز ؾط ض ا ط اظ asp يب php اؾشفبز يى يس يه اػشجبضؾ دي ا دب ثسيس. يه ثب ؾبز ثطای :radio button <script src="jquery.js"> $(document).ready(function(){ $('#btn').click(function() { var radioo=$("input:radio[name='ray']:checked").val(); alert(radioo); ) <form dir="rtl" method="post"> </ br > ظط ق ب زض ضز اي وشبة چيؿز </form> value="1"/> input >ػب ي type="radio" name="ray" value="2"/> input >ذ ة type="radio" name="ray" value="3"/> input > ش ؾػ type="radio" name="ray" value="4"/> input >ظؼيف type="radio" name="ray" <input type="button" "ا شربة"= value id="btn"/> ذػ آثي ض وبض اي و input ی ضا ا شربة و و اظ ع radio ثبق مساض name آ ray ثبق و ا شربة قس ثبق )checked(. مساض ا radio button ضا زاذ شغييط لطاض يس ثب alert بيف يس.

40 يه ثب ثطای ا شربة چه ثبوؽ: function submit_form(){ var checkboxi = $("input:checkbox[name='tedad']:checked").val(); alert(checkboxi); <form dir="rtl"> <input type='checkbox' name='tedad' value='63'> <input type="button" <";() onclick="submit_form "اضؾب "= value </form> ثطػىؽ ثب بی لج ي ث خبی ready() click() اظ submit_form() اؾشفبز وطزي ثطای ي ثبيس زض لؿ ز زو اظ onclick="submit_form();" اؾشفبز و ي. اػشجبضؾ دي : radio button $(document).ready(function(){ $("#btn").click(function(){ if ($("#radioo:checked").length == 0 && $("#radioi:checked").length == 0){ ;('.خ ؿيز ضا ا شربة و يس') ekhtar').html.')$ return false; else{ $('.ekhtar').html(''); <div style="text-align:right;direction:rtl;"> <form action="get.php" dir="rtl" method="post"> </" طز"= value input > طز type="radio" name="radio" id="radioo" </"ظ "= value input >ظ type="radio" name="radio" id="radioi" </"اضؾب "= value <input type="button" id="btn" </form> <span class="ekhtar"></span> </div>

41 ثط ب ی ثبال ي ا ط ؼ مساضی و ث radio زاز قس يؼ ي مساضی و زاذ value ؿز ؿب ی صفط ثبقس.)ز ؿب ی ثطای مبيؿ ثىبض يط ( ديغب ضا بيف ثس. زض غيط اي ص ضر يچي بيف س. ثب زؾش ض return false وبضی وطزي و ثط ب زض ص ضر زاز اذؽبض ازا ديسا ى. $(selector).empty() : empty() ؾبذشبض: ث ؼ بی ذب ي. مساض زاذ ػ صط كرص قس ضا حصف ي و س. ثب و يه ض ی زو < p > ش < p /> اظ ش ذب ي ي ق ز. <script src="jquery.js" type="text/javascript"> $(document).ready(function(){ $("button").click(function () { $("p").empty(); و يس< button > < button />و يه < p /> ش < p > : Get() ؾبذشبض: طفش ب ػ صط. زاضای دبضا شط index ي ثبقس. $(selector).get(index) $('document').ready(function(){ $("*").click(function (e) { e.stoppropagation(); var onsor = $(this).get(0); ;("ض ی" + onsor.tagname + "و يه قس") span:first").text ")$

42 ثب و يه <span> </span> < p />دبضا طاف< p > </ span><br />اؾذ < span > <input type="text"><br/> <img src="btn.gif"> <div style="background:#d6e6ff;width:50px;height:50px;"> <br/> </div> ض ی ط يه اظ ػ بصط صفح ب آ ضا بيف يس س. Get() ب ػ صط ضا ي يطز ث text() زاز آ بيف يس س. span:first ظ ض ا ي span ؿز. <style type="text/css">.rang { background:#dbbff7; </style> $(document).ready(function(){ $("p").click(function () { $(this).toggleclass("rang"); ا < p > < p /> ش ز < p > < p /> ش ؾ < p > < p /> ش : toggleclass() يه خ ضايي ث toggle() ػ يى. ي اي دب وبض ثب class ؿز. ثب و يه ض ی ط دبضا طاف ض ظ ي ی ط دبضا طاف ضا ثب classی و ث ف يس سغييط يس. ثب و يه ز ثبض ض ی دبضا طاف ض ظ ي ث حب ز لج ثط ي طز. $(selector).toggleclass(classname,function(index,currentclass),switch) : Classname اي دبضا شط ظط ضی اؾز ثطای سؼطيف يه يب چ س والؼ ثىبض يط ز. ثطای لطاض زاز ب چ س والؼ ثبيس ثي ط ب والؼ يه فبص ثب زو ی space صفح و يس ايدبز و يس. function(index,currentclass) : اي دبضا شط اذشيبضی اؾز. سؼطيف يه سبثغ و ب يه يب ثيكشط والؼ ضا ثط ي طزا س.

43 : Switch اذشيبضی اؾز. مساض ث ي )Boolean( يؼ ي صفط يه زضؾز بزضؾز. زاز ي ق ز. ا ط مساض true ثبقس والؼ اظبف ي ق ز ا ط false ثبقس والؼ حصف ي ق ز. <script type="text/javascript" src="jquery.min.js"> $(document).ready(function(){ $("#add").click(function(){ $("p").toggleclass("main",true); $("#remove").click(function(){ $("p").toggleclass("main",false); <style type="text/css">.main { font-size:120%; color:red; </style> p> ضز ظط<" class="main < p /> ش <button < button />اظبف <" id="add <button < button />حصف<" id="remove ذص صيز بی والؼ ضا ث دبضا طاف اظبف يى. <style type="text/css">.rang { background:#dbbff7; </style> $(document).ready(function(){ $("p").click(function () { $(this).addclass("rang"); ا < p > < p /> ش : addclass()

44 ز < p > < p /> ش ؾ < p > < p /> ش ث ثط ب ی لج قس ثب اي سفب ر و ثب و يه ز ثبض ض ی دبضا طاف ض ظ ي ا سغييط يى. اال ثب و يه ض ظ ي ی دبضا طاف ث فف يك چ والؼ زض ثرف اؾشبي اي ؽ ضی كرص وطز. ا ث خبی this اظ ذ ز p اؾشفبز و ي ثب و يه ض ی ط وسا اظ دبضا طاف ب )<p></p>( ظ ي ی ی دبضا طاف ب ث ض ث فف يك ي ا ط دبضا شط ب: this ثبق ظ ض اي و : اي دبضا طاف... $(selector).addclass(classname,function(index,oldclass)) Classname يه يب ثيكشط ب والؼ ضا ي س ا س ث يطز. ظط ضی اؾز. <style type="text/css">.rang{ color:blue;.zakhim{ font-weight:bold; </style> <script type="text/javascript" src="jquery.min.js"> $(document).ready(function(){ $("#matn").addclass("rang zakhim"); <span < span /> ح سضظب<" id="matn2 <span < span />ضا سی<" id="matn function(index,currentclass) : اي دبضا شط اذشيبضی اؾز.سؼطيف يه سبثغ و يه يب چ س ب والؼ ضا ثطای اظبف قس ثط ي طزا س. : Index لؼيز قبذص ػ صط ضا ثط ي طزا س. : Currentclass ب والؼ خبضی ػ صط ا شربة قس ضا ثط ي طزا س. : append() ؾبذشبض: دبضا شط ب: افع ز. $(selector).append(content,function(index,html)) : Content اي دبضا شط ظط ضی اؾز. اي دبضا شط ي س ا س قب س بی html ثبقس.

45 مبزيطی و ي س ا س ث يطز قب : ػ بصط html اقيب jquery ػ بصط. Dom $(document).ready(function() { ;("< b />ضا سی< p").append("<b ")$ و ی ضا سی ضا ث ص ضر ظري ث دبضا طاف اظبف يى س. ؾيس ح سضظب حؿي يب < p > <p/> $(document).ready(function() { $(".badi").appendto(".ghabli"); <span < span />ضا سی<" class="badi ثب ي زي ط: <span ؾيس ح سضظب حؿي يب <" class="ghabli </span> دبضا شط زي ط: function(index,html) : اي دبضا شط اذشيبضی اؾز. يه سبثغ اؾز قب مبزيط ظيط: : Index لؼيز قبذص ػ صط ا شربة قس ضا ثط ي طزا س. html : Html خبضی اظ ػ صط ا شربة قس ضا ثط ي طزا س.

46 <script type="text/javascript" src="jquery.min.js"> $(document).ready(function(){ var i = $('li').size() + 1; $("button").click(function(){ $("<li>" + i + "<input type='text'/></li><br/>").appendto('ol'); i++; <ol> <li>1<input type='text' /></li><br/> </ol> < button />اظبف < button > مساض كرص قس زاذ شس ضا لج اظ ػ صط ا شربة قس لطاض ي ز س. زضؾز ثطػىؽ $(selector).prepend(content,function(index,html)) $(document).ready(function(){ ح سضظب< p").prepend("<b ")$ ;("<b/> < p />حؿي يب < p > $(selector).prepend(content,function(index,html)) : Prepend() شس append() اؾز. ؾبذشبض: ح سضظب ضا ث لج حؿي يب اظبف يى س. ؾبذشبض: دبضا شط ب:

47 : Content اي دبضا شط ظط ضی اؾز.سؼطيف مساضی ثطای اضز وطز و ي س ا س قب مبزيط: ػ بصط اقيبء خي و ئطی ػ بصط. DOM html : Function(index,html) اي دبضا شط اذشيبضی اؾز. قب html index اؾز. : Index لؼيز قبذص ػ صط س ظي قس ضا ثط ي طزا س. html : Html خبضی اظ ػ صط ا شربة قس ضا ثط ي طزا س. $(document).ready(function(){ $("button").click(function(){ $("p").prepend(function(n){ return ":ق بض " + n; ا < p > < p /> ش ز < p > < p /> ش و < button > < button />و يه : prependto() appendto() ي ثبقس. ؾبذشبض: اي شس ػ بصط html ضا زض قط ع ػ بصط ا شربة قس اضز ي و س. ثط ػىؽ شس $(content).prependto(selector) دبضا شط ب: Content ثال : : اي دبضا شط ظط ضی اؾز. اي دبضا شط ثيكشط ثطای سؼطيف مساضی قب س بی html اؾز. ;(" p>").prependto(".ghabli /> ش < p >")$ : Selector اي دبضا شط ظط ضی اؾز. سؼطيف مساض لج ي.

48 $(document).ready(function() { $(".badi").prependto(".ghabli"); <span < span />ضا سی<" class="ghabli <span ؾيس ح سضظب حؿي يب <" class="badi </span> ؾيس ح سضظب حؿي يب ضا سی Out: : Wrap() ؾبذشبض : دبضا شط ب: سؼطيف ػ بصط html ز ض ػ بصط ا شربة قس. $(selector).wrap(wrappingelement,function(index)) : wrappingelement ي س ا س قب مبزيط ظيط ثبقس: ػ بصط html اقيبء jquery ػ بصط DOM اي دبضاض شط ظط ضی اؾز. سؼطيف ػ بصط html ثطای ز ض ط ػ صط ا شربة قس. function(index) : اي دبضا شط اذشيبضی اؾز. سؼطيف سبثؼي و ػ بصط ثؿش ث سی قس )ػ بصطی و ز ض آ ب س ب لطاض طفش اؾز( ضا ثط ي طزا س. Index لؼيز قبذص ػ بصط ا شربة قس ضا ثط ي طزا س. $(document).ready(function() { $("span").wrap("<i><b></b></i>"); ضز ظط ا < span > < span /> ش ضز ظط ز < p > < p /> ش

49 ش زاذ <span> ضا ظري (bold) وح (italic) ي و س. شس unwrap() ثط ػىؽ اي شس ػ ي و س ث ثب ظيط زلز و يس: $(document).ready(function() { $("#btn1").click(function() { $("span").wrap("<i><b></b></i>"); $("#btn2").click(function() { $("span").unwrap(); <button ی ا <" id="btn1 </ button><br/><br />زو <button ی ز <" id="btn2 </ button><br/><br />زو ضز ظط< span > </ span><br /> ش : replacewith() ؾبذشبض: دبضا شط ب: ػ بصط ا شربة قس ضا ثب مساض خسيس خبي عي يى س. $(selector).replacewith(content,function(index)) : Content اي دبضا شط ظط ضی اؾز. سؼطيف مساضی ثطای خبي عي وطز و ي س ا س قب س بی html ثبقس. مبزيطی و ي س ا س اؾشفبز ق ز: ػ بصط html اقيبء jquery ػ بصط DOM $(document).ready(function() { ;("< b />ظري < p").replacewith("<b ")$ ا < p > < p />دبضا طاف ز < p > < p />دبضا طاف

50 function(index) : اي دبضا شط اذشيبضی اؾز. سؼطيف سبثؼي ثطای ثط طزا س مبزيط ثطای خبي عي وطز. : Index لؼيز قبذص ػ بصط ا شربة قس ضا ثط ي طزا س. <script type="text/javascript" src="jquery.min.js"> $(document).ready(function(){ $("button").click(function(){ $("p").replacewith(function(n){ return پاراگراف شماره ی< h3 >" " + n + "</h3>"; ا < p > < p />دبضا طاف ز < p > < p />دبضا طاف ؾ < p > < p />دبضا طاف و يس< button > < button />و يه : replaceall() ؾبذشبض: دبضا شط ب: اي شس ػ بصط ا شربة قس ضا ثب ػ بصط html خسيس خبي عي ي و س. $(content).replaceall(selector) html اي دبضا شط الظ اؾز. سؼطيف مساضی ثطای خبي عي وطز و ي س ا س قب س بی : Content ثبقس. : Selector سؼطيف ػ بصطی ثطای خبي عي قس. $(document).ready(function() { ;(" b>").replaceall("p />ظري < b >")$ يه< p > < p />دبضا طاف ز < p > < p />دبضا طاف ؾ < p > < p />دبضا طاف

51 : insertafter ث ؼ بی لطاض زاز ثؼس اظ ا شربة قس. شس insertbefore() ثطػىؽ اي شس ػ ي و س. ؾبذشبض: شسی اؾز ثطای اضز وطز ػ بصط html ثؼس اظ ػ بصط $(content).insertafter(selector) دبضا شط ب : : Content : Selector اي اي دبضا شط ظط ضی اؾز. سؼطيف مساضی قب س بی html ثطای اضز وطز. دبضا شط ظط ضی اؾز. سؼطيف ػ صطی و مبزيط content ثؼس اظ آ لطاض ي يطز. ثب ط ثبض و يه ض ی زو شس click $(document).ready(function(){ $("button").click(function(){ ;(" h2>").insertafter("hr />ضا سی< h2 >")$ و يس< button > < button />و يه < p /> ح سضظب< p > <hr> : after() before() ػ ي و س. فؼب قس insertafter ش زاذ h2 ضا ثؼس اظ <hr> اضز يى س. ث ؼ بی دؽ اظ شسی اؾز ثطای سؼطيف مساضی دؽ اظ ػ بصط ا شربة قس. ثط ػىؽ شس ؾبذشبض: دبضا شط: $(selector).after(content,function(index)) : Content اي دبضا شط ظط ضی اؾز. سؼطيف مساضی ثطای اضز وطز و ي س ا س قب مبزيط ظيط ثبقس: ػ بصط. html اقيبء خي و ئطی. ػ بصط. DOM

52 $(document).ready(function(){ $("button").click(function () { $("p").after("ravandi"); و يس< button > < button />و يه ثب و يه ض ی زو ش ravandi دؽ اظ <p/> اظبف ي ق ز. < p /> ش < p > function(index) : سؼطيف سبثؼي و مساضی ضا ثطای اضز وطز ثط ي طزا س. Index لؼيز قبذص ػ بصط ا شربة قس ضا ثط ي طزا س. <script type="text/javascript" src="jquery.min.js"> <script> $(document).ready(function(){ $("button").click(function(){ $("p").after(function(n){ return ی< div >" "ق بض + n + ".</div>"; ا < p > < p />دبضا طاف ز < p > < p />دبضا طاف ؾ < p > < p />دبضا طاف و يس< button > < button />و يه $(selector).prev(filter) prev() : اي شس ػ صط ذب از ی لج ي ذ ز ضا اظ ػ صط ا شربة قس ثط ي طزا س. ؾبذشبض:

53 دبضا شط: : Filter اي دبضا شط اذشيبضی اؾز. سؼطيف يه ا شربة و س ثطای بيف ػ بصط ذب از ی لج ي.و ثط ب ثطای ب ديسا يى س. $(document).ready(function() { $("li").click(function () { $(this).prev().css('background-color', 'yellow'); <ul> ش < li > < li />ا ي ثب و يه ض ی ط ش زض li ش لج ي آ ث ص ضر ظضز ض بيف زاز ي ق ز. ش < li > < li />ز ي ش < li > < li />ؾ ي ش < li > < li />چ بض ي ش < li > < li />د د ي </ul> next() : ثؼسی ا ط next() ضا ث خبی prev() زض وس ثبال لطاض ز ي ثب و يه ض ی ط ش ش ثؼسی ظضز ض ذ ا س قس. ثسؾز آ ضز ػطض اضسفبع : $(document).ready(function() { $("img").load(function() { alert($(this).height()); alert($(this).width()); <img src="aks.jpg">

54 ػطض اضسفبع سص يط ضا زض د دط بيف ي ز س. شس height() : ؾبذشبض: مساض اضسفبع ضا بيف يس س. ا شربة اضسفبع ثال ث خبی دبضا شط value مساض اضسفبع ضا اضز ي و يس. دبضا شطی و ي يطز: $(selector).height() $(selector).height(value) $(selector).height(function(index,currentheight)) height) function(index,current :اي دبضا شط اذشيبضی اؾز.سؼطيف سبثؼي و اضسفبع خسيس ضا اظ ػ بصط ا شربة قس ثط ي طزا س. : Index لؼيز قبذص ػ صط ضا ثط ي طزا س. : Current height اضسفبع خبضی ػ صط ا شربة قس ضا ثط ي طزا س. حبال ث خبی اي ذػ : ذػ ظيط ضا ث يؿيس: $(document).ready(function(){ $("button").click(function(){ $("div").height(function(n,c){ return c+200; < button />و يه< button > <br/><br/> <div style="height:100px;border:4px solid;"></div> ثب و يه ض ی زو اضسفبع خبضی يب current height ضا ث ق ب بيف يس س. return c+200; alert(c); شس بی : Traversing parent(),parents(),parentsuntil(),children(),find(),siblings(), next(),prev(),prevall(),prevuntil(),first(),last(),eq(),nextall(), nextuntil(),...

55 $(document).ready(function(){ $("button").click(function(){ $("p").eq(0).css("color", "red"); و يس< button > < button />و يه ثبقس ش ز ضا بيف يس س... ا < p > < p /> ش ز < p > < p /> ش :Eq() Eq(0) ا ي ش ضا بيف يس س. ا ط يه $(document).ready(function(){ $(".matn").click(function () { $(".matn").find("span").css('color','red'); <div class="matn"> ا < span > < span /> ش </div> ديسا وطز. ز < p > </ p><br /> ش ز < span > < span /> ش ؾ < p > < p /> ش : Find() ي طز س ی والؼ.matn س بی span ض ديسا يى ثب css ؾبذشبض: ض ف ض لط ع يى.

56 دبضا شط: $(selector).find(filter) : Filter اي دبضا شط ظط ضی اؾز. ي س ا س يه ػجبضر ا شربة و س يب ػ صط يب قي خي و ئطی ثبقس ثطای خؿشد ی فطظ سا. ثطای س ظيحبر ثيكشط : ثال ب يه div اص ي زاضي و زاذ اي div چ س سب div زي يب ػ صط زي خ ز زاض س. ثطای اي ى ا ب ض كرص و ي. ثال ض ي ث ك ثسي اظ شس find ثطای ديسا وطز ا ب اظ دبضا شط filter ثطای ثال كرص وطز ا ب اؾشفبز ي و ي. : Parent() ؾبذشبض: دبضا شط: ا س. )دسض( ػ صط دسض ػ صط ا شربة قس ضا ثط ي طزا س. $(selector).parent(filter) : Filter اي دبضا شط اذشيبضی اؾز. يه ا شربة و س ثطای خؿشد ی دسض. <style type="text/css">.pedar{ height:80px; width:80px; border:1px #e20337 solid; background-color:#83d0f6;.farzand{ height:40px; width:40px; border:1px #e20337 solid; background-color:#83d0f6; </style> $(document).ready(function() { $("button").click(function () { $('.farzand').parent().css("background","yellow"); و يس< button > < button />و يه <div class="pedar"> <div < div />ضا سی<" class="farzand </div>

57 ثب و يه ض ی زو والؼ دسض farzand يؼ ي والؼ pedar ث ض ظضز زض ي آيس. يه ثب ثطای دبضا شط : Filter $(document).ready(function(){ $("p").parent(".matn").css("backgroundcolor","yellow"); <div class="matn"> ا < p > < p />دبضا طاف ز < p > < p />دبضا طاف </div> <div class="matn2"> ا < p > < p />دبضا طاف ز < p > < p />دبضا طاف </div> Out: دبضا طاف ا دبضا طاف ز دبضا طاف ا دبضا طاف ز : Children() فطظ سا. اي شس ی فطظ سا ػ صط ا شربة قس ضا ثط ي طزا س. ؾبذشبض: $(selector).children(filter) : Filter اي دبضا شط اذشيبضی اؾز. يه ا شربة و س ثطای خؿشد ی فطظ س.

58 $(document).ready(function(){ $(".pedar").children("ul").css("color","red"); < p /> ش < p > <div class="pedar"> <ul> <li> ش يه </li> </div> </ul> <ol> </ol> <ul> </ul> Out: ش <li> ش ز </li> <li> ش ؾ </li> <li> ش ثيط </li> ش يه ش ز ش ؾ.1 ش ثيط فطظ سا والؼ pedar و اظ ع ul ؿش س ث ض لط ع كرص قس اؾز.

59 <script type="text/javascript" src="jquery.min.js"> $(document).ready(function(){ $(".matn").children("p").css("background-color","yellow"); <div class="matn"> يه< p > < p />دبضا شط </div> يه ثب ثطای دبضا شط : filter ز < p > < p />دبضا شط ؾ < p > < p />دبضا شط دبضا شط يه دبضا شط ز دبضا شط ؾ $('document').ready(function(){ $("button").click(function(){ $(".asli > li > ul").css("background-color","yellow"); < button />و يه< button > <ul class="asli"> ش ا < li > <ul> كرص وطز فطظ سا : ا زاذ ي< li > < li /> ش ز زاذ ي< li > < li /> ش </ul> </li> ز < li > < li /> ش

60 </ul> زؾش ض ul. asli > li > يبز و ul ظيط د ػ ی li اظ والؼ asli ضا ث ض ظضز زض يبض. ش ا ش ا زاذ ي o ش ز زاذ ي o ش ز data(),each(),get(),index(),size(),toarray)(,... شس بی شفطل : $(document).ready(function(){ $("button").click(function(){ $.each( ['a','b','c'], function(i, l){ alert( "Index #" + i + ": " + l ); و يس< button > < button />و يه : Each() چ س ثب ثطای زؾشطؾي ث مبزيط: 1( زؾشطؾي ث مبزيط آضاي : <div class="matn"> </div> مبزيط آضاي ؿز. آضاي اظ صفط قط ع ي ق ز. ثطای ي ا ي ق بض ی آضاي ضا صفط function(index,element) ]'a','b','c'[ بيف زاز. دبضا شط:

61 2( زؾشطؾي ث مبزيط قي : اي ض ثط ػىؽ ض ثبال زؾشطؾي ث مبزيط قي ؿز. $(document).ready(function(){ $("button").click(function(){ $.each({ name: "mohammad", lastname: "ravandi", function(k, v){ alert( "Key: " + k + ", Value: " + v ); و يس< button > < button />و يه <div class="matn"> </div> value ث ق بض ب مبزيط زؾشطؾي ديسا وطزي. $(document).ready(function(){ $("button").click(function(){ $("li").each(function(){ alert($(this).text()); و يس< button > < button />و يه <ul> </ul> ب ثب اؾشفبز اظ key ا < li > < li /> ش ز < li > < li /> ش 3( يه ثب و وبضثطز بی ظيبزی زاض :

62 $('document').ready(function(){ $("div").click(function () { var mo = $("div").index(this); ;("ق بض :"+ p").text(mo ")$ <p></p> ا < div > < div /> ش ز < div > < div /> ش ؾ < div > < div /> ش چ بض < div > < div /> ش : index() ثب و يه ض ی ط div فؼب قس شس و يه مبزيط زاذ شس فؼب قس ق بض ی اي سوؽ)قبذص( ط ػ صط div ث شغييط mo زاز ي ق ز. مساض شغييط mo ث شس text() زاز يك ثب و ه text() مساض زض p )دبضا طاف( يؼ ي زض ثي ز س <p></p> بيف زاز ي ق ز. ؾبذشبض ب : دبضا شط: $(selector).index() $(selector).index(element) : Element اي دبضا شط اذشيبضی اؾز. سؼطيف يه ػ صط و ثب شس index() لؼيز آ طفش ي ق ز. شس بی settimeout() setinterval() اظ شس بی ذ ز خب ا اؾىطيذز اؾز ي چ زض اي وشبة ثب ب وبض زاضي ث آ ظ اي ز شس دطزاذش : : setinterval() ث ص ضر ؾبز يك فز اي شس يه فبص ی ظ ب ي ايدبز ي و. ثب اؾشفبز اظ ظ ب ي و ث اي شس زازي اي شس ش ضا سی ضا ط 5 عاض ي ي ثب ي يه ثبض بيف ي ز س.

63 ؾبذشبض: دبضا شط ب: <script type='text/javascript'> $(document).ready(function(){ setinterval(function() { ;("ضا سی") document.write, 5000); setinterval(code,millisec,lang) : Code اي دبضا شط ظط ضی اؾز. سبثؼي و اخطا ذ ا س قس. : Millisec اي دبضا شط ظط ضی اؾز. سؼيي سر فبص ی ظ ب ي ث ي ي ثب ي. <script type='text/javascript'> function autoupdate() { ;("ضا سی") document.write JScript VBScript JavaScript اذشيبضی اؾز: : Lang ط يه ثب ي سبثغ autoupdate() ط يه ثب ي // $(document).ready(function() { setinterval("autoupdate()", 1000); اخطا قس دؽ زؾش ضار زاذ سبثغ اخطا ي ق ز. : settimeout() يى س. ؾبذشبض ثط ب : دبضا شط ب: زض ثط ب ی ظيط ثؼس اظ 5000 ي ي ثب ي ديغب ي بيف ي ز س. ي ثط ب ازا ديسا <script type='text/javascript'> $(document).ready(function(){ settimeout(function() { ;("ضا سی") document.write, 5000); settimeout(code,millisec,lang) : Code اي دبضا شط ظط ضی اؾز. سبثؼي و اخطا ذ ا س قس. : Millisec اي دبضا شط ظط ضی اؾز. سؼيي سر فبص ی ظ ب ي ث ي ي ثب ي. JScript VBScript JavaScript اذشيبضی اؾز: : Lang

64 jquery.trim( str ) چ س سب ثط ب ی وبضثطزی: سبثؼي اؾز و فعب بی ذب ي ؾ ز چخ ضاؾز ضقش ضا حصف يى س. <script src="jquery.js" type="text/javascript"> $(document).ready(function(){ $("button").click(function () { ;" ش ثب فبص ی چخ ض ضاؾز " = str var alert("'" + str + "'"); str = jquery.trim(str); ;(" ش ز '" + str + "' ش ا ") alert و يس< button > < button />و يه <script src="jquery.js" type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ $('.ekhtar').html(''); if($.trim($('#msg').val()) == '') { ;('.متن ضا اضز ىطزيس $('.ekhtar').html(' return false; <div style="text-align:right;direction:rtl;"> <form dir="rtl" action="test.php" method="post"> <input type="text" name="matn" id="msg"> /> "اضؾب "= value <input type="button" id="btn" </form> <div class="ekhtar"></div> : jquery.trim() ؾبذشبض: : يه ضقش. Str اػشجبضؾ دي ثب $.trim() :

65 ؾبذز : modal </div> ي ذ ا ي ثط ب ای ث يؿي و ثب و يه ض ی ي ه يه د دط ی و چه ضا ؾػ صفح ثبظ و س ث ص ضسي و اي د دط ی اظ ثبال ث دبيي ثيبيس ثب و يه ض ی زو ی ظطثسض ث ثبال ضفش ح ق ز. <title>modal</title> <script src="jquery.js" type="text/javascript"> $('document').ready(function(){ و يه ض ی ي ه ثطای ثبظ قس د دط // $("#link").click(function () { ؾيس ح سضظب حؿي يب ضا سی //pachenar.ir ث ص ضر آ ؿش ظب ط ي ق ز // $(".overlay").show().animate(); $(".overlay").fadein(500); $("#payam").animate({"top":"50px",500); و يه ض ی زو ی ثؿش // $("#linki").click(function () { $("#payam").animate({"top" : "-50px",500); $(".overlay").fadeout(500); و يه ض ی صفح ی ؾيب ثطای ثؿش // ثب اي وبض و يه ض ی ػ صط فطظ س ػ ي و س و يه ض ی ػ صط دسض ػ يى س // $(".overlay").click(function(e){ if(!$(e.target).closest('#payam').length) { $("#payam").animate({"top" : "-50px",500); $(".overlay").fadeout(500); <style type="text/css">.overlay { display:none; position: absolute; left: 0px; top: 0px; width:100%; height:100%; background-color:#aeaeae; margin-left:auto;

66 margin-right:auto;.close { float: right; font-size: 20px; font-weight: bold; line-height: 20px; color:#000000; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20);.close:hover,.close:focus { color:#000000; text-decoration:none; cursor: pointer; opacity: 0.4; filter:alpha(opacity=40); button.close { padding:0; cursor: pointer; background:transparent; border:0; -webkit-appearance:none; </style> <div style="text-align:center"> <div class="overlay"> <div style="width:305px;margin-left:auto;margin-right:auto;margin-top:- 60px;border:3px solid red;"> <div id="payam" style="width:300px;background-color: #fff;border:1px solid #000; border-radius:5px;padding:15px;text-align:center; position: absolute;"> <button type="button" id="linki" class="close" data-dismiss="modal" ariahidden="true"> </button><br/> ضز ظط< h3 > < h3 /> ش </div> </div> </div> <a id="link" href="javascript:void(0);">link</a> </div> س ظيحبر: ا يه خس ثب div زض ؾػ صفح ايدبز وطزي ث ص ضسي و زض لؿ ز اؾشبي margin-top:-60px; ثبقس و زض اي ص ضر د دط ثبال لطاض ي يطز ثطای ي زيس ي ق ز. لشي ض ی link و يه ي و يس ثب اؾشفبز اظ شس animate() مساض 50px ث خس payam زاز قس ثطای "top" : "50px" ي د دط ث دبيي ي آيس.