م

٣ػملضملت

jQueryم

مدضؿملعملهملم021يفم

م

م

م

م

مكؿمملرمدؿملمصمملحلع

م

2

م

م

م

ماإلػاء

م

م

م

مم,ممػملنملاظعملم٦بذملعملذملذملؾؾملؼملمملمع٤مثذمح٧مع٤مؼذملإظ

ماهللم.مؼملمملحظملصملؾملم٧مواظيذملإظم..م

3

م:معهملعملا

عملمملتمرمتشملؾؿملالمؼؽملؾطمل٨مشمل٦ممملتماظيتاظؿعملؽملؿملأسؿدلػمملمع٤ممطؽملوملم-مغ٦سمملمعمملم-مملمومإشممصذلةمضؼؾهملمذكزملؿمل

م فمع٤مبمملبماظؿمؿملمملتسميفماظغملػملع٦رماظيتمترع٤مامأراػمملموممملؼملؾمليفمتضملػملمموضؿ٥أنمؼسملؿملمWebاظذمل

مطؽملوملاظيتمتلؿكممظػملدلجمهملمع٤مرفماظضملؼملؿمل٢م,ممJava Scriptظطملهملمؾملمملمإغم..م,مغضمل٣م!ماظضملػملؼمل٨

م"مأغوملمأض٦ل مظػملميملدلعتمظؽملظملل٨م: مسمػملطملمملتبمWebذمل مؽملصملتمصػملؼملمملذامServerمملدممع٤مرفماومػملؿملممل

م."مم؟ظػمل٦راءم

مطؽملوملممملماؼمظ٨مأبتم٦ؼػملهملظؿمللوملمبمملظشملمبضملمصذلة مومعممل مؾأتصمد٤مملمأزوعمتمملغ٨مبمملخؾمملرأمجمملػال

اظيتمصؿقوملممAJAXمهملتعملؽملؿملممضؽملمملسيتمغمملدعمملمبضملمزؾمل٦رأشؿملهملماظدلجمهملمع٤مرفماظضملؼملؿمل٢مومأدركمأػؼملؿمل

ذؿملظملاتممبضملمومأطؿنملمأس٦دمومبأتمآصمملضمملمجؼةمظإلباعح٦لماظضملمململممWebذملمعدلجم٨ماظمأعمملم

متؽملظملؿملمعمJava Scriptماظذمل مؼبطملؿملهمل مظغمل٤مم٥شملػملؾممل مبنياظضملؼملالء ماينيماينيمو ع٦ضظمل٨ممطمملنمو

مسػمل٧ماظلمJava Scriptمع٤ماظذملمػمليباظل ماظغملـرلمع٤معسملشملمينمطؽملوملشملمغؼشملظمل٦ مظغملؿمملبهمل ا

ايممللمػغملامإشممأنممومادؿؼملم-مبمملسؿعملمملديم–ظؿؽملظملؿملمأع٦رمبلؿملشملهملممJava Scriptذؿملظملاتم

م.٨مط٦ؼي""جمػملظملؼماظيمjQueryازلؾملمملمماصمؿملػملهملمجممبضملصهملمصؼعملهملمجؼةمسػمل٨ماهللم٤ع

jQueryعغملؿ٦بهملمبػملطملهملممومعظملؿ٦حهملمازملرمهملمملغؿملجمعغملؿؾهملمجؼةم:ممJava Scriptتلؼملمم

مطؼملشمل٦مظ١ مر مؼؿشملػملمWebمذملاظ٦اض مطمملن ممبممل ماظدلبمملظعملؿملمملم مادشمل معؽمملت مطؿمملبهمل مبفملدشملمنمل جمؿملهمل

معضملودة مطؿؾؾملمملمو! مامض مميفماظؾاؼهملمJohn Resigدلعيملماظغملؾرل مرػمملر٦مث٣م(2116)سمملم

وماهلفمع٤مطؿمملبؿؾملمملمتطملؿملرلماظشملؼعملهملماظيتمؼغملؿنملمبؾملمملمادلجم٦نممصؼ٠مع٤مادلجمنيمبمملظؿضملمملونمعضمل٥

م.ض٦لمعؾسؾملمملمسػمل٧محمJava scriptذؿملظملاتماظذملم

مثعملهملممجامخاللمصذلةمضزملرلةمjQueryعغملؿؾهملممغمملظومل مأطلؾؿؾملممل موادضملهمل مطمملترملأطدلماظع٦اضمذؾملة

اظغملـرلموممDELLوممDrupalوممWordPressوممMozillaوممGoogleيفماظضملمململمعـ٢م

م ماع٤ م٦اض ماظغملدلى ماظيت ماظضملؼملالضهمل ماظرملطهمل مع٦ض مآخػممل متؾؽملمMicrosoftطمملن وملماظيت

4

م مو مضؼملاغملؿؾهمل مع ماصذلاض٨ مبرملغمل٢ متمASP.NET 4ماظدلجمهملمظطملهملمعرملمملرؼؽملؿؾملممل نملمغملؿاظيت

م مبؿملؽهمل ممVisual Studio 2010بمملدؿكام مأن مبمملظط ماىؼ معغملؿؾمملتمو مإغرملمملء صغملة

Java Scriptعغملؿؾهملممزؾمل٦رمع٤ماغملؿؾمملتمضؾ٢مزؾملمسدمطؾرلظؿمللوملمصغملةمجؼةمصعملمم

jQueryمإظم مأن ممjQueryممل معضملمملؼرلماظذمل ميفمعشملمملبعملهمل منمملحممل مادؾمل٢ممWeb 2طمملغوملماطـ و

م مسػمل٧ماإلرالق م, مطمملغوملمطؼملممل ماظيتممjQueryعغملؿؾهمل ماظ٦حؿملة مع٤مضؼملؽملوملاغملؿؾهمل مأسػمل٧مغلؾهمل

ماظمؿ٦اص٠اظ ماؿزملظملقمملت مصمؿمل مرملؾملرلع معـ٢ مؼػملؿمل٥مIE6ة ممصؼملممل مؼػملؿمل٥مFirefox 2و وممصؼملممل

Safari 3م مم ممؼػملؿمل٥صؼملممل ممOpera 9و ممؼػملؿمل٥صؼملممل مع٤ممGoogle chromeو مشرلػممل و

م21المؼؿفمملوزماظذملمم٥أغإذممؼملؾملممللؾنملماػ٣ميفماغؿرملمملرماغملؿؾهملمومنمملحؾملمملمػ٦مصطملمحفوماظاؿزملظملقمملتم

م!ممصعملممملطؿملػمل٦بمملؼؿ

م محلؽملممل م.. ماظغملؿمملبمدؽملقمملولمتضملػملمضملؼطؼملممل ماغملؿؾهملسؽمل٦انمػا مخاللمدمملسؿنيممعضملمملم٣مػه مإتعملمملغؾملممل و

مصعمل م! ممػؽملمملماظغملالمو مضػملؿملالمCSSموم ٤HTMLمؼضملفع٦ج٥ مJava scriptمظطملهملع٤ممو

ضملمملغ٨مكماظيمطـرلامعمملمغاع٤مذمظؿملم-اهللمبكملذنمم–ماحملؿ٦ىميفمػاماظغملؿمملبمحؿملىملمأناظؿعملػملؿملؼهملم

يفممماقملظمؼظملفنإذممعمملمؼؿقثمس٤مظطملمملتماظدلجمهملمعؽملؾملمملم,مهملومخمملصميفمطؿنملماضملػمل٦عمملتؿملهملمعؽمل٥

ضؾ٢مإزاظهملمذصملمملؼمملػمملممشرلماظملؾمل٦عهملمث٣مؼؽملؿعمل٢مإشممصعملةمأخىماظعملمملرئمسرملاتمادشملماظدلجمؿملهملموج٥

مساماظضملؽملمملوؼ٤ممع٤ماظغملؿنملماظيتمالمتعمل٦لمأيمذ٨ءظؿملم-إنمذمملءماهللمم–مومػ٦,ممس٤موج٥ماالظؿؾمملس

اظغملؿمملبمػامجضمل٢ماحملؿ٦ىميفممضرمادؿشملمملسيتمحمملوظوملؼملمملماالخؿزملمملرماظ٦اػؿملهملم,مومإغم٢هملمبضملػملػملعؿضملػملخمل

,مبكملذنماهللممواضقهملوممبلؿملشملهملوممعغملـظملهملمصؿمل٥ماضملػمل٦عهملط٨متغمل٦نمماجؿؾملتموؼعمل٦لمعمملمرمنملمض٦ظ٥مصعملم

ؼملػمل٨مػامخمملظزملمملمظ٦جؾمل٥مومأنمؼغملؿؾ٥مع٤ماظضملػمل٣ماظيمؼؽملؿظملمرمضمل٢مسمأنمومج٢ماهللمسمدفمللأخؿمملعمملم

ظؿملمسؽمل٦اغمملمومملرؼمملموممسؽمل٦اغ٥مػاماظغملؿمملبمأنمظعملمملرئمتـؾوملماظؿفبهملمجالظ٥مأنمطؼملمملمأدس٦همج٢,مب٥م

م.مغؿمملئيملمعػملؼمل٦دهملمدونؿملمب٥مرؼمملحماظزملممتممملطمملذبماالموس

م

ممصمملحلكؿمملرمدؿملع

5

م

م

م

م

م

م

م:م8إشمماظضؿملعملهملمم1ع٤ماظضؿملعملهملم

مjQueryمملتمأدمملدؿمل

6

م:ومتسملؼملؿملؽملؾملمملميفمصظملقؿ١ممQueryjتـؾؿملوملم

ماظغملؿمملبمرمنملمأنممدضمملئ٠سدلممjQueryماظ٦ظ٦جمإشممسمململماغملؿؾهملعضمل٨ميفممتؾأضؾ٢مأنم ػا

مبؿقؼملؿملػمل ممع٤مأوالمؾملمملتعمل٦م ماظزل٨مشمإخاللماظخ٦ل ماظؽملعملممcom.jquery.wwwمع٦ضضملؾملممل و

م:م٦رةيفماظزملماظ٦اضمDownloadممسػمل٧مزر

٢ماغملؿؾهملمبرملغمل٢مصقؿملمبضملمهؼملؿمل

محب٦زت١معػملممظملذلضؼ مؼغمل٦ن أن

م مػ٨ممjs.jqueryبمملالد٣ و

موم ماغملؿؾهمل مع٤ ماظغملمملعػملهمل اظؽمللكهمل

مػ٦ مآخ ماػملمعػمل

jquery-min.jsمػ٨مم و

ماغملؿؾهمل مع٤ مخظملؿملظملهمل ػمل١مؿمتمغلكهمل

م ماظغملمملعػملهمل ماظؽمللكهمل معؿملات عمطمملع٢

إشمممنياػملظملمأحض٣مبؽمللم,مماظؽمللكهملماظملؿملظملهملمذاتمحف٣مأض٢ماخؿالفمبلؿملميفمايف٣مإذمأن

مملتماظزملظملقمرأسمإشماظؿضملػملؿملؼملهملماظؿمملظؿملهملمامملصمب١مومأضممWebذملماجملػملماظيمزمؿ٦يمعرملوعماظ

م:م</head>وممم<head>م٨بنيموزلماظيتمتشنملمبمملدؿضملؼملممللماغملؿؾهملمصؿملؾملممل

<script src=”jQuery.js” type=”text/javascript”>

</script>

م ماظلمملبعملهملمػ٨و مماظؿضملػملؿملؼملهمل مبلؿملشملهمل مم-تضملػملؿملؼملهمل مjava scriptعػملمتعمل٦ممبؿسملؼملنيمم-متضملػمل٣طؼملممل

مإعغملمملغؿملم٤ضملؿملع ممملت٥ميفمصظملقؿ١مظؿلؿكم موزمملئظمل٥ مؼؿ٣مالحعملمملو ماػملمسدلماظ٦اصظملهملمم, هؼمػا

srcمبرملغمل٢مغليبتضملؾماظيتمهؼمل٢مضؿملؼملهملم ماػملمبرملغمل٢معشملػمل٠مأو مػا مس٤معلمملر شملموميفماظلم

مممملب٠اظل ماظعملؿملؼملهمل مؼرملرلمjQuery.jsصكملن مغلؾؿملممل معلمملرا ماالد٣ممتضملين مذو ماػمل إشم

7

jQuery.jsمم ماظذمل ماظيمزمؿ٦يمعلؿؽمل ميفمغظملماجملػمل م,مWebا٦ج٦د مومامملصمبؽملممل

يفمظػملؾءممؼ٤جمملػمغغمل٦نمضمنقؽملمملميفمتسملؼملنيماغملؿؾهملمضؼمل٤ماظزملظملقهملمومبمملظؿمملظ٨مأصؾقؽملمملمػغملا

م.اظؿمملظؿملهملمضمملئ٠ضاءةماظ

م:مQueryjأدمملدؿملمملتم

م:٨مأضلمملممػممخلهملبرملغمل٢مرئؿملل٨مع٤ممjQueryمعغملؿؾهملمتؿغمل٦ن

قداتمم-0 م.Eventsاحاثمم-3م.Functionsاظوالمم-2م.Selectorsا

م.ممPluginsاإلضمملصمملتمم-5م.مAnimationsايطمملتمم-4

مضػملومل ػهماغملؿؾهملمتلضمل٧مظؿؾلؿملماع٦رمسؽملمايؼىملمس٤مطؿمملبهملمذؿملظملةممعهملمصكملنيفماعملمومطؼملممل

Java Scriptاغملؿؾهملممؽملمتشملؾؿملعمل١معؼامع٤ماظؿظملمملسػملؿملهملمإذمأنمjQueryتعمل٦ممبؿطملػملؿملمم

جمؼمل٦سهملمطؾرلةمع٤مادشملماظدلجمؿملهملمضؼمل٤متمملبمبلؿملمجاممممملمؼلؼملمظ١مطؼملشمل٦رمظؿشملؾؿملعملمملتماظذملم

Webمبمملظذلطؿملمسػمل٧موزؿملظملهملماظؿشملؾؿمل٠مصعملم.م

سػمل٧مضل٣ممعمملمداظهملحطهملمأومتضملؼ٢مأومح٦لمتشملؾؿمل٠ممjQueryغملؿؾهملمماظئؿمللؿملهملمةظملغملاظتؿؼملق٦رمم

م٢ادمإجاءماظؿضملؼؼؿ٣مهؼماظعملل٣مامو,مظملفرلمحثمعضملنيمسؽملمتمWebذملمحمدمع٤مصظملقهملماظ

غملؿؾهملمع٤مأضلمملممام٢دملهملمؽملمملضرملهملمط٣ماظضمملئ٠ماظذملؼملؿؾعملؿملل,مومبمملظشملؾمدؽملعملماحملداتمسػملؿمل٥مبمملدؿكام

م.٢مومواضمبكملذنماهللبرملغمل٢معظملزمل

يفممطـذملمأصضمملئ٨مأنمضظملؿملمتؿسملمظ١مصغملةمسؼمل٢ماغملؿؾهملماظئؿمللؿملهملم)ؼصؼعمل٨ماظيمومأغوملمؼمملم

ما مرأؼمحػملهمل(ػه مأحميفمعـممللمسؼملػمل٨مؼ٦ضمم١عممل سػمل٧مأرضممjQueryتشملؾؿملعملمملتمعغملؿؾهمل

م؟ماظ٦اض

م:م(حؿ٧متمملرؼمطؿمملبهملمػاماظغملؿمملب)ظذلىمصظملقهملمعرملمملبؾملهملممملؼػمل٨ممGoogleادخ٢مظػملؼمل٦ضماظائم

8

م

المهؿ٦يمسػمل٧مأيمذ٨ءمسامعمملممGoogleامملصهملممب٦ضمحمكماظؾقىملمزملظملقهملماظالحمأنم

وم,ممؾقىمل(اظومعبماظؾقىملموماظرؼ٤مامملصنيمبؾءمسؼملػملؿملهملمما٦ض)ذضملمملرميفماظزمل٦رةمػ٦مزمملػم

م:هملاظؿمملظؿملمزمل٦رةاظظملفملرةميفماظزملظملقهملموماغصملمعمملمدؿملقثم!م..مغضمل٣مدذلىمعمملمؼرملؾ٥ماظعقملذمكماآلنمح

م

9

ماغؿؾؾملوملم مكملصظ٦ ماحملؿ٦ؼمملتماىؼةميفماظزملظملقهمل متمحبطهملمم(Linksاظوابمأسينم)نمزؾمل٦ر

م.مFade inمس٧مبمملظصملؾمل٦رماؿالذ٨تعؿالذؿملهملمجابهملم

تشملؾؿمل٠ممػمل٧سمصؾمل٦معـممللمسؼملػمل٨,مصضملػملؿملمملممjQueryؼلؿكممعغملؿؾهملممعمملمرأؼؽملمملهمػ٦معـممللمممؿمملزم..حلؽملمملم

ممتمم(Linksاظوابم)مجءمع٤ماظزملظملقهملسػمل٧ممFade inمحطهمل معضملنيمتظملفرلمحثسؽملعممل

م.(عورماظظملفملرةميفماؽملشملعملهملماظظملمملرشهملمع٤ماظزملظملقهمل)

اػ٢ميفما٦ض٦عمأنمعمملمرأؼؿ٥ممتمبغملؿمملبهملمدشملمواحمع٤مأبلمعميماآلنمرؾؿملضمل٨مظغمل٤ما

معمملمؼغمل٦نمومػ٦معرملمملب٥مظػمللشملماظؿمملظ٨م:

$(„a‟).fadeIn();

م.غضمل٣مط٢مػاماىؼملممللمبلشملمواحمصعملم!مم

م:اظزمل٦رةا٦ضميفممMicrosoftذطهملمطؼملـممللمآخمادخ٢م٦ضم

م

مومادؿؼملؿم!ملميفماظزملظملقهملؿف٦أنمتحمملولم

10

معضملصمل٣مإذمأنمFlashمممملدؿكاممبغمملعيملظؿضملؿعملمأنماظزملظملقهملمعؾؽملؿملهملمبمس١ؼملممللمسمػاماىالمتعم

يفمغلكهملممSliderومحؿ٧ماالجممtabsومأظلؽملهملممmenusيفماظزملظملقهملمع٤مض٦ائ٣ممعمملمرأؼؿ٥

ايمملظؿملهملمع٤مماظؽمللكهملظألعمملغهملم:م)اظغملـرلةممjQueryعغملؿؾهملمع٤متشملؾؿملعملمملتمممملبلؿملشملؼضملؿدلمذؿملؽمملممدمملبعملهملمعؽمل٥

م.مم(Silverlightمتعملؽملؿملهملمتلؿضملؼمل٢ماالج

ماؼمع٤ماعـػملهملم؟

م..م مصحلؽملممل مأو ماظغملؿمملب مػا ماإلضمملصمملتميفمغؾملمملؼهمل مادؿضملاضمأػ٣ مظضمملئ٠ ماالغؿعملمملل مضملػملؿمل١ميغملؽمل١

مMicrosoftوممGoogleم٨أصسمل٢مع٤مع٦ضضملمعـممللممملأظعمأغينمأرىمممب٦ضماغملؿؾهملمغظمللؾملممل

ظػملـعملهملمبذملممظرملطمملتماظضملؼملالضهملاظيمدصضملؿ٥مومملربمام٣مذات٥اظضملمملظمػام٣م,مملتميفماظضملمملظأطدلمذطيتمبجمؿمل

jQueryسل٧مأنمغىممءميفمايؼىملمس٤مرؼعملهملمادؿضملؼملمملهلمملظػملؾمدم٤مأؼسملمملمومػامعمملمؼصضملؽملمملم

مسبؿملهمل مسػمل٧مور٤مع٦اضضملممل مظؿملمبضملؿملا مػا مو ماجملمملل ميفمػا مآالفمؼؽملسملمسب٨دملمتؽملمملصمبعمل٦ة

م.مؼمل٦حنياظشملمؾسنيا

م

م:مQueryjرؼعملهملمادؿضملؼملممللم

مدؿعمل٦ممبغملؿمملبهملمبمومرمملغمسمملمدملمبرملغمل٢ مدمملبعملممل مذطغممل ضملمأنمتعمل٦ممبؿسملؼملنيماغملؿؾهملمضؼمل٤ماظزملظملقهملمطؼملممل

ظؿملزملؾمذغمل٢ممjQueryمعغملؿؾهملمبمملدؿكامم(ومشرلمر٦ؼػملهملم)هملمسزملؼمJava scriptذؿملظملةم

مصظملقؿ١ماظؽملؾملمملئ٨مطؼملمملؼػمل٨م:

<html>

<head>

<scriptمsrc=”jQuery.js” type=”text/javascript”>

11

</script>

<scriptمtype=”text/javascript”>

}م()ready(function.(document)$مم

ذؿملظملةمج٨مط٦ؼيمػؽملمملم مم

});

</script>

</head>

<body>

حمؿ٦ىمصظملقؿ١م)اظصملمملػ(مدؿملغمل٦نمػؽملمملم

</body>

</html>

مغملػملهملعرملمهملاج٥مأؼأغ١مملمت٦مفملطمملدمأضل٣صمHTMLيفمطؿمملبهملمعلؿؽملاتمإنمطمملنمظ١مخدلةمبلؿملشملهملمجام

ماظؿمملظؿملهملم:معمعمملمدؾ٠مع٤مذؿملظملةمإالمعمادشمل

$(document).ready(function()م{

ذؿملظملةمج٨مط٦ؼيمػؽملمملمممم

});

مأغ١مدذلتمملحمإن مأؼسملممل مأضل٣ مأطمملد ممو مظؿملمع٤ماظسملوريمأنمتظملؾملؼملؾملممل اآلنمسػمل٧مم-ضػملوملمظ١مأغ٥

مظغمل٤م-اض٢ مأنمتمع٤ماؾمل٣مو مواحا مذؿملؽممل مؿط مسػملظدلجمؿملع٤ماحملصمل٦راتما: عدلعيملممأيم٧همل

غملؿنملمأيمذؿملظملةمخمملصهملمبمملغملؿؾهملمخمملرجماؽملشملعملهملماكزملزملهملمظرملؿملظملةمؼأنممjQueryؼضملؿؼملمسػمل٧م

12

jQueryميفمام ما٦ضقهمل مػ٨ مومدشملو مبطملؿملهملمماظلمملبعملهمل ماظغملؿمملب مغؾملمملؼهمل مإشم ماظؽملعملشملهمل مػه ع٤

ػمل٦بهملمطمسػمل٧ماظظملعملةماشملرلدمومإمنمملطمملع٢مذؿملظملةماظزملظملقهملمؼطماظغملؿمملبماظؿلؾملؿمل٢مومسمماإلرمملظهملمظ٤م

مت٦ضميفمػهماؽملشملعملهمل.مjQueryؿطمأنمصمؿملمذؿملظملاتماظذملمدؿميفمط٢معةمظغمل٤مأغومل

مومومملػ٢مادشملماظعملػملؿملػملهملماظؿمملظؿملهملمداتػملؼملقػملضمملئ٠ماكزملزملهملمظظماآلنمميغملؽمل١ماالغؿعملممللمعؾمملذةوم

م.هملمسػملؿمل١مأنمتعملأماظظملعملةماظؿمملظؿملنملم٤مزمنملمعضملصهملمط٢مذ٨ءمصقؿملؽملؾملمملمؼؿ٦جطؽملوملممممإالمإن

م

ماظلمملبعملهملم؟مةؿملظملعمملمعضملؽمل٧ماظرمل

ممjQueryتضملؿؼملمعغملؿؾهملم Data Objectذفةمطمملئؽملمملتمالؿؽملم)مDOMسػمل٧مذفةماظذمل

Model)متم مومطؼملممل إالمبضملماطؿؼملممللممؼغملؿؼمل٢المبؽملمملءمػهماظرملفةمضملػمل٣مصكملنمبرملغمل٢مطػمل٨ميفمسؼملػملؾملممل

م مو ماظزملظملقهمل مماظؾشملؿملؽهملاالغذلغوملمخشمل٦طميفمهؼملؿمل٢ ممعـالمDial upطمملظذمل مؼلؿطملق اطؿؼملممللمض

أثؽملمملءهمدؿملقملديمذظ١مإشمممDOMاظيمإنممتماظؿالسنملممبغمل٦غمملتماظ٦ضوملممبضملمهؼملؿمل٢ماظزملظملقهمل

م.ومبمملظؿمملظ٨مإصلمملدمصظملقؿ١مDOMممإصلمملدمذفةمطمملئؽملمملتمالؿؽمل

عؾملؼملهملمادشملماظلمملبعملهملمبؾلمملرهملممىضمل٢مايؿملمملةمأدؾمل٢مصكملنيفمحممملوظهملمموملؾؿطمjQueryمعغملؿؾهملمومن

ةمضؾ٢ماظلؼملمملحمبؿؽملظملؿملمأيمذؿملظملةمػ٨ماظؿقعمل٠مع٤ماطؿؼملممللمهؼملؿمل٢مالؿؽملموماطؿؼملممللمبؽملمملءماظرملف

jQueryم.ومسػمل٧مزلضملهملماغملؿؾهملممحظملمملزمملمسػمل٧مدالعهملمصظملقؿ١م

ماآلنمتلؿشملؿملماظعمل٦لم مو مبـعملهمل بمملظؽمللؾهملمضملمملؼرلمػاممjQueryأغ١ممم٤مؼؿعملؽمل٦نمأدمملدؿملمملتمعغملؿؾهمل

معؾمملرك.م.معؾمملركاظغملؿمملبم.

13

م

م

م

م

م:م32إشمماظضؿملعملهملمم8ع٤ماظضؿملعملهملم

مداتقا

Selectors

م

14

م:ماتدقا

أومممCascading Style Sheetsػ٢متطمطؿملمطمملنمايممللمضؾ٢مأوراقمامنمملطم

م؟مCSSعمملمؼضملفماخؿزملمملرامبذملم

متؼم..مدسؽملمملمع٤ماـملد٨مومظؽمل م,مؼغملظمل٨ممصمؿملػملهملمWebذملمط٣مأصؾقوملمحؿملمملةمعزملؼمل٣ماظؽملصملمطؼملممل بضملػممل

م:ؼملأنمتغملؿنملميفمورضهملماظؽملمpظؿطملؿملرلمحف٣مامامملصمبغملمملصهملماظؽملزمل٦صماغملؿ٦بهملمضؼمل٤ماظ٦د٦مم

p{ممfont-size:medium; م}م

م:مومؼغملظمل٨مظؿطملؿملرلمظ٦نمطمملصهملماظوابما٦ج٦دةمضؼمل٤ماظزملظملقهملمأنمتغملؿنملميفمورضهملماظؽملؼمل

a{ color:red;مم}م

م:ميفمورضهملماظؽملؼملمؾملؼملمملمعضملمملمأنمتغملؿنملؿملؼغملظمل٨مظؿطملؿملرلمغ٦عمامامملصمبغملػملمو

p,a{ font-family:Tahoma,Arial; }م

مؼؽملؿؼمل٨مظػملزملمود٦٣رما٦ج٦دةمضؼمل٤مصمؿملماظزملمسضمإرمملراتومؼغملظمل٨مظؿطملؿملرلم مMukhtarم

:ميفمورضهملماظؽملؼملمأنمتغملؿنمل

.Mukhtar img{ border-width:medium; }م

مإذامسصوملمأن مأرؼمض٦ظ٥مخزمل٦صممل مسؼملممل م..ماظغملالمماظلمملب٠مظؿملمبضملؿملا ممحلؽملممل مظذمل وممpوممaادؿكاعؽملممل

p,aمم مMukhtar img.و مم ماظذمل معؿضملػملؼمل٦ ممCSSؼرد٥ مسؽمل٦ان ماحملداتهومل

Selectorsمم م, مع٤مازلؾملممل مؼؾو مطؼملممل ممjQueryيفمو مSelectorsماحملداتصكملن

(ميفماظؾاؼهملمظؿملؿ٣متشملؾؿمل٠مHTMLاظذملمم)صظملقهملمWebاظذملممعلؿؽملع٤مسؽملمملصممجمؼمل٦سهملتلؿضملؼمل٢مظؿقؼم

مسػملؿملؾملمملمالحعملممل.مjQueryمحطمملتأوممدوالذ٨ءمع٤م

15

عمملمتؼهمبمملظسملؾمومؼغملظمل٨مؼمظؿقماظغملمملصؿملهملموغهملااظيتمتضملشملؿمل١مماحملداتسدمطؾرلمع٤مم١ظػؽملممل

مع٤محمداتممذاتؾملمملماظيتمتضملصؾملمملمCSSداتمكمأنمحمخدلأنمأ مصؿملؾملمملممjQueryتضملؿدلمبضملسملممل مبممل

ممCSSم3داتماظؽمللكهملمحم مCSS 3)اظذمل مصرتمم مإغؼملممل ماظغملؿمملبمو مطؿمملبهمل ملمتشملؾ٠محؿ٧ميصملهمل

