jQuery Web¿ª·¢°¸Àý½Ì³Ì

ÕÂÃûĿ¼

¡¾ÉÏƪ¡¿ jQurey»ù´¡Æª
µÚ 1ÕÂ jQuery»ù´¡
µÚ 2Õ HTML5¡¢CSS3ºÍJavaScript»ù´¡ÖªÊ¶
µÚ3Õ jQueryÑ¡ÔñÆ÷Óë¹ÜÀí½á¹û¼¯
µÚ4Õ ʹÓÃjQuery¿ØÖÆDOM
µÚ5Õ jQueryʼþ
µÚ6Õ jQueryµÄ¹¦Äܺ¯Êý
µÚ7ÕÂ jQueryÓëAJAX
µÚ8Õ ÀûÓÃjQueryÖÆ×÷¶¯»­ÓëÌØЧ
µÚ9Õ jQuery²å¼þ

¡¾ÏÂƪ¡¿ jQuery×ÛºÏʵÀýƪ
µÚ 10Õ ×ÛºÏʵÀýÒ»£ºÍøÒ³ÁôÑÔ±¾
µÚ 11Õ ×ÛºÏʵÀý¶þ£ºÍøÂçÏà²á
µÚ 12Õ ×ÛºÏʵÀýÈý£º½»»¥Ê½Á÷Á¿ÌײÍÑ¡ÔñÒ³Ãæ
µÚ 13Õ ×ÛºÏʵÀýËÄ£ºÍøҳͼƬ¼ô²ÃÆ÷
µÚ 14Õ ×ÛºÏʵÀýÎ壺ǰ¶Ë¹¤³Ì»¯



ÏêϸĿ¼

¡¾ÉÏƪ¡¿ jQurey»ù´¡Æª

µÚ 1ÕÂ jQuery»ù´¡
1£®1 jQuery¸ÅÊö 2
1£®1£®1 jQuery¼ò½é 2
1£®1£®2 ÏÂÔز¢Ê¹ÓÃjQuery 3
1£®2 jQueryµÄ$ 4
1£®2£®1 Ñ¡ÔñÆ÷ 4
1£®2£®2 ¹¦Äܺ¯ÊýµÄǰ׺ 6
1£®2£®3 window£®onload 6
1£®2£®4 ´´½¨DOMÔªËØ 7
1£®2£®5 À©Õ¹jQuery 8
1£®2£®6 ³åÍ»ÎÊÌâ 9
1£®3 ʹÓÃVSCode±àдµÚ Ò»¸öjQueryÒ³Ãæ 10
1£®3£®1 ´´½¨»ù´¡µÄHTMLÎĵµ 10
1£®3£®2 ±àдjQuery´úÂë 11
±¾ÕÂС½á 12
Ï°Ìâ1 12

µÚ 2Õ HTML5¡¢CSS3ºÍJavaScript»ù´¡ÖªÊ¶
2£®1 ES6µÄÐÂÌØÐÔ 14
2£®1£®1 let¹Ø¼ü×Ö 15
2£®1£®2 const¹Ø¼ü×Ö 15
2£®1£®3 for¡­ofÑ­»· 16
2£®1£®4 ×Ö·û´®Ä£°å 16
2£®1£®5 ²ÎÊýĬÈÏÖµ 17
2£®1£®6 ÀàÓë¼Ì³Ð 17
2£®1£®7 ¼ýÍ·º¯Êý 18
2£®1£®8 Ê£ÓàÔËËã·ûÓëÊ£Óà²ÎÊý 20
2£®1£®9 Õ¹¿ªÔËËã·û 20
2£®1£®10 Êý×éµÄ½â¹¹¸³Öµ 21
2£®1£®11 ¶ÔÏóµÄ½â¹¹¸³Öµ 21
2£®1£®12 Ä£¿é 22
2£®2 HTML5ÐÂÔöµÄÓïÒ廯±ê¼Ç 23
2£®3 CSS3ÒýÈëµÄ³£ÓÃÐÂÌØÐÔ 24
2£®3£®1 CSS3ÐÂÔöµÄ³£ÓÃÑùʽÊôÐÔ 25
2£®3£®2 ÐÂÔöµÄ²¼¾Ö·½Ê½¡ª¡ªµ¯ÐÔºÐ×Ó²¼¾Ö 27
2£®3£®3 ÐÂÔöµÄ²¼¾Ö·½Ê½¡ª¡ªÍø¸ñ²¼¾Ö 28
±¾ÕÂС½á 29
Ï°Ìâ2 29

