{"id":968,"date":"2012-03-05T09:24:20","date_gmt":"2012-03-05T09:24:20","guid":{"rendered":"http:\/\/congnghepc.com\/2012\/03\/05\/tim-hieu-ve-co-che-hoat-dong-cua-jquery\/"},"modified":"2025-04-15T11:06:51","modified_gmt":"2025-04-15T04:06:51","slug":"tim-hieu-ve-co-che-hoat-dong-cua-jquery","status":"publish","type":"post","link":"https:\/\/tapchicntt.com\/tim-hieu-ve-co-che-hoat-dong-cua-jquery\/","title":{"rendered":"T\u00ecm hi\u1ec3u v\u1ec1 c\u01a1 ch\u1ebf ho\u1ea1t \u0111\u1ed9ng c\u1ee7a jQuery"},"content":{"rendered":"\n

V\u1ec1 m\u1eb7t b\u1ea3n ch\u1ea5t, jQuery<\/strong> l\u00e0 th\u01b0 vi\u1ec7n JavaScript<\/strong>, hay c\u00f2n g\u1ecdi l\u00e0 JavaScript Framework<\/strong>, h\u1ed7 tr\u1ee3 b\u1ea1n trong vi\u1ec7c x\u1eed l\u00fd HTML<\/strong>, x\u1eed l\u00fd c\u00e1c s\u1ef1 ki\u1ec7n trong trang HTML<\/strong>, t\u1ea1o c\u00e1c hi\u1ec7u \u1ee9ng \u0111\u1eb9p, x\u1eed l\u00fd Ajax<\/strong> nhanh v\u00e0 ng\u1eafn g\u1ecdn h\u01a1n cho \u1ee9ng d\u1ee5ng website c\u1ee7a ng\u01b0\u1eddi s\u1eed d\u1ee5ng.<\/p>\n\n\n\n

1. C\u01a1 b\u1ea3n:<\/h3>\n\n\n\n

B\u00e0i th\u1eed nghi\u1ec7m d\u01b0\u1edbi \u0111\u00e2y \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng \u0111\u1ec3 gi\u00fap c\u00e1c b\u1ea1n m\u1edbi b\u1eaft \u0111\u1ea7u s\u1eed d\u1ee5ng jQuery<\/strong>. N\u1ebfu ch\u01b0a c\u00f3 s\u1eb5n 1 trang chuy\u00ean \u0111\u1ec3 test th\u00ec h\u00e3y b\u1eaft \u0111\u1ea7u b\u1eb1ng c\u00e1ch t\u1ea1o trang HTML <\/strong>m\u1edbi v\u1edbi m\u00e3 ngu\u1ed3n nh\u01b0 d\u01b0\u1edbi \u0111\u00e2y: <\/p>\n\n\n

\n<!doctype html>\n<html>\n  <head>\n    <meta charset=\u201dutf-8\u2033>\n    <title>Demo<\/title>\n  <\/head>\n  <body>\n    <a href=\u201dhttp:\/\/jquery.com\/\u201d>jQuery<\/a>\n    <script src=\u201djquery.js\u201d><\/script>\n    <script>\n     \n    <\/script>\n  <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
Thay \u0111\u1ed5i thu\u1ed9c t\u00ednh src trong th\u1ebb script \u0111\u1ec3 tr\u1ecf t\u1edbi file jquery.js<\/strong> c\u1ee7a b\u1ea1n. V\u00ed d\u1ee5, n\u1ebfu file jquery.js <\/strong>n\u1eb1m c\u00f9ng th\u01b0 m\u1ee5c v\u1edbi file HTML th\u00ec ch\u00fang ta c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng:<\/p>\n\n\n
\n<script src=\u201djquery.js\u201d><\/script>\n<\/pre><\/div>\n\n\n
Phi\u00ean ban jQuery m\u1edbi nh\u1ea5t \u0111\u01b0\u1ee3c download t\u1ea1i \u0111\u00e2y<\/a>.<\/p>\n\n\n\n
2. Gh\u00e9p code tr\u00ean trang c\u00f3 s\u1eb5n:<\/h3>\n\n\n\n
M\u1ed9t trong nh\u1eefng vi\u1ec7c \u0111\u1ea7u ti\u00ean m\u00e0 h\u1ea7u h\u1ebft c\u00e1c l\u1eadp tr\u00ecnh vi\u00ean Javascript \u0111\u1ec1u mu\u1ed1n l\u00e0m l\u00e0 gh\u00e9p code t\u1edbi ch\u01b0\u01a1ng tr\u00ecnh, \u1ee9ng d\u1ee5ng ch\u00ednh c\u1ee7a h\u1ecd. Ch\u1eb3ng h\u1ea1n nh\u01b0 sau:<\/p>\n\n\n
\nwindow.onload = function(){ alert("welcome"); }\n<\/pre><\/div>\n\n\n
B\u00ean trong \u0111o\u1ea1n code \u0111\u00f3 l\u00e0 nh\u1eefng g\u00ec ch\u00fang ta mu\u1ed1n tr\u00ecnh duy\u1ec7t ho\u1ea1t \u0111\u1ed9ng khi website \u0111\u01b0\u1ee3c t\u1ea3i. Nh\u01b0ng v\u1ea5n \u0111\u1ec1 x\u1ea3y ra \u1edf \u0111\u00e2y l\u00e0 \u0111o\u1ea1n m\u00e3 Javascript <\/strong>s\u1ebd kh\u00f4ng ch\u1ea1y cho t\u1edbi khi t\u1ea5t c\u1ea3 c\u00e1c file \u1ea3nh \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea3i h\u1ebft v\u1ec1 m\u00e1y (c\u00f3 bao g\u1ed3m c\u00e1c banner qu\u1ea3ng c\u00e1o).<\/p>\n\n\n\n
L\u00fd do s\u1eed d\u1ee5ng window.onload<\/code> l\u00e0 v\u00ec c\u00e1c v\u0103n b\u1ea3n HTML v\u1eabn ch\u01b0a \u0111\u01b0\u1ee3c t\u1ea3i h\u1ebft trong l\u1ea7n ho\u1ea1t \u0111\u1ed9ng \u0111\u1ea7u ti\u00ean.<\/p>\n\n\n\n
\u0110\u1ec3 gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 tr\u00ean th\u00ec jQuery <\/strong>\u0111\u00e3 c\u00f3 s\u1eb5n 1 m\u1ec7nh \u0111\u1ec1 c\u00f3 kh\u1ea3 n\u0103ng ki\u1ec3m tra c\u00e1c bi\u1ebfn document v\u00e0 ch\u1edd \u0111\u1ee3i cho t\u1edbi khi \u0111\u01b0\u1ee3c c\u1ed1 \u0111\u1ecbnh, \u0111\u00f3 ch\u00ednh l\u00e0 event<\/a> ready: <\/p>\n\n\n
\n$(document).ready(function(){\n        \/\/ Your code here\n });\n<\/pre><\/div>\n\n\n
B\u00ean trong event ready \u0111\u00f3, ch\u00fang ta ch\u00e8n th\u00eam s\u1ef1 ki\u1ec7n handler click<\/strong> t\u1edbi \u0111\u01b0\u1eddng d\u1eabn:<\/p>\n\n\n
\n$(document).ready(function(){\n   $("a").click(function(event){\n     alert("Thanks for visiting!");\n   });\n });\n<\/pre><\/div>\n\n\n
L\u01b0u l\u1ea1i file HTML v\u00e0 t\u1ea3i l\u1ea1i trang test n\u00e0y, nh\u1ea5n v\u00e0o \u0111\u01b0\u1eddng d\u1eabn tr\u00ean trang \u0111\u00f3 s\u1ebd hi\u1ec3n th\u1ecb c\u1eeda s\u1ed5 c\u1ea3nh b\u00e1o d\u01b0\u1edbi d\u1ea1ng pop up tr\u01b0\u1edbc khi chuy\u1ec3n t\u1edbi trang jQuery ch\u00ednh.<\/p>\n\n\n\n
\u0110\u1ed1i v\u1edbi c\u00e1c click c\u0169ng nh\u01b0 nhi\u1ec1u event kh\u00e1c, ch\u00fang ta c\u00f3 th\u1ec3 ch\u1eb7n c\u00e1c thao t\u00e1c m\u1eb7c \u0111\u1ecbnh t\u1ea1i \u0111\u00e2y, nh\u01b0 v\u00ed d\u1ee5 tr\u00ean th\u00ec sau \u0111\u01b0\u1eddng d\u1eabn nh\u1ea5n v\u00e0o l\u00e0 trang jquery.com<\/strong> b\u1eb1ng c\u00e1ch g\u1ecdi event.preventDefault()<\/code><\/strong> trong handler event<\/strong><\/p>\n\n\n
\n$(document).ready(function(){\n   $("a").click(function(event){\n     alert("As you can see, the link no longer took you to jquery.com");\n     event.preventDefault();\n   });\n });\n<\/pre><\/div>\n\n\n
3. V\u00ed d\u1ee5 ho\u00e0n ch\u1ec9nh:<\/h3>\n\n\n\n
D\u01b0\u1edbi \u0111\u00e2y l\u00e0 1 v\u00ed d\u1ee5 ho\u00e0n ch\u1ec9nh c\u1ee7a file HTML d\u1ef1a theo c\u00e1c \u0111o\u1ea1n m\u00e3 tr\u00ean. L\u01b0u \u00fd r\u1eb1ng \u0111\u01b0\u1eddng d\u1eabn t\u1ea1i \u0111\u00e2y s\u1ebd k\u1ebft n\u1ed1i t\u1edbi CDN c\u1ee7a Google<\/a> \u0111\u1ec3 t\u1ea3i file g\u1ed1c c\u1ee7a jQuery.<\/p>\n\n\n\n
B\u00ean c\u1ea1nh \u0111\u00f3, \u0111o\u1ea1n script t\u00f9y ch\u1ec9nh c\u1ee7a ch\u00fang ta \u0111\u01b0\u1ee3c bao g\u1ed3m trong th\u1ebb <head>, th\u00ec th\u00edch h\u1ee3p h\u01a1n l\u00e0 \u0111\u1eb7t n\u00f3 v\u00e0o 1 file ri\u00eang bi\u1ec7t, sau \u0111\u00f3 truy\u1ec1n th\u00f4ng s\u1ed1 t\u1edbi file \u0111\u00f3 qua thu\u1ed9c t\u00ednh src <\/strong>t\u01b0\u01a1ng \u1ee9ng c\u1ee7a element<\/strong>: <\/p>\n\n\n
\n<!DOCTYPE html>\n <html lang=\u201den\u201d>\n <head>\n   <meta charset=\u201dutf-8\u2033>\n   <title>jQuery demo<\/title>\n <\/head>\n <body>\n   <a href=\u201dhttp:\/\/jquery.com\/\u201d>jQuery<\/a>\n   <script src=\u201dhttp:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.5\/jquery.min.js\u201d><\/script>\n   <script>\n     $(document).ready(function(){\n       $(\u201ca\u201d).click(function(event){\n         alert(\u201cAs you can see, the link no longer took you to jquery.com\u201d);\n         event.preventDefault();\n       });\n     });\n   <\/script>\n <\/body>\n <\/html>\n<\/pre><\/div>\n\n\n
4. X\u00f3a b\u1ecf ho\u1eb7c g\u00e1n th\u00eam class HTML:<\/h3>\n\n\n\n
L\u01b0u \u00fd r\u1eb1ng m\u1ed9t s\u1ed1 \u0111o\u1ea1n m\u00e3 jQuery <\/strong>v\u00ed d\u1ee5 d\u01b0\u1edbi \u0111\u00e2y c\u1ea7n ph\u1ea3i \u0111\u1eb7t b\u00ean trong event ready<\/strong> \u0111\u1ec3 \u0111\u01b0\u1ee3c th\u1ef1c thi khi website s\u1eb5n s\u00e0ng trong tr\u1ea1ng th\u00e1i \u201cl\u00e0m vi\u1ec7c\u201d. M\u1ed9t trong nh\u1eefng t\u00e1c v\u1ee5 ph\u1ed5 bi\u1ebfn l\u00e0 g\u00e1n th\u00eam ho\u1eb7c x\u00f3a b\u1edbt class.<\/p>\n\n\n\n
Tr\u01b0\u1edbc ti\u00ean, h\u00e3y th\u1eed g\u00e1n 1 s\u1ed1 th\u00f4ng tin style v\u00e0o trong th\u1ebb <head><\/strong> c\u1ee7a trang web, ch\u1eb3ng h\u1ea1n nh\u01b0 sau: <\/p>\n\n\n
\n<style>\n    a.test { font-weight: bold; }\n<\/style>\n<\/pre><\/div>\n\n\n
Ti\u1ebfp theo, g\u00e1n th\u00eam addClass<\/a> v\u00e0o trong \u0111o\u1ea1n m\u00e3:<\/p>\n\n\n
\n$("a").addClass("test");\n<\/pre><\/div>\n\n\n
To\u00e0n b\u1ed9 c\u00e1c th\u00e0nh ph\u1ea7n \u0111\u00f3 s\u1ebd \u0111\u01b0\u1ee3c b\u00f4i \u0111\u1eadm. C\u00f2n n\u1ebfu mu\u1ed1n g\u00f5 b\u1ecf class, s\u1eed d\u1ee5ng removeClass<\/a>:<\/p>\n\n\n
\n$("a").removeClass("test");\n<\/pre><\/div>\n\n\n
HTML cho ph\u00e9p g\u00e1n nhi\u1ec1u class v\u00e0o 1 element.<\/p>\n\n\n\n
5. M\u1ed9t s\u1ed1 hi\u1ec7u \u1ee9ng \u0111\u1eb7c bi\u1ec7t:<\/h3>\n\n\n\n
Trong jQuery \u0111\u00e3 c\u00f3 s\u1eb5n m\u1ed9t s\u1ed1 hi\u1ec7u \u1ee9ng<\/a> kh\u00e1 \u0111\u1eb7c bi\u1ec7t \u0111\u1ec3 l\u00e0m cho trang web c\u1ee7a b\u1ea1n tr\u1edf n\u00ean \u0111\u1eb7c bi\u1ec7t. \u0110\u1ec3 ch\u00e8n v\u00e0o trang test c\u1ee7a ch\u00fang ta, h\u00e3y thay \u0111\u1ed5i s\u1ef1 ki\u1ec7n click \u0111\u00e3 \u0111\u01b0\u1ee3c g\u00e1n v\u00e0o tr\u01b0\u1edbc \u0111\u00f3:<\/p>\n\n\n
\n$(\u201ca\u201d).click(function(event){\n   event.preventDefault();\n   $(this).hide(\u201cslow\u201d);\n });\n<\/pre><\/div>\n\n\n
Gi\u1edd \u0111\u00e2y, khi nh\u1ea5n v\u00e0o b\u1ea5t k\u1ef3 \u0111\u01b0\u1eddng d\u1eabn n\u00e0o th\u00ec trang web s\u1ebd t\u1eeb t\u1eeb bi\u1ebfn m\u1ea5t.<\/p>\n\n\n\n
6. Callback v\u00e0 Functions:<\/h3>\n\n\n\n
Th\u1ef1c ch\u1ea5t, callback <\/strong>ch\u00ednh l\u00e0 1 ch\u1ee9c n\u0103ng c\u00f3 nhi\u1ec7m v\u1ee5 chuy\u1ec3n argument t\u1edbi 1 ch\u1ee9c n\u0103ng kh\u00e1c v\u00e0 \u0111\u01b0\u1ee3c th\u1ef1c thi sau khi function parent <\/strong>ho\u00e0n t\u1ea5t.<\/p>\n\n\n\n
\u0110i\u1ec3m \u0111\u1eb7c bi\u1ec7t c\u1ee7a callback<\/strong> l\u00e0 function s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb ngay sau khi function <\/strong>\u1edf b\u1eadc parent <\/strong>c\u00f3 th\u1ec3 th\u1ef1c thi tr\u01b0\u1edbc khi h\u00e0nh \u0111\u1ed9ng c\u1ee7a callback<\/strong> x\u1ea3y ra. M\u1ed9t \u0111i\u1ec3m quan tr\u1ecdng kh\u00e1c c\u1ea7n bi\u1ebft \u1edf \u0111\u00e2y l\u00e0 l\u00e0m th\u1ebf n\u00e0o callback <\/strong>\u0111\u01b0\u1ee3c \u201cg\u1ecdi\u201d ra \u0111\u00fang th\u1eddi \u0111i\u1ec3m.<\/p>\n\n\n\n
Callback<\/strong> kh\u00f4ng \u0111i k\u00e8m argument<\/code> <\/strong>c\u00f3 c\u00fa ph\u00e1p chung nh\u01b0 sau:<\/p>\n\n\n
\n$.get('myhtmlpage.html', myCallBack);\n<\/pre><\/div>\n\n\n
L\u01b0u \u00fd r\u1eb1ng tham s\u1ed1 th\u1ee9 2 \u1edf \u0111\u00e2y \u0111\u01a1n gi\u1ea3n ch\u1ec9 l\u00e0 t\u00ean c\u1ee7a function. C\u00e1c function <\/strong>trong Javascript<\/strong> l\u00e0 First class citizens<\/strong> v\u00e0 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng l\u00e0m bi\u1ebfn t\u00f9y ch\u1ec9nh, \u0111\u01b0\u1ee3c th\u1ef1c thi t\u1ea1i c\u00e1c th\u1eddi \u0111i\u1ec3m sau \u0111\u00f3.<\/p>\n\n\n\n
Callback <\/strong>v\u1edbi argument:<\/strong> c\u00e2u h\u1ecfi \u0111\u01b0\u1ee3c \u0111\u1eb7t ra \u1edf \u0111\u00e2y l\u00e0 c\u00e1c b\u1ea1n s\u1ebd ph\u1ea3i l\u00e0m g\u00ec n\u1ebfu c\u00f3 c\u00e1c argument c\u1ea7n ph\u1ea3i b\u1ecf qua? N\u1ebfu s\u1eed d\u1ee5ng c\u00fa ph\u00e1p th\u00f4ng th\u01b0\u1eddng nh\u01b0 d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n
\n$.get('myhtmlpage.html', myCallBack(param1, param2));\n<\/pre><\/div>\n\n\n
th\u00ec s\u1ebd kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng, b\u1edfi v\u00ec h\u1ec7 th\u1ed1ng s\u1ebd g\u1ecdi:<\/p>\n\n\n
\nmyCallBack(param1, param2);\n<\/pre><\/div>\n\n\n
v\u00e0 sau \u0111\u00f3 b\u1ecf qua gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 d\u01b0\u1edbi d\u1ea1ng tham s\u1ed1 th\u1ee9 2 t\u1edbi $.get()<\/a><\/p>\n\n\n\n
Tuy nhi\u00ean, v\u1ea5n \u0111\u1ec1 x\u1ea3y ra v\u1edbi v\u00ed d\u1ee5 tr\u00ean l\u00e0 myCallBack(param1, param2)<\/strong> \u0111\u01b0\u1ee3c \u0111\u00e1nh gi\u00e1 tr\u01b0\u1edbc khi \u0111\u01b0\u1ee3c chuy\u1ec3n \u0111i d\u01b0\u1edbi d\u1ea1ng 1 function. Javascript <\/strong>v\u00e0 jQuery <\/strong>extension th\u01b0\u1eddng ph\u1ea3i s\u1eed d\u1ee5ng c\u00e1c pointer function trong nh\u1eefng tr\u01b0\u1eddng h\u1ee3p nh\u01b0 th\u1ebf n\u00e0y, ch\u1eb3ng h\u1ea1n nh\u01b0 function setTimeout…<\/p>\n\n\n\n
V\u00ed d\u1ee5 nh\u01b0 d\u01b0\u1edbi \u0111\u00e2y, 1 ch\u1ee9c n\u0103ng anonymous <\/strong>\u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o (\u0111\u01a1n gi\u1ea3n ch\u1ec9 l\u00e0 1 kh\u1ed1i statement) v\u00e0 \u0111\u01b0\u1ee3c \u0111\u0103ng k\u00fd d\u01b0\u1edbi d\u1ea1ng function callback<\/strong>, l\u01b0u \u00fd t\u1edbi c\u00e1ch s\u1eed d\u1ee5ng c\u1ee7a ‘function(){‘<\/strong>. H\u00e0m anonymous <\/strong>th\u1ef1c hi\u1ec7n \u0111\u00fang 1 ch\u1ee9c n\u0103ng duy nh\u1ea5t, \u0111\u00f3 l\u00e0 g\u1ecdi ra myCallBack <\/strong>v\u1edbi gi\u00e1 tr\u1ecb \u0111i k\u00e8m c\u1ee7a param1 param2. <\/p>\n\n\n
\n$.get('myhtmlpage.html', function() {\n    myCallBack(param1, param2); \n});\n<\/pre><\/div>\n\n\n
Trong \u0111\u00f3 param1 <\/strong>v\u00e0 param2 <\/strong>\u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng d\u01b0\u1edbi d\u1ea1ng callback <\/strong>khi h\u00e0m ‘$.get’<\/strong> ho\u00e0n t\u1ea5t qu\u00e1 tr\u00ecnh t\u1ea3i trang web.<\/p>\n","protected":false},"excerpt":{"rendered":"
V\u1ec1 m\u1eb7t b\u1ea3n ch\u1ea5t, jQuery l\u00e0 th\u01b0 vi\u1ec7n JavaScript, hay c\u00f2n g\u1ecdi l\u00e0 JavaScript Framework, h\u1ed7 tr\u1ee3 b\u1ea1n trong vi\u1ec7c […]<\/p>\n","protected":false},"author":6,"featured_media":9667,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[144],"tags":[],"class_list":["post-968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"views":428,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=968"}],"version-history":[{"count":25,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/968\/revisions"}],"predecessor-version":[{"id":9689,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/968\/revisions\/9689"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media\/9667"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}