Jquery. Bạn có đang viết một ứng dụng có Javascript và ajax không.
Bạn có thấy phiền toái gì không. Bạn lựa chọn framework javascript nào?
Làm việc với javascript nổi tiếng là khó, và để đơn giản hơn, chúng ta nên tìm những công cụ để đơn giản hóa công việc của mình. Jquery nên nằm trong danh sách của bạn. Với Dojo, Prototye MooTools .. đã cung cấp cho bạn khá nhiều tiện ích, tuy nhiên Dojo thì khá nặng nề, perfomance của nó có lẽ vào loại tệ nhất trong tất cả các công cụ mà tôi từng thấy, thời buổi này, nhẹ nhàng là một tiêu chí quan trọng. Prototype và MooTools tôi mong sự phản hồi từ các bạn. Jquery ra đời nhằm đơn giản hóa việc viết mã Javascript và hỗ trợ ajax.
Bắt đầu với JQUERY:
Và để làm quen chúng ta bắt đầu với Helloworld.
Xin mời bạn làm quen đoạn mã sau:
< script type="text/javascript" src="jqueryLib/jquery-1.2.6.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
});
function hello(){
alert("Hello world !");
}
</script>
<body>
<a href="http://www.google.com">Link 1</a>
<a href="http://tuoitre.com.vn">Link 2</a>
</body>
Khi click vào link 1 hoặc link 2 bạn sẽ thấy
Và bình thường bạn sẽ làm như sau:
<a href="http://www.google.com" onlick="hello();">Link 1</a>
Thật bình thường, bạn thấy chẳng có gì khác biệt, nhưng để ý một chút bạn thấy rằng, đoạn mã ở trên khác rất nhiều so với đoạn mã ta vẫn thường hay dùng, một biểu hiện rất rõ ràng là tất cả những Link (thẻ <a>) đều sẽ hiện Helloworld khi ta có sự kiện trên đối tượng đó.
Bên cạnh đó, ta thấy mã javascript mã html trình bày trên giao diện đã được tách biệt với nhau rất tốt.
Khi số lượng link đẻ ra nhiều và nhiều hơn nữa, code của bạn sẽ không gặp phải vấn đề rải rác khắp nơi.
Thế nhưng, giả sử rằng tôi chỉ muốn link tới trang tuổi trẻ là helloworld, còn link tới trang google thì hiện xin chào, liệu trong trường hợp này tình hình sẽ như thế nào.
Cổ điển:
tôi tạo ra 2 hàm helloworld.
Gắn vào sự kiện cho từng nút.
Và nếu trang có tổng cộng 20 Link liên kết tới trang tuổi trẻ, nó sẽ xuất hiện 20 lần đoạn mã <a ...onclick="hello();
Vời Jquery:
Tôi tạo 2 hàm Helloworld
Và:
<script type="text/javascript">
$(document).ready(function(){
$("a[href*=tuoitre]").click(function(){
});
function hello(){
alert("Hello world !");
}
</script>
Chắc bạn đã nhận thấy sự khác biệt rồi, tôi sẽ đăng ký một Link có dạng là *tuoitre* (theo kiểu câu truy vấn sql) và từ đây, mọi liên kết có dạng Link này sẽ được kích hoạt.
JQUERY và CSS.
--------------------------------------------------
Trong file css kèm theo, bao gồm 2 đoạn mã CSS green và red.
$(document).ready(function(){
$("#orderedlist > li").addClass("blue");
});
<ul id="orderedlist">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
Để ý chúng ta luôn thấy $(document).ready
Trong JQuery chúng ta sẽ thường xuyên sử dụng sự kiện này, đoạn mã này cho chúng ta gắn một lệnh cần thiết khi trang được load, về cơ bản nó giống như sự kiện onload trong javascript, tuy nhiên, onload luôn yêu cầu hệ thống phải load lên toàn bộ, kể cả những quảng cáo. Jquery khác biệt, nó sẽ chạy một những yêu cầu liên quan tới nó được hoàn tất.
Trong hàm xử lý trên khi tài liệu được load, browser sẽ tìm ID : orderedList -là một ul và xử lý thành phần con li, gán cho nó css là "blue".
Khi đó, ta thấy text của 1, 2, 3, 4 sẽ là màu xanh da trời.
$(document).ready(function(){
$("#orderedlist").find("li").each(function(i){
$(this).append(" BAM! " + i);
});
});
Với đoạn mã này, tôi đã thêm "BAM! vào từng phần tử:
Để sinh động một chút, khi tôi rê chuột tới một thành phần trong list này, màu đỏ sẽ tô một vệt ngang.
$(document).ready(function(){
$("#orderedlist li:lt(10)").hover(function(){
$(this).addClass("green red");//Tạo vệt màu đỏ , chữ xanh khi rê chuột tới.
}, function(){
$(this).removeClass("green red");//Loại bỏ hiệu ứng khi rê chuột ra.
});
});
Ở đây, những thành phần li<10 sẽ chịu ảnh hưởng bởi lời gọi này, theo đó, tôi hoàn toàn chỉ định theo ý muốn của tôi, ví dụ nếu LI là số lẻ tôi sẽ tô màu xanh, số chẵn tôi sẽ tô màu vàng, nếu là phần tử đấu tiên tôi tô màu tím, cuối cùng tôi tô màu đỏ. Có thể nói, tôi làm chủ được css thông qua jquery.
(mời bạn tiếp tục với phần 2 ajax, demo và link download)
0 comments :
Post a Comment