Lưu trữ
Làm quen với jQuery-Bài 3
Hôm nay chúng ta sẽ đến với bài viết thứ ba trong chuỗi bài về jQuery, mang những kiến thức cơ bản nhất về jQuery đến với bạn. Trong hai bài viết trước, mình đã đề cập đến một số hàm mà các bạn cần biết trong jQuery. Bài này, chúng ta sẽ áp dụng những kiến thức đó vào thực hành( cũng như làm quen thêm với một vài hàm mới), cụ thể chúng ta sẽ tạo ra một thành phần web khá quen thuộc mà mọi người vẫn hay gọi là accordion.
Accordion là một trong những cách hay để hiển thị một lượng lớn nội dung trong một khoảng giao diện nhỏ. Bạn có thể có 5 hay 6 (nhiều) headers, tương ứng với mỗi header là một paragraph bên dưới nó. Với accordion, chỉ một paragraph được hiển thị tại một thời điểm nhất định, người dùng bấm lên header để xem nội dung liên quan. Chúng ta sẽ xây dựng một accordion đơn giản. Bạn sẽ thấy các hàm xây dựng sẵn trong jQuery khiến cho mọi việc trở nên dễ dàng thế nào.
Đầu tiên ta sẽ xây dựng accordion bằng mã HTML:
Và tạo CSS style đơn giản để phân biệt rõ giữa phần header và content:
p,h3 {margin: 0; padding: 0;}
p {height: 150px; width: 198px; border: 1px solid black;}
h3 {height: 50px; width: 200px; background-color: blue; color:
h3 {height: 50px; width: 200px; background-color: blue; color: white; border: 1px solid black;}
Chúng ta sẽ được một component giống như dưới đây. Mình chỉ chụp hai Items để tiết kiệm giao diện, hai Items còn lại ngay bên dưới cũng tương tự như thế.
Bây giờ chúng ta sẽ chuyển sang phần liên quan đến JavaScript. Các bạn include jQuery từ Google CDN, thêm phần thẻ vào cuối trang, và ta bắt đầu:
var headings = $(‘h3’), paras = $(‘p’);
Những gì đoạn code trên làm là chọn tất cả các heading ‘h3’ và tất cả các paragraph ‘p’, lưu chúng vào hai biến mảng headings và paras.
Bây giờ việc cần làm là giẩu tất cả các paragraph đi, chỉ hiển thị paragraph đầu tiên. Ta sẽ làm như sau, sử dụng hàm eq():
paras.hide().eq(0).show();
Đầu tiên ta giấu tất cả các paragraph, sau đó dùng eq(0) để chọn paragraph thứ nhất trong mảng ‘paras’. Ta đều biết trong hầu hết các ngôn ngữ lập trình, các phần tử trong mảng bắt đầu từ 0. Để hiển thị phần tử này ta đã sử dụng hàm show() trong jQuery. Đến đây ta được một thành phần web như hình dưới:
Tiếp theo chúng ta sẽ viết code để phục vụ cho mục đích giấu và hiển thị các paragraphs. Trước hết ta cần thêm sự kiện click cho các headers:
headings.click(function() {
var cur = $(this); //lưu phần tử vừa được clicked vào một biến thuận tiện cho việc tham chiếu
cur.siblings(‘p’).hide(); //giấu tất cả các paragraphs
cur.next(‘p’).show(); //chọn paragraph ngay dưới header vừa được clicked và hiển thị paragraph này
});
Ở đây chúng ta lấy giá trị ‘this’ của đối tượng jQuery trước khi lưu vào biến ‘cur’. ‘this’ tham chiếu đến phần tử hiện thời đang được tương tác. Trong trường hợp này là header mà ta click vào.
cur.siblings(‘p’).hide();
Hàm siblings() trong jQuery tìm tất cả các phần tử cùng cấp trong cây phân cấp với phần tử hiện thời. Ở đây ta tìm tất cả các phần tử cùng cấp với phần tử hiện thời là các paragraphs và giấu chúng đi. Đến đây không có paragraph nào đang được hiển thị.
cur.next(‘p’).show();
Cuối cùng chúng ta sử dụng hàm next() của jQuery.Hàm này tìm phần tử kế với phần tử mà ta đã chọn. Ở đây ta tìm phần tử paragraph kế tiếp với header mà ta vừa click và hiển thị nó.
Chúng ta đã làm xong một accordion đơn giản. Nếu ta thử những gì ta vừa làm trên web browser, accordion của chúng ta hoạt động khá tốt. Tuy nhiên, ta biết rằng jQuery cung cấp rất nhiều hàm để thực hiện các chứng năng animation. Chúng ta sẽ thử dùng một vài hàm trong các hàm này của jQuery.
Hai hàm mà ta sẽ sử dụng là slideUp() và slideDown(). Những hàm này thực hiện đúng những gì mà tên của chúng đã nói lên, chúng từ từ hiển thị một phần tử từ dưới lên trên và từ trên xuống dưới đến khi phần tử đó được hiển thị đầy đủ trên trình duyệt web. Trong hàm click() ta viết đoạn mã sau:
headings.click(function() {
var cur = $(this);
cur.siblings(‘p’).hide();
cur.next(‘p’).show();
});
Thay thế hàm hide() bằng slideUp() và hàm show() bằng slideDown():
headings.click(function() {
var cur = $(this);
cur.siblings(‘p’).slideUp();
cur.next(‘p’).slideDown();
});
Và kiểm tra trên trình duyệt web. Bạn có thấy hiệu ứng của nó có đẹp hơn không?
Chúng ta đã kết thúc bài học thứ ba về jQuery cơ bản.Nếu không muốn viết lại những đoạn code bên trên, bạn có thể download để test thử luôn. Các bạn quan tâm đến jQuery nếu có thắc mắc gì hoặc có các kiến thức hay về jQuery hãy gửi lại phản hồi để ta cùng nhau chia sẻ. Chúc các bạn lập trình vui vẻ!
Làm quen với JQuery-bài 2
Chào mừng các bạn đến với bài 2 trong loạt bài viết về JQuery. Trong bài trước, chúng ta đã học cách nhúng thư viện JQuery vào trong trang của ta, cách lựa chọn các element và cuối cùng là làm cho một div trong trang chuyển động sử dụng hàm animate() của JQuery. Trong bài này chúng ta sẽ học cách lựa chọn các element dựa vào các mối quan hệ của chúng với element mà ta đã tương tác. Nghe có vẻ như phức tạp, nhưng thực chất mọi chuyện lại khá đơn giản.
Trong thực tế, khi ta đã chọn một element, làm thế nào để duyệt toàn bộ trang để tìm cha của element đó là việc làm cần thiết mà ta thường gặp. Bạn hoàn toàn có thể sử dụng một selector khác, tuy nhiên có nhiều cách dễ hơn, hãy xem đoạn mã HTML dưới đây:
<div>
<h2>A header with <a href="http://www.danchanvit.wordpress.com">a link</a> inside.
<p>A paragraph in the div</p>
</div>
Sử dụng JQuery ta lựa chọn element h2:
$(‘h2’);
Bây giờ làm thế nào để chọn element div? Ta có thể dùng một selector khác:
$(‘div’);
Trong trường hợp này, mọi thứ đều hoạt động tốt, tuy nhiên bạn nghĩ đến những trang phức tạp hơn nhiều, việc dùng vô số các selector kiểu như vậy rõ ràng là không hợp lý, kể cả việc bạn đặt id cho từng selector chỉ để phục vụ cho mục đích làm việc với javascript. Trên thực tế, JQuery đã khiến cho mọi việc trở nên rất dễ dàng:
$('h2').parent(); //Chọn thẻ div.
Đó chính là điểm nhấn trong bài viết này – học cách tối ưu code của chúng ta, giảm thiểu việc phải lựa chọn quá nhiều selector và làm việc dựa trên những element mà ta đã chọn trước đó.
Bây giờ, thay vì chọn cha của ‘h2’, ta chọn con của thẻ này, trong ví dụ trên đó chính là thẻ ‘a’, ta có thể quay trở lại cách trong CSS:
$(‘h2 a’);
Liệu JQuery có cung cấp cách làm tương tự không? Câu trả lời là có!
('h2').children(); //chọn thẻ 'a'
Nhưng phải làm sao nếu thẻ ‘h2’ có nhiều hơn một thẻ con, JQuery cho phép chúng ta truyền tham số selector vào trong hàm children() để lựa chọn cụ thể hơn:
$('h2').children('a'); //Chọn tất cả các thẻ con của 'h2'; là các đường link 'a';
Ví dụ tiếp theo, chúng ta có một danh sách chưa sắp xếp(unordered list):
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Tất nhiên việc chọn toàn bộ các item trong danh sách thật đơn giản, ta chỉ việc viết:
$(‘li’);
Bạn cũng có thể sử dụng hàm mà chúng ta vừa đọc:
$(‘ul’).children();
Thông thường việc lựachọn cách dùng nào phụ thuộc vào tình huống cụ thể trong trang của ta, ví dụ nếu ta có 2 danh sách, trong đó một danh sách chưa sắp xếp và một danh sách đã sắp xếp, mà ta chỉ muốn chọn tất cả các item của một trong hai danh sách đó, ta sẽ dùng cách thứ 2 trong 2 cách kể trên, Tuy nhiên nếu ta muốn chọn một item cụ thể nào đó trong danh sách thì ta sẽ dùng một hàm khác trong JQuery:
$(‘li’).eq(2)// chọn item 3.
Lưu ý là hàm trên chọn item 3. Đó là vì hầu hết các ngôn ngữ lập trình đều sử dụng “zero based index” có nghĩa là index đầu tiên bắt đầu từ 0.
Trước khi chúng ta tiếp tục đi xa hơn, các bạn nên nhớ rằng một trong số các nguyên tắc chính của JQuery là “chainability”. Nghĩa là có thể gọi hàm này sau hàm trước và cứ thế gọi liên tiếp:
$('ul').children('li').eq(2).animate({...});
Trong đoạn code trên:
1. $(‘ul’) => Chọn tất cả các danh sách chưa sắp xếp trong trang.
2. children(‘li’) => Chọn tất cả các con của danh sách là các thẻ ‘li’;
3. eq(2) =>Chọn item thứ 3 trong danh sách.
4 animate({…}) => Làm cho một item cụ thể chuyển động. Chúng ta đã nói đến animate ở bài trước.
Trong khi hàm children() chỉ tìm thế hệ kế tiếp gần nhất(nghĩa là tìm con mà không tìm cháu :D), JQuery cung cấp một cách để chúng ta có thể đào sâu hơn. Trở lại với đoạn mã HTML mà chúng ta đã viết bên trên:
<div>
<h2>A header with <a href="http://www.danchanvit.wordpress.com">a link</a> inside.
<p>A paragraph in the div</p>
</div>
Nếu ta đã chọn:
$(‘div’);
Và ta muốn chọn thẻ <a> nằm bên trong thẻ <h2>, bạn sẽ nghĩ đến cách sau:
$(‘div’).children(‘h2’).children(‘a’);
Thông thường, có một luật bất thành văn, nếu bạn gọi một hàm nào đó liên tiếp hai lần, thì sẽ có cách làm hay hơn. Và tất nhiên là đúng vậy, sử dụng hàm find() trong JQuery, đoạn code trên của chúng ta sẽ như sau:
$(‘div’).find(‘a’);
Hàm find() sẽ không dừng lại sau khi tìm thấy thẻ ‘a’ đầu tiên mà sẽ tiếp tục chạy và tìm tất cả các thẻ ‘a’ là con, cháu, hoặc các thế hệ kế tiếp của thẻ ‘div’. Về cơ bản, hàm find() tìm tất cả các element nằm trong element mà ta đã chọn không cần biết đến cây phân cấp trong element đó.
Tiếp theo, chúng ta có 4 hàm khác cho phép chúng ta tìm những element có cùng phân cấp với element mà ta đã chọn. Trong ví dụ của ta ở trên thì ‘h2’ và ‘p’ là những element có cùng phân cấp. Xem các hàm sau:
$('h2').next(); //Chọn một element cùng phân cấp ngay sau element 'h2'.
$('h2').nextAll(); //Chọn tất cả các element cùng phân cấp sau element 'h2'.
$('p').prev(); //Chọn một element cùng phân cấp đứng trước thẻ <p> ( trong ví dụ là chọn thẻ 'h2').
$('p').prevAll(); //Chọn tất cả các element cùng phân cấp đứng trước thẻ 'p'
Như các bạn thấy tất cả các hàm trên đều rất đơn giản và hữu dụng nếu bạn muốn nhảy từ element này tới element khác.
Hàm cuối cùng mà chúng ta sẽ xem xét trong bài này là hàm siblings(). Chúng ta có đoạn mã HTML mới:
<p>A paragraph</p>
<h2>A heading</p>
<img src="somepic.jpg" alt="A picture"/>
<h1>A bigger heading</h1>
Từ thẻ ‘p’ ta có thể sử dụng nextAll() để chọn tất cả các thẻ có cùng phân cấp với ‘p’ (vì ‘p’ là thẻ đầu tiên)
$(‘p’).nextAll();
Nhưng nếu chúng ta đang ở ‘h2’, làm thế nào để chọn tất cả các element có cùng phân cấp với nó? Đơn giản:
$(‘h2’).siblings();
Hàm siblings() cũng có thể nhận một đối số là selector:
$(‘h2’).siblings(‘p’);//Chỉ chọn các element cùng phân cấp là các paragraph.
Hy vọng các bạn cảm thấy hứng thú với pha đột phá nhanh vào thế giới selector trong JQuery mà chúng ta vừa thực hiện. Nếu các bạn có thắc mắc gì xin hãy gửi lại trong phần comment. Chúc các bạn coding vui vẻ!
Làm quen với JQuery – bài 1
Làm quen với JQuery – bài 1
Đâ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 code 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ị code 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 :D. Đầu tiên bạn có thể download JQuery và nhúng vào trang của bạn theo cách sau đây:
<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 code tương tự như trên:
<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 code sau:
<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 code
Ta đã biết cách nhúng JQuery vào trang của ta, và sẽ viết một đoạn code 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:
$(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 code 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:
$('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:
<div> <p>this is some text</p> </div>
Và tạo luôn css cho thẻ này:
#something {
width: 200px;
height: 200px;
background-color: red;
color: white;
border: 4px solid black;
margin: 100px 0 0 80px;
}
Trang của bạn sẽ hiển thị như sau:
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:
$(‘something’)
Tương tự, bạn hoàn toàn có thể chọn với dòng code $(‘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:
$('#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)
.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:
.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 code của chúng ta:
$('#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ẻ!
Trà Nóng! 