م.علؾعملمملماحملدات١متضملفماظغملـرلمس٤ممملمؼضملينمأغممعضملمملؼرلػمملمصعمل(م

مjQueryرمنملمأنمتغملؿنملمذؿملظملةممjQueryبؿقؼمسدمع٤مسؽملمملصماظزملظملقهملميفممغمل٨متعمل٦مظ

م:بمملظرملغمل٢ماظؿمملظ٨م

jquery(„selector‟);

م:مأوم

$(„selector‟);

ماظزملظملقهملمضملينؼدماظيمميـ٢ماحملمSelectorحؿملىملمأنم وميفممجمؼمل٦سهملمعضملؿملؽملهملمع٤مسؽملمملص

متغمل٦نمحمداتمصق مأن ماظيتمميغمل٤ مدؽملؿضملفمسػمل٧مخمؿػملماظعملؿمل٣ ماظضمملئ٠ مػه مؿملقهمل يفممو,

م مصكملن مم$ايعملؿملعملهمل مضملؿدلؼمjqueryأو مازلني مان مواح مظؿمملب مصكملن مسػملؿمل٥ منياىؼملػملؿو

jquery(selector)مم مظغمل٤مملعؿغملمملصؽؿم(selector)$و مو مادلجمنيممن شمملظؾؿملهمل

إنممPHPؼظملسملػمل٦نماظرملغمل٢ماظـمملغ٨مغ٥مأضزملمأومرمبمملمغ٥مؼطماظؾضملمعؽملؾمل٣مبؿضملؼماؿطملرلاتميفم

م.طمملغ٦امع٤معدلجمؿملؾملممل

ممللمسؼملػمل٨مسػمل٧ما٦ض٦عمميغمل٤مأنمغعمل٦ممبؿقؼمصمؿملماظوابما٦ج٦دةميفماظزملظملقهملمومطؼملـ

تغمل٦نمما٦ج٦دةميفماظزملظملقهملمومسؽملئمaاظيمؼضملينمصمؿملمسؽملمملصماظ٦د٣ممaبمملدؿكامماحملدم

ماظؿضملػملؿملؼملهملماظيتمتعمل٦ممبؾملهماظ٦زؿملظملهمل:

$(„a‟);

:مأوم

16

jquery(„a‟);

بفملحممimgاظزملظملقهملمبمملدؿكامماحملدممومميغمل٤مأنمغعمل٦ممبؿقؼمطمملصهملماظزمل٦رما٦ج٦دةميف

م:ماظرملغملػملني

$(„img‟);

مأو

jquery(„img‟); .م

ػؽملمملمؼلؿكعمملنمبؽملظملماظزملؿملطملهملمامملصهملممبقداتمأوراقممimgوممaطؼملمملمتالحمصكملنماحملدؼ٤موم

مومطؼملـممللمسػمل٧مادؿكاممحمدمآخمميغمل٤مأنمغعمل٦ممبؿقؼمطمملصهملمخالؼمملم م, امنمملطماظيتمتضملصؾملممل

ماظ ميف ما٦ج٦دة ماحملدماىاول مبمملدؿكام مداخػملؾملممل مص٦رة مسػمل٧ مهؿ٦ي ماظيت مو زملظملقهمل

td:has(img)مبكملحىماظزملؿملطملؿنيم:م

$(„td:has(img)‟);

م:مأو

jquery(„td:has(img)‟);

م مأن مأمتؽمل٧ مبتغمل٦ن مامملصهمل مممملحملداتاظظملغملة مض م ماآلن مبضملممحؿملؽملؾملمملمم٦عملظؿاتسملقومل بؿفبهمل

م مبرملغملممملحملداتبمامملصهملمjQueryذؿملظملات مصظملقؿ١ مظيف مصضملػمل٨ معرملمملبؾملهملم٢ مصظملقهمل ؿؽملؿيمل

م:مملؼػمل٨

<html>م

<head>

<scriptمsrc=”jQuery.js” type=”text/javascript”>

</script>

17

<scriptمtype=”text/javascript”>

$(document).ready(function()م{

$(„a‟);

$(„img‟);

$(„td:has(img)‟);

});

</script>

</head>

<body>

حمؿ٦ىمصظملقؿ١م)اظصملمملػ(مدؿملغمل٦نمػؽملمملم

</body>

</html>

موممjQueryأؼهملمتطملؿملرلاتمسػمل٧ماظزملظملقهملمبضملمطؿمملبهملمذؿملظملاتممضمتلؿطملبمإنمملمت اىؼةمصؿملؾملممل

المؼؿ٣ممبؽملفملىمس٤مدوالماغملؿؾهملمحؿملىملمرمنملمأنمماحملداتادؿكاممممأنػؽملمملمرمنملمأنمغ٦ض

مؼذلاص مماحملدات٠مادؿكام مبمملغملؿؾهمل مسػمل٧ماض٢مظؿملاادؿكعمامملصهمل ميملؽملؿممإحىمدواهلممل

ؼمل٥مبضملمدضمملئ٠مضػملؿملػملهملمظغمل٤محمملظؿملمملمرمرمب١مأنمتضملفميفماظزملظملقهملمومػامذ٨ءمدؽملؿضملػملمعػملؼمل٦سمتطملؿملرل

مض٦ظ٥م مأرؼ معممل مو مبفمليمتطملؿملرل مملمؼعمل٣ مو ممتمملعممل متؼه معممل مبؿقؼ مضمملم ماظلمملبعملهمل مادشمل مادؿكام أن

بمملخؿ ..ػهمغعملشملهملممدمؼغملؿظمل٨مبؿقؼمجءمع٤ماظزملظملقهملمبؿملؽملؼملمملمتعمل٦مماظوالمبؿطملؿملرله"قزملمملرم:م"ا

م.مج٦ػؼهملمرمنملمأنمتظملؾملؼملؾملمملمضؾ٢ماؿمملبضملهمل

18

ماعم:معػملق٦زهمل مم$ميفمغؾملمملؼهمل ممjqueryو مإال مؼضملؿملظؿمللممل ماظيتممازلنيمظؿمملب ماظضملؽملمملص جمؼمل٦سهمل

م ماحملد ممselectorزمدػممل ماظضملؽملمملص مع٤ معزملظمل٦صهمل مذغمل٢ اظؽملؼملم)سػمل٧

array<element>بمملظؽمللؾهملمدلجم٨ممJava Script)ومػامعمملمؼضملفمبمملإلنػملؿملؼهملمم

م ممjQuery Wrapped Setبذمل ماغملؿؾهمل مرأي مسػمل٧ مؼس٦غو ماغملؿؾهمل مأؼسملمملم٥يفمت٦ثؿمل٠

ماخؿزملمملرام.مjQueryبمملظؽملؼملم

م..ماظزملؿملطملهملماظلمملبعملهملمتغملظمل٨مظؿقؼمجءمع٤مسؽملمملصمالؿؽملم,مسؽملئ ؼزملؾمبكملعغملمملغ١متشملؾؿمل٠ممحلؽملممل

مالم)ت٦اب(مأومحطمملتماغملؿؾهملمسػمل٧ماىءماحملدمبرملغمل٢معرملمملب٥ممملؼػمل٨:دومىحإ

$(„selector‟).function();

ؼضملؿملمتؽملظملؿملمػهمتشملؾؿملعملؾملمملم,موممؼػ٦ماد٣ماظاظهملمأوماد٣مايطهملماظيتمتمfunctionحؿملىملمأنم

اظؽملؼملمصمع٤مع٤ماظضملؽملمملمعزملظمل٦صهملمjQueryم(دوال)صم٢ممشمملظؾؿملهملومم(يفمايعملؿملعملهملماظهملاظ)اىؼملػملهملم

jQuery Wrapped Setمم ماحملد مضمملم ماظيت مذاتؾملممل ماظضملؽملمملص مselectorػ٨

مومظغمل٤مبضملمإحاثمتطملؿملرلمعمملمسػملؿملؾملمملمم,مومظؽملفملخماظلشملماظؿمملظ٨مسػمل٧مدؾؿمل٢ماـممللم:مبؿقؼػممل

$(„selector‟).hide();

ماظاظهملمselectorؼعمل٦مماحملدم مالؿؽملمتضملؿملػممل مػ٨مم$مبؿقؼمجمؼمل٦سهملمع٤مسؽملمملص طؼملممل

مخمملصؿملهملمزؾمل٦رػمملمإشممحمملظهملمسممؿملػهماظضملؽملمملصمذاتؾملمملمبضملمأنمتطملمةبكملسمملدمhideماظهملعمل٦مماظتبؿملؽملؼملمملم

ماظصملؾمل٦رم.م

مأحم مسػمل٧ماحملؿ٦ىماظيمؼضملؿمله مداظهمل مع٤ مأطـ متشملؾؿمل٠ مغلؿشملؿمل مغضملفمأغؽملممل مأن ماؾمل٣ مع٤ م و

مصؼملـالمميغملؽملؽملمملمطؿمملبهملم:ماحملدات

$)‟selector‟(.function1().function2();

19

مب ماظلمملب٠مدؿملعمل٦م محؿملىملمأنماظلشمل ماظاظهمل سػمل٧ماحملؿ٦ؼمملتماظيتمؼضملؿملػمملممfunction1ؿؽملظملؿمل

سػمل٧ماحملؿ٦ؼمملتماظيتمتضملؿملػمملممfunction2ث٣مؼعمل٦ممبؿؽملظملؿملماظاظهملممselectorاحملدم

ػ٦مغظملماظؽملؼملماظيمميغمل٤مموالوممبمملمأنماظؽملؼملماظيمتضملؿملهمػهماظمfunction1اظاظهملم

سػمل٧مممملندؿشملؾعملمfunction2وممfunction1ماظاظؿنيمهلمملمغظمللؾملمملمادؿعملؾمملظ٥مصؾملامؼضملينمأن

م ماحملد مؼضملؿمله ماظي مادؿسمملئؾملمselectorاحملؿ٦ى متتؿملنمل مصكملنؼملبؽملظمل مسػملؿمل٥ مو مؽمملذؿملمممل

م:طؼملمملؼػمل٨

$(‟selector‟).Q1().Q2().Q3(). … .Qn();

سػمل٧مموالع٤ماظمnنمػامؼضملينمأغ١متلؿشملؿملمتؽملظملؿملمسدمرائممػ٦مذ٨ءومممتمملعمملممملصقؿملقؼضملؿدلم

ؿمملظؿملهملماظهملماظظػملخالمدط٢مع٤مػهماظوالممؿملىملمؼغمل٦نمخجحباظضملؽملمملصماظيتمؼضملؿملػمملماحملدمغظملم

م!مjQueryظىمأػمملظ٨مضؾؿملػملهملممصعملمواحةمتضملػملؿملؼملهملمط٢مػهماظوسهملمتضملؿدلوممهلممل

مصؼملـالمميغملؽمل١مطؿفبهملمواضضملؿملهملمأنمتغملؿنملمعمملؼػمل٨م:

$(„a‟).fadeOut().addClass(„red‟);

مبمملظؾقىملمس٤مصمؿملماظوابميف )اظزملظملقهملممحؿملىملمدؿعمل٦ممػهماىؼملػملهملمسؽملمتؽملظملؿملػممل دمقنما

ومبضملمذظ١مممملسػملؿملؾملمملمصمؿملضملمfadeOutث٣متعمل٦ممبؿشملؾؿمل٠متفملثرلمم(ؼضملينمصمؿملماظوابمaالؿكمم

مredمماظزملمماظيمتؽملؿؼمل٨مظ٥مػ٦مCSS Classوضمل٢مضؿملؼملهملماظزملمامملصمب٦رضهملمامنمملطم

م.ظػملضملؽملمملصماحملدةم(مم”class=”redاظ٦اصظملهملممتسملؿملم:م)مبضملؽمل٧مآخ

بضملممjQueryاظرملؿملظملةماظؿمملظؿملهملمظزملظملقهملمتلؿضملؼمل٢ممطمملعػملهملمدسؽملمملمغغملؿنملمداتاحملضؾ٢مأنمغلؿضملضم

.ممملنصقؿملقموماد٣معػملماغملؿؾهملماسملؼمل٤مjQueryاظؿفملطمرؾضملمملمع٤مأنمعلمملرم

<html>

<head>

<title>أولماخؿؾمملرمى٨مط٦ؼيماظائضملهمل</title>

20

<script src="jquery.js" type="text/javascript">

</script>

<script type="text/javascript">

$(document).ready(function() {

$(„#Button1‟).click(function() {

$(‘#TextArea1’).toggle(‘slow’);

})

});

</script>

</head>

<body>

<input id="Button1" type="button" value="اغعملغ٨مظؿفبهملم

</ "اغملؿؾهمل

<textarea id="TextArea1" name="S1"></textarea>

</body>

</html>

وماظؽملعملمسػمل٧ماظرمدؿرملمملػمأبلمعمملمميغملؽمل١مسؼملػمل٥مبمملدؿكاممعغملؿؾهملمملمملبعملهملؿؽملظملؿملماظزملظملقهملماظظمغؿؿملفهمل

jQueryم.م

مماظؿمملظؿملهمل:معمملمؼؾملؼملينماآلنمأغؽملمملمادؿضملؼملػملؽملمملماظرملؿملظملة

$('#TextArea1').toggle('slow');

21

مومسؼمل٢معمملمذمملػت٥ميفماـممللمميفماظزملظملقهملممTextArea1اظضملؽملزملمذوماضملفمظػمل٦ص٦لمإشمم

اظضملؽملزملمذومممتمهؼضمومماظيتمدؽملؽملمملضمسؼملػملؾملمملميفمدضمملئ٠ماظوالمtoggleبمملدؿكامماظاظهملم

مم.مTextArea1#س٤مرؼ٠ماحملدممTextArea1اضملفم

جمؼمل٦سهملمسؽملمملصمحمدةمضؼمل٤مصظملقهملممظؿمللوملمأطـمع٤مjQueryمWrappedمSetمعػملق٦زهملم:

ومزلؿملوملمبؾملاماالد٣ماصشملالحمملمغؽملمملمغعمل٦ممبؿقؼػمملمأوالمبطملؿملهملماظعملؿملمملممبؽمل٦عم,ممؽملمملامملصهملمبمWebذملماظ

مسػملؿملؾملمملمالحعملمملمطممليطمملتمأوماإلضمملصمملتم.مjQueryع٤مسؼملػملؿملمملتم

jQueryتلؼمل٧مماحملداتمعمjqueryأومم$ماظهملظضملؿملػمملمادؿضملؼملممللماؼاظضملؽملمملصماظيتممم:تط

Wrapped SetأوممjQueryم.اخؿزملمملرام

امملصهملمبمملغملؿؾهملمطـرلةمصكملنمختزملؿملمصعملةمظغمل٢معؽملؾملمملمدؿملقملديمإشممإغؿمملجمطؿمملبمماحملداتومنم

مس ماظملؿمل مو موزغممل ماظـعملؿمل٢ ماظؽمل٦ع مع٤ م, مػملؼملممل مممع٤بالو مصعملة مختزملؿمل محمعلؿعملػملهمل مظغمل٢ ع٤مد

ومممسؼمل٢مط٢معؽملؾملمملمبلؾمل٦ظهمليفماىولماظؿمملظ٨مبرملغمل٢مؼ٦ضماحملداتدؽملؽملمملضمصمؿملمماحملدات

م)٤مزمنملماظلسهمل(مثمملغؿملممل:ماحملداتؼغمل٦نمظؼؽملمملمعجمدؼمىؼملؿملمط٨مػامأوالموم

مDescriptionماظ٦صمSelectorاحملدم

مالؿؽملما٦ج٦دةميفمضملؽملمملصاظصمؿملممؼضملين *

T ممينؼضمل ممTماظ٦د٣مسؽملمملصصمؿمل م)يفمالؿؽمل ؼضملينممpعـال

ؼضملينمصمؿملممaاظزملظملقهملموماظيتميفممpاظ٦د٦ممسؽملمملصمصمؿملم

مimgاظ٦د٦ممسؽملمملصمضملينمصمؿملمؼمimgوممaاظ٦د٦ممسؽملمملصم

م(ومػغملا

.C ماظ٦د٦مصمؿملممينؼضمل مCمامنمملطماظيتمتؽملؿؼمل٨مظزملمسؽملمملص

22

م(أؼمملمطمملنمغ٦سؾملمملمC”=class“م٦اصظملهملاظ٦د٦ممذاتماظ)

.C1 .C2 .C3 … .Cnمظمينؼضمل م متؽملؿؼمل٨ ماظيت ماظ٦د٦م مامنمملطمزملظمل٦فصمؿمل

مومط٢معمملممتمذطهمCnوممC3وممC2وممC1اط٦رة

#X اظ٦د٦ممذاتم)مXمفاظ٦د٦ممذاتماضملسؽملمملصمصمؿملممينؼضمل

م(أؼمملمطمملنمغ٦سؾملمملمX”=id“ماظ٦اصظملهمل

T F ممينؼضمل مصمؿمل مسؽملمملص ممFاظ٦د٦م مضؼمل٤ سؽملمملصما٦ج٦دة

مبرملغمل٢معؾمملذمومشرلمعؾمملذمTمم٦ود

T>F ممينؼضمل مصمؿمل مسؽملمملص معؾمملذممFاظ٦د٦م مبرملغمل٢ ا٦ج٦دة

مTود٦ممسؽملمملصمضؼمل٤م

مسؽمل) معـال مغغملؿنمل ممdiv>aعممل ماظوابمصكملغؽملممل مصمؿمل غضملين

م مضؼمل٤ مطمملنمdivا٦ج٦دة مصػمل٦ معؾمملذ اظذملممػامبرملغمل٢

divمم مػامذات٥ مخالؼممل مأح مو مجول مسػمل٧ زمؿ٦ي

مؼغمل٦ن مصػمل٤ مراب مسػمل٧ مهؿ٦ي ماخرلماىول ع٤ممػا

ماظواب ممضؼمل٤ ماحملد ماظيتمؼضملؿملػممل مأنممسؽملئ, ميغملؽملؽملممل

م ماظلمملبعملهمل ماظزملؿملطملهمل ماظوابمظؿقمdiv aغلؿكم مط٢ ؼ

(برملغمل٢معؾمملذمأومشرلمعؾمملذمdivاظيتمضؼمل٤مود٦مم

T+F ممينؼضمل ماظ٦د٣ مسؽملمملص ممFصمؿمل ماظ٦د٣ مظضملؽملمملص مTاجملمملورة

م) ماجملمملورة مبمملظضملؽملمملص مغظملمؼعملزمل مع٤ مابؽملمملء اظضملؽملمملص

مالؿ٦ى(

23

T:has)F( ماظ٦د٣ممينؼضمل مسؽملزملاممTصمؿملمسؽملمملص اظيتمهؿ٦يمداخػملؾملممل

م ماض٢ مسػمل٧ مواحا ماظ٦د٣ابؽملممل )عـالممFمع٤

Table:has(a)مرابشملمملمم مزمؿ٦ي مجول مأي ؼضملين

مواحامأومأطـمع٤مرابمضؼمل٤محمؿ٦ؼمملت٥(

TؼAصمؿملمسؽملمملصماظ٦د٣ممينؼضمل ػT٦اصظملهملفماظاظيتمتضملمA عؾملؼملمملمم

عـالمتلؿشملؿملمأنمتغملؿنملماحملد)مAم٦اصظملهملطمملغوملمضؿملؼملهملماظ

a[href]مسػمل٧مم مهؿ٦ي ماظيت ماظواب مصمؿمل ظؿضملؿمل

م(ؼملؿؾملمملعؾملؼملمملمطمملغوملمضؿملمhrefمواصظملهمل

TؼA=valueماظ٦د٣ممينؼضمل ػ ذطممAماظ٦اصظملهملفماظيتمتضملمTصمؿملمسؽملمملص

م مػه مماظ٦اصظملهملأنمتغمل٦نمضؿملؼملهمل عـالم)مvalueػ٨ماظعملؿملؼملهمل

مa[target=_blank]متلؿشملؿملمأنمتغملؿنملماحملد

م(ظؿضملؿملمصمؿملماظوابماظيتمتظملؿميفمغمملصةمػفمجؼة

TؼA^=valueماظ٦د٣ممينضملؼ ػ ذطممAمظملهمل٦اصفماظاظيتمتضملمTصمؿملمسؽملمملص

ماظ مػه ماظيتمهؿ٦ؼؾملممل ماظعملؿملؼملهمل مباؼهمل متغمل٦ن ػ٨مم٦اصظملهملأن

طمملصهملماظوابماظيتممظ٦مأردغمملمهؼمؼملـال)مصمvalueاظعملؿملؼملهملم

م محبيف مؼؾأ م٦ض مصمملحملدمdeتؽملعملػمل١

a[href^=www.de]م(ػمليبمحمملجؿؽملمملممتمملعمملؼم

TؼA$=valueماظ٦د٣ممينضملؼ ػ ذطممAم٦اصظملهملفماظاظيتمتضملمTصمؿملمسؽملمملص

مغؾملممل متغمل٦ن ماظأن مػه ماظيتمهؿ٦ؼؾملممل ماظعملؿملؼملهمل ػ٨مم٦اصظملهملؼهمل

م سػمل٧ممa[href$=.mp3]احملد)مvalueاظعملؿملؼملهمل

ماظوابماظيتمترملرلمإشممعػملظملمملتممينؼضملدؾؿمل٢ماـممللم صمؿمل

24

م(mp3ع٤ممنم

TؼA*=valueماظ٦د٣ممؼضملين ػ ذطممAم٦اصظملهملفماظاظيتمتضملمTصمؿملمسؽملمملص

تؿسملؼمل٤ماظعملؿملؼملهملمم٦اصظملهملأنمتغمل٦نماظعملؿملؼملهملماظيتمهؿ٦ؼؾملمملمػهماظ

valueاحملد)مa[href*=great]مينؼضملم

م مسػمل٧ مسؽمل٦اغؾملممل مزمؿ٦ي ماظيت ماظواب غملػملؼملهملماظصمؿمل

great)م

selector:first ممؼضملين مظػملؼملقد معشملمملب٠ مسؽملزمل سػمل٧ممselectorأول

مالؿؽمل م)معلؿ٦ى سػمل٧ممa:firstماحملدادؿكام

م ماـمملل مومدؾؿمل٢ مالؿؽمل ميف مراب مسؽملزمل مأول ؼضملؿمل

م ممdiv img:firstماحملدادؿكام أولمؼضملؿمل

م(يفمالؿؽملمdivم٣مص٦رةمع٦ج٦دةمضؼمل٤مودمسؽملزمل

selector:last ممؼضملين مظػملؼملقد معشملمملب٠ مسؽملزمل سػمل٧ممselectorآخ

معلؿ٦ىمالؿؽمل

selector:first-child عشملمملب٠مظػملؼملقدمماب٤مأولمسؽملزملمينؼضملselectorسػمل٧مم

ماحملد ماـمملل)معلؿ٦ى مدؾؿمل٢ مسػمل٧ مادؿكعؽملممل مإذا

ممdiv a:first-childمماحملد ط٢ممينضملغصكملغؽملممل

م مود٣ مط٢ مضؼمل٤ مع٦ج٦د مراب ومميفمالؿؽملمdivأول

م مصعملمطؼملممل مظػملؼملقد معشملمملبعملهمل مظؿملمأولمحمملظهمل معمػ٦ ايمملل

first)م

selector:last-child عشملمملب٠مظػملؼملقدماب٤مآخمسؽملزملممؼضملينselectorسػمل٧مم

25

معلؿ٦ىماحملد

selector:only-child اشملمملب٠مظػملؼملقدماالب٤ماظضملؽملزملممؼضملينselectorذطمم

مؼغمل٦ مأن موزل٥ ميف موحؿملا مصمؿملم)ن مغضملؿمل مأن مأردغممل ظ٦

م مود٦م مضؼمل٤ ما٦ج٦دة مؼ٦جممdivاظواب مأال ذط

ميفمط٢م مع٤مرابماب٤مجممملور صكملنمادؿكاممممdivأطـ

مدؿملػمليبمعشملػملؾؽملممل(مdiv a:only-childماحملد

selector:nth-child)n( ممؼضملين مرض٣ ماالب٤ مظػملؼملقدمnاظضملؽملزمل ماشملمملب٠

selectorمم)م مهعـال مأردغممل ماظابمظ٦ ماظاب ؼ

م مود٣ مط٢ ميف ماحملدممdivا٦ج٦د مغغملؿنمل صكملغؽملممل

م(مdiv a:nth-child(4)اظؿمملظ٨

selector:nth-

child)even(

مامؼضملين ماشملمملبعملهملماظضملؽملمملص ماظوجؿملهمل مارضمملم مذات بؽملمملء

ممselectorظػملؼملقدم

selector:nth-

child)odd(

مامؼضملين ماشملمملبعملهملماظضملؽملمملص ماظظملدؼهمل مارضمملم مذات بؽملمملء

مselectorؼملقدمظػمل

selector:nth-child)Xn( ممؼضملين معسملمملسظملمملتمااظضملؽملمملص ماظيتمع٤ مذاتمارضمملم مXبؽملمملء

م) ممعـال مط٦نماظذمل ممXيفمحمملظهمل ماحملدمصكملنم3زمؼمل٢ماظعملؿملؼملهمل

ومؼضملينممdiv a:nth-child(3n)اظؽملؾملمملئ٨مؼزملؾ

سػمل٧مأنمؼغمل٦نممdivصمؿملماظوابما٦ج٦دةميفمود٦مم

اظابممهماظوابمػ٨ػموم3اظضملدمتتؿملؾؾملمملمع٤معسملمملسظملمملتم

اظـمملظىملموماظلمملدسموماظؿمملدموماظـمملغ٨مسرملمومامملعمسرملم...م

26

م(ومػغملا

selector:nth-

child)Xn+Y(

مبضملمط٢ممYمؼضملين مابؽملممل م)ممملءبؽملأمXسؽملزملا يفمحممللمط٦نمعـال

م مم2ػ٨ممYضؿملؼملهمل مضؿملؼملهمل مم3ػ٨ممXو ماحملددؿملزملؾمذغمل٢

مػاممdiv a:nth-child(3n+2)اظؽملؾملمملئ٨ و

مdivمبضملمط٢مثالثهملمروابمع٤مأبؽملمملءمرابشملنيهؼممؼضملين

مؼضملين مامملمممممل مو ماظاب ماظابمعاظواب )رابشملنيمبضمل

ومم)رابشملنيمبضملماظابماظلمملدس(موماظلمملبموماظـمملع٤ماظـمملظىمل(

مايمملديمسرمل مو مومم)رابشملنيمبضملماظابماظؿمملد(ماظضملمملذ ....

م(ػغملا

selector:even ماشملمملبعملهملمؼضملين ماظوجؿملهمل مارضمملم مذات ظػملؼملقدمماظضملؽملمملص

selectorمسػمل٧معلؿ٦ىمالؿؽملم

selector:odd مظػملؼملقدممؼضملين ماشملمملبعملهمل ماظظملدؼهمل مارضمملم مذات اظضملؽملمملص

selectorمسػمل٧معلؿ٦ىمالؿؽملم

selector:eq)n( ممؼضملين ماظذلتؿملنمل مذو مظػملؼملقدممnاظضملؽملزمل اشملمملب٠

selectorمسػمل٧معلؿ٦ىمالؿؽملم

selector:qt)n( ممؼضملين ماظذلتؿملنمل مذو ظػملؼملقدمماشملمملب٠مnاظضملؽملزمل

selectorمسػمل٧مم ماظيتمتػملؿمل٥ ماشملمملبعملهمل ومصمؿملماظضملؽملمملص

معلؿ٦ىمالؿؽمل

selector:lt)n( ممؼضملين ماظذلتؿملنمل مذو مظػملؼملقدممnاظضملؽملزمل اشملمملب٠

selectorومصمؿملماظضملؽملمملصماشملمملبعملهملماظيتمتلؾعمل٥مسػمل٧مم

27

معلؿ٦ىمالؿؽمل

:animated ممؼضملين محمملظؿملممل ميطهمل ماظيتمختسمل ماظضملؽملمملص دؽملؽملمملضم)صمؿمل

م(هملضمملدعمدضمملئ٠مايطمملتميف

:button مسؽملمؼضملين ميفمالؿؽملصمؿمل ما٦ج٦دة مازرار مد٦اءممملص

م ماظؽمل٦ع مع٤ ممsubmitأطمملغومل ماظؽمل٦عمreset أو أو

buttonمبرملغمل٢مسمملمم

:checkbox صمؿملمسؽملمملصمصؽملمملدؼ٠ماالخؿؿملمملرممؼضملينcheck boxesم

:checked ممؼضملين ماحملدة ماالخؿؿملمملر مصؽملمملدؼ٠ مسؽملمملص أسينم)صمؿمل

مؼغمل٦ معممل مبمملحملدة م محمملظؿؾملممل مأطمملغوملممcheckedن د٦اء

check boxأوممradio button)م

:contains)s( صمؿملماظضملؽملمملصماظيتمهؿ٦يمسػمل٧ماظؽملممؼضملينsعـالمؼضملؿملم)م

مسؽملمملصممp:contains(jQuery)احملد صمؿمل

م مطػملؼملهمل مسػمل٧ مهؿ٦ي ماظيت مرمرممjQueryاظؽملزمل٦ص و

مأن مػؽملممل ماحفممػاماإلذمملرة ميمملظهمل محلمملس احملد

(YESومختؿػملمس٤ممyEsؿػملمس٤مختمYesصمملظغملػملؼملهملم

:disabled (هملاظظملضملمملظشرلماظضملؽملمملصم)صمؿملماظضملؽملمملصماضملشملػملهملممؼضملين

:enabled مظملضملمملظهملصمؿملماظضملؽملمملصماظمؼضملين

:file ممؼضملين معغملمملصلملمظػملؼملقدمماػملظملمملتاخؿؿملمملرمصمؿملمسؽملمملص مػ٦ و

input[type=”file”]م

28

:header ممؼضملين مصمؿمل مبمملظضملؽملمملوؼ٤مسؽملمملص مامملصهمل اظ٦د٦م

h1,h2,h3,h4,h5,h6م

:hidden مصمؿملماظضملؽملمملصماكظملؿملهملمؼضملين

:image ماظؽملؼملمملذجمؼضملين مص٦ر مود٦م مظػملؼملقدممصمؿمل معغملمملصلمل مػ٦ و

input[type=image]

:input ماظؽملؼملمملذجممؼضملين مود٦م مم inputصمؿمل وممselectو

textareaوممbutton

:not)selector( ماحملدممؼضملين متشملمملب٠ مال ماظيت ماظ٦د٦م صمؿمل

selectorمؼضملؿمل)م ماحملدمعـال

:input:not(:button)مسؽملمملصمم صمؿمل

ماظؽملؼملمملذجمسامازرارمعؽملؾملممل

:parent اظيتمهؿ٦يمسػمل٧مسؽملمملصم)صمؿملمسؽملمملصماظ٦د٦مماآلبمملءممؼضملين