µÚ3Õ jQueryÑ¡ÔñÆ÷Óë¹ÜÀí½á¹û¼¯
3£®1 Ñ¡ÔñÆ÷ 30
3£®1£®1 ÊôÐÔÑ¡ÔñÆ÷ 31
3£®1£®2 °üº¬Ñ¡ÔñÆ÷ 33
3£®1£®3 λÖÃÑ¡ÔñÆ÷ 34
3£®1£®4 ¹ýÂËÑ¡ÔñÆ÷ 37
3£®1£®5 ·´ÏòÑ¡ÔñÆ÷ 39
3£®2 ±éÀúDOM 39
3£®2£®1 children() 40
3£®2£®2 parent()ºÍparents() 42
3£®2£®3 siblings() 44
3£®3 ¹ÜÀí½á¹û¼¯ 45
3£®3£®1 »ñÈ¡Ñ¡ÖÐÔªËصĸöÊý 46
3£®3£®2 ÌáÈ¡ÔªËØ 47
3£®3£®3 Ìí¼Ó¡¢É¾³ý¡¢¹ýÂË 49
3£®3£®4 ²éÕÒ 52
3£®3£®5 ±éÀú 53
3£®4 jQueryÁ´ 54
±¾ÕÂС½á 54
Ï°Ìâ3 55

µÚ4Õ ʹÓÃjQuery¿ØÖÆDOM
4£®1 ÍøÒ³ÖеÄDOM¿ò¼Ü 57
4£®2 DOMÖеĽڵã 57
4£®2£®1 ÔªËؽڵã 58
4£®2£®2 Îı¾½Úµã 58
4£®2£®3 ÊôÐÔ½Úµã 58
4£®3 ±ê¼ÇµÄÊôÐÔ 58
4£®3£®1 »ñÈ¡ÊôÐÔµÄÖµ 59
4£®3£®2 ÉèÖÃÊôÐÔµÄÖµ 60
4£®3£®3 ɾ³ýÊôÐÔ 62
4£®4 ÔªËصÄÑùʽ 62
4£®4£®1 Ìí¼Ó¡¢É¾³ýCSSÀà±ð 63
4£®4£®2 ¶¯Ì¬Çл» 63
4£®4£®3 Ö±½Ó»ñÈ¡¡¢ÉèÖÃÑùʽ 64
4£®5 Ò³ÃæµÄÔªËØ 66
4£®5£®1 Ö±½Ó»ñÈ¡ºÍ±à¼­ÄÚÈÝ 66
4£®5£®2 Ìí¼ÓÔªËØ 68
4£®5£®3 ɾ³ýÔªËØ 72
4£®5£®4 ¿Ë¡ԪËØ 74
4£®6 ±íµ¥ÔªËصÄÖµ 75
4£®6£®1 »ñÈ¡±íµ¥ÔªËصÄÖµ 75
4£®6£®2 ÉèÖÃ±íµ¥ÔªËصÄÖµ 77
4£®7 ÔªËصijߴç 77
4£®7£®1 width()ºÍheight()·½·¨ 78
4£®7£®2 innerWidth()ºÍinnerHeight()·½·¨ 79
4£®7£®3 outerWidth()ºÍouterHeight()·½·¨ 80
4£®8 ÔªËصÄλÖà 81
4£®8£®1 offset()·½·¨ 81
4£®8£®2 position()·½·¨ 82
4£®8£®3 scrollTop()·½·¨ 83
±¾ÕÂС½á 84
Ï°Ìâ4 84

µÚ5Õ jQueryʼþ
5£®1 ʼþÓëʼþÁ÷ 86
5£®2 ʼþ¼àÌý 87
5£®2£®1 bind()·½·¨ 87
5£®2£®2 one()·½·¨ 89
5£®2£®3 JavaScriptµÄʼþ¼àÌý 90
5£®3 ʼþɾ³ý 92
5£®4 ʼþ¶ÔÏó 93
5£®5 ʼþ´¥·¢ 95
5£®6 ʼþµÄ¶¯Ì¬½»Ìæ 96
5£®6£®1 hoverʼþµÄ½»Ìæ 96
5£®6£®2 clickʼþµÄ½»Ìæ 97
5£®7 ʼþίÍÐ 98
5£®8 ×ÛºÏʵÀý£º¿ì²ÍÔÚÏß 100
5£®8£®1 ¿ò¼Ü´î½¨ 100
5£®8£®2 Ìí¼Óʼþ 101
5£®8£®3 Ñùʽ 104
±¾ÕÂС½á 106
Ï°Ìâ5 107

