{"id":90102,"date":"2025-09-01T20:06:39","date_gmt":"2025-09-01T13:06:39","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=90102"},"modified":"2025-09-01T20:06:42","modified_gmt":"2025-09-01T13:06:42","slug":"cau-hoi-phong-van-jquery","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/","title":{"rendered":"Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery th\u01b0\u1eddng g\u1eb7p m\u1ecdi c\u1ea5p \u0111\u1ed9"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/#jQuery_la_gi\" >jQuery l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/#Cac_cau_hoi_phong_van_jQuery_se_thuoc_nhung_chu_de_nao\" >C\u00e1c c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery s\u1ebd thu\u1ed9c nh\u1eefng ch\u1ee7 \u0111\u1ec1 n\u00e0o?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/#Cau_hoi_phong_van_jQuery_pho_bien_danh_cho_Fresher\" >C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery ph\u1ed5 bi\u1ebfn d\u00e0nh cho Fresher&nbsp;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/#Cau_hoi_phong_van_jQuery_pho_bien_danh_cho_Middle\" >C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery ph\u1ed5 bi\u1ebfn d\u00e0nh cho Middle<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/#Cau_hoi_phong_van_jQuery_pho_bien_danh_cho_Senior\" >C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery ph\u1ed5 bi\u1ebfn d\u00e0nh cho Senior<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/#Top_cau_hoi_phong_van_thuc_hanh_viet_ma_jQuery_thuong_gap\" >Top c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n th\u1ef1c h\u00e0nh vi\u1ebft m\u00e3 jQuery th\u01b0\u1eddng g\u1eb7p<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>C\u00e1c c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery l\u00e0 m\u1ed9t ph\u1ea7n kh\u00f4ng th\u1ec3 thi\u1ebfu trong qu\u00e1 tr\u00ecnh tuy\u1ec3n d\u1ee5ng c\u00e1c v\u1ecb tr\u00ed li\u00ean quan \u0111\u1ebfn ph\u00e1t tri\u1ec3n front-end. T\u00f9y theo c\u1ea5p \u0111\u1ed9 kinh nghi\u1ec7m, nh\u00e0 tuy\u1ec3n d\u1ee5ng s\u1ebd c\u00f3 nh\u1eefng c\u00e1ch ti\u1ebfp c\u1eadn kh\u00e1c nhau: t\u1eeb ki\u1ec3m tra ki\u1ebfn th\u1ee9c c\u00fa ph\u00e1p, hi\u1ec3u bi\u1ebft v\u1ec1 DOM, \u0111\u1ebfn kh\u1ea3 n\u0103ng t\u1ed1i \u01b0u hi\u1ec7u su\u1ea5t v\u00e0 gi\u1ea3i b\u00e0i to\u00e1n th\u1ef1c t\u1ebf.<\/em><\/strong><\/p>\n\n\n\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft sau \u0111\u1ec3 \u0111\u01b0\u1ee3c h\u01b0\u1edbng d\u1eabn tr\u1ea3 l\u1eddi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u00e1c c\u1ea3u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery th\u01b0\u1eddng g\u1eb7p d\u00e0nh cho Fresher, Junior v\u00e0 Senior Developer.<\/li>\n\n\n\n<li>C\u00e1c c\u00e2u h\u1ecfi jQuery n\u00e2ng cao (c\u1ea5p \u0111\u1ed9 expert).<\/li>\n\n\n\n<li>C\u00e1c b\u00e0i th\u1ef1c h\u00e0nh code li\u00ean quan \u0111\u1ebfn jQuery.<\/li>\n\n\n\n<li>M\u1ed9t s\u1ed1 ki\u1ebfn th\u1ee9c c\u1ea7n chu\u1ea9n b\u1ecb tr\u01b0\u1edbc khi \u0111i ph\u1ecfng v\u1ea5n c\u00e1c v\u1ecb tr\u00ed li\u00ean quan v\u1ec1 jQuery ho\u1eb7c Front-End Developer.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-jquery-la-gi\"><span class=\"ez-toc-section\" id=\"jQuery_la_gi\"><\/span><strong>jQuery l\u00e0 g\u00ec?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>jQuery l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n JavaScript nhanh, nh\u1ecf g\u1ecdn v\u00e0 gi\u00e0u t\u00ednh n\u0103ng, gi\u00fap \u0111\u01a1n gi\u1ea3n h\u00f3a vi\u1ec7c x\u1eed l\u00fd HTML DOM, qu\u1ea3n l\u00fd s\u1ef1 ki\u1ec7n, hi\u1ec7u \u1ee9ng \u0111\u1ed9ng (animations) v\u00e0 t\u01b0\u01a1ng t\u00e1c Ajax tr\u00ean trang web. V\u1edbi c\u00fa ph\u00e1p ng\u1eafn g\u1ecdn v\u00e0 d\u1ec5 hi\u1ec3u, jQuery \u0111\u00e3 tr\u1edf th\u00e0nh m\u1ed9t c\u00f4ng c\u1ee5 ph\u1ed5 bi\u1ebfn trong ph\u00e1t tri\u1ec3n web, \u0111\u1eb7c bi\u1ec7t trong th\u1eddi k\u1ef3 tr\u01b0\u1edbc khi c\u00e1c framework hi\u1ec7n \u0111\u1ea1i nh\u01b0 React, Vue hay Angular ph\u1ed5 bi\u1ebfn nh\u01b0 hi\u1ec7n nay.&nbsp;<\/p>\n\n\n\n<p>D\u00f9 kh\u00f4ng c\u00f2n l\u00e0 l\u1ef1a ch\u1ecdn h\u00e0ng \u0111\u1ea7u trong c\u00e1c d\u1ef1 \u00e1n web hi\u1ec7n \u0111\u1ea1i, jQuery v\u1eabn \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng r\u1ed9ng r\u00e3i trong nhi\u1ec1u h\u1ec7 th\u1ed1ng hi\u1ec7n t\u1ea1i. V\u00ec v\u1eady, ki\u1ebfn th\u1ee9c v\u1ec1 jQuery v\u1eabn r\u1ea5t c\u1ea7n thi\u1ebft khi \u1ee9ng tuy\u1ec3n \u1edf v\u1ecb tr\u00ed front-end v\u00e0o c\u00e1c c\u00f4ng ty s\u1eed d\u1ee5ng stack c\u0169 ho\u1eb7c \u0111ang trong qu\u00e1 tr\u00ecnh chuy\u1ec3n \u0111\u1ed5i.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-ph\u1ecfng-v\u1ea5n-jquery-s\u1ebd-thu\u1ed9c-nh\u1eefng-ch\u1ee7-d\u1ec1-nao\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_phong_van_jQuery_se_thuoc_nhung_chu_de_nao\"><\/span><strong>C\u00e1c c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery s\u1ebd thu\u1ed9c nh\u1eefng ch\u1ee7 \u0111\u1ec1 n\u00e0o?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00e1c c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery th\u01b0\u1eddng xoay quanh c\u00e1c ch\u1ee7 \u0111\u1ec1 sau:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>C\u00e1ch thao t\u00e1c v\u1edbi DOM b\u1eb1ng jQuery<\/li>\n\n\n\n<li>Qu\u1ea3n l\u00fd s\u1ef1 ki\u1ec7n (event handling)<\/li>\n\n\n\n<li>Hi\u1ec7u \u1ee9ng v\u00e0 animation<\/li>\n\n\n\n<li>L\u00e0m vi\u1ec7c v\u1edbi Ajax trong jQuery<\/li>\n\n\n\n<li>C\u00e1c kh\u00e1i ni\u1ec7m n\u00e2ng cao nh\u01b0 chaining, deferred\/promise, plugin\u2026<\/li>\n\n\n\n<li>T\u1ed1i \u01b0u performance v\u00e0 so s\u00e1nh v\u1edbi vanilla JavaScript<\/li>\n<\/ul>\n\n\n\n<p>B\u00e0i vi\u1ebft n\u00e0y s\u1ebd h\u01b0\u1edbng d\u1eabn b\u1ea1n tr\u1ea3 l\u1eddi h\u1ea7u h\u1ebft c\u00e1c ch\u1ee7 \u0111\u1ec1 ph\u1ed5 bi\u1ebfn nh\u1ea5t v\u1ec1 jQuery t\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao, gi\u00fap b\u1ea1n \u00f4n t\u1eadp nhanh, b\u00e0i b\u1ea3n v\u00e0 t\u1ef1 tin h\u01a1n tr\u01b0\u1edbc bu\u1ed5i ph\u1ecfng v\u1ea5n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cau-h\u1ecfi-ph\u1ecfng-v\u1ea5n-jquery-ph\u1ed5-bi\u1ebfn-danh-cho-fresher-nbsp\"><span class=\"ez-toc-section\" id=\"Cau_hoi_phong_van_jQuery_pho_bien_danh_cho_Fresher\"><\/span><strong>C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery ph\u1ed5 bi\u1ebfn d\u00e0nh cho Fresher&nbsp;<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-di\u1ec3m-m\u1ea1nh-c\u1ee7a-jquery-la-gi\"><strong>\u0110i\u1ec3m m\u1ea1nh c\u1ee7a jQuery l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t s\u1ed1 \u0111i\u1ec3m m\u1ea1nh n\u1ed5i b\u1eadt c\u1ee7a jQuery c\u00f3 th\u1ec3 k\u1ec3 \u0111\u1ebfn nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ph\u1ed5 bi\u1ebfn v\u00e0 m\u00e3 ngu\u1ed3n m\u1edf:<\/strong> jQuery l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng r\u1ed9ng r\u00e3i trong c\u1ed9ng \u0111\u1ed3ng ph\u00e1t tri\u1ec3n web nh\u1edd l\u00e0 m\u00e3 ngu\u1ed3n m\u1edf v\u00e0 kh\u1ea3 n\u0103ng t\u00edch h\u1ee3p linh ho\u1ea1t.<\/li>\n\n\n\n<li><strong>T\u1ed1c \u0111\u1ed9 cao v\u00e0 d\u1ec5 m\u1edf r\u1ed9ng:<\/strong> jQuery c\u00f3 t\u1ed1c \u0111\u1ed9 th\u1ef1c thi nhanh ch\u00f3ng v\u00e0 cho ph\u00e9p m\u1edf r\u1ed9ng d\u1ec5 d\u00e0ng, ph\u00f9 h\u1ee3p v\u1edbi nhi\u1ec1u nhu c\u1ea7u ph\u00e1t tri\u1ec3n kh\u00e1c nhau.<\/li>\n\n\n\n<li><strong>T\u01b0\u01a1ng th\u00edch t\u1ed1t v\u1edbi nhi\u1ec1u tr\u00ecnh duy\u1ec7t:<\/strong> jQuery gi\u00fap x\u00e2y d\u1ef1ng c\u00e1c \u1ee9ng d\u1ee5ng web ho\u1ea1t \u0111\u1ed9ng \u1ed5n \u0111\u1ecbnh tr\u00ean nhi\u1ec1u tr\u00ecnh duy\u1ec7t kh\u00e1c nhau, bao g\u1ed3m c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t c\u0169 nh\u01b0 IE6-8 (m\u1eb7c d\u00f9 hi\u1ec7n nay \u00edt c\u00f2n quan tr\u1ecdng).<\/li>\n\n\n\n<li><strong>T\u1ed1i \u01b0u hi\u1ec7u su\u1ea5t \u1ee9ng d\u1ee5ng khi s\u1eed d\u1ee5ng phi\u00ean b\u1ea3n n\u00e9n: <\/strong>Phi\u00ean b\u1ea3n thu g\u1ecdn c\u1ee7a jQuery gi\u00fap gi\u1ea3m k\u00edch th\u01b0\u1edbc t\u1ec7p JavaScript t\u1edbi g\u1ea7n 50%, gi\u00fap trang web t\u1ea3i nhanh v\u00e0 m\u01b0\u1ee3t h\u01a1n, c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/li>\n\n\n\n<li><strong>Vi\u1ebft m\u00e3 g\u1ecdn nh\u1eb9 cho c\u00e1c ch\u1ee9c n\u0103ng giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng ph\u1ed5 bi\u1ebfn: <\/strong>Nhi\u1ec1u hi\u1ec7u \u1ee9ng v\u00e0 h\u00e0nh vi t\u01b0\u01a1ng t\u00e1c ph\u1ed5 bi\u1ebfn c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c vi\u1ebft ch\u1ec9 v\u1edbi v\u00e0i d\u00f2ng m\u00e3, gi\u00fap ti\u1ebft ki\u1ec7m th\u1eddi gian l\u1eadp tr\u00ecnh.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-jquery-co-gi-khac-so-v\u1edbi-cac-th\u01b0-vi\u1ec7n-javascript-khac\"><strong>jQuery c\u00f3 g\u00ec kh\u00e1c so v\u1edbi c\u00e1c th\u01b0 vi\u1ec7n JavaScript kh\u00e1c?<\/strong><\/h3>\n\n\n\n<p>jQuery v\u00e0 c\u00e1c framework hi\u1ec7n \u0111\u1ea1i nh\u01b0 React, Vue, Angular ph\u1ee5c v\u1ee5 c\u00e1c m\u1ee5c \u0111\u00edch kh\u00e1c nhau. jQuery t\u1eadp trung v\u00e0o c\u00e1c thao t\u00e1c DOM (DOM manipulation), c\u00f2n c\u00e1c th\u01b0 vi\u1ec7n hi\u1ec7n \u0111\u1ea1i t\u1eadp trung v\u00e0o ki\u1ebfn tr\u00fac th\u00e0nh ph\u1ea7n (component-based architecture).&nbsp;<\/p>\n\n\n\n<p>M\u1ed9t s\u1ed1 \u0111i\u1ec3m kh\u00e1c bi\u1ec7t n\u1ed5i b\u1eadt kh\u00e1c:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>jQuery c\u00f3 dung l\u01b0\u1ee3ng nh\u1ecf h\u01a1n nhi\u1ec1u so v\u1edbi c\u00e1c th\u01b0 vi\u1ec7n ho\u1eb7c framework kh\u00e1c, gi\u00fap gi\u1ea3m t\u1ea3i dung l\u01b0\u1ee3ng v\u00e0 t\u0103ng t\u1ed1c \u0111\u1ed9 t\u1ea3i trang.<\/li>\n\n\n\n<li>jQuery kh\u00f4ng ph\u1ee5 thu\u1ed9c v\u00e0o c\u00e1c th\u01b0 vi\u1ec7n hay c\u00f4ng c\u1ee5 trung gian kh\u00e1c (nh\u01b0 build tools), gi\u00fap vi\u1ec7c c\u00e0i \u0111\u1eb7t v\u00e0 tri\u1ec3n khai tr\u1edf n\u00ean \u0111\u01a1n gi\u1ea3n h\u01a1n.<\/li>\n\n\n\n<li>C\u1ea5u tr\u00fac v\u00e0 c\u00e1ch ho\u1ea1t \u0111\u1ed9ng c\u1ee7a jQuery \u00edt ph\u1ee9c t\u1ea1p h\u01a1n, n\u00ean r\u1ea5t d\u1ec5 h\u1ecdc v\u00e0 d\u1ec5 \u00e1p d\u1ee5ng, \u0111\u1eb7c bi\u1ec7t v\u1edbi ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u.<\/li>\n\n\n\n<li>jQuery kh\u00f4ng n\u1eb7ng nh\u01b0 c\u00e1c framework l\u1edbn kh\u00e1c, v\u00ec n\u00f3 ch\u1ec9 s\u1eed d\u1ee5ng c\u00e1c t\u00ednh n\u0103ng c\u00f3 s\u1eb5n c\u1ee7a JavaScript \u0111\u1ec3 t\u1ea1o ra nh\u1eefng t\u01b0\u01a1ng t\u00e1c \u0111\u1ed9ng cho \u1ee9ng d\u1ee5ng web.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc chi ti\u1ebft: <strong><a href=\"https:\/\/itviec.com\/blog\/jquery-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Nh\u1eefng \u0111i\u1ec1u c\u1ea7n bi\u1ebft v\u1ec1 jQuery \u2013 Th\u01b0 vi\u1ec7n Javascript h\u00e0ng \u0111\u1ea7u<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-hay-gi\u1ea3i-thich-nh\u1eefng-gi-b\u1ea1n-bi\u1ebft-v\u1ec1-each-trong-jquery\"><strong>H\u00e3y gi\u1ea3i th\u00edch nh\u1eefng g\u00ec b\u1ea1n bi\u1ebft v\u1ec1 each() trong jQuery.<\/strong><\/h3>\n\n\n\n<p>Ph\u01b0\u01a1ng th\u1ee9c each() trong jQuery cho ph\u00e9p duy\u1ec7t qua c\u00e1c t\u1eadp d\u1eef li\u1ec7u kh\u00e1c nhau nh\u01b0 m\u1ea3ng, \u0111\u1ed1i t\u01b0\u1ee3ng (object) v\u00e0 c\u00e1c \u0111\u1ed1i t\u01b0\u1ee3ng DOM. Th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 l\u1eb7p qua nhi\u1ec1u ph\u1ea7n t\u1eed DOM \u0111\u01b0\u1ee3c ch\u1ecdn b\u1edfi c\u00f9ng m\u1ed9t selector.&nbsp;<\/p>\n\n\n\n<p>V\u00ed d\u1ee5: N\u1ebfu mu\u1ed1n g\u00e1n thu\u1ed9c t\u00ednh width=&#8221;600&#8243; cho t\u1ea5t c\u1ea3 h\u00ecnh \u1ea3nh tr\u00ean m\u1ed9t trang, ch\u00fang ta c\u00f3 th\u1ec3 ch\u1ecdn t\u1ea5t c\u1ea3 th\u1ebb &lt;img&gt;, sau \u0111\u00f3 l\u1eb7p qua t\u1eebng ph\u1ea7n t\u1eed v\u00e0 th\u00eam thu\u1ed9c t\u00ednh nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(\"img\").each(function(im){\n\n\u00a0\u00a0\u00a0\u00a0$(this).attr(\"width\", \"600\");\n\n});<\/code><\/pre>\n\n\n\n<p>Trong v\u00ed d\u1ee5 tr\u00ean:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>$ l\u00e0 \u0111\u1ed1i t\u01b0\u1ee3ng jQuery d\u00f9ng \u0111\u1ec3 &#8220;b\u1ecdc&#8221; m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng DOM th\u00e0nh jQuery object.<\/li>\n\n\n\n<li>this l\u00e0 m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng DOM b\u00ean trong h\u00e0m each().<\/li>\n\n\n\n<li>index l\u00e0 tham s\u1ed1 \u0111\u1ea7u ti\u00ean, \u0111\u1ea1i di\u1ec7n cho ch\u1ec9 s\u1ed1 c\u1ee7a ph\u1ea7n t\u1eed hi\u1ec7n t\u1ea1i.<\/li>\n\n\n\n<li>\u0110\u1ec3 s\u1eed d\u1ee5ng c\u00e1c ph\u01b0\u01a1ng th\u1ee9c jQuery (nh\u01b0 .attr()), s\u1ebd c\u1ea7n chuy\u1ec3n \u0111\u1ed5i this sang \u0111\u1ed1i t\u01b0\u1ee3ng jQuery b\u1eb1ng c\u00e1ch b\u1ecdc trong $(), v\u00ed d\u1ee5 $(this).<\/li>\n<\/ul>\n\n\n\n<p>Ngo\u00e0i DOM, each() c\u00f2n c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 l\u1eb7p qua c\u00e1c ph\u1ea7n t\u1eed trong m\u1ea3ng, cho ph\u00e9p l\u1ea5y ch\u1ec9 s\u1ed1 (index) v\u00e0 gi\u00e1 tr\u1ecb (value) t\u01b0\u01a1ng \u1ee9ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var list = &#91;\"ITviec\", \"jQuery\", \"Questions\"];\n\n$.each(list, function(index, value){\n\n\u00a0\u00a0\u00a0\u00a0console.log(index + \" \" + value);\n\n});<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<p>0 ITviec<\/p>\n\n\n\n<p>1 jQuery<\/p>\n\n\n\n<p>2 Questions<\/p>\n\n\n\n<p>Ch\u00fang ta c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng each() \u0111\u1ec3 duy\u1ec7t qua c\u00e1c c\u1eb7p key-value trong object:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var obj = {\"name\": \"ITviec\", \"type\": \"jQuery\"};\n\n$.each(obj, function(key, value){\n\n\u00a0\u00a0\u00a0\u00a0console.log(key + \" - \" + value);\n\n});<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:&nbsp;<\/p>\n\n\n\n<p>name &#8211; ITviec&nbsp;<\/p>\n\n\n\n<p>type &#8211; jQuery<\/p>\n\n\n\n<p>Tuy nhi\u00ean, c\u0169ng c\u1ea7n l\u01b0u \u00fd r\u1eb1ng trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p, v\u00f2ng l\u1eb7p for th\u00f4ng th\u01b0\u1eddng c\u00f3 th\u1ec3 nhanh h\u01a1n each() khi x\u1eed l\u00fd l\u01b0\u1ee3ng d\u1eef li\u1ec7u l\u1edbn.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc chi ti\u1ebft: <strong><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-each-jquery\/\" target=\"_blank\" rel=\"noreferrer noopener\">each jQuery: C\u00fa ph\u00e1p, v\u00ed d\u1ee5, l\u1ed7i th\u01b0\u1eddng g\u1eb7p<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-jquery-co-ho\u1ea1t-d\u1ed9ng-v\u1edbi-c\u1ea3-tai-li\u1ec7u-html-va-xml-khong\"><strong>jQuery c\u00f3 ho\u1ea1t \u0111\u1ed9ng v\u1edbi c\u1ea3 t\u00e0i li\u1ec7u HTML v\u00e0 XML kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>C\u00f3, jQuery ho\u1ea1t \u0111\u1ed9ng v\u1edbi c\u1ea3 t\u00e0i li\u1ec7u HTML v\u00e0 XML. Th\u01b0 vi\u1ec7n n\u00e0y cung c\u1ea5p m\u1ed9t API th\u1ed1ng nh\u1ea5t \u0111\u1ec3 duy\u1ec7t v\u00e0 thao t\u00e1c v\u1edbi c\u1ea3 hai c\u1ea5u tr\u00fac t\u00e0i li\u1ec7u.<\/p>\n\n\n\n<p>jQuery s\u1eed d\u1ee5ng c\u00e1c b\u1ed9 ch\u1ecdn (selectors) v\u00e0 ph\u01b0\u01a1ng th\u1ee9c nh\u01b0 .find(), .text(), v\u00e0 .attr() \u0111\u1ec3 truy c\u1eadp c\u00e1c ph\u1ea7n t\u1eed trong c\u1ea3 t\u00e0i li\u1ec7u HTML l\u1eabn XML.<\/p>\n\n\n\n<p>Tuy nhi\u00ean, v\u1edbi t\u00e0i li\u1ec7u XML, jQuery x\u1eed l\u00fd ch\u00fang nh\u01b0 m\u1ed9t c\u1ea5u tr\u00fac c\u00e2y t\u1ed5ng qu\u00e1t (generic tree), cho ph\u00e9p duy\u1ec7t qua c\u00e1c th\u1ebb v\u00e0 thu\u1ed9c t\u00ednh XML theo c\u00e1ch t\u01b0\u01a1ng t\u1ef1 nh\u01b0 v\u1edbi c\u00e1c ph\u1ea7n t\u1eed HTML.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-jquery-la-th\u01b0-vi\u1ec7n-javascript-hay-json\"><strong>jQuery l\u00e0 th\u01b0 vi\u1ec7n JavaScript hay JSON?<\/strong><\/h3>\n\n\n\n<p>jQuery l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n JavaScript, kh\u00f4ng ph\u1ea3i l\u00e0 th\u01b0 vi\u1ec7n JSON.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JavaScript: jQuery \u0111\u01b0\u1ee3c vi\u1ebft b\u1eb1ng JavaScript v\u00e0 d\u00f9ng \u0111\u1ec3 thao t\u00e1c v\u1edbi HTML c\u0169ng nh\u01b0 t\u01b0\u01a1ng t\u00e1c v\u1edbi DOM (Document Object Model) b\u1eb1ng c\u00fa ph\u00e1p JavaScript.<\/li>\n\n\n\n<li>JSON: JSON l\u00e0 m\u1ed9t \u0111\u1ecbnh d\u1ea1ng d\u1eef li\u1ec7u d\u00f9ng \u0111\u1ec3 truy\u1ec1n v\u00e0 l\u01b0u tr\u1eef th\u00f4ng tin \u1edf d\u1ea1ng d\u1ec5 \u0111\u1ecdc v\u1edbi c\u1ea3 con ng\u01b0\u1eddi v\u00e0 m\u00e1y. jQuery kh\u00f4ng ph\u1ea3i l\u00e0 th\u01b0 vi\u1ec7n JSON, nh\u01b0ng c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 l\u00e0m vi\u1ec7c v\u1edbi d\u1eef li\u1ec7u JSON, ch\u1eb3ng h\u1ea1n nh\u01b0 ph\u00e2n t\u00edch (parse) d\u1eef li\u1ec7u ho\u1eb7c g\u1eedi y\u00eau c\u1ea7u Ajax.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-function-trong-jquery-nghia-la-gi\"><strong>$()function trong jQuery ngh\u0129a l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>$()function \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 truy c\u1eadp v\u00e0o c\u00e1c ph\u1ea7n t\u1eed c\u1ee7a ph\u1ea7n t\u1eed trong DOM (Document Object Model) v\u00e0 chuy\u1ec3n \u0111\u1ed5i ch\u00fang th\u00e0nh \u0111\u1ed1i t\u01b0\u1ee3ng jQuery. $()function t\u01b0\u01a1ng t\u1ef1 nh\u01b0 c\u00e1c h\u00e0m ch\u1ecdn ph\u1ea7n t\u1eed trong JavaScript thu\u1ea7n, nh\u01b0ng m\u1ea1nh m\u1ebd h\u01a1n v\u00e0 cung c\u1ea5p nhi\u1ec1u t\u00f9y ch\u1ecdn h\u01a1n.<\/p>\n\n\n\n<p>$ th\u1ef1c ch\u1ea5t l\u00e0 alias (b\u00ed danh) c\u1ee7a jQuery, v\u00ec v\u1eady<strong> $() v\u00e0 jQuery() l\u00e0 ho\u00e0n to\u00e0n gi\u1ed1ng nhau<\/strong>. Ch\u00fang ta c\u00f3 th\u1ec3 d\u00f9ng $()function \u0111\u1ec3 truy c\u1eadp v\u00e0o c\u00e1c thu\u1ed9c t\u00ednh nh\u01b0: attribute, class, id, c\u00e1c thu\u1ed9c t\u00ednh data v\u00e0 nhi\u1ec1u th\u00e0nh ph\u1ea7n kh\u00e1c trong HTML.<\/p>\n\n\n\n<p>Gi\u1ea3 s\u1eed n\u1ebfu mu\u1ed1n thay \u0111\u1ed5i m\u00e0u n\u1ec1n c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c ti\u00eau \u0111\u1ec1 &lt;h1&gt; th\u00e0nh m\u00e0u xanh l\u00e1 c\u00e2y, ch\u00fang ta c\u00f3 th\u1ec3 l\u00e0m \u0111i\u1ec1u \u0111\u00f3 v\u1edbi jQuery nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(document).ready(function() {\u00a0\u00a0\n\n\u00a0\u00a0\u00a0$(\"h1\").css(\"background-color\", \"green\");\u00a0\u00a0\n\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gi\u1ea3i-thich-v\u1ec1-document-ready-function\"><strong>Gi\u1ea3i th\u00edch v\u1ec1 $(document).ready() function<\/strong><\/h3>\n\n\n\n<p>H\u00e0m $(document).ready() l\u00e0 m\u1ed9t event handler (x\u1eed l\u00fd s\u1ef1 ki\u1ec7n) c\u1ee7a jQuery cho ph\u00e9p b\u1ea1n th\u1ef1c thi m\u00e3 ngay khi t\u00e0i li\u1ec7u (document) \u0111\u00e3 s\u1eb5n s\u00e0ng. \u0110\u00e2y l\u00e0 ph\u01b0\u01a1ng th\u1ee9c th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 kh\u1edfi t\u1ea1o trang m\u1edbi ho\u1eb7c \u0111\u1ec3 t\u1ea3i c\u00e1c t\u1eadp l\u1ec7nh (script) ho\u1eb7c ki\u1ec3u d\u00e1ng (style) v\u00e0o t\u00e0i li\u1ec7u.<\/p>\n\n\n\n<p>H\u00e0m $(document).ready() \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch khi b\u1ea1n mu\u1ed1n \u0111\u1ea3m b\u1ea3o th\u00e0nh ph\u1ea7n DOM \u0111\u00e3 t\u1ed3n t\u1ea1i tr\u01b0\u1edbc khi thao t\u00e1c v\u1edbi ch\u00fang. \u0110\u00e2y l\u00e0 pattern (m\u1eabu) ph\u1ed5 bi\u1ebfn nh\u1ea5t khi l\u00e0m vi\u1ec7c v\u1edbi jQuery.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-s\u1ef1-khac-bi\u1ec7t-gi\u1eefa-ph\u01b0\u01a1ng-th\u1ee9c-onload-va-document-ready-la-gi\"><strong>S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa ph\u01b0\u01a1ng th\u1ee9c onload() v\u00e0 document.ready() l\u00e0 g\u00ec<\/strong><\/h3>\n\n\n\n<p>C\u00e1c ph\u01b0\u01a1ng th\u1ee9c onload() v\u00e0 $(document).ready() \u0111\u1ec1u \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea3i th\u1ef1c thi code khi trang web \u0111\u01b0\u1ee3c t\u1ea3i, nh\u01b0ng ch\u00fang kh\u00e1c nhau v\u1ec1 th\u1eddi \u0111i\u1ec3m k\u00edch ho\u1ea1t:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>onload() ch\u1ec9 th\u1ef1c thi sau khi to\u00e0n b\u1ed9 trang, bao g\u1ed3m c\u1ea3 h\u00ecnh \u1ea3nh, video, iframe&#8230; \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i xong ho\u00e0n to\u00e0n.<\/li>\n\n\n\n<li>Trong khi \u0111\u00f3, $(document).ready() s\u1ebd ch\u1ea1y ngay khi c\u00e2y DOM \u0111\u00e3 \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o xong, kh\u00f4ng c\u1ea7n ch\u1edd c\u00e1c t\u00e0i nguy\u00ean ph\u1ee5 t\u1ea3i ho\u00e0n t\u1ea5t.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>onload()<\/strong><\/td><td><strong>document.ready()<\/strong><\/td><\/tr><tr><td>\u0110\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea3i m\u00e3 HTML.<\/td><td>\u0110\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea3i m\u00e3 JavaScript.<\/td><\/tr><tr><td>T\u1ea3i m\u00e3 HTML b\u1eb1ng \u0111\u1ed1i t\u01b0\u1ee3ng (object) \u0111\u01b0\u1ee3c bi\u00ean d\u1ecbch tr\u01b0\u1edbc khi \u0111\u01b0\u1ee3c truy\u1ec1n \u0111\u1ebfn tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n onload.<\/td><td>T\u1ea3i m\u00e3 JavaScript b\u1eb1ng \u0111\u1ed1i t\u01b0\u1ee3ng \u0111\u01b0\u1ee3c bi\u00ean d\u1ecbch tr\u01b0\u1edbc \u0111\u01b0\u1ee3c truy\u1ec1n \u0111\u1ebfn tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n document.ready.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-function-nao-c\u1ee7a-jquery-d\u01b0\u1ee3c-s\u1eed-d\u1ee5ng-d\u1ec3-t\u1ea1o-hi\u1ec7u-\u1ee9ng-effects\"><strong>Function n\u00e0o c\u1ee7a jQuery \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng (effects)<\/strong><\/h3>\n\n\n\n<p>M\u1ed9t s\u1ed1 ph\u01b0\u01a1ng th\u1ee9c \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng (effect) trong jQuery c\u00f3 th\u1ec3 k\u1ec3 \u0111\u1ebfn nh\u01b0:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>toggle()<\/strong><\/li>\n<\/ol>\n\n\n\n<p>Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y d\u00f9ng \u0111\u1ec3 ki\u1ec3m tra tr\u1ea1ng th\u00e1i hi\u1ec3n th\u1ecb c\u1ee7a ph\u1ea7n t\u1eed v\u00e0 chuy\u1ec3n \u0111\u1ed5i gi\u1eefa hide() v\u00e0 show():<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Khi ph\u1ea7n t\u1eed \u0111ang \u1ea9n, show() s\u1ebd \u0111\u01b0\u1ee3c th\u1ef1c thi.<\/li>\n\n\n\n<li>Khi ph\u1ea7n t\u1eed \u0111ang hi\u1ec3n th\u1ecb, hide() s\u1ebd \u0111\u01b0\u1ee3c th\u1ef1c thi.<\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(selector).toggle(speed, easing, callback)<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>slidedown()<\/strong><\/li>\n<\/ol>\n\n\n\n<p>Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c ph\u1ea7n t\u1eed \u0111ang b\u1ecb \u1ea9n v\u1edbi hi\u1ec7u \u1ee9ng tr\u01b0\u1ee3t t\u1eeb tr\u00ean xu\u1ed1ng. \u00c1p d\u1ee5ng \u0111\u01b0\u1ee3c cho c\u00e1c ph\u1ea7n t\u1eed b\u1ecb \u1ea9n do:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>S\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c jQuery (v\u00ed d\u1ee5: .hide()),<\/li>\n\n\n\n<li>CSS c\u00f3 display: none.<\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(selector).slideDown(speed, easing, callback)<\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>fadeOut()<\/strong><\/li>\n<\/ol>\n\n\n\n<p>D\u00f9ng \u0111\u1ec3 gi\u1ea3m d\u1ea7n \u0111\u1ed9 m\u1edd (opacity) c\u1ee7a ph\u1ea7n t\u1eed t\u1eeb tr\u1ea1ng th\u00e1i hi\u1ec3n th\u1ecb sang \u1ea9n \u0111i ho\u00e0n to\u00e0n. Sau khi \u1ea9n, ph\u1ea7n t\u1eed s\u1ebd kh\u00f4ng chi\u1ebfm kh\u00f4ng gian tr\u00ean DOM n\u1eefa.<\/p>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(selector).fadeOut(speed, easing, callback)<\/code><\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>fadeToggle()<\/strong><\/li>\n<\/ol>\n\n\n\n<p>\u0110\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i gi\u1eefa fadeIn() v\u00e0 fadeOut().<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>N\u1ebfu ph\u1ea7n t\u1eed \u0111ang hi\u1ec3n th\u1ecb (\u0111\u00e3 fadeIn), fadeToggle() s\u1ebd th\u1ef1c hi\u1ec7n fadeOut().<\/li>\n\n\n\n<li>N\u1ebfu ph\u1ea7n t\u1eed \u0111ang \u1ea9n, fadeToggle() s\u1ebd th\u1ef1c hi\u1ec7n fadeIn().<\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(selector).fadeToggle(speed, easing, callback)<\/code><\/pre>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><strong>animate()<\/strong><\/li>\n<\/ol>\n\n\n\n<p>Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 t\u1ea1o ho\u1ea1t \u1ea3nh t\u00f9y ch\u1ec9nh b\u1eb1ng c\u00e1ch thay \u0111\u1ed5i gi\u00e1 tr\u1ecb c\u1ee7a c\u00e1c thu\u1ed9c t\u00ednh CSS m\u1ed9t c\u00e1ch t\u1eeb t\u1eeb, t\u1ea1o hi\u1ec7u \u1ee9ng \u0111\u1ed9ng.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tr\u01b0\u1eddng styles l\u00e0 b\u1eaft bu\u1ed9c, khai b\u00e1o c\u00e1c thu\u1ed9c t\u00ednh CSS c\u1ea7n \u0111\u01b0\u1ee3c animate (vi\u1ebft theo camelCase).<\/li>\n\n\n\n<li>C\u00e1c tham s\u1ed1 speed, easing v\u00e0 callback l\u00e0 t\u00f9y ch\u1ecdn.<\/li>\n<\/ul>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(selector).animate({styles}, speed, easing, callback)<\/code><\/pre>\n\n\n\n<p>Gi\u1ea3i th\u00edch c\u00e1c tham s\u1ed1 chung:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>speed: Tham s\u1ed1 t\u00f9y ch\u1ecdn, ch\u1ec9 t\u1ed1c \u0111\u1ed9 th\u1ef1c hi\u1ec7n hi\u1ec7u \u1ee9ng. C\u00e1c gi\u00e1 tr\u1ecb c\u00f3 th\u1ec3 d\u00f9ng: &#8220;slow&#8221;, &#8220;fast&#8221; ho\u1eb7c m\u1ed9t s\u1ed1 c\u1ee5 th\u1ec3 (\u0111\u01a1n v\u1ecb: milliseconds). M\u1eb7c \u0111\u1ecbnh: 400ms.<\/li>\n\n\n\n<li>easing: Tham s\u1ed1 t\u00f9y ch\u1ecdn, x\u00e1c \u0111\u1ecbnh ki\u1ec3u chuy\u1ec3n \u0111\u1ed9ng. C\u00e1c gi\u00e1 tr\u1ecb ph\u1ed5 bi\u1ebfn: &#8220;swing&#8221; (m\u1eb7c \u0111\u1ecbnh) v\u00e0 &#8220;linear&#8221;.<\/li>\n\n\n\n<li>callback: H\u00e0m \u0111\u01b0\u1ee3c g\u1ecdi sau khi hi\u1ec7u \u1ee9ng k\u1ebft th\u00fac. \u0110\u00e2y c\u0169ng l\u00e0 tham s\u1ed1 t\u00f9y ch\u1ecdn.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-b\u1ed9-ch\u1ecdn-selector-trong-jquery-la-gi-co-bao-nhieu-lo\u1ea1i-b\u1ed9-ch\u1ecdn-trong-jquery\"><strong>B\u1ed9 ch\u1ecdn (selector) trong jQuery l\u00e0 g\u00ec? C\u00f3 bao nhi\u00eau lo\u1ea1i b\u1ed9 ch\u1ecdn trong jQuery?<\/strong><\/h3>\n\n\n\n<p>\u0110\u1ec3 thao t\u00e1c v\u1edbi b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed n\u00e0o tr\u00ean trang web, tr\u01b0\u1edbc ti\u00ean c\u1ea7n t\u00ecm ra ch\u00fang. Trong jQuery, selectors (b\u1ed9 ch\u1ecdn) \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 t\u00ecm v\u00e0 thao t\u00e1c v\u1edbi c\u00e1c ph\u1ea7n t\u1eed HTML. Ch\u00fang s\u1eed d\u1ee5ng c\u00fa ph\u00e1p gi\u1ed1ng nh\u01b0 <a href=\"https:\/\/itviec.com\/blog\/css-selector\/\">CSS selectors<\/a>, k\u1ebft h\u1ee3p v\u1edbi m\u1ed9t s\u1ed1 b\u1ed9 ch\u1ecdn m\u1edf r\u1ed9ng ri\u00eang c\u1ee7a jQuery.<\/p>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 b\u1ed9 ch\u1ecdn c\u01a1 b\u1ea3n v\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t trong jQuery:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Theo t\u00ean th\u1ebb (Element): <\/strong>Ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed c\u00f3 t\u00ean th\u1ebb tr\u00f9ng kh\u1edbp. V\u00ed d\u1ee5: $(&#8220;div&#8221;) s\u1ebd ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c th\u1ebb &lt;div&gt;.<\/li>\n\n\n\n<li><strong>Theo ID (#ID):<\/strong> Ch\u1ecdn m\u1ed9t ph\u1ea7n t\u1eed duy nh\u1ea5t v\u1edbi ID \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh. V\u00ed d\u1ee5: $(&#8220;#header&#8221;) s\u1ebd ch\u1ecdn ph\u1ea7n t\u1eed c\u00f3 id=&#8221;header&#8221;.<\/li>\n\n\n\n<li><strong>Theo class (.Class):<\/strong> Ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed c\u00f3 class c\u1ee5 th\u1ec3. V\u00ed d\u1ee5: $(&#8220;.menu-item&#8221;) s\u1ebd ch\u1ecdn t\u1ea5t c\u1ea3 ph\u1ea7n t\u1eed c\u00f3 class=&#8221;menu-item&#8221;.<\/li>\n\n\n\n<li><strong>B\u1ed9 ch\u1ecdn to\u00e0n c\u1ee5c (*):<\/strong> Ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed trong DOM. V\u00ed d\u1ee5: $(&#8220;*&#8221;) s\u1ebd ch\u1ecdn m\u1ecdi ph\u1ea7n t\u1eed tr\u00ean trang. Tuy nhi\u00ean n\u00ean tr\u00e1nh s\u1eed d\u1ee5ng b\u1ed9 ch\u1ecdn n\u00e0y v\u00ec c\u00f3 th\u1ec3 g\u00e2y \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn hi\u1ec7u su\u1ea5t.<\/li>\n\n\n\n<li><strong>B\u1ed9 ch\u1ecdn nhi\u1ec1u ph\u1ea7n t\u1eed (E, F, G):<\/strong> Ch\u1ecdn t\u1eadp h\u1ee3p c\u00e1c ph\u1ea7n t\u1eed t\u1eeb nhi\u1ec1u b\u1ed9 ch\u1ecdn kh\u00e1c nhau. V\u00ed d\u1ee5: $(&#8220;h1, p, .highlight&#8221;) s\u1ebd ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c th\u1ebb &lt;h1&gt;, &lt;p&gt;, v\u00e0 c\u00e1c ph\u1ea7n t\u1eed c\u00f3 class highlight.<\/li>\n\n\n\n<li><strong>B\u1ed9 ch\u1ecdn theo thu\u1ed9c t\u00ednh (Attribute Selector): <\/strong>Ch\u1ecdn c\u00e1c ph\u1ea7n t\u1eed d\u1ef1a tr\u00ean gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh. V\u00ed d\u1ee5: $(&#8216;[type=&#8221;text&#8221;]&#8217;) s\u1ebd ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed c\u00f3 thu\u1ed9c t\u00ednh type=&#8221;text&#8221;.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc chi ti\u1ebft: <strong><a href=\"https:\/\/itviec.com\/blog\/jquery-selector-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">jQuery Selector l\u00e0 g\u00ec: C\u00e1ch d\u00f9ng 7 selector ph\u1ed5 bi\u1ebfn<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gi\u1ea3i-thich-cach-thao-tac-v\u1edbi-css-class-trong-html-b\u1eb1ng-jquery\"><strong>Gi\u1ea3i th\u00edch c\u00e1ch thao t\u00e1c v\u1edbi CSS class trong HTML b\u1eb1ng jQuery.<\/strong><\/h3>\n\n\n\n<p>jQuery cung c\u1ea5p nhi\u1ec1u ph\u01b0\u01a1ng th\u1ee9c \u0111\u1ec3 thao t\u00e1c v\u1edbi class CSS \u0111\u01b0\u1ee3c g\u00e1n cho c\u00e1c ph\u1ea7n t\u1eed HTML. 4 ph\u01b0\u01a1ng th\u1ee9c quan tr\u1ecdng nh\u1ea5t l\u00e0: addClass(), removeClass(), toggleClass() v\u00e0 hasClass().<\/p>\n\n\n\n<p><strong>addClass():<\/strong> Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y d\u00f9ng \u0111\u1ec3 th\u00eam m\u1ed9t ho\u1eb7c nhi\u1ec1u class v\u00e0o c\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c ch\u1ecdn.&nbsp;<\/p>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(selector).addClass(\"className\");<\/code><\/pre>\n\n\n\n<p>B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 th\u00eam nhi\u1ec1u class c\u00f9ng l\u00fac v\u1edbi c\u00fa ph\u00e1p: $(selector).addClass(&#8220;class1 class2&#8221;);<\/p>\n\n\n\n<p><strong>removeClass():<\/strong> T\u01b0\u01a1ng t\u1ef1 nh\u01b0 addClass(), ph\u01b0\u01a1ng th\u1ee9c removeClass() d\u00f9ng \u0111\u1ec3 x\u00f3a m\u1ed9t, nhi\u1ec1u ho\u1eb7c to\u00e0n b\u1ed9 class kh\u1ecfi ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c ch\u1ecdn.&nbsp;<\/p>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>X\u00f3a m\u1ed9t class:<\/strong> $(selector).removeClass(&#8220;class1&#8221;);<\/li>\n\n\n\n<li><strong>X\u00f3a nhi\u1ec1u class<\/strong><strong>:<\/strong> $(selector).removeClass(&#8220;class1 class2 class3&#8221;);<\/li>\n\n\n\n<li><strong>X\u00f3a t\u1ea5t c\u1ea3 c\u00e1c class: <\/strong>$(selector).removeClass();<\/li>\n<\/ul>\n\n\n\n<p><strong>toggleClass()<\/strong>: Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y d\u00f9ng \u0111\u1ec3 th\u00eam class n\u1ebfu ph\u1ea7n t\u1eed ch\u01b0a c\u00f3, ho\u1eb7c x\u00f3a class n\u1ebfu ph\u1ea7n t\u1eed \u0111\u00e3 c\u00f3. N\u00f3i c\u00e1ch kh\u00e1c, n\u00f3 gi\u00fap chuy\u1ec3n \u0111\u1ed5i tr\u1ea1ng th\u00e1i c\u1ee7a class.&nbsp;<\/p>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(selector).toggleClass(\"className\");<\/code><\/pre>\n\n\n\n<p>V\u00ed d\u1ee5:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(\"#button\").click(function(){\n\n\u00a0\u00a0$(\"#box\").toggleClass(\"highlight\");\n\n});<\/code><\/pre>\n\n\n\n<p>Trong v\u00ed d\u1ee5 tr\u00ean, m\u1ed7i l\u1ea7n click v\u00e0o #button, ph\u1ea7n t\u1eed #box s\u1ebd \u0111\u01b0\u1ee3c th\u00eam ho\u1eb7c x\u00f3a class highlight t\u00f9y v\u00e0o tr\u1ea1ng th\u00e1i hi\u1ec7n t\u1ea1i.<\/p>\n\n\n\n<p><strong>hasClass(): <\/strong>Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y ki\u1ec3m tra xem ph\u1ea7n t\u1eed c\u00f3 ch\u1ee9a class c\u1ee5 th\u1ec3 hay kh\u00f4ng, tr\u1ea3 v\u1ec1 gi\u00e1 tr\u1ecb true ho\u1eb7c false.&nbsp;<\/p>\n\n\n\n<p>C\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>javascript$(selector).hasClass(\"className\");<\/code><\/pre>\n\n\n\n<p>V\u00ed d\u1ee5 th\u1ef1c t\u1ebf:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(\"#button\").click(function(){\n\n\u00a0\u00a0\u00a0\u00a0\/\/ Toggle class highlight\n\u00a0\u00a0\u00a0\u00a0$(\"#box\").toggleClass(\"highlight\");\n\n\u00a0\u00a0\u00a0\u00a0\/\/ Ki\u1ec3m tra v\u00e0 th\u1ef1c hi\u1ec7n h\u00e0nh \u0111\u1ed9ng t\u01b0\u01a1ng \u1ee9ng\n\u00a0\u00a0\u00a0\u00a0if ($(\"#box\").hasClass(\"highlight\")) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(\"Box is highlighted\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(this).text(\"Remove Highlight\");\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(\"Box is not highlighted\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(this).text(\"Add Highlight\");\n\u00a0\u00a0\u00a0\u00a0}\n});\n\n\/\/ Th\u00eam class v\u1edbi animation\n$(\".card\").hover(\n\u00a0\u00a0\u00a0\u00a0function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(this).addClass(\"hover-effect\");\n\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(this).removeClass(\"hover-effect\");\n\u00a0\u00a0\u00a0\u00a0}\n);<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cau-h\u1ecfi-ph\u1ecfng-v\u1ea5n-jquery-ph\u1ed5-bi\u1ebfn-danh-cho-middle\"><span class=\"ez-toc-section\" id=\"Cau_hoi_phong_van_jQuery_pho_bien_danh_cho_Middle\"><\/span><strong>C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery ph\u1ed5 bi\u1ebfn d\u00e0nh cho Middle<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-co-con-nen-dung-jquery-n\u1ebfu-tac-v\u1ee5-co-th\u1ec3-d\u01b0\u1ee3c-x\u1eed-ly-b\u1eb1ng-javascript-thu\u1ea7n\"><strong>C\u00f3 c\u00f2n n\u00ean d\u00f9ng jQuery n\u1ebfu t\u00e1c v\u1ee5 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1eb1ng JavaScript thu\u1ea7n?<\/strong><\/h3>\n\n\n\n<p>Kh\u00f4ng n\u00ean, tr\u1eeb khi th\u1eadt s\u1ef1 c\u1ea7n thi\u1ebft. N\u1ebfu m\u1ed9t t\u00e1c v\u1ee5 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c x\u1eed l\u00fd b\u1eb1ng JavaScript thu\u1ea7n, th\u00ec n\u00ean \u01b0u ti\u00ean d\u00f9ng JavaScript thay v\u00ec jQuery. L\u00fd do:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Th\u01b0 vi\u1ec7n jQuery lu\u00f4n c\u00f3 k\u00edch th\u01b0\u1edbc v\u00e0i ch\u1ee5c kilobytes, \u0111i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 g\u00e2y l\u00e3ng ph\u00ed b\u0103ng th\u00f4ng kh\u00f4ng c\u1ea7n thi\u1ebft, \u0111\u1eb7c bi\u1ec7t trong c\u00e1c d\u1ef1 \u00e1n nh\u1ecf ho\u1eb7c nh\u1eefng t\u00e1c v\u1ee5 \u0111\u01a1n gi\u1ea3n.<\/li>\n\n\n\n<li>jQuery \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng tr\u00ean n\u1ec1n JavaScript, n\u00ean nhi\u1ec1u ch\u1ee9c n\u0103ng trong jQuery th\u1ef1c ch\u1ea5t ch\u1ec9 l\u00e0 c\u00e1c thao t\u00e1c \u0111\u01a1n gi\u1ea3n m\u00e0 b\u1ea1n ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n d\u1ec5 d\u00e0ng b\u1eb1ng JavaScript thu\u1ea7n v\u00e0 nhanh h\u01a1n, nh\u1eb9 h\u01a1n.<\/li>\n\n\n\n<li>Vi\u1ec7c t\u1ea3i jQuery c\u0169ng s\u1ebd g\u00e2y th\u00eam \u0111\u1ed9 tr\u1ec5, v\u00ec n\u00f3 bao g\u1ed3m nhi\u1ec1u t\u00ednh n\u0103ng v\u00e0 ph\u1ee5 thu\u1ed9c kh\u00f4ng c\u1ea7n thi\u1ebft cho nh\u1eefng c\u00f4ng vi\u1ec7c nh\u1ecf. So v\u1edbi JavaScript thu\u1ea7n, jQuery c\u00f3 th\u1ec3 g\u1eb7p v\u1ea5n \u0111\u1ec1 v\u1ec1 hi\u1ec7u su\u1ea5t trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p c\u1ee5 th\u1ec3.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-l\u1ee3i-ich-c\u1ee7a-vi\u1ec7c-s\u1eed-d\u1ee5ng-jquery-thay-vi-javascript-trong-\u1ee9ng-d\u1ee5ng-web-asp-net-la-gi\"><strong>L\u1ee3i \u00edch c\u1ee7a vi\u1ec7c s\u1eed d\u1ee5ng jQuery thay v\u00ec Javascript trong \u1ee9ng d\u1ee5ng web Asp.net l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 l\u1ee3i \u00edch khi s\u1eed d\u1ee5ng jQuery thay v\u00ec JavaScript thu\u1ea7n trong \u1ee9ng d\u1ee5ng web ASP.NET:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>jQuery l\u00e0 m\u00e3 JavaScript \u0111\u00e3 \u0111\u01b0\u1ee3c vi\u1ebft s\u1eb5n v\u00e0 t\u1ed1i \u01b0u h\u00f3a t\u1ed1t, v\u00ec v\u1eady n\u00f3 s\u1ebd th\u1ef1c thi nhanh h\u01a1n, tr\u1eeb khi b\u1ea1n t\u1ef1 vi\u1ebft \u0111\u01b0\u1ee3c m\u00e3 JavaScript thu\u1ea7n v\u1edbi c\u00f9ng m\u1ee9c \u0111\u1ed9 t\u1ed1i \u01b0u.<\/li>\n\n\n\n<li>jQuery s\u00fac t\u00edch v\u00e0 ng\u1eafn g\u1ecdn, ch\u00fang ta c\u00f3 th\u1ec3 vi\u1ebft \u00edt d\u00f2ng m\u00e3 h\u01a1n \u0111\u1ec3 th\u1ef1c hi\u1ec7n c\u00f9ng m\u1ed9t ch\u1ee9c n\u0103ng so v\u1edbi JavaScript thu\u1ea7n.<\/li>\n\n\n\n<li>jQuery gi\u00fap t\u0103ng t\u1ed1c qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n JavaScript, v\u00ec ph\u1ea7n l\u1edbn c\u00e1c ch\u1ee9c n\u0103ng th\u00f4ng d\u1ee5ng \u0111\u00e3 \u0111\u01b0\u1ee3c cung c\u1ea5p s\u1eb5n trong th\u01b0 vi\u1ec7n, ch\u1ec9 c\u1ea7n g\u1ecdi v\u00e0 s\u1eed d\u1ee5ng thay v\u00ec ph\u1ea3i vi\u1ebft l\u1ea1i t\u1eeb \u0111\u1ea7u.<\/li>\n\n\n\n<li>jQuery h\u1ed7 tr\u1ee3 kh\u1ea3 n\u0103ng t\u01b0\u01a1ng th\u00edch tr\u00ecnh duy\u1ec7t (cross-browser compatibility), gi\u00fap ti\u1ebft ki\u1ec7m th\u1eddi gian \u0111\u00e1ng k\u1ec3 trong vi\u1ec7c x\u1eed l\u00fd s\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa c\u00e1c tr\u00ecnh duy\u1ec7t web.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-event-stoppropagation-la-gi\"><strong>event.stopPropagation() l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>Ph\u01b0\u01a1ng th\u1ee9c event.stopPropagation() d\u00f9ng \u0111\u1ec3 ng\u0103n s\u1ef1 ki\u1ec7n lan truy\u1ec1n l\u00ean c\u00e2y DOM (event bubbling) ho\u1eb7c xu\u1ed1ng c\u00e2y DOM (event capturing), t\u1ee9c l\u00e0 ng\u0103n c\u00e1c ph\u1ea7n t\u1eed cha nh\u1eadn \u0111\u01b0\u1ee3c th\u00f4ng b\u00e1o v\u1ec1 s\u1ef1 ki\u1ec7n \u0111\u00f3. \u0110i\u1ec1u n\u00e0y gi\u00fap ki\u1ec3m so\u00e1t vi\u1ec7c x\u1eed l\u00fd s\u1ef1 ki\u1ec7n, tr\u00e1nh c\u00e1c h\u00e0nh vi kh\u00f4ng mong mu\u1ed1n do s\u1ef1 ki\u1ec7n &#8220;bong b\u00f3ng&#8221; l\u00ean c\u00e1c ph\u1ea7n t\u1eed cha.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5: n\u1ebfu m\u1ed9t th\u1ebb &lt;a&gt; c\u00f3 g\u1eafn s\u1ef1 ki\u1ec7n click n\u1eb1m b\u00ean trong m\u1ed9t th\u1ebb &lt;div&gt; ho\u1eb7c &lt;form&gt; c\u0169ng c\u00f3 s\u1ef1 ki\u1ec7n click, th\u00ec khi b\u1ea1n g\u1ecdi event.stopPropagation() trong h\u00e0m x\u1eed l\u00fd s\u1ef1 ki\u1ec7n c\u1ee7a th\u1ebb &lt;a&gt;, s\u1ef1 ki\u1ec7n s\u1ebd kh\u00f4ng ti\u1ebfp t\u1ee5c lan l\u00ean, v\u00e0 do \u0111\u00f3 h\u00e0m x\u1eed l\u00fd c\u1ee7a &lt;div&gt; ho\u1eb7c &lt;form&gt; s\u1ebd kh\u00f4ng \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gi\u1ea3i-thich-cach-s\u1eed-d\u1ee5ng-ph\u01b0\u01a1ng-th\u1ee9c-event-preventdefault\"><strong>Gi\u1ea3i th\u00edch c\u00e1ch s\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c event.preventDefault().<\/strong><\/h3>\n\n\n\n<p>event.preventDefault() l\u00e0 m\u1ed9t ph\u01b0\u01a1ng th\u1ee9c trong jQuery d\u00f9ng \u0111\u1ec3 ng\u0103n ch\u1eb7n h\u00e0nh vi m\u1eb7c \u0111\u1ecbnh c\u1ee7a m\u1ed9t s\u1ef1 ki\u1ec7n, ch\u1eb3ng h\u1ea1n nh\u01b0 khi ng\u01b0\u1eddi d\u00f9ng nh\u1ea5p v\u00e0o m\u1ed9t li\u00ean k\u1ebft ho\u1eb7c m\u1ed9t th\u00e0nh ph\u1ea7n k\u00edch ho\u1ea1t kh\u00e1c.<\/p>\n\n\n\n<p>N\u00f3 ho\u1ea1t \u0111\u1ed9ng b\u1eb1ng c\u00e1ch ng\u0103n s\u1ef1 ki\u1ec7n m\u1eb7c \u0111\u1ecbnh \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t, cho ph\u00e9p b\u1ea1n ki\u1ec3m so\u00e1t ho\u00e0n to\u00e0n nh\u1eefng h\u00e0nh \u0111\u1ed9ng kh\u00e1c di\u1ec5n ra sau \u0111\u00f3. \u0110\u00e2y l\u00e0 ph\u01b0\u01a1ng ph\u00e1p h\u1eefu \u00edch khi b\u1ea1n mu\u1ed1n tr\u00e1nh c\u00e1c h\u00e0nh vi kh\u00f4ng mong mu\u1ed1n, ch\u1eb3ng h\u1ea1n nh\u01b0 m\u1edf li\u00ean k\u1ebft trong tab m\u1edbi khi ng\u01b0\u1eddi d\u00f9ng v\u00f4 t\u00ecnh nh\u1ea5p v\u00e0o.<\/p>\n\n\n\n<p>Khi s\u1eed d\u1ee5ng c\u00e1c s\u1ef1 ki\u1ec7n nh\u01b0 click ho\u1eb7c keypress, b\u1ea1n c\u00f3 th\u1ec3 ch\u1eb7n h\u00e0nh vi m\u1eb7c \u0111\u1ecbnh b\u1eb1ng c\u00e1ch th\u00eam event.preventDefault() v\u00e0o trong h\u00e0m x\u1eed l\u00fd s\u1ef1 ki\u1ec7n.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>L\u01b0u \u00fd: preventDefault() l\u00e0 DOM API native, c\u00f3 t\u1eeb jQuery 1.0 v\u00e0 c\u1ea3 vanilla JavaScript.<\/p>\n<\/blockquote>\n\n\n\n<p>V\u00ed d\u1ee5: Gi\u1ea3 s\u1eed x\u00e2y d\u1ef1ng m\u1ed9t \u1ee9ng d\u1ee5ng AJAX, trong \u0111\u00f3 d\u1eef li\u1ec7u form c\u1ea7n \u0111\u01b0\u1ee3c g\u1eedi \u0111i th\u00f4ng qua AJAX khi ng\u01b0\u1eddi d\u00f9ng nh\u1ea5p v\u00e0o n\u00fat g\u1eedi. N\u1ebfu kh\u00f4ng s\u1eed d\u1ee5ng preventDefault(), n\u00fat \u0111\u00f3 s\u1ebd th\u1ef1c thi h\u00e0nh vi m\u1eb7c \u0111\u1ecbnh, ngh\u0129a l\u00e0 g\u1eedi form v\u00e0 t\u1ea3i l\u1ea1i trang. \u0110i\u1ec1u n\u00e0y khi\u1ebfn s\u1ef1 ki\u1ec7n AJAX kh\u00f4ng \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n.<\/p>\n\n\n\n<p>Gi\u1ea3i ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(\"#submitBtn\").click(function(event){\n\u00a0\u00a0\u00a0\u00a0event.preventDefault(); \/\/ Ng\u0103n h\u00e0nh vi g\u1eedi form m\u1eb7c \u0111\u1ecbnh\n\n\u00a0\u00a0\u00a0\u00a0\/\/ Th\u1ef1c hi\u1ec7n g\u1ecdi AJAX v\u00e0 x\u1eed l\u00fd DOM\n\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: \"\/submit-form\",\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0method: \"POST\",\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: $(\"#myForm\").serialize(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: function(response){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\"#result\").html(\"D\u1eef li\u1ec7u \u0111\u00e3 \u0111\u01b0\u1ee3c g\u1eedi!\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n\n\n\n<p>V\u1edbi event.preventDefault(), ch\u00fang ta c\u00f3 th\u1ec3 b\u1ecf qua h\u00e0nh vi m\u1eb7c \u0111\u1ecbnh c\u1ee7a tr\u00ecnh duy\u1ec7t v\u00e0 th\u1ef1c hi\u1ec7n logic x\u1eed l\u00fd t\u00f9y ch\u1ec9nh nh\u01b0 g\u1eedi d\u1eef li\u1ec7u qua AJAX, c\u1eadp nh\u1eadt n\u1ed9i dung trang m\u00e0 kh\u00f4ng c\u1ea7n reload l\u1ea1i to\u00e0n b\u1ed9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gi\u1ea3i-thich-l\u1ee3i-ich-c\u1ee7a-vi\u1ec7c-s\u1eed-d\u1ee5ng-cdn-cho-cac-file-jquery\"><strong>Gi\u1ea3i th\u00edch l\u1ee3i \u00edch c\u1ee7a vi\u1ec7c s\u1eed d\u1ee5ng CDN cho c\u00e1c file jQuery.<\/strong><\/h3>\n\n\n\n<p>CDN l\u00e0 m\u1ed9t gi\u1ea3i ph\u00e1p tuy\u1ec7t v\u1eddi \u0111\u1ec3 l\u01b0u tr\u1eef c\u00e1c t\u1ec7p JavaScript v\u00e0 CSS. Nh\u1edd v\u00e0o vi\u1ec7c l\u01b0u b\u1ed9 nh\u1edb \u0111\u1ec7m (cache), CDN gi\u00fap gi\u1ea3m th\u1eddi gian t\u1ea3i trang, l\u00e0m cho website nhanh h\u01a1n v\u00e0 ph\u1ea3n h\u1ed3i t\u1ed1t h\u01a1n. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t quan tr\u1ecdng v\u1edbi c\u00e1c website c\u00f3 l\u01b0\u1ee3ng n\u1ed9i dung l\u1edbn, nh\u01b0 blog ho\u1eb7c trang th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed.<\/p>\n\n\n\n<p>L\u01b0u tr\u1eef jQuery tr\u00ean m\u1ea1ng ph\u00e2n ph\u1ed1i n\u1ed9i dung (CDN &#8211; Content Delivery Network) mang l\u1ea1i nhi\u1ec1u l\u1ee3i \u00edch thi\u1ebft th\u1ef1c v\u1ec1 hi\u1ec7u su\u1ea5t, b\u0103ng th\u00f4ng v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng, v\u00ed d\u1ee5 nh\u01b0:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gi\u1ea3m s\u1ed1 l\u1ea7n t\u1ea3i l\u1ea1i c\u00e1c t\u00e0i nguy\u00ean khi ng\u01b0\u1eddi d\u00f9ng truy c\u1eadp trang.<\/li>\n\n\n\n<li>Gi\u1ea3m b\u0103ng th\u00f4ng ti\u00eau th\u1ee5, v\u00ec c\u00e1c t\u00e0i nguy\u00ean t\u0129nh (JS, CSS) \u0111\u01b0\u1ee3c cung c\u1ea5p t\u1eeb c\u00e1c m\u00e1y ch\u1ee7 ph\u00e2n t\u00e1n g\u1ea7n v\u1edbi ng\u01b0\u1eddi d\u00f9ng h\u01a1n.<\/li>\n\n\n\n<li>T\u1ed1i \u01b0u tr\u1ea3i nghi\u1ec7m tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng, gi\u00fap giao di\u1ec7n ph\u1ea3n h\u1ed3i t\u1ed1t v\u1edbi c\u00e1c k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh kh\u00e1c nhau.<\/li>\n\n\n\n<li>\u0110\u1ea3m b\u1ea3o l\u01b0u tr\u1eef an to\u00e0n cho c\u00e1c t\u1ec7p ho\u1eb7c d\u1eef li\u1ec7u quan tr\u1ecdng.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-phan-bi\u1ec7t-gi\u1eefa-jquery-min-js-va-jquery-js\"><strong>Ph\u00e2n bi\u1ec7t gi\u1eefa jquery.min.js v\u00e0 jquery.js.<\/strong><\/h3>\n\n\n\n<p>jquery.min.js l\u00e0 phi\u00ean b\u1ea3n \u0111\u00e3 \u0111\u01b0\u1ee3c r\u00fat g\u1ecdn (minified) t\u1eeb jquery.js, n\u00f3 lo\u1ea1i b\u1ecf t\u1ea5t c\u1ea3 k\u00fd t\u1ef1 kh\u00f4ng c\u1ea7n thi\u1ebft nh\u01b0 kho\u1ea3ng tr\u1eafng, xu\u1ed1ng d\u00f2ng, ch\u00fa th\u00edch, r\u00fat ng\u1eafn t\u00ean bi\u1ebfn hay t\u1ed1i \u01b0u h\u00f3a c\u00fa ph\u00e1p \u0111\u1ec3 gi\u1ea3m dung l\u01b0\u1ee3ng t\u1ec7p.&nbsp;<\/p>\n\n\n\n<p>Ch\u1ee9c n\u0103ng c\u1ee7a jquery.min.js v\u00e0 jquery.js l\u00e0 gi\u1ed1ng nhau, tuy nhi\u00ean vi\u1ec7c s\u1eed d\u1ee5ng phi\u00ean b\u1ea3n r\u00fat g\u1ecdn s\u1ebd mang l\u1ea1i nhi\u1ec1u l\u1ee3i \u00edch h\u01a1n, \u0111\u1eb7c bi\u1ec7t trong m\u00f4i tr\u01b0\u1eddng s\u1ea3n xu\u1ea5t (production), v\u00ed d\u1ee5 nh\u01b0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>T\u0103ng t\u1ed1c \u0111\u1ed9 t\u1ea3i trang:<\/strong> T\u1ec7p minified c\u00f3 dung l\u01b0\u1ee3ng nh\u1ecf h\u01a1n, gi\u00fap t\u1ea3i nhanh h\u01a1n tr\u00ean m\u1ecdi n\u1ec1n t\u1ea3ng, \u0111\u1eb7c bi\u1ec7t quan tr\u1ecdng v\u1edbi ng\u01b0\u1eddi d\u00f9ng c\u00f3 k\u1ebft n\u1ed1i m\u1ea1ng y\u1ebfu.<\/li>\n\n\n\n<li><strong>Hi\u1ec7u su\u1ea5t t\u1ed1t h\u01a1n:<\/strong> Tr\u00ecnh duy\u1ec7t c\u1ea7n \u00edt th\u1eddi gian h\u01a1n \u0111\u1ec3 ph\u00e2n t\u00edch m\u00e3 JavaScript.<\/li>\n\n\n\n<li><strong>Gi\u1ea3m dung l\u01b0\u1ee3ng tr\u00ean server v\u00e0 cache tr\u00ecnh duy\u1ec7t:<\/strong> Gi\u00fap ti\u1ebft ki\u1ec7m kh\u00f4ng gian l\u01b0u tr\u1eef t\u1ea1m th\u1eddi tr\u00ean m\u00e1y ch\u1ee7 v\u00e0 b\u1ed9 nh\u1edb cache c\u1ee7a tr\u00ecnh duy\u1ec7t, d\u1eabn \u0111\u1ebfn ph\u1ea3n h\u1ed3i nhanh h\u01a1n v\u00e0 gi\u1ea3m t\u1ea3i cho server.<\/li>\n\n\n\n<li><strong>Gi\u00fap c\u1ea5u tr\u00fac m\u00e3 g\u1ecdn g\u00e0ng h\u01a1n:<\/strong> Khi s\u1eed d\u1ee5ng phi\u00ean b\u1ea3n .min.js, b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i nh\u00fang nhi\u1ec1u t\u1ec7p JS ri\u00eang l\u1ebb, gi\u00fap m\u00e3 HTML s\u1ea1ch h\u01a1n, d\u1ec5 b\u1ea3o tr\u00ec h\u01a1n.<\/li>\n<\/ul>\n\n\n\n<p>T\u00f3m l\u1ea1i, d\u00f9 jquery.min.js v\u00e0 jquery.js ho\u1ea1t \u0111\u1ed9ng gi\u1ed1ng nhau, nh\u01b0ng s\u1eed d\u1ee5ng phi\u00ean b\u1ea3n minified l\u00e0 l\u1ef1a ch\u1ecdn t\u1ed1i \u01b0u cho hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9 t\u1ea3i trang v\u00e0 b\u1ea3o m\u1eadt trong m\u00f4i tr\u01b0\u1eddng th\u1ef1c t\u1ebf. \u0110\u00e2y l\u00e0 ti\u00eau chu\u1ea9n g\u1ea7n nh\u01b0 b\u1eaft bu\u1ed9c trong c\u00e1c d\u1ef1 \u00e1n web chuy\u00ean nghi\u1ec7p.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-trong-jquery-s\u1ef1-khac-bi\u1ec7t-gi\u1eefa-this-va-this-la-gi\"><strong>Trong jQuery, s\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa $(this) v\u00e0 this l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>C\u00e1c \u0111i\u1ec3m kh\u00e1c bi\u1ec7t ch\u00ednh:<\/p>\n\n\n\n<p><strong>$(this)<\/strong> l\u00e0 m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng jQuery, trong khi<strong> this <\/strong>l\u00e0 tham chi\u1ebfu \u0111\u1ebfn DOM element thu\u1ea7n t\u00fay trong JavaScript context hi\u1ec7n t\u1ea1i.<\/p>\n\n\n\n<p><strong>$(this)<\/strong> th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong jQuery \u0111\u1ec3 thao t\u00e1c v\u1edbi ph\u1ea7n t\u1eed \u0111ang \u0111\u01b0\u1ee3c ch\u1ecdn, d\u01b0\u1edbi d\u1ea1ng \u0111\u1ed1i t\u01b0\u1ee3ng jQuery, t\u1eeb \u0111\u00f3 b\u1ea1n c\u00f3 th\u1ec3 g\u1ecdi c\u00e1c ph\u01b0\u01a1ng th\u1ee9c nh\u01b0 .addClass(), .hide(), .attr(),&#8230; Ng\u01b0\u1ee3c l\u1ea1i, <strong>this<\/strong> trong JavaScript \u0111\u01a1n thu\u1ea7n ch\u1ec9 l\u00e0 ph\u1ea7n t\u1eed DOM g\u1ed1c, kh\u00f4ng c\u00f3 s\u1eb5n c\u00e1c ph\u01b0\u01a1ng th\u1ee9c ti\u1ec7n \u00edch nh\u01b0 \u0111\u1ed1i t\u01b0\u1ee3ng jQuery.&nbsp;<\/p>\n\n\n\n<p>Trong v\u00f2ng l\u1eb7p .each(), <strong>this<\/strong> \u0111\u1ea1i di\u1ec7n cho ph\u1ea7n t\u1eed hi\u1ec7n t\u1ea1i \u0111ang \u0111\u01b0\u1ee3c l\u1eb7p \u0111\u1ebfn (DOM element), c\u00f2n<strong> $(this)<\/strong> l\u00e0 c\u00e1ch \u0111\u1ec3 chuy\u1ec3n ph\u1ea7n t\u1eed \u0111\u00f3 th\u00e0nh \u0111\u1ed1i t\u01b0\u1ee3ng jQuery, gi\u00fap b\u1ea1n s\u1eed d\u1ee5ng c\u00e1c h\u00e0m c\u1ee7a jQuery tr\u00ean n\u00f3.<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$('ul').each(function() {\n\n\u00a0\u00a0\u00a0\u00a0var childElement = this.parent().nextSibling(); \/\/ Sai v\u00ec this l\u00e0 DOM, kh\u00f4ng c\u00f3 .parent() hay .nextSibling()\n\n});<\/code><\/pre>\n\n\n\n<p>\u0110o\u1ea1n m\u00e3 tr\u00ean s\u1ebd kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng \u0111\u00fang, v\u00ec <strong>this<\/strong> \u1edf \u0111\u00e2y l\u00e0 m\u1ed9t DOM element, kh\u00f4ng c\u00f3 s\u1eb5n c\u00e1c ph\u01b0\u01a1ng th\u1ee9c nh\u01b0 .parent() hay .nextSibling() theo c\u00e1ch vi\u1ebft nh\u01b0 jQuery.&nbsp;<\/p>\n\n\n\n<p>\u0110\u1ec3 l\u00e0m \u0111\u00fang, b\u1ea1n n\u00ean vi\u1ebft nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$('ul').each(function() {\n\n\u00a0\u00a0\u00a0\u00a0\/\/ C\u00e1ch 1: S\u1eed d\u1ee5ng $(this) v\u1edbi jQuery methods\n\u00a0\u00a0\u00a0\u00a0var nextElement = $(this).parent().next();\n\n\u00a0\u00a0\u00a0\u00a0\/\/ C\u00e1ch 2: S\u1eed d\u1ee5ng this v\u1edbi DOM properties\/methods\n\u00a0\u00a0\u00a0\u00a0var parentElement = this.parentElement;\n\u00a0\u00a0\u00a0\u00a0var nextSibling = this.nextElementSibling;\n\n\u00a0\u00a0\u00a0\u00a0\/\/ C\u00e1ch 3: Mix both approaches\n\u00a0\u00a0\u00a0\u00a0var id = this.id; \/\/ Fast DOM property access\n\u00a0\u00a0\u00a0\u00a0$(this).addClass('processed'); \/\/ jQuery method\n});<\/code><\/pre>\n\n\n\n<p>T\u00f3m l\u1ea1i:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>D\u00f9ng this \u0111\u1ec3 tham chi\u1ebfu \u0111\u1ebfn ph\u1ea7n t\u1eed DOM thu\u1ea7n t\u00fay.&nbsp;<\/li>\n\n\n\n<li>D\u00f9ng $(this) khi mu\u1ed1n thao t\u00e1c v\u1edbi ph\u1ea7n t\u1eed \u0111\u00f3 b\u1eb1ng c\u00e1c ph\u01b0\u01a1ng th\u1ee9c c\u1ee7a jQuery (nh\u01b0 .css(), .addClass(), .parent()&#8230;).<\/li>\n\n\n\n<li>Trong v\u00f2ng l\u1eb7p .each(), this lu\u00f4n l\u00e0 ph\u1ea7n t\u1eed DOM \u0111ang \u0111\u01b0\u1ee3c l\u1eb7p qua, do \u0111\u00f3 n\u00ean d\u00f9ng $(this) \u0111\u1ec3 x\u1eed l\u00fd d\u1ec5 d\u00e0ng h\u01a1n.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-th\u1ebf-nao-d\u1ec3-th\u1ef1c-hi\u1ec7n-m\u1ed9t-yeu-c\u1ea7u-ajax-trong-jquery\"><strong>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 th\u1ef1c hi\u1ec7n m\u1ed9t y\u00eau c\u1ea7u AJAX trong jQuery?<\/strong><\/h3>\n\n\n\n<p>\u0110\u1ec3 th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u AJAX trong jQuery, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng ph\u01b0\u01a1ng th\u1ee9c $.ajax(). Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y cho ph\u00e9p g\u1eedi c\u00e1c y\u00eau c\u1ea7u HTTP b\u1ea5t \u0111\u1ed3ng b\u1ed9 \u0111\u1ebfn m\u00e1y ch\u1ee7 v\u00e0 x\u1eed l\u00fd ph\u1ea3n h\u1ed3i m\u00e0 kh\u00f4ng c\u1ea7n t\u1ea3i l\u1ea1i trang. jQuery cung c\u1ea5p $.ajax() v\u1edbi nhi\u1ec1u t\u00f9y ch\u1ecdn linh ho\u1ea1t \u0111\u1ec3 c\u1ea5u h\u00ecnh y\u00eau c\u1ea7u.<\/p>\n\n\n\n<p>M\u1ed9t s\u1ed1 thu\u1ed9c t\u00ednh quan tr\u1ecdng c\u1ee7a $.ajax() g\u1ed3m c\u00f3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>url: \u0110\u1ecba ch\u1ec9 URL n\u01a1i g\u1eedi y\u00eau c\u1ea7u.<\/li>\n\n\n\n<li>type: Ki\u1ec3u ph\u01b0\u01a1ng th\u1ee9c HTTP s\u1eed d\u1ee5ng (v\u00ed d\u1ee5: GET, POST&#8230;).<\/li>\n\n\n\n<li>data: D\u1eef li\u1ec7u g\u1eedi k\u00e8m theo y\u00eau c\u1ea7u (th\u01b0\u1eddng d\u00f9ng v\u1edbi POST ho\u1eb7c PUT).<\/li>\n\n\n\n<li>success: H\u00e0m callback th\u1ef1c thi khi y\u00eau c\u1ea7u th\u00e0nh c\u00f4ng.<\/li>\n\n\n\n<li>error: H\u00e0m callback th\u1ef1c thi khi y\u00eau c\u1ea7u th\u1ea5t b\u1ea1i.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-m\u1ee5c-dich-c\u1ee7a-cac-ph\u01b0\u01a1ng-th\u1ee9c-bind-live-va-delegate-trong-jquery-la-gi\"><strong>M\u1ee5c \u0111\u00edch c\u1ee7a c\u00e1c ph\u01b0\u01a1ng th\u1ee9c bind(), live() v\u00e0 delegate() trong jQuery l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>Trong jQuery, c\u00e1c ph\u01b0\u01a1ng th\u1ee9c bind(), live() v\u00e0 delegate() \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u1eed l\u00fd s\u1ef1 ki\u1ec7n.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>bind(): D\u00f9ng \u0111\u1ec3 g\u00e1n (bind) tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n tr\u1ef1c ti\u1ebfp v\u00e0o ph\u1ea7n t\u1eed t\u1ea1i th\u1eddi \u0111i\u1ec3m g\u1ecdi h\u00e0m. Tuy nhi\u00ean, n\u00f3 ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng v\u1edbi c\u00e1c ph\u1ea7n t\u1eed \u0111\u00e3 t\u1ed3n t\u1ea1i trong DOM khi trang \u0111\u01b0\u1ee3c t\u1ea3i, kh\u00f4ng \u00e1p d\u1ee5ng \u0111\u01b0\u1ee3c cho c\u00e1c ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c th\u00eam v\u00e0o sau n\u00e0y.<\/li>\n\n\n\n<li>live(): Cho ph\u00e9p g\u00e1n s\u1ef1 ki\u1ec7n cho c\u1ea3 nh\u1eefng ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c th\u00eam v\u00e0o sau khi trang \u0111\u00e3 t\u1ea3i (tuy nhi\u00ean \u0111\u00e3 b\u1ecb lo\u1ea1i b\u1ecf \u1edf c\u00e1c phi\u00ean b\u1ea3n jQuery m\u1edbi). N\u00f3 g\u00e1n tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n cho t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed kh\u1edbp v\u1edbi selector, k\u1ec3 c\u1ea3 nh\u1eefng ph\u1ea7n t\u1eed th\u00eam \u0111\u1ed9ng sau.<\/li>\n\n\n\n<li>delegate(): G\u00e1n s\u1ef1 ki\u1ec7n th\u00f4ng qua c\u01a1 ch\u1ebf \u1ee7y quy\u1ec1n s\u1ef1 ki\u1ec7n (event delegation). B\u1ea1n ch\u1ec9 \u0111\u1ecbnh m\u1ed9t ph\u1ea7n t\u1eed cha v\u00e0 selector c\u1ee7a ph\u1ea7n t\u1eed con m\u00e0 b\u1ea1n mu\u1ed1n theo d\u00f5i s\u1ef1 ki\u1ec7n. Khi s\u1ef1 ki\u1ec7n x\u1ea3y ra \u1edf ph\u1ea7n t\u1eed con ph\u00f9 h\u1ee3p, ph\u1ea7n t\u1eed cha s\u1ebd \u201c\u0111\u00f3n\u201d s\u1ef1 ki\u1ec7n \u0111\u00f3 v\u00e0 x\u1eed l\u00fd th\u00f4ng qua callback. Ph\u01b0\u01a1ng ph\u00e1p n\u00e0y hi\u1ec7u qu\u1ea3 v\u00e0 th\u00edch h\u1ee3p \u0111\u1ec3 x\u1eed l\u00fd c\u00e1c ph\u1ea7n t\u1eed th\u00eam \u0111\u1ed9ng.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cau-h\u1ecfi-ph\u1ecfng-v\u1ea5n-jquery-ph\u1ed5-bi\u1ebfn-danh-cho-senior\"><span class=\"ez-toc-section\" id=\"Cau_hoi_phong_van_jQuery_pho_bien_danh_cho_Senior\"><\/span><strong>C\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery ph\u1ed5 bi\u1ebfn d\u00e0nh cho Senior<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gi\u1ea3i-thich-cach-ho\u1ea1t-d\u1ed9ng-c\u1ee7a-event-bubbling-va-event-capture-trong-jquery\"><strong>Gi\u1ea3i th\u00edch c\u00e1ch ho\u1ea1t \u0111\u1ed9ng c\u1ee7a event bubbling v\u00e0 event capture trong jQuery.<\/strong><\/h3>\n\n\n\n<p>Event Bubbling v\u00e0 Event Capturing l\u00e0 hai giai \u0111o\u1ea1n trong m\u00f4 h\u00ecnh lan truy\u1ec1n s\u1ef1 ki\u1ec7n (event propagation) trong DOM API (kh\u00f4ng ch\u1ec9 ri\u00eang jQuery). jQuery m\u1eb7c \u0111\u1ecbnh s\u1eed d\u1ee5ng bubbling phase.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Event Bubbling<\/strong><\/td><td><strong>Event Capturing<\/strong><\/td><\/tr><tr><td>S\u1ef1 ki\u1ec7n b\u1eaft \u0111\u1ea7u t\u1eeb ph\u1ea7n t\u1eed m\u1ee5c ti\u00eau (target element) v\u00e0 lan truy\u1ec1n t\u1eeb d\u01b0\u1edbi l\u00ean \u0111\u1ebfn t\u00e0i li\u1ec7u g\u1ed1c.<\/td><td>S\u1ef1 ki\u1ec7n b\u1eaft \u0111\u1ea7u t\u1eeb document v\u00e0 lan truy\u1ec1n t\u1eeb tr\u00ean xu\u1ed1ng \u0111\u1ebfn ph\u1ea7n t\u1eed m\u1ee5c ti\u00eau (t\u1eeb cha \u2192 con).<\/td><\/tr><tr><td>Cho ph\u00e9p c\u00e1c ph\u1ea7n t\u1eed cha b\u1eaft s\u1ef1 ki\u1ec7n \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t b\u1edfi ph\u1ea7n t\u1eed con.<\/td><td>Capturing cho ph\u00e9p b\u1ea1n b\u1eaft s\u1ef1 ki\u1ec7n tr\u01b0\u1edbc khi n\u00f3 \u0111\u1ebfn ph\u1ea7n t\u1eed m\u1ee5c ti\u00eau.<\/td><\/tr><tr><td>V\u00ed d\u1ee5: N\u1ebfu b\u1ea1n click v\u00e0o m\u1ed9t n\u00fat b\u00ean trong m\u1ed9t th\u1ebb &lt;div&gt;, s\u1ef1 ki\u1ec7n &#8220;click&#8221; s\u1ebd \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t \u0111\u1ea7u ti\u00ean \u1edf n\u00fat, sau \u0111\u00f3 lan l\u00ean \u0111\u1ebfn &lt;div&gt;, v\u00e0 ti\u1ebfp t\u1ee5c l\u00ean \u0111\u1ebfn document.<\/td><td>Capturing \u00edt \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng h\u01a1n so v\u1edbi bubbling trong th\u1ef1c t\u1ebf.<\/td><\/tr><tr><td>H\u00e0nh vi m\u1eb7c \u0111\u1ecbnh trong jQuery v\u00e0 h\u1ea7u h\u1ebft l\u00e0 c\u00e1c th\u01b0 vi\u1ec7n<\/td><td>\u00cdt \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng h\u01a1n, c\u1ea7n \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t r\u00f5 r\u00e0ng<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>V\u00ed d\u1ee5 s\u1eed d\u1ee5ng event bubbling trong jQuery:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(\"#parent\").on(\"click\", function () {\n\u00a0\u00a0\u00a0\u00a0alert(\"Parent clicked!\");\n});\n\n$(\"#child\").on(\"click\", function (event) {\n\u00a0\u00a0\u00a0\u00a0alert(\"Child clicked!\");\n\u00a0\u00a0\u00a0\u00a0event.stopPropagation();\u00a0\n});<\/code><\/pre>\n\n\n\n<p>Gi\u1ea3i th\u00edch v\u00ed d\u1ee5 tr\u00ean:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Khi ng\u01b0\u1eddi d\u00f9ng click v\u00e0o #child, theo m\u1eb7c \u0111\u1ecbnh s\u1ef1 ki\u1ec7n s\u1ebd &#8220;bubbling&#8221; l\u00ean #parent.<\/li>\n\n\n\n<li>Tuy nhi\u00ean, event.stopPropagation() trong h\u00e0m c\u1ee7a #child ng\u0103n kh\u00f4ng cho s\u1ef1 ki\u1ec7n lan l\u00ean cha, n\u00ean &#8220;Parent clicked!&#8221; s\u1ebd kh\u00f4ng hi\u1ec3n th\u1ecb.<\/li>\n\n\n\n<li>N\u1ebfu b\u1ecf d\u00f2ng event.stopPropagation();, c\u1ea3 &#8220;Child clicked!&#8221; v\u00e0 &#8220;Parent clicked!&#8221; s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tu\u1ea7n t\u1ef1.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gi\u1ea3i-thich-ph\u01b0\u01a1ng-th\u1ee9c-promise-trong-jquery\"><strong>Gi\u1ea3i th\u00edch ph\u01b0\u01a1ng th\u1ee9c .promise() trong jQuery.<\/strong><\/h3>\n\n\n\n<p>Ph\u01b0\u01a1ng th\u1ee9c .promise() trong jQuery \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng Promise, cho ph\u00e9p b\u1ea1n \u0111\u1ecbnh ngh\u0129a c\u00e1c h\u00e0m callback x\u1eed l\u00fd th\u00e0nh c\u00f4ng ho\u1eb7c th\u1ea5t b\u1ea1i th\u00f4ng qua c\u00e1c ph\u01b0\u01a1ng th\u1ee9c .done(), .fail() v\u00e0 .always().&nbsp;<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 c\u00e1ch s\u1eed d\u1ee5ng:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var promise = $(selector).promise(type);<\/code><\/pre>\n\n\n\n<p>N\u00f3 cung c\u1ea5p c\u00e1ch \u0111\u1ec3 x\u1eed l\u00fd k\u1ebft qu\u1ea3 c\u1ee7a m\u1ed9t ho\u1eb7c nhi\u1ec1u thao t\u00e1c b\u1ea5t \u0111\u1ed3ng b\u1ed9, x\u00e2u chu\u1ed7i c\u00e1c ph\u1ea3n h\u1ed3i sau khi t\u1ea5t c\u1ea3 c\u00e1c t\u00e1c v\u1ee5 \u0111\u00f3 \u0111\u01b0\u1ee3c ho\u00e0n t\u1ea5t. Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch khi b\u1ea1n c\u00f3 nhi\u1ec1u thao t\u00e1c c\u1ea7n ho\u00e0n th\u00e0nh tr\u01b0\u1edbc khi th\u1ef1c thi \u0111o\u1ea1n m\u00e3 ti\u1ebfp theo.<\/p>\n\n\n\n<p>Ph\u01b0\u01a1ng th\u1ee9c n\u00e0y th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng k\u1ebft h\u1ee3p v\u1edbi c\u00e1c thao t\u00e1c hi\u1ec7u \u1ee9ng (animation) ho\u1eb7c thao t\u00e1c DOM, nh\u1eb1m \u0111\u1ea3m b\u1ea3o c\u00e1c h\u00e0nh \u0111\u1ed9ng c\u1ee5 th\u1ec3 \u0111\u01b0\u1ee3c ho\u00e0n t\u1ea5t tr\u01b0\u1edbc khi ti\u1ebfp t\u1ee5c.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>L\u01b0u \u00fd: jQuery Promise kh\u00e1c v\u1edbi native ES6 Promise v\u1ec1 API v\u00e0 behavior.<\/em><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-s\u1ef1-khac-bi\u1ec7t-gi\u1eefa-event-preventdefault-va-event-stoppropagation-la-gi\"><strong>S\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa event.preventDefault() v\u00e0 event.stopPropagation() l\u00e0 g\u00ec?<\/strong><\/h3>\n\n\n\n<p>C\u1ea3 hai ph\u01b0\u01a1ng th\u1ee9c event.preventDefault() v\u00e0 event.stopPropagation() \u0111\u1ec1u \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 ki\u1ec3m so\u00e1t h\u00e0nh vi c\u1ee7a s\u1ef1 ki\u1ec7n, nh\u01b0ng ch\u00fang ph\u1ee5c v\u1ee5 cho nh\u1eefng m\u1ee5c \u0111\u00edch kh\u00e1c nhau.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Ti\u00eau ch\u00ed<\/strong><\/td><td><strong>event.preventDefault()<\/strong><\/td><td><strong>event.stopPropagation()<\/strong><\/td><\/tr><tr><td>M\u1ee5c \u0111\u00edch<\/td><td>Ng\u0103n ch\u1eb7n h\u00e0nh \u0111\u1ed9ng m\u1eb7c \u0111\u1ecbnh c\u1ee7a s\u1ef1 ki\u1ec7n<\/td><td>Ng\u0103n ch\u1eb7n s\u1ef1 ki\u1ec7n lan truy\u1ec1n (bubbling l\u00ean ho\u1eb7c capturing xu\u1ed1ng)<\/td><\/tr><tr><td>\u1ea2nh h\u01b0\u1edfng \u0111\u1ebfn g\u1eedi form?<\/td><td>C\u00f3, ng\u0103n vi\u1ec7c g\u1eedi form khi d\u00f9ng trong s\u1ef1 ki\u1ec7n submit<\/td><td>Kh\u00f4ng, ch\u1ec9 ng\u0103n s\u1ef1 ki\u1ec7n lan truy\u1ec1n<\/td><\/tr><tr><td>V\u00ed d\u1ee5 s\u1eed d\u1ee5ng<\/td><td>Ng\u0103n m\u1ed9t li\u00ean k\u1ebft \u0111i\u1ec1u h\u01b0\u1edbng \u0111\u1ebfn URL:$(&#8216;a&#8217;).click(function(event) { event.preventDefault(); });<\/td><td>Ng\u0103n s\u1ef1 ki\u1ec7n lan truy\u1ec1n trong c\u00e1c ph\u1ea7n t\u1eed l\u1ed3ng nhau:$(&#8216;#child&#8217;).click(function(event) { event.stopPropagation(); });<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-proxy-la-gi-va-no-d\u01b0\u1ee3c-s\u1eed-d\u1ee5ng-nh\u01b0-th\u1ebf-nao\"><strong>$.proxy() l\u00e0 g\u00ec v\u00e0 n\u00f3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng nh\u01b0 th\u1ebf n\u00e0o?<\/strong><\/h3>\n\n\n\n<p>$.proxy() \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 bind context (this)bind context (this) b\u00ean trong c\u00e1c tr\u00ecnh x\u1eed l\u00fd s\u1ef1 ki\u1ec7n (event handlers).<\/p>\n\n\n\n<p>\u0110i\u1ec1u n\u00e0y r\u1ea5t h\u1eefu \u00edch khi l\u00e0m vi\u1ec7c v\u1edbi c\u00e1c h\u00e0m callback ho\u1eb7c s\u1ef1 ki\u1ec7n, n\u01a1i m\u00e0 gi\u00e1 tr\u1ecb c\u1ee7a this c\u00f3 th\u1ec3 thay \u0111\u1ed5i, v\u00e0 b\u1ea1n mu\u1ed1n r\u00e0ng bu\u1ed9c n\u00f3 v\u1edbi m\u1ed9t ng\u1eef c\u1ea3nh c\u1ee5 th\u1ec3 (v\u00ed d\u1ee5: m\u1ed9t ph\u1ea7n t\u1eed DOM ho\u1eb7c m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var obj = {\n\u00a0\u00a0\u00a0\u00a0message: \"Hello\",\n\u00a0\u00a0\u00a0\u00a0showMessage: function () {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(this.message);\n\u00a0\u00a0\u00a0\u00a0}\n};\n$(\"#btn\").on(\"click\", $.proxy(obj.showMessage, obj));<\/code><\/pre>\n\n\n\n<p>Gi\u1ea3i th\u00edch \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Trong v\u00ed d\u1ee5 tr\u00ean, showMessage l\u00e0 m\u1ed9t ph\u01b0\u01a1ng th\u1ee9c c\u1ee7a obj.<\/li>\n\n\n\n<li>Khi g\u00e1n showMessage l\u00e0m callback cho s\u1ef1 ki\u1ec7n &#8220;click&#8221; c\u1ee7a #btn, n\u1ebfu g\u1ecdi tr\u1ef1c ti\u1ebfp obj.showMessage, this s\u1ebd kh\u00f4ng c\u00f2n tham chi\u1ebfu t\u1edbi obj.<\/li>\n\n\n\n<li>B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng $.proxy(obj.showMessage, obj), ta \u0111\u1ea3m b\u1ea3o r\u1eb1ng this b\u00ean trong showMessage lu\u00f4n l\u00e0 obj, b\u1ea5t k\u1ec3 h\u00e0m \u0111\u01b0\u1ee3c g\u1ecdi \u1edf \u0111\u00e2u.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-t\u1ea1i-sao-nen-s\u1eed-d\u1ee5ng-plugin-trong-jquery-hay-mo-t\u1ea3-cach-b\u1ea1n-t\u1ea1o-m\u1ed9t-plugin-jquery\"><strong>T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng plugin trong jQuery? H\u00e3y m\u00f4 t\u1ea3 c\u00e1ch b\u1ea1n t\u1ea1o m\u1ed9t plugin jQuery.<\/strong><\/h3>\n\n\n\n<p>Plugin l\u00e0 c\u00e1ch \u0111\u1ec3 m\u1edf r\u1ed9ng ch\u1ee9c n\u0103ng c\u1ee7a jQuery b\u1eb1ng c\u00e1ch t\u1ea1o ra c\u00e1c h\u00e0m c\u00f3 th\u1ec3 t\u00e1i s\u1eed d\u1ee5ng, duy tr\u00ec kh\u1ea3 n\u0103ng li\u00ean k\u1ebft v\u00e0 tu\u00e2n theo c\u00e1c quy \u01b0\u1edbc c\u1ee7a jQuery. C\u00e1c plugin n\u00e0y cho ph\u00e9p l\u1eadp tr\u00ecnh vi\u00ean th\u00eam c\u00e1c ph\u01b0\u01a1ng th\u1ee9c t\u00f9y ch\u1ec9nh c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c g\u1ecdi tr\u00ean \u0111\u1ed1i t\u01b0\u1ee3ng jQuery, gi\u00fap vi\u1ec7c \u0111\u00f3ng g\u00f3i logic ph\u1ee9c t\u1ea1p tr\u1edf n\u00ean d\u1ec5 d\u00e0ng h\u01a1n v\u00e0 gi\u1eef cho m\u00e3 ngu\u1ed3n c\u00f3 t\u00ednh m\u00f4-\u0111un, r\u00f5 r\u00e0ng. M\u1ed9t plugin cho ph\u00e9p t\u00e1ch bi\u1ec7t c\u00e1c m\u1ed1i quan t\u00e2m b\u1eb1ng c\u00e1ch \u0111\u00f3ng g\u00f3i m\u1ed9t ch\u1ee9c n\u0103ng c\u1ee5 th\u1ec3 v\u00e0o trong m\u1ed9t m\u00f4-\u0111un ri\u00eang bi\u1ec7t. \u0110i\u1ec1u n\u00e0y gi\u00fap gi\u1eef cho m\u00e3 ngu\u1ed3n s\u1ea1ch s\u1ebd v\u00e0 d\u1ec5 qu\u1ea3n l\u00fd.&nbsp;<\/p>\n\n\n\n<p>B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng plugin, t\u00f4i c\u00f3 th\u1ec3 \u1ea9n \u0111i s\u1ef1 ph\u1ee9c t\u1ea1p c\u1ee7a m\u1ed9t t\u00e1c v\u1ee5 ho\u1eb7c t\u00ednh n\u0103ng c\u1ee5 th\u1ec3 b\u00ean trong m\u1ed9t giao di\u1ec7n \u0111\u01a1n gi\u1ea3n, gi\u00fap c\u00e1c l\u1eadp tr\u00ecnh vi\u00ean kh\u00e1c d\u1ec5 d\u00e0ng s\u1eed d\u1ee5ng h\u01a1n. V\u00ed d\u1ee5 c\u00e1ch t\u1ea1o plugin:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function ($) {\n\u00a0\u00a0\u00a0\u00a0$.fn.changeColor = function (color) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.css(\"color\", color);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return this;\n\u00a0\u00a0\u00a0\u00a0};\n})(jQuery);\n$(\"p\").changeColor(\"blue\");<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-sao-d\u1ec3-d\u1ea3m-b\u1ea3o-hi\u1ec7u-qu\u1ea3-b\u1ed9-nh\u1edb-khi-s\u1eed-d\u1ee5ng-jquery\"><strong>L\u00e0m sao \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o hi\u1ec7u qu\u1ea3 b\u1ed9 nh\u1edb khi s\u1eed d\u1ee5ng jQuery?<\/strong><\/h3>\n\n\n\n<p>Khi l\u00e0m vi\u1ec7c v\u1edbi jQuery, t\u00f4i ch\u00fa tr\u1ecdng \u0111\u1ebfn vi\u1ec7c gi\u1ea3m r\u00f2 r\u1ec9 b\u1ed9 nh\u1edb v\u00e0 gi\u1ea3i ph\u00f3ng t\u00e0i nguy\u00ean kh\u00f4ng c\u1ea7n thi\u1ebft. M\u1ed9t s\u1ed1 nguy\u00ean t\u1eafc t\u00f4i th\u01b0\u1eddng \u00e1p d\u1ee5ng g\u1ed3m:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>H\u1ea1n ch\u1ebf bi\u1ebfn to\u00e0n c\u1ee5c: T\u00f4i \u01b0u ti\u00ean d\u00f9ng bi\u1ebfn c\u1ee5c b\u1ed9 trong h\u00e0m ho\u1eb7c d\u00f9ng closure \u0111\u1ec3 \u0111\u00f3ng g\u00f3i logic, tr\u00e1nh g\u00e2y chi\u1ebfm d\u1ee5ng b\u1ed9 nh\u1edb to\u00e0n c\u1ee5c.<\/li>\n\n\n\n<li>G\u1ee1 b\u1ecf event handler kh\u00f4ng c\u00f2n c\u1ea7n thi\u1ebft b\u1eb1ng .off(), \u0111\u1eb7c bi\u1ec7t khi thao t\u00e1c v\u1edbi DOM \u0111\u1ed9ng.<\/li>\n\n\n\n<li>X\u00f3a ph\u1ea7n t\u1eed DOM b\u1eb1ng .remove() thay v\u00ec .hide() \u0111\u1ec3 d\u1ecdn d\u1eb9p c\u1ea3 data v\u00e0 event \u0111i k\u00e8m.<\/li>\n\n\n\n<li>Gi\u1ea3m s\u1ed1 l\u1ea7n truy v\u1ea5n DOM: T\u00f4i th\u01b0\u1eddng cache c\u00e1c selector trong bi\u1ebfn n\u1ebfu d\u00f9ng nhi\u1ec1u l\u1ea7n.<\/li>\n\n\n\n<li>Qu\u1ea3n l\u00fd d\u1eef li\u1ec7u v\u1edbi .data() v\u00e0 .removeData(), \u0111\u1ea3m b\u1ea3o x\u00f3a \u0111\u00fang l\u00fac \u0111\u1ec3 gi\u1ea3i ph\u00f3ng b\u1ed9 nh\u1edb.<\/li>\n\n\n\n<li>V\u1edbi c\u00e1c h\u00e0m h\u1eb9n gi\u1edd nh\u01b0 setInterval() ho\u1eb7c setTimeout(), t\u00f4i lu\u00f4n clear khi kh\u00f4ng c\u00f2n s\u1eed d\u1ee5ng.<\/li>\n\n\n\n<li>G\u1ed9p thao t\u00e1c DOM b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng .html() ho\u1eb7c .append() m\u1ed9t l\u1ea7n thay v\u00ec thao t\u00e1c t\u1eebng ph\u1ea7n t\u1eed m\u1ed9t.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-b\u1ea1n-t\u1ed1i-\u01b0u-hi\u1ec7u-nang-jquery-trong-\u1ee9ng-d\u1ee5ng-l\u1edbn-nh\u01b0-th\u1ebf-nao\"><strong>B\u1ea1n t\u1ed1i \u01b0u hi\u1ec7u n\u0103ng jQuery trong \u1ee9ng d\u1ee5ng l\u1edbn nh\u01b0 th\u1ebf n\u00e0o?<\/strong><\/h3>\n\n\n\n<p>\u0110\u1ec3 t\u1ed1i \u01b0u hi\u1ec7u n\u0103ng jQuery trong d\u1ef1 \u00e1n quy m\u00f4 l\u1edbn, t\u00f4i t\u1eadp trung v\u00e0o 4 chi\u1ebfn l\u01b0\u1ee3c ch\u00ednh:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cache selector:<\/strong> Thay v\u00ec truy v\u1ea5n DOM nhi\u1ec1u l\u1ea7n, t\u00f4i l\u01b0u c\u00e1c ph\u1ea7n t\u1eed th\u01b0\u1eddng d\u00f9ng v\u00e0o bi\u1ebfn. \u0110i\u1ec1u n\u00e0y gi\u00fap gi\u1ea3m thi\u1ec3u thao t\u00e1c DOM v\u00e0 t\u0103ng t\u1ed1c \u0111\u1ed9 x\u1eed l\u00fd:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var $btn = $(\"#myButton\");\n$btn.click(function() {\n\u00a0\u00a0\u00a0\u00a0$btn.text(\"Clicked!\");\n});<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>D\u00f9ng event delegation: <\/strong>V\u1edbi c\u00e1c ph\u1ea7n t\u1eed t\u1ea1o \u0111\u1ed9ng, t\u00f4i tr\u00e1nh g\u1eafn event tr\u1ef1c ti\u1ebfp m\u00e0 s\u1eed d\u1ee5ng .on() \u1edf ph\u1ea7n t\u1eed cha. K\u1ef9 thu\u1eadt n\u00e0y ti\u1ebft ki\u1ec7m b\u1ed9 nh\u1edb v\u00e0 gi\u00fap code g\u1ecdn h\u01a1n.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>$(document).on(\"click\", \".dynamic-button\", function() {\n\u00a0\u00a0\u00a0\u00a0alert(\"Button Clicked!\");\n});<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>H\u1ea1n ch\u1ebf thao t\u00e1c DOM l\u1eb7p l\u1ea1i: <\/strong>T\u00f4i th\u01b0\u1eddng d\u1ef1ng HTML d\u01b0\u1edbi d\u1ea1ng chu\u1ed7i v\u00e0 g\u00e1n v\u00e0o DOM m\u1ed9t l\u1ea7n duy nh\u1ea5t \u0111\u1ec3 tr\u00e1nh reflow.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var items = \"\";\nfor (var i = 0; i &lt; 100; i++) {\n\u00a0\u00a0\u00a0\u00a0items += \"&lt;li>Item \" + i + \"&lt;\/li>\";\n}\n$(\"#list\").html(items);<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>X\u00f3a c\u00e1c ph\u1ea7n t\u1eed v\u00e0 data kh\u00f4ng c\u00f2n d\u00f9n<\/strong>g b\u1eb1ng .remove() v\u00e0 .empty() khi c\u1ea7n d\u1ecdn d\u1eb9p giao di\u1ec7n.<\/li>\n<\/ul>\n\n\n\n<p>Ngo\u00e0i ra, t\u00f4i c\u0169ng tr\u00e1nh d\u00f9ng c\u00e1c API c\u0169 nh\u01b0 .bind() ho\u1eb7c .live() v\u00ec hi\u1ec7u n\u0103ng k\u00e9m h\u01a1n .on(). Nh\u1edd c\u00e1c ph\u01b0\u01a1ng ph\u00e1p tr\u00ean, t\u00f4i c\u00f3 th\u1ec3 \u0111\u1ea3m b\u1ea3o hi\u1ec7u n\u0103ng m\u01b0\u1ee3t m\u00e0, k\u1ec3 c\u1ea3 trong d\u1ef1 \u00e1n jQuery v\u1edbi l\u01b0\u1ee3ng DOM l\u1edbn v\u00e0 nhi\u1ec1u t\u01b0\u01a1ng t\u00e1c.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-top-cau-h\u1ecfi-ph\u1ecfng-v\u1ea5n-th\u1ef1c-hanh-vi\u1ebft-ma-jquery-th\u01b0\u1eddng-g\u1eb7p\"><span class=\"ez-toc-section\" id=\"Top_cau_hoi_phong_van_thuc_hanh_viet_ma_jQuery_thuong_gap\"><\/span><strong>Top c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n th\u1ef1c h\u00e0nh vi\u1ebft m\u00e3 jQuery th\u01b0\u1eddng g\u1eb7p<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gi\u1ea3i-thich-do\u1ea1n-ma-sau-s\u1ebd-th\u1ef1c-hi\u1ec7n-ch\u1ee9c-nang-gi\"><strong>Gi\u1ea3i th\u00edch \u0111o\u1ea1n m\u00e3 sau s\u1ebd th\u1ef1c hi\u1ec7n ch\u1ee9c n\u0103ng g\u00ec.<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>$( \"div#first, div.first, ol#items &gt; &#91;name$='first']\" )<\/code><\/pre>\n\n\n\n<p>\u0110\u00e2y l\u00e0 c\u00e2u l\u1ec7nh ch\u1ecdn nhi\u1ec1u ph\u1ea7n t\u1eed c\u00f9ng l\u00fac, \u0111\u01b0\u1ee3c ng\u0103n c\u00e1ch b\u1eb1ng d\u1ea5u ph\u1ea9y. C\u1ee5 th\u1ec3:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>div#first:<\/strong> Ch\u1ecdn th\u1ebb &lt;div&gt; c\u00f3 id=&#8221;first&#8221;<\/li>\n\n\n\n<li><strong>div.first: <\/strong>Ch\u1ecdn th\u1ebb &lt;div&gt; c\u00f3 class=&#8221;first&#8221;<\/li>\n\n\n\n<li>ol#items &gt; [name$=&#8217;first&#8217;]: Ch\u1ecdn c\u00e1c ph\u1ea7n t\u1eed con tr\u1ef1c ti\u1ebfp c\u1ee7a th\u1ebb &lt;ol&gt; c\u00f3 id=&#8221;items&#8221; v\u00e0 c\u00f3 thu\u1ed9c t\u00ednh name k\u1ebft th\u00fac b\u1eb1ng &#8216;first&#8217;<\/li>\n<\/ul>\n\n\n\n<p>Nh\u00ecn chung, \u0111o\u1ea1n m\u00e3 tr\u00ean s\u1ebd ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed DOM th\u1ecfa m\u00e3n \u00edt nh\u1ea5t m\u1ed9t trong ba \u0111i\u1ec1u ki\u1ec7n sau:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>L\u00e0 th\u1ebb &lt;div&gt; c\u00f3 id=&#8221;first&#8221;.<\/li>\n\n\n\n<li>L\u00e0 th\u1ebb &lt;div&gt; c\u00f3 class=&#8221;first&#8221;.<\/li>\n\n\n\n<li>L\u00e0 ph\u1ea7n t\u1eed con tr\u1ef1c ti\u1ebfp c\u1ee7a &lt;ol id=&#8221;items&#8221;&gt; v\u00e0 c\u00f3 thu\u1ed9c t\u00ednh name k\u1ebft th\u00fac b\u1eb1ng &#8220;first&#8221;.<\/li>\n<\/ul>\n\n\n\n<p>\u0110\u00e2y l\u00e0 c\u00e1ch ch\u1ecdn k\u1ebft h\u1ee3p nhi\u1ec1u ph\u1ea7n t\u1eed c\u1ee5 th\u1ec3 \u0111\u1ec3 thao t\u00e1c \u0111\u1ed3ng th\u1eddi b\u1eb1ng jQuery (v\u00ed d\u1ee5: th\u00eam class, \u1ea9n\/hi\u1ec7n, thay \u0111\u1ed5i thu\u1ed9c t\u00ednh,..).<\/p>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"first\">Div 1&lt;\/div>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\n&lt;!-- Matched by div#first -->\n\n&lt;div class=\"first\">Div 2&lt;\/div>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\n&lt;!-- Matched by div.first -->\n\n&lt;div class=\"first\">Div 3&lt;\/div>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\n&lt;!-- Matched by div.first -->\n\n&lt;ol id=\"items\">\n\n\u00a0\u00a0\u00a0\u00a0&lt;li name=\"item-first\">Item 1&lt;\/li>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\n&lt;!-- Matched by ol#items > &#91;name$='first'] -->\n\n\u00a0\u00a0\u00a0\u00a0&lt;span name=\"user-first\">Span&lt;\/span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\n&lt;!-- Matched by ol#items > &#91;name$='first'] -->\n\n&lt;\/ol><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-cho-2-do\u1ea1n-ma-html-va-css-nh\u01b0-sau-hay-vi\u1ebft-ma-jquery-d\u1ec3-t\u1ea1o-hi\u1ec7u-\u1ee9ng-d\u1ed9ng-expander-div-m\u1edf-r\u1ed9ng-t\u1eeb-100x100-pixel-thanh-200x200-pixel\"><strong>Cho 2 \u0111o\u1ea1n m\u00e3 HTML v\u00e0 CSS nh\u01b0 sau. H\u00e3y vi\u1ebft m\u00e3 jQuery \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng \u0111\u1ed9ng #expander div, m\u1edf r\u1ed9ng t\u1eeb 100&#215;100 pixel th\u00e0nh 200&#215;200 pixel<\/strong><\/h3>\n\n\n\n<p>HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"expander\">&lt;\/div><\/code><\/pre>\n\n\n\n<p>CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div#expander{\n\u00a0\u00a0width: 100px;\n\u00a0\u00a0height: 100px;\n\u00a0\u00a0background-color: blue;\n}<\/code><\/pre>\n\n\n\n<p>\u0110o\u1ea1n m\u00e3 jQuery \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng \u0111\u1ed9ng cho #expander, l\u00e0m m\u1edf r\u1ed9ng k\u00edch th\u01b0\u1edbc t\u1eeb 100&#215;100 pixel l\u00ean 200&#215;200 pixel:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(document).ready(function(){\n\u00a0\u00a0$(\"#expander\").animate({\n\u00a0\u00a0\u00a0\u00a0width: \"200px\",\n\u00a0\u00a0\u00a0\u00a0height: \"200px\"\n\u00a0\u00a0}, 500); \/\/ th\u1eddi gian ch\u1ea1y hi\u1ec7u \u1ee9ng l\u00e0 500ms\n});<\/code><\/pre>\n\n\n\n<p>Gi\u1ea3i th\u00edch \u0111o\u1ea1n m\u00e3 tr\u00ean:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>$(document).ready() \u0111\u1ea3m b\u1ea3o m\u00e3 jQuery ch\u1ea1y sau khi t\u00e0i li\u1ec7u HTML \u0111\u00e3 t\u1ea3i xong.<\/li>\n\n\n\n<li>$(&#8220;#expander&#8221;) ch\u1ecdn ph\u1ea7n t\u1eed c\u00f3 id=&#8221;expander&#8221;.<\/li>\n\n\n\n<li>.animate({&#8230;}, 500) t\u1ea1o hi\u1ec7u \u1ee9ng chuy\u1ec3n \u0111\u1ed9ng m\u01b0\u1ee3t t\u1eeb k\u00edch th\u01b0\u1edbc hi\u1ec7n t\u1ea1i l\u00ean 200px trong v\u00f2ng 500ms (0.5 gi\u00e2y).<\/li>\n<\/ul>\n\n\n\n<p>Ngo\u00e0i ra, ch\u00fang ta c\u0169ng c\u00f3 th\u1ec3 th\u00eam hi\u1ec7u \u1ee9ng khi ng\u01b0\u1eddi d\u00f9ng click v\u00e0o kh\u1ed1i \u0111\u00f3, nh\u01b0 sau:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(document).ready(function(){\n\u00a0\u00a0$(\"#expander\").click(function(){\n\u00a0\u00a0\u00a0\u00a0$(this).animate({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: \"200px\",\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: \"200px\"\n\u00a0\u00a0\u00a0\u00a0}, 500);\n\u00a0\u00a0});\n});<\/code><\/pre>\n\n\n\n<p>Khi ng\u01b0\u1eddi d\u00f9ng click v\u00e0o #expander, n\u00f3 s\u1ebd n\u1edf r\u1ed9ng m\u01b0\u1ee3t m\u00e0 t\u1eeb 100&#215;100 th\u00e0nh 200&#215;200 pixel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gi\u1ea3i-thich-do\u1ea1n-ma-sau-co-cong-d\u1ee5ng-gi\"><strong>Gi\u1ea3i th\u00edch \u0111o\u1ea1n m\u00e3 sau c\u00f3 c\u00f4ng d\u1ee5ng g\u00ec<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>$( \"div\" ).css( \"width\", \"300px\" ).add( \"p\" ).css( \"background-color\", \"blue\" );<\/code><\/pre>\n\n\n\n<p>Th\u1ef1c hi\u1ec7n li\u00ean ti\u1ebfp 2 thao t\u00e1c:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>$( &#8220;div&#8221; ).css( &#8220;width&#8221;, &#8220;300px&#8221; ):<\/strong> Ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c th\u1ebb &lt;div&gt; trong trang v\u00e0 \u0111\u1eb7t chi\u1ec1u r\u1ed9ng c\u1ee7a ch\u00fang th\u00e0nh 300px.<\/li>\n\n\n\n<li><strong>.add( &#8220;p&#8221; ):<\/strong> Th\u00eam t\u1ea5t c\u1ea3 c\u00e1c th\u1ebb &lt;p&gt; v\u00e0o t\u1eadp h\u1ee3p \u0111\u00e3 ch\u1ecdn tr\u01b0\u1edbc \u0111\u00f3 (div).<\/li>\n\n\n\n<li><strong>.css( &#8220;background-color&#8221;, &#8220;blue&#8221; ):<\/strong> Thi\u1ebft l\u1eadp m\u00e0u n\u1ec1n (background-color) l\u00e0 m\u00e0u xanh d\u01b0\u01a1ng cho t\u1ea5t c\u1ea3 div v\u00e0 p trong t\u1eadp h\u1ee3p hi\u1ec7n t\u1ea1i.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-trong-2-do\u1ea1n-ma-d\u01b0\u1edbi-day-ma-nao-s\u1ebd-ho\u1ea1t-d\u1ed9ng-hi\u1ec7u-qu\u1ea3-h\u01a1n-gi\u1ea3i-thich\"><strong>Trong 2 \u0111o\u1ea1n m\u00e3 d\u01b0\u1edbi \u0111\u00e2y, m\u00e3 n\u00e0o s\u1ebd ho\u1ea1t \u0111\u1ed9ng hi\u1ec7u qu\u1ea3 h\u01a1n? Gi\u1ea3i th\u00edch<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>document.getElementById( \"logo\" ); ho\u1eb7c $( \"#logo\" );<\/code><\/pre>\n\n\n\n<p>C\u1ea3 hai \u0111o\u1ea1n m\u00e3 tr\u00ean \u0111\u1ec1u d\u00f9ng \u0111\u1ec3 ch\u1ecdn ph\u1ea7n t\u1eed c\u00f3 id=&#8221;logo&#8221;, nh\u01b0ng ch\u00fang kh\u00e1c nhau v\u1ec1 hi\u1ec7u n\u0103ng v\u00e0 m\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.getElementById(\"logo\")<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nhanh h\u01a1n: \u0110\u00e2y l\u00e0 API g\u1ed1c (native) c\u1ee7a JavaScript.<\/li>\n\n\n\n<li>Kh\u00f4ng c\u1ea7n t\u1ea3i th\u00eam th\u01b0 vi\u1ec7n, t\u1ed1i \u01b0u cho hi\u1ec7u su\u1ea5t cao.<\/li>\n\n\n\n<li>Tr\u1ea3 v\u1ec1 m\u1ed9t DOM element thu\u1ea7n, b\u1ea1n kh\u00f4ng th\u1ec3 g\u1ecdi c\u00e1c h\u00e0m jQuery (nh\u01b0 .fadeIn(), .css(), .slideUp()) m\u00e0 kh\u00f4ng chuy\u1ec3n \u0111\u1ed5i.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>$(\"#logo\")<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ch\u1eadm h\u01a1n, v\u00ec jQuery c\u1ea7n x\u1eed l\u00fd n\u1ed9i b\u1ed9 \u0111\u1ec3 chuy\u1ec3n th\u00e0nh \u0111\u1ed1i t\u01b0\u1ee3ng jQuery, d\u00f9 s\u1ef1 ch\u00eanh l\u1ec7ch r\u1ea5t nh\u1ecf trong c\u00e1c thao t\u00e1c \u0111\u01a1n gi\u1ea3n.<\/li>\n\n\n\n<li>Tr\u1ea3 v\u1ec1 m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng jQuery, r\u1ea5t ti\u1ec7n \u0111\u1ec3 thao t\u00e1c ti\u1ebfp nh\u01b0: .hide(), .css(), .animate(),&#8230;<\/li>\n\n\n\n<li>H\u1ed7 tr\u1ee3 cross-browser, x\u1eed l\u00fd c\u00e1c v\u1ea5n \u0111\u1ec1 t\u01b0\u01a1ng th\u00edch gi\u1eefa tr\u00ecnh duy\u1ec7t t\u1ed1t h\u01a1n.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-xem-xet-do\u1ea1n-ma-d\u01b0\u1edbi-day-n\u1ebfu-co-5-ph\u1ea7n-t\u1eed-lt-div-gt-tren-trang-thi-s\u1ef1-khac-bi\u1ec7t-gi\u1eefa-th\u1eddi-gian-b\u1eaft-d\u1ea7u-va-k\u1ebft-thuc-d\u01b0\u1ee3c-hi\u1ec3n-th\u1ecb-la-bao-nhieu\"><strong>Xem x\u00e9t \u0111o\u1ea1n m\u00e3 d\u01b0\u1edbi \u0111\u00e2y. N\u1ebfu c\u00f3 5 ph\u1ea7n t\u1eed &lt;div&gt; tr\u00ean trang, th\u00ec s\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa th\u1eddi gian b\u1eaft \u0111\u1ea7u v\u00e0 k\u1ebft th\u00fac \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb l\u00e0 bao nhi\u00eau?<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>function getMinsSecs() {\n\u00a0\u00a0var dt = new Date();\n\u00a0\u00a0return dt.getMinutes()+\":\"+dt.getSeconds();\n}\n$( \"input\" ).on( \"click\", function() {\n\u00a0\u00a0$( \"p\" ).append( \"Start time: \" + getMinsSecs() + \"&lt;br \/>\" );\n\u00a0\u00a0$( \"div\" ).each(function( i ) {\n\u00a0\u00a0\u00a0\u00a0$( this ).fadeOut( 1000 * ( i * 2 ) );\n\u00a0\u00a0});\n\u00a0\u00a0$( \"div\" ).promise().done(function() {\n\u00a0\u00a0\u00a0\u00a0$( \"p\" ).append( \"End time: \" + getMinsSecs() + \"&lt;br \/>\" );\n\u00a0\u00a0});\n});<\/code><\/pre>\n\n\n\n<p>Gi\u1ea3 s\u1eed c\u00f3 5 ph\u1ea7n t\u1eed &lt;div&gt;, th\u00ec .each() s\u1ebd ch\u1ea1y qua t\u1eebng ph\u1ea7n t\u1eed v\u1edbi index i t\u1eeb 0 \u0111\u1ebfn 4. V\u1edbi $( this ).fadeOut( 1000 * ( i * 2 ) );, th\u1eddi gian fadeOut t\u0103ng d\u1ea7n theo index:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>div[0]: 1000 \u00d7 (0\u00d72) = 0 ms<\/li>\n\n\n\n<li>div[1]: 1000 \u00d7 (1\u00d72) = 2000 ms<\/li>\n\n\n\n<li>div[2]: 1000 \u00d7 (2\u00d72) = 4000 ms<\/li>\n\n\n\n<li>div[3]: 1000 \u00d7 (3\u00d72) = 6000 ms<\/li>\n\n\n\n<li>div[4]: 1000 \u00d7 (4\u00d72) = 8000 ms<\/li>\n<\/ul>\n\n\n\n<p>Khi t\u1ea5t c\u1ea3 c\u00e1c hi\u1ec7u \u1ee9ng .fadeOut() ho\u00e0n t\u1ea5t, .promise().done() m\u1edbi \u0111\u01b0\u1ee3c g\u1ecdi. V\u1eady th\u1eddi gian t\u1ed5ng \u0111\u1ec3 ch\u1edd div cu\u1ed1i c\u00f9ng fadeOut xong l\u00e0 8000 ms = 8 gi\u00e2y.<\/p>\n\n\n\n<p>Ngo\u00e0i ra, b\u1ea1n c\u1ea7n l\u01b0u \u00fd:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>.promise().done() ch\u1ec9 \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t sau khi t\u1ea5t c\u1ea3 c\u00e1c hi\u1ec7u \u1ee9ng ho\u1ea1t \u0111\u1ed9ng tr\u00ean t\u1eadp h\u1ee3p c\u00e1c ph\u1ea7n t\u1eed ($(&#8220;div&#8221;)) ho\u00e0n th\u00e0nh.<\/li>\n\n\n\n<li>Do \u0111\u00f3, th\u1eddi gian k\u1ebft th\u00fac ph\u1ee5 thu\u1ed9c v\u00e0o th\u1eddi gian d\u00e0i nh\u1ea5t c\u1ee7a b\u1ea5t k\u1ef3 .fadeOut() n\u00e0o \u0111ang th\u1ef1c hi\u1ec7n. Trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y, div cu\u1ed1i m\u1ea5t 8 gi\u00e2y.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><strong>T\u1ed5ng k\u1ebft<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00e1c c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery tr\u00ean \u0111\u00e2y gi\u00fap b\u1ea1n \u00f4n luy\u1ec7n c\u1ea3 ki\u1ebfn th\u1ee9c l\u00fd thuy\u1ebft v\u00e0 kinh nghi\u1ec7m th\u1ef1c ti\u1ec5n. Khi b\u1ea1n hi\u1ec3u \u0111\u01b0\u1ee3c c\u1ea5u tr\u00fac c\u00e2u h\u1ecfi, n\u1eafm r\u00f5 c\u00e1c d\u1ea1ng th\u01b0\u1eddng g\u1eb7p v\u00e0 bi\u1ebft c\u00e1ch tr\u00ecnh b\u00e0y c\u00e2u tr\u1ea3 l\u1eddi m\u1ea1ch l\u1ea1c, b\u1ea1n \u0111\u00e3 n\u1eafm trong tay ch\u00eca kh\u00f3a \u0111\u1ec3 t\u1ea1o \u1ea5n t\u01b0\u1ee3ng m\u1ea1nh v\u1edbi nh\u00e0 tuy\u1ec3n d\u1ee5ng. Hy v\u1ecdng qua b\u00e0i vi\u1ebft, b\u1ea1n s\u1ebd t\u1ed5ng h\u1ee3p \u0111\u01b0\u1ee3c nh\u1eefng c\u00e2u h\u1ecfi c\u1ea7n thi\u1ebft v\u00e0 t\u1ef1 tin trong c\u00e1c bu\u1ed5i ph\u1ecfng v\u1ea5n s\u1eafp t\u1edbi nh\u00e9.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>C\u00e1c c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery l\u00e0 m\u1ed9t ph\u1ea7n kh\u00f4ng th\u1ec3 thi\u1ebfu trong qu\u00e1 tr\u00ecnh tuy\u1ec3n d\u1ee5ng c\u00e1c v\u1ecb tr\u00ed li\u00ean quan \u0111\u1ebfn ph\u00e1t tri\u1ec3n front-end. T\u00f9y theo c\u1ea5p \u0111\u1ed9 kinh nghi\u1ec7m, nh\u00e0 tuy\u1ec3n d\u1ee5ng s\u1ebd c\u00f3 nh\u1eefng c\u00e1ch ti\u1ebfp c\u1eadn kh\u00e1c nhau: t\u1eeb ki\u1ec3m tra ki\u1ebfn th\u1ee9c c\u00fa ph\u00e1p, hi\u1ec3u bi\u1ebft v\u1ec1 DOM, \u0111\u1ebfn [&hellip;]<\/p>\n","protected":false},"author":207,"featured_media":90900,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109,10344,105],"tags":[],"class_list":["post-90102","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it","category-javascript","category-phong-van-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery th\u01b0\u1eddng g\u1eb7p m\u1ecdi c\u1ea5p \u0111\u1ed9 - ITviec Blog<\/title>\n<meta name=\"description\" content=\"T\u1ed5ng h\u1ee3p c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery cho Front-End Developer m\u1ecdi c\u1ea5p \u0111\u1ed9, k\u00e8m theo g\u1ee3i \u00fd tr\u1ea3 l\u1eddi v\u00e0 v\u00ed d\u1ee5 code chi ti\u1ebft.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery th\u01b0\u1eddng g\u1eb7p m\u1ecdi c\u1ea5p \u0111\u1ed9\" \/>\n<meta property=\"og:description\" content=\"C\u00e1c c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery l\u00e0 m\u1ed9t ph\u1ea7n kh\u00f4ng th\u1ec3 thi\u1ebfu trong qu\u00e1 tr\u00ecnh tuy\u1ec3n d\u1ee5ng c\u00e1c v\u1ecb tr\u00ed li\u00ean quan \u0111\u1ebfn ph\u00e1t tri\u1ec3n front-end. T\u00f9y theo c\u1ea5p \u0111\u1ed9 kinh\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-01T13:06:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-01T13:06:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/cau-hoi-phong-van-jquery-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1347\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Uyen Ngo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Uyen Ngo\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"34 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery th\u01b0\u1eddng g\u1eb7p m\u1ecdi c\u1ea5p \u0111\u1ed9 - ITviec Blog","description":"T\u1ed5ng h\u1ee3p c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery cho Front-End Developer m\u1ecdi c\u1ea5p \u0111\u1ed9, k\u00e8m theo g\u1ee3i \u00fd tr\u1ea3 l\u1eddi v\u00e0 v\u00ed d\u1ee5 code chi ti\u1ebft.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/","og_locale":"vi_VN","og_type":"article","og_title":"Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery th\u01b0\u1eddng g\u1eb7p m\u1ecdi c\u1ea5p \u0111\u1ed9","og_description":"C\u00e1c c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery l\u00e0 m\u1ed9t ph\u1ea7n kh\u00f4ng th\u1ec3 thi\u1ebfu trong qu\u00e1 tr\u00ecnh tuy\u1ec3n d\u1ee5ng c\u00e1c v\u1ecb tr\u00ed li\u00ean quan \u0111\u1ebfn ph\u00e1t tri\u1ec3n front-end. T\u00f9y theo c\u1ea5p \u0111\u1ed9 kinh","og_url":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-09-01T13:06:39+00:00","article_modified_time":"2025-09-01T13:06:42+00:00","og_image":[{"width":2560,"height":1347,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/cau-hoi-phong-van-jquery-scaled.png","type":"image\/png"}],"author":"Uyen Ngo","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Uyen Ngo","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"34 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/"},"author":{"name":"Uyen Ngo","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20"},"headline":"Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery th\u01b0\u1eddng g\u1eb7p m\u1ecdi c\u1ea5p \u0111\u1ed9","datePublished":"2025-09-01T13:06:39+00:00","dateModified":"2025-09-01T13:06:42+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/"},"wordCount":9287,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/cau-hoi-phong-van-jquery-scaled.png","articleSection":["Chuy\u00ean m\u00f4n IT","JavaScript","Ph\u1ecfng v\u1ea5n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/","url":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/","name":"Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery th\u01b0\u1eddng g\u1eb7p m\u1ecdi c\u1ea5p \u0111\u1ed9 - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/cau-hoi-phong-van-jquery-scaled.png","datePublished":"2025-09-01T13:06:39+00:00","dateModified":"2025-09-01T13:06:42+00:00","description":"T\u1ed5ng h\u1ee3p c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery cho Front-End Developer m\u1ecdi c\u1ea5p \u0111\u1ed9, k\u00e8m theo g\u1ee3i \u00fd tr\u1ea3 l\u1eddi v\u00e0 v\u00ed d\u1ee5 code chi ti\u1ebft.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/cau-hoi-phong-van-jquery-scaled.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/cau-hoi-phong-van-jquery-scaled.png","width":800,"height":421,"caption":"c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jquery - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/cau-hoi-phong-van-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Top 30+ c\u00e2u h\u1ecfi ph\u1ecfng v\u1ea5n jQuery th\u01b0\u1eddng g\u1eb7p m\u1ecdi c\u1ea5p \u0111\u1ed9"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/f4cd1226846e0258c664e170d3e52d20","name":"Uyen Ngo","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/ngo-thieu-my-uyen-author-e1709880420317-100x100.jpg","caption":"Uyen Ngo"},"url":"https:\/\/itviec.com\/blog\/author\/uyen-ngo\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/90102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/207"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=90102"}],"version-history":[{"count":2,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/90102\/revisions"}],"predecessor-version":[{"id":90901,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/90102\/revisions\/90901"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/90900"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=90102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=90102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=90102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}