م(ود٦ممصسؿملهملممبمملمصؿملؾملمملماظؽملزمل٦ص

:password ممؼضملين مسؽملمملص معغملمملصلملممصمؿمل مػ٦ مو مطػملؼملمملتماور إدخمملل

input[type=password]ظػملؼملقدم

:radio سؽملمملصمأزرارماالخؿؿملمملرممصمؿملمؼضملينradio buttonم

:reset مأزرارمإسمملدةماظؿضملؿملنيصمؿملممؼضملين

:selected ممؼضملين ماكؿمملرة ماالخؿؿملمملر مسؽملمملص selected)صمؿمل

options)م

29

:submit مصمؿملمأزرارماإلردممللمؼضملين

:text ممؼضملين ماظؽملزمل٦صصمؿمل مإدخمملل معغملمملصلملممعبضملمملت مػ٦ و

input[type=text]ظػملؼملقدم

:visible مصمؿملماظضملؽملمملصماظصملمملػةمؼضملين

Selector1,Selector2,م

…,Selectorn ممينؼضمل ماجؿؼملمملع مصمؿمل مسؽملمملص ماظيت متضملؿملػمملاظ٦د٦م

مػ٦مماحملدات معممل مط٢ مػؽملممل مبمملحملد مؼعملزمل مو اط٦رة

جاممعط٦رميفمػاماىولمومػهماظعملمملسةمتضملؿدلمعظملؿملة

مالم ماظزملظملقهمل مع٤ مطـرلة مأجاء مبؿقؼ ماظشؾهمل محمملل يف

مؿقؼػمملأنمؼعمل٦ممبواحمؼلؿشملؿملمحمدم

م

ماظغملؿمملبمػ٦مأومينمأزس٣مأنغ اظؿؽمل٦ؼ٥ممب٨مصؿملفرمjQueryمؽملمملضمعغملؿؾهملؼمسب٨مطؿمملبلمػا

م مإصارػممل ميف متال مال ماغملؿؾهمل مأن موم0.3.2إشم متفملظؿملظمل٥ متمملرؼ مع٤مظػؽملمملمحؿ٧ ماؼ ١

مماحملدات مع٤ مجؼ مإصار مط٢ مإشم متسملمملف ماظيت ماىؼة ماظائضملهملمإصارات اغملؿؾهمل

jQueryاغملؿؾهملمبرملغمل٢مسمملممس٤مبرملغمل٢مخمملصمومماحملداتس٤ممومميغملؽمل١معؿمملبضملهملمط٢مجؼم

م.مwww.jquery.comممظغملذلوغ٨ؾملمملماإلع٦ضضملمإشمسدلماظخ٦لم

30

مجؼةم:مHTMLت٦ظؿملمحمؿ٦ؼمملتم

ميفمطـرلمع٤متشملؾؿملعملمملتماظ ممWebذمل ؼؿ٣ممRich Internet Applicationsاظطملؽملؿملهمل

بضملمسضؾملمملمصؼملـالميفمعطمرصماػملظملمملتماظرملؾملرلممجؼةمإضمملصؿملهملمظػملزملظملقهملمHTMLت٦ظؿملمحمؿ٦ؼمملتم

com.multiupload.wwwاظصملمملػميفماظزمل٦رةمؼلؼملمظ١مبصمعػملمواحمطقمأضزمل٧مم

مظصم مايمملجهمل محمملل ميف مو اصذلاضؿملممل

مبؽملعملةم مميغملؽمل١ ماػملظملمملت مع٤ اؼ

ممواحة ماظر one moreسػمل٧

fileمإشممم مجؼا معػملظملممل متسملؿمل أن

مغظملم ميف ماػملظملمملت مهؼ عبضملمملت

مإسمملدةم مإشم مايمملجهمل مدون اظزملظملقهمل

ومظضمل٢ماظزمل٦رماىمملغؾؿملهملمت٦ظؿملماظزملظملقهملم,م

مت٦ضماظظملغملةم.

مطؿملمحؿملىمل ماظـمملغؿملهمل ميفماظزمل٦رة مؼصملؾمل

معبموملمت مظصممإضمملصهمل جؼ

مأخىماػملظملمملت معة مغعملغممل مظ٦ سػمل٧ممو

ضؿملممone more fileاظرم

مآخمومػغملامجؼمعب ومبمملظشملؾمم,م

امزمثميفمإلخؾمملركمأنمػم٨المداس

رفماظضملؼملؿمل٢مدونمأيمإسمملدةمهؼملؿمل٢م

ممServerمكمملدمظػملزملظملقهملمومدونمإردممللمأيمرػملنملمظػمل مسػمل٧مإضمملصهملم, مجا مذمملئضملممل مؼضملؿدلمعـمملال ػا

ممHTMLحمؿ٦ؼمملتم ماظائضملهمل ماغملؿؾهمل مت٦ص مو مظػملزملظملقهمل مبؾلمملرهملممjQueryجؼة ماإلعغملمملغؿملهمل ػه

31

م مصؿملؾملممل مط٢مذ٨ء مطؼملممل مذؼة محمؿ٦ىم, مظػملزملظملجؼمHTMLصؿملغملظمل٨مإلضمملصهمل ماظزملؿملطملهملم مأنمتؿؾ قهمل

م:اظؿمملظؿملهمل

$)HTML(

مHTMLظطملهملمغؼمت٦ظؿملهمعغملؿ٦بمملمبمملدؿكامممػؽملمملمتضملينماحملؿ٦ىماىؼماظيمHTMLحؿملىملمأنم

م مو مصمملظزملؿملطملهملاظضملمملدؼهمل متالح ممطؼملممل ميف مالؿكعهمل مذاتؾملممل مإنم,ماحملداتػ٨ طؿمملبهملممو

(„<div>‟)$إلضمملصهملمسؽملزملممdivطؿمملبهملممجؼمظػملزملظملقهملمتغملمملصلملم(„<div><div/>‟)مم$م

عمأغينممطؿلؾملؿمل٢مظػملؼملدلجمنيممبضملؽمل٧مأغ٥مالمحمملجهملمإلشالقماظ٦د٣مصمملغملؿؾهملمتؿ٦شممذظ١مغؿملمملبهملمسؽملممل

م.م٤مؼؼمأنمؼشملؼملؽ٤مضػملؾ٥مأصسمل٢مادؿكامماظرملغمل٢ماظغملمملع٢

م: م"م٦ظ٦نؼعملمعػملق٦زهمل ظألدمممملصكملغؾملم٦لاظعملماس٤مػمومط٨مالمترملماغملؿؾهملم,م"ظغمل٢مضمملسةمذ٦اذ:

م.بمملدؿكامماظشملؼعملهملماط٦رةمscriptمملصماظ٦د٣مإغرملمملءمسؽملع٤ممؽملمملؽملغملمتالماظرملؼم

م مصكملنمعغملؿؾهمل ماظزملؿملطملهمل مادؿضملؼملممللمػه موممjQueryسؽمل تضملؿملماحملؿ٦ىماىؼماظيممتمإغرملمملؤه

مع٤ماظزملظملقهملم مإضمملصؿ٥ميفماغملمملنماشملػمل٦بممتمملعممل مظؿضملشملؿمل١مبظ١محؼهمل مظػملزملظملقهمل متسملؿملظمل٥ مال ظغملؽملؾملممل

مصؼملـالمميغملؽمل١مأنمتغملؿنملمذؿملؽمملمعـ٢م:

$(„<div> يمجؼحمؿ٦ىمج٨مط٦ؼ </div>‟).append(„#id‟);

حؿملىملمتعمل٦ممػهماظؿضملػملؿملؼملهملمبكملضمملصهملماحملؿ٦ىماىؼماظيموظت٥ميفمآخماؽملشملعملهملماظيتممتؿػمل١م

مومػهمػ٨موزؿملظملهملماظاظهملممidاضملفم امإحىمدوالماغملؿؾهملماكزملزملهملمهلمappendمتمملعممل

م.مهملظؿمملظؿملامضمملئ٠ؾملمملمومسؼمل٢مأخ٦اتؾملمملمبمملظؿظملزملؿمل٢ميفماظؼملػملفمسػمل٧مسا٦ض٦عموماظيتمدؽملؿضمل

32

م

م

م

م

م:م57إشمماظضؿملعملهملمم32ع٤ماظضؿملعملهملم

مموالاظ

Functions

م

33

م:Functionsمموالاظ

م.. ماآلن ممو متشملؾؿمل٠مأح ماظيتمتضملػملماحملداتبضمل ماظشملؼعملهمل مبمملدؿكام مو مضػملؿمل٢ مضؾ٢ إسمملدت٥مؼملؽملمملػممل

مأومبضملمت٦ظؿمل ؽملمملمغزملؾمجمملػؼ٤مظؿشملؾؿمل٠مذ٨ءمع٤مصكملغمػهماظضملؽملمملصمجملؼمل٦سهملمع٤مسؽملمملصمصظملقؿؽملممل

ظؽملضملشمل٨مم(jQuery Wrapped Set)مأومحطمملتؾملمملمسػمل٧مػاماحملؿ٦ىمjQueryدوالم

هماظوالمإشمم,مومدؽملعمل٦ممتلؾملؿملالمبؿعمللؿمل٣مػمضمملئ٠اظمهظملقؿؽملمملمومػامعمملمدؽملؽملمملضرمل٥ميفمػايؿملمملةمظزمل

م.هملمامملصهملمبغمل٢دملمعؽملؾملمملجمؼمل٦سمملتمحلنملماظ٦زؿملظمل

م:ممAttributesماظ٦د٦مممواصظملمملتماظؿضملمملع٢معدوالم

م:ممملظ٨مسػمل٧مدؾؿمل٢ماـممللظ٦مغصملغمملمظػمل٦د٣ماظؿ

<img src=”images/pic1.gif” alt=”imageOne” title=”image

one” width=”40” height=”20”>

مأغ وممheightعـ٢ماالرتظملمملعممAttributesؽملهملمعضملؿملمؾملمملمص٦رةممتؿػمل١مواصظملمملتظضملصؽملمملمعؾمملذة

مwidthاظضملضم امعمملمومػمsrcومعزملرماظزمل٦رةممaltماظؾؼ٢موماظؽملمtitleوماظضملؽمل٦انمم

جمؼمل٦سهملممظضملعملةاهمهل,ذفةمطمملئؽملمملتمالؿؽملمع٤مسعملمممnodeبضملعملةممWebذملمميـػمل٥معلؿضملضماظ

م)مPropertiesع٤مازملمملئم مع٤مواصظملمملتماظ٦د٣ مواصظملهمل معؽملؾملممل ؼمملممبػمل٧تعملمملب٢مط٢مخمملصؿملهمل

م.مسعملمذفةمالؿؽملمترملؾ٥ماظغملمملئؽملمملتميفمظطملمملتماظدلجمهملمشضؿملهملماظؿ٦ج٥(م..مصؼعمل٨مادلعيمل

الؿؽملمصكملنمأيمتطملؿملرلميفمخزملمملئمإحىماظضملعملمدؿملؽملضملغملمطمملئؽملمملتمذفةممبضملمإغرملمملءمعػملق٦زهملم:

ؽملماغملؿؾهملممآخمومػامتظمللرلعؾمملذةمسػمل٧مضؿملؼملهملماظ٦اصظملهملماعملمملبػملهملمظػمل٦د٣ماعملمملب٢ميفماظزملظملقهملم

م.مملغمملمع٤متؽملظملؿملمأواعػمملمضؾ٢ماطؿؼملممللمبؽملمملءمػهماظرملفةإؼ

34

محعملؿملعملهملمبمملدؿكاممرؼعملهملمبمملظؿضملمملع٢معمػهماظ٦اصظملمملتمأومازملمملئمjQueryتلؼملمظؽملمملمعغملؿؾهملم

مصؿملغملظمل٨مالدؿضملمملدةمضؿملؼملهملمإحىمػهماظ٦اصظملمملتمأنم رملغمل٢مظبمملمattrغلؿضملؼمل٢ماظاظهملمبلؿملشملهملمجا

م:اظؿمملظ٨

$(„#id‟).attr(„attributeName‟);

مدؽملمملدومؼغملظمل٨مإلمidامملصهملمبمملظ٦د٣مذوماضملفممattributeNameلؿضملؿملمضؿملؼملهملماظ٦اصظملهملمؽملظ

م:بمملظرملغمل٢ماظؿمملظ٨مattrاظهملمغلؿضملؼمل٢ماظحىمػهماظ٦اصظملمملتمأنمإلضؿملؼملهملم

$(„#id‟).attr(„attributeName‟ , „value‟);

مؽملظ ماظ٦اصظملهمل ماضملفممattributeNameفضمل٢مضؿملؼملهمل مبمملظ٦د٣مذو مظػملعملؿملؼملهملممidامملصهمل علمملوؼهمل

value.م

اظيمؼضملؿملمسؽملزملامواحاميفماظضملمملدةم)إذامملممid#أسؿعملمأغ١مالحصملوملمأغينمادؿضملؼملػملوملماحملدم

قملالماظيمث٣مضؼملوملمبؿطملؿملرلمإحىمواصظملمملتمػاماظضملؽملزملموماظلؿ١(ميفمصظملقمرةتسملمعضملصمملتمعغمل

داتمتضملؿملمجمؼمل٦سهملمع٤مؼشملحمغظملل٥ماآلنمػ٢مدؿؽملفمػهماظؿضملػملؿملؼملهملميفمحممللماظؿضملمملع٢معمحم

ماظضملؽملمملصم؟م

ماظلقملالمسدلمتفملعنيمماغملؿؾهملمت٦صخمل مهلا رؼعملهملمظػملؿضملمملع٢معمواصظملهملمعمملمجملؼمل٦سهملمع٤ماظضملؽملمملصمج٦ابممل

مصم مسػمل٧ ماظوران مرؼ٠ مسؽملمملصمس٤ مىؼملؿمل معضملؿملؽملهمل مواصظملهمل مظعملاءة مصؿملغملظمل٨ م, ماظضملؽملمملص متػمل١ ؿمل

ملؿكمماظزملؿملطملهملماظؿمملظؿملهملم:تجمؼمل٦سهملمعضملؿملؽملهملمأنم

$(„selector‟).each(مfunction(n){

$(this).attr(„attributeName‟);

;{(م

م

35

مضؿملؼملهملمواصظملهملمعضملؿملؽملهملمىؼملؿملمسؽملمملصمجمؼمل٦سهملمعضملؿملؽملهملمأنمتلؿكمماظزملؿملطملهملماظؿمملظؿملهملم:ممدؽملمملدومؼغملظمل٨مإل

$(„selector‟).each(function(n){

$(this).attr(„attributeName‟ , „value‟);

;{(م

مترملرلمإشمماظضملؽملزملمايمملظ٨مأثؽملمملءماظورانمthisمةاظغملػملؼملهملماحملف٦زميفمػهمايمملظهملمصكملنمم:تط

each.م

م م٤مالمزمنملماظوران ماغملؿؾهملممeachو مت٦ص مايػملعملمملتماظؿغملارؼهمل مظؿملؿط مؼضمل٦د مأن مؼؼ مال و

إلدؽملمملدمضؿملؼملهملمواصظملهملمأومجمؼمل٦سهملمع٤مضؿمل٣ماظ٦اصظملمملتمىؼملؿملمسؽملمملصماجملؼمل٦سهملممأدؾمل٢مىرؼعملهملمأخ

م:اظيتمؼضملؿملػمملماحملدمس٤مرؼ٠مادؿكامماظزملؿملطملهملماظؿمملظؿملهمل

$(„selector‟).attr(JSON);

م ممJSONحؿملىملمأن مؼضملف مال مع٤ متػمل١ماظ٦اصظملمملتمو مطمملئ٤مميـ٢ مإشمممJSONػ٦ مؼؽملؿعمل٢ مأن ظ٥

٥مؼغملؿرملمأغؾملمملمجمدمرؼعملهملمؼؽملصملمعضمل٨مظػملؼملـممللماظؿمملظ٨مظضملػملمأنمبكملعغملمملغ٥مأوماػملق٦زهملماظؿمملظؿملهملمث٣مؼضمل٦د

م:برملغمل٢معلؿعمل٢مس٤ماظؽملصملمملممم٢مسؽملمملصم)سعمل(مذفةمالؿؽملؿملظؿؼملـ

$(„:input‟).attr(

{ valueم:„‟ , titleؼج٧مإدخممللمضؿملؼملهملميفمػامايعمل٢„:م‟ }

);

امملصهملممvalueؿملهملممملصم‟„مومطؼملمملمتؿ٦ضمصكملنمادشملمأسالهمتعمل٦ممبكملدؽملمملدماظعملؿملؼملهملماظؽملزملؿملهملماظظملمملرشهمل

متجب مو ماظؽملزمل٦صميفماظزملظملقهمل معبضملمملت ماظعملؿملؼملهملؼملؿمل مبكملدؽملمملد ميفمػام‘معمل٦م مضؿملؼملهمل مإدخمملل ؼج٧

ممامملصهملمجبؼملؿملمعبضملمملتماظؽملزمل٦صميفماظزملظملقهملم.مtitleظػملكمملصؿملهملمم’ايعمل٢

م

36

مؼؾعمل٧مأنم مو مواصظملمملتماظضملؽملمملص مإشم" م"اظغملؿمملبهمل مو مع٤" م"بمملظعملاءة مغضملفمطؿملمغعمل٦م ماآلنمأصؾقؽملممل و

محفم ماظغضملفمأغ٥مميغملؽملؽملممل مبمملدؿكام ماظرملغمل٢ممremoveAttrماظهملاظ٦اصظملمملتمأؼسملممل اظيتمهلممل

م:ماظؿمملظ٨

$)‟#id‟(.removeAttr)‟attributeName‟(;

م مأن ممattributeNameحؿملىمل محصؾملممل مغؼ ماظيت ماظ٦اصظملهمل ماد٣ مسػمل٧ممي٢ مطؼملـمملل و

مضمغغملؿنملمعمملؼػمل٨:مremoveAttrادؿكامماظاظهملم

$)‟a‟(.removeAttr)‟target‟(;

.مع٤مصمؿملماظوابميفمالؿؽملمtargetهملميفماظ٦اصظمل

أيمتعؿملممJava Script Object Notationػ٨ماخؿزملمملرمظذملممJSONمعػملق٦زهملم:

إذمأغ٥مؼعمل٦ممبؿؼملـؿمل٢ممجامسػمل٧مسغملمازل٥ماكؿملمطمملئ٤مجمملصمملمدغملبوملمومػاماظذلعؿملمبلؿملمجا

مخزملمملئماظغملمملئ٤مبرملغمل٢مأزواجم)عظملؿمملحم/مضؿملؼملهمل(مسػمل٧ماظرملغمل٢ماظؿمملظ٨م:

{

Key1 :مم „value1‟م,

Key2 :مم „value2‟م,

,م…

Keyn :مم „valuen‟

}

م زمؼمل٢ماظعملؿملؼملهملممkey2وماظملؿمملحممvalue1زمؼمل٢ماظعملؿملؼملهملممkey1حؿملىملمأنماظملؿمملحم)امملصؿملهمل(

value2اظملؿمملحموممkeynزمؼمل٢ماظعملؿملؼملهملممvaluenمػغملام.ومم

37

م:مStylesاظؿضملمملع٢معمامنمملطمدوالم

متقملع معغملؿؾهمل مظؽملممل ٤jQueryمعم ماظؿضملمملع٢ مسػمل٧ مأمنمملطاظعملرة مس٤مم)م مطمملئؽملمملتماظزملظملقهمل دؿمملؼالت(

مع٤ماظ ممنمجؼرؼ٠مجمؼمل٦سهمل مبكملضمملصهمل مظؽملممل محؿملىملمتلؼمل مجؼ(مCSS Class)موالم,

م:ؼػمل٨اظيتمتلؿضملؼمل٢مطؼملمملمaddClassمظػملضملؽملمملصمس٤مرؼ٠ماظاظهمل

$)‟selector‟(.addClass)‟className‟(;

ماظؽملؼملم مبكملضمملصهمل ماظاظهمل ماضملمclassNameحؿملىملمتعمل٦ممػه امنمملطمامملصهملمفمضؼمل٤مورضهمل

م ماحملد ماظيتمؼضملؿملػممل ماظضملؽملمملص مإشممجمؼمل٦سهمل مع٤ماظسملوريمأنممselectorبمملظزملظملقهمل مػؽملممل و

غؿطمأنمأيمسؽملزملميفمالؿؽملمؼلؿشملؿملمأنمؼؽملؿؼمل٨مطـمع٤مصميفمورضهملمامنمملطمذطمأنم

مالمspaceغظملزمل٢مبنيمأزلمملءماظزملظمل٦فممبقفمالمملصهملم ممممملثالممومظا مغىمذؿملؽممل غلؿطملبمسؽملعممل

مػمل٨م:مملمؼ

<span class=”class1 class2 class3 class4 … classn”> </span>

مؼمومالمغلؿطملبمسؽملعممل ماظضملؽملزمل ومػاممspanؿ٣متشملؾؿمل٠مطمملصهملمخزملمملئماظزملظمل٦فماط٦رةمسػمل٧م

نمسؼملػملؾملمملماظظملضملػمل٨مػ٦مإضمملصهملمممنمجؼمإشمممaddClassدؾنملمتلؼملؿملهملماظاظهملماظيتمغؽملمملضرملؾملمملمبذملم

مإضممليفمظألمنمملطما٦ج٦دةمأصال.ماظضملؽملمملصماظيتمؼضملؿملػمملماحملدمبرملغمل٢

م

م معغملؿؾهمل متلؼملمظؽملممل ممjQueryسػمل٧ماظؽملعملؿملممتمملعممل اظيتمؼؽملؿؼمل٨مهلمملممصظمل٦فمامنمملطحبفمأح

ماظيتمتلؿكممبمملظرملغمل٢م:مremoveClassهملمطمملئ٤معضملنيمس٤مرؼ٠ماظاظ

$(‟selector‟).removeClass(‟className‟);

38

مخزملممل متشملؾؿمل٠ مبكملؼعملمملف ماظاظهمل مػه متعمل٦م مأن ماظشملؾؿملضمل٨ مع٤ مو سػمل٧ممclassNameئماظؽملؼمل

م.مselectorجمؼمل٦سهملماظضملؽملمملصماظيتمؼضملؿملػمملماحملدم

م ماغملؿؾهمل متقملعؽملؾملممل ماظيت مجا ماىؼملؿملػملهمل ماظوال ماظعملػملنملممjQueryع٤ مداظهمل مػ٨ أؼسملممل

toggleClassإشمماظضملؽملمملصماظيتمالمتؽملؿؼمل٨مإظؿمل٥مع٤مماظؽملؼملمصظمل٦فاظيتمتعمل٦ممبكملضمملصهملمأحمم

اظزملمسػمل٧ماظضملؽملمملصممذاتماظ٦ضوملمبكملؼعملمملفمتشملؾؿمل٠اجملؼمل٦سهملماظيتمؼضملؿملػمملماحملدمومتعمل٦ممبؽملظملم

ماظيتمتؽملؿؼمل٨مإظؿمل٥مع٤ماجملؼمل٦سهملماظيتمؼضملؿملػمملماحملدمومهلهماظاظهملماظرملغمل٢ماظؿمملظ٨م:

;)‟selector‟(.toggleClass)‟className‟($م

مإشمماـممللم مظغمل٤مإنمغصملغممل ماوشممو ميفماظ٦ػػملهمل معلؿؾملفؽملممل ماظاظهمل مسؼمل٢مػه مؼؾو مض ماظؿمملظ٨و

م:ؽملمملمضؼملؽملمملمبغملؿمملبهملماظزملظملقهملماظؿمملظؿملهمل,مظؽملظملذلضمجالمأغمػهماظاظهملمغملؾرلةماظيتمتعملعؾملمملدؽملىماظظملمملئةماظ

<html>

<head>

<title>مممم اخؿؾمملرمداظهملماظعملػملنملضؾ٢م </title>

<"type"=text/cssمstyle>مممم

.black {

;background-color:blackمممممممممم م م

;color:White مممممممممممم

}

<style/>مممم

</head>

<body>

39

<”table id=”table1>مممم

<tr>مممممممم

<td/>اد٣ماؽملؿيمل<td>مممممممممممم

<td/>دضملماؾؿمل<td>مممممممممممم

<tr/>مممممممم

<tr>مممممممم

<td>مممممممممممم 0عؽملؿيملمم </td>

<td>مممممممممممم 0دضملم </td>

<tr/>مممممممم

<tr>مممممممم

<td>مممممممممممم 2عؽملؿيملم </td>

<td>مممممممممممم 2دضملم </td>

<tr/>مممممممم

<tr>مممممممم

<td>مممممممممممم 3عؽملؿيملم </td>

<td>مممممممممممم 3دضملم </td>

<tr/>مممممممم

<tr>مممممممم

<td>مممممممممممم 4عؽملؿيملم </td>

40

<td>مممممممممممم 4دضملم </td>

<tr/>مممممممم

<table/>مممم

</body>

</html>

ممومػ٨مصظملقهملمبلؿملشملهمل مأدضملمملرمعؽملؿفمملتمجا سػمل٧مممملغؿؿملفهملمسضؾملموػؼملؿملهملموهؿ٦يمجوالمزلمملءمو

ماظرملمملذهملمترملؾ٥معمملمؼػمل٨م:

م

مصذلة ممبضمل ماظضملمملؿملهمل مسػمل٧ماظرملؾغملهمل مو٦ظؽملممل مأثؽملمملء ماظمرأؼؽملمملمInternetو مع٦اض مأنمعضملصمل٣ مWebذمل

م)ماىاولمأدشملاىؿملةمتعمل٦ممبضملضم Zebraبػمل٦غنيمعؿؽملمملوبنيمومػ٦معمملمؼضملفمبمملإلنػملؿملؼهملمبذمل

stripping)مبمملظرملغمل٢م:م

م

41

م مىضمل٢مجوظؽملممل مصؿقؼمللؽملممل ماىاولماىؿملةؼؾو ممطؾعملؿملهمل ممWebيفمسمململماظذمل بؿضملؼ٢مذؿملظملةممضؼملؽملمملو

مزملؾمطؼملمملؼػمل٨م:ؿاىولميفمصظملقؿؽملمملمظ

<”id=”table1مtable>مممم

<tr>مممممممم

<td/>اد٣ماؽملؿيمل<td>مممممممممممم

<td/>دضملماؾؿمل<td>مممممممممممم

<tr/>مممممممم

<”tr class=”black>مممممممم

<td>مممممممممممم 0عؽملؿيملم </td>

<td>مممممممممممم 0دضملم </td>

<tr/>مممممممم

<tr>مممممممم

<td>مممممممممممم 2عؽملؿيملم </td>

<td>مممممممممممم 2دضملم </td>

<tr/>مممممممم

<”tr class=”black>مممممممم

<td>مممممممممممم 3عؽملؿيملم </td>

<td>مممممممممممم 3دضملم </td>

42

مممممممم </tr>

<tr>مممممممم

<td>مممممممممممم 4عؽملؿيملم </td>

<td>مممممممممممم 4دضملم </td>

<tr/>مممممممم

<table/>مممم

متطملؿملرلمبضملمنمملحمتضملؼػملؽملمملمبظملذلةموم مأردغممل مظؽملفضمل٢مظؽملظملذلضمأغؽملممل ذغمل٢متتؿملنملمتؽملمملوبماظػمل٦غنيمظلؾنملمعممل

مطؼملمملمؼػمل٨م:اىولم

م

م مغض ماظلمملب٠مو مذاتماشملفمل مظؿضملؼ٢مذؿملظملةذمشمللملمػؽملممل ماظلشملمميفمحنياىولممضمل٦د أنمطؿمملبهمل

مدؿق٢مارملغملػملهملم:مjQueryع٤مأدشملماغملؿؾهملماظؿمملظ٨م

$)‟#table1 tr‟(.toggleClass)‟black‟(;

ومػؽملمملمالمبمع٤ماالسذلافمأنماظلشملماظؿمملظ٨مطمملنمدؿملفضمل٢مايؿملمملةمأدؾمل٢ميفمايمملظهملماظلمملبعملهملمسؽملعمملم

مأردغمملمتػمل٦ؼ٤مبضملمدشمل٦رماىولم:

$)‟#table1 tr:even‟(.addClass)‟black‟(;

43

م مع مسدلماظزملظمل٦فمإشمماآلنمتضملمملعػملؽملممل مأنمغعمل٦مممClassesأمنمملطماظضملؽملمملص مأردغممل مظ٦ مظغمل٤معمملذا و

بمملظؿضملمملع٢معمط٢مخمملصؿملهملممع٤مخزملمملئمأمنمملطماظضملؽملزملمبرملغمل٢معؾمملذمدونمايمملجهملمظزملم؟

مبرملغمل٢ماظيتمتلؼملمظؽملمملمبعملاءةمضؿملؼملهملمخمملصؿملهملممنماظضملؽملزملمcssت٦صماغملؿؾهملمذظ١مأؼسملمملمسدلماظاظهملم

م:مسدلماظزملؿملطملهملماظؿمملظؿملهملعؾمملذ

$)‟#id‟(.css)‟name‟(;

م مامملصؿملهمل مضؿملؼملهمل مبكملسمملدة ماظاظهمل ماظيمزمؼمل٢ممnameحؿملىملمدؿعمل٦م ماظضملؽملزمل ع٤مخزملمملئمأمنمملط

م,مأعمملمإلدؽملمملدمضؿملؼملهملمخمملصؿملهملممنمظضملؽملزملمعضملنيمميغمل٤مادؿضملؼملممللماظزملؿملطملهملم:مidاضملفم

$)‟#id‟(.css)‟name‟,‟value‟(;

م ماظعملؿملؼملهمل مبكملدؽملمملد مإشممامvalueاظيتمدؿعمل٦م ماظيممnameمملصؿملهمل ع٤مخزملمملئمأمنمملطماظضملؽملزمل

ممidزمؼمل٢ماضملفم مدمملبعملممل مضػملؽملممل مطؼملممل مو ماظ, معؽملمملضرملهمل مسؼمل٢مدورانممattrماظهملسؽمل مغلؿشملؿمل صكملغؽملممل

eachظػملعملاءةمع٤"مأوم"ظػملغملؿمملبهملمإشم"مأطـمع٤مسؽملزملمأومميغملؽملؽملمملماالدؿطملؽملمملءمس٤مدورانمم"eachم

مةم:كؿزملبمملدؿضملؼملممللماظزملؿملطملهملما

$)‟#id‟(.css)JSON(;

تضملدلمس٤مجمؼمل٦سهملمع٤مخزملمملئمأمنمملطممJSONمتؼمأزواجم)عظملؿمملحم/مضؿملؼملهمل(ميفمطمملئ٤محؿملىملمؼؿ٣م

م.مselectorاظضملؽملزملمظؿملؿ٣مإدؽملمملدػمملمدصضملهملمواحةمظػملضملؽملمملصماظيتمؼضملؿملػمملماحملدم

اظيتممwidthػؽملمملكمدوالمأخىمظػملؿضملمملع٢معمعمملمؼضملؿدلمع٤مخزملمملئمأمنمملطماظضملؽملزملمعـ٢ماظاظهملم

مسضماظضملؽملزملمبمملظرملغمل٢م:متلؼملمبعملاءة

$)‟#id‟(.width)(;م

مأومإدؽملمملدمسضماظضملؽملزملمبمملظرملغمل٢م:

44

$)‟#id‟(.width)value(;م

معملاءةمارتظملمملعماظضملؽملزملمبمملظرملغمل٢م:اظيتمتلؼملمبمheightومعـػملؾملمملماظاظهملم

$)‟#id‟(.height)(;م

مأومإدؽملمملدمارتظملمملس٥مبمملظرملغمل٢م:

$)‟#id‟(.height)value(;م

م

م:مInner contentمسؽملمملصمالؿؽملاظؿضملمملع٢معمحمؿ٦ىمدوالم

ممjQueryشملؿملؽملمملماغملؿؾهملمتضمل ومػهماةمتلؼملمظؽملمملممWebإعغملمملغؿملمملتمأخىمظػملؿضملمملع٢معمعلؿؽملماظذمل

ممبمملظؿضملمملع٢ مع ماظوال مع٤ مجمؼمل٦سهمل مسدل ماظضملؽملمملص محمؿ٦ى مداظهمل مبعملاءةممhtmlعؽملؾملممل اظيتمتعمل٦م

محمؿ٦ىمسؽملزملمعضملنيمسدلماظرملغمل٢م:

$(‟#id‟).html();

م٦idدمداخ٢ماظضملؽملزملمذوماضملفماظيتممتـ٢ماحملؿ٦ىما٦جمHTMLحؿملىملمأغؾملمملمتضملؿملمذؿملظملةماظذملم

مومتعمل٦ممبكملدؽملمملدمضؿملؼملهملمجؼةمظػملؼملقؿ٦ى)ادؿؾاظ٥(مبمملظرملغمل٢م:

$(‟#id‟).html(Con);

ممتـ٢ماحملؿ٦ىماىؼ.اظيتممHTMLماظذملمػ٦مذؿملظملةمConم٦دؿملحؿملىملمأنماظ

صؾمل٨ممممملثػملهملمظػملاظهملماظلمملبعملهملمسامأغؾملمملمتؿضملمملع٢معماحملؿ٦ىمطؽملمسمملديمومظؿملممtextأعمملماظاظهملم

مومهلمملماظرملغمل٢ماظؿمملظ٨ميفمحمملظهملماظعملاءةم:مHTMLطرملؿملظملةم

$)‟#id‟(.text)(;

45

موماظرملغمل٢ماظؿمملظ٨ميفمحمملظهملماإلدؽملمملد:

$)‟#id‟(.text)Con(;

ماحملؿ٦ىماىؼ.م٢غمسمملديمميـمػ٦مConم٦دؿملحؿملىملمأنماظ

مظ٦مطمملنمظؼؽملمملميفمصظملقؿؽملمملمعمملمؼػمل٨معـالم:مtextوماظاظهملممhtmlوميفمدؾؿمل٢ماعملمملرغهملمبنيماظاظهملم

<ul id=”myul”>

<li>1</li>

<li>2</li>

</ul>

مطؼملمملمؼػمل٨م:مtextث٣مضؼملؽملمملمبمملدؿسمملءماظاظهملم

$(„#myul‟).text();

بؽملظملماظزملؿملطملهملممhtmlأعمملميفمحمملظهملمادؿسمملءماظاظهملم(مStringطؽملم)م12صكملغؾملمملمدؿضملؿملماظعملؿملؼملهملم

م:مصكملغؾملمملمدؿضملؿملماحملؿ٦ى

<li>1</li>م

<li>2</li>

ؿ٦ىمود٦ممالؿؽملمومإمنمملمميغمل٤متضملؼ٢مجءمع٤مالمؼعملؿزملما٦ض٦عمسػمل٧ماالدؿؾالماظغملػمل٨محمل

ب٥محؼـؽملمملمس٤مػهماظؽملعملشملهملمصؾمل٨متعمل٦مممخرلمعمملمغلؿؾمل٢مappendهملماظاظمحمؿ٦ىمالؿؽملمومظضمل٢

مجؼمإشممغؾملمملؼهملماظضملؽملمملصماحملدةمومتلؿضملؼمل٢مبمملظرملغمل٢م:مHTMLبكملضمملصهملمحمؿ٦ىم

$)‟selector‟(.append)HTML(;

46

ىمجؼمومحؿملىملمادؿكعؽملمملػمملمظؿ٦ظؿملمحمؿ٦ماميفمصعملةمدمملبعملهملومطؽملمملمضمرأؼؽملمملمعـمملالمسػمل٧مسؼملػملؾملمملمػ

أنمهلهماظاظهملمميفمػهماظظملعملةمعمملمأرؼمض٦ظ٥ظغمل٤ممإلسمملدةماظغملالممػؽملمملموم٨إضمملصؿ٥مظػملزملظملقهملمومالمداس

ممآخامسؼملال مجػمملعممل مع٤مغعمل٢ؽملميغملا مغلمؽملممل ممأو مع٤ مع٤معغملمملغؾملجمؼمل٦سهمل مالؿؽمل ضؼمل٤مممملسؽملمملص

مالمميغمل٤مأنمغغملؿنملمعمملؼػمل٨م:٥مصؼملـضؼملؽملالؿؽملمإشممعغملمملنمآخم

$)‟targetSelector‟(.append($(‟sourceSelector‟));

محمدم مادؿسمملء مرؼ٠ مس٤ مظػملاظهمل ماظضملؽملمملص مع٤ مجمؼمل٦سهمل مبؿؼملؼ مضؼملؽملممل مأغؽملممل متالح مػؽملممل و

sourceSelectorومملمغعمل٣مبؿؼملؼمحمؿ٦ىممHTMLمصضملػملؽملمملميفماـممللمم برملغمل٢معؾمملذمطؼملممل

موميفمػهمايمملظمؽملمملهاظيمغمملضرمل اضملفممضملؿملػمملؼميتصماظمملاظضملؽملمهملمدؿعمل٦ممػهماظؿضملػملؿملؼملهملمبفملخدمملبعملممل

sourceSelectorمممملمؼضملينمحصؾملمملمع٤مماغملمملنماهلفاصػمل٨مإشممممملع٤معغملمملغؾملممملومغعملػملؾملم

ماهلف ماغملمملن ميف مإضمملصؿؾملممل مو ماصػمل٨ مماغملمملن مػ٦ مؼمآخو ماظي مداحملمضملؿملهاظضملؽملزمل

targetSelectorمم مإنمطمملنمعممل مواحا صكملنمطمملنمأطـمع٤مسؽملزملممعمملمإنأؼضملؿملهمػ٦مسؽملزملا

بلماظؽملعمل٢ممممملمؼضملينمأغؾملمملمدؿقمملصمسػمل٧ماحملؿ٦ىمازملرميفمعغملمملغ٥مومغلمبضملؼملػملؿملهملمؿعمل٦ممداظاظهملم

احملؿ٦ىماهلفمومطؼملـممللمسػمل٧ما٦ض٦عمط٢مطمملئ٤مؼضملؿملهممآختسملؿملمحمؿ٦ىممممملث٢مظ٥ممتمملعمملم

م:احملؿ٦ىماظؿمملظ٨ميفمالؿؽملتزمل٦رمأنمظؼؽملمملم

<ul>

<li>11</li>

<li id=”item12”>12<li>

</ul>

<ol>

<li>21<li>

</ol>

47

م:يفمعـ٢مػهمايمملظهملمصكملنماالدؿسمملءم

$)‟#item12‟(.append)$)‟ol‟((;

موم ممتمملعممل مهلممل معشملمملبعملهمل مجؼة مواحة مإضمملصهمل ماصػمل٨مو مع٤مع٦ضضملؾملممل ماظـمملغؿملهمل دؿملعمل٦ممحبفماظعملمملئؼملهمل

م:ممأنماالدؿسمملءيفمحنيميفمغؾملمملؼؿ٥مجضملػملؾملمملمجءامع٤ماظعملمملئؼملهملماوشممتمملبضملمملمظػملضملؽملزملماظـمملغ٨

$)‟ul li‟(.append)$)‟ol‟((;

مؼسملؿملظملؾملمملمإشمم غؾملمملؼهملمدؿملعمل٦ممبؽمللماظعملمملئؼملهملماظـمملغؿملهملمدونمأنمؼفملثمسػملؿملؾملمملمومؼؽملرمللملمضمملئؼملهملمعشملمملبعملهملمهلمملممتمملعممل

مط٢مسؽملزملمع٤مسؽملمملصماظعملمملئؼملهملماوشمم.

مهملؼضملؿملمأطـمع٤مسؽملزملم)عزملظمل٦صهملمع٤ماظضملؽملمملص(مصكملنمادؿسمملءماظاظاهلفمإذامطمملنماحملدممم:تط

appendطمملنمعمملمؼضملؿملهماحملدماهلفمسؽملزملامواحامصكملنمادؿسمملءممعمملمإنأؼعمل٦ممبؽمللمازملرمم

ماظاظهملمؼعمل٦ممبؽملعمل٢مازملرم.

م معرملمملبؾملهمل مداظهمل مصعملػؽملمملك ممبمملالد٣ ممappendظػملاظهمل مبمملظرملغمل٢ممappendToازلؾملممل تلؿس٧

م:اظؿمملظ٨

$)‟source‟(.appendTo)‟target‟(;

م ماظضملؽملمملص مبؽملعمل٢ ماظاظهمل مػه محؿملىملمتعمل٦م ماحملد مإشممآخممsourceاظيتمؼضملؿملػممل مإضمملصؿؾملممل و

ماظ مع٤ممtargetيمؼضملؿملهماحملدماظضملؽملزمل مإنمطمملنمؼضملؿملمأطـ مو مواحا إنمطمملنمؼضملؿملمسؽملزملا

مسؽملزملمصكملغؾملمملمتعمل٦ممبؽمللمػهماظضملؽملمملصمومظؿملمغعملػملؾملمملمومسػمل٧مدؾؿمل٢ماـممللمصكملنماظؿضملػملؿملؼملهملم:

$)‟#copyrightLabel‟(.appendTo)‟.code‟(;

48

إشمماظضملؽملزملماظيمؼؽملؿؼمل٨مظزملماظؽملؼملممcopyrightLabelزملمذوماضملفمتعمل٦ممبؽملعمل٢ماظضملؽمل

codeيفمحممللمطمملنموحؿملامومإنمطمملنمػؽملمملكمأطـمع٤مسؽملزملمؼؽملؿؼمل٨مظػملزملممcodeيفماظزملظملقهملمم

مومظؿملمغعملػمل٥م.مcopyrightLabelدؿملؿ٣مغلماظضملؽملزملمذوماضملفم

م: ممعػملق٦زهمل مسؼمل٢ماظاظهمل ماغؿؾؾملوملمظشملؼعملهمل مضمملمappendظ٦ مبمملظاظهملمع٤محؿملىملماظؾمملرعذلاتمو رغؿؾملممل

appendToمط٦نمأيماظؾمملرعذلاتمعزملرامومأؼؾملمملمػصمملم.مغمملحؿملهملع٤مممملنؿظ٦جتمأغؾملؼملمملمعؿضملمملطلم

م

ممappendسػمل٧مسغملماظاظؿنيم ؼهملماظػملؿنيمتعمل٦عمملنمبكملضمملصهملماحملؿ٦ىميفمغؾملمملمappendToو

ماحملدة مظػملضملؽملمملص ماظاخػمل٨ معؽملؾملممل(ماحملؿ٦ى مامملصمبغمل٢ ماإلشالق مود٣ ماظاظؿنيمم)ضؾ٢ صكملن

prependمم ممprependToو مأغؾملؼملممل مسا ممتمملعممل ماظشملؼعملهمل مبؽملظمل ماحملؿ٦ىمتتضملؼملالن سملؿملظملمملن

حؿملىملمتضملؼمل٢م)بضملمود٣ماظؾءمظغمل٢معؽملؾملممل(ماىؼميفمباؼهملماحملؿ٦ىماظاخػمل٨مظػملضملؽملمملصماحملدةم

prependبؽملظملمرؼعملهملممappendومتضملؼمل٢ممprependToبؽملظملمرؼعملهملممappendToم.م

م

تضملؼملالنمبفملدػمل٦بمعرملمملب٥مكملغؾملؼملمملمصم()insertBeforeومم()beforeمبمملظؽمللؾهملمظػملاظؿنيأعمملم

مأنماظوالماظلمملبعملهملمتسملؿمل معمعالحصملهمل مغؾملمملؼهملماحملؿ٦ىماظاخػمل٨مماحملؿ٦ىمأؼسملممل مأو يفمباؼهمل

ماإلشالق(مظػملؾملف مود٣ مضؾ٢ مأو ماظؾء مود٣ بكملضمملصهملممتعمل٦عمملنمػمملتنيماظاظؿنيأنميفمحنيمم)بضمل

ماحملؿ٦ىمضؾ٢ماهلفممتمملعمملم)ضؾ٢مود٣ماظؾءمامملصمب٥(م.

مت٦ص مبمملـ٢ مامو منيداظؿغملؿؾهمل مبؽملظملمادػمل٦ب مأغؾملؼملمملمتضملؼملالن مإذ مبلؿمل ماخؿالف تسملؿملظملمملنممع

م مػؼملممل مو مب٥( مامملص ماإلشالق مود٣ م)بضمل ممتمملعممل ماهلف مبضمل ومم()afterاحملؿ٦ى

insertAfter()م.م

49

دفملطؿظمل٨ممappendماظهملاىؼةماظيتمضأتؾملمملمضؾ٢مضػملؿمل٢متضملؼمل٢مبشملؼعملهملمعرملمملبؾملهملمظػملموالومنماظ

مسػمل٧مط٢معؽملؾملمملم.بطمعـممللمواحمخمؿزملمصعملم

متعمل٦مماظؿضملػملؿملؼملهملماظؿمملظؿملهملم:

$)‟p img‟(.before)‟<p>I love Syria!</p>‟(;

,مومتعمل٦مماظؿضملػملؿملؼملهملممp imgضؾ٢مط٢مسؽملزملمؼضملؿملهماحملدممI love Syriaبكملضمملصهملماىؼملػملهملم

ماظؿمملظؿملهملمبؽملظملماؾملؼملهملم:

$)‟<p>I love Syria!</p>‟(.insertBefore)‟p img‟(;

م:بؿملؽملؼملمملمتعمل٦مماظؿضملػملؿملؼملهملماظؿمملظؿملهملم

$)‟aؼhref^=http://www.ػ‟(.after)‟<small style = ”color:red”>م

externalم</small>‟(;

م مومتعمل٦مماظؿضملػملؿملؼملهملماظؿمملظؿملهملممexternalبكملضمملصهملماظغملػملؼملهمل بضملمط٢مرابمؼرملرلمإشممع٦ضمخمملرج٨م,

مبمملظ٦زؿملظملهملمذاتؾملمملم:

$)‟<small style=”color:red”> externalم

</small>‟(.insertAfter)‟مaؼhref^=http://www.ػ‟(;

مومظغمل٤ماخؿالفمادػمل٦بمماظوالماىؼملؿملػملهملماظلمملبعملهملمهملمع٤ط٢مداظ مسؼمل٢معضملنيمضمؼرملمملب٥مشرلػممل هلممل

معؽملؾملمملمعالئؼملهملممتمملعمملميمملالتمعضملؿملؽملهملموماىولماظؿمملظ٨مؼلمملسمسػمل٧متػملكؿملمسؼملػملؾملمملم:مرمضمل٢مطال

ماظ٦زؿملظملهملماد٣ماظاظهمل

html)( م مأيمودؿمل مبونممتؼ مParameterيفمحممللمادؿسمملئؾملممل

50

اظاظهملمبكملسمملدةمحمؿ٦ىماظضملؽملمملصماحملدةمسػمل٧مذغمل٢مذؿملظملةممتعمل٦م

HTMLموميفمحممللممتؼمودؿملمعؽملمملدنملمهلمملمتلؿؾلماحملؿ٦ىمم,

ماظلمملب٠مظػملضملؽملمملصماحملدةمب٥م.

text)( م مسؼمل٢ مبضملؼملػملؾملممل مط٦دؿملميفممhtmlترملؾ٥ متفملخه معممل مصقمأن ع

حممللممتؼمودؿملمهلمملمومعمملمتضملؿملهميفمحممللمسمممتؼمودؿملمهلمملم

م.مStringػ٦مغم

append)( ماحملؿ٦ىم مغؾملمملؼهمل مإشم مهلممل ماؼملر ماظ٦دؿمل محمؿ٦ى تسملؿمل

متلؿضملؼمل٢ماظاخ ماحملدمطؼملممل ماظيتمؼضملؿملػممل ػمل٨مظغمل٢مع٤ماظضملؽملمملص

يفمحممللماظشؾهملميفمغعمل٢م/مغلمجمؼمل٦سهملمع٤مسؽملمملصمالؿؽملمع٤م

معغملمملنمضؼمل٤مالؿؽملمإشممعغملمملنمآخمضؼملؽمل٥م.

appendTo)( ماحمل مغؾملمملؼهمل مإشم مسػملؿمل٥ متشملؾ٠ ماظي ماحملؿ٦ى ؿ٦ىمتسملؿمل

مااظاخػمل٨م مع٤ ماظيتمؼضملؿملػمملظغمل٢ ماظيمؼغمل٦نممظضملؽملمملص ودؿملشملؾملممل

م.حمدام

prepend)( ماحملؿ٦ىم مباؼهمل مإشم مهلممل ماؼملر ماظ٦دؿمل محمؿ٦ى تسملؿمل

ماظاخػمل٨مظغمل٢مع٤ماظضملؽملمملصماظيتمؼضملؿملػمملماحملدم.

prependTo)( ماحملؿ٦ىم مباؼهمل مإشم مسػملؿمل٥ متشملؾ٠ ماظي ماحملؿ٦ى تسملؿمل

ماظيتم ماظضملؽملمملص مع٤ مظغمل٢ ماظيمؼغمل٦نماظاخػمل٨ مودؿملشملؾملممل ؼضملؿملػممل

محمدام.

before)( مع٤ماظضملؽملمملصم مضؾ٢مط٢مسؽملزمل مهلممل تسملؿملمحمؿ٦ىماظ٦دؿملماؼملر

ماظيتمؼضملؿملػمملماحملد.

51

insertBefore)( تسملؿملماحملؿ٦ىماظيمتشملؾ٠مسػملؿمل٥مضؾ٢مط٢مسؽملزملمع٤ماظضملؽملمملصم

ماظيتمؼضملؿملػمملمودؿملشملؾملمملماظيممؼغمل٦نمحمدام.

after)( مهل مع٤ماظضملؽملمملصمتسملؿملمحمؿ٦ىماظ٦دؿملماؼملر مبضملمط٢مسؽملزمل ممل

ماظيتمؼضملؿملػمملماحملد.

insertAfter)( مع٤ماظضملؽملمملصم تسملؿملماحملؿ٦ىماظيمتشملؾ٠مسػملؿمل٥مبضملمط٢مسؽملزمل

ماظيتمؼضملؿملػمملمودؿملشملؾملمملماظيممؼغمل٦نمحمدام.

م:مWrappingمدوالماظؿطملػملؿمل

مب٦د٣معضملؿملؿملمملعملظػملمؿمملجأحؿملمملغمملمدم مظؽملظملذلأومجمؼمل٦سهملمع٤ماظ٦د٦ممصم٤ممبؿطملػملؿملمحمؿ٦ىمعممل ضمأغؽملمملمؼملـال

مجؼة(مaحمؿ٦ؼمملتمظ٦د٦مممimg)جضمل٢مود٦مممعـالمaبمملظ٦د٣ممimgغؼمتطملػملؿملمصمؿملمود٦مم

,مميغملؽمل١مأنمتؽملصملمإشمماظرملغمل٢ماظؿمملظ٨مظؿؿسملممdivبمملظ٦د٣ممp aأومغؼمتطملػملؿملمصمؿملماظضملؽملمملصم

ماظزمل٦رةم:

م

52

م معغملؿؾهمل مظؽملممل مصمملظمjQueryتقملع٤ ماظوال مع٤ مجمؼمل٦سهمل مسدل ماإلعغملمملغؿملهمل ماظػه تعمل٦مممwrapهمل

متشملؾبؿطمل ماظيت ماظضملؽملمملص مجمؼمل٦سهمل مع٤ مسؽملزمل مط٢ ماػملؿمل مبمملظطملالف مسػملؿملؾملممل مط٦دؿملمؼمل٠ مهلممل ر

parameterمومهلهماظاظهملماظرملغمل٢ماظؿمملظ٨م:م

$)‟selector‟(.wrap)‟Wrapper‟(;

وممWrapperبمملظطملالفممselectorحؿملىملمتعمل٦ممبؿطملػملؿملمط٢مع٤ماظضملؽملمملصماحملدةمبمملحملدم

مظغملؿؾؽملمملمعـالم:مjQueryذؿملظملةممإشماظؿ٦ضؿملق٨ماظلمملب٠مظ٦مأردغمملمه٦ؼ٢ماظرملغمل٢م

$)‟img‟(.wrap)‟<a href=”#”></a>‟(;

مبضملؽملزمل مبممللؿؽمل مص٦رة مبؿطملػملؿملمط٢مسؽملزمل متعمل٦م ماظلمملبعملهمل ماظاظهمل مبمملظظملضمل٢مصكملن مهلمملممو اظابماؼملر

متطملػملؿملمصمؿملم مأردغممل مظ٦ مو ماحملدة مع٤ماجملؼمل٦سهمل مسؽملزمل مظغمل٢ مشالف مػؽملمملك مؼزملؾ مأن مبضملؽمل٧

اظيتمتػمليبمرشؾؿؽملمملممتمملعمملمومهلمملممwrapAllت٧مدورماظاظهملماظضملؽملمملصماحملدةمبطملالفمواحمصعملم

ماظرملغمل٢م:

