Chắc hẳn các bạn biết về Javascript tạo hiệu ứng cho trang và 1 số đặc điểm hữu dụng khác.
Sử dụng JQUERY thực chất là sử dụng Javascript.
jQuery là thư viện JavaScript, hay còn gọi là JavaScript Framework, hỗ trợ bạn trong việc xử lý HTML, xử lý các sự kiện trong trang HTML, tạo các hiệu ứng đẹp, xử lý Ajax nhanh và ngắn gọn hơn cho ứng dụng web của bạn!Nếu định nghĩa vừa rồi còn rối rắm, thì mình xin trích theo sự hiểu của mình: JQUERY là 1 thư viện của Javascipt, thay vì các bạn lập trình Javascipt thủ công, thì nay chúng ta attach 1 file jquery.js vào trang rồi gọi các hàm có sẵn của jquery ra, thay vì định nghĩa từng cái khi lập trình javascript, vì jquery chữa rất nhiều function javascript bên trong rồi.
Các bạn có thể download file jquery mới nhất tại: jquery.com.
Ví dụ đơn giản nhất:
Tạo cây thư mục đa cấp:
- Code:
-
<div id="menu">
<div> <span class="theloai">Tin xã hội</span>
<div class="loaitin">
<a href="#">Thể thao</a>
<a href="#">Du lịch</a>
<a href="#">Xã hội</a>
<a href="#">Khoa học</a>
<a href="#">Văn hoá</a>
<a href="#">Pháp luật</a>
</div>
</div>
<div> <span class="theloai">Thế giới web</span>
<div class="loaitin">
<a href="#">Tools</a>
<a href="#">Website hữu ích</a>
<a href="#">Scripts hữu dụng</a>
</div>
</div>
<div> <span class="theloai">Nghệ thuật sống</span>
<div class="loaitin">
<a href="#">Sống đẹp</a>
<a href="#">Địa chỉ từ thiện</a>
<a href="#">Tấm lòng vàng</a>
</div>
</div>
<div> <span class="theloai">Thư giãn</span>
<div class="loaitin">
<a href="#">Thơ hay</a>
<a href="#">Chuyện cười</a>
</div>
</div>
<div> <span class="theloai">Thường thức </span>
<div class="loaitin">
<a href="#">Mẹo vặt gia đình</a>
<a href="#">Ẩm thực</a>
</div>
</div>
</div>
Trên đây là định dạng khởi tạo 1 cây thư mục.
Tiếp theo, các bạn attach file jquery.js đã download tại jquery.com vào tag HEAD
Ngay sau nó, chúng ta thực hiện viết các hàm:
- Code:
-
<script type="text/javascript">
$(document).ready(function() {
//cái này để đảm bảo, hiệu ứng sẽ chỉ thực hiện khi web đã tại về phía client xong
//Viết các hàm tại đây.
});
</script>
Để cụ thể hơn, các bạn đưa các function sau vào chỗ để các hàm:
- Code:
-
$(document).ready(function() {
$('.loaitin').hide(); //giải thích: class loaitin sẻ ẩn đi
$('.theloai').click(function (){ //giải thích: khi nhấp vào class theloai sẽ sảy ra function....
$(".loaitin").hide(); //là ẩn tất cả các class loaitin
$(this).next().slideToggle(1000) //và class loaitin ngay sau nó (next) hiện ra và đóng laị mỗi lần nhấp 1s
Việc khai báo
- Code:
-
$(".loaitin").hide();
lần thứ 2 để đảm bảo chỉ class loaitin ngay sau nó mới bị ảnh hưởng.
Mình chỉ viết theo ý của mình, nếu sai mong các bạn góp ý.
Hẹn ở bài viết khác.