jsÖÐuiº¯ÊýÊÇʲôÒâ˼
javascript ÖÐµÄ ui º¯ÊýÓÃÓÚ½¨ÉèºÍ²Ù×÷Óû§½çÃæÔªËØ¡£ÕâЩº¯Êý°üÀ¨£ºdom º¯Êý£¨»á¼û html/xml ½á¹¹£©¡¢event º¯Êý£¨´¦ÀíÓû§½»»¥£©¡¢styling º¯Êý£¨ÉèÖúͻñÈ¡ÑùʽÊôÐÔ£©¡¢animation º¯Êý£¨½¨ÉèºÍ¿ØÖƶ¯»£©¡£Ê¹Óà ui º¯Êý¿ÉÒÔÌá¸ßÓû§ÌåÑé¡¢´úÂë¿ÉÖØÓÃÐÔÒÔ¼°ÔöÇ¿¿É»á¼ûÐÔ¡£
UI º¯Êý
Óû§½çÃ棨UI£©º¯ÊýÔÚ JavaScript ÖÐÓÃÓÚ½¨ÉèºÍ²Ù×÷ Web Ó¦ÓóÌÐòµÄ½»»¥Ê½ÔªËØ¡£ÕâЩº¯ÊýÔÊÐí¿ª·¢Ö°Ô±ÒÔ±à³Ì·½·¨ÓëÓû§½çÃæ¾ÙÐн»»¥£¬ÀýÈçÏÔʾ¡¢Òþ²Ø¡¢¸üкÍʹÓà UI ÔªËØ¡£
ÀàÐÍ
JavaScript ÖÐÓÐÐí¶àÄÚÖÃµÄ UI º¯Êý£¬°üÀ¨£º
Document Object Model (DOM) º¯Êý£ºÓÃÓÚ»á¼ûºÍ²Ù×÷ HTML ºÍ XML Îĵµ½á¹¹¡£ÀýÈ磬.getElementById() º¯Êý¿ÉÓÃÓÚ»ñÈ¡¾ßÓÐÌض¨ ID µÄ HTML ÔªËØ¡£
Event º¯Êý£ºÓÃÓÚ´¦ÀíÓû§½»»¥£¬ÀýÈçµ¥»÷¡¢ÐüÍ£ºÍ¼üÅÌÊÂÎñ¡£ÀýÈ磬.addEventListener() º¯Êý¿ÉÓÃÓÚÔÚÔªËØÉÏÌí¼ÓÊÂÎñÕìÌýÆ÷¡£
Styling º¯Êý£ºÓÃÓÚÉèÖúͻñÈ¡ UI ÔªËصÄÑùʽÊôÐÔ¡£ÀýÈ磬.style.color ÊôÐÔ¿ÉÓÃÓÚÉèÖÃÔªËصÄÎı¾ÑÕÉ«¡£
Animation º¯Êý£ºÓÃÓÚ½¨ÉèºÍ¿ØÖÆ UI ÔªËصĶ¯»¡£ÀýÈ磬.animate() º¯Êý¿ÉÓÃÓÚʹԪËØÒÔÌض¨·½·¨Òƶ¯»ò¹ý¶É¡£
ÓÃ;
UI º¯ÊýÓÃÓÚ½¨ÉèÖÖÖÖ½»»¥Ê½ UI ÔªËØ£¬°üÀ¨£º
±íµ¥ºÍÊäÈë×Ö¶Î
°´Å¥ºÍÁ´½Ó
ÏÂÀ²Ëµ¥ºÍÑ¡Ôñ¿ò
ģ̬ºÍµ¯³ö´°¿Ú
¶¯»Ð§¹û
ÀûÒæ
ʹÓà UI º¯Êý¿ÉÒÔ´øÀ´ÒÔÏÂÀûÒ棺
Ìá¸ßÓû§ÌåÑ飺ͨ¹ý½¨É趯̬ºÍ½»»¥Ê½µÄ UI ÔöÇ¿Óû§ÓëÓ¦ÓóÌÐòµÄ½»»¥¡£
Ìá¸ß´úÂë¿ÉÖØÓÃÐÔ£ºÔÊÐí¿ª·¢Ö°Ô±½¨Éè¿ÉÖظ´Ê¹ÓÃµÄ UI ×é¼þ£¬´Ó¶ø½ÚԼʱ¼äºÍ¾«Éñ¡£
ÔöÇ¿¿É»á¼ûÐÔ£ºÍ¨¹ýÔÊÐí¿ª·¢Ö°Ô±Ìí¼Ó¸¨Öú¹¦Ð§£¬Ê¹Ó¦ÓóÌÐò¶Ô¾ßÓвÐÕÏÈËÊ¿ÓѺá£
ÒÔÉϾÍÊÇjsÖÐuiº¯ÊýÊÇʲôÒâ˼µÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