$)‟selector‟(.wrapAll)‟Wrapper‟(;

م:مWrapوماـممللماظؿمملظ٨مؼ٦ضمسؼمل٢ماظاظهملماوشمم

<html>

<head>

<script src="jquery.js" type="text/javascript">

</script>

<script type="text/javascript">

$(document).ready(function() {

$('img[src]').wrap('<a href="#"></a>');

53

});

</script>

</head>

<body>

<img src="noPic.gif" alt="no Pic!" />

</body>

</html>

م مأغ٥ مبمملظإذ متطملػملؿملماظزمل٦رة مدؿملؿ٣ ماظزملظملقهمل مادؿضملاضمػه مهعملؿمل٠مصضملػمل٨مظػملرملغمل٢مابمسؽمل مػا و

ماظؿ٦ضؿملق٨ماظيمسضميفمباؼهملماظظملعملةم.

بالمع٤متطملػملؿملظملؾملمملمغظمللؾملمملموميفمحمملالتمأخىمضمدمؿمملجمإشممتطملػملؿملمحمؿ٦ىمجمؼمل٦سهملمع٤ماظضملؽملمملصم

ماظيتمتلؿكممبمملظرملغمل٢م:مwrapInnerاظاظهملممتعملع٥مػامعممل

$)‟selector‟(.wrapInner)‟Wrapper‟(;

ةمع٤مدوالماظؿطملػملؿملمظؽمللماظضملؽملمملصمع٤معغملمملنمإشممآخمضؼمل٤مالؿؽملمومميغمل٤ماالدؿظملمملدمعػملق٦زهملم:

مذظ١مس٤مرؼ٠مجضمل٢ماظطملالفماىؼمسؽملزملامع٤ماظضملؽملمملصما٦ج٦دةمأصالميفمالؿؽملم.

54

محفمسؽملمملصمالؿؽملم:دوالم

م معغملؿؾهمل محبمدواالمjQueryت٦ص مصفمأخىمخمملصهمل مالؿؽمل مسؽملمملص اظيتممremoveمملظاظهمل

م٨م:تلؿضملؼمل٢مبمملظرملغمل٢ماظؿمملظ

$(‟selector‟).remove();

,مأعمملميفمحممللماظشؾهملمحبفممselectorتعمل٦ممحبفمصمؿملماظضملؽملمملصماظيتمؼضملؿملػمملماحملدم

امملصمبؾملهماظضملؽملمملصمصعملموماإلبعملمملءمسػملؿملؾملمملمصؿملؼملغمل٤ممinner contentاحملؿ٦ىماظاخػمل٨م

ماظيتمهلمملماظرملغمل٢م:مemptyادؿضملؼملممللماظاظهملم

$(‟selector‟).empty();

ماظؼعملهملمأخىمظؽمللمسؽملمملصمالؿؽملمتقملعػؽملمملكمرمعػملق٦زهملم: ضملؼمل٢مشمملظؾمململؿاظيتمتمcloneهملماظؽملؾملممل

ممbeforeعمدوالم ممafterو ماـممللماظؿمملظ٨ماظيمؼعمل٦ممبؽمللممappendو مترملؾ٥ بزملؿملطملهمل

مآخممdivع٤مالؿؽملمومؼسملؿملظملؾملمملمإشممغؾملمملؼهملممdivسؽملزملم

$(„#sourceDiv‟).clone().appendTo(„#targetDiv‟);

م:مFORM ELEMENTSسؽملمملصماظؽملؼملمملذجمماظؿضملمملع٢معدوالم

م ممFormsتضملؿدلماظؽملؼملمملذجم مWebع٤مأػ٣ماظضملؽملمملصميفمصظملقمملتماظذمل مع٤مضؿملؼملهملميفمتظملمملس٢مم مهلممل ممل

ػهماػؼملؿملهملمتفملت٨مسػمل٧محلمملبمصضمل٦بهملميفممومظغمل٤مامملصمب١مWebالؿكممعمتشملؾؿمل٠ماظذملم

مؽملمملرؼ٦ػمملتمومظضمل٧٢مذظ١مب٦ض٦حمع٤مخاللمسةمدؿملع٤مرفماظضملؼملؿمل٢مومؼؿفػملمبجمؿملمملماظؿضملمملع٢معضملؾملممل

إشممايرمأثؽملمملءماظؿضملمملع٢ممjava scriptظس٦ةمعدلجم٨ممW3Cػامعمملمدصماهلؿملؽهملماظضملمملؿملهملم

مهلامعضملؾملممل ممو متقملع٤ مذاك مو ماظمjQueryعغملؿؾهمل مع٤ مخمملصهمل مسؽملمملصمموالجمؼمل٦سهمل مع ظػملؿضملمملع٢

55

موالس٤مػهماظحؼـؽملمملممومتظملمملديمأشػملنملمارملمملط٢ماظرملمملئضملهملمبفملدؾمل٢ماظشملقمومػؽملمملمغلؿؾمل٢اظؽملؼملمملذجم

ماظرملغمل٢ماظؿمملظ٨م:ممملومهلمسؽملمملصماظؽملؼملمملذجمظعملاءةماظعملؿمل٣مع٤ملؿكمتميتاظمvalمهملاظبممليؼىملمس٤ماظ

$(‟selector‟).val();

موحؿملةميفمحممللمطمملنماحملدمماظهملاظمهضملؿملمػت مػ٨ممselectorضؿملؼملهمل موحؿملا ؼضملؿملمسؽملزملا

عأ,مضؿملؼملهملمذظ١ماظضملؽملزملم ماظهملسؽملزملمصكملنماظؼضملؿملمأطـمع٤ممselectorدمقمملميفمحممللمط٦نما

valملمسؽملزملمع٤مػهماظضملؽملمملصم.ضملؿملمضؿملؼملهملمأوتم

م: ماظيتمتضملمعػملق٦زهمل ماظعملؿملؼملهمل مػؽملممل ماظضملؽملزمل مبعملؿملؼملهمل مؼعملزمل ماظ٦اصظملهمل مع٤ممvalueصؾملممل مو ظظ١ماظضملؽملزمل

مأنماظ سػمل٧مسؽملزملمهؼمؼلؼملمبمملخؿؿملمملرمأطـممممليفمحمملظهملمادؿسمملئؾملمvalمهملاظاىؼمبمملظطمػؽملممل

عزملظمل٦صهملممضملؿملتمvalمهملاظاظمصكملنمMulti-select elementمواحمع٤مخؿملمملرميفموضومل

ماؿملمملراتماؽملؿعملمملةمع٤مضؾ٢مالؿكمم.٢ممتـ

مصكملنمطؿمملبهملمدشملمطمملظؿمملظ٨م:ممملومطؼملـممللمسػمل٧مادؿضملؼملمملهل

$(‟#firstName‟).val();

م.مfirstNameظػملضملؽملزملمذوماضملفممvalueضملؿملمضؿملؼملهملماظ٦اصظملهملمؼ

مؿضملمملع٢معماظضملؽملمملصمإالمأغ٥مرمنملمتطاظغملـرلمع٤معرملمملط٢ماظمه٢مvalهملمسػمل٧ماظش٣مع٤مأنماظاظ

مأغ٥مإنمطمملنمأولمسؽملزملمع٤ماجملؼمل٦سهملماظيتم م:ماظؽملعملشملهملماوشمم غعملشملؿنيمػمملعؿنيمسؽملماظؿضملمملع٢معضملؾملممل

مWebجمصكملنمخشملفملممبجمؿملمملمدؿملصملؾملميفمعلؿؽملماظذملمظؿملمسؽملزملممن٦ذمselectorؼضملؿملػمملماحملدم

م ماظاظهمل مأن مػ٨ ماظـمملغؿملهمل ماظؽملعملشملهمل ,valمم ماظ٦اصظملهمل مضؿملؼملهمل ماالخؿؿملمملرممvalueتضملؿمل مصؽملمملدؼ٠ ظضملؽملمملص

check boxمم محمملظهملممradio buttonو ميف ماظضملؽملمملص مػه مط٦ن مس٤ ماظؽملصمل بطمل

56

selectedومماحملداتعاجضملهملمجولمضملمببلؾمل٦ظهملمحالمهلهمارملغملػملهملمؼؿ٦صممأومالمومظغمل٤م

مطؿمملبهملمذ٨ءمذؾؿمل٥ممبمملمؼػمل٨م:

;()val.(‟selected:ػname=radioGroupؼ‟)$

م

خمشرلمضاءةماظعملؿمل٣مع٤مسؽملمملصماظؽملؼملمملذجمومػ٦مطؼملمملمتؿ٦ضمإدؽملمملدماظعملؿمل٣مهلمملمومادؿكاممآمvalمهملاظظػمل

مظػملعملؿملمملممبؾملهماظضملؼملػملؿملهملمغلؿضملؼمل٢ماظرملغمل٢م:

$(‟selector‟).val(value);

م

م ماظتطؼملممل مسؽملمملصمvalماظهمللؿكم محمملظهمل مبؿطملؿملرل ممradio buttonsمظػملعملؿملمملم checkو

boxesومسؽملمملصمم<select>إشممحمملظهملماظؿقؼممselectedمدلماظزملؿملطملهملم:ومذظ١مسم

$(‟selector‟).val(values);

س٤ماظضملؽملمملصماظيتممselectorبمملظؾقىملمضؼمل٤ماظضملؽملمملصماظيتمؼضملؿملػمملماحملدمماظهملعمل٦مماظتحؿملىملم

م ماظعملؿمل٣ مظػملمvaluesهؼمل٢مإحىماظعملؿمل٣ماط٦رةميفمعزملظمل٦صهمل مماظهملاؼملرة ضمل٢محمملظؿؾملمملموو

selectedم,مصمملىؼملػملهملماظؿمملظؿملهملمعـالم:م

$)‟input‟(.val([‟abokamal‟,‟jQuery‟,‟Mukhtar‟]);

امملصهملممvalueواصظملهملممحمملظهملمىؼملؿملمسؽملمملصماظؽملؼملمملذجماظيتمهؼمل٢مselectedوضمل٢مايمملظهملم

ممبؾملممل ممabokamalإحىماظعملؿمل٣ ممjQueryأو ماـممللماظؿمملظ٨مؼ٦ضمػاممMukhtarأو و

ماالدؿكام:

<html>

57

<head>

<script src="jquery.js" type="text/javascript">

</script>

<script type="text/javascript">

$(document).ready(function() {

$('*').val(['abokamal', 'jQuery']);

});

</script>

</head>

<body>

<select id="Select1">

<option value="X">Abokamal</option>

<option value="jQuery">jQuery</option>

<option>Mukhtar</option>

</select>

</body>

</html>

م

صمؿملمعؿشملػملؾمملت١موممvalضمؼغمل٦نمػؽملمملكمبضملماظلؿملؽملمملرؼ٦ػمملتماظيتمالمتػمليبمصؿملؾملمملماظاظهملممعػملق٦زهملم:

م مادؿضملؼملممللماإلضمملصهمل مميغملؽمل١موبهمل ممpluginحؿملؽملؾملممل ماظيتممForm Pluginذاتماالد٣ و

مبمملإلضمملصمملتم.مهملامملصمضمملئ٠سػملؿملؾملمملميفماظمدؽملؼمل

58

م

م

م

م

م:م75إشمماظضؿملعملهملمم57ع٤ماظضؿملعملهملم

ماحاث

Events

م

59

م:مEventsاثماح

,معمملمػ٨ممسؽملؾملمملمبلؿملشملمملمضملفمذؿملؽمملظؿلؾملؿمل٢ماظؿضملمملع٢معضملؾملمملمسػملؿملؽملمملمأنمغمjQueryضؾ٢مأنمغؽملمملضمادؿـؼملمملرم

ماحاثم؟

م محث ممتؿػمل١مطػملؼملهمل م.. ممغظملل٥ماضملؽمل٧مEventحلؽملممل مد٦اء ماظدلجمهمل طؽملمملمأيفمخمؿػملمتعملؽملؿملمملت

متشملؾؿملعملمملمظلشملماغملؿنملمأومتشملؾؿملعملمملمغدلعيملم مأوممWebظػملذمل مضملؽمل٧مملومظطملرلػمملمومطأهملمظػملؾمل٦اتماظطؿملتشملؾؿملعملممل

أحؿملمملغمملم٤مؼرملضملمب٥ماظؿشملؾؿمل٠مومؼلؿفؿملنملمظ٥مزل٥مؼعملزملمبممليثمحوثمأعمعمملمأومتطملؿملرلمعضملؿملالماظػملطمل٦ي

ماظطملمملظنمل- مػ٦ مػا مؼؿفمملػػمل٥ميفمأحؿملمملنم-و مػؽملمملكمسأخىممأو معمملممةو أغ٦اعمع٤ماحاثمعؽملؾملممل

معمملمغصملمملمماظؿرملطملؿمل٢معـ٢مبءمترملطملؿمل٢ماظؿشملؾؿمل٠مأومإغؾملمملءمترملطملؿملػمل٥مأومععملمملرضملؿمؼلؾؾ٥ ٥مبرملغمل٢معضملنيمومعؽملؾملممل

ؼلؾؾ٥مالؿكممومػامعمملمؼؾملؼملؽملمملمصاحهملمومع٤ماحاثماظيتمؼلؾؾؾملمملمالؿكممحثماظؽملعملمسػمل٧م

أومحثمعورممDouble clickأومحثماظؽملعملمادوجممClickزرمعضملنيميفماظؿشملؾؿمل٠م

م....مإخلمMouse moveاظظملفملرةمص٦قمعؽملشملعملهملمعمملمع٤ماظؿشملؾؿمل٠م

نملمظألحاثمومظغملؽملؾملمملمترملضملمحبوثؾملمملممبضملؽمل٧مأنمتشملؾؿملعمل١مؼضملفممتمملعمملماظؿشملؾؿملعملمملتمبشملؾؿملضملؿؾملمملمالمتلؿفؿمل

مأغ١مضؼملوملمبمملظغملؿمملبهملميفمعبمأغ مؼضملفممتمملعممل مطؼملممل ماظؽملعمل ماظظملالغ٨ميصملهمل مسػمل٧ماظر ١مضؼملوملمبمملظؽملعمل

مإالمإنم مالمؼلؿفؿملنملمهلممل مبرملغمل٢ماصذلاض٨مؼؿفمملػ٢مػهماحاثمو مظغملؽمل٥ مو ماظغملؿمملبهمل اظؽملميصملهمل

Eventمملظؿضملمملع٢معماحاثمأومبمضملفس٤مرؼ٠معمملمؼمبرملغمل٢مصؼمأجدلهمادلعيملمسػمل٧مذظ١

handlingسػمل٧ممصؿملغملظمل٨مأنمأض٦لس٨مذظ١مومنمػاماظغملؿمملبمؼلضمل٧مظؿؾلؿملماع٦رمومؼ,مم

مح مع مظػملؿضملمملع٢ مأغ٥ ماظؿؾلؿمل معضملنيمدؾؿمل٢ م-ث ماظذمل مظؿملميفمجممملل مو مسمملم مػؽملممل ماظغملالم مWebو

مم-صقلنمل متعملمfunctionؼغملظمل٨مأنمتغملؿنملمداظهمل مث٣ معضملؿملؽملهمل مبضملؼملػملؿملهمل ماظاظهملمتعمل٦م مببمػه ٦م

مؼؿ٣ممممليثب تؽملظملؿملمتظملفرلمايثم)سؽملعمملمؼعملمايث(مومسؽملػمملمتزملؾمادؿفمملبهملمتشملؾؿملعمل١مسؽملعممل

م.اتؾشملهملمب٥اظاظهملم

60

ت٦اج٥مادلجمنيمومعشمل٦ريمع٦اضماالغذلغوملممطمملغوملمارملغملػملهملماظضملصملؼمل٧ماظيتمWebيفمجمممللماظذملم

رؼعملؿ٥مامملصهملممحؿملىملمأنمط٢معؿزملظملمميؿػمل١مBrowsersػ٨معرملغملػملهملماخؿالفماؿزملظملقمملتم

ومسؽملمايؼىملمس٤ماحاثمصمملعمؼشمل٦لمومؼشمل٦لمظؿمللؿشملؿملممWebتشملؾؿملعملمملتماظذملميفماظؿضملمملع٢معم

مjQueryتضملؼمل٢مسػمل٧مصمؿملماؿزملظملقمملتم,معممJava Scriptمشمل٦رمعؽملمملمطؿمملبهملمذؿملظملةا

مومغلؿضملؼمل٢مدوالماغملؿؾهملمظغملؿمملبهملمذؿملظملاتم٦غػملعمل٨مبغمل٢مػهمارملمملط٢مخػملمزؾمل تضملؼمل٢مسزملؼهملمرغممل

م.بسملؼملمملنمطدلىمذطمملتماظدلجمؿملمملتميفماظضملمململمظىماىؼملؿمل

م مادؿفمملبمملتممXHTMLوممHTMLيفماضملمملؼرلما٦حةمظذمل ػؽملمملكمجمؼمل٦سهملمع٤ماحاثماظيتمهلممل

سػمل٧مرابممClickسؽملمتظملفرلمحثماظؽملعملماظملدمؼملـالماصذلاضؿملهملمالمتؿشملػملنملمعؽملمملمطؿمملبهملمأيمذؿملظملةمص

Linkمم مدونمأيمتخ٢إشمماصكملنماؿزملظملمؼؽملعملػملؽملممل ماىؼة ماالدؿفمملبهملممظزملظملقهمل منمػه عؽملممل

مػا مو مضؼملؽملؿملممل مبضملماحاثمع٦ج٦دة مع مايمملل مػمػ٦ مومملوز مميغمل٤ مبمملظشملؾ مو هماخى

مبمملظؽمللؾهملمظػملشملؼعملهملماظؿعملػملؿملؼهملمظػملؿضملمملع٢معماحاثسؽملمايمملجهملمماالدؿفمملبمملتماالصذلاضؿملهمل مأعممل صكملغؾملمملمم,

مأشػملنملممهملعضملؿملؽملمظهملا٤مبظبمحثمعضملؿململؿضملنيمب٦اصظملمملتمخمملصهملمت٦ضمعماظ٦د٦ممغأنممتعملؿسمل٨ ,

ػؽملمملكمواصظملهملممClickصؼملـالمع٤مأج٢محثماظؽملعملممonػهماظ٦اصظملمملتمتؾأمحبفماىمأزلمملءم

م ممonclickازلؾملممل ماظظملفملرة معور محث مأج٢ مع٤ مازلؾملمملممmouse Moveو مواصظملهمل ػؽملمملك

onmousemoveمم مسؽملزمل مإشم ماالغؿعملمملل محث مأج٢ مع٤ مازلؾملمملممfocusو مواصظملهمل ػؽملمملك

onfocusمظضمل٢م مو م.. متعملػملؿملؼهملمـممللماظؿمملظ٨مؼ٦ضماظزملامومػغملا مأغ٥معغملؿ٦بمبشملؼعملهمل ٦رةمسػملؼملممل

م:مjQueryدونماالسؿؼملمملدمسػمل٧ماغملؿؾهملماظائضملهملم

<html>

<head>

<scriptمtype=”text/javascript”>

function myClickHandler()م{

alert(“متماظؽملعملمسػمل٧ماظر”);

61

};

function myMoveHandler()م{

alert(“متمعورمعقملذماظظملفملرةمص٦قماظزمل٦رة”);

};

</script>

</head>

<body>

<inputمid=”Button1” type=”button” value=”اغعملغ٨”

onclick=”myClickHandler()” />

<imgمsrc=”myPic.gif” onmousemove=”myMoveHandler()” />

</body>

</html>

وممonclickمماظؾلؿملشملهملمهؿ٦يمزرامومص٦رةمومظ٦ماغؿؾؾملوملمظ٦اصظملمملتماظرمظأؼوملماظ٦اصظملهملماظزملظملقهمل

مظاظهملمع٤مدوالم مضػملؿملالمظ٦جتؾملمملمازلممل ا٦ج٦دةميفممjava scriptظ٦مدضعملوملميفمضؿملؼملؿؾملممل

مأغ١مظ٦مدضعملوملميفمواصظملمملتماظزمل٦رةممmyClickHandlerالؿؽملمأالموػ٨ماظاظهملم ,مطؼملممل

اظهملمأخىمع٤مدوالمالؿؽملمومظيتمهؿ٦يمسػمل٧ماد٣ماظمonmousemoveظأؼوملماظ٦اصظملهملم

سؽملمعورمم٧لؿسرموماظـمملغؿملهملمدؿعملمسػمل٧ماظاظؽمللؿس٧مسؽملمبؽملصملةمبلؿملشملهملمغضملفمأنماظاظهملماوشممدؿ

أنموبم.معقملذماظظملفملرةمص٦قماظزمل٦رةمومظ١

62

م ماحاثمسػمل٧ماإلرالق ماظؿضملمملع٢مع مأبلمأعـػملهمل مؼضملؿدل ماظلمملب٠ ماـمملل م.. مميغمل٤ماحلؽملممل تؾمملعمو

ضؼمل٤مجل٣ماظاظهملماظيتممjQueryرؼعملهملماـممللميفماظؿضملمملع٢معماحاثمومادؿكاممأواعم

.jQueryلؿس٧مسؽملمتظملفرلمايثمومظغمل٤ماظشملؼعملهملماصسمل٢مػ٨مادؿكامممن٦ذجمأحاثمت

متقملع معغملؿؾهمل ٤jQueryمم ماحاثمدؾملػملهملرؼعملهمل مع معؽملؾملمملمسمظػملؿضملمملع٢ ماظوال مع٤ مجمؼمل٦سهمل دل

واصظملهملمع٤ممط٢مداظهملمعؽملؾملمملماظؾلؿملشملهملماظيتمتعملمملب٢ماخىمرملؾملمملمبضملماجملؼمل٦سهملاظيتمدفملغمملضمحذلاصؿملهملاال

ماظاظهملممonاظ٦اصظملمملتمامملصهملمبمملحاثمظغمل٤مبضملماالدؿطملؽملمملءمس٤محفماىم مصؼملـال يفماالد٣م,

ماظ متضملني ماظيت مؿمديتاظماظهملاظؾلؿملشملهمل مظػملقث ممclickلؿفؿملنمل مظؿملممclickازلؾملممل و

onclickماظم متضملني ماظيت مأخؿؾملممل مازلؾملمملمؿمديتاظماظهملو ماظظملفملرة معور ميث لؿفؿملنمل

mousemoveمظؿملمم مطؿمملبهملممonmousemoveو مإسمملدة مغلؿشملؿمل مادؿضملؼملمملهلممل مسػمل٧ مطؼملـمملل و

ماظزملظملقهملماظلمملبعملهملمبمملظرملغمل٢م:

<html>

<head>

<scriptمtype=”text/javascript” src=”jquery.js”>

</script>

<scriptمtype=”text/javascript”>

$(document).ready(function(){

$(„#Button1‟).click(function(){

alert)"متماظؽملعملمسػمل٧ماظر"(;

});

$(„img‟).mousemove(function(){

alert)"متمعورماقملذمص٦قماظزمل٦رة"(;

63

});

م;({

</script>

</head>

<body>

<inputمid=”Button1” type=”button” value=”اغعملغ٨” />

<imgمsrc=”myPic.gif” />

</body>

</html>

لمومع٤مأومjQueryسؼمل٢ماظزملظملقهملمأسالهمعشملمملب٠ممتمملعمملمظضملؼمل٢ماظزملظملقهملماظعملميهملمظغمل٤مبمملدؿكامم

ماظعمل مبمملظشملؼعملهمل مععملمملرغهمل ماظغملؿمملبهمل مدونمتظملغملرلمػ٨مدؾمل٦ظهمل مػؽملممل مإضمملصهملمإشممزؼمملدةماظظمل٦ائماظصملمملػة ميهمل

ملمؼضملمػؽملمملكمواصظملمملتمخمملصهملمم٥ظأؼوملمأغمظ٦ماغؿؾؾملوملمإشمماظ٦د٦مماآلنومتؽملصملؿمل٣مومتتؿملنملمالؿؽملم

متغمل٦نمضمنقوملميفمصزمل٢ماظؿزملؼملؿمل٣مس٤ مبؾملا بمملػملممهملامملصمهملاظدلجمؿملمرملؿملظملةاظمبمملحاثمو

ضؼمل٤ماظزملظملقهملممطمملعػملهملميفمعػملمعؽملظملزمل٢مومع٤مث٣متسملؼملؿملؽمل٥مدلجمؿملهملرملؿملظملةماظاظميغمل٤موضممطؼملمملعؽملشملعملؿملمملم

محؿ٧م!م١مصزمل٢مصؿملؼمملئ٨ظومبؾملامؼغمل٦نمػؽملمملمنونماىمملد٦طؼملمملمؼظملضمل٢مادلجم

صالمموالاظغظملل٥مىؼملؿملمػهممjQueryماحاثماظؾلؿملشملهملميفموممبمملمأنمذغمل٢مادؿسمملءمدوال

ولماظطمط٢مواحةمعؽملؾملمملمبمملظؿظملزملؿمل٢مومغغملؿظمل٨مبطمأزلمملءمػهماظوالمومذحؾملمملميفماىم٨داس

:مهملاظؿمملظؿمل

64

:م)الؿؽملمطغمل٢(محاثمامملصهملمبمملظؽملمملصةادوالم

ميصملهملمتظملفرلمايثماد٣مداظهملمايث

load مسؽملمهؼملؿمل٢مالؿؽمل

unload مسؽملمإشالقمالؿؽمل

احاثمامملصهملمبضملؽملمملصماظؽملؼملمملذجم:دوالم

ميصملهملمتظملفرلمايثماد٣مداظهملمايث

blur م) مظػملذلطؿمل ماظضملؽملزمل مخلمملرة loseسؽملعممل

focusثم(مػ٦معضملمملطممتمملعمملمظػملقfocusم

change مسؽملمحوثمتطملؿملرلمسػمل٧ماظضملؽملزمل

submit مسؽملمإردممللماظعملؿمل٣مإشممامملدم

focus ميفمحمملظهملم م)عـال مإشمماظضملؽملزمل ماغؿعملممللماظذلطؿمل سؽمل

االغؿعملممللمبنيمجمؼمل٦سهملمع٤محعمل٦لماإلدخممللمصكملنم

م ماإلدخممللممfocusايث محعمل٢ مسػمل٧ ؼعمل

معظملؿمملحم مرؼ٠ مس٤ مإظؿمل٥ ماالغؿعملمملل اظؿمملظ٨ممبفد

م(ـالعمTabماىوظهملم

select مغىمؽملس م) ماظضملؽملزمل محمؿ٦ؼمملت مع٤ مبؽمل ماخؿؿملمملر

ماظضملؽملزملم محمملظهمل معـ٢ ميف مايث ػا

<select>)

65

scroll سؽملمهؼ١مأذرهملماظؿؼملؼم)غىمػامايثم

م(مtextareaيفمعـ٢محمملظهملماظضملؽملزملم

احاثمامملصهملمبػمل٦حهملماظملمملتؿملم:دوالم

ميصملهملمتظملفرلمايثماد٣مداظهملمايث

keydown ممسػمل٧معظملؿمملحمع٤مظ٦حهملمعظملمملتؿملمسؽملماظسملطمل

keypress ماظملمملتؿملمبضمل ومماظسملطملمسػمل٧معظملؿمملحمع٤مظ٦حهمل

مههؼ

keyup معظملؿمملحمع٤مظ٦حهملماظملمملتؿملمهؼسؽملم

احاثمامملصهملمبفملزرارماظظملفملرةم:دوالم

ميصملهملمتظملفرلمايثماد٣مداظهملمايث

click مسؽملماظؽملعملماظملد

dblclick مسؽملماظؽملعملمادوج

mousedown ماظظملفملرةمسػمل٧مزرمسملطملسؽملماظ

mousemove مسؽملمعورمعقملذماظظملفملرة

mouseout سؽملمخوجمعقملذماظظملفملرةم)ؼعملزملمبخ٦لمعقملذم

ماظضمل مص٦ق مظ٥ معور مأول مؼعملزملماظظملفملرة مو ؽملزمل

مسؽمل٥(مبمملوجميصملهملمابؿضملمملده

66

mouseover مسؽملمدخ٦لمعقملذماظظملفملرة

mouseup م)اغؿؾملمملءماظسملطمل(مزرماظظملفملرةمهؼسؽملم

مخىم:امحاثدوالما

ميصملهملمتظملفرلمايثماد٣مداظهملمايث

error مسؽملمحوثمخشملفمل

resize مسؽملمتطملؿملرلمايف٣

م

مولمأسالهمهلمملماظرملغمل٢ماظضملمملمماظؿمملظ٨اوالماط٦رةميفماىصمؿملماظمم:تط

$(‟selector‟).event(function);

م ماظاظهمل مبؿضملؿملني متعمل٦م ممfunctionحؿملىمل مظػملقث ممeventادؿفمملبهمل ماظضملؽملمملص اظيتمىؼملؿمل

م.مselectorؼضملؿملػمملماحملدم

م

ماظوالم معوغهمل مغى مرأؼ١ميفمأن معممل ماظؾلؿملشملهمل ماحاث مدوال مدؾمل٦ظهمل مرأؼؽملممل مأن مبضمل مو ماآلن و

ماخىمامملصهملمبمملحاثم؟

م ماظاظهمل متعمل٦م م.. ممbindحلؽملممل ماظضملمملمممهملعضملؿملؽملمداظهملبؿقؼ ماظرملغمل٢ مهلممل مو ميثمحمد طمملدؿفمملبهمل

ماظؿمملظ٨م:

$(„selector‟).bind(„event‟ , function);

67

م ماظ٦دؿمل مأن مذاتؾملمملممeventحؿملىمل ماحاث مع٤ مواحا مؼغمل٦ن معممل مسمملدة مو مايث ماد٣ ػ٦

ماظ٦دؿملمماظلمملبعملهملولمااط٦رةميفماى ؽملظملمسؽملمؿمديتاظماظهملصؾمل٦ماد٣ماظمfunction,مأعممل

م:متعمل٦عمملنمبؽملظملماظضملؼمل٢ممتمملعمملماظؿمملظؿملؿنيمjQueryتظملفرلمايثمومإنمتضملػملؿملؼمليتم

$(‟img‟).click(myFunction);

$(„img‟).bind(„click‟ , myFunction);

أطـمع٤معةمسػمل٧مغظملماظضملؽملزملمؼقملديمإشممتؽملظملؿملمصمؿملممbindمسؼمل٢مأنع٤ماىؼمبمملظطموم

مبمملظضملؽملزملمسؽملمتظملفرلمايثمومػامممغمل٤م ماظوالماظيتمتبشملؾملممل بمملدؿكامماظوالماظؾلؿملشملهملمأؼسملممل

مظامصكملنماظؿضملػملؿملؼملهملماظؿمملظؿملهملم:

$(„img‟).bind(„click‟,F1).bind(„click‟,F2).bind(„click‟,F

3);

امملصمبضملؽملمملصماظزمل٦رممعملاظؽملمثسؽملمتظملفرلمحبمملظذلتؿملنملممF3وممF2وممF1تعمل٦ممبمملدؿسمملءماظوالم

ميفمالؿؽملم,مومإنماظؿضملػملؿملؼملهملماظؿمملظؿملهملمتعمل٦ممبمملـ٢مأؼسملمملم:

$(„img‟).click(F1).click(F2).click(F3);

م

بكملظطملمملءمربمأحماظوالممunbindاظاظهملممتعمل٦ممbindومسػمل٧ماظؽملعملؿملممتمملعمملمع٤مسؼمل٢ماظاظهملم

ممتمملعمملمظامصكملنماظؿضملػملؿملؼملؿنيماظؿمملظؿملؿنيم:مbindحبثمعضملنيمومهلمملمغظملماظرملغمل٢مامملصمبذملم

$(„img‟).bind(„click‟,Func1).bind(„click‟,Func2)

.bind(„click‟,Func3);

$(„img‟).unbind(„click‟,Func2);

68

عملمامملصمبضملؽملمملصماظزمل٦رماظؽملمثسؽملمتظملفرلمحمFunc1وممFunc3دؿعمل٦عمملنمبمملدؿسمملءماظاظؿنيم

ممFunc2دونمتشملؾؿمل٠مادؿسمملءماظاظهملمميفمالؿؽمل ضمملعوملمبكملظطملمملءمربشملؾملمملممunbindنماظاظهمل

مبممليثم.

اظظملقماظ٦حؿملممoneازلؾملمملماظاظهملممbindداظهملمخمملصهملمعرملمملبؾملهملمظػملاظهملممjQueryطؼملمملمت٦صمعغملؿؾهملم

مومبنيماظاظهملم سهملمع٤ماظوالمسؽملمتظملفرلمحثمواحمأنماخرلةمتلؿس٨مجمؼمل٦مbindبؿملؽملؾملممل

م ماظاظهمل متلؿشملؿمل مبؿملؽملؼملممل مع٤ممoneصعمل مجمؼمل٦سهمل متظملفرل مسؽمل ماظوال مع٤ متلؿس٨مجمؼمل٦سهمل أن

احاثمومظامصكملنماظؿضملػملؿملؼملهملماظؿمملظؿملهملم:

$(„img‟).one(“click , mousemove , dblclick”, „م

myFunction‟);

م ماظاظهمل مبمملدؿسمملء مأيدملمmyFunctionتعمل٦م متظملفرل مامسؽمل مع٤ ومأمclickحاث

mousemoveمموأمdblclickم!م

رمنملمأنمغطمأنمصمؿملممjQueryاحاثمامملصمبمملغملؿؾهملموماآلنمبضملمأنمصؾملؼملؽملمملممن٦ذجم

متو مأن ماحاثمميغمل٤ مب٦دؿملماخؿؿملمملريمؼدوال ماغملؿؾهملمفملؽملرملد مب٦ادشملهمل مم,متػملعملمملئؿملممل ػامزمؼمل٢

م,مم"eاظغملمملئ٤م"أومم"eventاظغملمملئ٤م"٧مومؼلؼملمايثمختمهملػمملعمعضملػمل٦عمملتاظ٦دؿملم وماخؿزملمملرا

مامملص ماظزملؿملطملهمل مغظمل مغلؿضملؼمل٢ مإضممليفمميـ٢مإلغرملمملئ٥ مودؿمل ممتؼ مع مظغمل٤ ماحاث مبوال همل

مومطؼملـممللمسػمل٧مذظ١مميغمل٤مأنمغغملؿنملم:مeاظ٦دؿملم

$(‟a‟).click(function(e){

Alert(“عحؾممل”);

});

مصمeالمسمؿػملمسؼمل٢مادشملمأسالهمس٤مسؼملػملؾملمملمبونممتؼماظ٦دؿملم ؾمل٨متعمل٦ممبضملضماظدمملظهملمأبا

زمؼمل٢مضؿملؼملمملمخمملصهملممeسؽملماظؽملعملمسػمل٧مأيمرابميفماظزملظملقهملمومظغمل٤معمملمميؿملػمملمأنمودؿملشملؾملمملمم"عحؾممل"

69

مميغمل٤مأنممclickمتـ٢معضملػمل٦عمملتمس٤مايثم مصؼملـال ميفمجل٣ماظاظهمل معؽملؾملممل ميغمل٤ماالدؿظملمملدة

مغغملؿنملم:

$(„a‟).click(function (e){

alert(e.type);

});

وممclickسػمل٧ماظوابمػهماةمػ٦مسضمردمملظهملمهؿ٦يمسػمل٧ماظغملػملؼملهملممومدؿملغمل٦نمغؿؿملفهملماظؽملعمل

م(.eامملصهملمبمملظغملمملئ٤ممtype)يفمايعملؿملعملهملمضؿملؼملهملمامملصؿملهملممtype.eػ٨مػؽملمملمضؿملؼملهملماظؿضملؾرلم

أػؼملؿملهملميفماظؾاؼهملمظغمل٤مظ٦مدردوملماظؿضملعملؿملاتمامملصهملمبؾملاماظغملمملئ٤مماضمالمؼؾوماعمذمعػملق٦زهملم:

مملع٢معضمل٥مبمملخؿالفماؿزملظملمظضملصوملماظضملؼمل٢ماظغملؾرلموماخؿالفمرقماظؿضملمjava scriptيفم

م.مjQueryاظيمضمملممب٥مصؼ٠متشمل٦ؼماغملؿؾهملم

يفمصمؿملممeظؿضملؼماظغملمملئ٤ممتلؿكمماظزملؿملطملهملمذاتؾملمملمأنمأنمغطمػؽملمملمأغ٥مسػمل٧ماظش٣مع٤مؼظمل٦تؽملمملالم

مأنمeدوالماحاثمإالمأنمخمملصؿملمملتماظغملمملئ٤م مرؾؿملضمل٨مإذ مػا مو مختؿػملمع٤محثمإشممآخ

مبمملظؽمللؾهملميثمآخمومطؼملجمدؼمغػملكاؿضملػملعملهملمحبثمعضملؿملاضملػمل٦عمملتم م٤مضمالمتضملينمذؿملؽممل

ميفمػاماىولم:مeمملتماظغملمملئ٤مأػ٣مخمملصؿمل

ماضملػمل٦عهملماظيتمهؿ٦ؼؾملمملمامملصؿملهمل

altKey عسملطمل٦رمملميصملهملممaltظملؿمملحمايفمحممللمط٦نممtrueهؿ٦يماظعملؿملؼملهملم

ميفمايمملظهملماضملمملطلهملمfalseتظملفرلمايثمومهؿ٦يم

ctrlKey م ماظعملؿملؼملهمل ممtrueهؿ٦ي ماظملؿمملح مط٦ن عسملطمل٦رمملممctrlيفمحمملل

ميفمايمملظهملماضملمملطلهملمfalseيصملهملمتظملفرلمايثمومهؿ٦يم

70

keyCode مبممليثني ممkeyupمتؿضملػمل٠ متمkeydownو مامملصؿملهملمو مػه ضملؿمل

م ماظذمل امملصمبمملظملؿمملحماسملطمل٦طم)وميفمحممللماظسملطملممASCIIضؿملؼملهمل

ماظغملؾرل مايف مضؿملؼملهمل متضملؿمل مصكملغؾملممل معممل محف مظذلطمملب-سػمل٧ م-ؿملؿمملل أومم

upper caseمم مدؿقؿ٦يماظعملؿملؼملهمل مامملصؿملهمل مػه يفمم65صؼملـال

م(مAأومضطملماظملؿمملحممaحمملظهملمضطملماظملؿمملحم

pageX امملصهملممبقملذممXضملؿملماإلحاثؿملمملتماصعملؿملهملمتؿضملػمل٠مبفملحاثماظظملفملرةمومت

مظػملزملظملقهملماظظملفملرة ماظمبمملظؽمللؾهمل ماظزملظملقهمل ماظظملفملرةمس٤محمملصهمل ؿمللىم)بضملمعقملذ

م(سمملدة

pageY مب مفملحاتؿضملػمل٠ ماظظملفملرة متث مو ماظضملؼمل٦دؼهمل ماإلحاثؿملمملت امملصهملممYضملؿمل

م ماظظملفملرة ممبقملذ مظػملزملظملقهمل ماظزملظملقهملمبمملظؽمللؾهمل مس٤محمملصهمل ماظظملفملرة معقملذ )بضمل

م(سمملدةماظضملػمل٦ؼهمل

screenX امملصهملممبقملذممXتؿضملػمل٠مبفملحاثماظظملفملرةمومتضملؿملماإلحاثؿملمملتماصعملؿملهملم

ماظؿمللىم ماظرملمملذهمل محمملصهمل مس٤ ماظظملفملرة معقملذ م)بضمل مظػملرملمملذهمل مبمملظؽمللؾهمل اظظملفملرة

م(سمملدة

screenY م ماظضملؼمل٦دؼهمل ماإلحاثؿملمملت متضملؿمل مو ماظظملفملرة مبفملحاث امملصهملممYتؿضملػمل٠

ماظرملمملذهملم محمملصهمل مس٤ ماظظملفملرة معقملذ م)بضمل مظػملرملمملذهمل مبمملظؽمللؾهمل ماظظملفملرة مبقملذ

ماظضملػمل٦ؼهملمسمملدة(

relatedTarget تؿضملػمل٠مبؾضملمأحاثماظظملفملرةمومتضملؿملمعضملفماظضملؽملزملماظيمدخ٢مإظؿمل٥م/م

مخجمسؽمل٥معقملذماظظملفملرةميصملهملمتظملفرلمايث

shiftKey م عسملطمل٦رمملممshiftيفمحممللمط٦نماظملؿمملحممtrueهؿ٦يماظعملؿملؼملهمل

71

ميفمايمملظهملماضملمملطلهملمfalseيصملهملمتظملفرلمايثمومهؿ٦يم

type متلؿضملؼمل٢معمصمؿملماحاثمومتضملؿملماد٣مايث

which ماظذملم مضؿملؼملهمل مامملصؿملهمل مػه متضملؿمل ماظملمملتؿمل مظ٦حهمل محاث بمملظؽمللؾهمل

ASCIIمبمملظؽملم مأعممل مبمملظملؿمملحماسملطمل٦طم, لؾهملمحاثماظظملفملرةمامملصهمل

ميـ٢مزرماظظملفملرةمم0تضملؿملمرضؼملمملمميـ٢مزرماظظملفملرةماسملطمل٦طمحؿملىملمأنماظض٣م

مميـ٢ماظرمامي٤م3ميـ٢مزرماظظملفملرةماودموماظض٣مم2اؼلموماظض٣م

م

تضملشملؿملؽملمملمإعغملمملغؿملهملمإظطملمملءماالدؿفمملبهملممjQueryػ٦مأنماغملؿؾهملممضمملئ٠اظمهآخمعمملمرمنملمذطهميفمػ

مأغ٥ممظألحاثماظيتماالصذلاضؿملهمل مسػمل٧مرابمعضملنيمإذ معـ٢محثماظؽملعمل ماصذلاضؿملهمل متػمل١مادؿفمملبهمل

ميػمل١مادؿفمملبهملماصذلاضؿملهملمتؽملعملػملؽملمملمإشمماظضملؽمل٦انماظيمؼرملرلمإظؿمل٥م,مومتلؼملماغملؿؾهملمبكملظطملمملءماالدؿفمملبهملم

م ماظاظهمل مرؼ٠ مس٤ ممpreventDefaultاالصذلاضؿملهمل مبمملظغملمملئ٤ ماظيتمتلؿكمممeامملصهمل و

مطؼملمملؼػمل٨م:

$(„a‟).click(function(e){

e.preventDefault();

}(;

م مو مأناآلن معؿفملطون ممدم٤ ماظواب مسػمل٧ ماظؽملعمل ميث ماالصذلاضؿملهمل ظ٤مميفماظزملظملقهملاالدؿفمملبهمل

م.مهث

72

م

م

م

م

م:م87إشمماظضؿملعملهملمم75ع٤ماظضؿملعملهملم

مطمملتاي

Animations

73

م:مAnimationsطمملتماي

معهملمػاماظغملؿمملبم؟طؼملـممللميفمععملمMicrosoftظ١مسؽملمسضؽملمملم٦ضممتطمعمملمضػملوملممملمزظوملعأ

تعماىؼملممللمسمس١"مومضػملوملم:م"المتضملؿعملمأنمعمملمتاهمع٤مم:م"المظ١مينمضػملوملأغمكحلؽملمملم..مدفملذط

م"مضػملوملjQuery"مومضػملوملميفماظؽملؾملمملؼهملم:م"أشػملنملمعمملمتاهمع٤مسؼمل٢ماغملؿؾهملمFlashسؼمل٢مصالشم

م.ػغملامدونمأيمبػمملنموماآلنمحمملنماظ٦ضوملمظؽملدلػ٤مذظ١مد٦ؼمملممط٢معمملمدؾ٠

مؾلؿملشملهملم:اتماظاقملث

متقملعم مظضمل٢مAnimationsهملمبممليطمملتموالمامملصجمؼمل٦سهملمع٤ماظم٤jQueryماغملؿؾهمل مو

متقملع مإذ ماظضملؽملمملص مإخظملمملء مو مايطمملتمتغملؼمل٤ميفمإزؾملمملر مػمملتنيماظ٦زؿملظملؿنيمأبلمأغ٦اع ٤ماغملؿؾهمل

ماظ مرؼ٠ مس٤ ماظاظؾلؿملشملؿني متمshowهمل ماظاظيت مو مظإلزؾملمملر ماظلؿضملؼمل٢ متمhideهمل لؿضملؼمل٢ماظيت

متلؿضملؼمل٢ماظاظؿمملنمسػمل٧ماظرملغمل٢م:مظإلخظملمملءمو

$(„selector‟).show();

يفمحنيممselectorحؿملىملمؼعمل٦ممػاماظلشملمبكملزؾملمملرماظضملؽملمملصماكظملؿملهملماظيتمؼضملؿملػمملماحملدم

مأنماظؿضملػملؿملؼملهملم:

$(„selector‟).hide();

ومطـرلامعمملمؼلؿضملؼمل٢مادلجم٦نمػمملتنيممselectorتعمل٦ممبكملخظملمملءماظضملؽملمملصماظيتمؼضملؿملػمملماحملدم

ممملـممللماظؿمملظ٨:بميفمذ٨ءمذؾؿمل٥مTree Listsيفمإغرملمملءماظعمل٦ائ٣ماظرملفؼهملماظاظؿنيم

<html>

<head>

<scriptمsrc=”jquery.js” type=”text/javascript”>

74

</script>

<scriptمtype=”text/javascript”>

$(document).ready(function(){

$(„li:has(ol)‟).css(„curosr‟,‟pointer‟);

$(„li:has(ol)„).click(functionم(){

If($(this).children().is(„:hidden‟))

$(this).children().show();

else

$(this).children().hide();

});

});

</script>

<head/>م

<bodyمdir=”rtl”>

<fieldset>

<legend> مملئؼملهملماظرملفؼهملعـممللماظعمل </legend>

<ul>

<li/>اظضملؽملزملماول<li>مم

اظضملؽملزملماظـمملغ٨<li>مممممممممممم

<ol>مممممممممممممممم

75

<li/>سؽملزملمصس٨<li>مممممممممممممممممممم

<li/>سؽملزملمصس٨<li>مممممممممممممممممممم

<li/>سؽملزملمصس٨<li>مممممممممممممممممممم

<li/>سؽملزملمصس٨<li>مممممممممممممممممممم

<li/>سؽملزملمصس٨<li>مممممممممممممممممممم

<ol/>مممممممممممممممم

<li/>مممممممممممم

<li/>اظضملؽملزملماظـمملظىمل<li>مممممممممممم

اظضملؽملزملماظاب<li>مممممممممممم

<ol>مممممممممممممممم

<li/>سؽملزملمصس٨<li>مممممممممممممممممممم

<li/>سؽملزملمصس٨<li>مممممممممممممممممممم

مممممممممممممممممممم <li>سؽملزملمصس٨</li>

<ol/>مممممممممممممممم

<li/>مممممممممممم

<li/>اظضملؽملزملمامملع<li>مممممممممممم

مممممممممممم<li/>اظضملؽملزملماظلمملدس<li>مممممممممممم

<ul/>ممممممممممم

76

<fieldset/>ممم

</body>

</html>

ممulممـػملهملمبمملظ٦د٣مصمع٤ماظضملؽملمملمUnordered listضمملئؼملهملمشرلمعتؾهملمهؿ٦يماظزملظملقهملمأسالهم

مع٤ماظضملؽملمملصمorederd listمصسؿملهملمعتؾهملمض٦ائ٣سػمل٧ممسؽملمملصمػهماظعملمملئؼملهملمزمؿ٦يمبضمل,م

م.مolممـػملهملمبمملظ٦د٦مم

مؼعمل٦مماظلشملم:

;css(„curosr‟,‟pointer‟).(‟li:has(ol)„)$مم

ماضملؾ ماظرملغمل٢ مإشم ماظظملفملرة معقملذ مذغمل٢ مؼضملؿملػمملبؿطملؿملرل ماظيت مظػملضملؽملمملص مذظ١ مو ماظؽملعمل مإعغملمملغؿملهمل مس٤ م

مصسؿملهملمolاظيتمهؿ٦يمسػمل٧مود٦مممliوماظيمؼضملينمسؽملمملصماظ٦د٦ممممhas:li(ol)ماحملد

م.م(احملدات)راجمجولم

مبؿملؽملؼملمملمتعمل٦ممادشملماظؿمملظؿملهملمبكملضمملصهملماظ٦زؿملظملهملمامملصهملمبمملظعملمملئؼملهملماظرملفؼهملمإشممتػمل١ماظضملؽملمملصم:

$(„li:has(ol)‟).click(function(){

if($(this).children().is(‟:hidden‟))

$(this).children().show();

else

$(this).children().hide();

});

77

طمملغوملمزمملػةممؼعمل٦ممبكملخظملمملئؾملمملمإنبؾؽملمملءمروتنيم)داظهمل(مخمملصمحبثماظؽملعملمسػمل٧متػمل١ماظضملؽملمملصمعمل٦ممتإذم

مjQueryإحىمدوالماغملؿؾهملممisطمملغوملمخمظملؿملهملمومػؽملمملمرمرماظؿؽمل٦ؼ٥مأنماظاظهملممومإزؾملمملرػمملمإن

مت٦اص٠ماحملمtrueاظعملؿملؼملهملمتعمل٦ممبكملسمملدةم مومتضملؿملمدماؼملإنمطمملغوملماظضملؽملمملصماشملؾعملهملمسػملؿملؾملممل رمهلممل

falseيفمايمملظهملماضملمملطلهملم,مبؿملؽملؼملمملمتعمل٦مماظاظهملممchildrenءمظػملضملؽملزملمبكملسمملدةماظضملؽملمملصمابؽملمملم

ماظلشملماظؿمملظ٨م:م٧معضملؽملؾزملؼمبؽملمملءمسػمل٧معمملمدؾ٠اشملؾعملهملمسػملؿمل٥موم

if($(this).children().is(‟:hidden‟))

م"إذ ماظضملؽملزمل مطمملنمأبؽملمملء ممthisا م, مالمسمظمل٧شرلمزمملػؼ٤" سػملؿمل١مإنمطؽملوملمضمضأتماظظملزمل٦لممو

ماظضملؽملزملماظيموضمسػملؿمل٥محثماظؽملعمل.مػؽملمملمؼضملينمthisاظلمملبعملهملمأنماظضملؽملزملم

م

متقملع مأوراقمم٤jQueryماغملؿؾهمل ماظعملػملنملميفمحمملظهمل مظػملعملػملنملميفمعـ٢مػهمايمملظهملمترملؾ٥مداظهمل داظهمل

اظهملمبكملخظملمملءماظضملؽملزملمإنمطمملنمزمملػامأومإزؾملمملرهمإنمطمملنمومتعمل٦ممػهماظمtoggleامنمملطمازلؾملمملم

مخمظملؿملمملمومهلمملماظرملغمل٢ماظؿمملظ٨م:

$(‟selector‟).toggle();

م ماحملد ماظيتمؼضملؿملػممل ماظضملؽملمملص مزؾمل٦ر مبعملػملنملمحمملظهمل ماظاظهمل مميغملؽملؽملمملممselectorحؿملىملمتعمل٦م و

هملمامملصمjQueryهلنيمعـممللماظعملمملئؼملهملماظرملفؼهملمبمملالسؿؼملمملدمسػمل٧مػهماظاظهملموماخؿزملمملرمذؿملظملةم

مب٥مظؿزملؾمطؼملمملمؼػمل٨م:م

$(„li:has(ol)„).click(function(){

;()children().toggle.(this)$ممممممممم

});

78

م ماغملؿؾهمل مصؼ٠متشمل٦ؼ مب٦ض٦حمصقمطالم مؼصملؾمل مػؽملممل م"اطؿنملممjQueryو مرحمذضملمملرػممل سؽملعممل

مصضمل٢مأطـ"م.اأض٢م..م

م

!مأؼ٤مايطهملم؟"مومػؽملمملممضمؼعمل٦لمضمملئ٢مبضملمضاءةمادشملمأسالهم:م"غلؿشملؿملمسؼمل٢مػامبؾلمملرهملوم

لؿس٧مبونمأيمودؿملمسؽملعمملمتمtoggleوممhideوممshowوالماظمرمرمبؽملمملمأنمغضملذلفمأن

ومميغمل٤مهلنيم,مجمملفممؼملمملمتعمل٦ممبكملخظملمملءمومإزؾملمملرماظضملؽملمملصمبرملغمل٢أبامومإغمؾملمملمالمتضملؼمل٢مطقطمملتصكملغ

مودؿمل ماظرملغمل٢مبؿؼملؼ ماظوالمميـمإشممط٢دملمػا مع٤مػه مايطهمل مؼزملؾمذغمل٢م٢مدسهمل مسػملؿمل٥ و

ماظوالمطؼملمملؼػمل٨م:

;show(speed).(‟selector„)$م

$(„selector‟).hide)speed);

$(„selector‟).toggle)speed);

ميغمل٤مموم)زع٤متؽملظملؿملماقملثميفمايعملؿملعملهمل(متؽملظملؿملماقملثمدسهملميـ٢ممspeedحؿملىملمأنماظ٦دؿملم

ممبزملؿملطملؿنيم:مspeedس٤ماظ٦دؿملممماظؿضملؾرل

م مغزملم-أ مصؿملطملهمل مضؿملؿملهمل مػ٨ مو ماظعملؿمل٣: مع٤ مبشملم‟slow„مؼملهمل متؽملظملؿملا متضملين مأومؽؿملاظيت مظػملؼملقملث ممل

„normal‟مبمملظلم ماظيتمتضملينمتؽملظملؿملماقملث مو مأو ماظشملؾؿملضملؿملهمل ماظيتم‟fast„سهمل متضملينمتؽملظملؿملمو

مماقملثمبرملغمل٢مدؼ.

ثمملغؿملهمل(مومبمملالدؿظملمملدةمع٤مػهمم1.110ػمل٨مثمملغؿملهملم)ػملبمملممتـ٢مزع٤متؽملظملؿملماقملثم:مصؿملطملهملمرضؼملؿملهملم-مب

إذامسدلغمملميفمعـممللماظعملمملئؼملهملماظرملفؼهملمظؿزملؾمطؼملمملؼػمل٨ممjQueryلنيمذؿملظملةماضملػمل٦عهملمميغمل٤مه

م:س٤ماظلسهملمبمملظزملؿملطملهملماظضؼملؿملهملم

$(„li:has(ol)„).click(function(){

79

;children().toggle(1000).(this)$ممممممممم

});

م:طؼملمملؼػمل٨مإذامسدلغمملمس٤ماظلسهملمبمملظزملؿملطملهملماظؽملزملؿملهملمأوم

$(„li:has(ol)„).click(function(){

ممممممممم $(this).children().toggle(„slow‟);

});

مضرهمثمملغؿملهملموماآلنمأصؾمط٢ ػمل٨مثمملغؿملهمل(مومػملعم0111واحةم)مع٤ماإلخظملمملءموماإلزؾملمملرمؼلؿطملقمزعؽملممل

بمملظصملؾمل٦رم.مjQueryيفمػهمايمملظهملمؼؾأمصمممللمحطمملتم

ػ٦ممtoggleوممhideوممshowآخمعمملمرمنملماالسذلافمب٥ميفمدؿملمملقمايؼىملمس٤ماظوالمم

ممملمذغملالمآخامػ٦ماظرملغمل٢م:أنمهل

$(‟selector‟).show(speed,F);

$(‟selector‟).hide(speed,F);

$(„selector‟).toggle(speed,F);

ػ٦ماد٣مداظهملمأخىمع٦ج٦دةميفماظزملظملقهملمؼؿ٣متؽملظملؿملػمملمسؽملماطؿؼملممللمتؽملظملؿملممFحؿملىملمأنماظ٦دؿملم

م.اقملثم

م

معقملثاتماظؿالذ٨م:

مدوا مظػملقؼىملمس٤ ماالغؿعملمملل مميغملؽملؽملممل ماآلن مو مدوالمحطمملت مأخىمع٤ مداظمjQueryل مهملعـ٢

ماظيتمهلمملماظرملغمل٢ماظؿمملظ٨م:مFade inاظصملؾمل٦رماؿالذ٨م

80

$(‟selector‟).fadeIn(speed,F);

ماظ٦دؿمل ميفممspeedماالخؿؿملمملريمحؿملىملمأن ماظلسهمل مطغمل٢مودشملمملء مو ماقملث متؽملظملؿمل ميـ٢مدسهمل

أوممslowظؽملزملؿملهملمضؿملؼملهملمع٤ماظعملؿمل٣ماؼفملخمػاماظ٦دؿملممjQueryدوالمايطمملتمامملصهملممبغملؿؾهملم

normalأوممfastػمل٨مثمملغؿملهملم,ميفمحنيمأنماظ٦دؿملمػملضؼملؿملهملمتضملدلمس٤مزع٤ماظؿؽملظملؿملمبمملأومضؿملؼملهملمرم

مميـ٢مازلمملمظاظهملمع٦ج٦دةميفمالؿؽملمؼؿ٣مادؿسمملؤػمملمبضملماغؿؾملمملءمتؽملظملؿملماقملث.مFاالخؿؿملمملريم

صؽملق٤مممOptional parameterسؽملعمملمغعمل٦لمس٤مودؿملمعمملمأغ٥مودؿملماخؿؿملمملريمم:متط

م.مسمممتؼهمسؽملمادؿسمملءماظاظهملضملينمأغؽملمملمغلؿشملؿملغ

م ماؿالذ٨ ماالخؿظملمملء مداظهمل متعمل٦م ماؿالذ٨ ماظصملؾمل٦ر مداظهمل مسغمل مسػمل٧ بكملخظملمملءممfade outو

مومهلمملماظزملؿملطملهملماظؿمملظؿملهملم:ممعؿالشماظضملؽملزملمبرملغمل٢

$(„selector‟).fadeout(speed,F);

م ماظ٦دؿمل مأن ممspeedحؿملىمل ماظ٦دؿمل مو م)طمملظضملمملدة( ماظؿؽملظملؿمل مدسهمل مظاظهملممFميـ٢ مازلممل ميـ٢

مع٦ج٦دةميفمالؿؽملمتلؿس٧ميصملهملماغؿؾملمملءمتؽملظملؿملماقملثم)طمملظضملمملدةمأؼسملممل(.

م

م ماغملؿؾهمل ممjQueryت٦ص مبمملظؿالذ٨مازلؾملممل مأخىمخمملصهمل متعمل٦مممfadeToداظهمل ماظاظهمل مػه و

امملصهملمبمملظضملؽملمملصماظيتمؼضملؿملػمملماحملدمومهلمملماظرملغمل٢ماظؿمملظ٨ممopacityبؿقؼمدرجهملماظرملظملمملصؿملهملم

م:

$(‟selector‟).fadeTo(speed,opacity,F);

مظاظهملمتلؿس٧ميصملهملمميـ٢مازلمFميـ٢مدسهملماظؿؽملظملؿملمموماظ٦دؿملممspeedحؿملىملمأنماظ٦دؿملم ممل

ميـ٢مدرجهملمذظملمملصؿملهملماظضملؽملزملماظيتمدؿملؽملؿعمل٢مإظؿملؾملمملمأثؽملمملءممopacityاغؿؾملمملءمتؽملظملؿملماقملثمأعمملماظ٦دؿملم

مميغمل٤مأن مو ماقملث متؽملظملؿمل ماغؿؾملمملء مبضمل مسػملؿملؾملممل مؼلؿعمل مو ماقملث مبنيممتؽملظملؿمل ماظرملظملمملصؿملهمل مدرجهمل م1تغمل٦ن

81

م مو ماظصملؾمل٦ر( مسم ماظاظهملمم011)ذظملمملفمظرجهمل مأن مػؽملممل ماإلذمملرة مرمر مو م, مرؾؿملضمل٨( مبرملغمل٢ )زؾمل٦ر

fadeToالمتعمل٦ممحبفماظضملؽملمملصمسؽملماغؿؾملمملءمايطهملمطؼملمملمتظملضمل٢ممfadeOutمعـالم.م

م

معقملثاتماالغالقم:

م معؽملؾملمملمدوالمخمملصهملمحبطمملتمأصم٢معـ٢مدوالمحطمملتمامjQueryؼؿ٦صميفمعغملؿؾهمل الغالقمو

مذاتماظرملغمل٢م:مslideDownاظيتمت٦صػمملماظاظهملممslide downحطهملماالغالقماظلظملػمل٨م

$(‟selector‟).slideDown(speed,F);

ماظ٦دؿملممspeedحؿملىملمأنماظ٦دؿملم مو متمFميـ٢ماظلسهمل مظاظهمل لؿس٧مسؽملماغؿؾملمملءمميـ٢مازلممل

مت٦ص مطؼملممل م, ماقملث ماظضملػمل٦ي مظالغالق مداظهمل ماغملؿؾهمل slide upمم مهلمملممslideUpازلؾملممل و

ماظرملغمل٢م:

$(‟selector‟).slideUp(speed,F);

لؿس٧مسؽملمدسهملماظؿؽملظملؿملموماد٣ماظاظهملماظيتمتمميـالنمFوماظ٦دؿملممspeedاظ٦دؿملممحؿملىملمأن

ماالغؿؾملمملءمع٤مايطهمل.

ماظاظهملم مازلؾملممل مبؾملؼملممل مخمملصهمل مضػملنمل مباظهمل ماظلمملبعملؿني مظػملاظؿني مدجمممل ماغملؿؾهمل متعملم و

slideToggleكملزؾملمملرماظضملؽملمملصماكظملؿملهملمبمملدؿكاممعقملثمتعمل٦ممبمslide Downومإخظملمملءمم

مومهلمملماظرملغمل٢ماظؿمملظ٨م:مslide Upاظضملؽملمملصماظصملمملػةمبمملدؿكمملدممعقملثم

$(‟selector‟).slideToggle(speed,F);

مأنظؽملؿطم٨ومالمداس ميـ٢ماد٣ماظاظهملممFاظؿؽملظملؿملموماظ٦دؿملممميـ٢مدسهملمspeedاظ٦دؿملمممعضملممل

م.ؿؾملمملءمايطهململؿس٧مسؽملماغاظيتمت

82

مإؼعملمملفمايطهملم:

م مع٤مدوالمعغملؿؾهمل مداظهمل ممjQueryآخ مػ٨ماظاظهمل مبممليطهمل ماظيتمتلؿكمممstopامملصهمل و

بؾلمملرهملمإلؼعملمملفمتؽملظملؿملمأيمحطهملمضؿملماظؿؽملظملؿملمومتلؿكممبمملظرملغمل٢م:

$(‟selector‟).stop();

م:مطمملتماغملؿؾهملدؼميعجم

م:مjQueryمغملؿؾهملامملصهملممبمطمملتأػ٣مدوالمايؼػملكماىولماظؿمملظ٨م

ماجملؼمل٦سهملمسؼملػملؾملمملماد٣ماظاظهمل

show معقملثاتمبلؿملشملهملمإزؾملمملرماظضملؽملمملصماكظملؿملهمل

hide معقملثاتمبلؿملشملهملمإخظملمملءماظضملؽملمملصماظصملمملػة

toggle معقملثاتمبلؿملشملهمل ضػملنملمحمملظهملمزؾمل٦رماظضملؽملزمل

fadeIn معقملثاتماظؿالذ٨مزؾمل٦رمعؿالش

fadeOut معقملثاتماظؿالذ٨ماخؿظملمملءمعؿالش

fadeTo معقملثاتماظؿالذ٨مصؿملهملمحمدةتالذ٨مإشممذظملممل

slideDown معقملثاتماالغالقماغالقمظألدظمل٢

slideUp معقملثاتماالغالقماغالقمظألسػمل٧

slideToggle معقملثاتماالغالقماغالقمإشممايمملظهملماضملمملطلهمل

83

stop م إؼعملمملفماقملثاتمضؿملماظؿؽملظملؿمل

م

مإغرملمملءمحطمملتمخمملصهملم:

م معغملؿؾهمل ماالصذلاضؿملهملمشرلمتػمل١مبكملغرملمملءمحطمملتمخمملصهملممjQueryتلؼملمظؽملممل سدلماظاظهملماظيتمت٦صػممل

animateموماظيتممتؿػمل١ماظرملغمل٢ماظؿمملظ٨م:م

$(‟selector‟).animate(properties,speed);

م ماظ٦دؿمل ممpropertiesحؿملىملمأن مطمملئ٤ ميفممJSONػ٦ مدمملبعملممل اظضمملئ٠م)طمملظيمسضؽملممله

إذمماغؿؾملمملءمايطهملممسػملؿملؾملمملماظضملؽملزملمبضملازملمملئماظيتمدؿمللؿعملممع٤ممملظوال(مميـ٢مجمؼمل٦سهملبمامملصهمل

صغملةمايطمملتمامملصهملمتغملؼمل٤ميفماالغؿعملممللمع٤مايمملظهملماظشملؾؿملضملؿملهملمظػملضملؽملزملمإشممايمملظهملماىؼةممأن

ماظ٦دؿملم مب٦ادشملهمل مازملمملئماودة ماظ٦دؿملممpropertiesاظيتمتظملضؾملممل مأعممل ,speedم

م,مع٤ممأخػمملمطؼملمملمذطغمملػمملمدمملؿملصكملغ٥مالمؼالمميـ٢مدسهملمايطهملمومالمتالماظعملؿمل٣ماظيتمؼلؿشمل بعملممل

م مظػملغملمملئ٤ مازملمملئماظيتمميغمل٤ مأن مػؽملممل مغط مأن مػ٨ممpropertiesاؾمل٣ مزمؿ٦ؼؾملممل أن

مرضؼملؿملهمل موماظيتمتفملخمضؿملؼملممل مومheightعـ٢ميفماظضملمملدةممصعملمخزملمملئمامنمملطمامملصهملمبمملظضملؽملزمل

opacityمومtopمم ماغملؿؾهملممإخلم..مfont-sizeو مدوال مإحى مأزلمملء متفملخ مأن أو

م.م...مإخلمhideوممtoggleوممshowامملصهملمبممليطهملمعـ٢م

ؼغملؼمل٤مدؽملعمل٦ممبكملطؼملممللمغعملميفمحطمملتماغملؿؾهململمسػمل٧مإغرملمملءمحطهملمخمملصهملمبؽملمملمطؼملـممللمأوم..محلؽملممل

ميفم مغمfadeToggleايطهمل مسغملمبمملض٨مماظيتممل مسػمل٧ ماصذلاض٨ مبرملغمل٢ مع٦ج٦دة أغؾملممل

مامملصهملمميغمل٤مأنم مايطهمل مػه مظؾؽملمملء مضػملنملمو مداظهمل جمؼمل٦سمملتمايطمملتماظيتممتؿػمل١مط٢معؽملؾملممل

مغغملؿنملمذؿملؽمملمطؾملام:

$(‟selector‟).animate({opacity : ‟toggle‟}, ‟slow‟);

84

م ماظ٦دؿمل مصكملن مػؽملممل متالح ممspeedطؼملممل ماظعملؿملؼملهمل مزمؼمل٢ ماظ٦دؿملممslowػؽملممل مأن محني يف

propertiesػؽملمملمػ٦مطمملئ٤ممJSONماظؿمملظ٨م:م

{opacity :‟toggle‟}

م.ةمامملصهملمبمملظضملؽملزملميفمط٢معمopacityوماظيمؼضملينمضػملنملمضؿملؼملهملمامملصؿملهملم

م

مومطؼملـممللمآخمميغمل٤مإغرملمملءمحطهملمخمملصهملمبؽملمملمتعمل٦مممبسملمملسظملهملمحف٣ماظضملؽملمملصمثالثهملمأضضملمملفمطؼملمملمؼػمل٨م:

$(‟selector‟).animate(

{ width م: $(this).width() * 3 ,

heightم: $(this).height() * 3م }

, „slow‟ );

مإذمؼؽملؾطمل٨ صعملمأنمتودماظاظهملمموماآلنمأسؿعملمأنمصغملةمإغرملمملءمايطمملتمامملصهملمأصؾقوملمواضقهمل

مسدلمطمملئ٤م مع٤ماظعملؿمل٣ماظؽملؾملمملئؿملهملممملصؿملمملتماظضملؽملزمل ممJSONمبفؼمل٦سهمل مسدلمو ميغملؽمل١مهؼماظلسهمل

م..محصملمملمع٦صعملمملم.مspeedاظ٦دؿملماظـمملغ٨م

85

م

م

م

م

م:م110إشمماظضؿملعملهملمم87ع٤ماظضؿملعملهملم

اظؿكمملرنملمعمامملدمم

AJAXمسدلمتعملؽملؿملهمل

86

م:مAJAXسدلمتعملؽملؿملهملمامملدمماظؿكمملرنملمعم

مأت مأن مسػمل٧ماظؿعملؽملؿملمملتمامملصأدؿشملؿمل مشملمملول ماظذمل مبدلجمهمل ممWebهمل مض٦ل ملمم٤عؽملؾملمأيمتعملؽملؿملهملمنإ:

م.AJAXطؼملمملمصضملػملوملمتعملؽملؿملهملممWebتلؿشملمأنمتظملؿمآصمملقمتشمل٦ؼمتشملؾؿملعملمملتماظذملم

AJAXمم مظذمل مػ٨متعملؽملؿملهملممAsynchronous Java Script And XMLاخؿزملمملر و

م ممWebتلؼملمظؿشملؾؿمل٠ماظذمل عؿاعؽملهملمظ٥مويمشرلمسدلمإردممللمرػملؾمملتممServerبمملظؿكمملرنملمعماظذمل

بمالمملصهملمبنيمتشملؾؿملعملمملتماالغذلغوملمومتشملؾؿملعملمملتمدشملمدونمايمملجهملمإلسمملدةمهؼملؿمل٢ماظزملظملقهملممممملمؼعمل

مماغملؿنملمومبمملظشملؾمصكملن مطضملمملدت٥مومطضملمملدتؽملمملمWebاخؿالفمعلؿضملضمملتماظذمل مرمضمل٢ماع٦رمأطـمتضملعملؿملا

ومتعملمممعملؿملاتاظؿضملمظؿؿ٦شممأعمjQueryػهماظؿضملعملؿملاتمخػملمزؾمل٦رغمملمومغلؿضملؼمل٢معغملؿؾؽملمملممػملعمل٨دؽمل

٨محمملجمملتؽملمملممتمملعمملمومتلؼملمظؽملمملمبمملظذلطؿملمسػمل٧مػفمتشملؾؿملعملؽملمملمصعملمدونمأنمبلؿملشملهملمتػملؾمبؼػملهملمظؽملمملمدواال

م.مذ٨ءمآخغرملطمل٢مبمملظؽملمملمبفمليم

م

ادؿـؼملمملرماغملؿؾهملمؾملمملمغؽملمملضمصؿملضمتغمل٦نمػهماظضمملئ٠مػ٨ماصضملنملميفماظغملؿمملبمإذمأغؽملمملممعػملق٦زهملم:

ومالمم٨AJAXماظؿعملؽملؿملهملمػامالمؼضملينمأغؽملمملمغطملشملمظغمل٤مAJAXماظيتمؼغملؿؾؾملمملمعدلجم٦ظؿؾلؿملماظرملؿملظملاتم

مص مع٤مرفمامملدم متعملؽملؿملمملتماظدلجمهمل مع٤مرفمأيمع٤ ميفماظدلجمهمل مملمتغمل٤مظؼ١مخدلة كملذا

همضؾ٢مضاءةمػممملؼملعملأمسؽملؾملتأنممصؾمملدؿشملمملسؿ١مAJAXم٦ن٤مالمؼضملصمممأومطؽملوملمServerممملدما

,مومإنمممملؼملظؿطملشملؿملؿؾملمأطـمع٤مطؿمملبممملنمملرجمإرمملرمػاماظغملؿمملبمومضمزمؿمملجخمع٦ض٦سمملنمؼملمملصؾملاظضمملئ٠م

م.ممطمملنما٦ض٦عمالمؼؾملؼمل١متلؿشملؿملماالغؿعملممللمعؾمملذةمإشممدضمملئ٠ماإلضمملصمملت

م

ماعـػملهملميفمػاماظظملزمل٢متؿشملػملنملموج٦دمتشملؾؿمل٠مع٤مرفمخمملدممبضملؿملمأومحمػمل٨م.ممتطم:

87

جػملنملماحملؿ٦ىمع٤مامملدمم:

مأو معغملؿؾهمل مت٦صػممل ماظيت ماظوال ماظشملمjQueryل مإردمملل مظؿفملعني مػملؾمملت مظػملكمملدمماشرل ؿاعؽملهمل

Serverػ٨ماظاظهملممloadماظيتمهلمملماظرملغمل٢ماظؿمملظ٨م:م

$(‟selector‟).load(url,JSON,F);

ميفمحنيمأن,مممملدميفمااظشملػملنملمميـ٢ماد٣ماظزملظملقهملماظيتمدرلد٢مإظؿملؾملمملممurlحؿملىملمأنماظ٦دؿملم

ماظيتمدذلد٢مإشمماظزملمJSONاظ٦دؿملماالخؿؿملمملريم مع٤ماظ٦دشملمملء مطمملئ٤مميـ٢مجمؼمل٦سهمل ظملقهملمػ٦

لؿس٧مميـ٢مازلمملمظاظهملمع٦ج٦دةميفماظزملظملقهملمتصؾمل٦ممFاظ٦دؿملماالخؿؿملمملريممأعمملممملدمذاتؾملمملميفما

مع مبضملمضومماالدؿفمملبهمل متؽملظملؿملماظشملػملنملمو ماغؿؾملمملء مامملدممممملدم٤مايصملهمل مادؿفمملبهمل ومميغمل٤ممتؼ

ماظاظهمل مأنماظاظهملمط٦دؿملمهله مرمنملمذطه مأػ٣معممل مرؾضملممل مو مبمملدؿؾالمحمؿ٦ىممloadم, تعمل٦م

مServerمبمملحملؿ٦ىماظيمدؿملضمل٦دمع٤مامملدممSelectorئؽملمملتماظيتمؼضملؿملػمملماحملدماظغملممل

,مومطؼملـممللمم)يفمايعملؿملعملهملمدؿضمل٦دماظزملظملقهملماشملػمل٦بهملمطمملعػملهمل(مHTMLسػمل٧مذغمل٢ممغؿؿملفهملمتؽملظملؿملماظشملػملنمل

مسػمل٧مػهماظاظهملمضمغغملؿنملمذؿملؽمملمطؼملمملؼػمل٨م:

$(‟#divA‟).load(‟myPage.aspx‟);

محمؿ مبمملدؿؾال ماظاظهمل مػه مدؿعمل٦م محؿملىمل ماضملف مذو ماظ٦د٣ ماظزملظملقهملمم٦divAى مبقؿ٦ى

aspx.myPageم.ا٦ج٦دةميفمغظملمعلمملرمصظملقؿؽملمملمايمملظؿملهملم

م مؼلؼملمو مممممل ماظزملظملقهمل ماد٣ مع ممبقد ماظاظهمل متوؼ مرؼ٠ مس٤ مأطـ مبمملظضملؼملػملؿملهمل ماظؿقغمل٣ ميغملؽملؽملممل

وماظيمؼشملمملب٠ماحملدممHTMLسػمل٧مذغمل٢مممملدمبمملدؿؾالماحملؿ٦ىمبمملحملؿ٦ىماضملمملدمع٤ما

مغملؽملؽملمملمطؿمملبهملمذ٨ءمطؼملمملؼػمل٨م:صعملمومسؽملػمملممي

$(‟#divA‟).load(„myPage.aspx aؼhref=www.aw.comػ‟);

88

م ماضملف مذو ماظ٦د٣ محمؿ٦ى مبمملدؿؾال ماظلمملبعملهمل ماظرملؿملظملة متعمل٦م اظيممؿ٦ىمملحملبمdivAحؿملىمل

ماحملد ممaؼcom.aw.www=hrefػمؼشملمملب٠ ماظاظهمل مدؿضملؿمله ماظي اظزملظملقهملممع٤مloadو

aspx.myPage.

ظػملزملظملقهملماهلفميفمامملدممظؽملظملضمأنماظزملظملقهملماظيتمغؼمادؿضملمملدةممومطؼملـممللمسػمل٧ممتؼمودشملمملء

مضل٣مع٤محمؿ٦اػمملممتػمل١ماظضملؽمل٦انماظؿمملظ٨م:

/myPage.aspx?p1=v1&p2=v2

مسؽملئمميغملؽملؽملمملمأنمغغملؿنملماظرملؿملظملةماظؿمملظؿملهملم:

$(‟#divA‟).load(‟/myPage.aspx‟, {p1 :م ‟v1‟, p2 :م ‟v2‟});

مميـ٢مودشملمملءماظزملظملقهملماهلفم.مJSONحؿملىملمأنماظ٦دؿملماظـمملغ٨مػؽملمملمػ٦مسؾمملرةمس٤مطمملئ٤م

م

ؼعمل٦ممبؿكؼ٤ممInternet Explorerمػؽملمملمأنمالؿضملضمع٤ماؾمل٣مأنمغطمعػملق٦زهملم:

م ماشملػمل٦بهمل ماظزملظملقمملت مع٤ معقملضؿهمل مإنمCacheغلكهمل مجػملنملممظا متؽمل٦ي ماظيت ماظزملظملقهمل طمملغومل

ماظضملؼملالتمعـالمعضملػمل٦عمملت معـ٢مصظملقمملتمأدضملمملر مبرملغمل٢مدؼ معؿفدة ماحصمسػمل٧ممعؽملؾملممل مسؽملػممل ,

مودؿملمذت مؼضملؿدلمط٢مماوؼ مرمضمل٢مالؿضملضمدمملظماظط منمػا مظػملاظهمل مسرمل٦ائؿملممل متؿطملرل ضؿملؼملهمل

إلحىماظزملظملقمملتمسػمل٧ممCacheومبمملظؿمملظ٨مظ٤مؼ٦ثمسؼمل٢ممرػملنملمعؽملؾملمملمصظملقهملمعلؿعملػملهملمس٤ماخى

م.مسؼمل٢ماؿؾعمل٨معؽملؾمل٤

م

89

مػملكمملدممع٤محعمل٦لماظؽملؼملمملذجم:ظمتؼمودشملمملءم

م مإشمماظاظهمل ممنر معممل ممضؿملؼملمملمloadشمملظؾممل ماظزملظملقهمل ممنمملذج مFormsع٤مأح مظػملزملظملقهملمم ط٦دشملمملء

م ماظاظهمل مػ٨ ماغملؿؾهمل مدوال مع٤ مأخى مداظهمل مادؿضملؼملمملل مسدل صؼملـالممserializeاهلف

م ماظزملظملقهمل ماضملفممaspx.myPageالدؿسمملء مذو ماظؽملؼمل٦ذج مع٤ مضمملدعهمل مضؿملؼملؾمل٣ مودشملمملء ع

myFormمميغمل٤مأنمغغملؿنملمعمملؼػمل٨م:م

$(‟#divA‟).load(م‟/myPage.aspx‟, $(‟#myForm‟).serialize());

مloadاؽملمملدنملمظػملاظهملممJSONيفمػاماـممللمت٦ظؿملمطمملئ٤ممserializeومدؿؿ٦شمماظاظهملم

م.مaspx.myPageؼملـ٢مودشملمملءماظزملظملقهملماهلفموماظيمدؿمل

م

م: ممعػملق٦زهمل ماالخؿؿملمملري مظػمل٦دؿمل مضؿملؼملهمل متوؼ ماظشملػملنملممJSONيفمحمملل مبكملردمملل ماظاظهمل دؿعمل٦م

م متومPOSTبمملظشملؼعملهمل مسم ميفمحمملل مو مظات مضؿملؼملهمل ماظاظؼ مدؿعمل٦م ماظشملػملنملماظ٦دؿمل مبكملردمملل همل

م.مGETبمملظشملؼعملهملم

م:مGETإردممللمرػملؾمملتمع٤ماظؽمل٦عم

وممGETعؿاعؽملهملمع٤مغ٦عمحمدمع٤ماظؽمل٦سنيمشرلمبكملردممللمرػملؾمملتممjQueryتلؼملمظؽملمملماغملؿؾهملم

POSTسدلمجمؼمل٦سهملمع٤ماظوالمعؽملؾملمملماظاظهملممget.$ع٤ممعؿاع٤شرلممتعمل٦ممبكملردممللمرػملنملاظيتمم

أسمملدػمملمامملدممومهلهماظاظهملماظرملغمل٢ماظيتمماالدؿفمملبهملميـ٢مممملضملؿملمطمملئؽملومتمإشممامملدممGETاظؽمل٦عم

ماظؿمملظ٨م:

$.get(url,JSON,F);

90

م ماظ٦دؿمل مميـ٢ممurlحؿملىملمأن مو ماظشملػملنملميفمامملدم مإظؿملؾملممل ماظيتمدرلد٢ ماظزملظملقهمل ماد٣ ميـ٢

جمؼمل٦سهملمع٤ماظ٦دشملمملءماظيتمدذلد٢مإشمماظزملظملقهملمذاتؾملمملميفمامملدمممJSONاظ٦دؿملماالخؿؿملمملريم

لؿس٧ميصملهملماغؿؾملمملءمتؽملظملؿملمتصؾمل٦مميـ٢مازلمملمظاظهملمع٦ج٦دةميفماظزملظملقهملممFاالخؿؿملمملريمأعمملماظ٦دؿملم

م.ومميغمل٤ممتؼمادؿفمملبهملمامملدممط٦دؿملمهلهماظاظهملماظشملػملنمل

ماظاظ مأنمػه ماظؿؽملؾؿمل٥ مرمر مػؽملممل متضملؿدلمع٤مدوالمو ممjQueryهمل مع٤مدوالماظ٦زؿملظملؿملهمل )جمؼمل٦سهمل

حؿملىملمأنمم$.Xؼغمل٦نمهلهماظوالماظزملؿملطملهململؿس٧معؾمملذةمدونمايمملجهملمظػملؼملقداتموماغملؿؾهملمت

Xمػؽملمملمميـ٢ماد٣ماظاظهمل(م.م

مضمغغملؿنملمعمملؼػمل٨م:م$.getاظ٦زؿملظملؿملهملممومطؼملـممللمسػمل٧مادؿكامماظاظهمل

$.get(

‟/myPage.php‟,

{p1 10„:م‟ , p2 :‟cat‟},

Function(data){alert(data);}

;(م

مشمماظزملظملقهملم:عؿاع٤مإشرلمممملرػملؾمؼد٢تؽملظملؿملماظرملؿملظملةماظلمملبعملهملممأنحؿملىملم

/myPage.php?p1=10&p2=cat

م مظػملغملمملئ٤ مظؿمللؽملػممل ماظزملظملقهمل مػه ماظيتمتضملؿملػممل ماظعملؿملؼملهمل مؼفملخ مظاظهملممdataو اظيمميـ٢مودؿملشملممل

مصؽملوقمردمملظهملم.تعمل٦ممبضملضمضؿملؼملهملمػاماظ٦دؿملميفمبلؿملشملهملم

91

م:مPOSTإردممللمرػملؾمملتمع٤ماظؽمل٦عم

بكملردممللمرػملنملمم$.postؿملهملمتعمل٦ممأخؿؾملمملماظاظهملماظ٦زؿملظملم$.getوميفمدؿملمملقمعرملمملب٥مظػملاظهملماظ٦زؿملظملؿملهملم

مومذغملػملؾملمملماظؿمملظ٨معرملمملب٥مظرملغمل٢مأخؿؾملمملم:إشممامملدمممPOSTعؿاع٤مع٤ماظؽمل٦عمشرلم

$.post(url,JSON,F);م

ميـ٢مودشملمملءمػهماظزملظملقهملم,ممJSONميـ٢ماد٣ماظزملظملقهملميفمامملدمم,موممurlحؿملىملمأنماظ٦دؿملم

م ماظشملػملنملمFو متؽملظملؿمل ماغؿؾملمملء مسؽمل متلؿس٧ مظاظهمل مازلممل مامميـ٢ ممتر مأن مميغمل٤ مامملدممو دؿفمملبهمل

م.مط٦دؿملمهلممل

مإردممللماظشملػملؾمملتممملدممعضملػمل٦ممغ٦عماالدؿفمملبهملم:

ع٤ماؼملغمل٤مأنمؼضملؿملماظؿشملؾؿمل٠ما٦ج٦دميفمامملدممادؿفمملبؿ٥ميفمأيمذغمل٢مزمدهمعدلعيملمػام

مادؿفمملبؿ٥م ماظشملػملنملمدؿملضملؿمل مإظؿمل٥ مغد٢ ماظي ماظؿشملؾؿمل٠ مؼعملنيمأن مو مبؿملؽملهمل مسػمل٧ مطؽملممل مصكملن م, اظؿشملؾؿمل٠

مهملطـرلاماظاظمخمملصهملمـ٢مػهمايمملظهملمترملمملب٥مداظهملت٦صممjQueryاغملؿؾهملمصكملنممJSONبمملظؿؼملـؿمل٢م

مأغؾملم$.getمهملاظ٦زؿملظملؿمل معزملؼملؼملسا ممهملممل مطمملئؽملمملت ماالد٣ممJSONالدؿضملمملدة مهؼمل٢ ماظاظهمل مػه ,

getJSON.$مومهلمملماظرملغمل٢ماظؿمملظ٨م:م

$.getJSON(url,JSON,F);

ظزملظملقهملمميـ٢مودشملمملءمػهمامJSONميـ٢ماظزملظملقهملماهلفميفمامملدمموممurlحؿملىملمأنماظ٦دؿملم

صؿملؼملـ٢مازلمملمظاظهملميفمالؿؽملمتلؿس٧ميصملهملماغؿؾملمملءماظشملػملنملمومميغمل٤مأنمميرمهلمملممF,مأعمملماظ٦دؿملم

م.JSONومؼغمل٦نمػاماظ٦دؿملمطمملئؽملمملمع٤مطمملئؽملمملتممادؿفمملبهملمامملدممؼضملدلمس٤ودؿملم

م

92

صالممjQueryيفمعغملؿؾهملممAJAXومعمملمدعؽملمملميفمدؿملمملقمايؼىملمس٤ماظوالماظ٦زؿملظملؿملهملمامملصهملمبذملم

ع٤ممjava scriptاظيتمتعمل٦ممجبػملنملمعػملمم$.٧getScriptماظاظهملمأنممنمسػملضرلم

معؿاع٤مومػهماظاظهملمهلمملماظرملغمل٢م:شرلمامملدممومتؽملظملؿملهمداخ٢ماظزملظملقهملمبرملغمل٢م

$.getScript(url,F);

ازلمملممFيفمامملدممومميـ٢ماظ٦دؿملممJava scriptميـ٢معػملماظذملممurlحؿملىملمأنماظ٦دؿملم

مطؿؼملممللماظشملػملنملم.ظاظهملمع٦ج٦دةميفمالؿؽملمتلؿس٧ميصملهملما

م:مAJAXاظؿقغمل٣ماظغملمملع٢مبشملػملؾمملتم

عؿاعؽملهملمصكملغؾملمملمشرلممAJAXمتؽملقؽملمملمدواالمبلؿملشملهملمإلغرملمملءمرػملؾمملتممjQueryحلؽملمملم..مطؼملمملمأنماغملؿؾهملم

مرػملؾمملتم مإغرملمملء متؿؿملمظؽملممل مداظهمل مؼؿضملػمل٠مبغمل٢مع٤مػهممAJAXمتؽملقؽملممل ماظغملمملع٢مبغمل٢معممل ماظؿقغمل٣ ع

موماظيتمهلمملماظرملغمل٢ماظضملمملمماظؿمملظ٨م:م$.ajaxاظشملػملؾمملتم,مػهماظاظهملمػ٨ماظاظهملماظ٦زؿملظملؿملهملم

;ajax(options).$م

ميـ٢مجمؼمل٦سهملماؿملمملراتمامملصهملممJSONػ٦مسؾمملرةمس٤مطمملئ٤ممoptionsحؿملىملمأنماظ٦دؿملم

م مسػملؿملؾملممل مبؽملمملء متؽملظملؿمله مدؿملؿ٣ ماظيت مو مم.بمملظشملػملنمل مخؿملمملرات ماظؿمملظ٨ ماىول ماظ٦زؿملظملؿملهملمؼ٦ض اظاظهمل

ajax.$:م

ماظ٦صماظؽمل٦عماالد٣

url ماظشملػملنملممرابماظزملظملقهملماظيتمغ درلد٢مإظؿملؾملممل

ميفمامملدم

type مPOSTأوممGETرؼعملهملمإردممللماظشملػملنملم,م غ

93

data م JSONطمملئ٤م مودشملمملءممJSONطمملئ٤ مجمؼمل٦سهمل ميـ٢

ماظزملظملقهملماظيتمدرلد٢مإظؿملؾملمملماظشملػملنمل

dataType ضؿملؼملهملمع٤ماظعملؿمل٣ماظؿمملظؿملهملماظيتمتضملدلمس٤مغ٦عممغ

اظؾؿملمملغمملتماظيتمغؿ٦ضمأنمؼضملؿملػمملمامملدمموم

م م: مػ٨ مومJSONمومXMLاغ٦اع

SCRIPTمومTEXTم

timeout ممرض٣ ماظشملػملنملمميـ٢ مظؿؽملظملؿمل ماسصملؼمل٨ اظع٤

ػمل٨مثمملغؿملهملمصكملنمملمؼؿ٣ماطؿؼملممللماظشملػملنملمػملبممل

خاللمػاماظع٤مصكملنماظاظهملمتعمل٦ممبكملظطملمملءم

معضملؿدلةمحوثمخشملفملمعمملمشملػملنملاظ

success ماطؿؼملممللممداظهمل ميصملهمل مادؿسمملؤػممل مؼؿ٣ داظهمل

ماظشملػملنملمبؽملفمملح

error مؼؿ٣مادؿسمملؤػمملميصملمداظهمل هملمحزمل٦لمخشملفملمداظهمل

معمملميفماظشملػملنمل

complete ماطؿؼملممللم داظهمل ميصملهمل مادؿسمملؤػممل مؼؿ٣ داظهمل

ماظشملػملنملمد٦اءمأمتمبؽملفمملحمأممال

beforeSend مضؾ٢مإردممللماظشملػملنملممداظهمل مؼؿ٣مادؿسمملؤػممل داظهمل

ممتمملعممل

async ممضؿملؼملهملمعؽملشملعملؿملهمل ماظعملؿملؼملهمل مإظؿملؾملممل متلؽمل ؼؿ٣ممTrueسؽملعممل

ػ٨ممإردممللماظشملػملنملمبرملغمل٢مشرلمعؿاع٤مو

94

ماالصذلاض ممؿملهملايمملظهمل محممللمو ميف اظضملغمل

مFalseمإدؽملمملدماظعملؿملؼملهمل

processData ماظؾؿملمملغمملتممضؿملؼملهملمعؽملشملعملؿملهمل متعؿمل مؼؿ٣ ماصذلاض٨ برملغمل٢

م ماظ٦دؿمل مب٦ادشملهمل إشمممdataادػملهمل

م ماظذمل ملؿضملض معالئ٣ مػ٨ممWebتعؿمل و

مإدؽملمملدم مسؽمل مهث ماظيت مذاتؾملممل ايمملظهمل

م ماظضملغملممtrueاظعملؿملؼملهمل مو مامملصؿملهمل هله

مfalseسؽملمإدؽملمملدماظعملؿملؼملهملم

م

مسػمل٧مادؿكاممػهماظاظهملمضمغغملؿنملمذؿملؽمملممممملثالممملمؼػمل٨م:مومطؼملـمملل

$.ajax(

{

url م:„/myPage.jsp‟ ,

type م:„GET‟ ,

dataType : „XML‟

}

);

تلؼملمظؽملمملمبؿضملؿملنيمإساداتماصذلاضؿملهملمظغمل٢ماظشملػملؾمملتممjQueryأنماغملؿؾهملمومع٤ماىؼمبمملظطم

م ماظاظهمل مسدل مس٤ماظشملؼ٠مام$.ajaxادػملهمل ماظ٦زؿملظملؿملهمل اظيتممتؿػمل١مم$.ajaxSetupظاظهمل

ماظزملؿملطملهملماظؿمملظؿملهملم:

95

$.ajaxSetup(properties);

ؾمزملميـ٢مجمؼمل٦سهملمامملصؿملمملتماظيتمدؿمJSONػ٦مطمملئ٤ممpropertiesحؿملىملمأنماظ٦دؿملم

م مظػملاظهمل مم$.ajaxاصذلاضؿملهمل ماظ٦دؿمل مزمؿ٦ي مأن مميغمل٤ ممpropertiesو ذاتؾملمملماؿملمملرات

رملمملبؾملمملممملؼػمل٨مظؿطملؿملرلملمسػمل٧مسؼملػمل٥مميغمل٤مأنمغغملؿنملمذؿملؽمملمع,مومطؼملـمملماظلمملب٠ا٦ضقهملميفماىولم

م:م$.ajaxاإلساداتماالصذلاضؿملهملمامملصهملمبمملظاظهملم

$.ajaxSetup(

{

, ‟GET„:م typeم

dataType م:„XML‟ ,

}function(err):م errorممم

alert(„erro message is :‟ م+msg);

},

timeout 10000:م

}

);

م:مAJAXاثمامملصهملمبشملػملؾمملتماح

مAJAXظغملؿمملبهملمذؿملظملاتممjQueryآخمعمملمرمنملمذطهميفمدؿملمملقمايؼىملمس٤مادؿـؼملمملرمعغملؿؾهملم

مبشملػملؾمملتم مع٤ماحاثمامملصهمل ممتؿػمل١مجمؼمل٦سهمل مأنماغملؿؾهمل ماظيتمAJAXػ٦ ممتمملعمملممو تلؿـؼمل

96

مولوماىمEventsطمملدؿـؼملمملرماحاثماخىماظيتمطؽملمملمضمعرغمملمسػملؿملؾملمملميفمدضمملئ٠ماحاثم

م:ؼ٦ضمػهماحاثماظؿمملظ٨م

ميصملهملماظؿظملفرلماد٣مايث

ajaxComplete مAJAXسؽملماغؿؾملمملءمأيمرػملنملمع٤مرػملؾمملتم

ajaxError AJAXسؽملمصرمل٢مأيمرػملنملمع٤مرػملؾمملتم

ajaxSend مAJAXضؾ٢مإردممللمأيمرػملنملمع٤مرػملؾمملتم

ajaxStart مرػملؾمملتم مع٤ مرػملنمل مأي مإردمملل مباؼهمل سؽمل

AJAX

ajaxStop مAJAXؿملمرػملؾمملتمسؽملماغؿؾملمملءمتؽملظملؿملمصم

ajaxSuccess م مرػملؾمملت مع٤ مأي متؽملظملؿمل ماغؿؾملمملء مAJAXسؽملا

مبؽملفمملح

م

ماغؿ مع٤متضملػملاآلنمأدؿشملؿملمأنمأض٦لمأغؽملممل م٣مؾملؿملؽملممل مادؿـؼملمملر مطؿملظملؿملهمل ماظذمل ممWebعغملؿؾهمل مjQueryاظائضملهمل

ماتظملعملؽملمملمسػمل٧مم001ومػغملامغزمل٢مإشممغؾملمملؼهملماظضؿملعملهملممAJAXظؿؽملظملؿملمرػملؾمملتم مأغؽملممل دضؿملعملهملمم021وممبممل

تضملػمل٣مطؿملظملؿملهملمبؽملمملءمضمأػ٣مإضمملصمملتماغملؿؾهملمومادؿضملاؿؾعملؿملهملمالمماظضمملئ٠زملاؼهملماظغملؿمملبمدؽملكيفمب

مإضمملصمملتمخمملصهملمبؽملمملم.

97

م

م

م

م

م:م021إشمماظضؿملعملهملمم001ع٤ماظضؿملعملهملم

ماإلضمملصمملت

Plugins

98

م:مpluginsاإلضمملصمملتم

م ماغملؿؾهمل مصؼ٠متشمل٦ؼ مبظملؿمبمملبمت٦دضملهملممjQueryؼلؼملمظؽملممل ماالبؿغملمملر مبرملمملرطؿ٥ميفماإلباعمو

معممل مسدل مماغملؿؾهمل مبمملإلضمملصمملت مخمملصمpluginsؼضملف مإضمملصهمل مإغرملمملء مميغملؽملؽملممل مت٦دإذ مبؽملممل مسؼمل٢مهمل

ع٤مغ٦اح٨مسؼملػملؾملمملمومع٤مث٣معرملمملرطهملمػهماإلضمملصهملمعمصمؿملمعلؿكع٨ماغملؿؾهملمماغملؿؾهملميفمأيدمل

م.مcom.jquery.pluginsسػمل٧ماظضملؽمل٦انممع٦ضضملؾملمملماإلظغملذلوغ٨متؾ٦ؼنملماإلضمملصمملتميفمسدل

ايؼىملممؼلػمل١ماؿقثمأحػؼملمملم,ماظشملؼ٠ماولم:منمملؽملمايؼىملمس٤ماإلضمملصمملتمػؽملمملكمرؼعملس

مظػملضمل٦دةمإشممظطملهملمطؿملظملؿملهملمطؿمملبهملماإلضمملصمملتمامملصمس٤ مغسملشمل مJava Scriptهملمبمملغملؿؾهملمومػؽملممل

ماظشملؼ٠ماظـمملغ٨م:ماظؿعملػملؿملؼهملم ا٦ج٦دةمأصالموممjQueryإضمملصمملتممادؿكاممايؼىملمس٤,مأعممل

.أوالمػامػ٦ماظشملؼ٠ماظيمدؽمللػملغمل٥ميفمػهماظضمملئ٠م

مختؿػملمع٤مميف مصمملظشملؼعملهمل مالدؿكاممصمؿملمإضمملصمملتماغملؿؾهمل مثمملبؿهمل مظؿملمػؽملمملظ١مرؼعملهمل ايعملؿملعملهمل

مإضمملصهملمإشممأخىمومظغمل٤مبرملغمل٢مسمملممميغملؽملؽملمملماظعمل٦لم:

ا٦ج٦دةمؼغملظمل٨مأنمتعمل٦ممبؿقؼملؿمل٢مػهماإلضمملصهملماظيتممjQueryالدؿكاممإضمملصهملمع٤مإضمملصمملتم

امملصهملمب١ممWebظذملمث٣متعمل٦ممبؿسملؼملؿملؽمل٥مضؼمل٤مصظملقهملمامJava Scriptتفملت٨مسػمل٧مذغمل٢معػملم

ؾؽمل٧مبمملالسؿؼملمملدمسػمل٧ماغملؿؾهملمومبمملظؿمملظ٨ماإلضمملصمملتمتمبضملمتسملؼملنيماغملؿؾهملمومػهمغعملشملهملمػمملعهملمإذمأن

مع٤متسملؼملنيماغملؿؾهملمأوالم,مبضملمتسملؼملنيماإلضمملصهملمدؿملزملؾمػؽملمملكمدوالمجؼةمتسملمملفماظؿفملطمسػملؿمل١

مت٦د مو مبؽملظملمرؼإشممدوالماغملؿؾهملماصػملؿملهمل مومميغملؽمل١مادؿكاعؾملممل مادؿكاممدوالممسؼملػملؾملممل عملهمل

ماغملؿؾهملماظيتمذحؽملمملػمملميفمدضمملئ٠مايؼىملمس٤ماظوالم.

م..مػاماظغملالممطالممسمملممالمؼطملينمس٤مضاءةماظؿ٦ثؿمل٠مامملصمبغمل٢مإضمملصهملموماظيمالمؼؿفمملوزم حلؽملممل

ماظؾءميفمادؿضملاضمبضملمإضمملصمملتماغملؿؾهملمسػمل٧مدؾؿمل٢ماـممللمالم م,موماآلنمميغملؽملؽملممل اظزملظملقهملمسمملدة

مؼملؿملؿملم.سػمل٧مدؾؿمل٢مايزملموماظؿ

99

:م nterfaceIjQuery userاإلضمملصهملم

مبؿعملؼ٣م متضمل مإذ ماإلرالق مسػمل٧ ماغملؿؾهمل مإضمملصمملت مبنيمصمؿمل مذضملؾؿملهمل ماطـ ماإلضمملصهمل مػه تضملؿدل

طهملماظضملؼملالضهملماظرملاظيتمرأؼؽملمملػمملميفمع٦ضممؿػمل١هملمظزملظملقؿ١م)بضملسملؾملمملمطواجؾملمملتمادؿكاممأغؿملعملهملمومشؽملؿمل

Microsoftمماإلضمملصهملمجمؼمل٦سهملمع٤مادواتماىمملػةمتعمل,مومماإلضمملصهملم(مومػامعمملمؼضملؽملؿمل٥ماد٣

م ماظؿشملؾؿمل٠مامملصمبمملظذمل ماظيتممتؽملمواجؾملهمل مو ماالدؿكام مإلسمملدة مظرجهملممWebاظعملمملبػملهمل مسمملظؿملهمل عوغهمل

ماظلؽملهملم مصؾمل٨متعملم م, ماالدؿكام مواجؾملهمل مظؿشملؾؿمل٠مدشملماغملؿنملمع٤مغمملحؿملهمل متعملؼؾممل معرملمملبؾملممل وضملػمل٥

tabsومأذرهملماظؿؼملؼممscroll barsوماوطدؼ٦غمملتممaccordionsومااظؿمليملمممم

slidersمم ماظؿمملرؼ ماخؿؿملمملر مأدوات ممdate pickersو ماظ٦انمو ماخؿؿملمملر أدوات

color pickersماظغملـرلمم متسملؿملماداةمضراتو مطؼملممل م, ماظزملظملقهملمالمخمملصمشرلػممل مظضملؽملمملص همل

مأوتؿ٦ص مأومتطملؿملرلمحفؼملؾملممل متتؿملؾؾملممل مأومإسمملدة مومإصالتؾملممل مبرملغمل٢مرؾؿملضمل٨معـ٢ماظعملرةمسػمل٧مدقؾؾملممل مصؿملؾملممل م

االخؿؿملمملرمعؽملؾملمملموماظغملـرلماظغملـرلمومرمرماإلذمملرةمأنمػهماإلضمملصهملمضمملبػملهملمظإلطلمملءمومػ٨ممتؿػمل١مسةم

مبرملغمل٢ماصذلاض٨م.مThemesإطلمملءاتمجمملػةمم

100

م ماإلضمملصهمل مػه مسػمل٧ مايزمل٦ل مميغمل٤ ماظخ٦ل مرؼ٠ مس٤ ماجملمملغؿملهمل مؾملمملع٦ضضملإشم

com.jqueryui.wwwمماظؽملعملمسػمل٧ماظرمث٣مBuild Custom Downloadم.

:jqueryممFormضمملصهملماإل

اظؽملعملممغملؼمل٢ت"إذمأغؾملمملممFormsتضملشمل٨مػهماإلضمملصهملمعؼامع٤ماوغهملمسؽملماظؿضملمملع٢معماظؽملؼملمملذجم

وم,مسػمل٧محمض٦لمعؾسؿملؾملمملمم"امملصهملمبمملظؿضملمملع٢معماظؽملؼملمملذجمjQueryا٦ج٦دميفمدوالمعغملؿؾهملم

مؼلؼملمبمملدؿضملمملدة معممل مبفملدواتماظعملؿمل٣مامملصمتؽملعملل٣مدوالمػهماإلضمملصهملمإشممسةمجمؼمل٦سمملتمعؽملؾملممل همل

اظؽملؼملمملذجمبشملؼعملهملمأبلمع٤مرقماغملؿؾهملمومؼصملؾملمذظ١مجػملؿملمملمسؽملمايؼىملمس٤مأداةممن٦ذجمعـ٢م

م م مضؿمل٣مأدواتمم<select>اداة متضملؿملنيم)تظملؼ( مؼلؼملمبكملسمملدة مع٤مػهماجملؼمل٦سمملتمعممل مو ,

م مبكملردمملل مؼلؼمل معممل معؽملؾملممل مو م, ماظؽملؼمل٦ذج مإشممامملدم ماظؽملؼمل٦ذج مبمملدؿكاممضؿمل٣ مو متعملػملؿملؼهمل بشملؼعملهمل

AJAXمميغمل٤مهؼملؿمل٢ماإلضمملصهملمع٤ما٦ضم:,ممم

http://www.jquery.com/plugins/project/form

:jmaxinputاإلضمملصهملم

ما٦ضم مبؼمملرة مضؼملومل مو مدؾ٠ ػ٢

ػ٢مم؟مTwitterمالجؿؼملمملس٨ماظرملؾملرلا

مإدخممللمموملظظملؿ معبضملمملت مسض رؼعملهمل

م؟ماغؿؾمملػ١ماظؽملزمل٦صميفمذظ١ما٦ض

مبؽملمملءم مبغملؿملظملؿملهمل ماؾملؿؼملني مع٤ مطؽملومل إن

ماظؽملزمل٦عب متػمل١ضملمملت ماظلمصكملنمص مع٤ مأدؾمل٢ ماظضملؼملػملؿملهمل موضمل٢ ماإلضمملصهمل موضملػمل١ػه مو تؿؾممؾمل٦ظهمل

"مسػمل٧محمإظعملمملءماظؿضملعملؿملاتموراءمزؾمل٦رغممل"أالموػ٨مرؼعملهملممjQueryمملػمملمؼملؿؽملمملمإؼؼعملهملماظيتمسػملاظشمل

مميغمل٤مهؼملؿمل٢ماإلضمملصهملمع٤ماظابم:,مض٦ظ٨م

101

http://plugins.jquery.com/project/jMaxInput

:ort accessjquery shاإلضمملصهملم

مظػملوابما٦ج٦دةمبمملظزملظملقهملمإذمميغمل٤معـالم تلؼملمػهماإلضمملصهملماظائضملهملمبؿضملؿملنيمعظملمملتؿملماخؿزملمملر

م ماظملؿمملح مؼغمل٦ن ممeأن م٦ض ماظيمؼعمل٦د مظػملاب ماخؿزملمملر مؼغمل٦نممعـالمعمملؼغملود٦صوملعظملؿمملح مو ,

مظػملابماظيمؼعمل٦دم٦ضممxاظملؿمملحم ماىؼملؿمل٢ميفممjQueryعغملؿؾهملمعظملؿمملحماخؿزملمملر م, ومػغملا

ميغمل٤مهؼملؿمل٢مػهماإلضمملصهملم,ممامصالمتظمللمسؼملػملؾملمملم!جؿملمAJAXؾملمملمتؿظملؾمل٣معؿشملػملؾمملتمهماإلضمملصهملمأغػ

مع٤ماظابم:

http://plugins.jquery.com/project/shortaccesskey

:jquery cornerاإلضمملصهملم

مWebأصؾمع٤ماظرملمملئميفمصمؿملمع٦اضماظذملم

أرطمملنم)زواؼممل(مأضلمملممممملمتغمل٦نةماظؿزملؼملؿمل٣مأظجؿمل

مإغضمبرملغمل٢مرط٤مابا٦ ؼملمملمماظؿعملػملؿمليمو

م مخمؿػملظملهمل ماظرملغمل٢ممظضمل٢بفملذغملمملل أذؾملػممل

م ممRound Cornerاظائي ميغمل٤م,

مارطمملنإغرملممل مػه مأدؾملػملؾملمملممء مخمؿػملظملهمل بشملق

ػهماإلضمملصهملماظيتمميغمل٤مهؼملؿملػملؾملمملممادؿكام

مع٤ماظابم:

http://www.malsup.com/jquery/corner/

102

:beauty tipsاإلضمملصهملم

ماإل مػه مخمؿزملمتلؼمل مذح مبكملزؾملمملر ضمملصهمل

tooltipماقملذمم موض مسؽمل صمؿمل٢مجا

ماظزملظملقهملمومميغمل٤م معضملنيمع٤مسؽملمملص سػمل٧مسؽملزمل

مب٥م متشنمل ماظي مبمملظرملغمل٢ ماظرملح مػا إزؾملمملر

ملؿكعؾملمملم متضملشمل٨ ماإلضمملصهمل مأن مإذ متمملعممل

خؿملمملراتمطـرلةمظؿكزملؿملمذغمل٢ماظرملحماكؿزملممبمملمؼؿالءممومع٦ضضمل٥م,مميغمل٤مهؼملؿمل٢مػهماإلضمملصهملم

م:مع٤ماظاب

http://www.lullabot.com/files/bt/btlatest/DEMO/index.htm

l

:مBOXYاإلضمملصهملم

عؽملؾـعملهملممتلؼملمػهماإلضمملصهملمبكملغرملمملءمعبضملمملتمح٦ار

ميفم مايؼـهمل ميفما٦اض مطـرلا ماغؿرملمملرػممل ذمملع

غاػمملمم,مومػ٨معرملمملبؾملهملمظؿػمل١ماظيتماظظملذلةماخرلة

م مطذمل مFacebookيفمأشػملنملما٦اضماظضملمملؿملهمل

مـممللمبشملؼعملهملمبلؿملشملهملم.سػمل٧مدؾؿمل٢ما

ميغمل٤مهؼملؿمل٢مػهماإلضمملصهملمع٤ماظابم:

م

http://plugins.jquery.com/project/boxy

103

:مajax fancy captchaاإلضمملصهملم

مادلجم٦نم مؼػملففمل مايؼـهمل ما٦اض مع٤ يفمطـرل

إشممادؿكامم"ط٦دماظؿفملطؿمل"مظؿظملمملديمعمملمؼضملفمبمملظذملم

Botsمتقملعم م, ٤jQueryمظؽملمملمم متلؼمل إضمملصهمل

م مبكملضمملصهمل ميفمع٦ضضملؽملممل ماإلعغملمملغؿملهمل مسزمليػه مبرملغمل٢

م مع٤ م"أصم٢ ماظؿعملػملؿملي مشرلماظرملغمل٢ مص٦رة زؾمل٦ر

معـال معضملؿملم"عظملؾمل٦عهمل متشملػملنملمدقنملمسؽملزمل مومصؾمل٨ ٤

ؼشملػملنملمعـالمماظضملؽملزملمسمؿػملمع٤مدخ٦لمإشممآخمصعملإصالت٥ميفماؽملشملعملهملماكزملزملهملمومبمملظشملؾمػام

م ماكزملزملهمل ميفماؽملشملعملهمل مإصالت٥ مؼشملػملنملمعؽمل١مملمويفماظخ٦لماودقنملمذغمل٢ماعملمو ض

طمملنمزائممصكملندقنملمذغمل٢ماظلمملسهملمومإصالت٥ميفماؽملشملعملهملماكزملزملهملميفماظخ٦لماظـمملغ٨مومػغملام..م

.بمملظؽمللؾهملمالبؽمل١مأومخؿمل١ماظزملطملرلم٥مظ٤مؼؿفمملوزمػاماالخؿؾمملرماظؾلؿملمجاصكملغمBotsماظذملمع٦ضضملؽملمملمع٤

مميغمل٤مهؼملؿمل٢مػهماإلضمملصهملمع٤ماظابم:

http://www.webdesignbeach.com/beachbar/ajax-fancy-

captcha-jquery-plugin

104

:Gallerificاإلضمملصهملم

م معضملضمص٦رتلؼمل مبكملغرملمملء ماإلضمملصهمل مػه مظؽملممل

معضملمملرضم ميف متؿ٦ص ماظيت مادمملدؿملهمل بمملؿملات

,مميغمل٤ممبؾلمملرهملمذؼةماظزمل٦رمسػمل٧ماالغذلغومل

مهؼملؿملػملؾملمملمع٤ماظابم:

http://www.twospy.com/ga

lleriffic/

م

م

اؼمع٤ماإلضمملصمملتم؟

م مامملصهملمعممل مصعملمع٤ماإلضمملصمملتماظغملـرلةمجا سضؽملمملهميفماظضمملئ٠ماظعملػملؿملػملهملمامملضؿملهملمؼضملؿدلمأمن٦ذجممل

بمملغملؿؾهملموماظيتمميغمل٤مأنمغشملػملمسػمل٧مآخمعمملمؼسملمملفمإظؿملؾملمملمسدلمرط٤ماإلضمملصمملتميفمع٦ضماغملؿؾهملم

مسػمل٧ماظضملؽمل٦انم:

http://plugins.jquery.com

م٣مطؿملظملؿملهملمإغرملمملءمػهماإلضمملصمملت.ضملػملظ٦ضوملمظؽملؿوماآلنمومبضملمأنمرأؼؽملمملمصمممللمإضمملصمملتماغملؿؾهملمحمملنما

105

م:مpluginsمطؿملظملؿملهملمإغرملمملءماإلضمملصمملت

ؼضملشملؿملؽملمملمصؼ٠متشمل٦ؼموممع٤مغ٦اح٨مسؼملػملؾملمملميفمأيدملممسؼمل٢ماغملؿؾهملمطؼملمملمضػملؽملمملمدمملبعملمملمصكملنماإلضمملصمملتمت٦د

اتؾمملعمجمؼمل٦سهملمع٤ماظعمل٦اسماظيتمغؽملمملضرملؾملمملمذطممسؼمل٢معغملؿؾؿ٥مضملهملاغملؿؾهملمايؼهملماظغملمملعػملهملميفمت٦د

م.مضمملئ٠يفمػهماظ

متلؼملؿملهملمعػملظملمملتماإلضمملصمملتم:

ؼؿ٣ممJava Scriptنماإلضمملصهملمعمملمػ٨مإالمعػملمأمضمملئ٠اظمطؽملوملمضمذطتميفمععملعهملمػه

مأن موممبممل كملنمجمممللمطؿمملبهملماإلضمملصمملتمعؿمملحمظػملفؼملؿملمصمتسملؼملؿملؽمل٥مبضملماغملؿؾهملمومؼؾؽمل٧مبمملالسؿؼملمملدمسػملؿملؾملممل

ماغملؿؾهمل متشمل٦ؼ مظػملؼملػملظملمملتبؿؾؽملمؼؽملزملمصؼ٠ ماظؿمملظؿملهمل ماظؿلؼملؿملهمل مرؼعملهمل مم٨ مػ٨ مإمنمملمو مو ظؿمللوملمضمملسة

مصمملمصؿملؼملمملمبضملم:مسمأصؾقوملمغزملؿملقهمل

"js.plugin.jQueryع٤ماظرملغمل٢ماظؿمملظ٨م:ممب١مبمملد٣مهملعػملماإلضمملصهملمامملصم"د٣

مظ٦مضؼملوملمبكملغرملمملءمإضمملصهملمهؼمل٢مازل٨مرمنملمأنممpluginحؿملىملمأنم مصؼملـال ػ٦ماد٣مإضمملصؿ١م,

مأزل م مإضمملصيتمبمملالد٣ ماػملماظيمزمؿ٦ي ٨js.Mukhtar.jQuery٤ممممطؽملوملمإنم

م.مأأعؽمل٥مضمل٦نصؼ٠متشمل٦ؼماغملؿؾهملمومؼؿؾمؼلؿؼملضمل٦نمض٦ل

ماظرملغمل٢ماظضملمملممظرملؿملظملةماإلضمملصهملم:

م م.. محلؽملممل مأن ماظيمغزملقبضمل مبمملالد٣ ماػملمامملصمبكملضمملصؿؽملممل ماغملؿؾهملمأغرملفملغممل متشمل٦ؼ مصؼ٠ مب٥ ؽملممل

مدؽملغملؿنملمصؿمل٥مذؿملظملةمبجمؿملهملمهلمملماظرملغمل٢ماظضملمملمماظؿمملظ٨م:

(function($){

ؿؽملمملمدؿغمل٦نمػؽملمملذؿملظملةمإضمملص

})(jQuery);

106

مدؿسملمملفمإشمم مظؽملممل ميفماؽملشملعملهملماكزملزملهمل مبؿضملؼظملؾملممل مغسملؼمل٤مأنماظوالماظيتمدؽملعمل٦م ماظشملؼعملهمل بؾمله

ماغملؿؾهملمومغسملؼمل٤مأغؽملمملمدؽمللؿشملؿملمادؿسمملءػمملمبشملؼعملهملمادؿسمملءمدوالماغملؿؾهملماصػملؿملهملم.

مرؼعملهملمبؽملمملءمدوالماإلضمملصمملتم:

عؽملمباؼهملماظغملؿمملبمصؼمل٤ماظملذلضمأغ١ماآلنممؾملمملإذامطؽملوملمتطمحؼـؽملمملميفماظضمملئ٠مامملضؿملهملمأصمضمل

مأن مغ٦عمأولمؼشملؾ٠مسػمل٧مجمؼمل٦سهملمع٤مسؽملمملصممتضملفممتمملعممل اغملؿؾهملممتؿػمل١مغ٦سنيمع٤ماظوالم:

لؿس٧مدونمعلمملسةمؼم"اظ٦زؿملظمل٨"أرػملعملؽملمملمسػملؿمل٥مظعملنملممومغ٦عمثمملنماحملداتالؿؽملمبمملظؿضملمملونمعم

مدوالماإلضمملصمملماحملدات مبؽملمملء مختؿػملمرؼعملهمل محلؽملممل مداظهملم, ماظؽمل٦سنيمصػملؾؽملمملء تمبمملخؿالفمػؼ٤

ماحملداتجؼةمع٤ماظؽمل٦عماولماظيمؼشملؾ٠مسػمل٧مجمؼمل٦سهملمع٤مسؽملمملصمالؿؽملمبمملظؿضملمملونمعم

م:ماظؿمملظ٨صكملغؽملمملمغؿؾماظرملغمل٢ماظضملمملمم

(function($){

$.F م=م function(Parameters)

{

جل٣ماظاظهملمػؽملممل

};

})(jQuery);

مامFمحؿملىملمأن ماظ٦دشملمملءماظيتمتفملخػمملممParametersد٣ماظاظهملماىؼةمومػ٦ ػ٨مضمملئؼملهمل

مػهماظاظهمل.

مأع مسؽمل متشملؾممل ماظي ماظـمملغ٨ ماظؽمل٦ع مع٤ مجؼة موزؿملظملؿملهمل مداظهمل مدواظبؽملمملء م٠ مادؿكام٥ مدون

مغؿؾماظرملغمل٢ماظضملمملمماظؿمملظ٨م:ماحملدات

(function($){

107

$.fn.F م=م function(Parameters)

{

جل٣ماظاظهملمػؽملمملم

};

})(jQuery);

ممFمحؿملىملمأن مو ماظ٦دشملمملءماظيتمتفملخػمملممParametersػ٦ماد٣ماظاظهملماىؼة ػ٨مضمملئؼملهمل

م.ػهماظاظهمل

أعـػملهملمسػمل٧مإغرملمملءمإضمملصمملتمخمملصهملم:

م ماصغملمملر م.. ممهملبعملممللاظحلؽملممل ماظئؿمللؿملهمل ماإلضمملصمملتظػ٨ماصغملمملر ممؾؽملمملء موزؿملظملؿملهملمو مداظهمل طؼملـممللمسػمل٧مبؽملمملء

مػمل٨م:جؼةمبلؿملشملهملمجامميغمل٤مأنمغغملؿنملمعمملؼ

}($)functionم)

$.ourMessage =مم function(msg)

{

var m=msg.toString();

alert(m);

};

})(jQuery);

ومطؼملمملمػ٦مواضمتعمل٦ممػهماظاظهملمبضملضمردمملظهملمعضملػمل٦عمملتمهؿ٦يمسػمل٧مضؿملؼملهملماظ٦دؿملماؼملرمإظؿملؾملمملم

مطؼملمملؼػمل٨م:مjQueryوماآلنمميغملؽملؽملمملمأنمنبمإضمملصؿؽملمملمبغملؿمملبهملمذؿملظملةم

108

$.ourMessage(„Hello world ! „);

م

دؽملعمل٦ممدم٠مسػمل٧مسؽملمملصمالؿؽملماظيتمؼضملؿملػمملماحملطؼملـممللمسػمل٧مدوالماظؽمل٦عماآلخماظيتمتشملؾموم

مداظ متطملؿملبغملؿمملبهمل مجؼة ماحملدمإشمماظؽمل٦عمهمل ماظيتمؼضملؿملػممل مغ٦عمامامملصمجبؼملؿملماظضملؽملمملص

Arialمومدؿغمل٦نمذؿملظملةمػهماظاظهملمطؼملمملؼػمل٨م:م

(function($){

$.fn.changeFont=function()

{

return this.css(„font-family‟, „Arial‟);

};

})(jQuery);

اظيتمطؽملمملمضمغمملضرملؽملمملػمملمدمملبعملمملميفمدضمملئ٠ممjQueryإحىمدوالممcssاظهملمالحمأغؽملمملمادؿضملؼملػملؽملمملماظ

مملءماظاظهملمضؾ٢مادؿسمreturnايؼىملمس٤ماظوالمومعمملمرمنملمذطهمػؽملمملمػ٦مادؿضملؼملمملظؽملمملمظػملغملػملؼملهملم

صػمل٦مأردغمملماخؿؾمملرمماحملداتةمسػمل٧معماظوالماخىماضملؿؼململؿس٧ظغمل٨مغلؼملمظاظؿؽملمملمأنمت

:بؾلمملرهملمداظؿؽملمملمعمداظهملمأخىماآلنمميغملؽملؽملمملمأنمغغملؿنملم

$(„#Mydiv‟).changeFont().fadeIn();

طمػؽملمملمؽملمملمأنمغرمرمبيمإشممتشملؾؿمل٠محطهملماظصملؾمل٦رماؿالذ٨مبضملمتطملؿملرلمغ٦عماموممممملمدؿملقملد

مطمملئؽملمملتمالؿؽمل مع٤ مصعمل مواح مطمملئ٤ مع ماظؿضملمملع٢ متلؿشملؿمل محمملظؿملممل مداظؿؽملممل مادؿضملؼملػملوملمأن مهلا مو

م.(مMydiv#دامؼضملؿملمطمملئؽملمملمواحاميفماـممللم)أسينماحملدمحم

109

ماظورانم مسػمل٧ مبمملالسؿؼملمملد ماظلمملبعملهمل مارملمملبؾملهمل مايمملالت مط٢ ممبـ٢ مميغمل٤مهلنيماظاظهمل مبمملظشملؾ و

eachمذغمل٢مداظؿؽملمملماظؽملؾملمملئ٨مػ٦م:ظؿملزملؾم

(function($){

$.fn.changeFont م=م function(){

return this.each(function()م{

$(this).css(„font-family‟ , „arial‟);

});

};

})(jQuery);

المتعمل٦ممؿمملنمجمملػتنيمظػملؽملرملميفمإضمملصهملمظ٤مؼلؿكعؾملمملمأحمغؾملمملمإضمملصهملمومػغملامتزملؾمداظؿمملغمملماظلمملبعمل

م.مبفمليمذ٨ءمجؼمسامتضملػملؿملؼملؽملمملمطؿملظملؿملهملمبؽملمملءماإلضمملصمملتم

م

مامملمتهملم:

مرمرمب٨مأنمأرظمللملماغ٦ارمومأغلقنملمبؾملوءم020خ٦لميفماظضؿملعملهملموماآلنمومضمذمملرصؽملمملمسػمل٧ماظ

ع٤مؼؼمأنمؼؿ٦اص٢معضمل٨مبفمليمادؿظمللمملرمومبغمل٢ممنمل٣مومأرحومظغمل٤مبضملماالسذلافمبفملغينمالمأزالمأتضملػمل

ممmokhtar_ss@hotmail.comممظغملذلوغ٨سدلماظدلؼماإل

ميفمدضمملئ٠مأخىمبكملذنماهلل.ممضمملدمومإشممظعملمملءم...ممبجمهملمممؿضملهمل

م ٢جمومحبؼملماهللمسممت

م 82022101دعرمل٠م

110

مجولماحملؿ٦ؼمملت

JQUERY .......................................................................................... 5 أساسيات

5 .............................. صفحخك في حضينها و jQuery حثبيج

jQuery ......................................... 6 أساسياث

01 ........................................ ؟ األيثهت ين انزيذ

jQuery .................................... 01 اسخعال طشيقت

01 ..................................... ؟ انسابقت انشيفشة يعن يا

SELECTORS................................................................................ 31 المحذدات

حذداث 03 ............................................. ان

21 ................................... جذيذة HTML يحخىياث حىنيذ

FUNCTIONS .................................................................................... 13 الذوال

Functions ....................................... 22 انذوال

Attributes ....................... 22 انىسىو واصفاث يع انخعايم دوال

Styles ................................ 26 األناط يع انخعايم دوال

Inner content .................. 33 انسخنذ عناصش يحخىي يع انخعايم دوال

Wrapping .................................... 40 انخغهيف دوال

43 ................................... انسخنذ عناصش حزف دوال

FORM ELEMENTS ...................... 43 اننارج عناصش يع انخعايم دوال

111

EVENTS ........................................................................................ 55 األحذاث

ANIMATIONS .............................................................................. 23 الحركات

Animations ..................................... 62 انحشكاث

62 ........................................ انبسيطت انؤثشاث

68 ......................................... انخالشي يؤثشاث

70 ......................................... االنزالق يؤثشاث

71 .......................................... انحشكت إيقاف

71 .................................. انكخبت نحشكاث سشيع يشجع

72 ....................................... خاصت حشكاث إنشاء

AJAX ................................................................ 58تخاطب مع الخادم عبر تقنية ال

76 ..................................... انخادو ين انحخىي جهب

78 ............................. اننارج حقىل ين نهخادو وسطاء حشيش

GET ................................... 78 اننىع ين طهباث إسسال

POST .................................. 80 اننىع ين طهباث إسسال

80 ............................ االسخجابت نىع يعهىو نخادو انطهباث إسسال

AJAX ................................... 81 بطهباث انكايم انخحكى

AJAX ................................. 84 بطهباث انخاصت األحذاد

PLUGINS .................................................................................... 72 اإلضافات

112

plugins ...................................... 87 اإلضافاث

jQuery user Interface ............................ 88 اإلضافت

Form jQuery ................................... 011 ضافتاإل

jmaxinput ..................................... 011 اإلضافت

jQuery short access ............................. 010 اإلضافت

jQuery corner .................................. 010 اإلضافت

beauty tips ................................... 011 اإلضافت

BOXY ......................................... 011 اإلضافت

AJAX fancy captcha .............................. 012 اإلضافت

Gallerific .................................... 013 اإلضافت

013 ..................................... ؟ اإلضافاث ين انزيذ

plugins ............................... 014 اإلضافاث إنشاء كيفيت

014 ..................................... اإلضافاث يهفاث حسيت

014 .................................. اإلضافت نشيفشة انعاو انشكم

015 .................................. اإلضافاث دوال بناء طشيقت

ت إضافاث إنشاء عه أيثهت 016 ................................ خاص

016 ............................................. انخاحت

م

المؤلف في سطور

Web Technologies

o

HTML5 & CSS3

jQuery

3D Game Studio

F1-Magazine

o

facebook.com/mukhtar.ss