µÚ6Õ jQueryµÄ¹¦Äܺ¯Êý
6£®1 ´¦ÀíJavaScript¶ÔÏó 108
6£®1£®1 ±éÀú 108
6£®1£®2 Êý¾Ý¹ýÂË 110
6£®1£®3 Êý×éµÄת»¯ 112
6£®1£®4 Êý×éÔªËصIJéÕÒ 114
6£®2 »ñÈ¡Íⲿ´úÂë 115
6£®3 $£®data()·½·¨ 116
6£®4 $£®extend()·½·¨ 118
6£®5 ÀàÐÍÅÐ¶Ï 119
±¾ÕÂС½á 120
Ï°Ìâ6 121

µÚ7ÕÂ jQueryÓëAJAX
7£®1 ÈÏʶAJAX 122
7£®1£®1 AJAXµÄ»ù±¾¸ÅÄî 122
7£®1£®2 AJAXµÄ×é³É 124
7£®2 »ñÈ¡Òì²½Êý¾Ý 124
7£®2£®1 ´«Í³·½·¨ 124
7£®2£®2 jQueryµÄload()·½·¨ 126
7£®3 GETÓëPOST 128
7£®4 ¿ØÖÆAJAX 130
7£®4£®1 ÉèÖÃAJAX·ÃÎÊ·þÎñÆ÷µÄϸ½Ú 130
7£®4£®2 È«¾ÖÉ趨AJAX 133
7£®4£®3 AJAXʼþ 133
7£®4£®4 ʵÀý£ºÄ£Äâ°Ù¶ÈµÄÊý¾Ý¼ÓÔØ 135
7£®5 ʵÀý£ºÀûÓÃjQueryÖÆ×÷×Ô¶¯ÌáʾµÄÎı¾¿ò 137
7£®5£®1 ¿ò¼Ü½á¹¹ 138
7£®5£®2 Æ¥ÅäÓû§ÊäÈë 139
7£®5£®3 ÏÔʾ Çå³ýÌáʾ¿ò 139
±¾ÕÂС½á 143
Ï°Ìâ7 143

µÚ8Õ ÀûÓÃjQueryÖÆ×÷¶¯»­ÓëÌØЧ
8£®1 ÔªËصÄÏÔʾºÍÒþ²Ø 145
8£®1£®1 show()ºÍhide() 145
8£®1£®2 ʵÀý£º¶à¼¶²Ëµ¥ 146
8£®1£®3 toggle() 148
8£®2 µ­Èëµ­³öµÄÌØЧ 149
8£®2£®1 ÔÙ̽ÌÖshow()¡¢hide()ºÍtoggle() 149
8£®2£®2 fadeIn()ºÍfadeOut() 150
8£®2£®3 ×Ô¶¨Òå±ä»¯Í¸Ã÷¶È 151
8£®3 »ÃµÆƬÌØЧ 153
8£®4 ×Ô¶¨Ò嶯»­ 155
±¾ÕÂС½á 156
Ï°Ìâ8 156

µÚ9Õ jQuery²å¼þ
9£®1 Ä£Äâ¼ÓÈ빺Îï³µ 158
9£®1£®1 Êó±êÍÏÒ· 158
9£®1£®2 ÍÏÈ빺Îï³µ 162
9£®1£®3 ģ̬¿òÌáʾ 163
9£®2 Á÷ÐеÄTab²Ëµ¥ 167
9£®3 ÂÖ²¥Í¼ 170
9£®3£®1 ʹÓÃÂÖ²¥Í¼²å¼þÇ°µÄ×¼±¸ 170
9£®3£®2 ʹÓÃÂÖ²¥Í¼²å¼þ 171
9£®3£®3 µ÷ÕûÂÖ²¥Í¼Ð§¹û 172
±¾ÕÂС½á 174
Ï°Ìâ9 174

¡¾ÏÂƪ¡¿ jQuery×ÛºÏʵÀýƪ

µÚ 10Õ ×ÛºÏʵÀýÒ»£ºÍøÒ³ÁôÑÔ±¾
10£®1 »ù±¾ÁôÑÔ±¾ 177
10£®2 ¸ÄÓÃAJAX·½Ê½ÊµÏÖÁôÑÔ±¾ 179
10£®2£®1 ¶ÁÈ¡ÁôÑÔÁбí 180
10£®2£®2 ±£´æ²¢·µ»ØÐÂÁôÑÔ 180
10£®2£®3 ÖÆ×÷ÁôÑÔ±¾Èë¿ÚÒ³Ãæ 180
10£®3 ¶Ô±íµ¥Êý¾Ý½øÐÐÑéÖ¤ 182
±¾ÕÂС½á 184

