تعلم Jquery في 120 دقيقة.pdf

‫م‬ ‫تَضملَ َّػمل‪ّ٣‬‬

‫‪ jQuery‬م‬ ‫يفم‪021‬مدضؿملعملهمل م‬ ‫م‬ ‫م‬ ‫م‬ ‫م‬

‫ُعكؿمملرمدؿملِّّٓمصمملحل م‬

‫م‬

‫م‬ ‫م‬ ‫م‬

‫اإلػّٓاء م‬ ‫م‬ ‫م‬ ‫م‬

‫إظذمل‪ّ٧‬معَ‪ّ٤‬مؼَّٕذَُّّمحُ ٗؾؾملُؼملمملمع‪ّ٤‬مثُذملذملعملذمل‪ّ٦‬بِماظعملَػملنملِمم‪,‬م م‬ ‫‪..‬ممإظذمل‪ّ٧‬مواظّٓيٖمحظملصملؾملؼملمملماهللم‪ .‬م‬

‫‪2‬‬

‫اٌُعملِّّٓعهملم‪ :‬م‬ ‫ذكزملؿملٓمملًمومإشممصذلةمضّٕؼؾهملم‪ -‬مغ‪ّ٦‬سمملًمعممل م‪ -‬مطؽملوملُ مأسؿدلػمملمع‪ّ٤‬ماظؿعملؽملؿملٓمملتماظيت مالمؼؽملؾطمل‪ّ٨‬مٌشمل‪ِّّ٦‬رمتشملؾؿملعملمملتم‬ ‫اظذملم‪ Web‬مأنمؼسملؿملٓ‪ّٝ‬موضؿ‪ ّ٥‬ميفمتضملػملُّؼملؾملممل مو مأراػممل مع‪ّ٤‬ماِّع‪ّ٦‬رماظيتمتّٓرٓسميفماظغملػملّؿملمملت مع‪ّ٤‬مبمملبماظؿّٕٓفم‬ ‫اظضملػملؼمل‪ ّ٨‬م! م‪,‬مغضمل‪ ّ٣‬م‪ ..‬مإغٓؾملمملمظطملهملم‪ Java Script‬ماظيتمتلؿكّٓممظػملدلجمهملمع‪ّ٤‬مرّٕفماظضملؼملؿمل‪ّ٢‬م‪,‬مطؽملوملُم‬ ‫أض‪ّ٦‬لُ مظؽملظملل‪ّ٨‬م‪:‬م"مأغوملَ متُدلعِيملُ مظػملذملم‪ Web‬مبػملطملمملتٍ مسُػملؿملمملمومع‪ّ٤‬مرّٕفماًمملدمم‪ Server‬مصػملؼملمملذا متؽملصملُّٕم‬ ‫ظػمل‪ّ٦‬راءم؟م"م‪ .‬م‬ ‫بضملّٓمصذلةٍ مظؿمللوملمبمملظشملّ‪ّ٦‬ؼػملهمل مأبّٓتِ مظ‪ َّ٨‬ماِّؼٓمملمُ معمملمطؽملوملُ مجمملػالًمو مأتمملغ‪ّ٨‬مبمملِّخؾمملرٔ معَ‪ّ٤‬مملمأزوِّدِ مصؾّٓأتُم‬ ‫أدركمأػؼملؿملٓهملماظدلجمهملمع‪ّ٤‬مرّٕفماظضملؼملؿمل‪ّ٢‬مومأشؿملّٕٓمضؽملمملسيتمغمملدعمملًمبضملّٓمزؾمل‪ّ٦‬ر متعملؽملؿملٓهمل م‪AJAX‬ماظيتمصؿقوملم‬ ‫أعمملم معدلجم‪ّ٨‬ماظذملم‪ Web‬مح‪ّ٦‬لماظضملمململمآصمملضمملًمجّٓؼّٓةًمظإلبّٓاع مومبّٓأتُ مأس‪ّ٦‬دُ مومأطؿنملُ مبضمل‪ َّٚ‬مذؿملظملّٕاتم‬ ‫اظذمل م‪ Java Script‬مبطملؿملهمل متؽملظملؿملّٔ معممل مؼشملػملؾ‪ ّ٥‬ماظضملؼملالء مظغمل‪ ّ٤‬مو مبنيَ ماينئ مو ماينئ مطمملن مع‪ّ٦‬ضظمل‪ّ٨‬م‬ ‫اظلٖػمليب مع‪ ّ٤‬ماظذمل م‪ Java Script‬مؼشملظمل‪ ّ٦‬مسػمل‪ ّ٧‬ماظلٖشملّّ مِّغٖين مطؽملوملُ معسملشملّٕٖاً مظغملؿمملبهمل ماظغملـرل مع‪ّ٤‬م‬ ‫ذؿملظملّٕاتم‪ Java Script‬مظؿؽملظملؿملّٔمأع‪ّ٦‬رمبلؿملشملهملم– مبمملسؿعملمملدي م‪ -‬مومادؿؼملّٕٖ مايممللمػغملّٔامإشممأنم‬ ‫عَ‪ّٖ٤‬ماهللُمسػمل‪ّٖ٨‬ممبضملّٕصهملمصّٓؼعملهملمجّٓؼّٓةمصمؿملػملهملمجّٓ ًامازلؾملمملم‪jQuery‬ماظّٔيمؼػملظمل‪ّٜ‬م"جَ‪ّ٨‬مط‪ّ٦‬ؼّٕي"‪ .‬م‬ ‫جممملغؿملٖهمل مومعظملؿ‪ّ٦‬حهملماٌزملّٓر معغملؿ‪ّ٦‬بهملمبػملطملهملم‪ Java Script‬متلؼملّّم‬ ‫‪ jQuery‬م‪:‬معغملؿؾهملمجّٓؼّٓةم َّ‬ ‫ظ‪ َّ١‬مطؼملشمل‪ِّّ٦‬ر مٌ‪ّ٦‬اض‪ ّٝ‬ماظذمل م‪ Web‬مبمملظعملؿملمملم ممبممل مطمملن مؼؿشملػملّنمل مطؿمملبهمل معؽمملت ماِّدشملّٕ ماظدلجمؿملهمل مبفملدشملّٕم‬ ‫عضملّٓودة! مو مضّٓ مطؿؾؾملممل ماٌدلعيمل ماظغملؾرل م‪ John Resig‬ميف ماظؾّٓاؼهمل م(سمملم م‪ )2116‬مث‪ ّٖ٣‬مر‪ّٖ٦‬رػمملم‬ ‫صّٕؼ‪ّ٠‬مع‪ّ٤‬ماٌدلجمنيمبمملظؿضملمملونمعضمل‪ّ٥‬م وماهلّٓفمع‪ّ٤‬مطؿمملبؿؾملمملمتطملؿملرلماظشملّٕؼعملهملماظيتمؼغملؿنملمبؾملمملماٌدلجم‪ّ٦‬نم‬ ‫ذؿملظملّٕاتماظذملم‪Java script‬مسػمل‪ّ٧‬محّٓٓمض‪ّ٦‬لمعؾّٓسؾملممل‪ .‬م‬ ‫غمملظوملِ معغملؿؾهملم‪ jQuery‬مخاللمصذلةمضزملرلة مجّٓاً مذؾملّٕةًموادضملهملًمأطلؾؿؾملمملمثعملهملمع‪ّ٦‬اض‪ّٝ‬مأطدلماظرملّٕٓطمملتم‬ ‫يفماظضملمململمعـ‪ّ٢‬م‪Google‬موم‪Mozilla‬موم‪WordPress‬موم‪Drupal‬موم‪DELL‬موماظغملـرلم‬ ‫ع‪ ّ٤‬ماٌ‪ّ٦‬اض‪ ّٝ‬ماظغملُدلى ماظيت مطمملن مآخّٕػممل مع‪ّ٦‬ض‪ ّٝ‬ماظرملّٕطهمل ماظضملؼملالضهمل م‪ Microsoft‬ماظيت متؾؽملٓوملم‬

‫‪3‬‬

‫اٌغملؿؾهمل مو مضؼملٓؽملؿؾملممل مبرملغمل‪ ّ٢‬ماصذلاض‪ ّ٨‬مع‪ ّٝ‬معرملمملرؼ‪ ّٝ‬مظطملهمل ماظدلجمهمل م‪ ASP.NET 4‬ماظيت متُغملؿَنملم‬ ‫بمملدؿكّٓام مبؿملؽهمل م‪ Visual Studio 2010‬مو ماىّٓؼّٕ مبمملظّٔطّٕ مأنٖ مصغملّٕة مإغرملمملء معغملؿؾمملتم‬ ‫‪ Java Script‬مظؿمللومل مصغملّٕة مجّٓؼّٓة مصعملّٓ مزؾملّٕ مسّٓد مطؾرل مع‪ ّ٤‬ماٌغملؿؾمملت مضؾ‪ ّ٢‬مزؾمل‪ّ٦‬ر معغملؿؾهملم‬ ‫‪ jQuery‬مإظَّممل مأنٖ م‪ jQuery‬مطمملغومل ماِّطـّٕ منمملحمملً ميف معشملمملبعملهمل معضملمملؼرل ماظذمل م‪ Web 2‬مو ماِّدؾمل‪ّ٢‬م‬ ‫سػمل‪ ّ٧‬ماإلرالق م‪ ,‬مطؼملممل مطمملغومل معغملؿؾهمل م‪ jQuery‬ماٌغملؿؾهمل ماظ‪ّ٦‬حؿملّٓة ماظيت مضؼملؽملومل مأسػمل‪ ّ٧‬مغلؾهمل مع‪ّ٤‬م‬ ‫اظؿ‪ّ٦‬اص‪ ّ٠‬مع‪ ّٝ‬مصمؿمل‪ ّٝ‬ماٌؿزملظملقمملت ماظرملؾملرلة معـ‪ ّ٢‬م‪ IE6‬مصؼملممل مؼػملؿمل‪ ّ٥‬مو م‪ Firefox 2‬مصؼملممل مؼػملؿمل‪ ّ٥‬موم‬ ‫‪ Safari 3‬م مصؼملممل مؼػملؿمل‪ ّ٥‬مو م‪ Opera 9‬مصؼملممل مؼػملؿمل‪ ّ٥‬مو م‪ Google chrome‬مو مشرلػممل مع‪ّ٤‬م‬ ‫اٌؿزملظملقمملتموماظلؾنملماِّػ‪ّ٣‬ميفماغؿرملمملرماٌغملؿؾهملمومنمملحؾملمملمػ‪ّ٦‬مصطملّٕمحفؼملؾملمملمإذمأغٓ‪ّ٥‬مالمؼؿفمملوزماظذملم‪21‬م‬ ‫طؿملػمل‪ّ٦‬بمملؼؿ ًمملمصعمل‪ّٛ‬م!م م‬ ‫حلؽملمملً م‪ ..‬مطؼملممل مؼَضملُِّٓ مسؽمل‪ّ٦‬ان مػّٔا ماظغملؿمملب مدؽملقمملول متضملػملُّ‪ ّ٣‬مػّٔه ماٌغملؿؾهمل معضملمملً مو مإتعملمملغؾملممل مخالل مدمملسؿنيم‬ ‫صعمل‪ !ّٛ‬مو ماظغملالم مػؽملممل مع‪ّ٦‬ج‪ ّ٥‬مٌ‪ ّ٤‬مؼضملّٕف ‪ HTML‬مو م‪ CSS‬مو مضػملؿملالً مع‪ ّ٤‬مظطملهمل م‪Java script‬م‬ ‫اظؿعملػملؿملّٓؼهملمحؿملىملمأنٖ ماحملؿ‪ّ٦‬ىميفمػّٔاماظغملؿمملب م–مبكملذنماهللم‪-‬مظؿملّٗمع‪ّ٤‬مذاكماظّٔيمطـرلاًمعمملمغضملمملغ‪ّ٨‬م‬ ‫عؽمل‪ ّ٥‬ميفمطؿنملماٌضملػمل‪ّ٦‬عمملتؿملهمل مومخمملصٓ ًهمل معمملمؼؿقّٓثمس‪ّ٤‬مظطملمملتماظدلجمهملمعؽملؾملمملم‪ ,‬مإذمنّٓماٌقملظ‪ّٟ‬مؼظملفُِّّٕ ميفم‬ ‫وج‪ّ٥‬ماظعملمملرئمسرملّٕاتماِّدشملّٕماظدلجمؿملهملمشرلماٌظملؾمل‪ّ٦‬عهملمث‪ّ٣‬مؼؽملؿعمل‪ّ٢‬مإشممصعملّٕةمأخّٕىمضؾ‪ّ٢‬مإزاظهملمذصملمملؼمملػمملم‬ ‫س‪ّ٤‬موج‪ّ٥‬ماالظؿؾمملسم‪,‬مومػ‪ّ٦‬م–مإنمذمملءماهللم‪-‬مظؿملّٗمع‪ّ٤‬ماظغملؿنملماظيتمالمتعمل‪ّ٦‬لمأيمذ‪ّ٨‬ء مسّٓاماظضملؽملمملوؼ‪ّ٤‬م‬ ‫ومل مضّٓرمادؿشملمملسيت مجضمل‪ّ٢‬ماحملؿ‪ّ٦‬ىميفمػّٔاماظغملؿمملبم‬ ‫عؿضملػملخملػملهملًمبضملػمل‪ ّ٢‬ماالخؿزملمملرماظ‪ّ٦‬اػؿملهملم‪,‬مومإغٓؼملمملمحمملوظ ُ‬ ‫ؼعمل‪ّ٦‬لمعمملمرمنملمض‪ّ٦‬ظ‪ّ٥‬مصعمل‪ّٛ‬موماجؿؾملّٓتُمط‪ّ٨‬متغمل‪ّ٦‬نماٌضملػمل‪ّ٦‬عهملمصؿمل‪ّ٥‬معغملـظملهملًمومبلؿملشملهملًمومواضقهملًمبكملذنماهللم‪,‬م‬ ‫خؿمملعمملًمأدفملل ماهللمسّٖٓ مومج‪ ّ٢‬مأن مرمضمل‪ّ٢‬مسؼملػمل‪ّ٨‬مػّٔامخمملظزملمملًمظ‪ّ٦‬جؾمل‪ّ٥‬مومأنمؼغملؿؾ‪ّ٥‬مع‪ّ٤‬ماظضملػمل‪ّ٣‬ماظّٔيمؼؽملؿظمل‪ّٝ‬م‬ ‫ب‪ّ٥‬م‪,‬مطؼملمملمأدس‪ّ٦‬همج‪ ّٖ٢‬مجالظ‪ّ٥‬مأن متـؾوملماظؿفّٕبهمل مظعملمملرئ مػّٔاماظغملؿمملبمأنٖ مسؽمل‪ّ٦‬اغ‪ ّ٥‬مظؿملّٗمسؽمل‪ّ٦‬اغمملًمومملرؼمملًموم‬ ‫الموسّٓ ًامطمملذب ًمملممتّٕٗمب‪ّ٥‬مرؼمملحماظزملٖؿمل‪ّٟ‬مدونمغؿمملئيملمعػملؼمل‪ّ٦‬دهملم‪ .‬م‬ ‫م‬ ‫عُكؿمملرمدؿملِّّٓمصمملحل م‬

‫‪4‬‬

‫م‬ ‫م‬ ‫م‬ ‫م‬ ‫م‬

‫م‬ ‫ع‪ّ٤‬ماظّٓضؿملعملهملم‪1‬مإشمماظّٓضؿملعملهملم‪8‬م‪ :‬م‬

‫أدمملدؿملٖمملتم‪jQuery‬‬

‫‪5‬‬

‫م‬

‫تـؾؿملوملم‪jQuery‬مومتسملؼملؿملؽملؾملمملميفمصظملقؿ‪ّ١‬م‪ :‬م‬ ‫ضؾ‪ّ٢‬مأنمتؾّٓأ معضمل‪ّ٨‬ميفماظ‪ّ٦‬ظ‪ّ٦‬جمإشممسمململماٌغملؿؾهمل م‪ jQuery‬مسدلمدضمملئ‪ ّ٠‬مػّٔاماظغملؿمملبمرمنملمأنم‬ ‫تعمل‪ّ٦‬م مبؿقؼملؿملػملؾملممل مأوالً مع‪ ّ٤‬مخالل ماظّٓخ‪ّ٦‬ل مإشم مع‪ّ٦‬ضضملؾملممل ماظّٕزل‪ ّ٨‬م‪ www.jquery.com‬مو ماظؽملعملّٕم‬ ‫سػمل‪ّ٧‬مزرمم‪Download‬ماظ‪ّ٦‬اضّّميفماظزملٗ‪ّ٦‬رةم‪ :‬م‬ ‫بضملّٓمهؼملؿمل‪ّ٢‬ماٌغملؿؾهملمبرملغمل‪ّ٢‬مصقؿملّّم‬ ‫ؼظملذلض مأن مؼغمل‪ّ٦‬ن محب‪ّ٦‬زت‪ ّ١‬معػمل‪ّٟ‬م‬ ‫بمملالد‪ ّ٣‬م‪ jquery.js‬مو مػ‪ّ٨‬م‬ ‫اظؽمللكهمل ماظغملمملعػملهمل مع‪ ّ٤‬ماٌغملؿؾهمل موم‬ ‫عػمل‪ّٟ‬‬

‫مآخّٕ‬

‫مػ‪ّ٦‬‬

‫ماٌػمل‪ّٟ‬م‬

‫‪ jquery-min.js‬مو مػ‪ّ٨‬م‬ ‫غلكهمل مخظملؿملظملهمل مع‪ ّ٤‬ماٌغملؿؾهمل ممتؿػمل‪ّ١‬م‬ ‫طمملع‪ ّ٢‬معؿملّٖات ماظؽمللكهمل ماظغملمملعػملهمل مع‪ّٝ‬م‬ ‫اخؿالفمبلؿمل‪ّٛ‬ميفمايف‪ّ٣‬مإذمأنٖ ماظؽمللكهملماًظملؿملظملهملمذاتمحف‪ّ٣‬مأض‪ ّ٢‬م‪,‬مض‪ّ٣‬مبؽمللّْمأحّٓ ماٌػملظملني مإشمم‬ ‫اجملػملّٓماظّٔيمزمؿ‪ّ٦‬يمعرملّٕوعماظذملم‪ Web‬ماًمملصمب‪ّ١‬مومأض‪ّٟ‬ماظؿضملػملؿملؼملهملماظؿمملظؿملهملمإشم مرأس ماظزملظملقمملتم‬ ‫‪ّ٨‬م>‪‪”‪<script src=”jQuery.js” type=”text/javascript‬‬ ‫>‪
‫و ماظؿضملػملؿملؼملهمل ماظلمملبعملهمل مػ‪ ّ٨‬متضملػملؿملؼملهمل مبلؿملشملهمل م‪ -‬مطؼملممل متضملػمل‪ ّ٣‬م‪ -‬متعمل‪ّ٦‬م مبؿسملؼملني معػمل‪ ّٟ‬م‪java script‬م‬ ‫عُضملؿملٖ‪ ّ٤‬ميف مصظملقؿ‪ ّ١‬مظؿلؿكّٓم مإعغملمملغؿملٓمملت‪ ّ٥‬مو موزمملئظمل‪ ّ٥‬مالحعملمملً م‪ ,‬مؼؿ‪ ّٗ٣‬مهّٓؼّٓ مػّٔا ماٌػمل‪ ّٟ‬مسدل ماظ‪ّ٦‬اصظملهملم‬ ‫‪ src‬ماظيت مهؼمل‪ ّ٢‬مضؿملؼملهملً متضملؾِّّٕ مس‪ ّ٤‬معلمملر مػّٔا ماٌػمل‪ ّٟ‬مبرملغمل‪ ّ٢‬معشملػمل‪ ّ٠‬مأو مبرملغمل‪ ّ٢‬مغليبٓ مو ميف ماظلٓشملّٕم‬ ‫اظلٓمملب‪ ّ٠‬مصكملن ماظعملؿملؼملهمل م‪ jQuery.js‬متضملين معلمملراً مغلؾؿملمملً مؼرملرل مإشم ماٌػمل‪ ّٟ‬مذو ماالد‪ّ٣‬م‬

‫‪6‬‬

‫‪ jQuery.js‬ماٌ‪ّ٦‬ج‪ّ٦‬د ميف مغظملّٗ ماجملػملّٓ ماظّٔي مزمؿ‪ّ٦‬ي معلؿؽملّٓ ماظذمل م‪ Web‬ماًمملص مبؽملممل م‪ ,‬موم‬ ‫ػغملّٔا مغغمل‪ّ٦‬نمضّٓمنقؽملمملميفمتسملؼملنيماٌغملؿؾهملمضؼمل‪ّ٤‬ماظزملظملقهملمومبمملظؿمملظ‪ّ٨‬مأصؾقؽملممل مجمملػّٖؼ‪ ّ٤‬مظػملؾّٓءميفم‬ ‫ضّٕاءةماظّٓضمملئ‪ّ٠‬ماظؿمملظؿملهمل‪ .‬م‬

‫أدمملدؿملمملتم‪jQuery‬م‪ :‬م‬ ‫تؿغمل‪ّ٦‬نمعغملؿؾهملم‪jQuery‬مبرملغمل‪ّ٢‬مرئؿملل‪ّ٨‬مع‪ّ٤‬ممخلهملمأضلمملممػ‪ّ٨‬م‪ :‬م‬ ‫‪-0‬ماٌُقَِّّٓداتم‪.Selectors‬م‪-2‬ماظّٖٓوالم‪.Functions‬م‪-3‬ماِّحّٓاثم‪ .Events‬م‬ ‫‪-4‬مايّٕطمملتم‪Animations‬م‪.‬م‪-5‬ماإلضمملصمملتم‪Plugins‬م‪.‬م م‬ ‫ومطؼملمملمضػملوملُ ميفماٌعملِّّٓعهملمصكملنٖ مػّٔهماٌغملؿؾهملمتلضمل‪ّ٧‬مظؿؾلؿمل‪ّٛ‬ماِّع‪ّ٦‬رمسؽملّٓمايّٓؼىملمس‪ّ٤‬مطؿمملبهملمذؿملظملّٕةم‬ ‫‪Java Script‬مٌؽملّّمتشملؾؿملعمل‪ّ١‬معّٖؼّٓاًمع‪ّ٤‬ماظؿظملمملسػملؿملهملمإذمأنٖماٌغملؿؾهملم‪jQuery‬متعمل‪ّ٦‬ممبؿطملػملؿمل‪ّٟ‬م‬ ‫جمؼمل‪ّ٦‬سهملمطؾرلةمع‪ّ٤‬ماِّدشملّٕماظدلجمؿملهملمضؼمل‪ّ٤‬متمملب‪ّٝ‬مبلؿمل‪ّٛ‬مجّٓاًممممملمؼلؼملّّمظ‪ّ١‬مطؼملشمل‪ّ٦‬رمظؿشملؾؿملعملمملتماظذملم‬ ‫‪Web‬مبمملظذلطؿملّٖمسػمل‪ّ٧‬موزؿملظملهملماظؿشملؾؿمل‪ّ٠‬مصعمل‪ّٛ‬م‪ .‬م‬ ‫متؿؼملق‪ّ٦‬رماظظملغملّٕة ماظّٕئؿمللؿملهمل مٌغملؿؾهملم‪ jQuery‬مح‪ّ٦‬لمتشملؾؿمل‪ّ٠‬متضملّٓؼ‪ّ٢‬مأومحّٕطهملمأومداظهمل معممل مسػمل‪ّ٧‬مضل‪ّ٣‬م‬ ‫حمّٓدمع‪ّ٤‬مصظملقهملماظذملم‪ Web‬مسؽملّٓمتظملفرلمحّٓثمعضملنيم‪,‬مو مؼؿ‪ّ٣‬مهّٓؼّٓماظعملل‪ّ٣‬مإٌّادمإجّٕاءماظؿضملّٓؼ‪ّ٢‬م‬ ‫‪ ّ٢‬مع‪ّ٤‬مأضلمملمماٌغملؿؾهملم‬ ‫سػملؿمل‪ّ٥‬مبمملدؿكّٓام ماحملِّّٓدات م‪,‬مومبمملظشملؾ‪ّٝ‬مدؽملعمللِّ‪ّ٣‬ماظّٓضمملئ‪ّ٠‬ماظذملؼملؿؾعملؿملهملمٌؽملمملضرملهملمطُ دمل‬ ‫برملغمل‪ّ٢‬معظملزملٓ‪ّ٢‬مومواضّّمبكملذنماهلل‪ .‬م‬ ‫ومأغوملمؼمملمصّٓؼعمل‪ّ٨‬ماظّٔيمملمتؿسملّّمظ‪ّ١‬مصغملّٕةمسؼمل‪ّ٢‬ماٌغملؿؾهملماظّٕئؿمللؿملهملم(ؼُظملؿَّٕضُمأنٖمأصّٓضمملئ‪ّ٨‬مطُـذملُّٕميفم‬ ‫ػّٔه مإٌّحػملهمل) معممل مرأؼ‪ ّ١‬ميف معـمملل مسؼملػمل‪ ّ٨‬مؼ‪ّ٦‬ضّّ مأحّٓ متشملؾؿملعملمملت معغملؿؾهمل م‪ jQuery‬مسػمل‪ ّ٧‬مأرضم‬ ‫اظ‪ّ٦‬اض‪ّٝ‬م؟ م‬ ‫ادخ‪ّ٢‬مظػملؼمل‪ّ٦‬ض‪ّٝ‬ماظّٕائ‪ّٝ‬م‪Google‬مظذلىمصظملقهملمعرملمملبؾملهملمٌمملؼػمل‪ّ٨‬م(حؿ‪ّ٧‬متمملرؼّْمطؿمملبهملمػّٔاماظغملؿمملب)م‪ :‬م‬

‫‪7‬‬

‫م‬ ‫الح‪ّٜ‬مأنماظزملظملقهملماًمملصهملممب‪ّ٦‬ض‪ّٝ‬محمّٕكماظؾقىملم‪ Google‬مالمهؿ‪ّ٦‬يمسػمل‪ّ٧‬مأيمذ‪ّ٨‬ءمسّٓامعمملم‬ ‫ػ‪ّ٦‬مزمملػّٕميفماظزمل‪ّ٦‬رةم(ذضملمملرماٌ‪ّ٦‬ض‪ ّٝ‬مومعّٕب‪ّٝ‬ماظؾقىملموماظّٖرؼ‪ّ٤‬ماًمملصنيمبؾّٓءمسؼملػملؿملهملماظؾقىمل) م‪,‬موم‬ ‫اآلنمحّٕٓكمعقملذّٕماظظملفملرةميفماظزملظملقهملموماغصملّٕمعمملمدؿملقّٓثم!م‪..‬مغضمل‪ّ٣‬مدذلىمعمملمؼرملؾ‪ّ٥‬ماظزمل‪ّ٦‬رةماظؿمملظؿملهمل‪ :‬م‬

‫م‬

‫‪8‬‬

‫ظ‪ ّ٦‬ماغؿؾؾملومل مصكملن مزؾمل‪ّ٦‬ر ماحملؿ‪ّ٦‬ؼمملت ماىّٓؼّٓة ميف ماظزملظملقهمل م(أسين ماظّٕواب‪ ّٛ‬م‪ )Links‬ممت محبّٕطهملم‬ ‫عؿالذؿملهملمجّٔابهملمتّٓس‪ّ٧‬مبمملظصملؾمل‪ّ٦‬رماٌؿالذ‪ّ٨‬م‪Fade in‬م‪ .‬م‬ ‫حلؽملمملًم‪ ..‬معمملمرأؼؽملمملهمػ‪ّ٦‬معـممللمممؿمملز مؼلؿكّٓممعغملؿؾهملم‪ jQuery‬مصضملػملؿملمملًم‪,‬مصؾمل‪ّ٦‬معـممللمسؼملػمل‪ ّ٨‬مسػمل‪ ّ٧‬متشملؾؿمل‪ّ٠‬م‬ ‫حّٕطهمل م‪ Fade in‬مسػمل‪ ّ٧‬مجّٖء مع‪ ّ٤‬ماظزملظملقهمل م(اظّٕواب‪ ّٛ‬م‪ )Links‬مسؽملّٓعممل ممت متظملفرل محّٓث معضملنيم‬ ‫(عّٕورماظظملفملرةميفماٌؽملشملعملهملماظظملمملرشهملمع‪ّ٤‬ماظزملظملقهمل)‪ .‬م‬ ‫اِّعّٕميّٓماآلنمرؾؿملضمل‪ّ٨‬مظغمل‪ّ٤‬مأٌّػ‪ّ٢‬ميفماٌ‪ّ٦‬ض‪ّ٦‬عمأنمعمملمرأؼؿ‪ّ٥‬ممتمبغملؿمملبهملمدشملّٕمواحّٓمع‪ّ٤‬مأبل‪ّٛ‬م‬ ‫عمملمؼغمل‪ّ٦‬نمومػ‪ّ٦‬معرملمملب‪ّ٥‬مظػمللشملّٕماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;)(‪$(„a‟).fadeIn‬‬

‫مغضمل‪ّ٣‬مط‪ّ٢‬مػّٔاماىؼملممللمبلشملّٕمواحّٓمصعمل‪ّٛ‬م!م‪ .‬م‬ ‫طؼملـممللمآخّٕمادخ‪ّ٢‬مٌ‪ّ٦‬ض‪ّٝ‬مذّٕطهملم‪Microsoft‬ماٌ‪ّ٦‬ضّّميفماظزمل‪ّ٦‬رة‪ :‬م‬

‫م‬ ‫حمملولمأنمتؿف‪ّ٦‬لميفماظزملظملقهملمومادؿؼملؿ‪ّٝ‬م! م‬

‫‪9‬‬

‫المتّٓعمػّٔاماىؼملممللمسمّٓس‪ّ١‬مظؿضملؿعملّٓمأنماظزملظملقهملمعؾؽملؿملهملمبمملدؿكّٓاممبّٕغمملعيملمم‪Flash‬مإذمأنمعضملصمل‪ّ٣‬م‬ ‫عمملمرأؼؿ‪ ّ٥‬ميفماظزملظملقهملمع‪ّ٤‬مض‪ّ٦‬ائ‪ّ٣‬م‪menus‬مومأظلؽملهملم‪tabs‬مومحؿ‪ّ٧‬ماٌّٖالجم‪Slider‬ميفمغلكهملم‬ ‫دمملبعملهملمعؽمل‪ ّ٥‬مؼضملؿدلمذؿملؽمملًمبلؿملشمل ًممل مع‪ّ٤‬متشملؾؿملعملمملتمعغملؿؾهملم‪ jQuery‬ماظغملـرلةم(ظألعمملغهملم‪:‬ماظؽمللكهمل مايمملظؿملهملمع‪ّ٤‬م‬ ‫اٌّٖالجمتلؿضملؼمل‪ّ٢‬متعملؽملؿملهملم‪)Silverlight‬م‪.‬م م‬

‫اٌّٖؼّٓمع‪ّ٤‬ماِّعـػملهملم؟ م‬ ‫محلؽملمملً م‪..‬ميغملؽمل‪ ّ١‬ماالغؿعملمملل مظّٓضمملئ‪ ّ٠‬مادؿضملّٕاض مأػ‪ ّ٣‬ماإلضمملصمملت ميف مغؾملمملؼهمل مػّٔا ماظغملؿمملب مأو مصضملػملؿمل‪ّ١‬م‬ ‫‪ ّ٨‬م‪ Google‬موم‪Microsoft‬م‬ ‫مب‪ّ٦‬ض‪ّٝ‬ماٌغملؿؾهملمغظمللؾملممل مع‪ّٝ‬مأغينمأرىمأظَّممل معـممللَ مأصسمل‪ّ٢‬مع‪ّ٤‬مع‪ّ٦‬ضضملَ ِ‬ ‫أطدلمذّٕطيتمبّٕجمؿملٓمملتميفماظضملمملظَ‪ّ٣‬م‪,‬مػّٔاماظضملمملظَ‪ّ٣‬مذات‪ّ٥‬ماظّٔيمدصضملؿ‪ّ٥‬مومملربماظرملّٕطمملتماظضملؼملالضهملمظػملـعملهملمبذملم‬ ‫‪ jQuery‬مومػّٔامعمملمؼّٓصضملؽملممل مدم‪ّ٤‬مأؼسملمملً مظػملؾّٓءميفمايّٓؼىملمس‪ّ٤‬مرّٕؼعملهملمادؿضملؼملمملهلممل مسل‪ّ٧‬مأنمغّٕىم‬ ‫ع‪ّ٦‬اضضملمملً مسّٕبؿملهملً متؽملمملصّٗ مبعمل‪ّ٦‬ة ميف مػّٔا ماجملمملل مو مػّٔا مظؿملّٗ مبضملؿملّٓاً مسػمل‪ ّ٧‬مور‪ ّٕ٤‬مسّٕب‪ّ٨‬دمل مؼؽملسملُّّ مآالفَم‬ ‫اٌُؾّٓسنيماظشملَّؼمل‪ّ٦‬حني‪.‬م م‬

‫م‬ ‫رّٕؼعملهملمادؿضملؼملممللم‪jQuery‬م‪ :‬م‬ ‫برملغمل‪ ّٕ٢‬مسمملمدمل مومرمملغٕ مب ضملّٓمأنمتعمل‪ّ٦‬ممبؿسملؼملنيماٌغملؿؾهملمضؼمل‪ّ٤‬ماظزملظملقهملمطؼملمملمذطّٕغمملمدمملبعملمملًمدؿعمل‪ّ٦‬ممبغملؿمملبهملم‬ ‫ذؿملظملّٕةم‪ Java script‬مسزملّٕؼٓهملم(ومشرلمر‪ّ٦‬ؼػملهملم‪ )‬مبمملدؿكّٓام معغملؿؾهمل م‪jQuery‬مظؿملزملؾّّمذغمل‪ّ٢‬م‬ ‫صظملقؿ‪ّ١‬ماظؽملؾملمملئ‪ّ٨‬مطؼملمملؼػمل‪ّ٨‬م‪ :‬م‬ ‫>‪‪”‪src=”jQuery.js” type=”text/javascript‬م‪<script‬‬

‫‪10‬‬

‫>‪”‪type=”text/javascript‬م‪<script‬‬ ‫{م)(‪$(document).ready(function‬مم‬ ‫مذؿملظملّٕةمج‪ّ٨‬مط‪ّ٦‬ؼّٕيمػؽملممل‬

‫مم‬ ‫;)}‬ ‫>‪‪‪
‫حمؿ‪ّ٦‬ىمصظملقؿ‪ّ١‬م(اظصملمملػّٕ)مدؿملغمل‪ّ٦‬نمػؽملمملم‬ ‫>‪‪
‫إنمطمملنمظ‪ّ١‬مخدلةمبلؿملشملهملمجّٓاًميفمطؿمملبهملمعلؿؽملّٓاتم‪HTML‬مصفملطمملدمأضل‪ّ٣‬مأغ‪ّ١‬مملمت‪ّ٦‬اج‪ّ٥‬مأؼهملمعرملغملػملهملم‬ ‫ع‪ّٝ‬معمملمدؾ‪ّ٠‬مع‪ّ٤‬مذؿملظملّٕةمإالمع‪ّٝ‬ماِّدشملّٕماظؿمملظؿملهملم‪ :‬م‬ ‫{م)(‪$(document).ready(function‬‬ ‫ممممذؿملظملّٕةمج‪ّ٨‬مط‪ّ٦‬ؼّٕيمػؽملممل‬ ‫;)}‬

‫و مأطمملد مأضل‪ ّ٣‬مأؼسملمملً مأغ‪ ّ١‬مدذلتمملح مإنِ م ضػملومل مظ‪ ّ١‬مأغ‪ ّ٥‬مظؿملّٗ مع‪ ّ٤‬ماظسملّٕوري مأن متظملؾملؼملؾملممل م‪ -‬ماآلن مسػمل‪ّ٧‬م‬ ‫اِّض‪ -ّ٢‬مو مظغمل‪ ّ٤‬مع‪ ّ٤‬ماٌؾمل‪ ّ٣‬مأن متؿّٔطّٕ مذؿملؽمملً مواحّٓاً م‪ :‬مع‪ ّ٤‬ماحملصمل‪ّ٦‬رات ماظدلجمؿملهمل مسػمل‪ ّ٧‬مأي معدلعيملم‬ ‫ؼضملؿؼملّٓمسػمل‪ّ٧‬م‪ jQuery‬مأنمؼ غملؿنملمأيمذؿملظملّٕةمخمملصهملمبمملٌغملؿؾهملمخمملرجماٌؽملشملعملهملماٌكزملزملهملمظرملؿملظملّٕةم‬

‫‪11‬‬

‫‪ jQuery‬مو مػ‪ ّ٨‬ماٌ‪ّ٦‬ضقهمل ميف ماِّدشملّٕ ماظلمملبعملهمل مو مع‪ ّ٤‬مػّٔه ماظؽملعملشملهمل مإشم مغؾملمملؼهمل ماظغملؿمملب مبطملؿملهملم‬ ‫اظؿلؾملؿمل‪ّ٢‬مومسّٓمماإلرمملظهملمظ‪ّ٤‬مؼّٔطّٕماظغملؿمملبمطمملع‪ّ٢‬مذؿملظملّٕةماظزملظملقهملمومإمنمملمدرلطّٖمسػمل‪ّ٧‬ماظظملعملّٕةماٌشملػمل‪ّ٦‬بهملم‬ ‫يفمط‪ّ٢‬معّٕةمظغمل‪ّ٤‬مأغوملمدؿؿّٔطّٕمأنمصمؿمل‪ّٝ‬مذؿملظملّٕاتماظذملم‪jQuery‬مت‪ّ٦‬ض‪ّٝ‬ميفمػّٔهماٌؽملشملعملهمل‪ .‬م‬ ‫وماآلنمميغملؽمل‪ّ١‬ماالغؿعملممللمعؾمملذّٕةً مظػملّٓضمملئ‪ّ٠‬ماٌكزملزملهملمظػملؼملقِّّٓدات مومومملػ‪ّ٢‬ماِّدشملّٕماظعملػملؿملػملهملماظؿمملظؿملهملم‬ ‫إالمإنِمطؽملوملمممّ‪ّ٤‬مزمنملمعضملّٕصهملمط‪ّ٢‬مذ‪ّ٨‬ءمصقؿملؽملؾملمملمؼؿ‪ّ٦‬جٖنملمسػملؿمل‪ّ١‬مأنمتعملّٕأماظظملعملّٕةماظؿمملظؿملهملم‪ .‬م‬

‫م‬ ‫عمملمعضملؽمل‪ّ٧‬ماظرملؿملظملّٕةماظلمملبعملهملم؟ م‬ ‫تضملؿؼملّٓمعغملؿؾهملم‪ jQuery‬مسػمل‪ّ٧‬مذفّٕةماظذملم‪ DOM‬م(ذفّٕةمطمملئؽملمملتماٌلؿؽملّٓم ‪Data Object‬‬ ‫‪ )Model‬مبرملغمل‪ّ٢‬مطػمل‪ ّ٨‬ميف مسؼملػملؾملمملمومطؼملمملمتضملػمل‪ّ٣‬مصكملن مبؽملمملء مػّٔهماظرملفّٕةمال مؼغملؿؼمل‪ ّ٢‬مإال مبضملّٓماطؿؼملممللم‬ ‫هؼملؿمل‪ ّ٢‬ماظزملظملقهمل مو ميف مخشمل‪ّ٦‬ط ماالغذلغومل ماظؾشملؿملؽهمل مطمملظذمل م‪ Dial up‬معـالً مضّٓ مؼلؿطملّٕق ماطؿؼملممللم‬ ‫هؼملؿمل‪ّ٢‬ماظزملظملقهمل مبضمل‪ ّٚ‬ماظ‪ّ٦‬ضوملماظّٔيمإنممتماظؿالسنملممبغمل‪ّ٦‬غمملتم‪ DOM‬مأثؽملمملءهمدؿملقملديمذظ‪ّ١‬مإشمم‬ ‫إصلمملدمذفّٕةمطمملئؽملمملتماٌلؿؽملّٓمم‪DOM‬مومبمملظؿمملظ‪ّ٨‬مإصلمملدمصظملقؿ‪ .ّ١‬م‬ ‫وملميفمحممملوظهملمىضمل‪ّ٢‬مايؿملمملةمأدؾمل‪ّ٢‬مصكملنٖمعؾملؼملهملماِّدشملّٕماظلمملبعملهملمبؾلمملرهملم‬ ‫ومِّنٖمعغملؿؾهملم‪jQuery‬مطُؿِؾَ ِ‬ ‫ػ‪ّ٨‬ماظؿقعمل‪ّ٠‬مع‪ّ٤‬ماطؿؼملممللمهؼملؿمل‪ّ٢‬ماٌلؿؽملّٓموماطؿؼملممللمبؽملمملءماظرملفّٕةمضؾ‪ّ٢‬ماظلؼملمملحمبؿؽملظملؿملّٔمأيمذؿملظملّٕةم‬ ‫‪jQuery‬محظملمملزمملًمسػمل‪ّ٧‬مدالعهملمصظملقؿ‪ّ١‬مومسػمل‪ّ٧‬مزلضملهملماٌغملؿؾهملم‪ .‬م‬ ‫و ماآلن متلؿشملؿمل‪ ّٝ‬ماظعمل‪ّ٦‬ل مبـعملهمل مأغ‪ ّ١‬ممم‪ ّ٤‬مؼؿعملؽمل‪ّ٦‬ن مأدمملدؿملمملت معغملؿؾهمل م‪ jQuery‬مبمملظؽمللؾهمل مٌضملمملؼرل مػّٔام‬ ‫اظغملؿمملبم‪..‬معؾمملركٌمعؾمملرك‪ .‬م‬

‫‪12‬‬

‫م‬ ‫م‬ ‫م‬

‫م‬ ‫ع‪ّ٤‬ماظّٓضؿملعملهملم‪8‬مإشمماظّٓضؿملعملهملم‪32‬م‪ :‬م‬

‫اٌُقَِّّٓداتم‬ ‫‪Selectors‬‬ ‫م‬

‫‪13‬‬

‫اٌُقَِّّٓداتم‪ :‬م‬ ‫ػ‪ّ٢‬متّٔطّٕمطؿمل‪ّٟ‬مطمملنمايممللمضؾ‪ّ٢‬مأوراقماِّمنمملطم‪ Cascading Style Sheets‬ممأوم‬ ‫عمملمؼضملّٕفماخؿزملمملراًمبذملم‪CSS‬م؟ م‬ ‫طؼملمملمتّٕؼّٓم‪..‬مدسؽملمملمع‪ّ٤‬ماٌـملد‪ّ٨‬مومظؽملؽملصملّٕمط‪ّ٣‬مأصؾقوملمحؿملمملةمعزملؼمل‪ّ٣‬ماظذملم‪ Web‬مصمؿملػملهملً مبضملّٓػمملم‪,‬مؼغملظمل‪ّ٨‬م‬ ‫ظؿطملؿملرلمحف‪ّ٣‬ماً‪ّٛ‬ماًمملصمبغملمملصهملماظؽملزمل‪ّ٦‬صماٌغملؿ‪ّ٦‬بهملمضؼمل‪ّ٤‬ماظ‪ّ٦‬د‪ّ٦‬مم‪p‬مأنمتغملؿنملميفمورضهملماظؽملؼمل‪ :ّٛ‬م‬ ‫م}م ;‪font-size:medium‬مم{‪p‬‬

‫ومؼغملظمل‪ّ٨‬مظؿطملؿملرلمظ‪ّ٦‬نمطمملصهملماظّٕواب‪ّٛ‬ماٌ‪ّ٦‬ج‪ّ٦‬دةمضؼمل‪ّ٤‬ماظزملظملقهملمأنمتغملؿنملميفمورضهملماظؽملؼمل‪ّٛ‬م‪ :‬م‬ ‫م}مم;‪a{ color:red‬‬

‫ومؼغملظمل‪ّ٨‬مظؿطملؿملرلمغ‪ّ٦‬عماً‪ّٛ‬ماًمملصمبغملػملؿملؾملؼملمملمعضملمملًمأنمتغملؿنملميفمورضهملماظؽملؼمل‪ّٛ‬م‪ :‬م‬ ‫م} ;‪p,a{ font-family:Tahoma,Arial‬‬

‫ومؼغملظمل‪ّ٨‬مظؿطملؿملرلمسّٕضمإرمملرات مصمؿمل‪ّٝ‬ماظزمل‪ّ٦‬رماٌ‪ّ٦‬ج‪ّ٦‬دةمضؼمل‪ّ٤‬مود‪ ّٕ٣‬مؼؽملؿؼمل‪ّ٨‬مظػملزملٖ‪ّٟ‬مم‪Mukhtar‬م‬ ‫أنمتغملؿنملميفمورضهملماظؽملؼمل‪ّٛ‬م‪:‬‬ ‫م} ;‪.Mukhtar img{ border-width:medium‬‬

‫حلؽملمملًم‪..‬ماظغملالمماظلمملب‪ّ٠‬مظؿملّٗمبضملؿملّٓاًمسؼملمملمأرؼّٓمض‪ّ٦‬ظ‪ّ٥‬مخزمل‪ّ٦‬صمملًمإذامسّٕصوملمأنٖ مادؿكّٓاعؽملمملمظذملم‪ a‬موم‪ p‬موم‬

‫‪ p,a‬مو م‪img‬‬

‫‪ .Mukhtar‬م مؼّٓرد‪ ّ٥‬معؿضملػملؼمل‪ ّ٦‬ماظذمل م‪ CSS‬مهومل مسؽمل‪ّ٦‬ان ماحملِّّٓداتم‬

‫‪ Selectors‬م‪ ,‬مو مطؼملممل مؼؾّٓو مع‪ ّ٤‬مازلؾملممل ميف م‪ jQuery‬مصكملن ماحملِّّٓدات م‪Selectors‬م‬ ‫تلؿضملؼمل‪ّ٢‬مظؿقّٓؼّٓمجمؼمل‪ّ٦‬سهملمع‪ّ٤‬مسؽملمملصّٕمعلؿؽملّٓماظذملم‪Web‬م(صظملقهملماظذملم‪)HTML‬ميفماظؾّٓاؼهملمظؿملؿ‪ّ٣‬متشملؾؿمل‪ّ٠‬م‬ ‫ذ‪ّ٨‬ءمع‪ّ٤‬مدوالمأومحّٕطمملتم‪jQuery‬مسػملؿملؾملمملمالحعملمملً‪ .‬م‬

‫‪14‬‬

‫‪ّ١‬مسّٓدمطؾرلمع‪ّ٤‬ماحملِّّٓداتماظيتمتضملشملؿمل‪ّ١‬مإٌّوغهملماظغملمملصؿملهملمظؿقّٓؼّٓمعمملمتّٕؼّٓهمبمملظسملؾ‪ّٛ‬مومؼغملظمل‪ّ٨‬م‬ ‫ػؽملمملظ َ‬ ‫أنمأخدلكمأنمحمِّّٓداتم‪ CSS‬ماظيتمتضملّٕصؾملممل مذاتؾملممل متضملؿدلمبضملسملمملًمع‪ّ٤‬محمّٓداتم‪ jQuery‬ممبمملمصؿملؾملمملم‬ ‫حمِّّٓدات ماظؽمللكهمل م‪ 3‬م‪ CSS‬م(اظذمل م‪ CSS 3‬م ممل متُشملؾٖ‪ ّ٠‬محؿٓ‪ ّ٧‬ميصملهمل مطؿمملبهمل ماظغملؿمملب مو مإغٖؼملممل مصّٓرتم‬ ‫عضملمملؼرلػمملمصعمل‪)ّٛ‬مممّمملمؼضملينمأغ‪ّ١‬متضملّٕفماظغملـرلمس‪ّ٤‬ماحملِّّٓداتمعلؾعملمملً‪ .‬م‬ ‫ظغمل‪ّ٨‬متعمل‪ّ٦‬م مبؿقّٓؼّٓمسّٓدمع‪ّ٤‬مسؽملمملصّٕماظزملظملقهملميفم‪ jQuery‬مرمنملمأنمتغملؿنملمذؿملظملّٕةم‪jQuery‬م‬ ‫بمملظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;)‟‪jquery(„selector‬‬

‫أومم‪ :‬م‬ ‫;)‟‪$(„selector‬‬

‫حؿملىمل مأن م‪ Selector‬مميـ‪ ّ٢‬ماحملِّّٓد ماظّٔي مؼضملين مجمؼمل‪ّ٦‬سهمل معضملؿملؽملهمل مع‪ ّ٤‬مسؽملمملصّٕ ماظزملظملقهمل مو ميفم‬ ‫ػّٔه ماظّٓضمملئ‪ ّ٠‬مدؽملؿضملّٕف مسػمل‪ ّ٧‬مخمؿػمل‪ ّٟ‬ماظعملؿمل‪ ّ٣‬ماظيت مميغمل‪ ّ٤‬مأن متغمل‪ّ٦‬ن محمّٓدات مصقؿملقهمل م‪ ,‬مو ميفم‬ ‫ايعملؿملعملهمل مصكملن م‪ $‬مأو م‪ jquery‬مؼضملؿدلان مازلني مظؿمملب‪ ّٝ‬مواحّٓ مو مسػملؿمل‪ ّ٥‬مصكملن ماىؼملػملؿنيم‬ ‫)‪ jquery(selector‬مو م)‪ $(selector‬معؿغملمملصؽؿمملن مو مظغمل‪ ّٖ٤‬مشمملظؾؿملهمل ماٌدلجمنيم‬ ‫ؼظملسملػمل‪ّ٦‬نماظرملغمل‪ّ٢‬ماظـمملغ‪ّ٨‬مِّغ‪ّ٥‬مأضزملّٕمأومرمبمملمِّغ‪ّ٥‬مؼّٔطّٕماظؾضمل‪ّٚ‬معؽملؾمل‪ّ٣‬مبؿضملّٕؼ‪ّٟ‬ماٌؿطملرلاتميفم‪PHP‬مإنم‬ ‫طمملغ‪ّ٦‬امع‪ّ٤‬معدلجمؿملؾملممل‪ .‬م‬ ‫ومطؼملـ ممللمسؼملػمل‪ّ٨‬مسػمل‪ّ٧‬ماٌ‪ّ٦‬ض‪ّ٦‬عمميغمل‪ّ٤‬مأنمغعمل‪ّ٦‬ممبؿقّٓؼّٓمصمؿمل‪ّٝ‬ماظّٕواب‪ّٛ‬ماٌ‪ّ٦‬ج‪ّ٦‬دةميفماظزملظملقهملم‬ ‫بمملدؿكّٓامماحملّٓدم‪a‬ماظّٔيمؼضملينمصمؿمل‪ّٝ‬مسؽملمملصّٕماظ‪ّ٦‬د‪ّ٣‬م‪a‬ماٌ‪ّ٦‬ج‪ّ٦‬دةميفماظزملظملقهملمومسؽملّٓئٍّٔمتغمل‪ّ٦‬نم‬ ‫اظؿضملػملؿملؼملهملماظيتمتعمل‪ّ٦‬ممبؾملّٔهماظ‪ّ٦‬زؿملظملهمل‪ :‬م‬ ‫;)‟‪$(„a‬‬

‫أومم‪:‬‬

‫‪15‬‬

‫;)‟‪jquery(„a‬‬

‫ومميغمل‪ّ٤‬مأنمغعمل‪ّ٦‬ممبؿقّٓؼّٓمطمملصهملماظزمل‪ّ٦‬رماٌ‪ّ٦‬ج‪ّ٦‬دةميف ماظزملظملقهملمبمملدؿكّٓامماحملّٓدم‪ img‬مبفملحّٓم‬ ‫اظرملغملػملنيم‪ :‬م‬ ‫;)‟‪$(„img‬‬

‫أو م‬ ‫م‪jquery(„img‟);.‬‬

‫ومطؼملمملمتالح‪ّٜ‬مصكملنماحملّٓدؼ‪ّ٤‬م‪a‬موم‪img‬مػؽملمملمؼلؿكّٓعمملنمبؽملظملّٗماظزملؿملطملهملماًمملصهملممبقّٓداتمأوراقم‬ ‫اِّمنمملطماظيتمتضملّٕصؾملمملم‪,‬مومطؼملـممللمسػمل‪ّ٧‬مادؿكّٓاممحمّٓدمآخّٕمميغمل‪ّ٤‬مأنمغعمل‪ّ٦‬ممبؿقّٓؼّٓمطمملصهملمخالؼمملم‬ ‫اىّٓاول ماٌ‪ّ٦‬ج‪ّ٦‬دة ميف ماظزملظملقهمل مو ماظيت مهؿ‪ّ٦‬ي مسػمل‪ ّ٧‬مص‪ّ٦‬رة مداخػملؾملممل مبمملدؿكّٓام ماحملّٓدم‬ ‫)‪td:has(img‬مبكملحّٓىماظزملؿملطملؿنيم‪ :‬م‬ ‫;)‟)‪$(„td:has(img‬‬

‫أوم‪ :‬م‬ ‫;)‟)‪jquery(„td:has(img‬‬

‫أمتؽمل‪ ّ٧‬مأن متغمل‪ّ٦‬ن ماظظملغملّٕة ماًمملصهمل مبمملحملِّّٓدات مضّٓ ماتسملقومل ماآلن م مظؿعمل‪ّ٦‬م محؿملؽملؾملممل مبؿفّٕبهمل مبضمل‪ّٚ‬م‬ ‫ذؿملظملّٕات م‪ jQuery‬ماًمملصهمل مبمملحملِّّٓدات ميف مصظملقؿ‪ ّ١‬مبرملغمل‪ ّ٢‬مصضملػمل‪ ّ٨‬مظؿؽملؿيمل مصظملقهمل معرملمملبؾملهملم‬ ‫ٌمملؼػمل‪ :ّ٨‬م‬ ‫>‪‪”‪src=”jQuery.js” type=”text/javascript‬م‪<script‬‬ ‫>‪
‫‪16‬‬

‫>”‪type=”text/javascript‬م‪<script‬‬ ‫{م)(‪$(document).ready(function‬‬ ‫;)‟‪$(„a‬‬ ‫;)‟‪$(„img‬‬ ‫;)‟)‪$(„td:has(img‬‬

‫;)}‬ ‫>‪‪‪‪‪
‫ضّٓمتلؿطملّٕبمإنمملمتَّٕ مأؼهملمتطملؿملرلاتمسػمل‪ّ٧‬ماظزملظملقهملمبضملّٓمطؿمملبهملمذؿملظملّٕاتم‪ jQuery‬ماىّٓؼّٓةمصؿملؾملمملموم‬ ‫ػؽملمملمرمنملمأنمغ‪ّ٦‬ضّّٓمأنٖ مادؿكّٓامماحملِّّٓدات مالمؼؿ‪ّ٣‬ممبؽملفملىمس‪ّ٤‬مدوالماٌغملؿؾهملمحؿملىملمرمنملمأنم‬ ‫ؼذلاص‪ ّ٠‬مادؿكّٓام ماحملِّّٓدات ماًمملصهمل مبمملٌغملؿؾهمل مع‪ ّٝ‬مادؿكّٓام مإحّٓى مدواهلممل مسػمل‪ ّ٧‬ماِّض‪ ّ٢‬مظؿملَؽملؿُيملَم‬ ‫تطملؿملرلْ معػملؼمل‪ّ٦‬سْ ميفماظزملظملقهملمومػّٔامذ‪ّ٨‬ءمدؽملؿضملػملّؼمل‪ّ٥‬مبضملّٓمدضمملئ‪ّ٠‬مضػملؿملػملهملمظغمل‪ّ٤‬محمملظؿملمملًمرمّٓرمب‪ّ١‬مأنمتضملّٕفم‬ ‫أن مادؿكّٓام ماِّدشملّٕ ماظلمملبعملهمل مضمملم مبؿقّٓؼّٓ معممل متّٕؼّٓه ممتمملعمملً مو ممل مؼعمل‪ ّ٣‬مبفملي متطملؿملرل مو معممل مأرؼّٓ مض‪ّ٦‬ظ‪ّ٥‬م‬ ‫بمملخؿزملمملرم‪:‬م"اٌُقِّّٓدمؼغملؿظمل‪ّ٨‬مبؿقّٓؼّٓمجّٖءمع‪ّ٤‬ماظزملظملقهملمبؿملؽملؼملمملمتعمل‪ّ٦‬مماظّٓوالمبؿطملؿملرله" م‪..‬ػّٔهمغعملشملهملم‬ ‫ج‪ّ٦‬ػّٕؼهملمرمنملمأنمتظملؾملؼملؾملمملمضؾ‪ّ٢‬ماٌؿمملبضملهملم‪ .‬م‬

‫‪17‬‬

‫عػملق‪ّ٦‬زهمل م‪ :‬ميف مغؾملمملؼهمل ماِّعّٕ م‪ $‬مو م‪ 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‬‬

‫‪18‬‬

‫حؿملىمل مأن ماظلشملّٕ ماظلمملب‪ ّ٠‬مدؿملعمل‪ّ٦‬م مبؿؽملظملؿملّٔ ماظّٓاظهمل م‪ function1‬مسػمل‪ ّ٧‬ماحملؿ‪ّ٦‬ؼمملت ماظيت مؼضملؿملّٓػمملم‬ ‫احملّٓدم‪ selector‬مث‪ّ٣‬مؼعمل‪ّ٦‬ممبؿؽملظملؿملّٔماظّٓاظهملم‪ function2‬مسػمل‪ّ٧‬ماحملؿ‪ّ٦‬ؼمملتماظيتمتضملؿملّٓػمملم‬ ‫اظّٓاظهملم‪function1‬موممبمملمأنماظؽملؼمل‪ّٛ‬ماظّٔيمتضملؿملّٓهمػّٔهماظّٓوالمػ‪ّ٦‬مغظملّٗماظؽملؼمل‪ّٛ‬ماظّٔيمميغمل‪ّ٤‬م‬ ‫هلمملمغظمللؾملمملمادؿعملؾمملظ‪ّ٥‬مصؾملّٔامؼضملينمأن ماظّٓاظؿني م‪ function1‬موم‪ function2‬مدؿشملؾعملمملن مسػمل‪ّ٧‬م‬ ‫احملؿ‪ّ٦‬ى ماظّٔي مؼضملؿملّٓه ماحملّٓد م‪ selector‬مبؽملظملّٗ متّٕتؿملنمل مادؿّٓسمملئؾملؼملممل مو مسػملؿمل‪ ّ٥‬مصكملن مذؿملؽمملًم‬ ‫طؼملمملؼػمل‪ :ّ٨‬م‬ ‫;)(‪$(‟selector‟).Q1().Q2().Q3(). … .Qn‬‬

‫ؼضملؿدلمصقؿملق ًممل ممتمملعمملً مومػ‪ّ٦‬مذ‪ّ٨‬ء مرائ‪ّٝ‬مِّنمػّٔامؼضملينمأغ‪ّ١‬متلؿشملؿمل‪ّٝ‬متؽملظملؿملّٔمسّٓدم‪ n‬مع‪ّ٤‬ماظّٓوال مسػمل‪ّ٧‬م‬ ‫غظملّٗماظضملؽملمملصّٕماظيتمؼضملؿملّٓػمملماحملّٓدمحبؿملىملمؼغمل‪ّ٦‬نمخّٕج مط‪ّ٢‬مع‪ّ٤‬مػّٔهماظّٓوالمدخالًمظػملّٓاظهملماظؿمملظؿملهملم‬ ‫هلمملمومط‪ّ٢‬مػّٔهماظّٕوسهملمتضملؿدلمتضملػملؿملؼملهملًمواحّٓةًمصعمل‪ّٛ‬مظّٓىمأػمملظ‪ّ٨‬مضؾؿملػملهملم‪jQuery‬م! م‬ ‫صؼملـالًمميغملؽمل‪ّ١‬مطؿفّٕبهملمواضضملؿملهملمأنمتغملؿنملمعمملؼػمل‪ّ٨‬م‪ :‬م‬ ‫;)‟‪$(„a‟).fadeOut().addClass(„red‬‬

‫حؿملىملمدؿعمل‪ّ٦‬ممػّٔهماىؼملػملهملمسؽملّٓمتؽملظملؿملّٔػمملمبمملظؾقىملمس‪ّ٤‬مصمؿمل‪ّٝ‬ماظّٕواب‪ّٛ‬ميف ماظزملظملقهملم(ِّنماٌُقِّّٓدم‬ ‫اٌلؿكّٓمم‪ a‬مؼضملينمصمؿمل‪ّٝ‬ماظّٕواب‪ )ّٛ‬مث‪ّ٣‬متعمل‪ّ٦‬ممبؿشملؾؿمل‪ّ٠‬متفملثرلم‪ fadeOut‬مسػملؿملؾملمملمصمؿملضمل ًممل مومبضملّٓمذظ‪ّ١‬م‬ ‫وضمل‪ّ٢‬مضؿملؼملهملماظزمل‪ّٟ‬ماًمملصمب‪ّ٦‬رضهملماِّمنمملطم‪ CSS Class‬ماظّٔيمتؽملؿؼمل‪ّ٨‬مظ‪ّ٥‬مػ‪ ّ٦‬ماظزمل‪ّٟ‬م م م‪red‬م‬ ‫(مبضملؽمل‪ّ٧‬مآخّٕم‪:‬متسملؿمل‪ّٟ‬ماظ‪ّ٦‬اصظملهملم”‪class=”red‬مظػملضملؽملمملصّٕماحملّٓدةم)م‪ .‬م‬ ‫ضؾ‪ّ٢‬مأنمغلؿضملّٕضماحملِّّٓدات مطمملعػملهملًمدسؽملمملمغغملؿنمل ماظرملؿملظملّٕةماظؿمملظؿملهملمظزملظملقهملمتلؿضملؼمل‪ّ٢‬م‪ jQuery‬مبضملّٓم‬ ‫اظؿفملطّٓمرؾضملمملًمع‪ّ٤‬مأنمعلمملرم‪jQuery‬ماٌسملؼمل‪ّ٤‬موماد‪ّ٣‬معػمل‪ّٟ‬ماٌغملؿؾهملمصقؿملقمملنم‪.‬‬ ‫>‪‪‪‪
‫‪19‬‬

<script src="jquery.js" type="text/javascript"> <script type="text/javascript"> $(document).ready(function() { $(„#Button1‟).click(function() { $(‘#TextArea1’).toggle(‘slow’); }) });

‫ّمبمملدؿكّٓاممعغملؿؾهملم‬٥‫ّمسؼملػمل‬١‫ّمعمملمميغملؽمل‬ٛ‫ّماظّٖرمدؿرملمملػّٓمأبل‬٧‫غؿؿملفهملً مظؿؽملظملؿملّٔماظزملظملقهملماظلمملبعملهمل موماظؽملعملّٕمسػمل‬ ‫ م‬.‫م‬jQuery ‫م م‬:‫عمملمؼؾملؼملينماآلنمأغؽملمملمادؿضملؼملػملؽملمملماظرملؿملظملّٕةماظؿمملظؿملهمل‬ $('#TextArea1').toggle('slow');

20

‫ظػمل‪ّ٦‬ص‪ّ٦‬لمإشمماظضملؽملزملّٕمذوماٌضملّٕفم‪ TextArea1‬م ميفماظزملظملقهمل م مومسؼمل‪ّ٢‬معمملمذمملػّٓت‪ّ٥‬ميفماٌـممللم‬ ‫بمملدؿكّٓامماظّٓاظهملم‪ toggle‬ماظيتمدؽملؽملمملضّ٘مسؼملػملؾملمملميفمدضمملئ‪ّ٠‬ماظّٓوال مومضّٓممتمهّٓؼّٓ ماظضملؽملزملّٕمذوم‬ ‫اٌضملّٕفم‪TextArea1‬مس‪ّ٤‬مرّٕؼ‪ّ٠‬ماحملّٓدم‪#TextArea1‬م‪.‬م م‬ ‫عػملق‪ّ٦‬زهملم‪:‬م‪Set‬م‪Wrapped‬م‪jQuery‬مظؿمللوملمأطـّٕمع‪ّ٤‬مجمؼمل‪ّ٦‬سهملمسؽملمملصّٕمحمّٓدةمضؼمل‪ّ٤‬مصظملقهملم‬ ‫اظذملم‪ Web‬ماًمملصهملمبؽملممل م‪,‬م ومزلؿملوملمبؾملّٔاماالد‪ّ٣‬ماصشملالحمملًمِّغؽملمملمغعمل‪ّ٦‬ممبؿقّٓؼّٓػمملمأوالًمبطملؿملهملماظعملؿملمملممبؽمل‪ّ٦‬عم‬ ‫ع‪ّ٤‬مسؼملػملؿملمملتم‪jQuery‬مسػملؿملؾملمملمالحعملمملًمطممليّٕطمملتمأوماإلضمملصمملتم‪ .‬م‬

‫تّٔطّّٕم‪:‬ماظضملؽملمملصّٕماظيتمؼضملؿملّٓػمملمادؿضملؼملممللماظّٓاظهملم‪$‬مأوم‪jquery‬مع‪ّٝ‬ماحملِّّٓداتمتلؼمل‪ّ٧‬م ‪jQuery‬‬ ‫‪Wrapped Set‬مأوم‪jQuery‬ماخؿزملمملراً‪ .‬م‬ ‫ومِّنماحملِّّٓدات ماًمملصهملمبمملٌغملؿؾهملمطـرلةمصكملنمختزملؿمل‪ّٙ‬مصعملّٕةمظغمل‪ّ٢‬معؽملؾملمملمدؿملقملديمإشممإغؿمملجمطؿمملبم‬ ‫ع‪ ّ٤‬ماظؽمل‪ّ٦‬ع ماظـعملؿمل‪ ّ٢‬موزغمملً مو ماًظملؿمل‪ ّٟ‬مسِػملؼملمملً م‪ ,‬مو مبّٓالً مع‪ ّ٤‬مختزملؿمل‪ ّٙ‬مصعملّٕة معلؿعملػملهمل مظغمل‪ ّ٢‬محمِّّٓد مع‪ّ٤‬م‬ ‫احملِّّٓداتمدؽملؽملمملضّ٘مصمؿمل‪ّٝ‬ماحملِّّٓدات ميفماىّٓولماظؿمملظ‪ّ٨‬مبرملغمل‪ّ٢‬مؼ‪ّ٦‬ضّّمسؼمل‪ّ٢‬مط‪ّ٢‬معؽملؾملمملمبلؾمل‪ّ٦‬ظهملموم‬ ‫ػّٔامأوالًمومط‪ّ٨‬مؼغمل‪ّ٦‬نمظّٓؼؽملمملمعّٕج‪ّٝ‬مدّٕؼ‪ّٝ‬مىؼملؿمل‪ّٝ‬ماحملِّّٓداتم(ٌ‪ّ٤‬مزمنملماظلّٕسهمل)مثمملغؿملمملً‪ :‬م‬ ‫احملّٓدم‪ Selector‬م‬

‫اظ‪ّ٦‬ص‪ّٟ‬م‪ Description‬م‬

‫*‬

‫ؼضملينمصمؿمل‪ّٝ‬ماظضملؽملمملصّٕماٌ‪ّ٦‬ج‪ّ٦‬دةميفماٌلؿؽملّٓ م‬

‫‪T‬‬

‫ؼضملين مصمؿمل‪ ّٝ‬مسؽملمملصّٕ ماظ‪ّ٦‬د‪ ّ٣‬م‪ T‬ميف ماٌلؿؽملّٓ م(عـالً م‪ p‬مؼضملينم‬ ‫صمؿمل‪ّٝ‬مسؽملمملصّٕماظ‪ّ٦‬د‪ّ٦‬مم‪ p‬ماظيتميفماظزملظملقهملموم‪ a‬مؼضملينمصمؿمل‪ّٝ‬م‬ ‫سؽملمملصّٕماظ‪ّ٦‬د‪ّ٦‬مم‪a‬موم‪img‬مؼضملينمصمؿمل‪ّٝ‬مسؽملمملصّٕماظ‪ّ٦‬د‪ّ٦‬مم‪img‬م‬ ‫ومػغملّٔا) م‬

‫‪.C‬‬

‫ؼضملين مصمؿمل‪ ّٝ‬مسؽملمملصّٕ ماظ‪ّ٦‬د‪ّ٦‬م ماظيت متؽملؿؼمل‪ ّ٨‬مظزمل‪ ّٟ‬ماِّمنمملط م‪C‬م‬

‫‪21‬‬

‫(اظ‪ّ٦‬د‪ّ٦‬ممذاتماظ‪ّ٦‬اصظملهملم”‪class=“C‬مأؼمملًمطمملنمغ‪ّ٦‬سؾملممل) م‬ ‫م‪.C1 .C2 .C3 … .Cn‬‬

‫ؼضملين مصمؿمل‪ ّٝ‬ماظ‪ّ٦‬د‪ّ٦‬م ماظيت متؽملؿؼمل‪ ّ٨‬مظزملظمل‪ّ٦‬ف ماِّمنمملطم‬ ‫أٌّط‪ّ٦‬رة‪C1‬موم‪C2‬موم‪C3‬موم‪Cn‬مومط‪ّ٢‬معمملممتمذطّٕه م‬

‫‪#X‬‬

‫ؼضملين مصمؿمل‪ّٝ‬مسؽملمملصّٕماظ‪ّ٦‬د‪ّ٦‬ممذاتماٌضملّٕٓف م‪ X‬م(اظ‪ّ٦‬د‪ّ٦‬ممذاتم‬ ‫اظ‪ّ٦‬اصظملهملم”‪id=“X‬مأؼمملًمطمملنمغ‪ّ٦‬سؾملممل) م‬

‫‪T F‬‬

‫ؼضملين مصمؿمل‪ ّٝ‬مسؽملمملصّٕ ماظ‪ّ٦‬د‪ّ٦‬م م‪ F‬ماٌ‪ّ٦‬ج‪ّ٦‬دة مضؼمل‪ ّ٤‬مسؽملمملصّٕم‬ ‫ود‪ّ٦‬مم‪T‬مبرملغمل‪ّ٢‬معؾمملذّٕمومشرلمعؾمملذّٕ م‬

‫‪T>F‬‬

‫ؼضملين مصمؿمل‪ ّٝ‬مسؽملمملصّٕ ماظ‪ّ٦‬د‪ّ٦‬م م‪ F‬ماٌ‪ّ٦‬ج‪ّ٦‬دة مبرملغمل‪ ّ٢‬معؾمملذّٕم‬ ‫ضؼمل‪ّ٤‬مسؽملمملصّٕمود‪ّ٦‬مم‪ T‬م‬ ‫(سؽملّٓعممل مغغملؿنمل معـالً م‪ div>a‬مصكملغؽملممل مغضملين مصمؿمل‪ ّٝ‬ماظّٕواب‪ّٛ‬م‬ ‫اٌ‪ّ٦‬ج‪ّ٦‬دة مضؼمل‪ ّ٤‬م‪ div‬مبرملغمل‪ ّ٢‬معؾمملذّٕ مصػمل‪ ّ٦‬مطمملن مػّٔا ماظذملم‬ ‫‪ div‬مذات‪ ّ٥‬مزمؿ‪ّ٦‬ي مسػمل‪ ّ٧‬مجّٓول مو مأحّٓ مخالؼممل مػّٔام‬ ‫اىّٓول مهؿ‪ّ٦‬ي مسػمل‪ ّ٧‬مراب‪ ّٛ‬مصػمل‪ ّ٤‬مؼغمل‪ّ٦‬ن مػّٔا ماِّخرل مع‪ّ٤‬م‬ ‫ضؼمل‪ ّ٤‬ماظّٕواب‪ ّٛ‬ماظيت مؼضملؿملّٓػممل ماحملّٓد م‪ ,‬مسؽملّٓئٍّٔ مميغملؽملؽملممل مأنم‬ ‫غلؿكّٓم ماظزملؿملطملهمل ماظلمملبعملهمل م‪ div a‬مظؿقّٓؼّٓ مط‪ ّ٢‬ماظّٕواب‪ّٛ‬م‬ ‫اظيتمضؼمل‪ّ٤‬مود‪ّ٦‬مم‪div‬مبرملغمل‪ّ٢‬معؾمملذّٕمأومشرلمعؾمملذّٕ)‬

‫‪T+F‬‬

‫ؼضملين مصمؿمل‪ ّٝ‬مسؽملمملصّٕ ماظ‪ّ٦‬د‪ ّ٣‬م‪ F‬ماجملمملورة مظضملؽملمملصّٕ ماظ‪ّ٦‬د‪ ّ٣‬م‪T‬م‬ ‫(ؼعملزملّٓ مبمملظضملؽملمملصّٕ ماجملمملورة ماظضملؽملمملصّٕ ماِّبؽملمملء مع‪ ّ٤‬مغظملّٗم‬ ‫اٌلؿ‪ّ٦‬ى) م‬

‫‪22‬‬

‫(‪T:has)F‬‬

‫ؼضملين مصمؿمل‪ ّٝ‬مسؽملمملصّٕ ماظ‪ّ٦‬د‪ ّ٣‬م‪ T‬ماظيت مهؿ‪ّ٦‬ي مداخػملؾملممل مسؽملزملّٕاًم‬ ‫ابؽملمملً مواحّٓاً مسػمل‪ ّ٧‬ماِّض‪ ّ٢‬مع‪ ّ٤‬ماظ‪ّ٦‬د‪ ّ٣‬م‪ F‬م(عـالًم‬ ‫)‪ Table:has(a‬مؼضملين مأي مجّٓول مزمؿ‪ّ٦‬ي مرابشملمملًم‬ ‫واحّٓاًمأومأطـّٕمع‪ّ٤‬مراب‪ّٛ‬مضؼمل‪ّ٤‬محمؿ‪ّ٦‬ؼمملت‪ )ّ٥‬م‬

‫ػ‪A‬ؼ‪T‬‬

‫ؼضملين مصمؿمل‪ّٝ‬مسؽملمملصّٕماظ‪ّ٦‬د‪ّ٣‬م‪ T‬ماظيتمتضملّٕٓفماظ‪ّ٦‬اصظملهمل ‪ A‬معؾملؼملمملم‬ ‫طمملغوملمضؿملؼملهملماظ‪ّ٦‬اصظملهملم‪A‬م(عـالًمتلؿشملؿمل‪ّٝ‬مأنمتغملؿنملماحملّٓد‬ ‫]‪ a[href‬مظؿضملؿملّٓ مصمؿمل‪ ّٝ‬ماظّٕواب‪ ّٛ‬ماظيت مهؿ‪ّ٦‬ي مسػمل‪ّ٧‬م‬ ‫واصظملهملم‪href‬معؾملؼملمملمطمملغوملمضؿملؼملؿؾملممل) م‬

‫ػ‪A=value‬ؼ‪T‬‬

‫ؼضملين مصمؿمل‪ّٝ‬مسؽملمملصّٕماظ‪ّ٦‬د‪ّ٣‬م‪ T‬ماظيتمتضملّٕٓفماظ‪ّ٦‬اصظملهمل م‪ A‬مذّٕطم‬ ‫أن متغمل‪ّ٦‬ن مضؿملؼملهمل مػّٔه ماظ‪ّ٦‬اصظملهمل مػ‪ ّ٨‬ماظعملؿملؼملهمل م‪ value‬م(عـالًم‬ ‫تلؿشملؿمل‪ّٝ‬مأنمتغملؿنملماحملّٓدم]‪a[target=_blank‬م‬ ‫ظؿضملؿملّٓمصمؿمل‪ّٝ‬ماظّٕواب‪ّٛ‬ماظيتمتظملؿّّميفمغمملصّٔةمػّٓفمجّٓؼّٓة) م‬

‫ػ‪A^=value‬ؼ‪T‬‬

‫ؼضملين مصمؿمل‪ّٝ‬مسؽملمملصّٕماظ‪ّ٦‬د‪ّ٣‬م‪ T‬ماظيتمتضملّٕٓفماظ‪ّ٦‬اصظملهمل م‪ A‬مذّٕطم‬ ‫أن متغمل‪ّ٦‬ن مبّٓاؼهمل ماظعملؿملؼملهمل ماظيت مهؿ‪ّ٦‬ؼؾملممل مػّٔه ماظ‪ّ٦‬اصظملهمل مػ‪ّ٨‬م‬ ‫اظعملؿملؼملهملم‪value‬م(مصؼملـالًمظ‪ّ٦‬مأردغمملمهّٓؼّٓمطمملصهملماظّٕواب‪ّٛ‬ماظيتم‬ ‫تؽملعملػمل‪ّ١‬‬

‫مٌ‪ّ٦‬ض‪ّٝ‬‬

‫مؼؾّٓأ‬

‫محبّٕيف‬

‫م‪de‬‬

‫مصمملحملّٓدم‬

‫]‪a[href^=www.de‬مؼػمليبمحمملجؿؽملمملممتمملعمملً) م‬

‫ػ‪A$=value‬ؼ‪T‬‬

‫ؼضملين مصمؿمل‪ّٝ‬مسؽملمملصّٕماظ‪ّ٦‬د‪ّ٣‬م‪ T‬ماظيتمتضملّٕٓفماظ‪ّ٦‬اصظملهمل م‪ A‬مذّٕطم‬ ‫أن متغمل‪ّ٦‬ن مغؾملمملؼهمل ماظعملؿملؼملهمل ماظيت مهؿ‪ّ٦‬ؼؾملممل مػّٔه ماظ‪ّ٦‬اصظملهمل مػ‪ّ٨‬م‬ ‫اظعملؿملؼملهمل م‪ value‬م(احملّٓد]‪ a[href$=.mp3‬مسػمل‪ّ٧‬م‬ ‫دؾؿمل‪ ّ٢‬ماٌـمملل مؼضملين مصمؿمل‪ ّٝ‬ماظّٕواب‪ ّٛ‬ماظيت مترملرل مإشم معػملظملمملتم‬

‫‪23‬‬

‫ع‪ّ٤‬ممن‪ّٛ‬م‪ )mp3‬م‬

‫ػ‪A*=value‬ؼ‪T‬‬

‫ؼضملين مصمؿمل‪ّٝ‬مسؽملمملصّٕماظ‪ّ٦‬د‪ّ٣‬م‪ T‬ماظيتمتضملّٕٓفماظ‪ّ٦‬اصظملهمل م‪ A‬مذّٕطم‬ ‫أنمتغمل‪ّ٦‬نماظعملؿملؼملهملماظيتمهؿ‪ّ٦‬ؼؾملمملمػّٔهماظ‪ّ٦‬اصظملهملمتؿسملؼمل‪ّ٤‬ماظعملؿملؼملهملم‬

‫‪ 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‬مسػمل‪ّ٧‬م‬

‫‪24‬‬

‫علؿ‪ّ٦‬ىماحملّٓد م‬

‫‪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‬مو مػّٔهماظّٕواب‪ّٛ‬مػ‪ ّ٨‬ماظّٕاب‪ّٛ‬م‬ ‫اظـمملظىملموماظلمملدسموماظؿمملد‪ّٝ‬موماظـمملغ‪ّ٨‬مسرملّٕموماًمملعّٗمسرملّٕم‪...‬م‬

‫‪25‬‬

‫ومػغملّٔا) م‬

‫‪selector:nth-‬‬

‫ؼضملين م‪ Y‬مسؽملزملّٕاً مابؽملمملً مبضملّٓ مط‪ ّ٢‬م‪ X‬مأبؽملمملء م(عـالً ميف محمملل مط‪ّ٦‬نم‬

‫(‪child)Xn+Y‬‬

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

‫اظؽملؾملمملئ‪a:nth-child(3n+2)ّ٨‬‬

‫‪ div‬مو مػّٔام‬

‫ؼضملين مهّٓؼّٓمرابشملني مبضملّٓمط‪ّ٢‬مثالثهملمرواب‪ّٛ‬مع‪ّ٤‬مأبؽملمملءم‪div‬م‬ ‫ممممل مؼضملين ماظّٕواب‪ ّٛ‬ماظّٕاب‪ ّٝ‬مو ماًمملعّٗ(رابشملني مبضملّٓ ماظّٕاب‪ّٛ‬م‬ ‫اظـمملظىمل) موماظلمملب‪ّٝ‬موماظـمملع‪ ّ٤‬م(رابشملنيمبضملّٓماظّٕاب‪ّٛ‬ماظلمملدس) موم‬ ‫اظضملمملذّٕ مو مايمملدي مسرملّٕ م(رابشملني مبضملّٓ ماظّٕاب‪ ّٛ‬ماظؿمملد‪ )ّٝ‬م‪ ....‬موم‬ ‫ػغملّٔا) م‬

‫‪selector:even‬‬

‫ؼضملين ماظضملؽملمملصّٕ مذات ماِّرضمملم ماظّٖوجؿملهمل ماٌشملمملبعملهمل مظػملؼملقّٓدم‬ ‫‪selector‬مسػمل‪ّ٧‬معلؿ‪ّ٦‬ىماٌلؿؽملّٓ م‬

‫‪selector:odd‬‬

‫ؼضملين ماظضملؽملمملصّٕ مذات ماِّرضمملم ماظظملّٕدؼهمل ماٌشملمملبعملهمل مظػملؼملقّٓدم‬ ‫‪selector‬مسػمل‪ّ٧‬معلؿ‪ّ٦‬ىماٌلؿؽملّٓ م‬

‫(‪selector:eq)n‬‬

‫ؼضملين ماظضملؽملزملّٕ مذو ماظذلتؿملنمل م‪ n‬ماٌشملمملب‪ ّ٠‬مظػملؼملقّٓدم‬ ‫‪selector‬مسػمل‪ّ٧‬معلؿ‪ّ٦‬ىماٌلؿؽملّٓ م‬

‫(‪selector:qt)n‬‬

‫ؼضملين ماظضملؽملزملّٕ مذو ماظذلتؿملنمل م‪ n‬ماٌشملمملب‪ ّ٠‬مظػملؼملقّٓدم‬ ‫‪ selector‬مو مصمؿمل‪ ّٝ‬ماظضملؽملمملصّٕ ماٌشملمملبعملهمل ماظيت متػملؿمل‪ ّ٥‬مسػمل‪ّ٧‬م‬ ‫علؿ‪ّ٦‬ىماٌلؿؽملّٓ م‬

‫(‪selector:lt)n‬‬

‫ؼضملين ماظضملؽملزملّٕ مذو ماظذلتؿملنمل م‪ n‬ماٌشملمملب‪ ّ٠‬مظػملؼملقّٓدم‬ ‫‪ selector‬مومصمؿمل‪ّٝ‬ماظضملؽملمملصّٕماٌشملمملبعملهملماظيتمتلؾعمل‪ّ٥‬مسػمل‪ّ٧‬م‬

‫‪26‬‬

‫علؿ‪ّ٦‬ىماٌلؿؽملّٓ م‬ ‫‪: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‬م‬

‫‪27‬‬

‫‪: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‬م‬

‫‪28‬‬

‫‪:submit‬‬

‫ؼضملينمصمؿمل‪ّٝ‬مأزرارماإلردمملل م‬

‫‪:text‬‬

‫ؼضملين مصمؿمل‪ ّٝ‬معّٕبضملمملت مإدخمملل ماظؽملزمل‪ّ٦‬ص مو مػ‪ ّ٦‬معغملمملصلملم‬

‫ظػملؼملقّٓدم]‪input[type=text‬‬ ‫‪:visible‬‬

‫ؼضملينمصمؿمل‪ّٝ‬ماظضملؽملمملصّٕماظصملمملػّٕة م‬

‫م‪Selector1,Selector2,‬‬ ‫‪…,Selectorn‬‬

‫ؼضملين ماجؿؼملمملع مصمؿمل‪ ّٝ‬مسؽملمملصّٕ ماظ‪ّ٦‬د‪ّ٦‬م ماظيت متضملؿملّٓػمملم‬ ‫احملِّّٓدات مأٌّط‪ّ٦‬رة مو مؼعملزملّٓ مبمملحملّٓد مػؽملممل مط‪ ّ٢‬معممل مػ‪ّ٦‬م‬ ‫عّٔط‪ّ٦‬رميفمػّٔاماىّٓولمومػّٔهماظعملمملسّٓةمتضملؿدلمعظملؿملّٓةً مجّٓاًم‬ ‫يف محمملل ماظّٕشؾهمل مبؿقّٓؼّٓ مأجّٖاء مطـرلة مع‪ ّ٤‬ماظزملظملقهمل مالم‬ ‫ؼلؿشملؿمل‪ّٝ‬محمّٓدمواحّٓمأنمؼعمل‪ّ٦‬ممبؿقّٓؼّٓػممل م‬

‫م‬ ‫ِّغينمأزس‪ّ٣‬مأن مػّٔاماظغملؿمملبمػ‪ّ٦‬مأوٖلمطؿمملب مسّٕب‪ ّ٨‬مؼؽملمملضّ٘معغملؿؾهمل م‪ jQuery‬مصؿملفّٓر مب‪ ّ٨‬ماظؿؽمل‪ّ٦‬ؼ‪ّ٥‬م‬ ‫إشم مأن ماٌغملؿؾهمل مال متّٖال ميف مإصّٓارػممل م‪ 0.3.2‬محؿ‪ ّ٧‬متمملرؼّْ متفملظؿملظمل‪ ّ٥‬مو مػؽملمملظ‪ ّ١‬ماٌّٖؼّٓ مع‪ّ٤‬م‬ ‫احملِّّٓدات ماىّٓؼّٓة ماظيت متسملمملف مإشم مط‪ ّ٢‬مإصّٓار مجّٓؼّٓ مع‪ ّ٤‬مإصّٓارات ماٌغملؿؾهمل ماظّٕائضملهملم‬ ‫‪ jQuery‬مومميغملؽمل‪ّ١‬معؿمملبضملهملمط‪ّ٢‬مجّٓؼّٓ مس‪ّ٤‬ماحملِّّٓدات مبرملغمل‪ّ٢‬مخمملصمومس‪ّ٤‬ماٌغملؿؾهملمبرملغمل‪ّ٢‬مسمملمم‬ ‫سدلماظّٓخ‪ّ٦‬لمإشممع‪ّ٦‬ضضملؾملمملماإلظغملذلوغ‪ّ٨‬مم‪www.jquery.com‬م‪ .‬م‬

‫‪29‬‬

‫ت‪ّ٦‬ظؿملّٓمحمؿ‪ّ٦‬ؼمملتم‪HTML‬مجّٓؼّٓةم‪ :‬م‬ ‫يف مطـرل مع‪ ّ٤‬متشملؾؿملعملمملت ماظذمل م‪ Web‬ماظطملؽملؿملهمل م‪ Rich Internet Applications‬مؼؿ‪ّ٣‬م‬ ‫ت‪ّ٦‬ظؿملّٓمحمؿ‪ّ٦‬ؼمملتم‪ HTML‬مجّٓؼّٓةمإضمملصؿملهملمظػملزملظملقهمل مبضملّٓمسّٕضؾملمملمصؼملـالًميفمعّٕطّٖمرص‪ّٝ‬ماٌػملظملمملتماظرملؾملرلم‬ ‫‪ www.multiupload.com‬ماظصملمملػّٕميفماظزمل‪ّ٦‬رةمؼلؼملّّمظ‪ّ١‬مبّٕص‪ّٝ‬معػمل‪ّٟ‬مواحّٓمطقّٓمأضزمل‪ّ٧‬م‬ ‫اصذلاضؿملمملً مو ميف محمملل مايمملجهمل مظّٕص‪ّٝ‬م‬ ‫اٌّٖؼّٓ مع‪ ّ٤‬ماٌػملظملمملت مميغملؽمل‪ ّ١‬مبؽملعملّٕةم‬

‫واحّٓة مسػمل‪ ّ٧‬ماظّٖر م ‪one more‬‬ ‫‪ file‬مأن متسملؿمل‪ ّٟ‬معػملظملمملً مجّٓؼّٓاً مإشمم‬ ‫عّٕبضملمملت مهّٓؼّٓ ماٌػملظملمملت ميف مغظملّٗم‬ ‫اظزملظملقهمل مدون مايمملجهمل مإشم مإسمملدةم‬ ‫ت‪ّ٦‬ظؿملّٓماظزملظملقهملم‪,‬مومظضمل‪ّٖ٢‬ماظزملٗ‪ّ٦‬رَماىمملغؾؿملٖهملم‬ ‫ت‪ّ٦‬ضِّّّماظظملغملّٕةم‪ .‬م‬ ‫حؿملىمل مؼصملؾملّٕ ميف ماظزملٗ‪ّ٦‬رة ماظـمملغؿملهمل مطؿمل‪ّٟ‬م‬ ‫متومل مإضمملصهمل معّٕب‪ ّٝ‬مجّٓؼّٓ مظّٕص‪ّٝ‬م‬ ‫اٌػملظملمملت مو مظ‪ ّ٦‬مغعملّٕغممل معّٕة مأخّٕى مسػمل‪ّ٧‬م‬ ‫اظّٖرم‪one more file‬مِّضؿمل‪ّٟ‬م‬ ‫عّٕب‪ ّٝ‬مجّٓؼّٓ مآخّٕمومػغملّٔا مم‪ ,‬مومبمملظشملؾ‪ّٝ‬م‬ ‫المداس‪ َّ٨‬مإلخؾمملركمأنمػّٔامزمّٓثميفم‬ ‫رّٕفماظضملؼملؿمل‪ّ٢‬مدونمأيمإسمملدةمهؼملؿمل‪ّ٢‬م‬ ‫ظػملزملظملقهملمومدون مإردممللمأي مرػملنملمظػملكمملدم م‪ Server‬م‪,‬مػّٔامؼضملؿدلمعـمملالًمذمملئضملمملًمجّٓاً مسػمل‪ّ٧‬مإضمملصهملم‬ ‫حمؿ‪ّ٦‬ؼمملت م‪ HTML‬مجّٓؼّٓة مظػملزملظملقهمل مو مت‪ّ٦‬صّٕ ماٌغملؿؾهمل ماظّٕائضملهمل م‪ jQuery‬مػّٔه ماإلعغملمملغؿملهمل مبؾلمملرهملم‬

‫‪30‬‬

‫ذّٓؼّٓة مطؼملممل مط‪ ّ٢‬مذ‪ّ٨‬ء مصؿملؾملممل م‪ ,‬مصؿملغملظمل‪ ّ٨‬مإلضمملصهمل محمؿ‪ّ٦‬ى م‪ HTML‬مجّٓؼّٓ مظػملزملظملقهمل مأن متؿؾ‪ ّٝ‬ماظزملؿملطملهملم‬ ‫اظؿمملظؿملهمل‪ :‬م‬ ‫(‪$)HTML‬‬

‫حؿملىملمأنم‪ HTML‬مػؽملمملمتضملينماحملؿ‪ّ٦‬ىماىّٓؼّٓماظّٔي مغّٕؼّٓمت‪ّ٦‬ظؿملّٓهمعغملؿ‪ّ٦‬بمملًمبمملدؿكّٓاممظطملهملم‪HTML‬م‬ ‫اظضملمملدؼهمل مو مطؼملممل متالح‪ ّٜ‬مصمملظزملؿملطملهمل مػ‪ ّ٨‬مذاتؾملممل ماٌلؿكّٓعهمل ميف ماحملِّّٓدات م‪ ,‬مو مإنٖ مطؿمملبهملم‬ ‫(‟>‪$)„‪)„

‟).append(„#id‬حمؿ‪ّ٦‬ىمج‪ّ٨‬مط‪ّ٦‬ؼّٕيمجّٓؼّٓ>‪$(„
‫حؿملىملمتعمل‪ّ٦‬ممػّٔهماظؿضملػملؿملؼملهملمبكملضمملصهملماحملؿ‪ّ٦‬ىماىّٓؼّٓماظّٔيموظّٓت‪ّ٥‬ميفمآخّٕماٌؽملشملعملهملماظيتممتؿػمل‪ّ١‬م‬ ‫اٌضملّٕفم‪ id‬ممتمملعمملًمومػّٔهمػ‪ّ٨‬موزؿملظملهملماظّٓاظهملم‪ append‬مإحّٓىمدوالماٌغملؿؾهملماٌكزملزملهملمهلّٔام‬ ‫اٌ‪ّ٦‬ض‪ّ٦‬عموماظيتمدؽملؿضملّٕٓفمسػمل‪ّ٧‬مسؼملػملؾملمملمومسؼمل‪ّ٢‬مأخ‪ّ٦‬اتؾملمملمبمملظؿظملزملؿمل‪ّ٢‬ميفماظّٓضمملئ‪ّ٠‬ماظؿمملظؿملهملم‪ .‬م‬

‫‪31‬‬

‫م‬ ‫م‬ ‫م‬

‫م‬ ‫ع‪ّ٤‬ماظّٓضؿملعملهملم‪32‬مإشمماظّٓضؿملعملهملم‪57‬م‪ :‬م‬

‫اظّٖٓوالم م‬ ‫‪Functions‬‬ ‫م‬

‫‪32‬‬

‫اظّٖٓوالمم‪ :Functions‬م‬ ‫و ماآلن م‪ ..‬مبضملّٓ متشملؾؿمل‪ ّ٠‬مأحّٓ ماحملِّّٓدات مبمملدؿكّٓام ماظشملّٕؼعملهمل ماظيت متضملػملّؼملؽملمملػممل مضؾ‪ ّ٢‬مضػملؿمل‪ ّ٢‬مو مإسمملدت‪ّ٥‬م‬ ‫جملؼمل‪ّ٦‬سهملمع‪ّ٤‬مسؽملمملصّٕمصظملقؿؽملمملمأومبضملّٓمت‪ّ٦‬ظؿملّٓ مػّٔهماظضملؽملمملصّٕ مصكملغٓؽملمملمغزملؾّّمجمملػّٖؼ‪ّ٤‬مظؿشملؾؿمل‪ّ٠‬مذ‪ّ٨‬ءمع‪ّ٤‬م‬ ‫دوالم‪ jQuery‬مأومحّٕطمملتؾملمملمسػمل‪ّ٧‬مػّٔاماحملؿ‪ّ٦‬ى م(‪ )jQuery Wrapped Set‬مظؽملضملشمل‪ّ٨‬م‬ ‫ايؿملمملةمظزملظملقؿؽملمملمومػّٔامعمملمدؽملؽملمملضرمل‪ّ٥‬ميفمػّٔه ماظّٓضمملئ‪ ّ٠‬م‪,‬مومدؽملعمل‪ّ٦‬ممتلؾملؿملالًمبؿعمللؿمل‪ّ٣‬مػّٔهماظّٓوالمإشمم‬ ‫جمؼمل‪ّ٦‬سمملتمحلنملماظ‪ّ٦‬زؿملظملهملماًمملصٓهملمبغمل‪ّ٢‬دملمعؽملؾملممل‪ .‬م‬

‫دوالماظؿضملمملع‪ّ٢‬مع‪ّٝ‬مواصظملمملتماظ‪ّ٦‬د‪ّ٦‬ممم‪Attributes‬مم‪ :‬م‬ ‫ظ‪ّ٦‬مغصملّٕغمملمظػمل‪ّ٦‬د‪ّ٣‬ماظؿمملظ‪ّ٨‬مسػمل‪ّ٧‬مدؾؿمل‪ّ٢‬ماٌـممللم‪ :‬م‬ ‫‪”‪one” width=”40” height=”20‬‬

‫ظضملّٕصؽملمملمعؾمملذّٕةًمأغٓؾملمملمص‪ّ٦‬رةممتؿػمل‪ّ١‬مواصظملمملتٍ معضملؿملٓؽملهملم‪ Attributes‬معـ‪ّ٢‬ماالرتظملمملعم‪ height‬موم‬ ‫اظضملّٕضم‪ width‬مموماظضملؽمل‪ّ٦‬انم‪ title‬موماظؽملٓ‪ّٙ‬ماظؾّٓؼ‪ّ٢‬م‪ alt‬مومعزملّٓرماظزمل‪ّ٦‬رةم‪ src‬مومػّٔامعمملم‬ ‫ميـػمل‪ّ٥‬معلؿضملّٕضماظذملم‪ Web‬مبضملعملّٓةم‪ node‬م مع‪ّ٤‬مسعملّٓمذفّٕةمطمملئؽملمملتماٌلؿؽملّٓم‪,‬هلّٔهماظضملعملّٓة مجمؼمل‪ّ٦‬سهملم‬ ‫ع‪ ّ٤‬ماًزملمملئ‪ ّٙ‬م‪ Properties‬متعملمملب‪ ّ٢‬مط‪ ّ٢‬مخمملصؿملهمل معؽملؾملممل مواصظملهملً مع‪ ّ٤‬مواصظملمملت ماظ‪ّ٦‬د‪ ّ٣‬م(بػمل‪ ّ٧‬مؼمملم‬ ‫صّٓؼعمل‪ّ٨‬ماٌدلعيملم‪..‬مسعملّٓمذفّٕةماٌلؿؽملّٓمترملؾ‪ّ٥‬ماظغملمملئؽملمملتميفمظطملمملتماظدلجمهملمشّٕضؿملهملماظؿ‪ّ٦‬ج‪)ّ٥‬م‪ .‬م‬ ‫عػملق‪ّ٦‬زهملم‪ :‬مبضملّٓمإغرملمملء مذفّٕةمطمملئؽملمملتماٌلؿؽملّٓمصكملنمأيمتطملؿملرلميفمخزملمملئ‪ّٙ‬مإحّٓىماظضملعملّٓمدؿملؽملضملغملّٗم‬ ‫عؾمملذّٕةًمسػمل‪ّ٧‬مضؿملؼملهملماظ‪ّ٦‬اصظملهملماٌعملمملبػملهملمظػمل‪ّ٦‬د‪ّ٣‬ماٌعملمملب‪ّ٢‬ميفماظزملظملقهملمومػّٔامتظمللرل مآخّٕ مٌؽمل‪ّٝ‬ماٌغملؿؾهملم‬ ‫إؼٓ مملغمملمع‪ّ٤‬متؽملظملؿملّٔمأواعّٕػمملمضؾ‪ّ٢‬ماطؿؼملممللمبؽملمملءمػّٔهماظرملفّٕة‪ .‬م‬

‫‪33‬‬

‫تلؼملّّمظؽملمملمعغملؿؾهملم‪ jQuery‬مبمملظؿضملمملع‪ّ٢‬مع‪ّٝ‬مػّٔهماظ‪ّ٦‬اصظملمملتمأوماًزملمملئ‪ّٙ‬محعملؿملعملهملًمبمملدؿكّٓاممرّٕؼعملهملم‬ ‫بلؿملشملهمل مجّٓاًمصؿملغملظمل‪ّ٨‬مالدؿضملمملدةمضؿملؼملهملمإحّٓىمػّٔهماظ‪ّ٦‬اصظملمملتمأن مغلؿضملؼمل‪ّ٢‬ماظّٓاظّهمل م‪ attr‬مبمملظرملغمل‪ّ٢‬م‬ ‫اظؿمملظ‪ :ّ٨‬م‬ ‫;)‟‪$(„#id‟).attr(„attributeName‬‬

‫ظؽمللؿضملؿملّٓمضؿملؼملهملماظ‪ّ٦‬اصظملهملم‪ attributeName‬ماًمملصهملمبمملظ‪ّ٦‬د‪ّ٣‬مذوماٌضملّٕفم‪ id‬مومؼغملظمل‪ّ٨‬مإلدؽملمملدم‬ ‫ضؿملؼملهملمإلحّٓىمػّٔهماظ‪ّ٦‬اصظملمملتمأنمغلؿضملؼمل‪ّ٢‬ماظّٓاظّهملم‪attr‬مبمملظرملغمل‪ّ٢‬ماظؿمملظ‪ :ّ٨‬م‬ ‫;)‟‪$(„#id‟).attr(„attributeName‟ , „value‬‬

‫ظؽملفضمل‪ ّ٢‬مضؿملؼملهمل ماظ‪ّ٦‬اصظملهمل م‪ attributeName‬ماًمملصهمل مبمملظ‪ّ٦‬د‪ ّ٣‬مذو ماٌضملّٕف م‪ id‬معلمملوؼهملً مظػملعملؿملؼملهملم‬ ‫‪ .value‬م‬ ‫أسؿعملّٓمأغ‪ّ١‬مالحصملوملمأغينمادؿضملؼملػملوملماحملّٓدم‪ #id‬ماظّٔيمؼضملؿملّٓمسؽملزملّٕاًمواحّٓاًميفماظضملمملدةم(إذامملم‬ ‫تسمل‪ّٝ‬معضملّٕصمملتمعغملّٕٓرةً ميفمصظملقؿ‪)ّ١‬مث‪ّ٣‬مضؼملوملمبؿطملؿملرلمإحّٓىمواصظملمملتمػّٔاماظضملؽملزملّٕموماظلٓقملالماظّٔيم‬ ‫ؼشملّٕحمغظملل‪ّ٥‬ماآلنمػ‪ّ٢‬مدؿؽملفّّمػّٔهماظؿضملػملؿملؼملهملميفمحممللماظؿضملمملع‪ّ٢‬مع‪ّٝ‬محمّٓٓداتمتضملؿملّٓمجمؼمل‪ّ٦‬سهملمع‪ّ٤‬م‬ ‫اظضملؽملمملصّٕم؟م م‬ ‫ت‪ّ٦‬صخملّٕماٌغملؿؾهملمج‪ّ٦‬ابمملًمهلّٔاماظلقملالمسدلمتفملعنيمرّٕؼعملهملمظػملؿضملمملع‪ّ٢‬مع‪ّٝ‬مواصظملهملمعمملمجملؼمل‪ّ٦‬سهملمع‪ّ٤‬ماظضملؽملمملصّٕم‬ ‫س‪ ّ٤‬مرّٕؼ‪ ّ٠‬ماظّٓوران مسػمل‪ ّ٧‬مصم ؿمل‪ ّٝ‬متػمل‪ ّ١‬ماظضملؽملمملصّٕ م‪ ,‬مصؿملغملظمل‪ ّ٨‬مظعملّٕاءة مواصظملهمل معضملؿملؽملهمل مىؼملؿمل‪ ّٝ‬مسؽملمملصّٕم‬ ‫جمؼمل‪ّ٦‬سهملمعضملؿملؽملهملمأنمتلؿكّٓمماظزملؿملطملهملماظؿمملظؿملهملم‪ :‬م‬ ‫{)‪function(n‬م(‪$(„selector‟).each‬‬ ‫;)‟‪$(this).attr(„attributeName‬‬ ‫;})م‬

‫م‬

‫‪34‬‬

‫ومؼغملظمل‪ّ٨‬مإلدؽملمملدم ضؿملؼملهملمواصظملهملمعضملؿملؽملهملمىؼملؿمل‪ّٝ‬مسؽملمملصّٕمجمؼمل‪ّ٦‬سهملمعضملؿملؽملهملمأنمتلؿكّٓمماظزملؿملطملهملماظؿمملظؿملهملم‪:‬م م‬ ‫{)‪$(„selector‟).each(function(n‬‬ ‫;)‟‪$(this).attr(„attributeName‟ , „value‬‬ ‫;})م‬

‫تّٔطّّٕم‪ :‬ميفمػّٔهمايمملظهملمصكملنٓ ماظغملػملؼملهملماحملف‪ّ٦‬زة م‪ this‬مترملرلمإشمماظضملؽملزملّٕمايمملظ‪ّ٨‬مأثؽملمملءماظّٓورانم‬ ‫‪ .each‬م‬ ‫و مٌ‪ ّ٤‬مال مزمنمل ماظّٓوران م‪ each‬مو مال مؼّٕؼّٓ مأن مؼضمل‪ّ٦‬د مظؿملؿّٔطّٕ مايػملعملمملت ماظؿغملّٕارؼهمل مت‪ّ٦‬صّٕ ماٌغملؿؾهملم‬ ‫رّٕؼعملهملمأخّٕى مأدؾمل‪ ّ٢‬م إلدؽملمملدمضؿملؼملهملمواصظملهملمأومجمؼمل‪ّ٦‬سهملمع‪ّ٤‬مضؿمل‪ّ٣‬ماظ‪ّ٦‬اصظملمملتمىؼملؿمل‪ّٝ‬مسؽملمملصّٕماجملؼمل‪ّ٦‬سهملم‬ ‫اظيتمؼضملؿملّٓػمملماحملّٓدمس‪ّ٤‬مرّٕؼ‪ّ٠‬مادؿكّٓامماظزملؿملطملهملماظؿمملظؿملهمل‪ :‬م‬ ‫;)‪$(„selector‟).attr(JSON‬‬

‫حؿملىمل مأن م‪ JSON‬مػ‪ ّ٦‬مطمملئ‪ ّ٤‬مميـ‪ ّ٢‬متػمل‪ ّ١‬ماظ‪ّ٦‬اصظملمملت مو مع‪ ّ٤‬مال مؼضملّٕف م‪ JSON‬مظ‪ ّ٥‬مأن مؼؽملؿعمل‪ ّ٢‬مإشمم‬ ‫اٌػملق‪ّ٦‬زهملماظؿمملظؿملهملمث‪ّ٣‬مؼضمل‪ّ٦‬د مأو مبكملعغملمملغ‪ ّ٥‬مأن مؼؽملصملّٕمعضمل‪ّ٨‬مظػملؼملـممللماظؿمملظ‪ّ٨‬مظضملػملّ‪ّ٥‬مؼغملؿرمل‪ّٟ‬مأغؾملمملمجمّٕدمرّٕؼعملهملم‬ ‫ظؿؼملـؿمل‪ّ٢‬مسؽملمملصّٕم(سعملّٓ)مذفّٕةماٌلؿؽملّٓمبرملغمل‪ّ٢‬معلؿعمل‪ّ٢‬مس‪ّ٤‬ماظؽملصملمملمم‪ :‬م‬ ‫(‪$(„:input‟).attr‬‬ ‫} ‟ؼّٕج‪ّ٧‬مإدخممللمضؿملؼملهملميفمػّٔامايعمل‪:„ّ٢‬م‪:„‟ , title‬م‪{ value‬‬ ‫;)‬

‫ومطؼملمملمتؿ‪ّ٦‬ض‪ّٝ‬مصكملنماِّدشملّٕمأسالهمتعمل‪ّ٦‬ممبكملدؽملمملدماظعملؿملؼملهملماظؽملزملؿملهملماظظملمملرشهملم‟„مًمملصؿملهملم‪value‬ماًمملصهملم‬

‫جبؼملؿمل‪ ّٝ‬معّٕبضملمملت ماظؽملزمل‪ّ٦‬ص ميف ماظزملظملقهمل مو متعمل‪ّ٦‬م مبكملدؽملمملد ماظعملؿملؼملهمل م‘ؼّٕج‪ ّ٧‬مإدخمملل مضؿملؼملهمل ميف مػّٔام‬ ‫ايعمل‪’ّ٢‬مظػملكمملصؿملهملم‪title‬ماًمملصهملمجبؼملؿمل‪ّٝ‬معّٕبضملمملتماظؽملزمل‪ّ٦‬صميفماظزملظملقهملم‪.‬م م‬ ‫م‬

‫‪35‬‬

‫و ماآلن مأصؾقؽملممل مغضملّٕف مطؿمل‪ ّٟ‬مغعمل‪ّ٦‬م م"بمملظعملّٕاءة مع‪ "ّ٤‬مو م"اظغملؿمملبهمل مإشم" مواصظملمملت ماظضملؽملمملصّٕ مو مؼؾعمل‪ ّ٧‬مأنم‬ ‫غضملّٕف مأغ‪ ّ٥‬مميغملؽملؽملممل محّٔف ماظ‪ّ٦‬اصظملمملت مأؼسملمملً مبمملدؿكّٓام ماظّٓاظّهمل م‪ removeAttr‬ماظيت مهلممل ماظرملغمل‪ّ٢‬م‬ ‫اظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;(‟‪$)‟#id‟(.removeAttr)‟attributeName‬‬

‫حؿملىمل مأنٖ م‪ attributeName‬مميـِّ‪ ّ٢‬ماد‪ ّ٣‬ماظ‪ّ٦‬اصظملهمل ماظيت مغّٕؼّٓ محّٔصؾملممل مو مطؼملـمملل مسػمل‪ّ٧‬م‬ ‫ادؿكّٓامماظّٓاظهملم‪removeAttr‬مضّٓمغغملؿنملمعمملؼػمل‪ :ّ٨‬م‬ ‫;(‟‪$)‟a‟(.removeAttr)‟target‬‬

‫ئّفماظ‪ّ٦‬اصظملهملم‪target‬مع‪ّ٤‬مصمؿمل‪ّٝ‬ماظّٕواب‪ّٛ‬ميفماٌلؿؽملّٓم‪.‬‬ ‫عػملق‪ّ٦‬زهملم‪:‬م‪JSON‬مػ‪ّ٨‬ماخؿزملمملرمظذملم‪Java Script Object Notation‬مأيمتّٕعؿملّٖم‬ ‫طمملئ‪ّ٤‬مجمملصمملمدغملّٕبوملمومػّٔاماظذلعؿملّٖمبلؿمل‪ّٛ‬مجّٓاًمجّٓاًمسػمل‪ّ٧‬مسغملّٗمازل‪ّ٥‬ماٌكؿمل‪ّٟ‬مإذمأغ‪ّ٥‬مؼعمل‪ّ٦‬ممبؿؼملـؿمل‪ّ٢‬م‬ ‫خزملمملئ‪ّٙ‬ماظغملمملئ‪ّ٤‬مبرملغمل‪ّ٢‬مأزواجم(عظملؿمملحم‪/‬مضؿملؼملهمل)مسػمل‪ّ٧‬ماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬م‪ :‬م‬

‫{‬ ‫‪,‬م‟‪„value1‬م‪:‬م‪Key1‬‬ ‫‪,‬م‟‪„value2‬م‪:‬م‪Key2‬‬ ‫‪,‬م…‬ ‫‟‪„valuen‬م‪:‬م‪Keyn‬‬ ‫}‬ ‫حؿملىملمأنماٌظملؿمملحم(اًمملصؿملهمل)م‪ key1‬مزمؼمل‪ّ٢‬ماظعملؿملؼملهملم‪ value1‬موماٌظملؿمملحم‪ key2‬مزمؼمل‪ّ٢‬ماظعملؿملؼملهملم‬ ‫‪value2‬موماٌظملؿمملحم‪keyn‬مزمؼمل‪ّ٢‬ماظعملؿملؼملهملم‪valuen‬مومػغملّٔام‪ .‬م‬

‫‪36‬‬

‫دوالماظؿضملمملع‪ّ٢‬مع‪ّٝ‬ماِّمنمملطم‪Styles‬م‪ :‬م‬ ‫تقملعٓ‪ ّ٤‬مظؽملممل معغملؿؾهمل م‪ jQuery‬ماظعملّٓرة مسػمل‪ ّ٧‬ماظؿضملمملع‪ ّ٢‬مع‪ ّٝ‬مأمنمملط م( مدؿمملؼالت) مطمملئؽملمملت ماظزملظملقهمل مس‪ّ٤‬م‬ ‫رّٕؼ‪ ّ٠‬مجمؼمل‪ّ٦‬سهمل مع‪ ّ٤‬ماظّٓٓوال م‪ ,‬محؿملىمل متلؼملّّ مظؽملممل مبكملضمملصهمل ممن‪ ّٛ‬مجّٓؼّٓ م(‪ CSS Class‬مجّٓؼّٓ)م‬ ‫ظػملضملؽملمملصّٕمس‪ّ٤‬مرّٕؼ‪ّ٠‬ماظّٓاظهملم‪addClass‬ماظيتمتلؿضملؼمل‪ّ٢‬مطؼملمملؼػمل‪ :ّ٨‬م‬ ‫;(‟‪$)‟selector‟(.addClass)‟className‬‬

‫حؿملىمل متعمل‪ّ٦‬م مػّٔه ماظّٓاظهمل مبكملضمملصهمل ماظؽملؼمل‪ ّٛ‬م‪ className‬ماٌضملّٕٓف مضؼمل‪ ّ٤‬مورضهمل ماِّمنمملط ماًمملصهملم‬ ‫بمملظزملظملقهمل مإشم مجمؼمل‪ّ٦‬سهمل ماظضملؽملمملصّٕ ماظيت مؼضملؿملّٓػممل ماحملّٓد م‪ selector‬مو مػؽملممل مع‪ ّ٤‬ماظسملّٕوري مأنم‬ ‫غؿّٔطّٕمأنمأيمسؽملزملّٕميفماٌلؿؽملّٓمؼلؿشملؿمل‪ّٝ‬مأنمؼؽملؿؼمل‪ّ٨‬مِّطـّٕمع‪ّ٤‬مص‪ّٟ‬ميفمورضهملماِّمنمملطمذّٕطمأنم‬ ‫غظملزمل‪ّ٢‬مبنيمأزلمملءماظزملظمل‪ّ٦‬فممبقّٕفماٌلمملصهملم‪ space‬مومظّٔامال مغلؿطملّٕبمسؽملّٓعمملمغّٕىمذؿملؽمملًممممملثالًم‬ ‫ٌمملمؼػمل‪ّ٨‬م‪ :‬م‬ ‫>‪<span class=”class1 class2 class3 class4 … classn”>
‫ومالمغلؿطملّٕب مسؽملّٓعممل مؼؿ‪ ّ٣‬متشملؾؿمل‪ّ٠‬مطمملصهملمخزملمملئ‪ّٙ‬ماظزملظمل‪ّ٦‬فمأٌّط‪ّ٦‬رةمسػمل‪ّ٧‬م ماظضملؽملزملّٕ م‪ span‬مومػّٔام‬ ‫دؾنملمتلؼملؿملهملماظّٓاظهملماظيتمغؽملمملضرملؾملمملمبذملم‪addClass‬مِّنمسؼملػملؾملمملماظظملضملػمل‪ّ٨‬مػ‪ّ٦‬مإضمملصهملمممن‪ّٛ‬مجّٓؼّٓمإشمم‬ ‫اظضملؽملمملصّٕماظيتمؼضملؿملّٓػمملماحملّٓدمبرملغمل‪ّ٢‬مإضممليفمظألمنمملطماٌ‪ّ٦‬ج‪ّ٦‬دةمأصالً‪ .‬م‬ ‫م‬ ‫سػمل‪ ّ٧‬ماظؽملعملؿمل‪ ّٚ‬ممتمملعمملً متلؼملّّ مظؽملممل معغملؿؾهمل م‪ jQuery‬محبّٔف مأحّٓ مصظمل‪ّ٦‬ف ماِّمنمملط ماظيت مؼؽملؿؼمل‪ ّ٨‬مهلمملم‬ ‫طمملئ‪ّ٤‬معضملنيمس‪ّ٤‬مرّٕؼ‪ّ٠‬ماظّٓاظّهملم‪removeClass‬ماظيتمتلؿكّٓممبمملظرملغمل‪ّ٢‬م‪ :‬م‬ ‫;)‟‪$(‟selector‟).removeClass(‟className‬‬

‫‪37‬‬

‫و مع‪ ّ٤‬ماظشملؾؿملضمل‪ ّ٨‬مأن متعمل‪ّ٦‬م مػّٔه ماظّٓاظهمل مبكملؼعملمملف متشملؾؿمل‪ ّ٠‬مخزملمملئ‪ ّٙ‬ماظؽملؼمل‪ ّٛ‬م‪ className‬مسػمل‪ّ٧‬م‬ ‫جمؼمل‪ّ٦‬سهملماظضملؽملمملصّٕماظيتمؼضملؿملّٓػمملماحملّٓدم‪selector‬م‪ .‬م‬ ‫ع‪ ّ٤‬ماظّٓوال ماىؼملؿملػملهمل مجّٓاً ماظيت متقملعؽملؾملممل ماٌغملؿؾهمل م‪ jQuery‬مأؼسملمملً مػ‪ ّ٨‬مداظهمل ماظعملػملنملم‬ ‫‪ toggleClass‬ماظيتمتعمل‪ّ٦‬ممبكملضمملصهملمأحّٓمصظمل‪ّ٦‬ف ماظؽملؼمل‪ ّٛ‬مإشمماظضملؽملمملصّٕماظيتمالمتؽملؿؼمل‪ّ٨‬مإظؿمل‪ّ٥‬مع‪ّ٤‬م‬ ‫اجملؼمل‪ّ٦‬سهملماظيتمؼضملؿملّٓػمملماحملّٓدمومتعمل‪ّ٦‬ممبؽملظملّٗماظ‪ّ٦‬ضوملمبكملؼعملمملفمتشملؾؿمل‪ ّ٠‬مذات ماظزمل‪ّٟ‬مسػمل‪ّ٧‬ماظضملؽملمملصّٕم‬ ‫اظيتمتؽملؿؼمل‪ّ٨‬مإظؿمل‪ّ٥‬مع‪ّ٤‬ماجملؼمل‪ّ٦‬سهملماظيتمؼضملؿملّٓػمملماحملّٓدمومهلّٔهماظّٓاظهملماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;(‟‪$)‟selector‟(.toggleClass)‟className‬م‬

‫و مضّٓ مؼؾّٓو مسؼمل‪ ّ٢‬مػّٔه ماظّٓاظهمل معلؿؾملفؽملمملً ميف ماظ‪ّ٦‬ػػملهمل ماِّوشم مو مظغمل‪ ّ٤‬مإن مغصملّٕغممل مإشم ماٌـمملل ماظؿمملظ‪ّ٨‬م‬ ‫دؽملّٕىماظظملمملئّٓةماظغملؾرلةماظيتمتعملّٓعؾملمملمػّٔهماظّٓاظهملم‪,‬مظؽملظملذلضمجّٓالًمأغؽملمملمضؼملؽملمملمبغملؿمملبهملماظزملظملقهملماظؿمملظؿملهمل‪ :‬م‬ ‫>‪‪‪‪"‪type"=text/css‬م‪<style‬مممم‬ ‫{ ‪.black‬‬ ‫;‪background-color:black‬مممممممممم م‬

‫م‬ ‫مممممممممممم‬

‫;‪color:White‬‬ ‫}‬

‫>‪‪‪
‫‪38‬‬

‫>”‪‪‪‪‪ّٝ‬مممممممممممم‬ ‫>‪‪‪0‬مممممممممممم‬ ‫>‪0‬مممممممممممم‬ ‫>‪‪‪2‬مممممممممممم‬ ‫>‪2‬مممممممممممم‬ ‫>‪‪‪3‬مممممممممممم‬ ‫>‪3‬مممممممممممم‬ ‫>‪‪‪4‬مممممممممممم‬

‫‪39‬‬

‫>‪4‬مممممممممممم‬ ‫>‪‪‪‪
‫ومػ‪ّ٨‬مصظملقهملمبلؿملشملهمل مجّٓاً مهؿ‪ّ٦‬يمجّٓوالًمِّزلمملءمو مأدضملمملرمعؽملؿفمملتموػؼملؿملهملمو مغؿؿملفهملمسّٕضؾملممل مسػمل‪ّ٧‬م‬ ‫اظرملمملذهملمترملؾ‪ّ٥‬معمملمؼػمل‪ّ٨‬م‪ :‬م‬

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

‫اىؿملّٓةمتعمل‪ّ٦‬ممبضملّٕضمأدشملّٕ ماىّٓاول مبػمل‪ّ٦‬غنيمعؿؽملمملوبنيمومػ‪ّ٦‬معمملمؼضملّٕفمبمملإلنػملؿملّٖؼهملمبذملم( ‪Zebra‬‬ ‫‪)stripping‬مبمملظرملغمل‪ّ٢‬م‪ :‬م‬

‫م‬

‫‪40‬‬

‫صؿقؼمللؽملممل مىضمل‪ ّ٢‬مجّٓوظؽملممل مؼؾّٓو مطؾعملؿملهمل ماىّٓاول ماىؿملّٓة ميف مسمململ ماظذمل م‪ Web‬مو مضؼملؽملممل مبؿضملّٓؼ‪ ّ٢‬مذؿملظملّٕةم‬ ‫اىّٓولميفمصظملقؿؽملمملمظؿزملؾّّمطؼملمملؼػمل‪ّ٨‬م‪ :‬م‬ ‫>”‪id=”table1‬م‪‪‪‪‪ّٝ‬مممممممممممم‬ ‫>‪”‪‪0‬مممممممممممم‬ ‫>‪0‬مممممممممممم‬ ‫>‪‪‪2‬مممممممممممم‬ ‫>‪2‬مممممممممممم‬ ‫>‪”‪‪3‬مممممممممممم‬ ‫>‪3‬مممممممممممم‬

‫‪41‬‬

‫>‪‪‪4‬مممممممممممم‬ ‫>‪4‬مممممممممممم‬ ‫>‪‪
‫ومبضملّٓمنمملحمتضملّٓؼػملؽملمملمبظملذلةمظؽملظملذلضمأغؽملمملمأردغمملمتطملؿملرلمتّٕتؿملنملمتؽملمملوبماظػمل‪ّ٦‬غنيمظلؾنملمعمملمظؽملفضمل‪ّ٢‬مذغمل‪ّ٢‬م‬ ‫اىّٓولمطؼملمملمؼػمل‪ّ٨‬م‪ :‬م‬

‫م‬ ‫ضّٓ مذمشمللمل مػؽملممل مذات ماًشملفمل ماظلمملب‪ ّ٠‬مو مغضمل‪ّ٦‬د مظؿضملّٓؼ‪ ّ٢‬مذؿملظملّٕة ماىّٓول ميف محني مأن مطؿمملبهمل ماظلشملّٕم‬ ‫اظؿمملظ‪ّ٨‬مع‪ّ٤‬مأدشملّٕماٌغملؿؾهملم‪jQuery‬مدؿق‪ّ٢‬ماٌرملغملػملهملم‪ :‬م‬ ‫;(‟‪$)‟#table1 tr‟(.toggleClass)‟black‬‬

‫ومػؽملمملمالمبّٓمع‪ّ٤‬ماالسذلافمأنماظلشملّٕماظؿمملظ‪ّ٨‬مطمملنمدؿملفضمل‪ّ٢‬مايؿملمملةمأدؾمل‪ّ٢‬ميفمايمملظهملماظلمملبعملهملمسؽملّٓعمملم‬ ‫أردغمملمتػمل‪ّ٦‬ؼ‪ّ٤‬مبضمل‪ّٚ‬مدشمل‪ّ٦‬رماىّٓولم‪ :‬م‬ ‫;(‟‪$)‟#table1 tr:even‟(.addClass)‟black‬‬

‫‪42‬‬

‫إشم ماآلن متضملمملعػملؽملممل مع‪ ّٝ‬مأمنمملط ماظضملؽملمملصّٕ مسدل ماظزملظمل‪ّ٦‬ف م‪ 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‬‬

‫أومإدؽملمملدمسّٕضماظضملؽملزملّٕمبمملظرملغمل‪ّ٢‬م‪ :‬م‬

‫‪43‬‬

‫م;(‪$)‟#id‟(.width)value‬‬

‫ومعـػملؾملمملماظّٓاظهملم‪height‬ماظيتمتلؼملّّمبعملّٕاءةمارتظملمملعماظضملؽملزملّٕمبمملظرملغمل‪ّ٢‬م‪ :‬م‬ ‫م;()‪$)‟#id‟(.height‬‬

‫أومإدؽملمملدمارتظملمملس‪ّ٥‬مبمملظرملغمل‪ّ٢‬م‪ :‬م‬ ‫م;(‪$)‟#id‟(.height)value‬‬

‫م‬

‫دوالماظؿضملمملع‪ّ٢‬مع‪ّٝ‬محمؿ‪ّ٦‬ىمسؽملمملصّٕماٌلؿؽملّٓم‪Inner content‬م‪ :‬م‬ ‫تضملشملؿملؽملمملماٌغملؿؾهملم‪ jQuery‬مإعغملمملغؿملمملتمأخّٕىمظػملؿضملمملع‪ّ٢‬مع‪ّٝ‬معلؿؽملّٓماظذملم‪ Web‬مومػّٔهمإٌّةمتلؼملّّمظؽملمملم‬ ‫بمملظؿضملمملع‪ ّ٢‬مع‪ ّٝ‬محمؿ‪ّ٦‬ى ماظضملؽملمملصّٕ مسدل مجمؼمل‪ّ٦‬سهمل مع‪ ّ٤‬ماظّٓوال معؽملؾملممل مداظهمل م‪ html‬ماظيت متعمل‪ّ٦‬م مبعملّٕاءةم‬ ‫حمؿ‪ّ٦‬ىمسؽملزملّٕمعضملنيمسدلماظرملغمل‪ّ٢‬م‪ :‬م‬ ‫;)(‪$(‟#id‟).html‬‬

‫حؿملىملمأغؾملمملمتضملؿملّٓمذؿملظملّٕةماظذملم‪ HTML‬ماظيتممتـ‪ّ٢‬ماحملؿ‪ّ٦‬ىماٌ‪ّ٦‬ج‪ّ٦‬دمداخ‪ّ٢‬ماظضملؽملزملّٕمذوماٌضملّٕفم‪id‬م‬ ‫ومتعمل‪ّ٦‬ممبكملدؽملمملدمضؿملؼملهملمجّٓؼّٓةمظػملؼملقؿ‪ّ٦‬ى(ادؿؾّٓاظ‪)ّ٥‬مبمملظرملغمل‪ّ٢‬م‪ :‬م‬ ‫;)‪$(‟#id‟).html(Con‬‬

‫حؿملىملمأنماظ‪ّ٦‬دؿمل‪ّٛ‬م‪Con‬مػ‪ّ٦‬مذؿملظملّٕةماظذملم‪HTML‬ماظيتممتـ‪ّ٢‬ماحملؿ‪ّ٦‬ىماىّٓؼّٓ‪ .‬م‬ ‫أعمملماظّٓاظهملم‪ text‬م صؾمل‪ّ٨‬ممممملثػملهملمظػملّٓاظهملماظلمملبعملهملمسّٓامأغؾملمملمتؿضملمملع‪ّ٢‬مع‪ّٝ‬ماحملؿ‪ّ٦‬ىمطؽمل‪ّٙ‬مسمملديمومظؿملّٗم‬ ‫طرملؿملظملّٕةم‪HTML‬مومهلمملماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬ميفمحمملظهملماظعملّٕاءةم‪ :‬م‬ ‫;()‪$)‟#id‟(.text‬‬

‫‪44‬‬

‫وماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬ميفمحمملظهملماإلدؽملمملد‪ :‬م‬ ‫;(‪$)‟#id‟(.text)Con‬‬

‫حؿملىملمأنماظ‪ّ٦‬دؿمل‪ّٛ‬م‪Con‬مػ‪ّ٦‬مغ‪ّٙ‬مسمملديمميـ‪ّ٢‬ماحملؿ‪ّ٦‬ىماىّٓؼّٓ‪ .‬م‬ ‫وميفمدؾؿمل‪ّ٢‬ماٌعملمملرغهملمبنيماظّٓاظهملم‪html‬موماظّٓاظهملم‪text‬مظ‪ّ٦‬مطمملنمظّٓؼؽملمملميفمصظملقؿؽملمملمعمملمؼػمل‪ّ٨‬معـالًم‪ :‬م‬ ‫>”‪

‪
• 1‪
• 2‪
  ‫ث‪ّ٣‬مضؼملؽملمملمبمملدؿّٓسمملءماظّٓاظهملم‪text‬مطؼملمملمؼػمل‪ّ٨‬م‪ :‬م‬ ‫;)(‪$(„#myul‟).text‬‬
  
  ‫صكملغؾملمملمدؿضملؿملّٓماظعملؿملؼملهملم‪ 12‬مطؽمل‪ّٙ‬م(‪)String‬مأعمملميفمحمملظهملمادؿّٓسمملءماظّٓاظهملم‪ html‬مبؽملظملّٗماظزملؿملطملهملم‬ ‫صكملغؾملمملمدؿضملؿملّٓماحملؿ‪ّ٦‬ىم‪:‬م‬ ‫>‪
• 1‪
• 2
  ‫المؼعملؿزملّٕماٌ‪ّ٦‬ض‪ّ٦‬عمسػمل‪ّ٧‬ماالدؿؾّٓالماظغملػمل‪ّ٨‬محملؿ‪ّ٦‬ىمود‪ّ٦‬مماٌلؿؽملّٓمومإمنمملمميغمل‪ّ٤‬متضملّٓؼ‪ّ٢‬مجّٖءمع‪ّ٤‬م‬ ‫حمؿ‪ّ٦‬ىماٌلؿؽملّٓمومظضمل‪ ّٖ٢‬ماظّٓاظّهملم‪ append‬مخرلمعمملمغلؿؾمل‪ ّٗ٢‬مب‪ّ٥‬محّٓؼـؽملمملمس‪ّ٤‬مػّٔهماظؽملعملشملهملمصؾمل‪ّ٨‬متعمل‪ّ٦‬مم‬ ‫بكملضمملصهملمحمؿ‪ّ٦‬ىم‪HTML‬مجّٓؼّٓمإشممغؾملمملؼهملماظضملؽملمملصّٕماحملّٓدةمومتلؿضملؼمل‪ّ٢‬مبمملظرملغمل‪ّ٢‬م‪ :‬م‬ ‫;(‪$)‟selector‟(.append)HTML‬‬
  
  ‫‪45‬‬
  
  ‫ومطؽملمملمضّٓمرأؼؽملمملمعـمملالًمسػمل‪ّ٧‬مسؼملػملؾملمملمػّٔاميفمصعملّٕةمدمملبعملهمل محؿملىملمادؿكّٓعؽملمملػمملمظؿ‪ّ٦‬ظؿملّٓمحمؿ‪ّ٦‬ىمجّٓؼّٓموم‬ ‫إضمملصؿ‪ّ٥‬مظػملزملظملقهملمومالمداس‪ َّ٨‬مإلسمملدةماظغملالممػؽملمملمومظغمل‪ّ٤‬معمملمأرؼّٓمض‪ّ٦‬ظ‪ّ٥‬ميفمػّٔهماظظملعملّٕةمأنمهلّٔهماظّٓاظهملم‬ ‫سؼملالً مآخّٕاً مػمملعمملً مجّٓٓاً مميغملّؽملؽملممل مع‪ ّ٤‬مغعمل‪ ّ٢‬مأو مغلّْ مجمؼمل‪ّ٦‬سهمل مع‪ ّ٤‬مسؽملمملصّٕ ماٌلؿؽملّٓ مع‪ ّ٤‬معغملمملغؾملممل مضؼمل‪ّ٤‬م‬ ‫اٌلؿؽملّٓمإشممعغملمملنمآخّٕمضؼملؽمل‪ّ٥‬مصؼملـالًمميغمل‪ّ٤‬مأنمغغملؿنملمعمملؼػمل‪ّ٨‬م‪ :‬م‬ ‫;))‟‪$)‟targetSelector‟(.append($(‟sourceSelector‬‬
  
  ‫و مػؽملممل متالح‪ ّٜ‬مأغؽملممل مضؼملؽملممل مبؿؼملّٕؼّٕ مجمؼمل‪ّ٦‬سهمل مع‪ ّ٤‬ماظضملؽملمملصّٕ مظػملّٓاظهمل مس‪ ّ٤‬مرّٕؼ‪ ّ٠‬مادؿّٓسمملء محمّٓدم‬ ‫‪ sourceSelector‬مومملمغعمل‪ّ٣‬مبؿؼملّٕؼّٕمحمؿ‪ّ٦‬ىم‪ HTML‬مبرملغمل‪ّ٢‬معؾمملذّٕمطؼملمملمصضملػملؽملمملميفماٌـممللم‬ ‫اظّٔيمغمملضرملؽملممله مدمملبعملمملًموميفمػّٔهمايمملظهملمدؿعمل‪ّ٦‬ممػّٔهماظؿضملػملؿملؼملهملمبفملخّٔ ماظضملؽملمملصّٕماظيت مؼضملؿملّٓػممل ماٌضملّٕفم‬ ‫‪ sourceSelector‬مومغعملػملؾملممل مع‪ّ٤‬معغملمملغؾملممل ماِّصػمل‪ّ٨‬مإشمماٌغملمملنماهلّٓف ممممملمؼضملينمحّٔصؾملمملمع‪ّ٤‬م‬ ‫اٌغملمملن ماِّصػمل‪ ّ٨‬مو مإضمملصؿؾملممل ميف ماٌغملمملن ماهلّٓف مو مػ‪ ّ٦‬مآخّٕ ماظضملؽملزملّٕ ماظّٔي مؼضملؿملّٓه ماحملّٓدم‬ ‫‪ targetSelector‬مإنمطمملنمعمملمؼضملؿملّٓهمػ‪ّ٦‬مسؽملزملّٕاًمواحّٓاًمأعمملمإن مطمملنمأطـّٕمع‪ّ٤‬مسؽملزملّٕمصكملنم‬ ‫اظّٓاظهملمدؿعمل‪ّ٦‬ممبضملؼملػملؿملهملمغلّْمبّٓلماظؽملعمل‪ّ٢‬ممممملمؼضملينمأغؾملمملمدؿقمملص‪ّٜ‬مسػمل‪ّ٧‬ماحملؿ‪ّ٦‬ىماٌزملّٓرميفمعغملمملغ‪ّ٥‬موم‬ ‫تسملؿمل‪ّٟ‬محمؿ‪ّ٦‬ىممممملث‪ّ٢‬مظ‪ّ٥‬ممتمملعمملًمآخّٕ مط‪ّ٢‬مطمملئ‪ّ٤‬مؼضملؿملّٓهماحملؿ‪ّ٦‬ىماهلّٓفمومطؼملـممللمسػمل‪ّ٧‬ماٌ‪ّ٦‬ض‪ّ٦‬عم‬ ‫تزمل‪ّ٦‬رمأنمظّٓؼؽملمملماحملؿ‪ّ٦‬ىماظؿمملظ‪ّ٨‬ميفماٌلؿؽملّٓ‪ :‬م‬ ‫>‪‪
• 11‪
• 12‪‪‪
• 21‪
  ‫‪46‬‬
  
  ‫يفمعـ‪ّ٢‬مػّٔهمايمملظهملمصكملنماالدؿّٓسمملءم‪ :‬م‬ ‫;((‟‪$)‟#item12‟(.append)$)‟ol‬‬
  
  ‫دؿملعمل‪ّ٦‬م محبّٔف ماظعملمملئؼملهمل ماظـمملغؿملهمل مع‪ ّ٤‬مع‪ّ٦‬ضضملؾملممل ماِّصػمل‪ ّ٨‬مو مإضمملصهمل مواحّٓة مجّٓؼّٓة معشملمملبعملهمل مهلممل ممتمملعمملً موم‬ ‫جضملػملؾملمملمجّٖءاًمع‪ّ٤‬ماظعملمملئؼملهملماِّوشممتمملبضملمملًمظػملضملؽملزملّٕماظـمملغ‪ّ٨‬ميفمغؾملمملؼؿ‪ّ٥‬ميفمحنيمأنماالدؿّٓسمملءم‪ :‬م‬ ‫;((‟‪$)‟ul li‟(.append)$)‟ol‬‬
  
  ‫دؿملعمل‪ّ٦‬ممبؽمللّْماظعملمملئؼملهملماظـمملغؿملهملمدونمأنمؼفملثّٕمسػملؿملؾملمملمومؼؽملرمللملمضمملئؼملهملمعشملمملبعملهملمهلمملممتمملعمملًمؼسملؿملظملؾملمملمإشممغؾملمملؼهملم‬ ‫ط‪ّ٢‬مسؽملزملّٕمع‪ّ٤‬مسؽملمملصّٕماظعملمملئؼملهملماِّوشمم‪ .‬م‬ ‫تّٔطّّٕم‪ :‬مإذامطمملنماحملّٓدماهلّٓفمؼضملؿملّٓمأطـّٕمع‪ّ٤‬مسؽملزملّٕم(عزملظمل‪ّ٦‬صهملمع‪ّ٤‬ماظضملؽملمملصّٕ)مصكملنمادؿّٓسمملءماظّٓاظهملم‬ ‫‪append‬مؼعمل‪ّ٦‬ممبؽمللّْماٌزملّٓرمأعمملمإنِمطمملنمعمملمؼضملؿملّٓهماحملّٓدماهلّٓفمسؽملزملّٕاًمواحّٓاًمصكملنمادؿّٓسمملءم‬ ‫اظّٓاظهملمؼعمل‪ّ٦‬ممبؽملعمل‪ّ٢‬ماٌزملّٓرم‪ .‬م‬ ‫ػؽملمملك مداظهمل معرملمملبؾملهمل مبمملالد‪ ّ٣‬مصعمل‪ ّٛ‬مظػملّٓاظهمل م‪ append‬مازلؾملممل م‪ appendTo‬متلؿّٓس‪ ّ٧‬مبمملظرملغمل‪ّ٢‬م‬ ‫اظؿمملظ‪ :ّ٨‬م‬ ‫;(‟‪$)‟source‟(.appendTo)‟target‬‬
  
  ‫حؿملىمل متعمل‪ّ٦‬م مػّٔه ماظّٓاظهمل مبؽملعمل‪ ّ٢‬ماظضملؽملمملصّٕ ماظيت مؼضملؿملّٓػممل ماحملّٓد م‪ source‬مو مإضمملصؿؾملممل مإشم مآخّٕم‬ ‫اظضملؽملزملّٕ ماظّٔي مؼضملؿملّٓه ماحملّٓد م‪ target‬مإن مطمملن مؼضملؿملّٓ مسؽملزملّٕاً مواحّٓاً مو مإن مطمملن مؼضملؿملّٓ مأطـّٕ مع‪ّ٤‬م‬ ‫سؽملزملّٕمصكملغؾملمملمتعمل‪ّ٦‬ممبؽمللّْمػّٔهماظضملؽملمملصّٕمومظؿملّٗمغعملػملؾملمملمومسػمل‪ّ٧‬مدؾؿمل‪ّ٢‬ماٌـممللمصكملنماظؿضملػملؿملؼملهملم‪ :‬م‬ ‫;(‟‪$)‟#copyrightLabel‟(.appendTo)‟.code‬‬
  
  ‫‪47‬‬
  
  ‫تعمل‪ّ٦‬ممبؽملعمل‪ّ٢‬ماظضملؽملزملّٕمذوماٌضملّٕفم‪ copyrightLabel‬مإشمماظضملؽملزملّٕماظّٔيمؼؽملؿؼمل‪ّ٨‬مظزمل‪ّٟ‬ماظؽملؼمل‪ّٛ‬م‬ ‫‪ code‬م يفمحممللمطمملنموحؿملّٓاًمومإنمطمملنمػؽملمملكمأطـّٕمع‪ّ٤‬مسؽملزملّٕمؼؽملؿؼمل‪ّ٨‬مظػملزمل‪ّٟ‬م‪ code‬ميفماظزملظملقهملم‬ ‫دؿملؿ‪ّ٣‬مغلّْماظضملؽملزملّٕمذوماٌضملّٕفم‪copyrightLabel‬مومظؿملّٗمغعملػمل‪ّ٥‬م‪ .‬م‬ ‫عػملق‪ّ٦‬زهمل م‪ :‬مظ‪ ّ٦‬ماغؿؾؾملومل مظشملّٕؼعملهمل مسؼمل‪ ّ٢‬ماظّٓاظهمل م‪ append‬مع‪ ّ٤‬محؿملىمل ماظؾمملرعذلات مو مضمملرغؿؾملممل مبمملظّٓاظهملم‬ ‫‪appendTo‬مظ‪ّ٦‬جّٓتمأغؾملؼملمملمعؿضملمملطلؿمملنمع‪ّ٤‬مغمملحؿملهملمط‪ّ٦‬نمأيماظؾمملرعذلاتمعزملّٓراًمومأؼؾملمملمػّٓصمملًم‪ .‬م‬ ‫م‬ ‫سػمل‪ ّ٧‬مسغملّٗ ماظّٓاظؿني م‪ append‬مو م‪ appendTo‬ماظػملؿني متعمل‪ّ٦‬عمملن مبكملضمملصهمل ماحملؿ‪ّ٦‬ى ميف مغؾملمملؼهملم‬ ‫احملؿ‪ّ٦‬ى ماظّٓاخػمل‪ ّ٨‬مظػملضملؽملمملصّٕ ماحملّٓدة م(ضؾ‪ ّ٢‬مود‪ ّ٣‬ماإلشالق ماًمملص مبغمل‪ ّ٢‬معؽملؾملممل) مصكملن ماظّٓاظؿنيم‬ ‫‪ prepend‬مو م‪ prependTo‬متضملؼملالن مبؽملظملّٗ ماظشملّٕؼعملهمل ممتمملعمملً مسّٓا مأغؾملؼملممل متسملؿملظملمملن ماحملؿ‪ّ٦‬ىم‬ ‫اىّٓؼّٓميفمبّٓاؼهملماحملؿ‪ّ٦‬ىماظّٓاخػمل‪ّ٨‬مظػملضملؽملمملصّٕماحملّٓدةم(بضملّٓمود‪ّ٣‬ماظؾّٓءمظغمل‪ّ٢‬معؽملؾملممل)محؿملىملمتضملؼمل‪ّ٢‬م‬ ‫‪prepend‬مبؽملظملّٗمرّٕؼعملهملم‪append‬مومتضملؼمل‪ّ٢‬م‪prependTo‬مبؽملظملّٗمرّٕؼعملهملم‪appendTo‬م‪ .‬م‬ ‫م‬ ‫أعمملمبمملظؽمللؾهملمظػملّٓاظؿني م)(‪ before‬موم)(‪ insertBefore‬مصكملغؾملؼملمملمتضملؼملالنمبفملدػمل‪ّ٦‬بمعرملمملب‪ّ٥‬م‬ ‫أؼسملمملً مع‪ ّٝ‬معالحصملهمل مأن ماظّٓوال ماظلمملبعملهمل متسملؿمل‪ ّٟ‬ماحملؿ‪ّ٦‬ى ميف مبّٓاؼهمل مأو مغؾملمملؼهمل ماحملؿ‪ّ٦‬ى ماظّٓاخػمل‪ّ٨‬م‬ ‫ظػملؾملّٓف م(بضملّٓ مود‪ ّ٣‬ماظؾّٓء مأو مضؾ‪ ّ٢‬مود‪ ّ٣‬ماإلشالق) ميف محني مأن مػمملتني ماظّٓاظؿني متعمل‪ّ٦‬عمملن مبكملضمملصهملم‬ ‫احملؿ‪ّ٦‬ىمضؾ‪ّ٢‬ماهلّٓفممتمملعمملًم(ضؾ‪ّ٢‬مود‪ّ٣‬ماظؾّٓءماًمملصمب‪)ّ٥‬م‪ .‬م‬ ‫و مبمملٌـ‪ ّ٢‬مت‪ّ٦‬صّٕ ماٌغملؿؾهمل مداظؿني متضملؼملالن مبؽملظملّٗ ماِّدػمل‪ّ٦‬ب مع‪ ّٝ‬ماخؿالف مبلؿمل‪ ّٛ‬مإذ مأغؾملؼملممل متسملؿملظملمملنم‬ ‫احملؿ‪ّ٦‬ى مبضملّٓ ماهلّٓف ممتمملعمملً م(بضملّٓ مود‪ ّ٣‬ماإلشالق ماًمملص مب‪ )ّ٥‬مو مػؼملممل م)(‪ after‬موم‬ ‫)(‪insertAfter‬م‪ .‬م‬
  
  ‫‪48‬‬
  
  ‫ومِّنماظّٓوال ماىّٓؼّٓةماظيتمضّٕأتؾملمملمضؾ‪ّ٢‬مضػملؿمل‪ّ٢‬متضملؼمل‪ّ٢‬مبشملّٕؼعملهملمعرملمملبؾملهملمظػملّٓاظهمل م‪ append‬مدفملطؿظمل‪ّ٨‬م‬ ‫بّٔطّٕمعـممللمواحّٓمخمؿزملّٕمصعمل‪ّٛ‬مسػمل‪ّ٧‬مط‪ّ٢‬معؽملؾملمملم‪ .‬م‬ ‫تعمل‪ّ٦‬مماظؿضملػملؿملؼملهملماظؿمملظؿملهملم‪ :‬م‬ ‫;(‟>‪$)‟p img‟(.before)‟

  I love Syria!
  ‫بكملضمملصهملماىؼملػملهملم‪I love Syria‬مضؾ‪ّ٢‬مط‪ّ٢‬مسؽملزملّٕمؼضملؿملّٓهماحملّٓدم‪p img‬م‪,‬مومتعمل‪ّ٦‬مماظؿضملػملؿملؼملهملم‬ ‫اظؿمملظؿملهملمبؽملظملّٗماٌؾملؼملهملم‪ :‬م‬ ‫;(‟‪$)‟

  I love Syria!

  ‟(.insertBefore)‟p img‬‬
  
  ‫بؿملؽملؼملمملمتعمل‪ّ٦‬مماظؿضملػملؿملؼملهملماظؿمملظؿملهملم‪ :‬م‬ ‫م>”‪‟(.after)‟<small style = ”color:red‬ػ‪href^=http://www.‬ؼ‪$)‟a‬‬ ‫;(‟>‪
  ‫بكملضمملصهملماظغملػملؼملهمل م‪ external‬مبضملّٓمط‪ّ٢‬مراب‪ّٛ‬مؼرملرلمإشممع‪ّ٦‬ض‪ّٝ‬مخمملرج‪ّ٨‬م‪,‬مومتعمل‪ّ٦‬مماظؿضملػملؿملؼملهملماظؿمملظؿملهملم‬ ‫بمملظ‪ّ٦‬زؿملظملهملمذاتؾملمملم‪ :‬م‬ ‫م‪$)‟<small style=”color:red”> external‬‬ ‫;(‟ػ‪href^=http://www.‬ؼ‪a‬م‟)‪‟(.insertAfter‬‬
  
  ‫ط‪ّ٢‬مداظّهملمع‪ ّ٤‬ماظّٓوالماىؼملؿملػملهملماظلمملبعملهمل مهلمملمسؼمل‪ّ٢‬معضملنيمضّٓمؼرملمملب‪ّ٥‬مشرلػمملمومظغمل‪ّ٤‬ماخؿالفماِّدػمل‪ّ٦‬بم‬ ‫رمضمل‪ّ٢‬مطالًم عؽملؾملمملمعالئؼملهملممتمملعمملًميمملالتمعضملؿملؽملهملموماىّٓولماظؿمملظ‪ّ٨‬مؼلمملسّٓمسػمل‪ّ٧‬متػملكؿمل‪ّٙ‬مسؼملػملؾملمملم‪ :‬م‬ ‫اد‪ّ٣‬ماظّٓاظهمل م‬
  
  ‫اظ‪ّ٦‬زؿملظملهمل م‬
  
  ‫()‪html‬‬
  
  ‫يف محمملل مادؿّٓسمملئؾملممل مبّٓون ممتّٕؼّٕ مأي مودؿمل‪ ّٛ‬م‪Parameter‬م‬
  
  ‫‪49‬‬
  
  ‫تعمل‪ّ٦‬م ماظّٓاظهملمبكملسمملدةمحمؿ‪ّ٦‬ىماظضملؽملمملصّٕماحملّٓدةمسػمل‪ّ٧‬مذغمل‪ّ٢‬مذؿملظملّٕةم‬ ‫‪HTML‬م‪,‬موميفمحممللممتّٕؼّٕمودؿمل‪ّٛ‬معؽملمملدنملمهلمملمتلؿؾّٓلماحملؿ‪ّ٦‬ىم‬ ‫اظلمملب‪ّ٠‬مظػملضملؽملمملصّٕماحملّٓدةمب‪ّ٥‬م‪ .‬م‬
  
  ‫()‪text‬‬
  
  ‫ترملؾ‪ ّ٥‬مبضملؼملػملؾملممل مسؼمل‪ ّ٢‬م‪ html‬مع‪ ّٝ‬مصّٕق مأن معممل متفملخّٔه مط‪ّ٦‬دؿمل‪ ّٛ‬ميفم‬ ‫حممللممتّٕؼّٕمودؿمل‪ّٛ‬مهلمملمومعمملمتضملؿملّٓهميفمحممللمسّٓمممتّٕؼّٕمودؿمل‪ّٛ‬مهلمملم‬ ‫ػ‪ّ٦‬مغ‪ّٙ‬م‪String‬م‪ .‬م‬
  
  ‫()‪append‬‬
  
  ‫تسملؿمل‪ ّٟ‬محمؿ‪ّ٦‬ى ماظ‪ّ٦‬دؿمل‪ ّٛ‬ماٌؼملّٕر مهلممل مإشم مغؾملمملؼهمل ماحملؿ‪ّ٦‬ىم‬ ‫اظّٓاخػمل‪ ّ٨‬مظغمل‪ ّ٢‬مع‪ ّ٤‬ماظضملؽملمملصّٕ ماظيت مؼضملؿملّٓػممل ماحملّٓد مطؼملممل متلؿضملؼمل‪ّ٢‬م‬ ‫يفمحممللماظّٕشؾهملميفمغعمل‪ّ٢‬م‪/‬مغلّْمجمؼمل‪ّ٦‬سهملمع‪ّ٤‬مسؽملمملصّٕماٌلؿؽملّٓمع‪ّ٤‬م‬ ‫عغملمملنمضؼمل‪ّ٤‬ماٌلؿؽملّٓمإشممعغملمملنمآخّٕمضؼملؽمل‪ّ٥‬م‪ .‬م‬
  
  ‫()‪appendTo‬‬
  
  ‫تسملؿمل‪ ّٟ‬ماحملؿ‪ّ٦‬ى ماظّٔي متشملؾ‪ ّ٠‬مسػملؿمل‪ ّ٥‬مإشم مغؾملمملؼهمل ماحملؿ‪ّ٦‬ىم‬ ‫اظّٓاخػمل‪ ّ٨‬مظغمل‪ ّ٢‬مع‪ ّ٤‬ماظضملؽملمملصّٕ ماظيت مؼضملؿملّٓػممل مودؿملشملؾملممل ماظّٔي مؼغمل‪ّ٦‬نم‬ ‫حمّٓداًم‪ .‬م‬
  
  ‫()‪prepend‬‬
  
  ‫تسملؿمل‪ ّٟ‬محمؿ‪ّ٦‬ى ماظ‪ّ٦‬دؿمل‪ ّٛ‬ماٌؼملّٕر مهلممل مإشم مبّٓاؼهمل ماحملؿ‪ّ٦‬ىم‬ ‫اظّٓاخػمل‪ّ٨‬مظغمل‪ّ٢‬مع‪ّ٤‬ماظضملؽملمملصّٕماظيتمؼضملؿملّٓػمملماحملّٓدم‪ .‬م‬
  
  ‫()‪prependTo‬‬
  
  ‫تسملؿمل‪ ّٟ‬ماحملؿ‪ّ٦‬ى ماظّٔي متشملؾ‪ ّ٠‬مسػملؿمل‪ ّ٥‬مإشم مبّٓاؼهمل ماحملؿ‪ّ٦‬ىم‬ ‫اظّٓاخػمل‪ ّ٨‬مظغمل‪ ّ٢‬مع‪ ّ٤‬ماظضملؽملمملصّٕ ماظيت مؼضملؿملّٓػممل مودؿملشملؾملممل ماظّٔي مؼغمل‪ّ٦‬نم‬ ‫حمّٓداًم‪ .‬م‬
  
  ‫()‪before‬‬
  
  ‫تسملؿمل‪ ّٟ‬محمؿ‪ّ٦‬ى ماظ‪ّ٦‬دؿمل‪ ّٛ‬ماٌؼملّٕر مهلممل مضؾ‪ ّ٢‬مط‪ ّ٢‬مسؽملزملّٕ مع‪ ّ٤‬ماظضملؽملمملصّٕم‬ ‫اظيتمؼضملؿملّٓػمملماحملّٓد‪ .‬م‬
  
  ‫‪50‬‬
  
  ‫()‪insertBefore‬‬
  
  ‫تسملؿمل‪ّٟ‬ماحملؿ‪ّ٦‬ىماظّٔيمتشملؾ‪ّ٠‬مسػملؿمل‪ّ٥‬مضؾ‪ّ٢‬مط‪ّ٢‬مسؽملزملّٕمع‪ّ٤‬ماظضملؽملمملصّٕم‬ ‫اظيتمؼضملؿملّٓػمملمودؿملشملؾملمملماظّٔيممؼغمل‪ّ٦‬نمحمّٓداًم‪ .‬م‬
  
  ‫()‪after‬‬
  
  ‫تسملؿمل‪ ّٟ‬محمؿ‪ّ٦‬ى ماظ‪ّ٦‬دؿمل‪ ّٛ‬ماٌؼملّٕر مهلممل مبضملّٓ مط‪ ّ٢‬مسؽملزملّٕ مع‪ ّ٤‬ماظضملؽملمملصّٕم‬ ‫اظيتمؼضملؿملّٓػمملماحملّٓد‪ .‬م‬
  
  ‫()‪insertAfter‬‬
  
  ‫تسملؿمل‪ ّٟ‬ماحملؿ‪ّ٦‬ى ماظّٔي متشملؾ‪ ّ٠‬مسػملؿمل‪ ّ٥‬مبضملّٓ مط‪ ّ٢‬مسؽملزملّٕ مع‪ ّ٤‬ماظضملؽملمملصّٕم‬ ‫اظيتمؼضملؿملّٓػمملمودؿملشملؾملمملماظّٔيممؼغمل‪ّ٦‬نمحمّٓداًم‪ .‬م‬
  
  ‫دوالماظؿطملػملؿمل‪ّٟ‬م‪Wrapping‬م‪ :‬م‬ ‫أحؿملمملغمملًمدمؿمملج مظػملعملؿملمملممبؿطملػملؿمل‪ّٟ‬محمؿ‪ّ٦‬ىمعمملمب‪ّ٦‬د‪ّ٣‬معضملؿملٓ‪ ّ٤‬مأومجمؼمل‪ّ٦‬سهملمع‪ّ٤‬ماظ‪ّ٦‬د‪ّ٦‬ممصؼملـالًمظؽملظملذلضمأغؽملمملم‬ ‫غّٕؼّٓمتطملػملؿمل‪ّٟ‬مصمؿمل‪ّٝ‬مود‪ّ٦‬مم‪ img‬مبمملظ‪ّ٦‬د‪ّ٣‬م‪ a‬معـالً م(جضمل‪ّ٢‬مود‪ّ٦‬مم‪ img‬محمؿ‪ّ٦‬ؼمملتمظ‪ّ٦‬د‪ّ٦‬مم‪ a‬مجّٓؼّٓة)م‬ ‫أومغّٕؼّٓمتطملػملؿمل‪ّٟ‬مصمؿمل‪ّٝ‬ماظضملؽملمملصّٕم‪ p a‬مبمملظ‪ّ٦‬د‪ّ٣‬م‪ div‬م‪,‬مميغملؽمل‪ّ١‬مأنمتؽملصملّٕمإشمماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬مظؿؿسملّّم‬ ‫اظزمل‪ّ٦‬رةم‪ :‬م‬
  
  ‫م‬
  
  ‫‪51‬‬
  
  ‫تقملع‪ ّ٤‬مظؽملممل معغملؿؾهمل م‪ jQuery‬مػّٔه ماإلعغملمملغؿملهمل مسدل مجمؼمل‪ّ٦‬سهمل مع‪ ّ٤‬ماظّٓوال مصمملظّٓٓاظّهمل م‪ wrap‬متعمل‪ّ٦‬مم‬ ‫بؿطملػملؿمل‪ ّٟ‬مط‪ ّ٢‬مسؽملزملّٕ مع‪ ّ٤‬مجمؼمل‪ّ٦‬سهمل ماظضملؽملمملصّٕ ماظيت متشملؾٓ‪ ّ٠‬مسػملؿملؾملممل مبمملظطملالف ماٌؼملّٕٓر مهلممل مط‪ّ٦‬دؿمل‪ّٛ‬م‬ ‫‪parameter‬مومهلّٔهماظّٓاظهملماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;(‟‪$)‟selector‟(.wrap)‟Wrapper‬‬
  
  ‫حؿملىملمتعمل‪ّ٦‬ممبؿطملػملؿمل‪ّٟ‬مط‪ّ٢‬مع‪ّ٤‬ماظضملؽملمملصّٕماحملّٓدةمبمملحملّٓدم‪selector‬مبمملظطملالفم‪Wrapper‬موم‬ ‫ظ‪ّ٦‬مأردغمملمه‪ّ٦‬ؼ‪ّ٢‬ماظرملغمل‪ّ٢‬ماظؿ‪ّ٦‬ضؿملق‪ّ٨‬ماظلمملب‪ّ٠‬مإشممذؿملظملّٕةم‪jQuery‬مظغملؿؾؽملمملمعـالًم‪ :‬م‬ ‫;(‟>‪$)‟img‟(.wrap)‟
  ‫و مبمملظظملضمل‪ ّ٢‬مصكملن ماظّٓاظهمل ماظلمملبعملهمل متعمل‪ّ٦‬م مبؿطملػملؿمل‪ ّٟ‬مط‪ ّ٢‬مسؽملزملّٕ مص‪ّ٦‬رة مبمملٌلؿؽملّٓ مبضملؽملزملّٕ ماظّٕاب‪ ّٛ‬ماٌؼملّٕر مهلمملم‬ ‫مبضملؽمل‪ ّ٧‬مأن مؼزملؾّّ مػؽملمملك مشالف مظغمل‪ ّ٢‬مسؽملزملّٕ مع‪ ّ٤‬ماجملؼمل‪ّ٦‬سهمل ماحملّٓدة مو مظ‪ ّ٦‬مأردغممل متطملػملؿمل‪ ّٟ‬مصمؿمل‪ّٝ‬م‬ ‫اظضملؽملمملصّٕماحملّٓدةمبطملالفمواحّٓمصعمل‪ّٛ‬مِّت‪ّ٧‬مدورماظّٓاظهملم‪ wrapAll‬ماظيتمتػمليبمرشؾؿؽملمملممتمملعمملًمومهلمملم‬ ‫اظرملغمل‪ّ٢‬م‪ :‬م‬ ‫;(‟‪$)‟selector‟(.wrapAll)‟Wrapper‬‬
  
  ‫وماٌـممللماظؿمملظ‪ّ٨‬مؼ‪ّ٦‬ضِّّّمسؼمل‪ّ٢‬ماظّٓاظّهملماِّوشمم‪Wrap‬م‪ :‬م‬ ‫>‪‪"‪<script src="jquery.js" type="text/javascript‬‬ ‫>‪"‪<script type="text/javascript‬‬ ‫{ )(‪$(document).ready(function‬‬ ‫;)'>‪$('img[src]').wrap('
  ‫‪52‬‬
  
  ‫;)}‬ ‫>‪‪‪‪‪‪
  ‫إذ مأغٖ‪ ّ٥‬مسؽملّٓ مادؿضملّٕاض مػّٔه ماظزملظملقهمل مدؿملؿ‪ ّ٣‬متطملػملؿمل‪ ّٟ‬ماظزملٗ‪ّ٦‬رة مبمملظّٕٓاب‪ ّٛ‬مو مػّٔا مهعملؿمل‪ ّ٠‬مصضملػمل‪ ّ٨‬مظػملرملغمل‪ّ٢‬م‬ ‫اظؿ‪ّ٦‬ضؿملق‪ّ٨‬ماظّٔيمسُّٕٔضَميفمبّٓاؼهملماظظملعملّٕةم‪ .‬م‬ ‫يفمحمملالتمأخّٕىمضّٓمدمؿمملجمإشممتطملػملؿمل‪ّٟ‬محمؿ‪ّ٦‬ىمجمؼمل‪ّ٦‬سهملمع‪ّ٤‬ماظضملؽملمملصّٕمبّٓالًمع‪ّ٤‬متطملػملؿملظملؾملمملمغظمللؾملمملموم‬ ‫ػّٔامعمملمتعملِّّٓع‪ّ٥‬ماظّٓاظهملم‪wrapInner‬ماظيتمتلؿكّٓممبمملظرملغمل‪ّ٢‬م‪ :‬م‬ ‫;(‟‪$)‟selector‟(.wrapInner)‟Wrapper‬‬
  
  ‫عػملق‪ّ٦‬زهملم‪:‬مميغمل‪ّ٤‬ماالدؿظملمملدةمع‪ّ٤‬مدوالماظؿطملػملؿمل‪ّٟ‬مظؽمللّْماظضملؽملمملصّٕمع‪ّ٤‬معغملمملنمإشممآخّٕمضؼمل‪ّ٤‬ماٌلؿؽملّٓموم‬ ‫ذظ‪ّ١‬مس‪ّ٤‬مرّٕؼ‪ّ٠‬مجضمل‪ّ٢‬ماظطملالفماىّٓؼّٓمسؽملزملّٕاًمع‪ّ٤‬ماظضملؽملمملصّٕماٌ‪ّ٦‬ج‪ّ٦‬دةمأصالًميفماٌلؿؽملّٓم‪ .‬م‬
  
  ‫‪53‬‬
  
  ‫دوالمحّٔفمسؽملمملصّٕماٌلؿؽملّٓم‪ :‬م‬ ‫ت‪ّ٦‬صّٕ معغملؿؾهمل م‪ 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‬ماًمملصمب‪ ّ١‬مومظغمل‪ ّٖ٤‬مػّٔهماِّػؼملؿملهملمتفملت‪ّ٨‬مسػمل‪ّ٧‬محلمملبمصضمل‪ّ٦‬بهملميفم‬ ‫اظؿضملمملع‪ّ٢‬معضملؾملمملمبّٕجمؿملمملًمع‪ّ٤‬مرّٕفماظضملؼملؿمل‪ّ٢‬مومؼؿفػملّ‪ّ٧‬مذظ‪ّ١‬مب‪ّ٦‬ض‪ّ٦‬حمع‪ّ٤‬مخاللمسّٓةمدؿملؽملمملرؼ‪ّ٦‬ػمملتمومظضمل‪ّٖ٢‬م‬ ‫ػّٔامعمملمدص‪ّٝ‬ماهلؿملؽهملماظضملمملٌؿملهملم‪W3C‬مظّٓس‪ّ٦‬ةمعدلجم‪ّ٨‬م‪java script‬مإشممائّرمأثؽملمملءماظؿضملمملع‪ّ٢‬م‬ ‫عضملؾملممل مو مهلّٔا مو مذاك متقملع‪ ّ٤‬معغملؿؾهمل م‪ jQuery‬مجمؼمل‪ّ٦‬سهمل مخمملصهمل مع‪ ّ٤‬ماظّٖٓوال مظػملؿضملمملع‪ ّ٢‬مع‪ ّٝ‬مسؽملمملصّٕم‬
  
  ‫‪54‬‬
  
  ‫اظؽملؼملمملذجمومتظملمملديمأشػملنملماٌرملمملط‪ّ٢‬ماظرملمملئضملهملمبفملدؾمل‪ّ٢‬ماظشملّٕقمومػؽملمملمغلؿؾمل‪ ّٗ٢‬محّٓؼـؽملمملمس‪ّ٤‬مػّٔهماظّٖٓوالم‬ ‫بممليّٓؼىملمس‪ّ٤‬ماظّٓٓاظّهملم‪val‬ماظيتمتلؿكّٓممظعملّٕاءةماظعملؿمل‪ّ٣‬مع‪ّ٤‬مسؽملمملصّٕماظؽملؼملمملذجمومهلمملماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;)(‪$(‟selector‟).val‬‬
  
  ‫تضملؿملّٓمػّٔه ماظّٓاظهمل مضؿملؼملهملًموحؿملّٓةًميفمحمملل مطمملنماحملّٓد م‪ selector‬مؼضملؿملّٓ مسؽملزملّٕاًموحؿملّٓاًمػ‪ّ٨‬م‬ ‫ضؿملؼملهملمذظ‪ّ١‬ماظضملؽملزملّٕم‪,‬مأعٓمملميفمحممللمط‪ّ٦‬نماٌُقِّّٓدم‪ selector‬مؼضملؿملّٓمأطـّٕمع‪ّ٤‬مسؽملزملّٕمصكملنماظّٓاظهملم‬ ‫‪val‬متضملؿملّٓمضؿملؼملهملمأوٖلمسؽملزملّٕمع‪ّ٤‬مػّٔهماظضملؽملمملصّٕم‪ .‬م‬ ‫عػملق‪ّ٦‬زهمل م‪ :‬مؼعملزملّٓ مبعملؿملؼملهمل ماظضملؽملزملّٕ مػؽملممل ماظعملؿملؼملهمل ماظيت متضملّٕٓصؾملممل ماظ‪ّ٦‬اصظملهمل م‪ value‬مظّٔظ‪ ّ١‬ماظضملؽملزملّٕ مو مع‪ّ٤‬م‬ ‫اىّٓؼّٕمبمملظّٔطّٕمػؽملمملمأنماظّٓٓاظّهمل م‪ val‬ميفمحمملظهملمادؿّٓسمملئؾملممل مسػمل‪ّ٧‬مسؽملزملّٕمهّٓؼّٓمؼلؼملّّمبمملخؿؿملمملرمأطـّٕم‬ ‫ع‪ّ٤‬مخؿملمملرميفموضومل مواحّٓ م‪ Multi-select element‬مصكملنٓ ماظّٓاظّهمل م‪ val‬متضملؿملّٓ معزملظمل‪ّ٦‬صهملًم‬ ‫متـ‪ّ٢‬ماًؿملمملراتماٌؽملؿعملمملةمع‪ّ٤‬مضؾ‪ّ٢‬ماٌلؿكّٓمم‪ .‬م‬
  
  ‫ومطؼملـممللمسػمل‪ّ٧‬مادؿضملؼملمملهلمملمصكملنمطؿمملبهملمدشملّٕمطمملظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;)(‪$(‟#firstName‟).val‬‬
  
  ‫ؼضملؿملّٓمضؿملؼملهملماظ‪ّ٦‬اصظملهملم‪value‬مظػملضملؽملزملّٕمذوماٌضملّٕفم‪firstName‬م‪ .‬م‬ ‫سػمل‪ّ٧‬ماظّٕش‪ّ٣‬مع‪ّ٤‬مأنماظّٓاظّهملم‪ val‬مه‪ ّٗ٢‬ماظغملـرلمع‪ّ٤‬معرملمملط‪ّ٢‬ماظؿضملمملع‪ّ٢‬مع‪ّٝ‬ماظضملؽملمملصّٕمإالمأغ‪ّ٥‬مرمنملمتّٔطّّٕم‬ ‫غعملشملؿنيمػمملعؿنيمسؽملّٓماظؿضملمملع‪ّ٢‬معضملؾملمملم‪:‬ماظؽملعملشملهملماِّوشمممأغ‪ّ٥‬مإنمطمملنمأولمسؽملزملّٕمع‪ّ٤‬ماجملؼمل‪ّ٦‬سهملماظيتم‬ ‫ؼضملؿملّٓػمملماحملّٓدم‪selector‬مظؿملّٗمسؽملزملّٕممن‪ّ٦‬ذجمصكملنمخشملفملمّمبّٕجمؿملمملًمدؿملصملؾملّٕميفمعلؿؽملّٓماظذملم‪Web‬م‬ ‫‪ ,‬ماظؽملعملشملهمل ماظـمملغؿملهمل مػ‪ ّ٨‬مأن ماظّٓاظهمل م‪ val‬متضملؿملّٓ مضؿملؼملهمل ماظ‪ّ٦‬اصظملهمل م‪ value‬مظضملؽملمملصّٕ مصؽملمملدؼ‪ ّ٠‬ماالخؿؿملمملرم‬ ‫‪ check box‬مو م‪ radio button‬مبطمل‪ ّٚ‬ماظؽملصملّٕ مس‪ ّ٤‬مط‪ّ٦‬ن مػّٔه ماظضملؽملمملصّٕ ميف محمملظهملم‬
  
  ‫‪55‬‬
  
  ‫‪ selected‬مأومالمومظغمل‪ ّٖ٤‬محالًمهلّٔهماٌرملغملػملهملمؼؿ‪ّ٦‬صّٕمبلؾمل‪ّ٦‬ظهملمبضملّٓمعّٕاجضملهملمجّٓولماحملِّّٓدات موم‬ ‫طؿمملبهملمذ‪ّ٨‬ءمذؾؿمل‪ّ٥‬ممبمملمؼػمل‪ّ٨‬م‪ :‬م‬ ‫;)(‪:selected‟).val‬ػ‪name=radioGroup‬ؼ‟(‪$‬‬
  
  ‫م‬ ‫ظػملّٓٓاظّهملم‪val‬مادؿكّٓاممآ خّٕمشرلمضّٕاءةماظعملؿمل‪ّ٣‬مع‪ّ٤‬مسؽملمملصّٕماظؽملؼملمملذجمومػ‪ّ٦‬مطؼملمملمتؿ‪ّ٦‬ض‪ّٝ‬مإدؽملمملدماظعملؿمل‪ّ٣‬مهلمملموم‬ ‫ظػملعملؿملمملممبؾملّٔهماظضملؼملػملؿملهملمغلؿضملؼمل‪ّ٢‬ماظرملغمل‪ّ٢‬م‪ :‬م‬ ‫;)‪$(‟selector‟).val(value‬‬
  
  ‫م‬
  
  ‫طؼملممل متلؿكّٓم ماظّٓاظهمل م‪ val‬مظػملعملؿملمملم مبؿطملؿملرل محمملظهمل مسؽملمملصّٕ م‪ radio buttons‬مو م ‪check‬‬ ‫‪boxes‬مومسؽملمملصّٕم>‪<select‬مإشممحمملظهملماظؿقّٓؼّٓم‪selected‬مومذظ‪ّ١‬مسدلماظزملؿملطملهملم‪ :‬م‬ ‫;)‪$(‟selector‟).val(values‬‬
  
  ‫حؿملىملمتعمل‪ّ٦‬مماظّٓاظهملمبمملظؾقىملمضؼمل‪ّ٤‬ماظضملؽملمملصّٕماظيتمؼضملؿملّٓػمملماحملّٓدم‪selector‬مس‪ّ٤‬ماظضملؽملمملصّٕماظيتم‬ ‫هؼمل‪ ّ٢‬مإحّٓى ماظعملؿمل‪ ّ٣‬مأٌّط‪ّ٦‬رة ميف معزملظمل‪ّ٦‬صهمل ماظعملؿمل‪ ّ٣‬م‪ values‬ماٌؼملّٕرة مظػملّٓاظهمل مو موضمل‪ ّ٢‬محمملظؿؾملمملم‬ ‫‪selected‬م‪,‬مصمملىؼملػملهملماظؿمملظؿملهملمعـالًم‪ :‬م‬ ‫;)]‟‪$)‟input‟(.val([‟abokamal‟,‟jQuery‟,‟Mukhtar‬‬
  
  ‫وضمل‪ّ٢‬مايمملظهملم‪selected‬محمملظهملًمىؼملؿمل‪ّٝ‬مسؽملمملصّٕماظؽملؼملمملذجماظيتمهؼمل‪ّ٢‬مواصظملهملم‪value‬ماًمملصٓهملم‬ ‫بؾملممل مإحّٓى ماظعملؿمل‪ ّ٣‬م‪ abokamal‬مأو م‪ jQuery‬مأو م‪ Mukhtar‬مو ماٌـمملل ماظؿمملظ‪ ّ٨‬مؼ‪ّ٦‬ضِّّّ مػّٔام‬ ‫االدؿكّٓام‪ :‬م‬ ‫>‪
  ‫‪56‬‬
  
  ‫>‪"‪<script src="jquery.js" type="text/javascript‬‬ ‫>‪"‪<script type="text/javascript‬‬ ‫{ )(‪$(document).ready(function‬‬ ‫;)]'‪$('*').val(['abokamal', 'jQuery‬‬ ‫;)}‬ ‫>‪‪‪"‪<select id="Select1‬‬ ‫>‪Abokamal‪jQuery‪Mukhtar‪‪‪
  ‫م‬ ‫عػملق‪ّ٦‬زهملم‪:‬مضّٓمؼغمل‪ّ٦‬نمػؽملمملكمبضمل‪ّٚ‬ماظلؿملؽملمملرؼ‪ّ٦‬ػمملتماظيتمالمتػمليبمصؿملؾملمملماظّٓاظهملم‪val‬مصمؿمل‪ّٝ‬معؿشملػملؾمملت‪ّ١‬موم‬ ‫حؿملؽملؾملممل مميغملؽمل‪ ّ١‬موّٕبهمل مادؿضملؼملمملل ماإلضمملصهمل م‪ plugin‬مذات ماالد‪ ّ٣‬م‪ Form Plugin‬مو ماظيتم‬ ‫دؽملؼملّٕٗمسػملؿملؾملمملميفماظّٓضمملئ‪ّ٠‬ماًمملصهملمبمملإلضمملصمملتم‪ .‬م‬
  
  ‫‪57‬‬
  
  ‫م‬ ‫م‬ ‫م‬ ‫م‬
  
  ‫ع‪ّ٤‬ماظّٓضؿملعملهملم‪57‬مإشمماظّٓضؿملعملهملم‪75‬م‪ :‬م‬
  
  ‫اِّحّٓاث م‬ ‫‪Events‬‬ ‫م‬
  
  ‫‪58‬‬
  
  ‫اِّحّٓاثم‪Events‬م‪ :‬م‬ ‫ضؾ‪ّ٢‬مأنمغؽملمملضّ٘مادؿـؼملمملرم‪jQuery‬مظؿلؾملؿمل‪ّ٢‬ماظؿضملمملع‪ّ٢‬معضملؾملمملمسػملؿملؽملمملمأنمغضملّٕفمذؿملؽمملًمبلؿملشملمملً مسؽملؾملمملم‪,‬معمملمػ‪ّ٨‬م‬ ‫اِّحّٓاثم؟ م‬ ‫حلؽملمملً م‪ ..‬ممتؿػمل‪ ّ١‬مطػملؼملهمل محّٓث م‪ Event‬ماٌضملؽمل‪ ّ٧‬مغظملل‪ ّ٥‬ميف مخمؿػمل‪ ّٟ‬متعملؽملؿملمملت ماظدلجمهمل مد‪ّ٦‬اءّ مأطؽملمملم‬ ‫غدلعيملمتشملؾؿملعملمملًمظلشملّّماٌغملؿنملمأومتشملؾؿملعملمملًمظػملذملم‪ Web‬مأومتشملؾؿملعملمملًمظػملؾمل‪ّ٦‬ات‪ّٟ‬ماظّٔطؿملهملمأومظطملرلػمملمومطمملٌضملؽمل‪ّ٧‬م‬ ‫اظػملطمل‪ّ٦‬ي مالزل‪ّ٥‬مؼعملزملّٓمبممليّٓثمحّٓوثمأعّٕمعمملمأومتطملؿملرلمعضملؿملٓ‪ّ٤‬مؼرملضملّٕمب‪ّ٥‬ماظؿشملؾؿمل‪ّ٠‬مومؼلؿفؿملنملمظ‪ّ٥‬مأحؿملمملغمملًم‬ ‫و مػّٔا مػ‪ ّ٦‬ماظطملمملظنمل‪ -‬مأو مؼؿفمملػػمل‪ ّ٥‬ميف مأحؿملمملن مأخّٕى مو مػؽملمملك مسّٓٓة مأغ‪ّ٦‬اع مع‪ ّ٤‬ماِّحّٓاث معؽملؾملممل معمملم‬‫ؼلؾؾ‪ ّ٥‬م غصملمملمماظؿرملطملؿمل‪ّ٢‬معـ‪ّ٢‬مبّٓءمترملطملؿمل‪ّ٢‬ماظؿشملؾؿمل‪ّ٠‬مأومإغؾملمملءمترملطملؿملػمل‪ّ٥‬مأومععملمملرضملؿ‪ّ٥‬مبرملغمل‪ّ٢‬معضملنيمومعؽملؾملمملمعمملم‬ ‫ؼلؾؾ‪ّ٥‬ماٌلؿكّٓممومػّٔامعمملمؼؾملؼملؽملمملمصّٕاحهملًمومع‪ّ٤‬ماِّحّٓاثماظيتمؼلؾؾؾملمملماٌلؿكّٓممحّٓثماظؽملعملّٕمسػمل‪ّ٧‬م‬ ‫زرمعضملنيميفماظؿشملؾؿمل‪ّ٠‬م‪ Click‬مأومحّٓثماظؽملعملّٕماٌّٖدوجم‪ Double click‬مأومحّٓثمعّٕورم‬ ‫اظظملفملرةمص‪ّ٦‬قمعؽملشملعملهملمعمملمع‪ّ٤‬ماظؿشملؾؿمل‪ّ٠‬م‪Mouse move‬م‪...‬مإخل‪ .‬م‬ ‫اظؿشملؾؿملعملمملتمبشملؾؿملضملؿؾملمملمالمتلؿفؿملنملمظألحّٓاثمومظغملؽملؾملمملمترملضملّٕمحبّٓوثؾملمملممبضملؽمل‪ّ٧‬مأنمتشملؾؿملعمل‪ّ١‬مؼضملّٕفممتمملعمملًم‬ ‫أغٓ ‪ ّ١‬مضؼملومل مبمملظؽملعملّٕ مسػمل‪ ّ٧‬ماظّٖر ماظظملالغ‪ ّ٨‬ميصملهمل ماظؽملعملّٕ مطؼملممل مؼضملّٕف ممتمملعمملً مأغ‪ ّ١‬مضؼملومل مبمملظغملؿمملبهمل ميف معّٕب‪ّٝ‬م‬ ‫اظؽمل‪ ّٙ‬ميصملهمل ماظغملؿمملبهمل مو مظغملؽمل‪ ّ٥‬مبرملغمل‪ ّ٢‬ماصذلاض‪ ّ٨‬مؼؿفمملػ‪ ّ٢‬مػّٔه ماِّحّٓاث مو مال مؼلؿفؿملنمل مهلممل مإال مإنم‬
  
  ‫أجدلهماٌدلعيملمسػمل‪ّ٧‬مذظ‪ّ١‬مبرملغمل‪ّ٢‬مصّٕؼّّمس‪ّ٤‬مرّٕؼ‪ّ٠‬معمملمؼضملّٕفمبمملظؿضملمملع‪ّ٢‬مع‪ّٝ‬ماِّحّٓاثمأوم ‪Event‬‬ ‫‪ handling‬م‪,‬مومِّنمػّٔاماظغملؿمملبمؼلضمل‪ّ٧‬مظؿؾلؿمل‪ّٛ‬ماِّع‪ّ٦‬رمومؼّٓٓس‪ّ٨‬مذظ‪ّ١‬مصؿملغملظمل‪ّ٨‬مأنمأض‪ّ٦‬ل مسػمل‪ّ٧‬م‬ ‫دؾؿمل‪ ّ٢‬ماظؿؾلؿمل‪ ّٛ‬مأغ‪ ّ٥‬مظػملؿضملمملع‪ ّ٢‬مع‪ ّٝ‬محّٓث معضملني م‪-‬و ماظغملالم مػؽملممل مسمملم مو مظؿملّٗ ميف مجممملل ماظذمل م‪Web‬م‬ ‫صقلنمل‪ -‬مؼغملظمل‪ ّ٨‬مأن متغملؿنمل مداظهملً م‪ function‬متعمل‪ّ٦‬م مبضملؼملػملؿملهمل معضملؿملؽملهمل مث‪ ّ٣‬متعمل‪ّ٦‬م مبّٕب‪ ّٛ‬مػّٔه ماظّٓاظهملم‬ ‫بممليّٓث مومسؽملّٓػمملمتزملؾّّمادؿفمملبهملمتشملؾؿملعمل‪ّ١‬مسؽملّٓعمملمؼؿ‪ّ٣‬متظملفرلمايّٓثم(سؽملّٓعمملمؼعمل‪ّٝ‬مايّٓث)متؽملظملؿملّٔم‬ ‫اظّٓاظهملمإٌّتؾشملهملمب‪ .ّ٥‬م‬
  
  ‫‪59‬‬
  
  ‫يفمجمممللماظذملم‪ Web‬ماٌرملغملػملهملماظضملصملؼمل‪ّ٧‬ماظيت مطمملغومل مت‪ّ٦‬اج‪ّ٥‬ماٌدلجمنيمومعشمل‪ّ٦‬ريمع‪ّ٦‬اض‪ّٝ‬ماالغذلغوملم‬ ‫ػ‪ّ٨‬معرملغملػملهملماخؿالفماٌؿزملظملقمملتم‪ Browsers‬محؿملىملمأنمط‪ّ٢‬معؿزملظملّّمميؿػمل‪ ّ١‬مرّٕؼعملؿ‪ّ٥‬ماًمملصهملم‬ ‫يفماظؿضملمملع‪ّ٢‬مع‪ّٝ‬متشملؾؿملعملمملتماظذملم‪ Web‬م ومسؽملّٓمايّٓؼىملمس‪ّ٤‬ماِّحّٓاثمصمملِّعّٕمؼشمل‪ّ٦‬لمومؼشمل‪ّ٦‬لمظؿمللؿشملؿمل‪ّٝ‬م‬ ‫اٌشمل‪ّ٦‬رمعؽملمملمطؿمملبهملمذؿملظملّٕة م‪ Java Script‬متضملؼمل‪ّ٢‬مسػمل‪ّ٧‬مصمؿمل‪ّٝ‬ماٌؿزملظملقمملتم‪,‬مع‪ّٝ‬م‪jQuery‬م‬ ‫غػملعمل‪ّ٨‬مبغمل‪ّ٢‬مػّٔهماٌرملمملط‪ّ٢‬مخػمل‪ّٟ‬مزؾمل‪ّ٦‬رغمملمومغلؿضملؼمل‪ّ٢‬مدوالماٌغملؿؾهملمظغملؿمملبهملمذؿملظملّٕاتمسزملّٕؼهملمتضملؼمل‪ّ٢‬م‬ ‫ظّٓىماىؼملؿمل‪ّٝ‬مبسملؼملمملنمطدلىمذّٕطمملتماظدلجمؿملمملتميفماظضملمململ‪ .‬م‬ ‫يفماٌضملمملؼرلماٌ‪ّ٦‬حّٓةمظذملم‪ HTML‬موم‪ XHTML‬مػؽملمملكمجمؼمل‪ّ٦‬سهملمع‪ّ٤‬ماِّحّٓاثماظيتمهلمملمادؿفمملبمملتم‬ ‫اصذلاضؿملهملمالمتؿشملػملنملمعؽملمملمطؿمملبهملمأيمذؿملظملّٕةمصؼملـالًمسؽملّٓمتظملفرلمحّٓثماظؽملعملّٕماٌظملّٕدم‪Click‬مسػمل‪ّ٧‬مراب‪ّٛ‬م‬ ‫‪ Link‬مصكملن ماٌؿزملظملّّ مؼؽملعملػملؽملممل مإشم ماظزملظملقهمل ماىّٓؼّٓة مدون مأي متّٓخ‪ ّ٢‬معؽملممل مِّن مػّٔه ماالدؿفمملبهملم‬ ‫ع‪ّ٦‬ج‪ّ٦‬دة مضؼملؽملؿملمملً مو مػّٔا مػ‪ ّ٦‬مايمملل مع‪ ّٝ‬مبضمل‪ ّٚ‬ماِّحّٓاث ماِّخّٕى مو مبمملظشملؾ‪ ّٝ‬مميغمل‪ ّ٤‬مومملوز مػّٔهم‬ ‫االدؿفمملبمملتماالصذلاضؿملهمل مسؽملّٓمايمملجهملم‪,‬مأعٖمملمبمملظؽمللؾهملمظػملشملّٕؼعملهملماظؿعملػملؿملّٓؼٓهملمظػملؿضملمملع‪ّ٢‬مع‪ّٝ‬ماِّحّٓاث مصكملغٖؾملمملم‬ ‫تعملؿسمل‪ ّ٨‬مأنمغلؿضملنيمب‪ّ٦‬اصظملمملتمخمملصهملمت‪ّ٦‬ض‪ّٝ‬مع‪ّٝ‬ماظ‪ّ٦‬د‪ّ٦‬مم مظّٕب‪ّٛ‬محّٓثمعضملؿملٓ‪ّ٤‬مبّٓاظهمل معضملؿملؽملهمل م‪,‬مأشػملنملم‬ ‫أزلمملءمػّٔهماظ‪ّ٦‬اصظملمملتمتؾّٓأمحبّٕفماىّٕم‪ on‬مصؼملـالًمع‪ّ٤‬مأج‪ّ٢‬محّٓثماظؽملعملّٕم‪ Click‬مػؽملمملكمواصظملهملم‬ ‫ازلؾملممل م‪ onclick‬مو مع‪ ّ٤‬مأج‪ ّ٢‬محّٓث معّٕور ماظظملفملرة م‪ mouse Move‬مػؽملمملك مواصظملهمل مازلؾملمملم‬ ‫‪ onmousemove‬مو مع‪ ّ٤‬مأج‪ ّ٢‬محّٓث ماالغؿعملمملل مإشم مسؽملزملّٕ م‪ focus‬مػؽملمملك مواصظملهمل مازلؾملمملم‬ ‫‪ onfocus‬مومػغملّٔام‪..‬مو مظضمل‪ ّٖ٢‬ماٌـممللماظؿمملظ‪ ّ٨‬مؼ‪ّ٦‬ضّّ ماظزملٓ‪ّ٦‬رة مسػملؼملمملًمأغ‪ّ٥‬معغملؿ‪ّ٦‬بمبشملّٕؼعملهمل متعملػملؿملّٓؼهملم‬ ‫دونماالسؿؼملمملدمسػمل‪ّ٧‬ماٌغملؿؾهملماظّٕائضملهملم‪jQuery‬م‪ :‬م‬ ‫>‪‪”‪type=”text/javascript‬م‪<script‬‬ ‫{م)(‪function myClickHandler‬‬ ‫;)”متماظؽملعملّٕمسػمل‪ّ٧‬ماظّٖر“(‪alert‬‬
  
  ‫‪60‬‬
  
  ‫;}‬
  
  ‫{م)(‪function myMoveHandler‬‬ ‫;)”متمعّٕورمعقملذِّّٕماظظملفملرةمص‪ّ٦‬قماظزمل‪ّ٦‬رة“(‪alert‬‬ ‫;}‬ ‫>‪‪‪‪onclick=”myClickHandler()” /‬‬ ‫>‪src=”myPic.gif” onmousemove=”myMoveHandler()” /‬م‪‪‪
  ‫اظزملظملقهملم اظؾلؿملشملهملمهؿ‪ّ٦‬يمزراًمومص‪ّ٦‬رةًمومظ‪ّ٦‬ماغؿؾؾملوملمظ‪ّ٦‬اصظملمملتماظّٖرمظّٕأؼوملماظ‪ّ٦‬اصظملهملم م‪onclick‬موم‬ ‫ظ‪ّ٦‬مدضعملوملميفمضؿملؼملؿؾملمملمضػملؿملالًمظ‪ّ٦‬جّٓتؾملمملمازلمملًمظّٓاظهملمع‪ّ٤‬مدوالم‪ java script‬ماٌ‪ّ٦‬ج‪ّ٦‬دةميفم‬ ‫اٌلؿؽملّٓمأالموػ‪ّ٨‬ماظّٓاظهملم‪ myClickHandler‬م‪,‬مطؼملمملمأغ‪ّ١‬مظ‪ّ٦‬مدضعملوملميفمواصظملمملتماظزمل‪ّ٦‬رةم‬ ‫ظّٕأؼوملماظ‪ّ٦‬اصظملهملم‪ onmousemove‬ماظيتمهؿ‪ّ٦‬يمسػمل‪ّ٧‬ماد‪ّ٣‬مظّٓاظهملمأخّٕىمع‪ّ٤‬مدوالماٌلؿؽملّٓموم‬ ‫بؽملصملّٕةمبلؿملشملهملمغضملّٕفمأنماظّٓاظهملماِّوشممدؿُلؿّٓس‪ّ٧‬مسؽملّٓماظؽملٓعملّٕمسػمل‪ّ٧‬ماظّٖٓرموماظـمملغؿملهملمدؿُلؿّٓس‪ّ٧‬مسؽملّٓمعّٕورم‬ ‫عقملذّٕماظظملفملرةمص‪ّ٦‬قماظزمل‪ّ٦‬رةمومظ‪َّ١‬مأنموّٕبم‪.‬‬
  
  ‫‪61‬‬
  
  ‫حلؽملمملً م‪ ..‬ماٌـمملل ماظلمملب‪ ّ٠‬مؼضملؿدل مأبل‪ ّٛ‬مأعـػملهمل ماظؿضملمملع‪ ّ٢‬مع‪ ّٝ‬ماِّحّٓاث مسػمل‪ ّ٧‬ماإلرالق مو مميغمل‪ ّ٤‬ماتؾمملعم‬ ‫رّٕؼعملهملماٌـممللميفماظؿضملمملع‪ّ٢‬مع‪ّٝ‬ماِّحّٓاثمومادؿكّٓاممأواعّٕم‪ jQuery‬مضؼمل‪ّ٤‬مجل‪ّ٣‬ماظّٓاظهملماظيتم‬ ‫تُلؿّٓس‪ّ٧‬مسؽملّٓمتظملفرلمايّٓثمومظغمل‪ّ٤‬ماظشملّٕؼعملهملماِّصسمل‪ّ٢‬مػ‪ّ٨‬مادؿكّٓامممن‪ّ٦‬ذجمأحّٓاثم‪.jQuery‬‬ ‫تقملع‪ ّ٤‬معغملؿؾهمل م‪ jQuery‬مرّٕؼعملهملً مدؾملػملهملً مظػملؿضملمملع‪ ّ٢‬مع‪ ّٝ‬ماِّحّٓاث مسدل مجمؼمل‪ّ٦‬سهمل مع‪ ّ٤‬ماظّٓوال معؽملؾملمملم‬ ‫االحذلاصؿملهمل ماظيتمدفملغمملضرملؾملمملمبضملّٓماجملؼمل‪ّ٦‬سهمل ماِّخّٕى ماظؾلؿملشملهملماظيتمتعملمملب‪ ّ٢‬مط‪ّ٢‬مداظهملمعؽملؾملممل مواصظملهملًمع‪ّ٤‬م‬ ‫اظ‪ّ٦‬اصظملمملتماًمملصهملمبمملِّحّٓاثمظغمل‪ّ٤‬مبضملّٓماالدؿطملؽملمملءمس‪ّ٤‬محّٕفماىّٕم‪ on‬ميفماالد‪ّ٣‬م‪,‬مصؼملـالًماظّٓاظهملم‬ ‫اظؾلؿملشملهمل ماظيت متضملني ماظّٓاظهمل ماظيت مدؿلؿفؿملنمل مظػملقّٓث م‪ click‬مازلؾملممل م‪ click‬مو مظؿملّٗم‬ ‫‪ onclick‬مو مأخؿؾملممل ماظيت متضملني ماظّٓاظهمل ماظيت مدؿلؿفؿملنمل ميّٓث معّٕور ماظظملفملرة مازلؾملمملم‬ ‫‪ mousemove‬مو مظؿملّٗ م‪ onmousemove‬مو مطؼملـمملل مسػمل‪ ّ٧‬مادؿضملؼملمملهلممل مغلؿشملؿمل‪ ّٝ‬مإسمملدة مطؿمملبهملم‬ ‫اظزملظملقهملماظلمملبعملهملمبمملظرملغمل‪ّ٢‬م‪ :‬م‬ ‫>‪‪”‪type=”text/javascript” src=”jquery.js‬م‪<script‬‬ ‫>‪”‪type=”text/javascript‬م‪<script‬‬ ‫{)(‪$(document).ready(function‬‬ ‫{)(‪$(„#Button1‟).click(function‬‬ ‫;("متماظؽملعملّٕمسػمل‪ّ٧‬ماظّٖر")‪alert‬‬ ‫;)}‬ ‫{)(‪$(„img‟).mousemove(function‬‬ ‫;("متمعّٕورماٌقملذّٕمص‪ّ٦‬قماظزمل‪ّ٦‬رة")‪alert‬‬
  
  ‫‪62‬‬
  
  ‫;)}‬ ‫م;)}‬ ‫>‪‪‪‪” /‬اغعملّٕغ‪id=”Button1” type=”button” value=”ّ٨‬م‪‪src=”myPic.gif” /‬م‪‪‪
  ‫سؼمل‪ّ٢‬ماظزملظملقهملمأسالهمعشملمملب‪ّ٠‬ممتمملعمملًمظضملؼمل‪ّ٢‬ماظزملظملقهملماظعملّٓميهملمظغمل‪ّ٤‬مبمملدؿكّٓامم‪ jQuery‬مومع‪ّ٤‬مأوٓلم‬ ‫اظظمل‪ّ٦‬ائّٓ ماظصملمملػّٕة مػؽملممل مدون متظملغملرل مػ‪ ّ٨‬مدؾمل‪ّ٦‬ظهمل ماظغملؿمملبهمل مععملمملرغهملً مبمملظشملّٕؼعملهمل ماظعملّٓميهمل مإضمملصهمل مإشم مزؼمملدةم‬ ‫تؽملصملؿمل‪ّ٣‬مومتّٕتؿملنملماٌلؿؽملّٓمومظ‪ّ٦‬ماغؿؾؾملوملمإشمماظ‪ّ٦‬د‪ّ٦‬مماآلن مظّٕأؼوملمأغٓ‪ ّ٥‬مملمؼضملّٓمػؽملمملكمواصظملمملتمخمملصهملم‬ ‫بمملِّحّٓاث مو مبؾملّٔا متغمل‪ّ٦‬ن مضّٓ منقومل ميف مصزمل‪ ّ٢‬ماظؿزملؼملؿمل‪ ّ٣‬مس‪ ّ٤‬ماظرملؿملظملّٕة ماظدلجمؿملهمل ماًمملصهمل مبمملٌػمل‪ّٟ‬م‬ ‫عؽملشملعملؿملمملًمطؼملمملمميغمل‪ّ٤‬موض‪ّٝ‬ماظرملؿملظملّٕةماظدلجمؿملهملمطمملعػملهملًميفمعػمل‪ّٟ‬معؽملظملزمل‪ّ٢‬مومع‪ّ٤‬مث‪ّ٣‬متسملؼملؿملؽمل‪ّ٥‬مضؼمل‪ّ٤‬ماظزملظملقهملم‬ ‫طؼملمملمؼظملضمل‪ّ٢‬ماٌدلجم‪ّ٦‬نماىمملدٓونمومبؾملّٔامؼغمل‪ّ٦‬نمػؽملمملظ‪ّ١‬مصزمل‪ّ٢‬مصؿملّٖؼمملئ‪ّ٨‬محؿ‪ّ٧‬م! م‬ ‫وممبمملمأنمذغمل‪ّ٢‬مادؿّٓسمملءمدوال ماِّحّٓاثماظؾلؿملشملهملميف م‪ jQuery‬مغظملل‪ّ٥‬مىؼملؿمل‪ّٝ‬مػّٔهماظّٓٓوال مصالم‬ ‫داس‪َّ٨‬م ظّٔطّٕمط‪ّ٢‬مواحّٓةمعؽملؾملمملمبمملظؿظملزملؿمل‪ّ٢‬مومغغملؿظمل‪ّ٨‬مبّٔطّٕمأزلمملءمػّٔهماظّٓوالمومذّٕحؾملمملميفماىّٓاولم‬ ‫اظؿمملظؿملهملم‪:‬‬
  
  ‫‪63‬‬
  
  ‫دوالماِّحّٓاثماًمملصهملمبمملظؽملمملصّٔةم(اٌلؿؽملّٓمطغمل‪)ّ٢‬م‪:‬‬ ‫اد‪ّ٣‬مداظهملمايّٓث م‬
  
  ‫يصملهملمتظملفرلمايّٓث م‬
  
  ‫‪load‬‬
  
  ‫سؽملّٓمهؼملؿمل‪ّ٢‬ماٌلؿؽملّٓ م‬
  
  ‫‪unload‬‬
  
  ‫سؽملّٓمإشالقماٌلؿؽملّٓ م‬
  
  ‫دوالماِّحّٓاثماًمملصهملمبضملؽملمملصّٕماظؽملؼملمملذجم‪:‬‬ ‫اد‪ّ٣‬مداظهملمايّٓث م‬
  
  ‫يصملهملمتظملفرلمايّٓث م‬
  
  ‫‪blur‬‬
  
  ‫سؽملّٓعممل مخلمملرة ماظضملؽملزملّٕ مظػملذلطؿملّٖ م(‬
  
  ‫‪lose‬‬
  
  ‫‪)focus‬مػ‪ّ٦‬معضملمملطّٗممتمملعمملًمظػملقّٓثم‪ focus‬م‬
  
  ‫‪change‬‬
  
  ‫سؽملّٓمحّٓوثمتطملؿملرلمسػمل‪ّ٧‬ماظضملؽملزملّٕ م‬
  
  ‫‪submit‬‬
  
  ‫سؽملّٓمإردممللماظعملؿمل‪ّ٣‬مإشمماًمملدم م‬
  
  ‫‪focus‬‬
  
  ‫سؽملّٓ ماغؿعملمملل ماظذلطؿملّٖ مإشم ماظضملؽملزملّٕ م(عـالً ميف محمملظهملم‬ ‫االغؿعملممللمبنيمجمؼمل‪ّ٦‬سهملمع‪ّ٤‬محعمل‪ّ٦‬لماإلدخممللمصكملنم‬ ‫ايّٓث م‪ focus‬مؼعمل‪ ّٝ‬مسػمل‪ ّ٧‬محعمل‪ ّ٢‬ماإلدخممللم‬ ‫اظؿمملظ‪ ّ٨‬ممبفّٕد ماالغؿعملمملل مإظؿمل‪ ّ٥‬مس‪ ّ٤‬مرّٕؼ‪ ّ٠‬معظملؿمملحم‬ ‫اىّٓوظهملمم‪Tab‬معـالً) م‬
  
  ‫‪select‬‬
  
  ‫سؽملّٓ ماخؿؿملمملر مبؽملّٓ مع‪ ّ٤‬محمؿ‪ّ٦‬ؼمملت ماظضملؽملزملّٕ م( مغّٕىم‬ ‫ػّٔا مايّٓث ميف معـ‪ ّ٢‬محمملظهمل ماظضملؽملزملّٕم‬ ‫>‪)<select‬‬
  
  ‫‪64‬‬
  
  ‫‪scroll‬‬
  
  ‫سؽملّٓمهّٕؼ‪ّ١‬مأذّٕرهملماظؿؼملّٕؼّٕم(غّٕىمػّٔامايّٓثم‬ ‫يفمعـ‪ّ٢‬محمملظهملماظضملؽملزملّٕم‪textarea‬م) م‬
  
  ‫دوالماِّحّٓاثماًمملصهملمبػمل‪ّ٦‬حهملماٌظملمملتؿملّّم‪:‬‬ ‫اد‪ّ٣‬مداظهملمايّٓث م‬
  
  ‫يصملهملمتظملفرلمايّٓث م‬
  
  ‫‪keydown‬‬
  
  ‫سؽملّٓماظسملطمل‪ّٛ‬مسػمل‪ّ٧‬معظملؿمملحمع‪ّ٤‬مظ‪ّ٦‬حهملمعظملمملتؿملّّم م‬
  
  ‫‪keypress‬‬
  
  ‫بضملّٓ ماظسملطمل‪ ّٛ‬مسػمل‪ ّ٧‬معظملؿمملح مع‪ ّ٤‬مظ‪ّ٦‬حهمل ماٌظملمملتؿملّّ موم‬ ‫هّٕؼّٕه م‬
  
  ‫‪keyup‬‬
  
  ‫سؽملّٓمهّٕؼّٕمعظملؿمملحمع‪ّ٤‬مظ‪ّ٦‬حهملماٌظملمملتؿملّّ م‬
  
  ‫دوالماِّحّٓاثماًمملصهملمبفملزرارماظظملفملرةم‪:‬‬ ‫اد‪ّ٣‬مداظهملمايّٓث م‬
  
  ‫يصملهملمتظملفرلمايّٓث م‬
  
  ‫‪click‬‬
  
  ‫سؽملّٓماظؽملعملّٕماٌظملّٕد م‬
  
  ‫‪dblclick‬‬
  
  ‫سؽملّٓماظؽملعملّٕماٌّٖدوج م‬
  
  ‫‪mousedown‬‬
  
  ‫سؽملّٓماظسملطمل‪ّٛ‬مسػمل‪ّ٧‬مزرماظظملفملرة م‬
  
  ‫‪mousemove‬‬
  
  ‫سؽملّٓمعّٕورمعقملذّٕماظظملفملرة م‬
  
  ‫‪mouseout‬‬
  
  ‫سؽملّٓمخّٕوجمعقملذّٕماظظملفملرةم(ؼعملزملّٓمبّٓخ‪ّ٦‬لمعقملذّٕم‬ ‫اظظملفملرة مأول معّٕور مظ‪ ّ٥‬مص‪ّ٦‬ق ماظضملؽملزملّٕ مو مؼعملزملّٓم‬ ‫بمملًّٕوجميصملهملمابؿضملمملدهمسؽمل‪ )ّ٥‬م‬
  
  ‫‪65‬‬
  
  ‫‪mouseover‬‬
  
  ‫سؽملّٓمدخ‪ّ٦‬لمعقملذّٕماظظملفملرة م‬
  
  ‫‪mouseup‬‬
  
  ‫سؽملّٓمهّٕؼّٕمزرماظظملفملرةم(اغؿؾملمملءماظسملطمل‪ )ّٛ‬م‬
  
  ‫دوالماِّحّٓاثماِّخّٕىم‪ :‬م‬ ‫اد‪ّ٣‬مداظهملمايّٓث م‬
  
  ‫يصملهملمتظملفرلمايّٓث م‬
  
  ‫‪error‬‬
  
  ‫سؽملّٓمحّٓوثمخشملفمل م‬
  
  ‫‪resize‬‬
  
  ‫سؽملّٓمتطملؿملرلمايف‪ ّ٣‬م‬
  
  ‫م‬ ‫تّٔطّّٕم‪:‬مصمؿمل‪ّٝ‬ماظّٓٓوالمأٌّط‪ّ٦‬رةميفماىّٓاولمأسالهمهلمملماظرملغمل‪ّ٢‬ماظضملمملمماظؿمملظ‪ ّ٨‬م‬ ‫;)‪$(‟selector‟).event(function‬‬
  
  ‫حؿملىمل متعمل‪ّ٦‬م مبؿضملؿملني ماظّٓاظهمل م‪ function‬مادؿفمملبهملً مظػملقّٓث م‪ event‬مىؼملؿمل‪ ّٝ‬ماظضملؽملمملصّٕ ماظيتم‬ ‫ؼضملؿملّٓػمملماحملّٓدم‪selector‬م‪ .‬م‬ ‫م‬ ‫و ماآلن مو مبضملّٓ مأن مرأؼؽملممل مدؾمل‪ّ٦‬ظهمل مدوال ماِّحّٓاث ماظؾلؿملشملهمل معممل مرأؼ‪ ّ١‬ميف مأن مغّٕى معّٕوغهمل ماظّٓوالم‬ ‫اِّخّٕىماًمملصهملمبمملِّحّٓاثم؟ م‬ ‫حلؽملمملً م‪ ..‬متعمل‪ّ٦‬م ماظّٓاظهمل م‪ bind‬مبؿقّٓؼّٓ مداظهمل معضملؿملؽملهمل مطمملدؿفمملبهمل ميّٓث محمّٓد مو مهلممل ماظرملغمل‪ ّ٢‬ماظضملمملمم‬ ‫اظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;)‪$(„selector‟).bind(„event‟ , function‬‬
  
  ‫‪66‬‬
  
  ‫حؿملىمل مأن ماظ‪ّ٦‬دؿمل‪ ّٛ‬م‪ event‬م ػ‪ ّ٦‬ماد‪ ّ٣‬مايّٓث مو مسمملدةً معممل مؼغمل‪ّ٦‬ن مواحّٓاً مع‪ ّ٤‬ماِّحّٓاث مذاتؾملمملم‬ ‫أٌّط‪ّ٦‬رةميفماىّٓاولماظلمملبعملهمل م‪,‬مأعمملماظ‪ّ٦‬دؿمل‪ّٛ‬م‪ function‬مصؾمل‪ّ٦‬ماد‪ّ٣‬ماظّٓاظهمل ماظيت مدؿؽملظملّٔمسؽملّٓم‬ ‫تظملفرلمايّٓثمومإنمتضملػملؿملؼمليتم‪jQuery‬ماظؿمملظؿملؿنيمتعمل‪ّ٦‬عمملنمبؽملظملّٗماظضملؼمل‪ّ٢‬ممتمملعمملًم‪ :‬م‬ ‫;)‪$(‟img‟).click(myFunction‬‬ ‫;)‪$(„img‟).bind(„click‟ , myFunction‬‬
  
  ‫ومع‪ّ٤‬ماىّٓؼّٕمبمملظّٔطّٕمأن مسؼمل‪ ّ٢‬م‪ bind‬مأطـّٕمع‪ّ٤‬معّٕةمسػمل‪ّ٧‬مغظملّٗماظضملؽملزملّٕمؼقملديمإشممتؽملظملؿملّٔمصمؿمل‪ّٝ‬م‬ ‫اظّٓوالماظيتمتّٕبشملؾملمملمبمملظضملؽملزملّٕمسؽملّٓمتظملفرلمايّٓثمومػّٔامممغمل‪ّ٤‬مأؼسملمملًمبمملدؿكّٓامماظّٓوالماظؾلؿملشملهملم‬ ‫ظّٔامصكملنماظؿضملػملؿملؼملهملماظؿمملظؿملهملم‪ :‬م‬ ‫‪$(„img‟).bind(„click‟,F1).bind(„click‟,F2).bind(„click‟,F‬‬ ‫;)‪3‬‬
  
  ‫تعمل‪ّ٦‬ممبمملدؿّٓسمملءماظّٓوالم‪ F1‬موم‪ F2‬موم‪ F3‬مبمملظذلتؿملنملمسؽملّٓمتظملفرلمحّٓث ماظؽملعملّٕ ماًمملصمبضملؽملمملصّٕماظزمل‪ّ٦‬رم‬ ‫يفماٌلؿؽملّٓم‪,‬مومإنماظؿضملػملؿملؼملهملماظؿمملظؿملهملمتعمل‪ّ٦‬ممبمملٌـ‪ّ٢‬مأؼسملمملًم‪ :‬م‬ ‫;)‪$(„img‟).click(F1).click(F2).click(F3‬‬
  
  ‫م‬ ‫ومسػمل‪ّ٧‬ماظؽملعملؿمل‪ّٚ‬ممتمملعمملًمع‪ّ٤‬مسؼمل‪ّ٢‬ماظّٓاظهملم‪ bind‬متعمل‪ّ٦‬م ماظّٓاظهملم‪ unbind‬مبكملظطملمملءمرب‪ّٛ‬مأحّٓماظّٓوالم‬ ‫حبّٓثمعضملنيمومهلمملمغظملّٗماظرملغمل‪ّ٢‬ماًمملصمبذملم‪bind‬ممتمملعمملًمظّٔامصكملنماظؿضملػملؿملؼملؿنيماظؿمملظؿملؿنيم‪ :‬م‬ ‫)‪$(„img‟).bind(„click‟,Func1).bind(„click‟,Func2‬‬ ‫;)‪.bind(„click‟,Func3‬‬ ‫;)‪$(„img‟).unbind(„click‟,Func2‬‬
  
  ‫‪67‬‬
  
  ‫دؿعمل‪ّ٦‬عمملنمبمملدؿّٓسمملءماظّٓاظؿنيم‪Func3‬موم‪Func1‬مسؽملّٓمتظملفرلمحّٓثماظؽملٓعملّٕماًمملصمبضملؽملمملصّٕماظزمل‪ّ٦‬رم‬ ‫يفماٌلؿؽملّٓ مدونمتشملؾؿمل‪ّ٠‬مادؿّٓسمملءماظّٓاظهمل م‪ Func2‬مِّنماظّٓاظهمل م‪ unbind‬مضمملعوملمبكملظطملمملء مربشملؾملمملم‬ ‫بممليّٓثم‪ .‬م‬ ‫طؼملمملمت‪ّ٦‬صّٕمعغملؿؾهملم‪jQuery‬مداظهملمخمملصهملمعرملمملبؾملهملمظػملّٓاظهملم‪bind‬مازلؾملمملماظّٓاظهملم‪one‬ماظظملّٕقماظ‪ّ٦‬حؿملّٓم‬ ‫بؿملؽملؾملمملمومبنيماظّٓاظهملم‪ bind‬مأنماِّخرلةمتلؿّٓس‪ّ٨‬مجمؼمل‪ّ٦‬سهملمع‪ّ٤‬ماظّٓوالمسؽملّٓمتظملفرلمحّٓثمواحّٓم‬ ‫صعمل‪ ّٛ‬مبؿملؽملؼملممل متلؿشملؿمل‪ ّٝ‬ماظّٓاظهمل م‪ one‬مأن متلؿّٓس‪ ّ٨‬مجمؼمل‪ّ٦‬سهمل مع‪ ّ٤‬ماظّٓوال مسؽملّٓ متظملفرل مجمؼمل‪ّ٦‬سهمل مع‪ّ٤‬م‬ ‫اِّحّٓاثمومظّٔامصكملنماظؿضملػملؿملؼملهملماظؿمملظؿملهملم‪:‬‬ ‫م„ ‪$(„img‟).one(“click , mousemove , dblclick”,‬‬ ‫;)‟‪myFunction‬‬
  
  ‫تعمل‪ّ٦‬م مبمملدؿّٓسمملء ماظّٓاظهمل م‪ myFunction‬مسؽملّٓ متظملفرل مأيدمل مع‪ ّ٤‬ماِّحّٓاث م‪ click‬مأوم‬ ‫‪mousemove‬مأومم‪dblclick‬م! م‬ ‫وماآلنمبضملّٓمأنمصؾملؼملؽملمملممن‪ّ٦‬ذجماِّحّٓاثماًمملصمبمملٌغملؿؾهملم‪ jQuery‬مرمنملمأنمغّٔطّٕمأنمصمؿمل‪ّٝ‬م‬ ‫دوال ماِّحّٓاث مميغمل‪ ّ٤‬مأن متّٖوٓد مب‪ّ٦‬دؿمل‪ ّٛ‬ماخؿؿملمملري مؼُؽملرملَفمل متػملعملمملئؿملمملً مب‪ّ٦‬ادشملهمل ماٌغملؿؾهمل م‪ ,‬مزمؼمل‪ ّ٢‬مػّٔام‬ ‫اظ‪ّ٦‬دؿمل‪ّٛ‬معضملػمل‪ّ٦‬عمملتٍ مػمملعٓ ًهمل مخت‪ ّٗٙ‬مايّٓث مومؼلؼملٓ‪ّ٧‬م"اظغملمملئ‪ّ٤‬م‪ "event‬مأوم"اظغملمملئ‪ّ٤‬م‪ "e‬ماخؿزملمملراًم‪,‬موم‬ ‫إلغرملمملئ‪ ّ٥‬مغلؿضملؼمل‪ ّ٢‬مغظملّٗ ماظزملؿملطملهمل ماًمملصٓهمل مبّٓوال ماِّحّٓاث مظغمل‪ ّ٤‬مع‪ ّٝ‬ممتّٕؼّٕ مودؿمل‪ ّٛ‬مإضممليف مميـ‪ّ٢‬م‬ ‫اظ‪ّ٦‬دؿمل‪ّٛ‬م‪e‬مومطؼملـممللمسػمل‪ّ٧‬مذظ‪ّ١‬مميغمل‪ّ٤‬مأنمغغملؿنملم‪ :‬م‬ ‫{)‪$(‟a‟).click(function(e‬‬ ‫;)”عّٕحؾمملً“(‪Alert‬‬ ‫;)}‬
  
  ‫المسمؿػمل‪ّٟ‬مسؼمل‪ّ٢‬ماِّدشملّٕمأسالهمس‪ّ٤‬مسؼملػملؾملمملمبّٓونممتّٕؼّٕماظ‪ّ٦‬دؿمل‪ّٛ‬م‪ e‬مأبّٓاًمصؾمل‪ّ٨‬متعمل‪ّ٦‬ممبضملّٕضماظّٕدمملظهملم‬ ‫"عّٕحؾمملً" م سؽملّٓماظؽملعملّٕمسػمل‪ّ٧‬مأيمراب‪ّٛ‬ميفماظزملظملقهملمومظغمل‪ّ٤‬معمملمميؿملّٖػمملمأنمودؿملشملؾملمملم‪ e‬مزمؼمل‪ّ٢‬مضؿملؼملمملًمخمملصهملم‬
  
  ‫‪68‬‬
  
  ‫متـ‪ ّ٢‬معضملػمل‪ّ٦‬عمملت مس‪ ّ٤‬مايّٓث م‪ click‬مميغمل‪ ّ٤‬ماالدؿظملمملدة معؽملؾملممل ميف مجل‪ ّ٣‬ماظّٓاظهمل مصؼملـالً مميغمل‪ ّ٤‬مأنم‬ ‫غغملؿنملم‪ :‬م‬ ‫{)‪$(„a‟).click(function (e‬‬ ‫;)‪alert(e.type‬‬ ‫;)}‬
  
  ‫ومدؿملغمل‪ّ٦‬نمغؿؿملفهملماظؽملعملّٕ مسػمل‪ّ٧‬ماظّٕواب‪ّٛ‬مػّٔهمإٌّةمػ‪ّ٦‬مسّٕضمردمملظهملمهؿ‪ّ٦‬يمسػمل‪ّ٧‬ماظغملػملؼملهملم‪ click‬موم‬ ‫ػ‪ّ٨‬مػؽملمملمضؿملؼملهملماظؿضملؾرلم‪e.type‬م(يفمايعملؿملعملهملمضؿملؼملهملماًمملصؿملهملم‪type‬ماًمملصهملمبمملظغملمملئ‪ّ٤‬م‪ .)e‬م‬ ‫عػملق‪ّ٦‬زهملم‪ :‬مضّٓمالمؼؾّٓوماِّعّٕمذا مأػؼملؿملهملميفماظؾّٓاؼهملمظغمل‪ّ٤‬مظ‪ّ٦‬مدردوملماظؿضملعملؿملّٓاتماًمملصهملمبؾملّٔاماظغملمملئ‪ّ٤‬م‬ ‫يفم‪ java script‬موماخؿالفمرّٕقماظؿضملمملع‪ّ٢‬معضمل‪ّ٥‬مبمملخؿالفماٌؿزملظملّّمظضملّٕصوملماظضملؼمل‪ّ٢‬ماظغملؾرلم‬ ‫اظّٔيمضمملممب‪ّ٥‬مصّٕؼ‪ّ٠‬متشمل‪ّ٦‬ؼّٕماٌغملؿؾهملم‪jQuery‬م‪ .‬م‬ ‫المؼظمل‪ّ٦‬تؽملممل مأنمغّٔطّٕمػؽملمملمأغ‪ّ٥‬مسػمل‪ّ٧‬ماظّٕش‪ّ٣‬مع‪ ّ٤‬مأن ماظزملؿملطملهملمذاتؾملممل متلؿكّٓم مظؿضملّٕؼ‪ّٟ‬ماظغملمملئ‪ّ٤‬م‪ e‬ميفمصمؿمل‪ّٝ‬م‬ ‫دوال ماِّحّٓاث مإال مأن مخمملصؿملمملت ماظغملمملئ‪ ّ٤‬م‪ e‬مختؿػمل‪ ّٟ‬مع‪ ّ٤‬محّٓث مإشم مآخّٕ مو مػّٔا مرؾؿملضمل‪ ّ٨‬مإذ مأنٖم‬ ‫اٌضملػمل‪ّ٦‬عمملتماٌؿضملػملعملهملمحبّٓثمعضملؿملٓ‪ّ٤‬مضّٓمالمتضملينمذؿملؽمملًمبمملظؽمللؾهملميّٓثمآخّٕمومطؼملّٕج‪ّٝ‬مدّٕؼ‪ّٝ‬مغػملكٓ‪ّٙ‬م‬ ‫أػ‪ّ٣‬مخمملصؿملٓمملتماظغملمملئ‪ّ٤‬م‪e‬ميفمػّٔاماىّٓولم‪ :‬م‬ ‫اًمملصؿملهمل م‬
  
  ‫اٌضملػمل‪ّ٦‬عهملماظيتمهؿ‪ّ٦‬ؼؾملممل م‬
  
  ‫‪altKey‬‬
  
  ‫هؿ‪ّ٦‬يماظعملؿملؼملهملم‪true‬ميفمحممللمط‪ّ٦‬نماٌظملؿمملحم‪alt‬معسملطمل‪ّ٦‬رمملًميصملهملم‬ ‫تظملفرلمايّٓثمومهؿ‪ّ٦‬يم‪false‬ميفمايمملظهملماٌضملمملطلهمل م‬
  
  ‫‪ctrlKey‬‬
  
  ‫هؿ‪ّ٦‬ي ماظعملؿملؼملهمل م‪ true‬ميف محمملل مط‪ّ٦‬ن ماٌظملؿمملح م‪ ctrl‬معسملطمل‪ّ٦‬رمملًم‬ ‫يصملهملمتظملفرلمايّٓثمومهؿ‪ّ٦‬يم‪false‬ميفمايمملظهملماٌضملمملطلهمل م‬
  
  ‫‪69‬‬
  
  ‫‪keyCode‬‬
  
  ‫تؿضملػمل‪ ّ٠‬مبممليّٓثني م‪ keyup‬مو م‪ keydown‬مو متضملؿملّٓ مػّٔه ماًمملصؿملهملم‬ ‫ضؿملؼملهمل ماظذمل م‪ ASCII‬ماًمملص مبمملٌظملؿمملح ماٌسملطمل‪ّ٦‬ط م(و ميف محمملل ماظسملطمل‪ّٛ‬م‬ ‫سػمل‪ ّ٧‬محّٕف معممل مصكملغؾملممل متضملؿملّٓ مضؿملؼملهمل مايّٕف ماظغملؾرل‪-‬طمملبؿملؿمملل مظذل‪ -‬م مأوم‬ ‫‪ upper case‬مصؼملـالً مػّٔه ماًمملصؿملهمل مدؿقؿ‪ّ٦‬ي ماظعملؿملؼملهمل م‪ 65‬ميفم‬ ‫حمملظهملمضطمل‪ّٛ‬ماٌظملؿمملحم‪a‬مأومضطمل‪ّٛ‬ماٌظملؿمملحم‪)A‬م م‬
  
  ‫‪pageX‬‬
  
  ‫تؿضملػمل‪ّ٠‬مبفملحّٓاثماظظملفملرةمومتضملؿملّٓماإلحّٓاثؿملمملتماِّصعملؿملهملم‪ X‬ماًمملصهملممبقملذّٕم‬ ‫اظظملفملرة مبمملظؽمللؾهمل مظػملزملظملقهمل م(بضملّٓ معقملذّٕ ماظظملفملرة مس‪ ّ٤‬محمملصهمل ماظزملظملقهمل ماظؿمللّٕىم‬ ‫سمملدةً) م‬
  
  ‫‪pageY‬‬
  
  ‫تؿضملػمل‪ ّ٠‬مبفملحّٓاث ماظظملفملرة مو متضملؿملّٓ ماإلحّٓاثؿملمملت ماظضملؼمل‪ّ٦‬دؼهمل م‪ Y‬ماًمملصهملم‬ ‫مبقملذّٕ ماظظملفملرة مبمملظؽمللؾهمل مظػملزملظملقهمل م(بضملّٓ معقملذّٕ ماظظملفملرة مس‪ ّ٤‬محمملصهمل ماظزملظملقهملم‬ ‫اظضملػمل‪ّ٦‬ؼهملمسمملدةً) م‬
  
  ‫‪screenX‬‬
  
  ‫تؿضملػمل‪ّ٠‬مبفملحّٓاثماظظملفملرةمومتضملؿملّٓماإلحّٓاثؿملمملتماِّصعملؿملهملم‪ X‬ماًمملصهملممبقملذّٕم‬ ‫اظظملفملرة مبمملظؽمللؾهمل مظػملرملمملذهمل م(بضملّٓ معقملذّٕ ماظظملفملرة مس‪ ّ٤‬محمملصهمل ماظرملمملذهمل ماظؿمللّٕىم‬ ‫سمملدةً) م‬
  
  ‫‪screenY‬‬
  
  ‫تؿضملػمل‪ ّ٠‬مبفملحّٓاث ماظظملفملرة مو متضملؿملّٓ ماإلحّٓاثؿملمملت ماظضملؼمل‪ّ٦‬دؼهمل م‪ Y‬ماًمملصهملم‬ ‫مبقملذّٕ ماظظملفملرة مبمملظؽمللؾهمل مظػملرملمملذهمل م(بضملّٓ معقملذّٕ ماظظملفملرة مس‪ ّ٤‬محمملصهمل ماظرملمملذهملم‬ ‫اظضملػمل‪ّ٦‬ؼهملمسمملدةً) م‬
  
  ‫‪ relatedTarget‬تؿضملػمل‪ّ٠‬مبؾضمل‪ّٚ‬مأحّٓاثماظظملفملرةمومتضملؿملّٓمعضملّٕفماظضملؽملزملّٕماظّٔيمدخ‪ّ٢‬مإظؿمل‪ّ٥‬م‪/‬م‬ ‫خّٕجمسؽمل‪ّ٥‬معقملذّٕماظظملفملرةميصملهملمتظملفرلمايّٓث م‬
  
  ‫‪shiftKey‬‬
  
  ‫هؿ‪ّ٦‬ي ماظعملؿملؼملهمل م‪ true‬ميف محمملل مط‪ّ٦‬ن ماٌظملؿمملح م‪ shift‬معسملطمل‪ّ٦‬رمملًم‬
  
  ‫‪70‬‬
  
  ‫يصملهملمتظملفرلمايّٓثمومهؿ‪ّ٦‬يم‪false‬ميفمايمملظهملماٌضملمملطلهمل م‬
  
  ‫‪type‬‬
  
  ‫تلؿضملؼمل‪ّ٢‬مع‪ّٝ‬مصمؿمل‪ّٝ‬ماِّحّٓاثمومتضملؿملّٓماد‪ّ٣‬مايّٓث م‬
  
  ‫‪which‬‬
  
  ‫بمملظؽمللؾهمل مِّحّٓاث مظ‪ّ٦‬حهمل ماٌظملمملتؿملّّ متضملؿملّٓ مػّٔه ماًمملصؿملهمل مضؿملؼملهمل ماظذملم‬ ‫‪ ASCII‬ماًمملصهمل مبمملٌظملؿمملح ماٌسملطمل‪ّ٦‬ط م‪ ,‬مأعممل مبمملظؽمللؾهمل مِّحّٓاث ماظظملفملرةم‬ ‫تضملؿملّٓمرضؼملمملًمميـ‪ّ٢‬مزرماظظملفملرةماٌسملطمل‪ّ٦‬طمحؿملىملمأنماظّٕض‪ّ٣‬م‪0‬مميـ‪ّ٢‬مزرماظظملفملرةم‬ ‫اِّؼلّٕموماظّٕض‪ّ٣‬م‪2‬مميـ‪ّ٢‬مزرماظظملفملرةماِّود‪ّٛ‬موماظّٕض‪ّ٣‬م‪3‬مميـ‪ّ٢‬ماظّٖرماِّمي‪ ّ٤‬م‬
  
  ‫م‬ ‫آخّٕمعمملمرمنملمذطّٕهميفمػّٔه ماظّٓضمملئ‪ ّ٠‬مػ‪ّ٦‬مأنماٌغملؿؾهملم‪ jQuery‬متضملشملؿملؽملمملمإعغملمملغؿملهملمإظطملمملءماالدؿفمملبهملم‬ ‫االصذلاضؿملهمل مظألحّٓاث ماظيت ممتػمل‪ ّ١‬مادؿفمملبهمل ماصذلاضؿملهمل معـ‪ ّ٢‬محّٓث ماظؽملعملّٕ مسػمل‪ ّ٧‬مراب‪ ّٛ‬معضملني مإذ مأغ‪ّ٥‬م‬ ‫ميػمل‪ّ١‬مادؿفمملبهملماصذلاضؿملهملمتؽملعملػملؽملمملمإشمماظضملؽمل‪ّ٦‬انماظّٔيمؼرملرلمإظؿمل‪ّ٥‬م‪,‬مومتلؼملّّماٌغملؿؾهملمبكملظطملمملءماالدؿفمملبهملم‬ ‫االصذلاضؿملهمل مس‪ ّ٤‬مرّٕؼ‪ ّ٠‬ماظّٓاظهمل م‪ preventDefault‬ماًمملصهمل مبمملظغملمملئ‪ ّ٤‬م‪ e‬مو ماظيت متلؿكّٓمم‬ ‫طؼملمملؼػمل‪ّ٨‬م‪ :‬م‬ ‫{)‪$(„a‟).click(function(e‬‬ ‫;)(‪e.preventDefault‬‬ ‫;(}‬
  
  ‫و ماآلن مدم‪ ّ٤‬معؿفملطّٓون مأن ماالدؿفمملبهمل ماالصذلاضؿملهمل ميّٓث ماظؽملعملّٕ مسػمل‪ ّ٧‬ماظّٕواب‪ ّٛ‬ميف ماظزملظملقهمل مظ‪ّ٤‬م‬ ‫هّٓثم‪ .‬م‬
  
  ‫‪71‬‬
  
  ‫م‬ ‫م‬ ‫م‬
  
  ‫م‬ ‫ع‪ّ٤‬ماظّٓضؿملعملهملم‪75‬مإشمماظّٓضؿملعملهملم‪87‬م‪ :‬م‬
  
  ‫ايَّٕطمملت م‬ ‫‪Animations‬‬
  
  ‫‪72‬‬
  
  ‫ايَّٕطمملتم‪Animations‬م‪ :‬م‬ ‫أعمملمزظوملَمتّٔطّٕمعمملمضػملوملُمظ‪ّ١‬مسؽملّٓمسّٕضؽملمملمٌ‪ّ٦‬ض‪ّٝ‬م‪Microsoft‬مطؼملـممللميفمععملِّّٓعهملمػّٔاماظغملؿمملبم؟ م‬ ‫حلؽملمملًم‪..‬مدفملذطّّٕكَ مأغٓينمضػملوملُ مظ‪ َّ١‬م‪:‬م"ال متّٓعماىؼملممللمسمّٓس‪"ّ١‬مومضػملوملم‪:‬م"المتضملؿعملّٓمأنمعمملمتّٕاهمع‪ّ٤‬م‬ ‫سؼمل‪ّ٢‬مصالشم‪" Flash‬مومضػملوملميفماظؽملؾملمملؼهملم‪:‬م"أشػملنملمعمملمتّٕاهمع‪ّ٤‬مسؼمل‪ّ٢‬ماٌغملؿؾهملم‪"jQuery‬مضػملوملم‬ ‫ط‪ّ٢‬معمملمدؾ‪ّ٠‬مػغملّٔامدونمأيمبّٕػمملنموماآلنمحمملنماظ‪ّ٦‬ضوملمظؽملدلػ‪ّ٤‬مذظ‪ّ١‬مد‪ّ٦‬ؼمملًم‪ .‬م‬
  
  ‫اٌقملثّٕاتماظؾلؿملشملهملم‪ :‬م‬ ‫متقملعٓ‪ّ٤‬ماٌغملؿؾهمل م‪ jQuery‬مجمؼمل‪ّ٦‬سهملمع‪ّ٤‬ماظّٓٓوالماًمملصٓهملمبممليّٕطمملتم‪ Animations‬مومظضمل‪ّٓ٢‬م‬ ‫أبل‪ ّٛ‬مأغ‪ّ٦‬اع مايّٕطمملت متغملؼمل‪ ّ٤‬ميف مإزؾملمملر مو مإخظملمملء ماظضملؽملمملصّٕ مإذ متقملعٓ‪ ّ٤‬ماٌغملؿؾهمل مػمملتني ماظ‪ّ٦‬زؿملظملؿنيم‬ ‫اظؾلؿملشملؿني مس‪ ّ٤‬مرّٕؼ‪ ّ٠‬ماظّٓٓاظّهمل م‪ show‬ماظيت متُلؿضملؼمل‪ ّ٢‬مظإلزؾملمملر مو ماظّٓٓاظّهمل م‪ hide‬ماظيت متُلؿضملؼمل‪ّ٢‬م‬ ‫ظإلخظملمملءمومتلؿضملؼمل‪ّ٢‬ماظّٓاظؿمملنمسػمل‪ّ٧‬ماظرملغمل‪ّ٢‬م‪ :‬م‬ ‫;)(‪$(„selector‟).show‬‬
  
  ‫حؿملىملمؼعمل‪ّ٦‬ممػّٔاماظلشملّٕمبكملزؾملمملرماظضملؽملمملصّٕماٌكظملؿملهملماظيتمؼضملؿملّٓػمملماحملّٓدم‪ selector‬ميفمحنيم‬ ‫أنماظؿضملػملؿملؼملهملم‪ :‬م‬ ‫;)(‪$(„selector‟).hide‬‬
  
  ‫تعمل‪ّ٦‬ممبكملخظملمملءماظضملؽملمملصّٕماظيتمؼضملؿملّٓػمملماحملّٓدم‪selector‬مومطـرلاًمعمملمؼلؿضملؼمل‪ّ٢‬ماٌدلجم‪ّ٦‬نمػمملتنيم‬ ‫اظّٓاظؿنيميفمإغرملمملءماظعمل‪ّ٦‬ائ‪ّ٣‬ماظرملفّٕؼهملم‪Tree Lists‬ميفمذ‪ّ٨‬ءمذؾؿمل‪ّ٥‬مبمملٌـممللماظؿمملظ‪ :ّ٨‬م‬ ‫>‪‪”‪src=”jquery.js” type=”text/javascript‬م‪<script‬‬
  
  ‫‪73‬‬
  
  <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(); }); }); ‫<م‬/head>
  ‫<عـممللماظعملمملئؼملهملماظرملفّٕؼهمل‬/legend>

  ‫<مم‬li>‫<اظضملؽملزملّٕماِّول‬/li> ‫<مممممممممممم‬li>ّ٨‫اظضملؽملزملّٕماظـمملغ‬ ‫<مممممممممممممممم‬ol>
  
  74
  
  ‫>‪ّ٨‬مممممممممممممممممممم‬ ‫>‪ّ٨‬مممممممممممممممممممم‬ ‫>‪ّ٨‬مممممممممممممممممممم‬ ‫>‪ّ٨‬مممممممممممممممممممم‬ ‫>‪ّ٨‬مممممممممممممممممممم‬ ‫>‪‪‪‪ّٝ‬مممممممممممم‬ ‫>‪‪ّ٨‬مممممممممممممممممممم‬ ‫>‪ّ٨‬مممممممممممممممممممم‬ ‫>‪ّ٨‬مممممممممممممممممممم‬ ‫>‪‪‪‪‪‪‪
  ‫‪75‬‬
  
  ‫>‪‪‪
  ‫هؿ‪ّ٦‬يماظزملظملقهملمأسالهمضمملئؼملهملمشرلمعّٕتؾهملم‪Unordered list‬مع‪ّ٤‬ماظضملؽملمملصّٕمممـػملهملمبمملظ‪ّ٦‬د‪ّ٣‬م‪ul‬مم‬ ‫‪,‬مزمؿ‪ّ٦‬يمبضمل‪ ّٚ‬مسؽملمملصّٕمػّٔهماظعملمملئؼملهمل مسػمل‪ّ٧‬مض‪ّ٦‬ائ‪ ّ٣‬معّٕتؾهمل مصّٕسؿملٖهمل م‪ orederd list‬مع‪ّ٤‬ماظضملؽملمملصّٕم‬ ‫ممـػملهملمبمملظ‪ّ٦‬د‪ّ٦‬مم‪ol‬م‪ .‬م‬ ‫ؼعمل‪ّ٦‬مماظلشملّٕم‪ :‬م‬ ‫;)‟‪$(„li:has(ol)‟).css(„curosr‟,‟pointer‬مم‬
  
  ‫بؿطملؿملرل مذغمل‪ ّ٢‬معقملذّٕ ماظظملفملرة مإشم ماظرملغمل‪ ّ٢‬ماٌضملؾّٕٓ مس‪ ّ٤‬مإعغملمملغؿملهمل ماظؽملعملّٕ مو مذظ‪ ّ١‬مظػملضملؽملمملصّٕ ماظيت مؼضملؿملّٓػمملم‬ ‫احملّٓد م(‪ li:has)ol‬مموماظّٔيمؼضملينمسؽملمملصّٕماظ‪ّ٦‬د‪ّ٦‬مم‪ li‬ماظيتمهؿ‪ّ٦‬يمسػمل‪ّ٧‬مود‪ّ٦‬مم‪ ol‬مصّٕسؿملهملم‬ ‫(راج‪ّٝ‬مجّٓولماحملِّّٓدات)م‪ .‬م‬ ‫بؿملؽملؼملمملمتعمل‪ّ٦‬مماِّدشملّٕماظؿمملظؿملهملمبكملضمملصهملماظ‪ّ٦‬زؿملظملهملماًمملصهملمبمملظعملمملئؼملهملماظرملفّٕؼهملمإشممتػمل‪ّ١‬ماظضملؽملمملصّٕم‪ :‬م‬ ‫{)(‪$(„li:has(ol)‟).click(function‬‬ ‫))‟‪if($(this).children().is(‟:hidden‬‬ ‫;)(‪$(this).children().show‬‬ ‫‪else‬‬ ‫;)(‪$(this).children().hide‬‬ ‫;)}‬
  
  ‫‪76‬‬
  
  ‫إذمتعمل‪ّ٦‬ممبؾؽملمملءمروتنيم(داظهمل)مخمملصمحبّٓثماظؽملعملّٕمسػمل‪ّ٧‬متػمل‪ّ١‬ماظضملؽملمملصّٕمؼعمل‪ّ٦‬ممبكملخظملمملئؾملمملمإنِمطمملغوملمزمملػّٕةم‬ ‫ومإزؾملمملرػمملمإنِم طمملغوملمخمظملؿملهملمومػؽملمملمرمّٓرماظؿؽمل‪ّ٦‬ؼ‪ّ٥‬مأنماظّٓاظهملم‪is‬مإحّٓىمدوالماٌغملؿؾهملم‪jQuery‬م‬ ‫تعمل‪ّ٦‬م مبكملسمملدةماظعملؿملؼملهملم‪ true‬مإنمطمملغوملماظضملؽملمملصّٕماٌشملؾعملهمل مسػملؿملؾملمملمت‪ّ٦‬اص‪ّ٠‬ماحملّٓٓد ماٌؼملّٕٓرمهلمملمومتضملؿملّٓم‬ ‫‪ false‬ميفمايمملظهملماٌضملمملطلهملم‪,‬مبؿملؽملؼملمملمتعمل‪ّ٦‬مماظّٓاظهملم‪ children‬مبكملسمملدةماظضملؽملمملصّٕماِّبؽملمملءمظػملضملؽملزملّٕم‬ ‫اٌشملؾعملهملمسػملؿمل‪ّ٥‬مومبؽملمملءّمسػمل‪ّ٧‬معمملمدؾ‪ّ٠‬مؼزملؾّّمعضملؽمل‪ّ٧‬ماظلشملّٕماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫))‟‪if($(this).children().is(‟:hidden‬‬
  
  ‫"إذا مطمملن مأبؽملمملء ماظضملؽملزملّٕ م‪ this‬مشرل مزمملػّٕؼ‪ "ّ٤‬م‪ ,‬مو مال مسمظمل‪ ّ٧‬مسػملؿمل‪ ّ١‬مإن مطؽملومل مضّٓ مضّٕأت ماظظملزمل‪ّ٦‬لم‬ ‫اظلمملبعملهملمأنماظضملؽملزملّٕم‪this‬مػؽملمملمؼضملينماظضملؽملزملّٕماظّٔيموض‪ّٝ‬مسػملؿمل‪ّ٥‬محّٓثماظؽملعملّٕ‪ .‬م‬ ‫م‬ ‫تقملعٓ‪ ّ٤‬ماٌغملؿؾهمل م‪ jQuery‬مداظهملً مظػملعملػملنمل ميف معـ‪ ّ٢‬مػّٔه مايمملظهمل مترملؾ‪ ّ٥‬مداظهمل ماظعملػملنمل ميف محمملظهمل مأوراقم‬ ‫اِّمنمملطمازلؾملمملم‪ toggle‬مومتعمل‪ّ٦‬ممػّٔهماظّٓاظهملمبكملخظملمملءماظضملؽملزملّٕمإنمطمملنمزمملػّٕاًمأومإزؾملمملرهمإنمطمملنم‬ ‫خمظملؿملمملًمومهلمملماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;)(‪$(‟selector‟).toggle‬‬
  
  ‫حؿملىمل متعمل‪ّ٦‬م ماظّٓاظهمل مبعملػملنمل محمملظهمل مزؾمل‪ّ٦‬ر ماظضملؽملمملصّٕ ماظيت مؼضملؿملّٓػممل ماحملّٓد م‪ selector‬مو مميغملؽملؽملمملم‬ ‫هلنيمعـممللماظعملمملئؼملهملماظرملفّٕؼهملمبمملالسؿؼملمملدمسػمل‪ّ٧‬مػّٔهماظّٓاظهملموماخؿزملمملرمذؿملظملّٕةم‪ jQuery‬ماًمملصهملم‬ ‫ب‪ّ٥‬مظؿزملؾّّمطؼملمملمؼػمل‪ّ٨‬م‪:‬م م‬ ‫{)(‪$(„li:has(ol)„).click(function‬‬ ‫;)(‪$(this).children().toggle‬ممممممممم‬ ‫;)}‬
  
  ‫‪77‬‬
  
  ‫و مػؽملممل مؼصملؾملّٕ مب‪ّ٦‬ض‪ّ٦‬ح مصّٓق مطالم مصّٕؼ‪ ّ٠‬متشمل‪ّ٦‬ؼّٕ ماٌغملؿؾهمل م‪ jQuery‬مسؽملّٓعممل مرّٕح مذضملمملرػممل م"اطؿنملم‬ ‫أض‪ّ٢‬م‪..‬ماصضمل‪ّ٢‬مأطـّٕ"م‪ .‬م‬ ‫م‬ ‫وم ضّٓمؼعمل‪ّ٦‬لمضمملئ‪ّ٢‬مبضملّٓمضّٕاءةماِّدشملّٕمأسالهم‪:‬م"غلؿشملؿمل‪ّٝ‬مسؼمل‪ّ٢‬مػّٔامبؾلمملرهمل م!مأؼ‪ّ٤‬مايّٕطهملم؟"مومػؽملمملم‬ ‫رمّٓرمبؽملمملمأنمغضملذلفمأنٖماظّٓٓوالم‪show‬موم‪hide‬موم‪toggle‬مسؽملّٓعمملمتُلؿّٓس‪ّ٧‬مبّٓونمأيمودؿمل‪ّٛ‬م‬ ‫صكملغٓؾملمملمالمتضملؼمل‪ّ٢‬مطقّٕطمملتٍ مأبّٓاًمومإغٓؼملمملمتعمل‪ّ٦‬ممبكملخظملمملءمومإزؾملمملرماظضملؽملمملصّٕمبرملغمل‪ ّٕ٢‬مجمملفم‪,‬مومميغمل‪ّ٤‬مهلنيم‬ ‫ػّٔا ماظرملغمل‪ ّ٢‬مبؿؼملّٕؼّٕ مودؿمل‪ ٍّٛ‬مإشم مط‪ّ٢‬دمل مع‪ ّ٤‬مػّٔه ماظّٓوال مميـٓ‪ ّ٢‬مدّٕسهمل مايّٕطهمل مو مسػملؿمل‪ ّ٥‬مؼزملؾّّ مذغمل‪ّ٢‬م‬ ‫اظّٓوالمطؼملمملؼػمل‪ّ٨‬م‪ :‬م‬ ‫;)‪$(„selector‟).show(speed‬م‬ ‫;)‪$(„selector‟).hide)speed‬‬ ‫;)‪$(„selector‟).toggle)speed‬‬
  
  ‫حؿملىملمأنماظ‪ّ٦‬دؿمل‪ّٛ‬م‪ speed‬مميـ‪ّ٢‬مدّٕسهمل متؽملظملؿملّٔماٌقملثّٕ م(زع‪ّ٤‬متؽملظملؿملّٔماٌقملثّٕميفمايعملؿملعملهمل) مو مميغمل‪ّ٤‬م‬ ‫اظؿضملؾرلممس‪ّ٤‬ماظ‪ّ٦‬دؿمل‪ّٛ‬م‪speed‬مبزملؿملطملؿنيم‪:‬م م‬ ‫أ م‪ -‬مصؿملطملهمل مغزملٓؿملهمل م‪ :‬مو مػ‪ ّ٨‬مضؿملؼملهمل مع‪ ّ٤‬ماظعملؿمل‪ ّ٣‬م‟‪ „slow‬ماظيت متضملين متؽملظملؿملّٔاً مبشملؿملؽمملً مظػملؼملقملثّٕ مأوم‬ ‫‟‪ „normal‬مو ماظيت متضملين متؽملظملؿملّٔ ماٌقملثّٕ مبمملظلّٕٓسهمل ماظشملؾؿملضملؿملهمل مأو م‟‪ „fast‬مو ماظيت متضملين متؽملظملؿملّٔم‬ ‫اٌقملثّٕمبرملغمل‪ّ٢‬مدّٕؼ‪.ّٝ‬م م‬ ‫ب م‪-‬مصؿملطملهملمرضؼملؿملهمل م‪ :‬ممتـ‪ّ٢‬مزع‪ّ٤‬متؽملظملؿملّٔماٌقملثّٕ مبمملٌػملػمل‪ّ٨‬مثمملغؿملهملم(‪ 1.110‬مثمملغؿملهمل)مومبمملالدؿظملمملدةمع‪ّ٤‬مػّٔهم‬ ‫اٌضملػمل‪ّ٦‬عهملمميغمل‪ّ٤‬مهلنيمذؿملظملّٕةم‪ jQuery‬ميفمعـممللماظعملمملئؼملهملماظرملفّٕؼهملمظؿزملؾّّمطؼملمملؼػمل‪ّ٨‬مإذامسدلغمملم‬ ‫س‪ّ٤‬ماظلّٕسهملمبمملظزملؿملطملهملماظّٕضؼملؿملهملم‪ :‬م‬ ‫{)(‪$(„li:has(ol)„).click(function‬‬
  
  ‫‪78‬‬
  
  ‫;)‪$(this).children().toggle(1000‬ممممممممم‬ ‫;)}‬
  
  ‫أومطؼملمملؼػمل‪ّ٨‬مإذامسدلغمملمس‪ّ٤‬ماظلّٕسهملمبمملظزملؿملطملهملماظؽملزملؿملهملم‪ :‬م‬ ‫{)(‪$(„li:has(ol)„).click(function‬‬ ‫;)‟‪$(this).children().toggle(„slow‬ممممممممم‬ ‫;)}‬
  
  ‫وماآلنمأصؾّّمط‪ ّ٢‬مع‪ّ٤‬ماإلخظملمملءموماإلزؾملمملرمؼلؿطملّٕقمزعؽملمملًمضّٓرهمثمملغؿملهمل مواحّٓةم(‪ 0111‬معػملػمل‪ّ٨‬مثمملغؿملهمل)موم‬ ‫يفمػّٔهمايمملظهملمؼؾّٓأمصمممللمحّٕطمملتم‪jQuery‬مبمملظصملؾمل‪ّ٦‬رم‪.‬‬ ‫مآخّٕمعمملمرمنملماالسذلافمب‪ّ٥‬ميفمدؿملمملقمايّٓؼىملمس‪ّ٤‬ماظّٓوالم‪ show‬موم‪ hide‬موم‪ toggle‬مػ‪ّ٦‬م‬ ‫أنمهلمملمذغملالًمآخّٕاًمػ‪ّ٦‬ماظرملغمل‪ّ٢‬م‪ :‬م‬ ‫;)‪$(‟selector‟).show(speed,F‬‬ ‫;)‪$(‟selector‟).hide(speed,F‬‬ ‫;)‪$(„selector‟).toggle(speed,F‬‬
  
  ‫حؿملىملمأنماظ‪ّ٦‬دؿمل‪ّٛ‬م‪ F‬م ػ‪ّ٦‬ماد‪ّ٣‬مداظهملمأخّٕىمع‪ّ٦‬ج‪ّ٦‬دةميفماظزملظملقهملمؼؿ‪ّ٣‬متؽملظملؿملّٔػمملمسؽملّٓماطؿؼملممللمتؽملظملؿملّٔم‬ ‫اٌقملثّٕم‪ .‬م‬ ‫م‬
  
  ‫عقملثّٕاتماظؿالذ‪ّ٨‬م‪ :‬م‬ ‫و ماآلن مميغملؽملؽملممل ماالغؿعملمملل مظػملقّٓؼىمل مس‪ ّ٤‬مدوال مأخّٕى مع‪ ّ٤‬مدوال محّٕطمملت م‪ jQuery‬معـ‪ ّ٢‬مداظهملم‬ ‫اظصملؾمل‪ّ٦‬رماٌؿالذ‪ّ٨‬م‪Fade in‬ماظيتمهلمملماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬م‪ :‬م‬
  
  ‫‪79‬‬
  
  ‫;)‪$(‟selector‟).fadeIn(speed,F‬‬
  
  ‫حؿملىمل مأن ماظ‪ّ٦‬دؿمل‪ ّٛ‬ماالخؿؿملمملري م‪ speed‬مميـ‪ ّ٢‬مدّٕسهمل متؽملظملؿملّٔ ماٌقملثّٕ مو مطغمل‪ ّ٢‬مودشملمملء ماظلّٕسهمل ميفم‬ ‫دوالمايّٕطمملتماًمملصهملممبغملؿؾهملم‪jQuery‬مؼفملخّٔمػّٔاماظ‪ّ٦‬دؿمل‪ّٛ‬مضؿملؼملهملمع‪ّ٤‬ماظعملؿمل‪ّ٣‬ماظؽملزملؿملهملم‪slow‬مأوم‬ ‫‪ normal‬مأوم‪ fast‬مأومضؿملؼملهملًمرضؼملؿملهملمتضملدلمس‪ّ٤‬مزع‪ّ٤‬ماظؿؽملظملؿملّٔمبمملٌػملػمل‪ّ٨‬مثمملغؿملهملم‪,‬ميفمحنيمأنماظ‪ّ٦‬دؿمل‪ّٛ‬م‬ ‫االخؿؿملمملريم‪F‬م ميـ‪ّ٢‬مازلمملًمظّٓاظهملمع‪ّ٦‬ج‪ّ٦‬دةميفماٌلؿؽملّٓمؼؿ‪ّ٣‬مادؿّٓسمملؤػمملمبضملّٓماغؿؾملمملءمتؽملظملؿملّٔماٌقملثّٕ‪ .‬م‬ ‫تّٔطّّٕم‪:‬مسؽملّٓعمملمغعمل‪ّ٦‬لمس‪ّ٤‬مودؿمل‪ّٛ‬معمملمأغ‪ّ٥‬مودؿمل‪ّٛ‬ماخؿؿملمملريم‪Optional parameter‬ممصؽملق‪ّ٤‬م‬ ‫غضملينمأغؽملمملمغلؿشملؿمل‪ّٝ‬مسّٓمممتّٕؼّٕهمسؽملّٓمادؿّٓسمملءماظّٓاظهمل‪ .‬م‬ ‫و مسػمل‪ ّ٧‬مسغملّٗ مداظهمل ماظصملؾمل‪ّ٦‬ر ماٌؿالذ‪ ّ٨‬متعمل‪ّ٦‬م مداظهمل ماالخؿظملمملء ماٌؿالذ‪ ّ٨‬م‪ fade out‬مبكملخظملمملءم‬ ‫اظضملؽملزملّٕمبرملغمل‪ّٕ٢‬معؿالشٕممومهلمملماظزملؿملطملهملماظؿمملظؿملهملم‪ :‬م‬ ‫;)‪$(„selector‟).fadeout(speed,F‬‬
  
  ‫حؿملىمل مأن ماظ‪ّ٦‬دؿمل‪ ّٛ‬م‪ speed‬مميـ‪ ّ٢‬مدّٕسهمل ماظؿؽملظملؿملّٔ م(طمملظضملمملدة) مو ماظ‪ّ٦‬دؿمل‪ ّٛ‬م‪ F‬مميـ‪ ّ٢‬مازلمملً مظّٓاظهملم‬ ‫ع‪ّ٦‬ج‪ّ٦‬دةميفماٌلؿؽملّٓمتلؿّٓس‪ّ٧‬ميصملهملماغؿؾملمملءمتؽملظملؿملّٔماٌقملثّٕم(طمملظضملمملدةمأؼسملمملً)‪ .‬م‬ ‫م‬ ‫ت‪ّ٦‬صّٕ ماٌغملؿؾهمل م‪ jQuery‬مداظهملً مأخّٕى مخمملصهمل مبمملظؿالذ‪ ّ٨‬مازلؾملممل م‪ fadeTo‬مو مػّٔه ماظّٓاظهمل متعمل‪ّ٦‬مم‬ ‫بؿقّٓؼّٓمدرجهملماظرملظملمملصؿملهملم‪ opacity‬ماًمملصهملمبمملظضملؽملمملصّٕماظيتمؼضملؿملّٓػمملماحملّٓدمومهلمملماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬م‬ ‫‪ :‬م‬ ‫;)‪$(‟selector‟).fadeTo(speed,opacity,F‬‬
  
  ‫حؿملىملمأنماظ‪ّ٦‬دؿمل‪ّٛ‬م‪ speed‬مميـ‪ّ٢‬مدّٕسهملماظؿؽملظملؿملّٔمموماظ‪ّ٦‬دؿمل‪ّٛ‬م‪ F‬مميـ‪ّ٢‬مازلمملًمظّٓاظهملمتلؿّٓس‪ّ٧‬ميصملهملم‬ ‫اغؿؾملمملءمتؽملظملؿملّٔماٌقملثّٕمأعمملماظ‪ّ٦‬دؿمل‪ّٛ‬م‪ opacity‬مميـ‪ّ٢‬مدرجهملمذظملمملصؿملهملماظضملؽملزملّٕماظيتمدؿملؽملؿعمل‪ّ٢‬مإظؿملؾملمملمأثؽملمملءم‬ ‫تؽملظملؿملّٔ ماٌقملثّٕ مو مؼلؿعملّٕ مسػملؿملؾملممل مبضملّٓ ماغؿؾملمملء متؽملظملؿملّٔ ماٌقملثّٕ مو مميغمل‪ ّ٤‬مأن متغمل‪ّ٦‬ن مدرجهمل ماظرملظملمملصؿملهمل مبني م‪1‬م‬
  
  ‫‪80‬‬
  
  ‫(ذظملمملف مظّٓرجهمل مسّٓم ماظصملؾمل‪ّ٦‬ر) مو م‪ 011‬م (زؾمل‪ّ٦‬ر مبرملغمل‪ ّ٢‬مرؾؿملضمل‪ )ّ٨‬م‪ ,‬مو مرمّٓر ماإلذمملرة مػؽملممل مأن ماظّٓاظهملم‬ ‫‪fadeTo‬مالمتعمل‪ّ٦‬ممحبّٔفماظضملؽملمملصّٕمسؽملّٓماغؿؾملمملءمايّٕطهملمطؼملمملمتظملضمل‪ّ٢‬م‪fadeOut‬معـالًم‪ .‬م‬ ‫م‬
  
  ‫عقملثّٕٓاتماالغّٖالقم‪ :‬م‬ ‫ؼؿ‪ّ٦‬صّٕ ميف معغملؿؾهمل م‪ jQuery‬مدوال مخمملصهمل محبّٕطمملت مأصم‪ ّ٢‬معـ‪ ّ٢‬مدوال محّٕطمملت ماالغّٖالق مو معؽملؾملمملم‬ ‫حّٕطهملماالغّٖالقماظلظملػمل‪ّ٨‬م‪slide down‬ماظيتمت‪ّ٦‬صّٕػمملماظّٓاظهملم‪slideDown‬مذاتماظرملغمل‪ّ٢‬م‪ :‬م‬ ‫;)‪$(‟selector‟).slideDown(speed,F‬‬
  
  ‫حؿملىمل مأن ماظ‪ّ٦‬دؿمل‪ ّٛ‬م‪ speed‬مميـ‪ ّ٢‬ماظلّٕسهمل مو ماظ‪ّ٦‬دؿمل‪ ّٛ‬م‪ F‬مميـ‪ ّ٢‬مازلمملً مظّٓاظهمل م ُتلؿّٓس‪ ّ٧‬مسؽملّٓ ماغؿؾملمملءم‬ ‫اٌقملثّٕ م‪ ,‬مطؼملممل مت‪ّ٦‬صّّٕ ماٌغملؿؾهمل مداظهملً مظالغّٖالق ماظضملػمل‪ّ٦‬ي م‪ slide up‬مازلؾملممل م‪ slideUp‬مو مهلمملم‬ ‫اظرملغمل‪ّ٢‬م‪ :‬م‬ ‫;)‪$(‟selector‟).slideUp(speed,F‬‬
  
  ‫حؿملىملمأنٓ ماظ‪ّ٦‬دؿمل‪ّٛ‬م‪ speed‬موماظ‪ّ٦‬دؿمل‪ّٛ‬م‪ F‬مميـالن مدّٕسهملماظؿؽملظملؿملّٔموماد‪ّ٣‬ماظّٓاظهملماظيتمتُلؿّٓس‪ّ٧‬مسؽملّٓم‬ ‫االغؿؾملمملءمع‪ّ٤‬مايّٕطهمل‪ .‬م‬ ‫و متعملّٓم ماٌغملؿؾهمل مدجممملً مظػملّٓاظؿني ماظلمملبعملؿني مبّٓاظهمل مضػملنمل مخمملصهمل مبؾملؼملممل مازلؾملممل ماظّٓاظهملم‬ ‫‪ slideToggle‬متعمل‪ّ٦‬ممبكملزؾملمملرماظضملؽملمملصّٕماٌكظملؿملهملمبمملدؿكّٓاممعقملثّٕم‪ slide Down‬مومإخظملمملءم‬ ‫اظضملؽملمملصّٕماظصملمملػّٕةمبمملدؿكمملدممعقملثّٕم‪slide Up‬مومهلمملماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;)‪$(‟selector‟).slideToggle(speed,F‬‬
  
  ‫ومالمداس‪ َّ٨‬مظؽملؿّٔطّّٕمعضملمملًمأنٓ ماظ‪ّ٦‬دؿمل‪ّٛ‬م‪ speed‬مميـ‪ّ٢‬مدّٕسهمل ماظؿؽملظملؿملّٔموماظ‪ّ٦‬دؿمل‪ّٛ‬م‪ F‬مميـ‪ّ٢‬ماد‪ّ٣‬ماظّٓاظهملم‬ ‫اظيتمتُلؿّٓس‪ّ٧‬مسؽملّٓماغؿؾملمملءمايّٕطهملم‪ .‬م‬
  
  ‫‪81‬‬
  
  ‫إؼعملمملفمايّٕطهملم‪ :‬م‬ ‫آخّٕ مداظهمل مع‪ ّ٤‬مدوال معغملؿؾهمل م‪ jQuery‬ماًمملصهمل مبممليّٕطهمل مػ‪ ّ٨‬ماظّٓاظهمل م‪ stop‬مو ماظيت متلؿكّٓمم‬ ‫بؾلمملرهملمإلؼعملمملفمتؽملظملؿملّٔمأيمحّٕطهملمضؿملّٓماظؿؽملظملؿملّٔمومتلؿكّٓممبمملظرملغمل‪ّ٢‬م‪:‬‬ ‫;)(‪$(‟selector‟).stop‬‬
  
  ‫عّٕج‪ّٝ‬مدّٕؼ‪ّٝ‬ميّٕطمملتماٌغملؿؾهملم‪ :‬م‬ ‫ؼػملك‪ّٙ‬ماىّٓولماظؿمملظ‪ّ٨‬مأػ‪ّ٣‬مدوالمايّٕطمملتماًمملصهملممبغملؿؾهملم‪jQuery‬م‪ :‬م‬ ‫اد‪ّ٣‬ماظّٓاظهمل م‬
  
  ‫سؼملػملؾملممل م‬
  
  ‫اجملؼمل‪ّ٦‬سهمل م‬
  
  ‫‪show‬‬
  
  ‫إزؾملمملرماظضملؽملمملصّٕماٌكظملؿملهمل م‬
  
  ‫عقملثّٕاتمبلؿملشملهمل م‬
  
  ‫‪hide‬‬
  
  ‫إخظملمملءماظضملؽملمملصّٕماظصملمملػّٕة م‬
  
  ‫عقملثّٕاتمبلؿملشملهمل م‬
  
  ‫‪toggle‬‬
  
  ‫ضػملنملمحمملظهملمزؾمل‪ّ٦‬رماظضملؽملزملّٕ‬
  
  ‫عقملثّٕاتمبلؿملشملهمل م‬
  
  ‫‪fadeIn‬‬
  
  ‫زؾمل‪ّ٦‬رمعؿالش م‬
  
  ‫عقملثّٕاتماظؿالذ‪ ّ٨‬م‬
  
  ‫‪fadeOut‬‬
  
  ‫اخؿظملمملءمعؿالش م‬
  
  ‫عقملثّٕاتماظؿالذ‪ ّ٨‬م‬
  
  ‫‪fadeTo‬‬
  
  ‫تالذ‪ّ٨‬مإشممذظملمملصؿملهملمحمّٓدة م‬
  
  ‫عقملثّٕاتماظؿالذ‪ ّ٨‬م‬
  
  ‫‪slideDown‬‬
  
  ‫اغّٖالقمظألدظمل‪ ّ٢‬م‬
  
  ‫عقملثّٕاتماالغّٖالق م‬
  
  ‫‪slideUp‬‬
  
  ‫اغّٖالقمظألسػمل‪ ّ٧‬م‬
  
  ‫عقملثّٕاتماالغّٖالق م‬
  
  ‫‪slideToggle‬‬
  
  ‫اغّٖالقمإشممايمملظهملماٌضملمملطلهمل م عقملثّٕاتماالغّٖالق م‬
  
  ‫‪82‬‬
  
  ‫‪stop‬‬
  
  ‫إؼعملمملفماٌقملثّٕاتمضؿملّٓماظؿؽملظملؿملّٔ‬
  
  ‫م‬
  
  ‫م‬
  
  ‫إغرملمملءمحّٕطمملتمخمملصهملم‪ :‬م‬ ‫تلؼملّّمظؽملمملمعغملؿؾهملم‪ jQuery‬مبكملغرملمملءمحّٕطمملتمخمملصهملمشرلمتػمل‪ّ١‬ماالصذلاضؿملهملماظيتمت‪ّ٦‬صّٕػمملمسدلماظّٓاظهملم‬ ‫‪animate‬موماظيتممتؿػمل‪ّ١‬ماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;)‪$(‟selector‟).animate(properties,speed‬‬
  
  ‫حؿملىمل مأن ماظ‪ّ٦‬دؿمل‪ ّٛ‬م‪ properties‬مػ‪ ّ٦‬مطمملئ‪ ّ٤‬م‪ JSON‬م(طمملظّٔي مسّٕضؽملممله مدمملبعملمملً ميف ماظّٓضمملئ‪ّ٠‬م‬ ‫اًمملصهمل مبمملظّٓوال)مميـ‪ّ٢‬مجمؼمل‪ّ٦‬سهملمع‪ّ٤‬ماًزملمملئ‪ّٙ‬ماظيتمدؿمللؿعملّٕمسػملؿملؾملمملماظضملؽملزملّٕمبضملّٓماغؿؾملمملءمايّٕطهملممإذم‬ ‫أنٖ م صغملّٕةمايّٕطمملتماًمملصهملمتغملؼمل‪ّ٤‬ميفماالغؿعملممللمع‪ّ٤‬مايمملظهملماظشملؾؿملضملؿملهملمظػملضملؽملزملّٕمإشممايمملظهملماىّٓؼّٓةم‬ ‫اظيت متظملّٕضؾملممل ماًزملمملئ‪ ّٙ‬ماٌّٖودة مب‪ّ٦‬ادشملهمل ماظ‪ّ٦‬دؿمل‪ ّٛ‬م‪ properties‬م‪ ,‬مأعممل ماظ‪ّ٦‬دؿمل‪ ّٛ‬م‪speed‬م‬ ‫صكملغ‪ّ٥‬مالمؼّٖالمميـ‪ّ٢‬مدّٕسهملمايّٕطهملمومالمتّٖالماظعملؿمل‪ّ٣‬ماظيتمؼلؿشملؿمل‪ّٝ‬مأخّٔػمملمطؼملمملمذطّٕغمملػمملمدمملبعملمملًم‪,‬مع‪ّ٤‬م‬ ‫اٌؾمل‪ ّ٣‬مأن مغّٔطّٕ مػؽملممل مأن ماًزملمملئ‪ ّٙ‬ماظيت مميغمل‪ ّ٤‬مظػملغملمملئ‪ ّ٤‬م‪ properties‬مأن مزمؿ‪ّ٦‬ؼؾملممل مػ‪ّ٨‬م‬ ‫خزملمملئ‪ّٙ‬ماِّمنمملطماًمملصهملمبمملظضملؽملزملّٕموماظيتمتفملخّٔمضؿملؼملمملًمرضؼملؿملهملً مصعمل‪ ّٛ‬ميفماظضملمملدةمعـ‪ّ٢‬م‪ height‬موم‬ ‫‪ opacity‬مو م‪ top‬مو م‪ size-font‬م‪ ..‬مإخل مأو مأن متفملخّٔ مأزلمملء مإحّٓى مدوال ماٌغملؿؾهملم‬ ‫اًمملصهملمبممليّٕطهملمعـ‪ّ٢‬م‪show‬موم‪toggle‬موم‪hide‬م‪...‬مإخلم‪ .‬م‬ ‫حلؽملمملً م‪ ..‬مطؼملـممللمأوٓلمسػمل‪ّ٧‬مإغرملمملءمحّٕطهملمخمملصهملمبؽملمملمدؽملعمل‪ّ٦‬ممبكملطؼملممللمغعمل‪ّٙ‬ميفمحّٕطمملتماٌغملؿؾهملمؼغملؼمل‪ّ٤‬م‬ ‫يف مايّٕطهمل م‪ fadeToggle‬ماظيت ممل مغَّٕ مأغؾملممل مع‪ّ٦‬ج‪ّ٦‬دة مبرملغمل‪ ّ٢‬ماصذلاض‪ ّ٨‬مسػمل‪ ّ٧‬مسغملّٗ مبمملض‪ّ٨‬م‬ ‫جمؼمل‪ّ٦‬سمملت مايّٕطمملت ماظيت ممتؿػمل‪ ّ١‬مط‪ ّ٢‬معؽملؾملممل مداظهمل مضػملنمل مو مظؾؽملمملء مػّٔه مايّٕطهمل ماًمملصهمل مميغمل‪ ّ٤‬مأنم‬ ‫غغملؿنملمذؿملؽمملًمطؾملّٔام‪ :‬م‬ ‫;)‟‪$(‟selector‟).animate({opacity : ‟toggle‟}, ‟slow‬‬
  
  ‫‪83‬‬
  
  ‫طؼملممل متالح‪ ّٜ‬مػؽملممل مصكملن ماظ‪ّ٦‬دؿمل‪ ّٛ‬م‪ speed‬مػؽملممل مزمؼمل‪ ّ٢‬ماظعملؿملؼملهمل م‪ slow‬ميف محني مأن ماظ‪ّ٦‬دؿمل‪ّٛ‬م‬ ‫‪properties‬مػؽملمملمػ‪ّ٦‬مطمملئ‪ّ٤‬م‪JSON‬ماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫}‟‪{opacity :‟toggle‬‬
  
  ‫وماظّٔيمؼضملينمضػملنملمضؿملؼملهملماًمملصؿملهملم‪opacity‬ماًمملصهملمبمملظضملؽملزملّٕميفمط‪ّ٢‬معّٕةم‪ .‬م‬ ‫م‬ ‫ومطؼملـممللمآخّٕمميغمل‪ّ٤‬مإغرملمملءمحّٕطهملمخمملصهملمبؽملمملمتعمل‪ّ٦‬مممبسملمملسظملهملمحف‪ّ٣‬ماظضملؽملمملصّٕمثالثهملمأضضملمملفمطؼملمملمؼػمل‪ّ٨‬م‪ :‬م‬ ‫(‪$(‟selector‟).animate‬‬ ‫‪: $(this).width() * 3 ,‬م ‪{ width‬‬ ‫} ‪3‬م * )(‪: $(this).height‬م‪height‬‬ ‫;) ‟‪, „slow‬‬
  
  ‫وماآلنمأسؿعملّٓمأنمصغملّٕةمإغرملمملءمايّٕطمملتماًمملصهملمأصؾقوملمواضقهملًمإذمؼؽملؾطمل‪ ّ٨‬مصعمل‪ّٛ‬مأنمتّٖودماظّٓاظهملم‬ ‫مبفؼمل‪ّ٦‬سهمل مع‪ ّ٤‬ماظعملؿمل‪ ّ٣‬ماظؽملؾملمملئؿملهمل مًمملصؿملمملت ماظضملؽملزملّٕ مسدل مطمملئ‪ ّ٤‬م‪ JSON‬مو مميغملؽمل‪ ّ١‬مهّٓؼّٓ ماظلّٕسهمل مسدلم‬ ‫اظ‪ّ٦‬دؿمل‪ّٛ‬ماظـمملغ‪ّ٨‬م‪speed‬م‪..‬محصملمملًمع‪ّ٦‬صعملمملًم‪ .‬م‬
  
  ‫‪84‬‬
  
  ‫م‬ ‫م‬ ‫م‬
  
  ‫م‬ ‫ع‪ّ٤‬ماظّٓضؿملعملهملم‪87‬مإشمماظّٓضؿملعملهملم‪110‬م‪ :‬م‬
  
  ‫اظؿكمملرنملمع‪ّٝ‬ماًمملدمم‬ ‫سدلمتعملؽملؿملٓهملم‪AJAX‬‬
  
  ‫‪85‬‬
  
  ‫اظؿكمملرنملمع‪ّٝ‬ماًمملدممسدلمتعملؽملؿملهملم‪AJAX‬م‪:‬‬
  
  ‫م‬
  
  ‫أدؿشملؿمل‪ ّٝ‬مأن مأتشملمملول مسػمل‪ ّ٧‬ماظؿعملؽملؿملمملت ماًمملصٓهمل مبدلجمهمل ماظذمل م‪ Web‬مِّض‪ّ٦‬ل م‪ :‬مإنٓ مأي متعملؽملؿملهمل معؽملؾمل‪ ّٖ٤‬مملم‬ ‫تلؿشمل‪ّٝ‬مأنمتظملؿّّمآصمملقمتشمل‪ّ٦‬ؼّٕمتشملؾؿملعملمملتماظذملم‪Web‬مطؼملمملمصضملػملوملمتعملؽملؿملهملم‪ .AJAX‬م‬ ‫‪ AJAX‬ماخؿزملمملر مظذمل م‪ Asynchronous Java Script And XML‬مو مػ‪ ّ٨‬متعملؽملؿملهملم‬ ‫تلؼملّّمظؿشملؾؿمل‪ّ٠‬ماظذملم‪ Web‬مبمملظؿكمملرنملمع‪ّٝ‬ماظذملم‪ Server‬مسدلمإردممللمرػملؾمملتمشرلمعؿّٖاعؽملهملمظ‪ّ٥‬موّٕيم‬ ‫دونمايمملجهملمإلسمملدةمهؼملؿمل‪ّ٢‬ماظزملظملقهملممممملمؼعملّٕٓبماٌلمملصهملمبنيمتشملؾؿملعملمملتماالغذلغوملمومتشملؾؿملعملمملتمدشملّّم‬ ‫اٌغملؿنملمومبمملظشملؾ‪ّٝ‬مصكملنٓ ماخؿالفمعلؿضملّٕضمملتماظذملم‪ Web‬مرمضمل‪ّ٢‬ماِّع‪ّ٦‬رمأطـّٕمتضملعملؿملّٓاًمطضملمملدت‪ّ٥‬مومطضملمملدتؽملمملم‬ ‫دؽملػملعمل‪ّ٨‬مػّٔهماظؿضملعملؿملّٓاتمخػمل‪ّٟ‬مزؾمل‪ّ٦‬رغمملمومغلؿضملؼمل‪ّ٢‬معغملؿؾؽملمملم‪jQuery‬مظؿؿ‪ّ٦‬شممأعّٕماظؿضملعملؿملّٓاتمومتعملّٓمم‬ ‫ظؽملمملمدواالً مبّٓؼػملهملً مبلؿملشملهملمتػملؾٓ‪ّ٨‬محمملجمملتؽملمملممتمملعمملًمومتلؼملّّمظؽملمملمبمملظذلطؿملّٖمسػمل‪ّ٧‬مػّٓفمتشملؾؿملعملؽملمملمصعمل‪ّٛ‬مدونمأنم‬ ‫غرملطمل‪ّ٢‬مبمملظؽملمملمبفمليمذ‪ّ٨‬ءمآخّٕم‪ .‬م‬ ‫م‬ ‫عػملق‪ّ٦‬زهملم‪ :‬مضّٓمتغمل‪ّ٦‬نمػّٔهماظّٓضمملئ‪ّ٠‬مػ‪ّ٨‬ماِّصضملنملميفماظغملؿمملبمإذمأغٖؽملمملمغؽملمملضّ٘مصؿملؾملمملمادؿـؼملمملرماٌغملؿؾهملم‬ ‫ظؿؾلؿمل‪ّٛ‬ماظرملؿملظملّٕاتماظيتمؼغملؿؾؾملمملمعدلجم‪ ّ٦‬م‪ AJAX‬مظغمل‪ ّٖ٤‬مػّٔامالمؼضملينمأغؽملمملمغطملشملّ‪ّ٨‬ماظؿعملؽملؿملهملم‪ AJAX‬مومالم‬ ‫أي مع‪ ّ٤‬متعملؽملؿملمملت ماظدلجمهمل مع‪ ّ٤‬مرّٕف ماًمملدم مصكملذا ممل متغمل‪ ّ٤‬مظّٓؼ‪ ّ١‬مخدلة ميف ماظدلجمهمل مع‪ ّ٤‬مرّٕفم‬ ‫اًمملدمم‪Server‬مأومطؽملوملَممم‪ّ٤‬مالمؼضملّٕص‪ّ٦‬نم‪AJAX‬مصؾمملدؿشملمملسؿ‪َّ١‬مأنمتعملّٕأمسؽملؾملؼملمملمضؾ‪ّ٢‬مضّٕاءةمػّٔهم‬ ‫اظّٓضمملئ‪ّ٠‬مصؾملؼملممل مع‪ّ٦‬ض‪ّ٦‬سمملن مخمملرجمإرمملرمػّٔاماظغملؿمملبمومضّٓمزمؿمملجمملن مأطـّٕمع‪ّ٤‬مطؿمملب مظؿطملشملؿملؿؾملؼملممل م‪,‬مومإنم‬ ‫طمملنماٌ‪ّ٦‬ض‪ّ٦‬عمالمؼؾملؼملٓ‪ّ١‬متلؿشملؿمل‪ّٝ‬ماالغؿعملممللمعؾمملذّٕةًمإشممدضمملئ‪ّ٠‬ماإلضمملصمملتم‪.‬م م‬ ‫م‬ ‫تّٔطّّٕم‪:‬ماِّعـػملهملميفمػّٔاماظظملزمل‪ّ٢‬متؿشملػملَّنملموج‪ّ٦‬دمتشملؾؿمل‪ّ٠‬مع‪ّ٤‬مرّٕفمخمملدممبضملؿملّٓمأومحمػملّ‪ّ٨‬م‪.‬م م‬
  
  ‫‪86‬‬
  
  ‫جػملنملماحملؿ‪ّ٦‬ىمع‪ّ٤‬ماًمملدمم‪:‬‬ ‫أوٓل ماظّٓوال ماظيت مت‪ّ٦‬صّٕػممل معغملؿؾهمل م‪ jQuery‬مظؿفملعني مإردمملل ماظشملػملؾمملت مشرل ماٌؿّٖاعؽملهمل مظػملكمملدمم‬ ‫‪Server‬مػ‪ّ٨‬ماظّٓاظهملم‪load‬ماظيتمهلمملماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;)‪$(‟selector‟).load(url,JSON,F‬‬
  
  ‫حؿملىملمأنماظ‪ّ٦‬دؿمل‪ّٛ‬م‪url‬مميـ‪ّ٢‬ماد‪ّ٣‬ماظزملظملقهملماظيتمدرلد‪ّ٢‬مإظؿملؾملمملماظشملػملنملميفماًمملدمم‪,‬ميفمحنيمأنٖم‬ ‫اظ‪ّ٦‬دؿمل‪ ّٛ‬ماالخؿؿملمملري م‪ JSON‬مػ‪ ّ٦‬مطمملئ‪ ّ٤‬مميـ‪ ّ٢‬مجمؼمل‪ّ٦‬سهمل مع‪ ّ٤‬ماظ‪ّ٦‬دشملمملء ماظيت مدذلد‪ ّ٢‬مإشم ماظزملظملقهملم‬ ‫ذاتؾملمملميفماًمملدم مأعٓممل ماظ‪ّ٦‬دؿمل‪ّٛ‬ماالخؿؿملمملريم‪ F‬مصؾمل‪ّ٦‬مميـ‪ّ٢‬مازلمملًمظّٓاظهملمع‪ّ٦‬ج‪ّ٦‬دةميفماظزملظملقهملمتُلؿّٓس‪ّ٧‬م‬ ‫يصملهمل ماغؿؾملمملء متؽملظملؿملّٔ ماظشملػملنمل مو مبضملّٓ مضّٓوم ماالدؿفمملبهمل مع‪ ّ٤‬ماًمملدم مو مميغمل‪ ّ٤‬ممتّٕؼّٕ مادؿفمملبهمل ماًمملدمم‬ ‫ط‪ّ٦‬دؿمل‪ ّٛ‬مهلّٔه ماظّٓاظهمل م‪ ,‬مو مرؾضملمملً مأػ‪ ّ٣‬معممل مرمنمل مذطّٕه مأن ماظّٓاظهمل م‪ load‬متعمل‪ّ٦‬م مبمملدؿؾّٓال محمؿ‪ّ٦‬ىم‬ ‫اظغملمملئؽملمملتماظيتمؼضملؿملّٓػمملماحملّٓدم‪Selector‬مبمملحملؿ‪ّ٦‬ىماظّٔيمدؿملضمل‪ّ٦‬دمع‪ّ٤‬ماًمملدمم‪Server‬م‬ ‫غؿؿملفهملمتؽملظملؿملّٔماظشملػملنمل مسػمل‪ّ٧‬مذغمل‪ّ٢‬م‪ HTML‬م(يفمايعملؿملعملهملمدؿضمل‪ّ٦‬دماظزملظملقهملماٌشملػمل‪ّ٦‬بهملمطمملعػملهملً) م‪,‬مومطؼملـممللم‬ ‫سػمل‪ّ٧‬مػّٔهماظّٓاظهملمضّٓمغغملؿنملمذؿملؽمملًمطؼملمملؼػمل‪ّ٨‬م‪ :‬م‬ ‫;)‟‪$(‟#divA‟).load(‟myPage.aspx‬‬
  
  ‫حؿملىمل مدؿعمل‪ّ٦‬م مػّٔه ماظّٓاظهمل مبمملدؿؾّٓال محمؿ‪ّ٦‬ى ماظ‪ّ٦‬د‪ ّ٣‬مذو ماٌضملّٕف م‪ divA‬ممبقؿ‪ّ٦‬ى ماظزملظملقهملم‬ ‫‪myPage.aspx‬ماٌ‪ّ٦‬ج‪ّ٦‬دةميفمغظملّٗمعلمملرمصظملقؿؽملمملمايمملظؿملهمل‪ .‬م‬ ‫و م ميغملؽملؽملممل ماظؿقغمل‪ ّ٣‬مبمملظضملؼملػملؿملهمل مأطـّٕ مس‪ ّ٤‬مرّٕؼ‪ ّ٠‬متّٖوؼّٓ ماظّٓاظهمل ممبقّٓد مع‪ ّٝ‬ماد‪ ّ٣‬ماظزملظملقهمل مممممل مؼلؼملّّم‬ ‫بمملدؿؾّٓالماحملؿ‪ّ٦‬ىمبمملحملؿ‪ّ٦‬ىماٌضملمملدمع‪ّ٤‬ماًمملدم مسػمل‪ّ٧‬مذغمل‪ّ٢‬م‪ HTML‬موماظّٔيمؼشملمملب‪ّ٠‬ماحملّٓدم‬ ‫صعمل‪ّٛ‬مومسؽملّٓػمملمميغملؽملؽملمملمطؿمملبهملمذ‪ّ٨‬ءمطؼملمملؼػمل‪ّ٨‬م‪ :‬م‬ ‫;)‟ػ‪href=www.aw.com‬ؼ‪$(‟#divA‟).load(„myPage.aspx a‬‬
  
  ‫‪87‬‬
  
  ‫حؿملىمل متعمل‪ّ٦‬م ماظرملؿملظملّٕة ماظلمملبعملهمل مبمملدؿؾّٓال محمؿ‪ّ٦‬ى ماظ‪ّ٦‬د‪ ّ٣‬مذو ماٌضملّٕف م‪ divA‬مبمملحملؿ‪ّ٦‬ى ماظّٔيم‬ ‫ؼشملمملب‪ ّ٠‬ماحملّٓد مػ‪href=www.aw.com‬ؼ‪ a‬مو ماظّٔي مدؿضملؿملّٓه ماظّٓاظّهمل م‪ load‬مع‪ ّ٤‬ماظزملظملقهملم‬ ‫‪.myPage.aspx‬‬ ‫ومطؼملـممللمسػمل‪ّ٧‬ممتّٕؼّٕمودشملمملء مظػملزملظملقهملماهلّٓفميفماًمملدممظؽملظملّٕضمأنماظزملظملقهملماظيتمغّٕؼّٓمادؿضملمملدةم‬ ‫ضل‪ّ٣‬مع‪ّ٤‬محمؿ‪ّ٦‬اػمملممتػمل‪ّ١‬ماظضملؽمل‪ّ٦‬انماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫‪/myPage.aspx?p1=v1&p2=v2‬‬ ‫سؽملّٓئّٔمميغملؽملؽملمملمأنمغغملؿنملماظرملؿملظملّٕةماظؿمملظؿملهملم‪ :‬م‬ ‫;)}‟‪‟v2‬م‪‟v1‟, p2:‬م‪$(‟#divA‟).load(‟/myPage.aspx‟, {p1:‬‬
  
  ‫حؿملىملمأنماظ‪ّ٦‬دؿمل‪ّٛ‬ماظـمملغ‪ّ٨‬مػؽملمملمػ‪ّ٦‬مسؾمملرةمس‪ّ٤‬مطمملئ‪ّ٤‬م‪JSON‬مميـ‪ّ٢‬مودشملمملءماظزملظملقهملماهلّٓفم‪ .‬م‬ ‫م‬ ‫عػملق‪ّ٦‬زهملم‪:‬مع‪ّ٤‬ماٌؾمل‪ّ٣‬مأنمغّٔطُّٕمػؽملمملمأنماٌلؿضملّٕضم‪Internet Explorer‬مؼعمل‪ّ٦‬ممبؿكّٖؼ‪ّ٤‬م‬ ‫غلكهمل معقملضؿهمل مع‪ ّ٤‬ماظزملظملقمملت ماٌشملػمل‪ّ٦‬بهمل م‪ Cache‬مظّٔا مإنِ مطمملغومل ماظزملظملقهمل ماظيت متؽمل‪ّ٦‬ي مجػملنملم‬ ‫عضملػمل‪ّ٦‬عمملتٍ م عؽملؾملممل معؿفّٓدةً مبرملغمل‪ ّ٢‬مدّٕؼ‪ ّٝ‬معـ‪ ّ٢‬مصظملقمملت مأدضملمملر ماظضملؼملالت معـالً م‪ ,‬مسؽملّٓػممل ماحّٕص مسػمل‪ّ٧‬م‬ ‫تّٖوؼّٓ مودؿمل‪ ّٛ‬مذا مضؿملؼملهمل متؿطملرل مسرمل‪ّ٦‬ائؿملمملً مظػملّٓاظهمل مِّن مػّٔا مرمضمل‪ ّ٢‬ماٌلؿضملّٕض مدمملظ‪ ّٟ‬ماظّٔطّٕ مؼضملؿدل مط‪ّ٢‬م‬ ‫رػملنملمعؽملؾملمملمصظملقهملًمعلؿعملػملهملمس‪ّ٤‬ماِّخّٕى مومبمملظؿمملظ‪ّ٨‬مظ‪ّ٤‬مؼ‪ّ٦‬ثّٕمسؼمل‪ّ٢‬م‪ Cache‬مإلحّٓىماظزملظملقمملتمسػمل‪ّ٧‬م‬ ‫سؼمل‪ّ٢‬ماٌؿؾعمل‪ّ٨‬معؽملؾمل‪ّٖ٤‬م‪ .‬م‬ ‫م‬
  
  ‫‪88‬‬
  
  ‫متّٕؼّٕمودشملمملءمظػملكمملدممع‪ّ٤‬محعمل‪ّ٦‬لماظؽملؼملمملذجم‪ :‬م‬ ‫شمملظؾمملً معممل ممنّٕر مإشم ماظّٓاظهمل م‪ load‬مضؿملؼملمملً مع‪ ّ٤‬مأحّٓ ممنمملذج ماظزملظملقهمل م‪ Forms‬م مط‪ّ٦‬دشملمملء مظػملزملظملقهملم‬ ‫اهلّٓف مسدل مادؿضملؼملمملل مداظهمل مأخّٕى مع‪ ّ٤‬مدوال ماٌغملؿؾهمل مػ‪ ّ٨‬ماظّٓاظهمل م‪ serialize‬مصؼملـالًم‬ ‫الدؿّٓسمملء ماظزملظملقهمل م‪ myPage.aspx‬مع‪ ّٝ‬مودشملمملء مضؿملؼملؾمل‪ ّ٣‬مضمملدعهمل مع‪ ّ٤‬ماظؽملؼمل‪ّ٦‬ذج مذو ماٌضملّٕفم‬ ‫‪myForm‬مميغمل‪ّ٤‬مأنمغغملؿنملمعمملؼػمل‪ّ٨‬م‪ :‬م‬ ‫;))(‪‟/myPage.aspx‟, $(‟#myForm‟).serialize‬م(‪$(‟#divA‟).load‬‬
  
  ‫ومدؿؿ‪ّ٦‬شمماظّٓاظهملم‪serialize‬ميفمػّٔاماٌـممللمت‪ّ٦‬ظؿملّٓمطمملئ‪ّ٤‬م‪JSON‬ماٌؽملمملدنملمظػملّٓاظهملم‪load‬م‬ ‫وماظّٔيمدؿملؼملـ‪ّ٢‬مودشملمملءماظزملظملقهملماهلّٓفم‪myPage.aspx‬م‪ .‬م‬ ‫م‬ ‫عػملق‪ّ٦‬زهمل م‪ :‬ميف محمملل متّٖوؼّٓ مضؿملؼملهمل مظػمل‪ّ٦‬دؿمل‪ ّٛ‬ماالخؿؿملمملري م‪ JSON‬مدؿعمل‪ّ٦‬م ماظّٓاظهمل مبكملردمملل ماظشملػملنملم‬ ‫بمملظشملّٕؼعملهمل م‪ POST‬مو ميف محمملل مسّٓم متّٖوؼّٓ مضؿملؼملهمل مظّٔات ماظ‪ّ٦‬دؿمل‪ ّٛ‬مدؿعمل‪ّ٦‬م ماظّٓاظهمل مبكملردمملل ماظشملػملنملم‬ ‫بمملظشملّٕؼعملهملم‪GET‬م‪ .‬م‬
  
  ‫إردممللمرػملؾمملتمع‪ّ٤‬ماظؽمل‪ّ٦‬عم‪GET‬م‪ :‬م‬ ‫تلؼملّّمظؽملمملماٌغملؿؾهملم‪ jQuery‬مبكملردممللمرػملؾمملتمشرلمعؿّٖاعؽملهملمع‪ّ٤‬مغ‪ّ٦‬عمحمّٓدمع‪ّ٤‬ماظؽمل‪ّ٦‬سنيم‪ GET‬موم‬ ‫‪ POST‬مسدلمجمؼمل‪ّ٦‬سهملمع‪ّ٤‬ماظّٓوالمعؽملؾملمملماظّٓاظهملم‪ $.get‬ماظيتمتعمل‪ّ٦‬ممبكملردممللمرػملنمل مشرلمعؿّٖاع‪ ّ٤‬مع‪ّ٤‬م‬ ‫اظؽمل‪ّ٦‬عم‪GET‬مإشمماًمملدممومتضملؿملّٓمطمملئؽمل ًمملمميـ‪ّ٢‬ماالدؿفمملبهملماظيتمأسمملدػمملماًمملدممومهلّٔهماظّٓاظهملماظرملغمل‪ّ٢‬م‬ ‫اظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;)‪$.get(url,JSON,F‬‬
  
  ‫‪89‬‬
  
  ‫حؿملىمل مأن ماظ‪ّ٦‬دؿمل‪ ّٛ‬م‪ url‬مميـ‪ ّ٢‬ماد‪ ّ٣‬ماظزملظملقهمل ماظيت مدرلد‪ ّ٢‬مإظؿملؾملممل ماظشملػملنمل ميف ماًمملدم مو مميـ‪ّ٢‬م‬ ‫اظ‪ّ٦‬دؿمل‪ّٛ‬ماالخؿؿملمملريم‪ JSON‬مجمؼمل‪ّ٦‬سهملمع‪ّ٤‬ماظ‪ّ٦‬دشملمملءماظيتمدذلد‪ّ٢‬مإشمماظزملظملقهملمذاتؾملمملميفماًمملدمم‬ ‫أعمملماظ‪ّ٦‬دؿمل‪ّٛ‬ماالخؿؿملمملريم‪F‬مصؾمل‪ّ٦‬مميـ‪ّ٢‬مازلمملًمظّٓاظهملمع‪ّ٦‬ج‪ّ٦‬دةميفماظزملظملقهملمتُلؿّٓس‪ّ٧‬ميصملهملماغؿؾملمملءمتؽملظملؿملّٔم‬ ‫اظشملػملنملمومميغمل‪ّ٤‬ممتّٕؼّٕمادؿفمملبهملماًمملدممط‪ّ٦‬دؿمل‪ّٛ‬مهلّٔهماظّٓاظهمل‪ .‬م‬ ‫و مػؽملممل مرمّٓر ماظؿؽملؾؿمل‪ ّ٥‬مأن مػّٔه ماظّٓاظّهمل متضملؿدل مع‪ ّ٤‬مدوال م‪ jQuery‬ماظ‪ّ٦‬زؿملظملؿملٓهمل م(جمؼمل‪ّ٦‬سهمل مع‪ ّ٤‬مدوالم‬ ‫اٌغملؿؾهملمتُلؿّٓس‪ّ٧‬معؾمملذّٕةًمدونمايمملجهملمظػملؼملقّٓداتمومؼغمل‪ّ٦‬نمهلّٔهماظّٓوالماظزملؿملطملهملم‪ $.X‬محؿملىملمأنم‬ ‫‪X‬مػؽملمملمميـ‪ّ٢‬ماد‪ّ٣‬ماظّٓاظهمل)م‪ .‬م‬ ‫ومطؼملـممللمسػمل‪ّ٧‬مادؿكّٓامماظّٓاظهملماظ‪ّ٦‬زؿملظملؿملهملم‪$.get‬مضّٓمغغملؿنملمعمملؼػمل‪ّ٨‬م‪ :‬م‬ ‫(‪$.get‬‬ ‫‪‟/myPage.php‟,‬‬ ‫‪:„10‟ , p2 :‟cat‟},‬م ‪{p1‬‬ ‫};)‪Function(data){alert(data‬‬ ‫;)م‬
  
  ‫حؿملىملمأنمتؽملظملؿملّٔماظرملؿملظملّٕةماظلمملبعملهملمؼّٕد‪ّ٢‬مرػملؾ ًمملمشرلمعؿّٖاع‪ّ٤‬مإشمماظزملظملقهملم‪ :‬م‬ ‫‪/myPage.php?p1=10&p2=cat‬‬ ‫و مؼفملخّٔ ماظعملؿملؼملهمل ماظيت متضملؿملّٓػممل مػّٔه ماظزملظملقهمل مظؿمللؽملّٓػممل مظػملغملمملئ‪ ّ٤‬م‪ data‬ماظّٔي مميـ‪ ّ٢‬مودؿملشملمملً مظّٓاظهملم‬ ‫بلؿملشملهملمتعمل‪ّ٦‬ممبضملّٕضمضؿملؼملهملمػّٔاماظ‪ّ٦‬دؿمل‪ّٛ‬ميفمصؽملّٓوقمردمملظهملم‪ .‬م‬
  
  ‫‪90‬‬
  
  ‫إردممللمرػملؾمملتمع‪ّ٤‬ماظؽمل‪ّ٦‬عم‪POST‬م‪ :‬م‬ ‫وميفمدؿملمملقمعرملمملب‪ّ٥‬مظػملّٓاظهملماظ‪ّ٦‬زؿملظملؿملهملم‪$.get‬متعمل‪ّ٦‬ممأخؿؾملمملماظّٓاظهملماظ‪ّ٦‬زؿملظملؿملهملم‪$.post‬مبكملردممللمرػملنملم‬ ‫شرلمعؿّٖاع‪ّ٤‬مع‪ّ٤‬ماظؽمل‪ّ٦‬عم‪POST‬مإشمماًمملدممومذغملػملؾملمملماظؿمملظ‪ّ٨‬معرملمملب‪ّ٥‬مظرملغمل‪ّ٢‬مأخؿؾملمملم‪ :‬م‬ ‫م;)‪$.post(url,JSON,F‬‬
  
  ‫حؿملىملمأنماظ‪ّ٦‬دؿمل‪ّٛ‬م‪url‬مميـ‪ّ٢‬ماد‪ّ٣‬ماظزملظملقهملميفماًمملدمم‪,‬موم‪JSON‬مميـ‪ّ٢‬مودشملمملءمػّٔهماظزملظملقهملم‪,‬م‬ ‫و م‪ F‬مميـ‪ ّ٢‬مازلمملً مظّٓاظهمل متلؿّٓس‪ ّ٧‬مسؽملّٓ ماغؿؾملمملء متؽملظملؿملّٔ ماظشملػملنمل مو مميغمل‪ ّ٤‬مأن ممتّٕر مادؿفمملبهمل ماًمملدمم‬ ‫ط‪ّ٦‬دؿمل‪ّٛ‬مهلمملم‪ .‬م‬
  
  ‫إردممللماظشملػملؾمملتمًمملدممعضملػمل‪ّ٦‬ممغ‪ّ٦‬عماالدؿفمملبهملم‪ :‬م‬ ‫ع‪ّ٤‬ماٌؼملغمل‪ّ٤‬مأنمؼضملؿملّٓماظؿشملؾؿمل‪ّ٠‬ماٌ‪ّ٦‬ج‪ّ٦‬دميفماًمملدممادؿفمملبؿ‪ّ٥‬ميفمأيمذغمل‪ّ٢‬مزمّٓدهمعدلعيملمػّٔام‬ ‫اظؿشملؾؿمل‪ ّ٠‬م‪ ,‬مصكملن مطؽملممل مسػمل‪ ّ٧‬مبؿملؽملهمل مو مؼعملني مأن ماظؿشملؾؿمل‪ ّ٠‬ماظّٔي مغّٕد‪ ّ٢‬مإظؿمل‪ ّ٥‬ماظشملػملنمل مدؿملضملؿملّٓ مادؿفمملبؿ‪ّ٥‬م‬ ‫بمملظؿؼملـؿمل‪ّ٢‬م‪ JSON‬مصكملنماٌغملؿؾهملم‪ jQuery‬مت‪ّ٦‬صّٕمداظهملً مخمملصهملمٌـ‪ّ٢‬مػّٔهمايمملظهملمترملمملب‪ ّ٥‬مطـرلاًماظّٓاظهملم‬ ‫اظ‪ّ٦‬زؿملظملؿملهمل م‪ $.get‬مسّٓا مأغؾملممل معزملؼملؼملهمل مالدؿضملمملدة مطمملئؽملمملت م‪ JSON‬م‪ ,‬مػّٔه ماظّٓاظهمل مهؼمل‪ ّ٢‬ماالد‪ّ٣‬م‬ ‫‪$.getJSON‬مومهلمملماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;)‪$.getJSON(url,JSON,F‬‬
  
  ‫حؿملىملمأنماظ‪ّ٦‬دؿمل‪ّٛ‬م‪url‬مميـ‪ّ٢‬ماظزملظملقهملماهلّٓفميفماًمملدمموم‪JSON‬مميـ‪ّ٢‬مودشملمملءمػّٔهماظزملظملقهملم‬ ‫‪,‬مأعمملماظ‪ّ٦‬دؿمل‪ّٛ‬م‪F‬م صؿملؼملـ‪ّ٢‬مازلمملًمظّٓاظهملميفماٌلؿؽملّٓمتلؿّٓس‪ّ٧‬ميصملهملماغؿؾملمملءماظشملػملنملمومميغمل‪ّ٤‬مأنمميّٕرمهلمملم‬ ‫ودؿمل‪ّٛ‬مؼضملدلمس‪ّ٤‬مادؿفمملبهملماًمملدممومؼغمل‪ّ٦‬نمػّٔاماظ‪ّ٦‬دؿمل‪ّٛ‬مطمملئؽملمملًمع‪ّ٤‬مطمملئؽملمملتم‪ .JSON‬م‬ ‫م‬
  
  ‫‪91‬‬
  
  ‫ومعمملمدعؽملمملميفمدؿملمملقمايّٓؼىملمس‪ّ٤‬ماظّٓوالماظ‪ّ٦‬زؿملظملؿملهملماًمملصهملمبذملم‪ AJAX‬ميفمعغملؿؾهملم‪ jQuery‬مصالم‬ ‫ضرلمأنممنّٕمسػمل‪ّ٧‬ماظّٓاظهملم‪ $.getScript‬ماظيتمتعمل‪ّ٦‬ممجبػملنملمعػمل‪ّٟ‬م‪ java script‬مع‪ّ٤‬م‬ ‫اًمملدممومتؽملظملؿملّٔهمداخ‪ّ٢‬ماظزملظملقهملمبرملغمل‪ّ٢‬مشرلمعؿّٖاع‪ّ٤‬مومػّٔهماظّٓاظهملمهلمملماظرملغمل‪ّ٢‬م‪ :‬م‬ ‫;)‪$.getScript(url,F‬‬
  
  ‫حؿملىملمأنماظ‪ّ٦‬دؿمل‪ّٛ‬م‪url‬مميـ‪ّ٢‬معػمل‪ّٟ‬ماظذملم‪Java script‬ميفماًمملدممومميـ‪ّ٢‬ماظ‪ّ٦‬دؿمل‪ّٛ‬م‪F‬مازلمملًم‬ ‫ظّٓاظهملمع‪ّ٦‬ج‪ّ٦‬دةميفماٌلؿؽملّٓمتلؿّٓس‪ّ٧‬ميصملهملماطؿؼملممللماظشملػملنملم‪ .‬م‬
  
  ‫اظؿقغملّ‪ّ٣‬ماظغملمملع‪ّ٢‬مبشملػملؾمملتم‪AJAX‬م‪ :‬م‬ ‫حلؽملمملًم‪..‬مطؼملمملمأنماٌغملؿؾهملم‪jQuery‬ممتؽملقؽملمملمدواالًمبلؿملشملهملًمإلغرملمملءمرػملؾمملتم‪AJAX‬مشرلمعؿّٖاعؽملهملمصكملغؾملمملم‬ ‫متؽملقؽملممل مداظهملً متؿؿملّّ مظؽملممل مإغرملمملء مرػملؾمملت م‪ AJAX‬م ع‪ ّٝ‬ماظؿقغمل‪ ّ٣‬ماظغملمملع‪ ّ٢‬مبغمل‪ ّ٢‬معممل مؼؿضملػمل‪ ّ٠‬مبغمل‪ ّ٢‬مع‪ ّ٤‬مػّٔهم‬ ‫اظشملػملؾمملتم‪,‬مػّٔهماظّٓاظهملمػ‪ّ٨‬ماظّٓاظهملماظ‪ّ٦‬زؿملظملؿملهملم‪$.ajax‬موماظيتمهلمملماظرملغمل‪ّ٢‬ماظضملمملمماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫;)‪$.ajax(options‬م‬
  
  ‫حؿملىملمأنماظ‪ّ٦‬دؿمل‪ّٛ‬م‪ options‬مػ‪ّ٦‬مسؾمملرةمس‪ّ٤‬مطمملئ‪ّ٤‬م‪ JSON‬مميـ‪ّ٢‬مجمؼمل‪ّ٦‬سهملماًؿملمملراتماًمملصهملم‬ ‫بمملظشملػملنمل مو ماظيت مدؿملؿ‪ ّ٣‬متؽملظملؿملّٔه مبؽملمملءّ مسػملؿملؾملممل م‪ .‬مؼ‪ّ٦‬ضّّ ماىّٓول ماظؿمملظ‪ ّ٨‬مخؿملمملرات ماظّٓاظهمل ماظ‪ّ٦‬زؿملظملؿملهملم‬ ‫‪ :$.ajax‬م‬ ‫االد‪ ّ٣‬م‬
  
  ‫اظؽمل‪ّ٦‬ع م‬
  
  ‫اظ‪ّ٦‬ص‪ ّٟ‬م‬
  
  ‫‪url‬‬
  
  ‫غ‪ ّٙ‬م‬
  
  ‫راب‪ّٛ‬ماظزملظملقهملماظيت مدرلد‪ّ٢‬مإظؿملؾملمملماظشملػملنملم‬
  
  ‫‪type‬‬
  
  ‫غ‪ّٙ‬‬
  
  ‫يفماًمملدم م‬ ‫رّٕؼعملهملمإردممللماظشملػملنملم‪,‬م‪GET‬مأوم‪ POST‬م‬
  
  ‫‪92‬‬
  
  ‫‪data‬‬
  
  ‫طمملئ‪ّ٤‬م‪JSON‬‬
  
  ‫‪dataType‬‬
  
  ‫غ‪ ّٙ‬م‬
  
  ‫‪timeout‬‬
  
  ‫رض‪ ّ٣‬م‬
  
  ‫‪success‬‬
  
  ‫داظهمل م‬
  
  ‫‪error‬‬
  
  ‫داظهمل م‬
  
  ‫‪complete‬‬
  
  ‫داظهمل‬
  
  ‫‪beforeSend‬‬
  
  ‫داظهمل م‬
  
  ‫‪async‬‬
  
  ‫ضؿملؼملهملمعؽملشملعملؿملهمل م‬
  
  ‫طمملئ‪ ّ٤‬م‪ JSON‬مميـ‪ ّ٢‬مجمؼمل‪ّ٦‬سهمل مودشملمملءم‬ ‫اظزملظملقهملماظيتمدرلد‪ّ٢‬مإظؿملؾملمملماظشملػملنمل م‬ ‫ضؿملؼملهملمع‪ّ٤‬ماظعملؿمل‪ّ٣‬ماظؿمملظؿملهملماظيتمتضملدلمس‪ّ٤‬مغ‪ّ٦‬عم‬ ‫اظؾؿملمملغمملتماظيتمغؿ‪ّ٦‬ض‪ّٝ‬مأنمؼضملؿملّٓػمملماًمملدمموم‬ ‫اِّغ‪ّ٦‬اع مػ‪ ّ٨‬م‪ :‬م‪ XML‬مو م‪ JSON‬موم‬ ‫‪SCRIPT‬موم‪ TEXT‬م‬ ‫ميـ‪ ّ٢‬ماظّٖع‪ ّ٤‬ماِّسصملؼمل‪ ّ٨‬مظؿؽملظملؿملّٔ ماظشملػملنملم‬ ‫بمملٌػملػمل‪ّ٨‬مثمملغؿملهملمصكملنمملمؼؿ‪ّ٣‬ماطؿؼملممللماظشملػملنملم‬ ‫خاللمػّٔاماظّٖع‪ّ٤‬مصكملنماظّٓاظهملمتعمل‪ّ٦‬ممبكملظطملمملءم‬ ‫اظشملػملنملمعضملؿدلةمحّٓوثمخشملفملمعممل م‬ ‫داظهمل مؼؿ‪ ّ٣‬مادؿّٓسمملؤػممل ميصملهمل ماطؿؼملممللم‬ ‫اظشملػملنملمبؽملفمملح م‬ ‫داظهمل مؼؿ‪ ّ٣‬مادؿّٓسمملؤػمملميصملهمل محزمل‪ّ٦‬لمخشملفملم‬ ‫عمملميفماظشملػملنمل م‬ ‫داظهمل مؼؿ‪ ّ٣‬مادؿّٓسمملؤػممل ميصملهمل ماطؿؼملممللم‬ ‫اظشملػملنملمد‪ّ٦‬اءّمأمتمبؽملفمملحمأممال م‬ ‫داظهمل مؼؿ‪ ّ٣‬مادؿّٓسمملؤػممل مضؾ‪ ّ٢‬مإردمملل ماظشملػملنملم‬ ‫متمملعمملً م‬ ‫سؽملّٓعممل متلؽملّٓ مإظؿملؾملممل ماظعملؿملؼملهمل م‪ True‬مؼؿ‪ّ٣‬م‬ ‫إردمملل ماظشملػملنملمبرملغمل‪ ّ٢‬مشرلمعؿّٖاع‪ّ٤‬مو مػ‪ّ٨‬م‬
  
  ‫‪93‬‬
  
  ‫ايمملظهمل ماالصذلاضؿملهمل مو ماظضملغملّٗ ميف محممللم‬ ‫إدؽملمملدماظعملؿملؼملهملم‪ False‬م‬
  
  ‫‪processData‬‬
  
  ‫ضؿملؼملهملمعؽملشملعملؿملهمل م‬
  
  ‫برملغمل‪ ّ٢‬ماصذلاض‪ ّ٨‬مؼؿ‪ ّ٣‬متّٕعؿملّٖ ماظؾؿملمملغمملتم‬ ‫إٌّدػملهمل مب‪ّ٦‬ادشملهمل ماظ‪ّ٦‬دؿمل‪ ّٛ‬م‪ data‬مإشمم‬ ‫تّٕعؿملّٖ معالئ‪ ّ٣‬مٌلؿضملّٕض ماظذمل م‪ Web‬مو مػ‪ّ٨‬م‬ ‫ايمملظهمل مذاتؾملممل ماظيت مهّٓث مسؽملّٓ مإدؽملمملدم‬ ‫اظعملؿملؼملهمل م‪ true‬مهلّٔه ماًمملصؿملهمل مو ماظضملغملّٗم‬ ‫سؽملّٓمإدؽملمملدماظعملؿملؼملهملم‪ false‬م‬
  
  ‫م‬ ‫ومطؼملـممللمسػمل‪ّ٧‬مادؿكّٓاممػّٔهماظّٓاظهملمضّٓمغغملؿنملمذؿملؽمملًممممملثالًمٌمملمؼػمل‪ّ٨‬م‪ :‬م‬ ‫(‪$.ajax‬‬ ‫{‬ ‫‪:„/myPage.jsp‟ ,‬م ‪url‬‬ ‫‪:„GET‟ ,‬م ‪type‬‬ ‫‟‪dataType : „XML‬‬ ‫}‬ ‫;)‬
  
  ‫ومع‪ّ٤‬ماىّٓؼّٕمبمملظّٔطّٕمأنماٌغملؿؾهملم‪ jQuery‬متلؼملّّمظؽملمملمبؿضملؿملنيمإسّٓاداتماصذلاضؿملهملمظغمل‪ّ٢‬ماظشملػملؾمملتم‬ ‫إٌّدػملهمل مسدل ماظّٓاظهمل م‪ $.ajax‬مس‪ ّ٤‬ماظشملّٕؼ‪ ّ٠‬ماظّٓاظهمل ماظ‪ّ٦‬زؿملظملؿملهمل م‪ $.ajaxSetup‬ماظيت ممتؿػمل‪ّ١‬م‬ ‫اظزملؿملطملهملماظؿمملظؿملهملم‪ :‬م‬
  
  ‫‪94‬‬
  
  ‫;)‪$.ajaxSetup(properties‬‬
  
  ‫حؿملىملمأنماظ‪ّ٦‬دؿمل‪ّٛ‬م‪properties‬مػ‪ّ٦‬مطمملئ‪ّ٤‬م‪JSON‬مميـ‪ّ٢‬مجمؼمل‪ّ٦‬سهملماًمملصؿملمملتماظيتمدؿزملؾّّم‬ ‫اصذلاضؿملهملً مظػملّٓاظهمل م‪ $.ajax‬مو مميغمل‪ ّ٤‬مأن مزمؿ‪ّ٦‬ي ماظ‪ّ٦‬دؿمل‪ ّٛ‬م‪ properties‬ماًؿملمملرات مذاتؾملمملم‬ ‫اٌ‪ّ٦‬ضقهملميفماىّٓولماظلمملب‪ ّ٠‬م‪,‬مومطؼملـممللمسػمل‪ّ٧‬مسؼملػمل‪ّ٥‬مميغمل‪ّ٤‬مأنمغغملؿنملمذؿملؽمملًمعرملمملبؾملمملًمٌمملؼػمل‪ّ٨‬مظؿطملؿملرلم‬ ‫اإلسّٓاداتماالصذلاضؿملهملماًمملصهملمبمملظّٓاظهملم‪$.ajax‬م‪ :‬م‬ ‫(‪$.ajaxSetup‬‬ ‫{‬ ‫‪:„GET‟ ,‬م ‪type‬م‬ ‫‪:„XML‟ ,‬م ‪dataType‬‬ ‫{)‪:function(err‬م ‪error‬ممم‬ ‫;)‪+msg‬م ‟‪alert(„erro message is :‬‬ ‫‪},‬‬ ‫‪:10000‬م ‪timeout‬‬ ‫}‬ ‫;)‬
  
  ‫اِّحّٓاثماًمملصٓهملمبشملػملؾمملتم‪AJAX‬م‪ :‬م‬ ‫آخّٕمعمملمرمنملمذطّٕهميفمدؿملمملقمايّٓؼىملمس‪ّ٤‬مادؿـؼملمملرمعغملؿؾهملم‪ jQuery‬مظغملؿمملبهملمذؿملظملّٕاتم‪AJAX‬م‬ ‫ػ‪ ّ٦‬مأن ماٌغملؿؾهمل ممتؿػمل‪ ّ١‬مجمؼمل‪ّ٦‬سهمل مع‪ ّ٤‬ماِّحّٓاث ماًمملصهمل مبشملػملؾمملت م‪ AJAX‬مو ماظيت متلؿـؼملّٕ ممتمملعمملًم‬
  
  ‫‪95‬‬
  
  ‫طمملدؿـؼملمملرماِّحّٓاثماِّخّٕىماظيتمطؽملمملمضّٓمعّٕرغمملمسػملؿملؾملمملميفمدضمملئ‪ّ٠‬ماِّحّٓاثم‪Events‬موماىّٓولم‬ ‫اظؿمملظ‪ّ٨‬مؼ‪ّ٦‬ضّّمػّٔهماِّحّٓاثم‪ :‬م‬ ‫اد‪ّ٣‬مايّٓث م‬
  
  ‫يصملهملماظؿظملفرل م‬
  
  ‫‪ajaxComplete‬‬
  
  ‫سؽملّٓماغؿؾملمملءمأيمرػملنملمع‪ّ٤‬مرػملؾمملتم‪ AJAX‬م‬
  
  ‫‪ajaxError‬‬
  
  ‫سؽملّٓمصرمل‪ّ٢‬مأيمرػملنملمع‪ّ٤‬مرػملؾمملتم‪AJAX‬‬
  
  ‫‪ajaxSend‬‬
  
  ‫ضؾ‪ّ٢‬مإردممللمأيمرػملنملمع‪ّ٤‬مرػملؾمملتم‪ AJAX‬م‬
  
  ‫‪ajaxStart‬‬
  
  ‫سؽملّٓ مبّٓاؼهمل مإردمملل مأي مرػملنمل مع‪ ّ٤‬مرػملؾمملتم‬
  
  ‫‪AJAX‬‬ ‫‪ajaxStop‬‬
  
  ‫سؽملّٓماغؿؾملمملءمتؽملظملؿملّٔمصمؿمل‪ّٝ‬مرػملؾمملتم‪ AJAX‬م‬
  
  ‫‪ajaxSuccess‬‬
  
  ‫سؽملّٓا ماغؿؾملمملء متؽملظملؿملّٔ مأي مع‪ ّ٤‬مرػملؾمملت م‪AJAX‬م‬ ‫بؽملفمملح م‬
  
  ‫م‬ ‫اآلن مأدؿشملؿمل‪ ّٝ‬مأن مأض‪ّ٦‬ل مأغؽملممل ماغؿؾملؿملؽملممل مع‪ ّ٤‬متضملػمل‪ ّ٣‬مطؿملظملؿملهمل مادؿـؼملمملر معغملؿؾهمل ماظذمل م‪ Web‬ماظّٕائضملهمل م‪jQuery‬م‬ ‫ظؿؽملظملؿملّٔمرػملؾمملتم‪ AJAX‬مومػغملّٔامغزمل‪ّ٢‬مإشممغؾملمملؼهملماظّٓضؿملعملهملم‪ 001‬موممبمملمأغؽملمملماتظملعملؽملمملمسػمل‪ّ٧‬م‪ 021‬مدضؿملعملهملم‬ ‫يفمبّٓاؼهملماظغملؿمملبمدؽملكزملٓ‪ّٙ‬ماظّٓضمملئ‪ ّ٠‬ماٌؿؾعملؿملهملمالدؿضملّٕاضمأػ‪ّ٣‬مإضمملصمملتماٌغملؿؾهملمومتضملػمل‪ّ٣‬مطؿملظملؿملهملمبؽملمملءم‬ ‫إضمملصمملتمخمملصهملمبؽملمملم‪ .‬م‬
  
  ‫‪96‬‬
  
  ‫م‬ ‫م‬ ‫م‬
  
  ‫م‬ ‫ع‪ّ٤‬ماظّٓضؿملعملهملم‪001‬مإشمماظّٓضؿملعملهملم‪021‬م‪ :‬م‬
  
  ‫اإلضمملصمملت م‬ ‫‪Plugins‬‬
  
  ‫‪97‬‬
  
  ‫اإلضمملصمملتم‪plugins‬م‪ :‬م‬ ‫ؼلؼملّّ مظؽملممل مصّٕؼ‪ ّ٠‬متشمل‪ّ٦‬ؼّٕ ماٌغملؿؾهمل م‪ jQuery‬ممبرملمملرطؿ‪ ّ٥‬ميف ماإلبّٓاع مو ماالبؿغملمملر مبظملؿّّ مبمملب مت‪ّ٦‬دضملهملم‬ ‫اٌغملؿؾهمل مسدل معممل مؼضملّٕف مبمملإلضمملصمملت م‪ plugins‬مإذ مميغملؽملؽملممل مإغرملمملء مإضمملصهمل مخمملصٓهمل مبؽملممل مت‪ّ٦‬دِّ‪ ّٝ‬مسؼمل‪ّ٢‬م‬ ‫اٌغملؿؾهملميفمأيدمل م ع‪ّ٤‬مغ‪ّ٦‬اح‪ّ٨‬مسؼملػملؾملمملمومع‪ّ٤‬مث‪ّ٣‬معرملمملرطهملمػّٔهماإلضمملصهملمع‪ّٝ‬مصمؿمل‪ّٝ‬معلؿكّٓع‪ّ٨‬ماٌغملؿؾهملم‬ ‫سدلمتؾ‪ّ٦‬ؼنملماإلضمملصمملتميفمع‪ّ٦‬ضضملؾملمملماإلظغملذلوغ‪ّ٨‬مسػمل‪ّ٧‬ماظضملؽمل‪ّ٦‬انم‪plugins.jquery.com‬م‪ .‬م‬ ‫سؽملّٓمايّٓؼىملمس‪ّ٤‬ماإلضمملصمملتمػؽملمملكمرّٕؼعملمملنمؼلػمل‪ّ١‬ماٌؿقّٓثمأحّٓػؼملمملم‪,‬ماظشملّٕؼ‪ّ٠‬ماِّولم‪:‬مايّٓؼىملم‬ ‫س‪ ّ٤‬مطؿملظملؿملهمل مطؿمملبهمل ماإلضمملصمملت ماًمملصٓهمل مبمملٌغملؿؾهملمومػؽملممل مغسملشملّٕمظػملضمل‪ّ٦‬دةمإشممظطملهمل م‪Java Script‬م‬ ‫اظؿعملػملؿملّٓؼهملم‪,‬مأعمملماظشملّٕؼ‪ّ٠‬ماظـمملغ‪ّ٨‬م‪:‬مايّٓؼىملمس‪ ّ٤‬مادؿكّٓام مإضمملصمملتم‪ jQuery‬ماٌ‪ّ٦‬ج‪ّ٦‬دةمأصالًموم‬ ‫ػّٔامػ‪ّ٦‬ماظشملّٕؼ‪ّ٠‬ماظّٔيمدؽمللػملغمل‪ّ٥‬ميفمػّٔهماظّٓضمملئ‪ّ٠‬مأوالًم‪.‬‬ ‫يف م ايعملؿملعملهمل مظؿملّٗ مػؽملمملظ‪ ّ١‬مرّٕؼعملهمل مثمملبؿهمل مالدؿكّٓام مصمؿمل‪ ّٝ‬مإضمملصمملت ماٌغملؿؾهمل مصمملظشملّٕؼعملهمل مختؿػمل‪ ّٟ‬مع‪ّ٤‬م‬ ‫إضمملصهملمإشممأخّٕىمومظغمل‪ّ٤‬مبرملغمل‪ّ٢‬مسمملممميغملؽملؽملمملماظعمل‪ّ٦‬لم‪ :‬م‬ ‫الدؿكّٓاممإضمملصهملمع‪ّ٤‬مإضمملصمملتم‪jQuery‬ماٌ‪ّ٦‬ج‪ّ٦‬دةمؼغملظمل‪ّ٨‬مأنمتعمل‪ّ٦‬ممبؿقؼملؿمل‪ّ٢‬مػّٔهماإلضمملصهملماظيتم‬ ‫تفملت‪ّ٨‬مسػمل‪ّ٧‬مذغمل‪ّ٢‬معػمل‪ّٟ‬م‪Java Script‬مث‪ّ٣‬متعمل‪ّ٦‬ممبؿسملؼملؿملؽمل‪ّ٥‬مضؼمل‪ّ٤‬مصظملقهملماظذملم‪Web‬ماًمملصهملمب‪ّ١‬م‬ ‫بضملّٓمتسملؼملنيماٌغملؿؾهملمومػّٔهمغعملشملهملمػمملعهملمإذمأنٖ ماإلضمملصمملتمتُؾؽمل‪ّ٧‬مبمملالسؿؼملمملدمسػمل‪ّ٧‬ماٌغملؿؾهملمومبمملظؿمملظ‪ّ٨‬م‬ ‫سػملؿمل‪ َّ١‬ماظؿفملطُّ ّٓمع‪ّ٤‬متسملؼملنيماٌغملؿؾهملمأوالًم‪,‬مبضملّٓمتسملؼملنيماإلضمملصهملمدؿملزملؾّّمػؽملمملكمدوالمجّٓؼّٓةمتسملمملفم‬ ‫إشم مدوال ماٌغملؿؾهمل ماِّصػملؿملهمل مو مت‪ّ٦‬دٓ‪ ّٝ‬مسؼملػملؾملممل مو مميغملؽمل‪ ّ١‬مادؿكّٓاعؾملممل مبؽملظملّٗ مرّٕؼعملهمل مادؿكّٓام مدوالم‬ ‫اٌغملؿؾهملماظيتمذّٕحؽملمملػمملميفمدضمملئ‪ّ٠‬مايّٓؼىملمس‪ّ٤‬ماظّٓوالم‪ .‬م‬ ‫حلؽملمملًم‪..‬مػّٔاماظغملالممطالممسمملممالمؼطملينمس‪ّ٤‬مضّٕاءةماظؿ‪ّ٦‬ثؿمل‪ّ٠‬ماًمملصمبغمل‪ّ٢‬مإضمملصهملموماظّٔيمالمؼؿفمملوزم‬ ‫اظزملظملقهملمسمملدةًم‪,‬موماآلنمميغملؽملؽملمملماظؾّٓءميفمادؿضملّٕاضمبضمل‪ّٚ‬مإضمملصمملتماٌغملؿؾهملمسػمل‪ّ٧‬مدؾؿمل‪ّ٢‬ماٌـممللمالم‬ ‫سػمل‪ّ٧‬مدؾؿمل‪ّ٢‬مايزملّٕموماظؿؼملؿملؿملّٖم‪ .‬م‬
  
  ‫‪98‬‬
  
  ‫اإلضمملصهملم‪jQuery user Interface‬م‪:‬‬
  
  ‫تضملؿدل مػّٔه ماإلضمملصهمل ماِّطـّٕ مذضملؾؿملهملً مبني مصمؿمل‪ ّٝ‬مإضمملصمملت ماٌغملؿؾهمل مسػمل‪ ّ٧‬ماإلرالق مإذ متضملّٓ مبؿعملّٓؼ‪ّ٣‬م‬ ‫واجؾملمملتمادؿكّٓاممأغؿملعملهملمومشؽملؿملٓهملمظزملظملقؿ‪ّ١‬م(بضملسملؾملمملمطَؿػمل‪ َّ١‬ماظيتمرأؼؽملمملػمملميفمع‪ّ٦‬ض‪ّٝ‬ماظرملّٕٓطهملماظضملؼملالضهملم‬ ‫‪)Microsoft‬مومػّٔامعمملمؼضملؽملؿمل‪ّ٥‬ماد‪ ّ٣‬ماإلضمملصهمل م‪,‬مومتعملّٓٓمماإلضمملصهملمجمؼمل‪ّ٦‬سهملمع‪ّ٤‬ماِّدواتماىمملػّٖةم‬ ‫اظعملمملبػملهمل مإلسمملدة ماالدؿكّٓام مو ماظيت ممتؽملّّ مواجؾملهمل ماظؿشملؾؿمل‪ ّ٠‬ماًمملص مبمملظذمل م‪ Web‬معّٕوغهملً مسمملظؿملهملً مظّٓرجهملم‬ ‫وضملػمل‪ ّ٥‬معرملمملبؾملمملً متعملّٕؼؾمملً مظؿشملؾؿمل‪ ّ٠‬مدشملّّ ماٌغملؿنمل مع‪ ّ٤‬مغمملحؿملهمل مواجؾملهمل ماالدؿكّٓام م‪ ,‬مصؾمل‪ ّ٨‬متعملّٓم ماِّظلؽملهملم‬ ‫‪tabs‬مومأذّٕرهملماظؿؼملّٕؼّٕم‪scroll bars‬موماِّوطّٕدؼ‪ّ٦‬غمملتم‪accordions‬ممموماٌّٖاظؿمليملم‬ ‫‪ sliders‬مو مأدوات ماخؿؿملمملر ماظؿمملرؼّْ م‪ date pickers‬مو مأدوات ماخؿؿملمملر ماِّظ‪ّ٦‬انم‬ ‫‪ color pickers‬مو ماظغملـرل مشرلػممل م‪ ,‬مطؼملممل متسملؿمل‪ ّٟ‬ماِّداة مضّٓراتٍ مخمملصٓهمل مظضملؽملمملصّٕ ماظزملظملقهمل مالم‬ ‫تؿ‪ّ٦‬صّ ّٕمصؿملؾملمملمبرملغمل‪ ّ٢‬مرؾؿملضمل‪ّ٨‬معـ‪ّ٢‬ماظعملّٓرةمسػمل‪ّ٧‬مدقؾؾملمملمومإصالتؾملمملمأومإسمملدة متّٕتؿملؾؾملمملمأومتطملؿملرلمحفؼملؾملمملمأوم‬ ‫االخؿؿملمملرمعؽملؾملمملموماظغملـرلماظغملـرلمومرمّٓرماإلذمملرةمأنمػّٔهماإلضمملصهملمضمملبػملهملمظإلطلمملءمومػ‪ّ٨‬ممتؿػمل‪ّ١‬مسّٓةم‬ ‫إطلمملءاتمجمملػّٖةمم‪Themes‬مبرملغمل‪ّ٢‬ماصذلاض‪ّ٨‬م‪ .‬م‬
  
  ‫‪99‬‬
  
  ‫ميغمل‪ ّ٤‬مايزمل‪ّ٦‬ل مسػمل‪ ّ٧‬مػّٔه ماإلضمملصهمل ماجملّمملغؿملٓهمل مس‪ ّ٤‬مرّٕؼ‪ ّ٠‬ماظّٓخ‪ّ٦‬ل مإشم مع‪ّ٦‬ضضملؾملمملم‬ ‫‪www.jqueryui.com‬مث‪ّٖ٣‬ماظؽملعملّٕمسػمل‪ّ٧‬ماظّٖرمم‪Build Custom Download‬م‪.‬‬
  
  ‫اإلضمملصهملم‪Form‬مم‪:jquery‬‬ ‫تضملشمل‪ّ٨‬مػّٔهماإلضمملصهملمعّٖؼّٓاًمع‪ّ٤‬مإٌّوغهملمسؽملّٓماظؿضملمملع‪ّ٢‬مع‪ّٝ‬ماظؽملؼملمملذجم‪Forms‬مإذمأغؾملمملم"تغملؼمل‪ّ٢‬ماظؽملعمل‪ّٙ‬م‬ ‫اٌ‪ّ٦‬ج‪ّ٦‬دميفمدوالمعغملؿؾهملم‪jQuery‬ماًمملصهملمبمملظؿضملمملع‪ّ٢‬مع‪ّٝ‬ماظؽملؼملمملذج"مسػمل‪ّ٧‬محّٓمض‪ّ٦‬لمعؾّٓسؿملؾملمملم‪,‬موم‬ ‫تؽملعملل‪ ّ٣‬مدوال مػّٔه ماإلضمملصهمل مإشم مسّٓة مجمؼمل‪ّ٦‬سمملت معؽملؾملممل معممل مؼلؼملّّ مبمملدؿضملمملدة ماظعملؿمل‪ ّ٣‬ماًمملصهمل مبفملدواتم‬ ‫اظؽملؼملمملذجمبشملّٕؼعملهملمأبل‪ّٛ‬مع‪ّ٤‬مرّٕقماٌغملؿؾهملمومؼصملؾملّٕمذظ‪ّ١‬مجػملؿملمملًمسؽملّٓمايّٓؼىملمس‪ّ٤‬مأداةممن‪ّ٦‬ذجمعـ‪ّ٢‬م‬ ‫اِّداة م م>‪ <select‬م‪ ,‬مو مع‪ ّ٤‬مػّٔه ماجملؼمل‪ّ٦‬سمملت معممل مؼلؼملّّ مبكملسمملدة متضملؿملني م(تظملّٕؼ‪ )ّٞ‬مضؿمل‪ ّ٣‬مأدواتم‬ ‫اظؽملؼمل‪ّ٦‬ذج م‪ ,‬مو معؽملؾملممل معممل مؼلؼملّّ مبكملردمملل مضؿمل‪ ّ٣‬ماظؽملؼمل‪ّ٦‬ذج مإشم ماًمملدم مبشملّٕؼعملهمل متعملػملؿملّٓؼهمل مو مبمملدؿكّٓامم‬ ‫‪AJAX‬مم‪,‬مميغمل‪ّ٤‬مهؼملؿمل‪ّ٢‬ماإلضمملصهملمع‪ّ٤‬ماٌ‪ّ٦‬ض‪ّٝ‬م‪ :‬م‬
  
  ‫‪http://www.jquery.com/plugins/project/form‬‬
  
  ‫اإلضمملصهملم‪:jmaxinput‬‬ ‫ػ‪ ّ٢‬مدؾ‪ ّ٠‬مو مضؼملومل مبّٖؼمملرة ماٌ‪ّ٦‬ض‪ّٝ‬م‬ ‫االجؿؼملمملس‪ ّ٨‬ماظرملٖؾملرل م‪ Twitter‬م؟ مػ‪ّ٢‬م‬ ‫ظظملؿومل مرّٕؼعملهمل مسّٕض معّٕبضملمملت مإدخممللم‬ ‫اظؽملزمل‪ّ٦‬صميفمذظ‪ّ١‬ماٌ‪ّ٦‬ض‪ّٝ‬ماغؿؾمملػ‪ّ١‬م؟ م‬ ‫إن مطؽملومل مع‪ ّ٤‬ماٌؾملؿؼملني مبغملؿملظملؿملهمل مبؽملمملءم‬ ‫عّٕبٓضملمملت ماظؽملزمل‪ّ٦‬ص متػمل‪ َّ١‬مصكملنٖ مػّٔه ماإلضمملصهمل موضمل‪ ّ٢‬ماظضملؼملػملؿملهمل مأدؾمل‪ ّ٢‬مع‪ ّ٤‬ماظلٗؾمل‪ّ٦‬ظهمل مو موضملػمل‪ َّ١‬متؿؾ‪ّٝ‬م‬ ‫اظشملّّٕؼعملهملماظيتمسػملّؼملؿؽملمملمإؼٓمملػمملم‪ jQuery‬مأالموػ‪ّ٨‬مرّٕؼعملهملم"إظعملمملءماظؿضملعملؿملّٓاتموراءمزؾمل‪ّ٦‬رغممل"مسػمل‪ّ٧‬محّٓم‬ ‫ض‪ّ٦‬ظ‪ّ٨‬م‪,‬مميغمل‪ّ٤‬مهؼملؿمل‪ّ٢‬ماإلضمملصهملمع‪ّ٤‬ماظّٕاب‪ّٛ‬م‪ :‬م‬
  
  ‫‪100‬‬
  
  ‫‪http://plugins.jquery.com/project/jMaxInput‬‬
  
  ‫اإلضمملصهملم‪:jquery short access‬‬ ‫تلؼملّّمػّٔهماإلضمملصهملماظّٕائضملهملمبؿضملؿملنيمعظملمملتؿملّّماخؿزملمملرمظػملّٕواب‪ّٛ‬ماٌ‪ّ٦‬ج‪ّ٦‬دةمبمملظزملظملقهمل مإذمميغمل‪ّ٤‬معـالًم‬ ‫أن مؼغمل‪ّ٦‬ن ماٌظملؿمملح م‪ e‬معظملؿمملح ماخؿزملمملر مظػملّٕاب‪ ّٛ‬ماظّٔي مؼعمل‪ّ٦‬د مٌ‪ّ٦‬ض‪ ّٝ‬معمملؼغملّٕود‪ّ٦‬صومل معـالً م‪ ,‬مو مؼغمل‪ّ٦‬نم‬ ‫اٌظملؿمملح م‪ x‬معظملؿمملح ماخؿزملمملرمظػملّٕاب‪ ّٛ‬ماظّٔي مؼعمل‪ّ٦‬دمٌ‪ّ٦‬ض‪ّٝ‬معغملؿؾهمل م‪ jQuery‬مومػغملّٔام‪ ,‬ماىؼملؿمل‪ّ٢‬ميفم‬ ‫ػّٔهماإلضمملصهملمأغٓؾملمملمتؿظملؾمل‪ّ٣‬معؿشملػملؾمملتم‪ AJAX‬مجؿملّٓٓاًمصالمتظمللّٓمسؼملػملؾملمملم! م‪,‬مميغمل‪ّ٤‬مهؼملؿمل‪ّ٢‬مػّٔهماإلضمملصهملم‬ ‫ع‪ّ٤‬ماظّٕاب‪ّٛ‬م‪ :‬م‬ ‫‪http://plugins.jquery.com/project/shortaccesskey‬‬
  
  ‫اإلضمملصهملم‪:jquery corner‬‬ ‫أصؾّّمع‪ّ٤‬ماظرملمملئ‪ّٝ‬ميفمصمؿمل‪ّٝ‬مع‪ّ٦‬اض‪ّٝ‬ماظذملم‪Web‬م‬ ‫جؿملّٓٓةماظؿزملؼملؿمل‪ّ٣‬مأظّمملمتغمل‪ّ٦‬نَمأرطمملنم(زواؼممل)مأضلمملمم‬ ‫اٌ‪ّ٦‬ض‪ّٝ‬مبرملغمل‪ّ٢‬مرط‪ّ٤‬مإٌّبٓ‪ّٝ‬ماظؿعملػملؿملّٓيمومإغٓؼملمملم‬ ‫بفملذغملمملل مخمؿػملظملهمل مظضمل‪ ّٖ٢‬مأذؾملّٕػممل ماظرملغمل‪ّ٢‬م‬ ‫اظّٓائّٕي م‪ Round Corner‬م‪ ,‬مميغمل‪ّ٤‬م‬ ‫إغرملمملء مػّٔه ماِّرطمملن مبشملّٕق مخمؿػملظملهمل مأدؾملػملؾملمملم‬ ‫ادؿكّٓام مػّٔهماإلضمملصهملماظيتمميغمل‪ّ٤‬مهؼملؿملػملؾملمملم‬ ‫ع‪ّ٤‬ماظّٕاب‪ّٛ‬م‪ :‬م‬
  
  ‫‪http://www.malsup.com/jquery/corner/‬‬
  
  ‫‪101‬‬
  
  ‫اإلضمملصهملم‪:beauty tips‬‬ ‫تلؼملّّ مػّٔه ماإلضمملصهمل مبكملزؾملمملر مذّٕح مخمؿزملّٕم‬ ‫‪ tooltip‬مصمؿمل‪ ّ٢‬مجّٓ ًا مسؽملّٓ موض‪ ّٝ‬ماٌقملذّٕم‬ ‫سػمل‪ ّ٧‬مسؽملزملّٕ معضملني مع‪ ّ٤‬مسؽملمملصّٕ ماظزملظملقهمل مو مميغمل‪ّ٤‬م‬ ‫إزؾملمملر مػّٔا ماظرملّٕح مبمملظرملغمل‪ ّ٢‬ماظّٔي متّٕشنمل مب‪ّ٥‬م‬ ‫متمملعمملً مإذ مأن ماإلضمملصهمل متضملشمل‪ ّ٨‬مٌلؿكّٓعؾملمملم‬ ‫خؿملمملراتمطـرلةمظؿكزملؿمل‪ّٙ‬مذغمل‪ّ٢‬ماظرملّٕحماٌكؿزملّٕممبمملمؼؿالءممومع‪ّ٦‬ضضمل‪ّ٥‬م‪,‬مميغمل‪ّ٤‬مهؼملؿمل‪ّ٢‬مػّٔهماإلضمملصهملم‬ ‫ع‪ّ٤‬ماظّٕاب‪ّٛ‬م‪ :‬م‬ ‫‪http://www.lullabot.com/files/bt/btlatest/DEMO/index.htm‬‬ ‫‪l‬‬
  
  ‫اإلضمملصهملم‪BOXY‬م‪:‬‬ ‫تلؼملّّمػّٔهماإلضمملصهملمبكملغرملمملءمعّٕبضملمملتمح‪ّ٦‬ارمعؽملؾـعملهملم‬ ‫ذمملع ماغؿرملمملرػممل مطـرلاً ميف ماٌ‪ّ٦‬اض‪ ّٝ‬مايّٓؼـهمل ميفم‬ ‫اظظملذلةماِّخرلة م‪,‬مومػ‪ّ٨‬معرملمملبؾملهملمظؿػمل‪ّ١‬ماظيت مغّٕاػمملم‬ ‫يف مأشػملنمل ماٌ‪ّ٦‬اض‪ ّٝ‬ماظضملمملٌؿملهمل مطذمل م‪Facebook‬م‬ ‫سػمل‪ّ٧‬مدؾؿمل‪ّ٢‬ماٌـممللمبشملّٕؼعملهملمبلؿملشملهملم‪ .‬م‬ ‫ميغمل‪ّ٤‬مهؼملؿمل‪ّ٢‬مػّٔهماإلضمملصهملمع‪ّ٤‬ماظّٕاب‪ّٛ‬م‪:‬‬ ‫م‬
  
  ‫‪http://plugins.jquery.com/project/boxy‬‬
  
  ‫‪102‬‬
  
  ‫اإلضمملصهملم‪ajax fancy captcha‬م‪:‬‬ ‫يف مطـرل مع‪ ّ٤‬ماٌ‪ّ٦‬اض‪ ّٝ‬مايّٓؼـهمل مؼػملففمل ماٌدلجم‪ّ٦‬نم‬ ‫إشممادؿكّٓامم"ط‪ّ٦‬دماظؿفملطؿملّٓ"مظؿظملمملديمعمملمؼضملّٕفمبمملظذملم‬ ‫‪ Bots‬م‪ ,‬متقملعٓ‪ ّ٤‬م‪ jQuery‬مإضمملصهملً متلؼملّّ مظؽملمملم‬ ‫بكملضمملصهمل مػّٔه ماإلعغملمملغؿملهمل ميف مع‪ّ٦‬ضضملؽملممل مبرملغمل‪ ّ٢‬مسزملّٕيم‬ ‫أصم‪ ّ٢‬مع‪ ّ٤‬ماظرملغمل‪ ّ٢‬ماظؿعملػملؿملّٓي م"زؾمل‪ّ٦‬ر مص‪ّ٦‬رة مشرلم‬ ‫عظملؾمل‪ّ٦‬عهمل معـالً" مصؾمل‪ ّ٨‬متشملػملنمل مدقنمل مسؽملزملّٕ معضملؿملٓ‪ ّ٤‬موم‬ ‫إصالت‪ّ٥‬ميفماٌؽملشملعملهملماٌكزملزملهملمومبمملظشملؾ‪ّٝ‬مػّٔاماظضملؽملزملّٕمسمؿػمل‪ّٟ‬مع‪ّ٤‬مدخ‪ّ٦‬لمإشممآخّٕمصعملّٓ مؼشملػملنملمعـالًم‬ ‫دقنمل مذغمل‪ ّ٢‬ماٌعمل‪ ّٙ‬مو مإصالت‪ ّ٥‬ميف ماٌؽملشملعملهمل ماٌكزملزملهمل ميف ماظّٓخ‪ّ٦‬ل ماِّوٖل مو مضّٓ مؼشملػملنمل معؽمل‪ّ١‬م‬ ‫دقنملمذغمل‪ّ٢‬ماظلمملسهملمومإصالت‪ّ٥‬ميفماٌؽملشملعملهملماٌكزملزملهملميفماظّٓخ‪ّ٦‬لماظـمملغ‪ّ٨‬مومػغملّٔام‪..‬مصكملنِمطمملنمزائّٕم‬ ‫ع‪ّ٦‬ضضملؽملمملمع‪ّ٤‬ماظذملم‪Bots‬مصكملغٓ‪ّ٥‬مظ‪ّ٤‬مؼؿفمملوزمػّٔاماالخؿؾمملرماظؾلؿمل‪ّٛ‬مجّٓاًمبمملظؽمللؾهملمالبؽمل‪ّ١‬مأومِّخؿمل‪ّ١‬ماظزملطملرل‪.‬‬ ‫ميغمل‪ّ٤‬مهؼملؿمل‪ّ٢‬مػّٔهماإلضمملصهملمع‪ّ٤‬ماظّٕاب‪ّٛ‬م‪ :‬م‬
  
  ‫‪http://www.webdesignbeach.com/beachbar/ajax-fancy‬‬‫‪captcha-jquery-plugin‬‬
  
  ‫‪103‬‬
  
  ‫اإلضمملصهملم‪:Gallerific‬‬ ‫تلؼملّّ مظؽملممل مػّٔه ماإلضمملصهمل مبكملغرملمملء معضملّٕض مص‪ّ٦‬رم‬ ‫بمملٌؿملّٖات ماِّدمملدؿملهمل ماظيت متؿ‪ّ٦‬صّٕ ميف معضملمملرضم‬ ‫اظزمل‪ّ٦‬رمسػمل‪ّ٧‬ماالغذلغومل مبؾلمملرهملمذّٓؼّٓة م‪,‬مميغمل‪ّ٤‬م‬ ‫هؼملؿملػملؾملمملمع‪ّ٤‬ماظّٕاب‪ّٛ‬م‪ :‬م‬
  
  ‫‪http://www.twospy.com/ga‬‬ ‫‪lleriffic/‬‬
  
  ‫م‬ ‫م‬
  
  ‫اٌّٖؼّٓمع‪ّ٤‬ماإلضمملصمملتم؟‬ ‫عمملمسّٕضؽملمملهميفماظّٓضمملئ‪ّ٠‬ماظعملػملؿملػملهملماٌمملضؿملهملمؼضملؿدلمأمن‪ّ٦‬ذجمملًمصعمل‪ّٛ‬مع‪ّ٤‬ماإلضمملصمملتماظغملـرلةمجّٓاًماًمملصهملم‬ ‫بمملٌغملؿؾهملموماظيتمميغمل‪ّ٤‬مأنمغشملػمل‪ّٝ‬مسػمل‪ّ٧‬مآخّٕمعمملمؼسملمملفمإظؿملؾملمملمسدلمرط‪ّ٤‬ماإلضمملصمملتميفمع‪ّ٦‬ض‪ّٝ‬ماٌغملؿؾهملم‬ ‫سػمل‪ّ٧‬ماظضملؽمل‪ّ٦‬انم‪ :‬م‬
  
  ‫‪http://plugins.jquery.com‬‬ ‫وماآلنمومبضملّٓمأنمرأؼؽملمملمصمممللمإضمملصمملتماٌغملؿؾهملمحمملنماظ‪ّ٦‬ضوملمظؽملؿضملػملّ‪ّ٣‬مطؿملظملؿملهملمإغرملمملءمػّٔهماإلضمملصمملت‪ .‬م‬
  
  ‫‪104‬‬
  
  ‫طؿملظملؿملهملمإغرملمملءماإلضمملصمملتم‪plugins‬م‪ :‬م‬ ‫طؼملمملمضػملؽملمملمدمملبعملمملًمصكملنماإلضمملصمملتمت‪ّ٦‬دٓ‪ّٝ‬مسؼمل‪ّ٢‬ماٌغملؿؾهملمميفمأيدملمع‪ّ٤‬مغ‪ّ٦‬اح‪ّ٨‬مسؼملػملؾملمملمومؼضملشملؿملؽملمملمصّٕؼ‪ّ٠‬متشمل‪ّ٦‬ؼّٕم‬ ‫اٌغملؿؾهملمايّٕؼهملماظغملمملعػملهملميف مت‪ّ٦‬دضملهمل مسؼمل‪ّ٢‬معغملؿؾؿ‪ ّ٥‬مذّٕطماتؾمملعمجمؼمل‪ّ٦‬سهملمع‪ّ٤‬ماظعمل‪ّ٦‬اسّٓماظيتمغؽملمملضرملؾملمملم‬ ‫يفمػّٔهماظّٓضمملئ‪ّ٠‬م‪ .‬م‬
  
  ‫تلؼملؿملهملمعػمل ّظملمملتماإلضمملصمملتم‪ :‬م‬ ‫طؽملوملمضّٓمذطّٕتميفمععملّٓعهملمػّٔه ماظّٓضمملئ‪ ّ٠‬مأنماإلضمملصهملمعمملمػ‪ّ٨‬مإالمعػمل‪ّٟ‬م‪ Java Script‬مؼؿ‪ّ٣‬م‬ ‫تسملؼملؿملؽمل‪ّ٥‬مبضملّٓماٌغملؿؾهملمومؼؾؽمل‪ّ٧‬مبمملالسؿؼملمملدمسػملؿملؾملمملموممبمملمأنٖ مجمممللمطؿمملبهملماإلضمملصمملتمعؿمملحمظػملفؼملؿمل‪ّٝ‬مصكملنٖم‬ ‫صّٕؼ‪ ّ٠‬متشمل‪ّ٦‬ؼّٕ ماٌغملؿؾهمل مؼؽملزملّّ مبؿؾؽملٓ‪ ّ٨‬مرّٕؼعملهمل ماظؿلؼملؿملهمل ماظؿمملظؿملهمل مظػملؼملػملظملمملت مو مػ‪ ّ٨‬مظؿمللومل مضمملسّٓةً مو مإمنمملم‬ ‫غزملؿملقهملًمأصؾقوملمسُّٕصمملًمصؿملؼملمملمبضملّٓم‪:‬م م‬
  
  ‫"د‪ِّّ٣‬معػمل‪ّٟ‬ماإلضمملصهملماًمملصٓهملمب‪ّ١‬مبمملد‪ّٕ٣‬مع‪ّ٤‬ماظرملغمل‪ّ٢‬ماظؿمملظ‪ّ٨‬م‪:‬م‪"jQuery.plugin.js‬‬ ‫حؿملىملمأن م‪ plugin‬م ػ‪ّ٦‬ماد‪ّ٣‬مإضمملصؿ‪ّ١‬م‪,‬مصؼملـالًمظ‪ ّ٦‬مضؼملوملمبكملغرملمملء مإضمملصهملمهؼمل‪ ّ٢‬مازل‪ّ٨‬مرمنملمأنم‬ ‫مم‪ّ٤‬م‬ ‫أزلِّ‪ ّ٨‬ماٌػمل‪ ّٟ‬ماظّٔي مزمؿ‪ّ٦‬ي مإضمملصيت مبمملالد‪ ّ٣‬م م‪ jQuery.Mukhtar.js‬مإنِ مطؽملوملُ م َّ‬ ‫ؼلؿؼملضمل‪ّ٦‬نمض‪ّ٦‬لَمصّٕؼ‪ّ٠‬متشمل‪ّ٦‬ؼّٕماٌغملؿؾهملمومؼؿؾٓضمل‪ّ٦‬نمأأعَؽمل‪ّ٥‬م‪ .‬م‬
  
  ‫اظرملغمل‪ّ٢‬ماظضملمملممظرملؿملظملّٕةماإلضمملصهملم‪ :‬م‬ ‫حلؽملمملً م‪ ..‬مبضملّٓ مأن مأغرملفملغممل ماٌػمل‪ ّٟ‬ماًمملص مبكملضمملصؿؽملممل مبمملالد‪ ّ٣‬ماظّٔي مغزملقَؽملممل مب‪ ّ٥‬مصّٕؼ‪ ّ٠‬متشمل‪ّ٦‬ؼّٕ ماٌغملؿؾهملم‬ ‫دؽملغملؿنملمصؿمل‪ّ٥‬مذؿملظملّٕةمبّٕجمؿملهملمهلمملماظرملغمل‪ّ٢‬ماظضملمملمماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫{)‪(function($‬‬ ‫ذؿملظملّٕةمإضمملصؿؽملمملمدؿغمل‪ّ٦‬نمػؽملممل‬ ‫;)‪})(jQuery‬‬
  
  ‫‪105‬‬
  
  ‫بؾملّٔه ماظشملّٕؼعملهمل مغسملؼمل‪ ّ٤‬مأن ماظّٓوال ماظيت مدؽملعمل‪ّ٦‬م مبؿضملّٕؼظملؾملممل ميف ماٌؽملشملعملهمل ماٌكزملزملهمل مظؽملممل مدؿسملمملف مإشمم‬ ‫اٌغملؿؾهملمومغسملؼمل‪ّ٤‬مأغؽملمملمدؽمللؿشملؿمل‪ّٝ‬مادؿّٓسمملءػمملمبشملّٕؼعملهملمادؿّٓسمملءمدوالماٌغملؿؾهملماِّصػملؿملهملم‪ .‬م‬
  
  ‫رّٕؼعملهملمبؽملمملءمدوالماإلضمملصمملتم‪ :‬م‬ ‫إذامطؽملوملمتّٔطّٕمحّٓؼـؽملمملميفماظّٓضمملئ‪ّ٠‬ماٌمملضؿملهملمأصمضملِؾملمملمعؽملّٔمبّٓاؼهملماظغملؿمملبمصؼمل‪ّ٤‬ماٌظملذلضمأغ‪ّ١‬ماآلنم‬ ‫تضملّٕفممتمملعمملًمأنٖ م اٌغملؿؾهملممتؿػمل‪ّ١‬مغ‪ّ٦‬سنيمع‪ّ٤‬ماظّٓوالم‪ :‬مغ‪ّ٦‬عمأولمؼشملؾ‪ّ٠‬مسػمل‪ ّ٧‬مجمؼمل‪ّ٦‬سهملمع‪ّ٤‬مسؽملمملصّٕم‬ ‫اٌلؿؽملّٓمبمملظؿضملمملونمع‪ّٝ‬ماحملِّّٓداتمومغ‪ّ٦‬عمثمملنٕمأرػملعملؽملمملمسػملؿمل‪ّ٥‬مظعملنملم"اظ‪ّ٦‬زؿملظمل‪ "ّ٨‬مؼُلؿّٓس‪ّ٧‬مدونمعلمملسّٓةم‬ ‫احملِّّٓدات م‪ ,‬محلؽملمملً مختؿػمل‪ ّٟ‬مرّٕؼعملهمل مبؽملمملء مدوال ماإلضمملصمملت مبمملخؿالف مػّٔؼ‪ ّ٤‬ماظؽمل‪ّ٦‬سني مصػملؾؽملمملء مداظهملم‬ ‫جّٓؼّٓةمع‪ّ٤‬ماظؽمل‪ّ٦‬عماِّولماظّٔيمؼشملؾ‪ّ٠‬مسػمل‪ّ٧‬مجمؼمل‪ّ٦‬سهملمع‪ّ٤‬مسؽملمملصّٕماٌلؿؽملّٓمبمملظؿضملمملونمع‪ّٝ‬ماحملِّّٓداتم‬ ‫صكملغؽملمملمغؿؾ‪ّٝ‬ماظرملغمل‪ّ٢‬ماظضملمملمماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫{)‪(function($‬‬ ‫)‪function(Parameters‬م=م‪$.F‬‬ ‫{‬ ‫جل‪ّ٣‬ماظّٓاظهملمػؽملممل‬ ‫;}‬ ‫;)‪})(jQuery‬‬
  
  ‫حؿملىمل مأنٖ م‪ F‬مػ‪ ّ٦‬ماد‪ ّ٣‬ماظّٓاظهمل ماىّٓؼّٓة مو م‪ Parameters‬مػ‪ ّ٨‬مضمملئؼملهمل ماظ‪ّ٦‬دشملمملء ماظيت متفملخّٔػمملم‬ ‫ػّٔهماظّٓاظهمل‪ .‬م‬ ‫أعٓممل مسؽملّٓ مبؽملمملء مداظهمل موزؿملظملؿملهمل مجّٓؼّٓة مع‪ ّ٤‬ماظؽمل‪ّ٦‬ع ماظـمملغ‪ ّ٨‬ماظّٔي متشملؾٓ‪ ّ٠‬مدواظّ‪ ّ٥‬مدونَ مادؿكّٓامم‬ ‫احملِّّٓداتمغؿؾ‪ّٝ‬ماظرملغمل‪ّ٢‬ماظضملمملمماظؿمملظ‪ّ٨‬م‪ :‬م‬ ‫{)‪(function($‬‬
  
  ‫‪106‬‬
  
  ‫)‪function(Parameters‬م=م‪$.fn.F‬‬ ‫{‬ ‫مجل‪ّ٣‬ماظّٓاظهملمػؽملممل‬ ‫;}‬ ‫;)‪})(jQuery‬‬
  
  ‫حؿملىمل مأنٖ م‪ F‬مػ‪ ّ٦‬ماد‪ ّ٣‬ماظّٓاظهمل ماىّٓؼّٓة مو م‪ Parameters‬مػ‪ ّ٨‬مضمملئؼملهمل ماظ‪ّ٦‬دشملمملء ماظيت متفملخّٔػمملم‬ ‫ػّٔهماظّٓاظهمل‪ .‬م‬
  
  ‫أعـػملهملمسػمل‪ّ٧‬مإغرملمملءمإضمملصمملتمخمملصٖهملم‪:‬‬ ‫حلؽملمملً م‪ ..‬ماِّصغملمملر ماظلمملبعملهمل مػ‪ ّ٨‬ماِّصغملمملر ماظّٕئؿمللؿملهمل مظؾؽملمملء ماإلضمملصمملت مو مطؼملـمملل مسػمل‪ ّ٧‬مبؽملمملء مداظهمل موزؿملظملؿملهملم‬ ‫جّٓؼّٓةمبلؿملشملهملمجّٓاًمميغمل‪ّ٤‬مأنمغغملؿنملمعمملؼػمل‪ّ٨‬م‪ :‬م‬ ‫{)‪function($‬م(‬ ‫)‪function(msg‬م=م‪$.ourMessage‬‬ ‫{‬ ‫;)(‪var m=msg.toString‬‬ ‫;)‪alert(m‬‬ ‫;}‬ ‫;)‪})(jQuery‬‬
  
  ‫ومطؼملمملمػ‪ّ٦‬مواضّّمتعمل‪ّ٦‬ممػّٔهماظّٓاظهملمبضملّٕضمردمملظهملمعضملػمل‪ّ٦‬عمملتمهؿ‪ّ٦‬يمسػمل‪ّ٧‬مضؿملؼملهملماظ‪ّ٦‬دؿمل‪ّٛ‬ماٌؼملّٕرمإظؿملؾملمملم‬ ‫وماآلنمميغملؽملؽملمملمأنمنّٕبمإضمملصؿؽملمملمبغملؿمملبهملمذؿملظملّٕةم‪jQuery‬مطؼملمملؼػمل‪ّ٨‬م‪ :‬م‬
  
  ‫‪107‬‬
  
  ‫;)„ ! ‪$.ourMessage(„Hello world‬‬
  
  ‫م‬ ‫وم مطؼملـممللمسػمل‪ّ٧‬مدوالماظؽمل‪ّ٦‬عماآلخّٕماظيتمتشملؾٓ‪ّ٠‬مسػمل‪ّ٧‬مسؽملمملصّٕماٌلؿؽملّٓماظيتمؼضملؿملّٓػمملماحملِّّٓدمدؽملعمل‪ّ٦‬مم‬ ‫بغملؿمملبهمل مداظّهمل مجّٓؼّٓة متطملؿملّٕٓ مغ‪ّ٦‬ع ماً‪ ّٛ‬ماًمملص مجبؼملؿمل‪ ّٝ‬ماظضملؽملمملصّٕ ماظيت مؼضملؿملّٓػممل ماحملّٓد مإشم ماظؽمل‪ّ٦‬عم‬ ‫‪Arial‬مومدؿغمل‪ّ٦‬نمذؿملظملّٕةمػّٔهماظّٓاظهملمطؼملمملؼػمل‪ّ٨‬م‪ :‬م‬ ‫{)‪(function($‬‬ ‫)(‪$.fn.changeFont=function‬‬ ‫{‬ ‫;)‟‪return this.css(„font-family‟, „Arial‬‬ ‫;}‬ ‫;)‪})(jQuery‬‬
  
  ‫الح‪ّٜ‬مأغؽملمملمادؿضملؼملػملؽملمملماظّٓٓاظهملم‪css‬مإحّٓىمدوالم‪jQuery‬ماظيتمطؽملمملمضّٓمغمملضرملؽملمملػمملمدمملبعملمملًميفمدضمملئ‪ّ٠‬م‬ ‫ايّٓؼىملمس‪ّ٤‬ماظّٓوالمومعمملمرمنملمذطّٕهمػؽملمملمػ‪ّ٦‬مادؿضملؼملمملظؽملمملمظػملغملػملؼملهملم‪ return‬مضؾ‪ّ٢‬مادؿّٓسمملءماظّٓاظهملم‬ ‫ظغمل‪ّ٨‬مغلؼملّّمظّٓاظؿؽملمملمأنمتُلؿّٓس‪ّ٧‬مع‪ّٝ‬ماظّٓوالماِّخّٕىماٌضملؿؼملِّٓةمسػمل‪ّ٧‬ماحملِّّٓداتمصػمل‪ّ٦‬مأردغمملماخؿؾمملرم‬ ‫داظؿؽملمملمع‪ّٝ‬مداظهملمأخّٕىماآلنمميغملؽملؽملمملمأنمغغملؿنملمبؾلمملرهملم‪:‬‬ ‫;)(‪$(„#Mydiv‟).changeFont().fadeIn‬‬
  
  ‫مممملمدؿملقملدٓيمإشممتشملؾؿمل‪ّ٠‬محّٕطهملماظصملؾمل‪ّ٦‬رماٌؿالذ‪ّ٨‬مبضملّٓمتطملؿملرلمغ‪ّ٦‬عماً‪ّٛ‬مومرمّٓرمبؽملمملمأنمغّٔطّٕمػؽملمملم‬ ‫أن مداظؿؽملممل محمملظؿملمملً متلؿشملؿمل‪ ّٝ‬ماظؿضملمملع‪ ّ٢‬مع‪ ّٝ‬مطمملئ‪ ّ٤‬مواحّٓ مصعمل‪ ّٛ‬مع‪ ّ٤‬مطمملئؽملمملت ماٌلؿؽملّٓ مو مهلّٔا مادؿضملؼملػملوملُم‬ ‫حمِّّٓداًمؼضملؿملّٓمطمملئؽملمملًمواحّٓاًميفماٌـممللم(أسينماحملّٓدم‪)#Mydiv‬م‪ .‬م‬
  
  ‫‪108‬‬
  
  ‫و مبمملظشملؾ‪ ّٝ‬مميغمل‪ ّ٤‬مهلني ماظّٓاظهمل ممبـ‪ ّ٢‬مط‪ ّ٢‬مايمملالت ماٌرملمملبؾملهمل ماظلمملبعملهمل مبمملالسؿؼملمملد مسػمل‪ ّ٧‬ماظّٓورانم‬ ‫‪each‬مظؿملزملؾّّمذغمل‪ّ٢‬مداظؿؽملمملماظؽملؾملمملئ‪ّ٨‬مػ‪ّ٦‬م‪:‬‬ ‫{)‪(function($‬‬ ‫{)(‪function‬م=م‪$.fn.changeFont‬‬ ‫{م)(‪return this.each(function‬‬ ‫;)‟‪$(this).css(„font-family‟ , „arial‬‬ ‫;)}‬ ‫;}‬ ‫;)‪})(jQuery‬‬
  
  ‫ومػغملّٔامتزملؾّّمداظؿمملغمملماظلمملبعملؿمملنمجمملػّٖتنيمظػملؽملرملّٕميفمإضمملصهملمظ‪ّ٤‬مؼلؿكّٓعؾملمملمأحّٓمِّغؾملمملمإضمملصهملمالمتعمل‪ّ٦‬مم‬ ‫بفمليمذ‪ّ٨‬ءمجّٓؼّٓمسّٓامتضملػملؿملؼملؽملمملمطؿملظملؿملهملمبؽملمملءماإلضمملصمملتم‪‬م‪ .‬م‬ ‫م‬
  
  ‫اًمملمتهملم‪ :‬م‬ ‫وماآلنمومضّٓمذمملرصؽملمملمسػمل‪ّ٧‬ماظّٓٓخ‪ّ٦‬لميفماظّٓضؿملعملهملم‪020‬م رمّٓرمب‪ّ٨‬مأنمأرظمللملماِّغ‪ّ٦‬ارمومأغلقنملمبؾملّٓوءم‬ ‫ومظغمل‪ّ٤‬مبضملّٓماالسذلافمبفملغينمالمأزالمأتضملػملَّ‪ّ٣‬مومأرحِّنملمبفمليمادؿظمللمملرمومبغمل‪ّ٢‬مع‪ّ٤‬مؼّٕؼّٓمأنمؼؿ‪ّ٦‬اص‪ّ٢‬معضمل‪ّ٨‬م‬ ‫سدلماظدلؼّٓماإلظغملذلوغ‪ّ٨‬مم‪[email protected]‬م م‬ ‫بّٕجمهملًمممؿضملهملم‪...‬مومإشممظعملمملءمضمملدمميفمدضمملئ‪ّ٠‬مأخّٕىمبكملذنماهلل‪.‬م م‬
  
  ‫‪109‬‬
  
  ‫متٖمحبؼملّٓماهللمسّٖٖمومجَ‪ّ٢‬‬
  
  ‫م‬
  
  ‫دعرمل‪ّ٠‬م‪82022101‬‬
  
  ‫م‬
  
  ‫جّٓولماحملؿ‪ّ٦‬ؼمملت‬
  
  ‫م‬
  
  ‫أساسيَّات ‪5..........................................................................................JQUERY‬‬ ‫حثبيج ‪ jQuery‬و حضًينها في صفحخك ‪5 ..............................‬‬ ‫أساسياث‬
  
  ‫‪jQuery‬‬
  
  ‫‪6 .........................................‬‬
  
  ‫انًزيذ ين األيثهت ؟ ‪01 ........................................‬‬ ‫طشيقت اسخعًال‬
  
  ‫‪jQuery‬‬
  
  ‫‪01 ....................................‬‬
  
  ‫يا يعنً انشيفشة انسابقت ؟ ‪01 .....................................‬‬
  
  ‫ال ُم َحذِّدات ‪31 ................................................................................SELECTORS‬‬ ‫ان ًُ َحذِّداث ‪03 .............................................‬‬ ‫حىنيذ يحخىياث ‪ HTML‬جذيذة ‪21 ...................................‬‬
  
  ‫الذَّوال ‪13 .................................................................................... FUNCTIONS‬‬ ‫ان َّذوال ‪22 ....................................... Functions‬‬ ‫دوال انخعايم يع واصفاث انىسىو‬ ‫دوال انخعايم يع األنًاط‬
  
  ‫‪Styles‬‬
  
  ‫‪Attributes‬‬
  
  ‫‪26 ................................‬‬
  
  ‫دوال انخعايم يع يحخىي عناصش انًسخنذ‬ ‫دوال انخغهيف‬
  
  ‫‪Wrapping‬‬
  
  ‫‪22 .......................‬‬
  
  ‫‪Inner content‬‬
  
  ‫‪33 ..................‬‬
  
  ‫‪40 ....................................‬‬
  
  ‫دوال حزف عناصش انًسخنذ ‪43 ...................................‬‬ ‫دوال انخعايم يع عناصش اننًارج‬
  
  ‫‪FORM ELEMENTS‬‬
  
  ‫‪110‬‬
  
  ‫‪43 ......................‬‬
  
  ‫األحذاث ‪55 ........................................................................................ EVENTS‬‬ ‫الحركات ‪23 .............................................................................. ANIMATIONS‬‬ ‫َ‬ ‫انحشكاث ‪62 ..................................... Animations‬‬ ‫َ‬ ‫انًؤثشاث انبسيطت ‪62 ........................................‬‬ ‫يؤثشاث انخالشي ‪68 .........................................‬‬ ‫يؤثّشاث االنزالق ‪70 .........................................‬‬ ‫إيقاف انحشكت ‪71 ..........................................‬‬ ‫يشجع سشيع نحشكاث انًكخبت ‪71 ..................................‬‬ ‫إنشاء حشكاث خاصت ‪72 .......................................‬‬
  
  ‫التخاطب مع الخادم عبر تقنيّة ‪58 ................................................................ AJAX‬‬ ‫جهب انًحخىي ين انخادو ‪76 .....................................‬‬ ‫حًشيش وسطاء نهخادو ين حقىل اننًارج ‪78 .............................‬‬ ‫إسسال طهباث ين اننىع‬
  
  ‫‪GET‬‬
  
  ‫إسسال طهباث ين اننىع‬
  
  ‫‪POST‬‬
  
  ‫‪78 ...................................‬‬ ‫‪80 ..................................‬‬
  
  ‫إسسال انطهباث نخادو يعهىو نىع االسخجابت ‪80 ............................‬‬ ‫انخح ّكى انكايم بطهباث‬
  
  ‫‪AJAX‬‬
  
  ‫األحذاد انخاصّت بطهباث‬
  
  ‫‪81 ...................................‬‬
  
  ‫‪AJAX‬‬
  
  ‫‪84 .................................‬‬
  
  ‫اإلضافات ‪72 .................................................................................... PLUGINS‬‬ ‫‪111‬‬
  
  ‫اإلضافاث‬ ‫اإلضافت‬ ‫اإلضافت‬ ‫اإلضافت‬ ‫اإلضافت‬
  
  ‫‪87 ......................................‬‬
  
  ‫‪plugins‬‬
  
  ‫‪jQuery user Interface‬‬ ‫‪jQuery Form‬‬ ‫‪jmaxinput‬‬
  
  ‫‪88 ............................‬‬
  
  ‫‪011 ...................................‬‬
  
  ‫‪011 .....................................‬‬
  
  ‫‪short access‬‬
  
  ‫اإلضافت‬
  
  ‫‪corner‬‬
  
  ‫اإلضافت‬
  
  ‫‪beauty tips‬‬
  
  ‫‪010 ............................. jQuery‬‬
  
  ‫‪010 .................................. jQuery‬‬ ‫‪011 ...................................‬‬
  
  ‫اإلضافت ‪011 ......................................... BOXY‬‬ ‫اإلضافت‬ ‫اإلضافت‬
  
  ‫‪AJAX fancy captcha‬‬ ‫‪Gallerific‬‬
  
  ‫‪012 ..............................‬‬
  
  ‫‪013 ....................................‬‬
  
  ‫انًزيذ ين اإلضافاث ؟ ‪013 .....................................‬‬ ‫كيفيت إنشاء اإلضافاث‬
  
  ‫‪plugins‬‬
  
  ‫‪014 ...............................‬‬
  
  ‫حسًيت يهفّاث اإلضافاث ‪014 .....................................‬‬ ‫انشكم انعاو نشيفشة اإلضافت ‪014 ..................................‬‬ ‫طشيقت بناء دوال اإلضافاث ‪015 ..................................‬‬ ‫أيثهت عهً إنشاء إضافاث خاصَّت ‪016 ................................‬‬ ‫انخاحًت ‪016 .............................................‬‬
  
  ‫م‬
  
  ‫‪112‬‬
  
  ‫المؤلف في سطور‬  
  
   
  
  
  
  Web Technologies
  
    o HTML5 & CSS3
  
  
  
  jQuery
  
  
  
  3D Game Studio  F1-Magazine
  
  o 
  
  facebook.com/mukhtar.ss
  
  

  ---

  Related Documents

  
  120
  November 2019 43
  
  120
  November 2019 38
  
  120
  November 2019 36
  
  120
  July 2020 23
  
  120
  June 2020 21
  
  120
  November 2019 39

  ---

  More Documents from ""

  
  Button And Image.txt
  October 2019 5
  
  Resume Poo
  October 2019 23
  
  October 2019 12

  Copyright © 2024 PDFCOKE.