Đang tải... (xem toàn văn)
Với những bạn lập trình Web thì việc sử dung Jquery đã trở nên quen thuộc và cần thiết vì những lợi ích mà nó mang lại cho trang Web của chung ta. Tài liệu tổng hợp các bài viết và các thủ thuật về Jquery từ cơ bản đến nâng cao. Hướng dẫn chi tiết và rất dễ thực hành.
Làm quen với thư viện jQuery từ A đến Z 23:12 pm GMT +7 Hanoi Học tập và làm quen với thư viện jQuery , hỗ trợ rất nhiều cho lập trình viên trong việc viết các mã nguồn javascript nhanh hơn và xử lý tốt hơn Đây là bài đầu tiên trong chuỗi bài sẽ đưa các bạn từng bước làm quen và sử dụng một trong những thư viện JavaScript nổi tiếng nhất-JQuery. Chúng ta sẽ bước vào thư viện này một cách không vội vã theo kiểu cấp tốc và dần dần làm giàu thêm các kiến thức về JQuery để có thể sử dụng nó tạo ra những thứ mà bạn và người dùng cảm thấy thích thú. Chuỗi bài này dành cho những người đã nắm vững những kỹ năng về HTML và CSS. Vì vậy nếu bạn chưa từng biết đến hai ngôn ngữ trên, mình khuyên bạn nên tìm hiểu HTML và CSS trước rồi sau đó hãy quay trở lại đọc tiếp. JQuery là gì? Mục đích của JQuery là làm cho JavaScript trở nên dễ dàng tiếp cận và sử dụng hơn vì thế lập trình viên sẽ phải viết ít PHP hơn rất nhiều so với việc sử dụng JavaScript thuần túy. Ví dụ, trong thực tế khi làm việc với JavaScript thuần túy bạn sẽ gặp vô số khó khăn khi giải quyết việc trình duyệt web này hiển thị PHP của bạn theo cách này còn trình duyệt web khác lại hiển thị kiểu khác. Thay vì tiêu tốn quá nhiều thời gian cho việc viết các đoạn mã khác nhau để giải quyết vấn đề trên, bạn chỉ việc viết một đoạn mã duy nhất và JQuery sẽ giải quyết giúp bạn các vấn đề về hiển thị trên các trình duyệt web khác nhau. Trong bài viết này Chúng ta sẽ bắt đầu từ những thứ cơ bản nhất. Trước hết bạn sẽ học cách làm thế nào để nhúng JQuery vào trang web của bạn để sử dụng nó. Chúng ta sẽ xem xét cách lựa chọn và tương tác với các element trong trang và sau đó để cho trực quan hơn ta sẽ làm một ví dụ cho một element di chuyển trong trang của chúng ta. Mỗi bài viết sau mình sẽ bắt đầu tiếp từ phần kết thúc của bài viết trước vì vậy các bạn nên theo dõi các bài viết một cách lần lượt. Các bạn có thắc mắc gì hãy gửi lại cho mình trong phần comment. Và bây giờ, chúng ta cùng bắt đầu. Nhúng JQuery vào trang của bạn Trước khi chúng ta có thể sử dụng JQuery, ta cần phải nhúng thư viện này vào trang của chúng ta. Thư viện JQuery là một tệp tin javascript có đuôi .js, thư viện này chứa các đoạn mã làm nên tên tuổi của JQuery . Đầu tiên bạn có thể download JQuery và nhúng vào trang của bạn theo cách sau đây: CODE <script type="text/javascript" src="path/to/jquery.min.js"> Nếu bạn làm theo cách này hãy download thư viện JQuery phiên bản minified, nó sẽ giảm bớt gánh nặng cho server của bạn. Cách thứ hai, cũng là cách được ưa chuộng hơn, đó là nhúng từ Google’s Content Delivery Network, hay gọi tắt là CDN. Có ít nhất hai ưu điểm khi dùng cách này, thứ nhất bạn luôn đảm bảo được sử dụng thư viện phiên bản mới nhất, thứ hai server của bạn sẽ không phải load thư viện vì vậy tiết kiệm băng thông. Để nhúng từ CDN ta sử dụng dòng PHP tương tự như trên: CODE <script type="text/javascript" src="http://ajax.Googleapis.com/ajax/libs/jquery/1/jquery.min.js"> Đoạn mã trên luôn load phiên bản mới nhất của thư viện JQuery(tính đến trước khi phiên bản 2 được release), tuy nhiên nếu bạn muốn load một phiên bản cụ thể, bạn cũng có thể dùng đoạn PHP sau: CODE <script type="text/javascript" src="http://ajax.Googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> Bây giờ chúng ta sẽ viết một ít PHP Ta đã biết cách nhúng JQuery vào trang của ta, và sẽ viết một đoạn PHP xem JQuery hoạt động như thế nào. Bạn nhúng JQuery theo một trong hai cách nêu trên vào trang của bạn tuy nhiên bạn phải chờ cho trang của bạn load xong phần hiển thị nội dung của trang, điều đó có nghĩa là tất cả các nội dung HTML phải được load trước JQuery, và cuối cùng mới là đoạn mã: <script type="text/javascript"></script> Về mặt lý thuyết là như vậy, tuy nhiên bạn hoàn toàn có thể đặt đoạn mã trên vào giữa các thẻ <head></head> hay bất cứ chỗ nào trong trang HTML, khi làm như thế bạn phải tuân thủ ngyên tắc sau: CODE $(document).ready(function(){ //Tất cả các mã JQuery của bạn phải nằm trong function này }); Nguyên tắc trên đảm bảo tất cả các mã bạn viết chạy sau khi nội dung của trang đã được load đầy đủ. Nguyên tắc này chỉ phải tuân thủ khi bạn nhúng JQuery ở bất kỳ chỗ nào trong trang HTML trước khi bạn đóng thẻ </body>. Còn nếu bạn nhúng JQuery sau khi đóng thẻ </body> bạn không cần tuân thủ nguyên tắc này. Bên trong <script type=”text/javascript”></script> ta sẽ viết PHP của ta. Trước khi tương tác với các element, chúng ta sẽ tìm hiểu cách lựa chọn element. Nếu bạn biết về CSS, điều này hết sức dễ dàng. Để lựa chọn element trong JQuery, ta sử dụng dấu $ theo bởi dấu ngoặc đơn $(‘selector bạn chọn nằm ở đây’). Các selector là tất cả các selector hợp lệ bao gồm cả selector trong CSS3. Ví dụ để chọn tất cả các div trong trang của mình bạn chỉ việc viết: $ (‘div’), một vài ví dụ nữa: CODE $('div p') //chọn tất cả các paragraph nằm bên trong thẻ div. $('#something') //chọn element có id là 'something' $('.something') //chọn tất cả các element có class='something' Bạn hoàn toàn có thể chọn các element theo cách phức tạp hơn(Trong bài tiếp theo chúng ta sẽ dành nhiều thời gian để học cách lựa chọn các element phức tạp) $('div p#something a') //chọn tất cả các link nằm trong paragraph có id là ‘something’ nằm trong thẻ div. Bộ selector engine của JQuery có rất ít giới hạn, trong bài tới các bạn sẽ học cách khai thác điều này để tận dụng tối đa khả năng của nó. Còn bây giờ để mọi thứ đơn giản, mình sẽ làm một ví dụ đơn giản. Trong trang của ta, tạo một thẻ div mới như sau: CODE <div> <p>this is some text</p> </div> Và tạo luôn css cho thẻ này: CODE #something { width: 200px; height: 200px; background()-color: red; color: white; border: 4px solid black; margin: 100px 0 0 80px; } Làm cho nó chuyển động Để kết thúc bài này chúng ta sẽ làm cho phần <div> mà ta vừa tạo chuyển động trong trang của ta theo chiều từ trên xuống dưới đồng thời từ trái qua phải. Dựa vào những hiểu biết về lựa chọn selector, ta sẽ chọn selector của ta như sau: CODE $(‘something’) Tương tự, bạn hoàn toàn có thể chọn với dòng PHP $(‘div’) nếu bạn thích, tuy nhiên cá nhân mình, mình thích cụ thể hóa selector đến mức có thể. Sau khi đã chọn element, ta sử dụng hàm animate() của JQuery để làm cho thẻ div của ta chuyển động: CODE $('#something').animate({'margin-top': '300px', 'margin-left': '400px'},3000); Hàm animate() nhận 3 tham số truyền vào, tuy nhiên một trong 3 tham số trên là tuỳ chọn(không bắt buộc) CODE .animate(things to change, speed, callback); Ở đây ‘things to change’ là những thuộc tính của element mà ta muốn dịch chuyển, trong ví dụ của chúng ta đó là căn lề trên và lề trái. Cách mà ta truyền nhiều thuộc tính của element như sau: CODE .animate({'param': 'value', 'param2': 'value'}, speed, callback) Sau giá trị của mỗi thuộc tính bạn thêm dấu phẩy, ngoài ra sau giá trị của thuộc tính cuối cùng, ”speed” là thời gian chờ di chuyển hay: bao lâu trước khi element di chuyển. Khoảng thời gian này tính theo mili giây(ở trong ví dụ của ta 3000 = 3 giây). “callback” là hàm sẽ chạy tiếp theo sau khi hàm animate() chạy xong. Hiện tại ta không sử dụng tham số này. Cụ thể trong đoạn PHP của chúng ta: CODE $('#something').animate({'margin-top': '300px', 'margin-left': '400px'},3000); Chúng ta thay đổi căn lề trên của element từ 100px trong CSS lên 300px, và ta cũng thay đổi cả căn lề trái. Mở trang của bạn trong trình duyệt web, bạn sẽ thấy thẻ div chuyển động sau 3 giây. Và đây là những gì bạn vừa làm được: Hy vọng các bạn cảm thấy hứng thú với bài học đầu tiên về JQuery. Nếu các bạn có câu hỏi gì, hãy gửi lại cho mình trong phần comment, mình sẽ cố gắng trả lời sớm nhất có thể. Chúc vui vẻ! Tập tin đính kèm là file hướng dẫn rất đầy đủ tiếng việt do giảng viên trường mình soạn. Mong rằng các bạn sẻ học nhanh hiểu hết. Hướng dẫn học jQuery 17:40 pm GMT +7 Hanoi Đây là bài hướng dẫn cơ bản, nhằm giúp bạn có những kiến thức căn bản để sử dụng jQuery. Nếu bạn chưa tạo một trang thí nghiệm, hãy tạo một tài liệu HTML với nội dung như sau Do jQuery thực chất là một thư viện của javascript. Do đó, jQuery cũng chỉ là một file js thông thường như những file javascript khác. Việc đầu tiên phải làm khi bắt đầu sử dụng jQuery là phải khai báo, hay nói cách khác là load file jQuery javascript lên trên website của mình. Có hai cách để thực hiện việc này Link trực tiếp tới file jQuery. CODE <head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> Tải file jQuery.js về máy của mình và sử dụng như file js cá nhân. Sử dụng jQuery như thế nào? Dùng từ khóa định nghĩa bởi jQuery. Có hai từ khóa: jQuery và $. CODE VD: jQuery("#test") hoặc $("#test") Sử dụng jQuery để truy xuất tới một Element trong HTML như thế nào? Trước tiên, một element(là một thẻ trong html như div, table, ) có hai thuộc tính là id và name. Để truy xuất tới một element có 2 cách sau: Với ID: jQuery("#element_id") hoặc $("#element_id"). Với name: jQuery("[name='element_name']") hoặc $("[name='element_name']"). Với element name bạn sẽ được trả ra một mảng các element có cùng name. Ví dụ element id: Click vào button sẽ hiển thị ra alert CODE <script> $(document).ready(function(){ $("#butAlert").click(function(){ alert("Bạn đã click vào button này."); }); }); </script> <input id="butAlert" type="button" value="Alert"/> Ví dụ element name: Check vào một radio sẽ hiển thị alert CODE <script> $(document).ready(function(){ $("[name='cks']").change(function(){ alert("Bạn đã chọn "+$(this).val()+" này."); }); }); </script> <input name="cks" type="radio" value="radio1"/>radio 1 <input name="cks" type="radio" value="radio2"/>radio 2 <input name="cks" type="radio" value="radio3"/>radio 3 <input name="cks" type="radio" value="radio4"/>radio 4 Thủ thuật lập trình jQuery - phần 1 10:04 am GMT +7 Hanoi Những thủ thuật trong lập trình jquery mà giúp ích cho chúng ta rất nhiều để giải quyết một số vấn đề thường gặp của các bạn 1. Sử dụng jQuery từ Google Google có một phiên bản mới của jQuery được làm sẵn có cho các nhà phát triển. Thay vì sử dụng bản sao jQuery riêng, bạn nên tận dụng dự “hào phóng” từ Google để sử dụng jQuery CODE <script src="http://ajax.Googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 2. Kiểm tra ngày sinh sử dụng jQuery Kiểm tra ngày sinh là một chức năng thường có ở các trang web có nội yêu cầu độ tuổi phải trên 18. Với jQuery điều này thực hiện như sau: CODE $("#lda-form").submit(function(){ var day = $("#day").val(); var month = $("#month").val(); var year = $("#year").val(); var age = 18; var mydate = new Date(); mydate.setFullYear(year, month-1, day); var currdate = new Date(); currdate.setFullYear(currdate.getFullYear() - age); if ((currdate - mydate) < 0){ alert("Sorry, only persons over the age of " + age + " may enter this site"); return false; } return true; }); 3. Kiểm tra hình ảnh nạp đúng cách Làm thế nào để bạn biết nếu một hình ảnh đã được tải? Trong một số trường hợp đặc biệt như hình ảnh xác thực, người sử dụng có thể gặp vấn đề nếu hình ảnh không được nạp đúng cách. Sử dụng code dưới đây, bạn sẽ có thể biết nếu hình ảnh của được hiển thị. CODE $('#myImage').attr('src', 'image.jpg').load(function() { alert('Image Loaded'); }); 4. Kiểm tra thuộc tính target=”blank” trong XHTML 1.0 Strict Thuộc tính target=”blank”dùng trong việc muốn mở link ở 1 tab hoặc cửa số khác. Trong xHTML 1.0 Strict thì target=”blank” không được hỗ trợ. Dử dụng jQuery sẽ khắc phục được điều này. CODE $("a[@rel~='external']").click( function() { window.open( $(this).attr('href') ); return false; }); 5. Tìm kiếm trong văn bản bằng cách sử dụng jQuery Chức năng sau đây sẽ cho phép tìm kiếm văn bản đầy đủ trên trang bằng cách sử dụng jQuery. Tính năng này là không chỉ đẹp mắt mà còn hữu ích. CODE $.fn.egrep = function(pat) { var out = []; var textNodes = function(n) { if (n.nodeType == Node.TEXT_NODE) { var t = typeof pat == 'string' ? n.nodeValue.indexOf(pat) != -1 : pat.test(n.nodeValue); if (t) { out.push(n.parentNode); } } else { $.each(n.childNodes, function(a, b) { textNodes(b); }); } }; this.each(function() { textNodes(this); }); return out; }; 6. outerHTML Thuộc tính innerHTML rất hữu ích: Nó cho phép lấy nội dung của 1 phần tử HTML. Nhưng nếu bạn cần cả nội dung lẫn tag HTML? bạn cần “outerHTML” CODE jQuery.fn.outerHTML = function() { return $(' <div>').append( this.eq(0).clone() ).html(); };</div> 7. Mở popup Mặc dù phổ biến của popup giảm cùng với sự gia tăng của các chức năng chặn popup, cửa sổ pop-up vẫn có thể có ích trong một số trường hợp cụ thể. Đây là code để mở các liên kết trong cửa sổ pop-up. Chỉ cần thêm class css “popup” vào liên kết của bạn để nó làm việc. CODE jQuery('a.popup').live('click', function(){ newwindow=window.open($(this).attr('href'),'','height=200,width=150'); if (window.focus) {newwindow.focus()} return false; }); 8. Nhận dạng trình duyệt Như tiêu đề, việc phát triển website thích hợp với tất cả trình duyệt là một thử thách cho các nhà phát triển, đoạn code giúp ích cho việc đó. CODE //A. Target Safari if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" ); //B. Target anything above IE6 if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" ); //C. Target IE6 and below if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" ); //D. Target Firefox 2 and above if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" ); 9. Lấy vị trí tương đối của con trỏ chuột Bạn có bao giờ muốn lấy được vị trí chuột tương đối? Chức năng này rất tiện dụng sẽ trả lại vị trí chuột (x và y) theo phần tử cha của nó CODE function rPosition(elementID, mouseX, mouseY) { var offset = $('#'+elementID).offset(); var x = mouseX - offset.left; var y = mouseY - offset.top; return {'x': x, 'y': y}; } 10. Phân tích một file XML bằng cách sử dụng jQuery XML là loại tập tin rất quan trọng trên Internet , và nhiều nhà phát triển phân tích chúng time by time.Toàn bộ quá trình phân tích thể hiện qua đoạn code sau: CODE function parseXML(XML) { //find every Tutorial and print the author $(XML).find("Tutorial").each(function() { $("#output").append($(this).attr("author") + ""); }); } Thủ thuật lập trình jQuery - phần 2 10:32 am GMT +7 Hanoi Sau đây mình sẽ giới thiệu một số lưu ý hy vọng sẽ giúp ích các bạn khi lập trình với Jquery 1. Tạo nhiều filter trên cùng một dòng: //a filter allows you to reduce the set of matched elements //to those that match a given selector. In this case the query //removes anything which doesn't (:not) have (:has) a child with //class "selected" (.selected) .filter(":not(:has(.selected))") 2. Reuse Your Element Searches var allItems = $("div.item"); var keepList = $("div#container1 div.item"); //Now you can keep working with those jQuery objects. For example, //trim down the "keep list" based on checkboxes whose names //correspond to <div>class names: $(formToLookAt + " input:checked").each(function() { keepList = keepList.filter("." + $ (this).attr("name")); });</div> 3. Kiểm tra nếu có element hoặc class với lệnh has(): //jQuery 1.4.* includes support for the has method. This method will find //if a an element contains a certain other element class or whatever it is //you are looking for and do anything you want to them. $("input").has(".email").addClass("email_icon"); 4. Đổi CSS với jquery: //Look for the media-type you wish to switch then set the href to your new style sheet $ ('link[media='screen']').attr('href', 'Alternative.css'); 5. Limit the Scope of Selection (For Optimization): //Where possible, pre-fix your class names with a tag name //so that jQuery doesn't have to spend more time searching //for the element you're after. Also remember that anything //you can do to be more specific about where the element is //on your page will cut down on execution/search times var in_stock = $('#shopping_cart_items input.is_in_stock'); <ul id="shopping_cart_items"> <li> <input value="Item-X" name="item" class="is_in_stock" type="radio"> Item X</li> <li> <input value="Item-Y" name="item" class="3-5_days" type="radio"> Item Y</li> <li> <input value="Item-Z" name="item" class="unknown" type="radio"> Item Z</li> </ul> 6. Correctly Use ToggleClass: //Toggle class allows you to add or remove a class //from an element depending on the presence of that //class. Where some developers would use: a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton'); //toggleClass allows you to easily do this using a.toggleClass('blueButton'); 7. Thiết lập các hàm dành riêng cho IE: if ($.browser.msie) { // Internet Explorer is a sadist. } Thay thế một element với Jquery: $('#thatdiv').replaceWith('fnuh'); Kiểm tra một element rỗng hay không: if ($('#keks').html()) { //Nothing found ;} Find out the index of an element in an unordered set $("ul > li").click(function () { var index = $(this).prevAll().length; }); Bind a function to an event: $('#foo').bind('click', function() { alert('User clicked on "foo."'); }); Append or add HTML to an element: $('#lal').append('sometext'); Use an object literal to define properties when creating an element var e = $("", { href: "#", class: "a-class another-class", title: " " }); 8. Filter using multiple-attributes //This precision-based approached can be useful when you use //lots of similar input elements which have different types var elements = $('#someid input[type=sometype] [value=somevalue]').get(); 9. Preload images with jQuery: jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments); } }; // Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg'); Set an event handler for any element that matches a selector: $('button.someClass').live('click', someFunction); //Note that in jQuery 1.4.2, the delegate [...]... $().ready(function() { //Code và các chương trình thực thi }) Hoặc: $(function() { //Code và các chương trình thực thi }) Một số sự kiện thường sử dụng trong jQuery 1 Các sự kiện đối với trình duyệt error() : Xảy ra khi trình duyệt gặp lỗi trong quá trình tải tài liệu, ví dụ liên kết đến hình ảnh bị gãy, resize() : khi người dùng thay đổi kích thước cửa sổ trình duyệt scroll(): Xử lý tác tác vụ khi... popup với jQuery đơn giản và nhanh chóng 11:20 am GMT +7 Hanoi Trong lập trình website, chắc hẳn không ít bạn đã dùng đến popup Sau đây mình xin giới thiệu 1 plugin hỗ trợ hiển thị popup đơn giản và nhanh chóng Đây là plugin do mình viết, cũng rất đơn giản và dễ hiễu Còn viết plugin cho jQuery như thế nào và để tránh đụng độ với các jquery khác thì để bài sau mình sẽ giới thiệu về "plugin trong jquery. .. với jQuery 17:40 pm GMT +7 Hanoi Sau đây là bài hướng dẫn tạo menu trượt với jQuery như sau: 1 Đầu tiên bạn khai báo các thư viện cần dùng: CODE ... của jQuery, tạo hiệu ứng xem ảnh phóng to khi click vào thumnail của ảnh trên web Hiệu ứng đẹp, giúp cho trang web của bạn trở nên thú vị hơn Cách sử dụng rất đơn giản: 1 Nhúng jQuery và Lightbox script vào trang web của bạn: CODE Vì lightbox là một plugin của jQuery, nên bạn phải có jQuery. .. trả về, có thể là chuỗi hoặc người ta thường dùng là json }); }); Tạo tab cho menu bằng jquery 12:33 pm GMT +7 Hanoi Tạo một tab menu bằng jquery thật ra cũng không có gì khó khăn Những hướng dẫn sau sẽ giúp bạn có được một tab menu jquery vừa ý Cách làm như sau 1 Khai báo sử dụng thư viện jquery 2 Mã HTML để tạo các tab cho menu CODE ... người dùng, ví dụ thay đổi giữa trạng thái ẩn hiện của phần tử Trên đây là một số sự kiện thường được sử dụng với jQuery, ngoài ra jQuery còn cung cấp các tác vụ để thực hiện các sự kiện như blind(), die()… Bạn có thể tìm hiểu thêm về jQuery event tại đây: http://api .jquery. com/category/events/ jQuery selector 10:43 am GMT +7 Hanoi ... ('p').replaceUrl(); Thay đổi layout HTML với Jquery - phần 1 10:22 am GMT +7 Hanoi Một trong những thế mạnh của jQuery là có thể can thiệp vào cấu trúc DOM (mô hình đối tượng tài liệu) của tài tài liệu HTML jQuery có thể dễ dàng thêm, bớt, sửa đổi thuộc tính của thành phần HTML, thậm chỉ xóa hoàn toàn các thẻ HTML ra khỏi tài liệu trước khi nó được hiển thị lên trình duyệt Trong phần 1, chúng ta sẽ cùng... $(this).html( $(this).html().replace(regexp,”") ); }); return $(this); } }) (jQuery) ; //usage: $('p').stripHtml(); 25 Get a parent element using closest: $('#searchBox').closest('div'); 26 Log jQuery events using Firebug and Firefox: // Allows chainable logging // Usage: $('#someDiv').hide().log('div hidden').addClass('someClass'); jQuery. log = jQuery. fn.log = function (msg) { if (console) { console.log("%s: %o",... ở trên link này, cách thức hoạt động của chúng cũng gần giống nhau và dựa trên các hiệu ứng jQuery, rất đơn giản và dễ hiểu Cơ bản về sự kiện trong jQuery 11:08 am GMT +7 Hanoi jQuery cung cấp cho chúng ta khá nhiều các sự kiện đủ để thao tác với các thành phần trên website mà chúng ta mong muốn Bên cạnh đó, jQuery còn loại bỏ hoàn toàn các event code ra khỏi mã HTML như cách viết javascript thông thường... khi trình duyệt tải xong toàn bộ tài liệu cần thiết bao gồm stylesheet, hình ảnh… Trong khi đó $(document).ready() sẽ được thực thi ngay khi các phần tử DOM được sẵn sàng mà không cần đợi các tài liệu như stylesheet hay hình ảnh tải xong Do đó quá trình xử lý vào thao tác sẽ diễn ra nhanh hơn Cách đăng ký bộ quản lý sự kiện trong jQuery CODE $(document).ready(function() { //Code và các chương trình . value="radio4"/>radio 4 Thủ thuật lập trình jQuery - phần 1 10:04 am GMT +7 Hanoi Những thủ thuật trong lập trình jquery mà giúp ích cho chúng ta. } Thủ thuật lập trình jQuery - phần 2 10:32 am GMT +7 Hanoi Sau đây mình sẽ giới thiệu một số lưu ý hy vọng sẽ giúp ích các bạn khi lập trình với Jquery