µÚ 11Õ ×ÛºÏʵÀý¶þ£ºÍøÂçÏà²á
11£®1 ÕûÌå·ÖÎö 185
11£®2 Ä£¿é²ð·Ö 186
11£®2£®1 ËõÂÔͼÅÅÁÐ 186
11£®2£®2 ËõÂÔͼÌáʾ 189
11£®2£®3 ÏÔʾ´óͼ 189
11£®3 ¹¦ÄÜϸ»¯ 191
11£®3£®1 ³õʼ»¯Ò³Ãæ 191
11£®3£®2 µ¥»÷ËõÂÔͼ 191
11£®3£®3 ¹Ø±Õ°´Å¥ 192
11£®3£®4 ´óͼä¯ÀÀ 193
±¾ÕÂС½á 195

µÚ 12Õ ×ÛºÏʵÀýÈý£º½»»¥Ê½Á÷Á¿ÌײÍÑ¡ÔñÒ³Ãæ
12£®1 ±í¸ñ¿ò¼Ü 197
12£®1£®1 ±í¸ñ 197
12£®1£®2 Ñ¡ÔñÌ×²Í 198
12£®1£®3 ÉÌÓÃÒ³Ãæ 199
12£®2 ½»»¥Ñ¡Ôñ 201
12£®3 ×¢²áµ¥ 202
12£®3£®1 ×¢²áµ¥¿ò¼Ü 202
12£®3£®2 ×¢²áµ¥µÄÏÔʾºÍÒþ²Ø 204
12£®3£®3 AJAXУÑé 206
12£®3£®4 ÃÜÂëУÑé 208
12£®3£®5 AJAXÌá½» 208
±¾ÕÂС½á 210

µÚ 13Õ ×ÛºÏʵÀýËÄ£ºÍøҳͼƬ¼ô²ÃÆ÷
13£®1 ÕûÌå·ÖÎö 212
13£®2 Ò³ÃæHTML½á¹¹ºÍCSSÑùʽ 213
13£®2£®1 HTML½á¹¹ 213
13£®2£®2 Ñ¡Çø²¿·ÖµÄ½á¹¹ÓëÑùʽ 214
13£®3 ʵÏÖºËÐÄÂß¼­ 215
13£®3£®1 ¶¨Òå»ù´¡Àà 215
13£®3£®2 ¶¨ÒåCropperÀà 217
13£®4 ʹÓÃjQuery´¦Àí½»»¥ 221
13£®4£®1 ³õʼ»¯Í¼Ïñ 221
13£®4£®2 ¿ØÖÆÑ¡Çø 222
13£®4£®3 *ÖÕ¼ô²Ã 226
±¾ÕÂС½á 227

µÚ 14Õ ×ÛºÏʵÀýÎ壺ǰ¶Ë¹¤³Ì»¯
14£®1 ÔÚä¯ÀÀÆ÷ÖмàÊÓÓëµ÷ÊÔ 228
14£®1£®1 ʹÓÃconsole£®log()ºÍalert()·½·¨¼àÊÓÊä³öÖµ 228
14£®1£®2 ʹÓõ÷ÊÔÆ÷ 230
14£®2 JavaScriptÓÅ»¯ 232
14£®2£®1 ѹËõ´úÂëÁ¿ 232
14£®2£®2 ±äÁ¿×÷ÓÃÓò 234
14£®2£®3 ʹÓÃÄÚÖú¯Êý 236
14£®2£®4 ÓÅ»¯ifÓï¾ä 237
14£®2£®5 *С»¯Óï¾äÊýÁ¿ 237
14£®2£®6 ¼õÉÙDOM²Ù×÷ 238
14£®3 ʹÓÃwebpack¹¹½¨ÏµÍ³ 238
14£®3£®1 °²×°Node£®js»·¾³ 239
14£®3£®2 ×¼±¸ÏîÄ¿Îļþ 240
14£®3£®3 °²×°webpack¼°Ïà¹Ø×é¼þ 241
14£®3£®4 Ô¤ÀÀÓëµ÷ÊÔ 244
14£®3£®5 ´ò°ü 246
±¾ÕÂС½á 248