Instytut Inteligentnych Systemów Informatycznych Politechnika Częstochowska Programowanie interaktywnej grafiki komputerowej Lab 4: JQuery 18 marca 2015
¾ Ä ÂÉÙÖÝ 1 Cel ćwiczeń laboratoryjnych ÐÑ ÛÞ ÐÓÖØÓÖÝÒÝ Ø ÞÔÓÞÒÒ ØÙÒØ Þ Ò ÙÒ ÉÙÖÝ ÓÖÞ Ù ÝÑ ÔÓ ØÛÓÛÝ ÐØÓÖÛ ÂÉÙÖݺ 2 Podstawowe selektory JQuery Ó ÔÖÞÔÖÓÛÞÒ ÛÞ ÐÓÖØÓÖÝÒÝ ÒÞÒÝ Ø Ó ÔÖÞÝÓÛ ØÖÓÒÝ ÛÞÒ Þ ÓØÓÛÝÑ ÔÐÑ ÙÑ ÞÞÓÒÝ Û ÖÛÙÑ Ä ºÞÔ Ó ØÔÒÝ Ó ÔÓÖÒ Ò ØÖÓÒº ÃÓ ÂÚËÖÔØ ÙÖÙÑÒÝ ÔÓ ÞÓÛÒÙ ÛÒ ÞÛÖØÓ ØÖÓÒÝ ÔÖÞ¹ ØÛ Ò ØÔÙÓ ¾»» ÃÓ ÉÙÖÝ Ð µ Ï ØÝÑ Ó ÞÖÞ ÒÐ Ý ÙÑ ÞÞ Ó ÑØÓ Ó ÙÙÝ ÞÖÞÒ Û ØÝÑ ÞÖÞÒ ÐÒ ÑÝ Þ Û ÔÖÞÝ Ó Ø ØÙØØÓÒº ¾ ³Ø ØÙØØÓÒ ³ µ ¼ º ÓÒÑÓÙ ÓÚÖ Ù Ò Ø Ó Ò ÚÒØ µ ß»»ÃÓ ÉÙÖÝ Ó Ô Ö Þ Ø Ø Ó Û Ò Ð Ð µ Ï ÖÑ Þ ÐÓÖØÓÖÝÒÝ ÒÐ Ý ÔÖÞØ ØÓÛ ÞÒ Ò ØÔÙÝ ÐØÓÖÛ ÛÔ Ù ØÖ Û Ó Ù Ó ÙÙ ÞÖÞÒº ÞÒ ÓÙ ÉÙÖÝ ÔÓÐ Ò ÞÞÒÞÒÙ ÛÝÖÒÝ ÐÑÒØÛ Ò ØÖÓÒ ÀÌÅĺ ËÐØÓÖÝ Ó ÔÖÞØ ØÓÛÒ ÛÝ ÂÉÙÖݽµ ½º ³Ñ³µºÐ ³ ÐØÐÑÒسµ ¾º ³ Ð Ð ³ µºð ³ ÐØÐÑÒسµ º ³ Рг µºð ³ ÐØÐÑÒسµ º ³Ú Ð Ð ³ µºð ³ ÐØÐÑÒسµ º ³ ÒÑ ÓÑÊÓÖÓÙÔ ³µºÐ ³ ÐØÐÑÒسµ º ³ ÒÑ ÓÑÊÓÖÓÙÔ ÖÓ³µºÐ ³ ÐØÐÑÒسµ Ý ÓÔÓÛ ÛÝÖÒ ÐÑÒØÝ Ó Ó ÞÖÙ Ú Ó ³ ÐØÖ ÙÐØ ³ Ò ÖÞÞ ÛÝÖÒÝ ÐÑÒØÛ ÒÐ Ý ÛÝÛÓ ÙÒ ½ ÚÖ ÓÒØÒØ ³ ÒÑ ÓÑÊÓÖÓÙÔ ³ µ ¾ º Ð ³ ÐØÐÑÒØ ³ µ ³ Ú Ð Ø Ö Ù Ð Ø µ º ÔÔÒ ÓÒØÒØ º Ð Ó Ò µ µ
º ³ Ð ÚÒ³ µ º ³ÓÝÚ³µ º ³Ú µ³ µ ½¼º ³ÚºÐг µ ½½º ³ÚºÐÐÐ ³ µ ½¾º ³ Ð Ð µ³ µ ½ º ³Ñ³ ³Ú³ µ ½º ³ Рг µ ½º ³ Ð Ú³µ ½º ³ Ð Ö Ø ³ µ ½º ³ Ð Ð Ø ³ µ ½º ³ ÙØØÓÒ³µ ½º ³ г µ ¾¼º ³ Òгµ 3 Wybrane przykłady - wykład 3 ½º ÓÒ ÒÓÛÓ ÞÓ ÓÒÓ ÐÑÒØÙ ØÝÔÙ Þ Þ ÓÖÑØÓÛÒÑ ÓÖÞ ÙÒ¹ Ó Ù ÞÖÞÒ ÐÒ ÑÝ Þ ¾ ³Ø ØÙØØÓÒ ³ µ º Ð Ù Ò Ø Ó Ò µ ß ³Ñ³ ß Ö ³ Ñ»Þ º ÔÒ ³ Ð Ø ³ÏÝÙÛÙÐÒÙÛ Á Ð Ò ³ Ø Ø Ð ³ÏÝÙÛÙÐÒÙÛ Á Ð Ò ³ Ð Ù Ò Ø Ó Ò µ ß Ð Ö Ø Ø µ º Ø Ø Ö ³ Ø Ø Ð ³ µ µ ½¼ Ð ½½ е ½¾ º ß ½ Ù Ö Ó Ö ³ Ô Ó Ò Ø Ö ³ ½ ÓÖÖ ³ ½ÔÜ Ó Ð Ð ³ ½ ÛØ ³ ½ ¼ÔÜ ³ ½ Ø ³ ¼ÔÜ ³
Ä ÂÉÙÖÝ ½ ÔÒ ³ ÔÜ ³ ½ ÖÓÙÒÓÐÓÖ ³ ÛØ ³ ½ е ¾¼ ¾½ ¾¾ º Ò Ö Ø Ø Ö ³ÑÓÙÐÖ ÙÐØ ³ µ Ð µ Ð µ ¾º ÆÙÑÖÓÛÒ ÐÑÒØÛ Ò ØÖÓÒ ¹ ÔÖÞÝ ÒÙÑÖÓÛÒ Ð Û ÞÝ Ø Þ ¾ ³Ø ØÙØØÓÒ ³ µ º Ð Ù Ò Ø Ó Ò µ ß ³ Ñ ³ µ º Ù Ò Ø Ó Ò Òµ ß Ø º Ø Ø Ð ³ÌÓ Ø Þ ³ Ò ³ ÞØÝØÙÑ ³ Ø º Ø Ø Ð Ð µ Ð µ Ð µ º ÞÒÞÒ Þ ÞÐ Ò Ó ÔÓ ÒÓ õ ÒÔÓ ÒÓ ØÝØÙÙ ÔÖÞÝ ÛÝÓÖÞÝ ØÒÙ ÙÒ ØÓÔÒÓÛÓ ÓÛÒ ÓÔÓÛÒ Ð ÓÖѹ ØÙÝ ½ ³ Ñ Ø Ø Ð ³ µ º Ð ³ ÐØÐÑÒؾ ³ µ ¾ º ³ Ñ Ð Ø ³ µ º Ð ³ ÐØÐÑÒØ ³ µ º ÅÓÝ ÖÓÞÑÖÛ Þ ÔÓ ÓÖÞÓÛÝÑ ÐÒÙ ÑÝ Þ ¾ ³Ø ØÙØØÓÒ ³ µ º Ð Ù Ò Ø Ó Ò µ ß ³ Ñ ³ µ º ³ ÛØ ³ ³ Ñ ³ µ º ÛØ µ ½¼µ ³ Ñ ³ µ º ³ Ø ³ ³ Ñ ³ µ º Ø µ ½¼µ Ð µ Ð µ º ÏÝÔ Ò ÔÓÓ Ò ÔÖÛ ÞÓ Þ Þ Ð ØÝ ÛÞÐÑ Ó ÓÙÑÒØÙ ½ ³Ø ØÙØØÓÒ ³ µ º Ð Ù Ò Ø Ó Ò µ ß ¾ ÚÖ ÔÓ ³ Ñ ³ µ º Ó Ø µ ³ Ð Ø Ö Ù Ð Ø ³ µ º ØÑÐ ³ Рس ÔÓ º Ð Ø ³ ØÓÔ³ ÔÓ º ØÓÔ µ Ð µ ÈÓÞÓ Ø ÙÒ Ó ÔÖÞØ ØÓÛÒ ½º º ÔÓ ØÓÒ µ ¹ ÞÛÖ ÔÓÞÝ ÛÞÐÑ ÐÑÒØÙ ÖÓÞ
¾º ºØÑÐ µ ¹ ÞÛÖ ÞÛÖØÓ ØÑÐ ÔÖÛ ÞÓ ÐÑÒØÙ º ºØÑÐ ÚÐÙµ ¹ Ù ØÛ ÛÖØÓ ØÑÐ Ð Û ÞÝ Ø ÐÑÒØÛ º ºØÜØ µ ¹ ÞÛÖ ÔÓÞÓÒ Ø ØÓÛ ÞÛÖØÓ Û ÞÝ Ø ÐÑÒØÛ º ºÔÔÒ ÓÒØÒص ¹ Ó Ò ÓÙ ÐÑÒØÛ ÓÒØÒØ º ºÔÖÔÒ ÓÒØÒص ¹ Ó Ò ÔÓÞØÙ ÐÑÒØÛ ÓÒØÒØ º ºÓÖ ÓÒØÒص ¹ Ó ÔÖÞ Û ÞÝ ØÑ ÐÑÒØÑ ÞÛÖØÓ ÓÒØÒØ º º ØÖ ÓÒØÒص ¹ Ó Þ Û ÞÝ ØÑ ÐÑÒØÑ ÞÛÖØÓ ÓÒØÒغ º ºÔÔÒÌÓ ØÖØ µ ¹ Ó ÛÝÖÒ ÐÑÒØÝ Ò ÓÒ ÞÛÖØÓ Û ÞÝ Ø¹ ÐÑÒØÛ ØÖØ ½¼º ºÔÖÔÒÌÓ ØÖص ¹ Ó ÛÝÖÒ ÐÑÒØÝ Ò ÔÓÞØ ÞÛÖØÓ Û ÞÝ Ø¹ ÐÑÒØÛ ØÖØ ½½º º Ò ÖØÓÖ ØÖØ µ ¹ Ó Û ÞÝ Ø ÐÑÒØÝ ÞÓÖÙ ÔÖÞ ØÖØ ½¾º º Ò ÖØØÖ ØÖØ µ ¹ Ó Û ÞÝ Ø ÐÑÒØÝ ÞÓÖÙ ÔÓ ØÖØ ÈÓÛÝ Þ ÙÒ ÒÐ Ý ÔÖÞØ ØÓÛ Ð Ö ÒÝ ÐØÓÖÛ ÔÖÞ ØÛÓÒÝ ÛÞÒº 4 Zadanie ÑÔÐÑÒØÙ ÐÙÑ ÓØÓÖÞÒÝ ÔÓÓÒÝ Ó ØÓ ÞÖÐÞÓÛÒÓ Ò ÔÓÔÖÞ¹ Ò Þ ÐÓÖØÓÖÝÒݺ ÈÓÞ ÑÔÐÑÒØ ÐÙÑÙ ÒÐ Ý ÛÝÓÖÞÝ Ø ÒÓÛÓ ÔÓÞÒÒ ÙÒ ¹ ÒÔº ÝÒÑÞÒ ØÛÓÖÞÒ ÐÑÒØÛ ÖÞÛ Çź Ó¹ ÐÓÛÓ ÐÙÑ Ñ Ý ÙØÛÓÖÞÓÒÝ Ò ÔÓ ØÛ Ó ÝÞÝ ÙÑ ÞÞÓÒÝ Û ÓÖÐÓÒÝÑ ÐÑÒ Ú Ò ØÖÓÒº Æ ÔÓ ØÛ ÔÓÞÝ ÒÝ Ó ÝÞÝ ÒÐ Ý ÙØÛÓÖÞÝ ÒÓÛ ÐÑÒØÝ ÖÞÛ ÇÅ ÔÖÞÝ Ò ØÖÓÒº Ó ÒÓÛÝ ÐÑÒØÛ ÔÓÔÒÑÝ ÛÛ ÓÛ ÖÙ Þ ØÝÐ ÑØÓÝ Ó Ù ÞÖÞ ÞÔÛÒ¹ ÒÛ ÑÞÝ ÞѺ ÐÙÑ Ñ ÔÓ ÙÒÓÒÐÒÓ ÔÖÞÓÞÒ ÔÓ Þ ÔÖÞÝ Ò ØÔÒÝ ÔÓÔÖÞÒµº ËÞÞÐÒ ÙÛ ÒÐ Ý ÞÛÖ Ò ÔÓÔÖÛÒÓ ÓÙ Ú ÖÔØ ÓÖÞ ÉÙÖݺ ÖÙ ÑÔÐÑÒØ ÐÙÑÙ ÓØÓÖ ÓÞÑÝ Ó ÔÖÓØÙ ØÖÓÒÝ ÒØÖÒØÓÛº ÐÙÑ ÔÓÐ ÓÒº ÐÙÑ Þ ÔÓÐ Ð Þ ÖÓÞÙÓÛ Ò ÓÐÒÝ Þ ÐÓÖØÓÖÝÒݺ