(danghienIT) - Khi mà nhiều nhà phát triển chấp nhận phát triển kiểu AJAX để tạo ra các ứng dụng tương tác mạnh hơn, họ sẽ tìm các công cụ giúp đơn giản hóa cho công việc của mình. jQuery là một công cụ như thế, một số người dùng nói rằng nó giúp tạo dự án phát triển AJAX (XML và JavaScript không đồng bộ) gọn hơn nhờ việc sử dụng JavaScript dễ dàng hơn mặc dù JavaScript nổi tiếng là khó làm việc cùng – một nhóm chuyên gia phát biểu tại cộng đồng Lang.Net của Microsoft hồi đầu tháng 8, tổ chức ở Redmond, Washington.
John Resig, người tạo ra jQuery, nói rằng công nghệ này có bản 1.0 vào 26/8. jQuery là kiểu thư viện JavaScript mới cần thiết cho phép các nhà phát triển làm việc “khiêm tốn” với JavaScript.
Resig, làm tại Cambridge, Mass., nói jQuery không phải là một framework cỡ lớn tốt nhất trong AJAX – mà cũng không phải là các cải tiến phức tạp vô ích – jQuery được thiết kế để thay đổi cách bạn viết JavaScript.”
Resig, tốt nghiệp Rochester Institute of Technology, đang viết một cuốn sách có tên “Pro JavaScript Techniques” cho Apress Publishing.
Việc viết JavaScript khá thú vị, Resig nói, và jQuery đem lại sự thú vị cho quá trình này bằng cách tạo sự phổ biến, công việc lặp lại, loại bỏ những đánh dấu không cần thiết, và tạo cho nó ngắn gọn, dễ hiểu, theo Web site của dự án này.
Trong một buổi phỏng vấn với eWEEk, Resig nói ông thấy các nhà phát triển Web muốn viết mã unobtrusive, nhưng về cơ bản nó đơn giản và hiệu quả.
“Một trong những mục tiêu mà tôi đặt ra cho mình đó là viết mã JavaScript dễ hiểu nhất trong số chương ít nhất có thể,” ông cho hay.
Khi phát hành ban đầu công nghệ này vào 1/2006, rất nhiều sự phát triển của công nghệ jQuery này là theo sự phản hồi từ cộng đồng quốc tế, Resig nói.
“Sự phản hồi của hàng trăm nhà phát triển Web chuyên nghiệp là tài sản vô giá để xây dựng thư viện JavaScript hiệu quả,” ông nói, cho ra phiên bản 1.0 mất khoảng 7 tháng và gồm cả công việc của một số nhà phát triển khác nữa.
Resig nói ông muốn phát triển một cái gì đó sẽ hiệu quả hơn cho công việc của mình. Công nghệ mà ông suy nghĩ nhiều nhất đó là Behaviour, một công cụ JavaScript được viết bởi Ben Nolan, giám đốc kỹ thuật của Projectx Technology, tại Wellington, New Zealand.
Nhưng Behaviour không đủ cho Resig. Trong một bài viết trên blog hôm 22/8/2005, Resig viết, “Xem Behaviour làm việc như thế nào, tôi chưa bao giờ hoàn toàn thấy hài lòng – nó chỉ xem ra quá mệt mỏi và dài dòng cho việc sử dụng hàng ngày. Tôi bắt đầu chắp vá với kiểu layout code khác – cố gắng tìm ra giải pháp tối ưu.”
Thực tế, “jQuery gây ra hàng loạt những khó khăn cá nhân cho tôi,” Resig trả lời eWEEK. “Tôi muốn việt một bộ máy phân tích chọn CSS dành cho JavaScript và viết một phiên bản nhỏ hơn của thư viện động moo.fx phổ biến.”
Sau khi ông bắt đầu đưa mã mới của mình cho các nhà phát triển Web, họ khuyến khích ông xây dựng nó, Resig nói.
Hơn thế nữa, Resig nói ông tin jQuery là quan trọng trong thế giới JavaScript bởi ông nhận thấy nó là “một trong số những thư viện JavaScript hiếm có cố gắng tôn trọng hết mức người dùng của mình; bằng việc duy trì hoạt động trọn vẹn tài liệu và đáp ứng trực tiếp tới phản hồi của người dùng.”
Bên cạnh đó, hoạt động của jQuery theo một cặp ý tưởng nhằm giúp nó độc đáo hơn, Resig nói.”Nó nhắm tới mã ngắn, đơn giản và kích thước tập tin nhỏ.
Thực tế, công nghệ này được dùng bởi các nhà phát triển các trang Web thương mại như Technorati và FeedBurner, cũng như các dự án mã mở như Drupal, Trac và CakePHP, Resig nói.
Cody LindLey, một nhà phát triển Web chuyên nghiệp tại Boise, Idaho, nói ông có sử dụng và là một fan hâm mộ jQuery. LindLey nói ông cũng quen thuộc với Behaviour, và trong khi Behaviour “thực hiện một công việc lớn” do lấp một khoảng trống giữa các thư viện gói ban đầu, nhưng nó không phải là một giải pháp hoàn hảo”
“Tôi thích một giải pháp hoàn chỉnh hơn là sử dụng mã Behaviour, cùng với một thư viện JavaScript,” LindLey viết trên blog.
LindLey nói rằng không có một thư viện đầy đủ tính năng trong một thời gian dài. “Đúng vậy, theo tôi, thì tới tận bây giờ cũng thế,” ông nói. “Có vẻ như jQuery đến với thư viện JavaScript để lấp khoảng trống. Thư viện tự xưng là “Fun – thú vị” này có thể đáp ứng về tiền, và jQuery thực sự cung cấp một giải pháp tổng thể với thư viện.”
Aptana, một công ty có trụ sở tại San Francisco, sẽ phát hành jQuery với bản mới nhất của phần mềm Web 2.0 IDE(môi trường phát triển tích hợp) của mình. Aptana IDE, vẫn là bản beta thử nghiệm, hiện có khả năng nhập thư viện JavaScript của jQuery vào dự án Web. Dự án tạo cho chính nó với một trang mẫu tạo bởi Cody LindLey, chỉ cách dùng jQuery, Paul Colton nhà sáng lập Aptana cho hay.
Trong việc lựa chọn khởi tạo tập thư viện AJAX đi cùng với Aptana IDE, “Chúng tôi muốn các thư viện hiển thị phương thức tương tự mà chúng tôi đang cố gắng kiến trúc với Aptana – nhanh, miễn phí, nhẹ và dễ dùng,” Colton cho hay.
Ông cũng ấn tượng với tập các tính năng phong phú của jQuery, “đặc biệt dễ dùng, và kích thước rất nhỏ. Nó là một thư viện hoàn hảo cho người dùng, đặc biệt cho người dùng mới công nghệ Web 2.0.”
LỊCH SỬ HÌNH THÀNH VÀ PHÁT TRIỂN CỦA JQUERY
January 15th, 2008 Bug fix for jQuery 1.2, library is now 2 years old: jQuery 1.2.2: 2nd Birthday Present
September 17th, 2007 New user interface library for jQuery: jQuery UI: Interactions and Widgets
September 16th, 2007 Bug fix for jQuery 1.2: jQuery 1.2.1: Quick Fixes for 1.2
September 10th, 2007 jQuery 1.2 released: jQuery 1.2: jQuery.extend(”Awesome”)
August 24th, 2007 jQuery 1.1.4: Faster, More Tests, Ready for 1.2
July 5th, 2007 Bug fix for jQuery 1.1.3: jQuery 1.1.3.1
July 1st, 2007 New version of jQuery released: jQuery 1.1.3: 800%+ Faster, still 20KB
July 1st, 2007 Announcement of new UI module under development: jQuery UI
June 18th, 2007 New Plugin Repository
May 20th, 2007 Third bug fix test release for 1.1: jQuery 1.1.3a
April 2nd, 2007 Mailing list moved to Google Groups, code now hosted by Amazon S3: Google Groups and Amazon S3
March 11th, 2007 11 people attend the first jQuery meetup at SXSWi
February 27th, 2007 Second bug fix release for 1.1: jQuery 1.1.2
January 22nd, 2007 First bug fix release for new version: jQuery 1.1.1
January 14th, 2007 jQuery Birthday: 1.1, New Site, New Docs
January 11th, 2007 Beta release of jQuery 1.1: jQuery 1.1b
January 8th, 2007 Alpha release of new version: jQuery 1.1a
November 27th, 2006 Planning for jQuery 1.1: The Path to 1.1
December 12th, 2006 Last bug fix release for 1.0: jQuery 1.0.4
November 7th, 2006 Winners of the jQuery button contest announced: jQuery Button Contest Winners
October 27th, 2006 Third bug fix release for 1.0: jQuery 1.0.3
October 9th, 2006 Second bug fix release for 1.0: jQuery 1.0.2, with minor API changes (posted on 13 October)
September 22nd, 2006 Visual jQuery Magazine Released: Visual jQuery Magazine Released
September 7th, 2006 First sponsored developer joins the project: Sponsored jQuery Development
September 2nd, 2006 XML version of the API released: Taking jQuery Documentation to the next level
August 31st, 2006 First bug fix release for 1.0: jQuery 1.0.1
August 26th, 2006 First stable version of jQuery: jQuery 1.0
July 10th, 2006 Blogger recruitment begins: Bloggers Wanted. To allow members of the community to contribute to the jQuery Blog.
June 23rd, 2006 Planning for jQuery 1.0: The Road to 1.0
May 29th, 2006 jQuery available via SVN: SVN Access to jQuery
May 27th, 2006 jQuery moved under the MIT license: jQuery under the MIT license
April 24th, 2006 Thickbox released: Thickbox
March 21st, 2006 Bug fixes and new features: Accordion, values, oncomplete, and bug fixes!
February 26th, 2006 Ajax added to jQuery: Ajax, new fx, and more!
February 23rd, 2006 Bug fix release: Bugs Squished, Ajax on the way
January 27th, 2006 jQuery Mailing List set up: jQuery Mailing List
January 25th, 2006 First jQuery Plugin Built: First jQuery Plugin
January 24th, 2006 jQuery Blog set up: jQuery Blog
… The announcement of jQuery makes it to the front page of del.icio.us and Digg …
January 14th, 2006 jQuery Announced at BarCampNYC: BarCampNYC Wrap-up
August 22nd, 2005 John first hints of a JavaScript library to use CSS selectors with a more succinct syntax than existing libraries: Selectors in JavaScript
jQuery làm việc như thế nào?
1. Căn bảnĐể làm quen với jQuery, trước tiên, bạn nên tạo một file html với nội dung như sau:
<html>
<head>
<script type=”text/javascript” src=”path/to/jquery.js”></script>
<script type=”text/javascript”> // <font color=”#ff0000″>(*)</font> </script>
</head> <body><a href=”http://jquery.com/”>jQuery</a>
</body>
</html>
Bạn cần điều chỉnh lại src (nguồn) của file jquery.js. Thí dụ, nếu như file jquery.js bạn đặt cùng thư mục với file html bạn vừa bạn, source sẽ giống như sau:
<script type=”text/javascript” src=”jquery.js”></script>
Bạn có thể tải về file jquery.js ở [1]
1.1. Chạy code khi tài liệu sẵn sàng
Theo cách viết javascript thông thường, coder đặt code muốn brower xử lý tương tự như sau:
window.onload = function(){ // Your code here}
Khi sử dụng jQuery, chúng ta sẽ làm việc tương tự bằng cách sau:
$(document).ready(function(){ // <font color=”#ff0000″>(**)</font>});
Chú ý: Từ nay, tôi gọi vùng (**) ở đoạn code trên là vùng js chính.
Sử dụng jq, bạn sẽ thấy quen thuộc với cách viết code này. Bây giờ, bạn hãy đặt đoạn code trên vào phần (*) trong file html hiện thời của bạn.
Thêm thuộc tính onclick
Bạn thêm đoạn HTML sau vào giữa thẻ body của file html hiện thời để hiển thị một liên kết
<a href=”http://pcworld.com.vn”>Hello world</a>
Đoạn code js sau vào phần (**) để thêm thuộc tính onclick cho các thẻ “a”
$(”a”).click(function(){ alert(”Hello! How are you ?”);});
Khi click vào liên kết ở trong trang web, trình duyệt sẽ hiển thị bảng thông báo “Cảm ơn đã ghé thăm!”. Bạn có thể thêm thuộc tính onclick này cho bất kỳ thẻ nào trong trang web của mình.
Thủ thuật
Thay đoạn code js trên bằng đoạn code js sau, khi click vào một liên kết trong trang web, browser sẽ hiển thị bảng thông báo rồi im re, chứ không chuyển sang trang web toila.net
(”a”).click(function(){ alert(”Thank for your visit!”); return false;});
1.2. Thêm class
Ở mục này, chúng ta sẽ xét một ví dụ để xem cách thêm một class vào một (nhiều) đối tượng DOM.
Thêm đoạn code sau vào phần header của trang web (định dạng cách trình bày cho class ‘test’ của các thẻ HTML có tên ‘a’)
<style type=”text/css”>a.test { font-weight: bold; }</style>
Thay thế vùng js chính bằng đoạn code sau (xóa tất cả nội dung cũ), với mục đích: khi trang web được tải xong, nội dung của các thẻ ‘a’ sẽ được trình bày bằng định nghĩa ở đoạn code trên
$(”a”).addClass(”test”);
Bạn cũng có thể xóa class ra khỏi một DOM
1.3. Các hiệu ứng đặc biệt
Bây giờ bạn thử đặt đoạn code sau vào vùng js chính để thử xem
$(”a”).click(function(){ $(this).hide(”slow”); return false;});
2. Cách gọi dây chuyền
Chúng ta xem và thử đoạn code sau để có cái nhìn sơ qua về lập trình hướng đối tượng với jQuery:
$(”p”).addClass(”test”).show().html(”foo”);
Mỗi phương thức ở đoạn code trên (addClass, show, html) trả về đối tượng jQuery; với đối tượng trả về, bạn có thể tiếp tục áp dụng các phương thức có thể cho tập các phần tử hiện thời. Khi tương đối thành thạo jQuery, bạn có thể sẽ thấy quen thuộc đoạn code sau:
$(”a”).filter(”.clickme”).click(function() { alert(”click!”);}).end().filter(”.hideme”).click(function() { $(this).hide();});
Bạn có thể dùng trang tham khảo [2] API để biết các API mà jQuery hỗ trợ.
3. Callbacks, Functions và đối tượng ‘this’
Callback là một hàm được thực thi sau khi một hàm cha của nó được thực thi xong. Cách khai báo callback trong jQuery có phần khác với cách truyền thống.
3.1 Khai báo callback không có tham số
$.get(’myhtmlpage.html’, myCallBack);
Chú ý là tham số thứ hai ở khai báo trên là tên của một hàm chứ không phải là một chuỗi (không đặt giữa cặp nháy đơn)
3.2 Khai báo callback với tham số
Cách khai báo sai
.get(’myhtmlpage.html’, myCallBack(param1, param2));
Cách khai báo đúng
$.get(’myhtmlpage.html’, function(){ myCallBack(param1, param2);});
[1] http://docs.jquery.com/Downloading_jQuery
[2] http://docs.jquery.com/JQuery_API
Cơ bản
Đâ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:
<html>
<head>
<script type=”text/javascript” src=”path/to/jquery.js”></script>
<script type=”text/javascript”>
// Your code goes here
</script>
</head>
<body>
<a href=”http://jquery.com/”>jQuery</a>
</body>
</html>
Sửa thuộc tính src trong thẻ script để trỏ tới jquery.js Ví dụ, nếu jquery.js ở cùng thư mục với tệp HTML, bạn có thể dùng:
<script type=”text/javascript” src=”jquery.js”></script>
Bạn có thể tải bản jQuery mới nhất tại trang Downloading jQuery.
Chạy mã lúc Document Ready (trang đã sẵn sàng)
Có thể thấy rằng hầu hết các lập trình viên Javascript kết thúc mã thực thi bằng cách thêm các dòng mã vào script, tương tự như sau:
window.onload = function(){ … }
Các mã bên trong đó sẽ được thực thi khi trang được tải xong. Không còn gì phải bàn, tuy nhiên, mã Javascript không chạy cho đến khi tất cả các hình ảnh trong trang được tải xong (kể cả banner quảng cáo). Lý do cho việc sử dụng window.onload là để chắc chắn rằng HTML ‘document’ phải được tải xuống hết, sau đó mới chạy mã kia.
Để giải quyết, jQuery có câu lệnh đơn giản, được biết như
ready event:
$(document).ready(function(){
// Mã của bạn
});
Mã này kiểm tra document và đợi cho đến khi nó sẵn sàng để sử dụng - theo ý bạn muốn. Hãy lấy đoạn mã mẫu ở trên và cho vào tài liệu HTML của bạn. Các ví dụ còn lại của jQuery sẽ được đặt bên trong phần callback của hàm này, chúng sẽ được thực thi khi tài liệu sẵn sàng.
Chuyện gì xảy ra với sự kiện Click
Đầu tiên, chúng ta sẽ thử thực hiện động tác click với
clicked. Bên trong ready function (từ ví dụ ở trên), thêm mã như sau:
$(”a”).click(function(){
alert(”Cảm ơn đã ghé thăm!”);
});
Lưu tệp HTML và tải lại trang thử nghiệm trên trình duyệt (Ctrl+F5). Bấm vào link nào đó trên trang và trình duyệt sẽ hiện ra một thông báo pop-up.
Đối với sự kiện click và hầu hết các sự kiện khác events, bạn có thể can thiệp vào hành động mặc định - ở đây, sau đây là link dẫn tới jquery.com - bằng cách trả về giá trị false từ điều khiển sự kiện:
$(”a”).click(function(){
alert(”Cảm ơn đã ghé thăm!”);
return false;
});
Nếu không dùng các đoạn mã trên, nếu bạn nhấn link tới jquery.com trong trang, thì trình duyệt sẽ duyệt tới. Nhưng ở đây, trình duyệt sẽ hiện thông báo và không chuyển đi đâu cả.
Thêm một Class (lớp với CSS)
Đây là tác vụ dùng để thêm vào (hoặc bỏ đi) các class từ phần tử nào đó, ví dụ:
$(”a”).addClass(”test”);
Nếu bạn đặt đoạn mã trên vào phần script trong header của trang HTML, thì mã tự động sinh ra sẽ là:
<style type=”text/css”>a.test { font-weight: bold; }
</style>
và sau đó
addClassđược gọi - tất cả những phần từ A sẽ được làm đậm. Để bỏ class, bạn có thể sử dụng removeClass
Các hiệu ứng khác
Trong jQuery, có cung cấp các thành phần effects, để làm cho website của bạn thật sự nổi bật. Để chạy thử, hãy thay đoạn mã như sau:
$(”a”).click(function(){
$(this).hide(”slow”);
return false;
});
Bây giờ, nếu bạn nhấn vào liên kết có trong trang, bạn sẽ thấy nó biến mất một cách từ từ.
Khả năng liên kết thành chuỗi (một phép thuật jQuery)
jQuery cung cấp cho bạn một cách viết mã đơn giản và ngắn gọn. Nó tương tự như cách thức lập trình hướng đối tượng (object-oriented programming), nói đúng hơn đây là cách viết thẳng một hàng.
Tóm lại: Mỗi phương thức trong jQuery trả về câu truy vấn đối tượng của chính nó, nó cho phép bạn ‘xích’ chúng lại với nhau, ví dụ:
$(”a”).addClass(”test”).show().html(”foo”);
Câu lệnh này chứa những phương thức cá thể (addClass, show, và html) trả về đối tượng jQuery, nó cho phép bạn có thể tiếp dụng sử dụng phương thức để đặt cho phần tử hiện tại.
Bạn có thể dùng xa hơn nữa, bằng cách thêm hoặc bỏ phần tử từ vùng chọn, thay đổi các phần tử này và sau đó trả giá trị lại cho vùng chọn trước, ví dụ:
$(”a”)
.filter(”.clickme”)
.click(function(){
alert(”You are now leaving the site.”);
})
.end()
.filter(”.hideme”)
.click(function(){
$(this).hide();
return false;
})
.end();
Bạn tạo thêm đoạn mã HTML như sau:
<a href=”http://google.com/” class=”clickme”>I give a message when you leave</a>
<a href=”http://yahoo.com/” class=”hideme”>Click me to hide!</a>
<a href=”http://microsoft.com/“>I’m a normal link</a>
Các phương thức thay đổi vùng chọn của jQuery, có thể hoàn lại với end(), nó cho biết sự kết thúc của vùng lựa chọn đó và bắt đầu áp dụng lựa chọn mới:
Hàm hồi quy, Hàm, và ‘this’
Một điều quan trọng khác cần lưu ý là làm thế nào dùng đúng hàm hồi quy. Đây là điều mà tôi thường hay quên cú pháp câu lệnh.
Dùng hàm hồi quy không thông số
$.get(’myhtmlpage.html’, myCallBack);
Lưu ý thông số thứ hai chỉ đơn giản là tên hàm (không truyền như một giá trị chuỗi ký tự và không có dấu ngoặc đơn). Các hàm trong Javascript được xem là những ‘khách hàng hạng sang’ và vì vậy có thể truyền như một biến số và sẽ được thực thi sau đó.
Dùng hàm hồi quy có thông số
Bạn sẽ thắc mắc “Bạn sẽ phải gọi hàm hồi quy như thế nào nếu có thông số?”.
Sai
$.get(’myhtmlpage.html’, myCallBack(param1, param2));
Cách này không hoạt động vì bạn gọi myCallBack(param1, param2) sau đó lại truyền giá trị trả về như là một thông số mới cho hàm $.get().
Đúng
Cách dùng đúng
$.get(’myhtmlpage.html’, function(){
myCallBack(param1, param2);
});
Lý do, bằng cách truyền một hàm vô danh (đoạn mã với…
function() {};
Cách dùng này đúng vì bạn truyền hàm vô danh như thông số thứ hai cho hàm $.get() mà không phải thực thi hàm đó trước khi truyền.
Đọc thêm
Những người đã và đang dùng jQuery cùng nhau soạn thảo một số tài liệu hướng dẫn hữu ích để hướng dẫn những người mới dùng jQuery lần đầu tiên như bạn hiểu và học cách ứng dụng thư viện này. Nếu chúng tôi không giải thích rõ ràng những tính năng và chức năng của thư viện jQuery… xin bạn vui lòng thông báo cho chúng tôi biết.
Đến đây, bạn có thể bắt đầu tham khảo tất cả Tài liệu dễ hiểu và bao quát về jQuery. Nếu bạn có câu hỏi hay thắc mắc, xin vui lòng gửi tin mail đến chuyên mục thư từ.
Tất cả các hàm được khai báo phải được kết thúc bằng dấu chấm phẩy, ngay sau dấu đóng hàm. Sẽ tránh khỏi
- Lỗi khó kiểm soát ở IE,
- Lỗi phát sinh ở Drupal 6.x khi script aggregation được bật
Drupal.behaviors.tableSelect = function (context) {
$(’form table[th.select-all]:not(.tableSelect-processed)’, context).each(Drupal.tableSelect);
}
Đúng chuẩn
Quy tắc đặt tên biến: Đối với biến chứa đựng đối tượng jQuery, tên biến nên được bắt đầu bằng dấu dollar.Drupal.behaviors.tableSelect = function (context) {
$(’form table[th.select-all]:not(.tableSelect-processed)’, context).each(Drupal.tableSelect);
};
Đúng chuẩn
Tìm hiểu về JQuery$element = $(’#some-id’);element = document.getElementById(’some-id’);
JQuery là gì ?
Xin trả lời:JQuery chính là một thư viện kiểu mới của Javascript giúp đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web.JQuery thêm tương tác Ajax vào trong trang web của bạn.JQuery được thiết kế để thay đổi cách viết Javascript của bạn.
Chỉ với 10 dòng lệnh JQuery bạn có thể thay thế cả 20 chục dòng lệnh DOM JavaScript chán ngắt cũ kỹ mà xưa nay bạn vẫn từng viết.
Trước tiên để dùng JQuery bạn phải download gói JQuery theo đường Link này
Bài tới tui sẽ hướng dẫn cách làm và ứng dụng JQuery trong trang web.
Đang tải xin vui lòng chờ...
0 comments:
Post a Comment
[▼/▲] Chèn biểu tượng vui