Buổi tảng mạn về jquery

Hôm nay tôi và bạn cùng làm ly cafe và nói chuyện về jquery. Thế jquery là gì mà tôi nghe nhắc hoài vậy. Sau đây là định nghĩa về em jquery

jQuery là một Javascript Framework, hỗ trợ các nhà lập trình web tạo ra các tương tác trên website một cách nhanh nhất. jQuery được khởi xướng bởi John Resig (hiện là trưởng dự án của Mozzila) vào năm 2006, jQuery có mã nguồn mở và hoàn toàn miễn phí. jQuery có một cộng đồng sử dụng đông đảo và được rất nhiều lập trình tham gia hoàn thiện, phát triển và viết Plugin.

Nếu chưa biết bạn có thể tìm hiểu trên google hoặc ở trang chủ Jquery.

Ngày xưa tôi nhơ tôi phải vật vã với em javascript thuần, em này hơi khó tính đụng tý là không cho lại giở trò, lỗi suốt, cái này là xấu mà chảnh đây ka ka

Tôi biết javascript từ rất lâu từ thời các trang web nhạc được làm từ html, hồi đó sao mà ngây ngô. Hồi đó tôi nhớ em idm (internet dowload manager) mới ra đời và không biết lúc nào tôi trở thành ông trùm tải nhạc, thông qua các trang web nhạc bằng html, link nhạc của các website này chủ yếu nằm trong js(javascript đấy bạn), vạch và phá miết từ một người không biết tý về javascipt rồi cũng ra ngô ra khoai ka ka.

Còn với em jquery thì vừa đẹp mà vừa dễ tính mới chết chứ và tôi đã theo em jquery cho trong các dự án của mình và tôi thầm cám ơn anh John Resig, bởi có em nó nấu nướng, dặt dủ chăm lo mà tôi khỏe hơn rất nhiều

Thế jquery được sử dụng như thế nào? Có lẽ tôi và bạn sẽ đi vào tìm hiểu em jquery qua ví dụ nhỏ. Khi bạn vào các website bạn hay thấy các trang nhiều nội dung cần chuyển qua lại thì người ta sẽ dùng tab, trong đó có sử dụng em jquery trong đó bạn ơi. Ở đây tôi có ba nội dung cần chuyển qua lại, một là macbook, ipad và iphone.

Code trước không dùng jquery:
Phần css:
[php]
.clear{clear:both;}
.content{margin:0 auto; width:290px; border:1px solid #CCC; padding:5px;}
.tab{float:left;list-style:none; width:290px; margin-left:-40px;}
.tab li{ line-height:30px; float:left; display:block;cursor:pointer;padding: 0 5px 0px 5px; margin: 0 1px;; text-transform:uppercase;color:#999;font-size:14px;font-weight:bold; background:#CCC;}
.tab a{color:#999999; text-decoration:none;}
.tab a:hover{color:#99CC00;}
.active{ color:#F00 !important;}
.tab_content_macbook, .tab_content_ipad, .tab_content_iphone{float:left;}
.tab_content_macbook img, .tab_content_ipad img, .tab_content_iphone img{width:286px; border:1px solid #FFF}
.tab_content_macbook img:hover, .tab_content_ipad img:hover, .tab_content_iphone img:hover{width:286px; border:1px solid #CCC}

[/php]

Mã html:
[php]

[/php]

Kết quả:

Tản mạn về jquery

Chúng ta thấy 3 đối tượng nằm theo thứ tự từ trên xuống dưới, câu hỏi đặt ra vậy có cách nào mỗi lần chỉ cần hiển thị một đối tượng, như thế sẽ gọn hơn, bài toán này nằm ở jquery

Vì hôm nay là buổi tản mạn về jquery nên tôi sẽ đi sâu vào giải thích từ lệnh jquery còn css thì không bàn nhé bạn

Trước khi sử dụng jquery bạn phải include thư viện jquery vào nhé, bằng lệnh sau:

[php][/php]

Phần code jquery:
[php]
$(document).ready(function() {
$(‘.tab_content_ipad, .tab_content_iphone’).hide();/*ẩn ipad và iphone chỉ hiển thị macbook*/
$(‘.tab li a’).click(function(){
$(‘.tab li a’).removeClass(‘active’);/*remove tất cả class active, cái chữ màu đỏ*/
$(this).addClass(‘active’);/*add class active vào tab được click, this tượng trưng cho đối tượng tab được click, giờ khi bạn click trên tab thì sẽ có màu đỏ chữ và các tab khác sẽ biến mất chữ mà đỏ*/
$(‘.tab_content_macbook, .tab_content_ipad, .tab_content_iphone’).hide();/*ẩn tất cả đối tượng macbook, ipad, iphone*/
var activeTab = $(this).attr(‘href’);/* khi người dùng click vào tab hiện tài thì sẽ lấy giá trị (#macbook, #ipad,#iphone) tùy vào click tab nào để lưu vào biết activeTab*/
$(activeTab).fadeIn();/*chức năng của nó là hiển thị ra đối tượng thông qua giá trị cảu activeTab*/
return false; /*để khỏi bị dựt, do # của href là mốc khi click vào nó sẽ chạy tới, như thế sẽ không đẹp mắt tý nào*/
});/*khi người dùng click vào tab thì các lệnh trong này được thực hiện*/

});

[/php]

Mời bạn xem kết quả tại đây click here

Tải toàn bộ mã tại đây click here

Đên đây xin kết thúc buổi tản mạn về jquery tại đây, hẹn gặp lại ở các phần tiếp theo của dự án

4.9/5 (16 Đánh giá)

Gửi Phản Hồi
Chọn đánh giá của bạn
0 Bình Luận
Thông tin người gửi
Anh Chị


Form đăng ký nhận bài mới

Đăng ký nhận bài viết mới

Khi mình đăng bài mới bạn sẽ nhận nó qua Email


Super-flatsome

Hướng dẫn thiết kế theme

Các functions thường dùng

  • Hotline: 0912 889 416

  • Fcwordpress trên facebook Fcwordpress trên Twitter Fcwordpress trên youtube

Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net

Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress

0912889416