Trang chủ > JQuery > Làm quen với JQuery – bài 1

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😀. Đầ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:

image

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ẻ!

Chuyên mục:JQuery
  1. tuyet nhi
    01/11/2010 lúc 4:52 chiều

    woa bài viết hay quá cảm ơn nhiều nha.mong sẽ có nhiều bài viết hay về jquery.mình sẽ theo dõi thường xuyên và học từ trang này.

  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: