Jquery 1 – Giới thiệu về jQuery

0
(0)

Chương1  Giới thiệu về jQuery

 

Với sự phát triển rất mau lẹ của Internet, người dùng ngày càng quan tâm hơn đến hình thức

của một trang web. Trước đây một trang web chỉ cần  banner, nội dung  ít footer hời hợt

 đã được cho  một trang web hoàn chỉnh. Nhưng bây giờ trang web đó phải  banner bắt

mắt, nội dung hay  còn nhiều hiệu ứng lạ mắt khác nữa thì mới  thể thu hút được người

đọc.

 

Chính  thế những web designer bắt đầu chú ý đến các thư viện JavaScript mở như jQuery

để tạo ra các hiệu ứng  thể tương tác trực tiếp với người đọc một cách nhanh chóng  dễ

dàng hơn rất nhiều  sử dụng thuần JavaScript.

 

Nhưng nếu bạn  người mới làm quen với jQuery bạn sẽ thấy không biết phải bắt đầu từ đâu

 jQuery cũng giống như bất cứ thư viện nào khác cũng  rất nhiều functions. Cho  bạn

 đọc phần tài liệu hướng dẫn sử dụng của jQuery thì bạn vẫn thấy rất phức tạp  khó hiểu.

Nhưng bạn yên tâm một điều  jQuery  cấu trúc rất mạch lạc  theo hệ thống. Cách viết

code của jQuery được vay mượn từ các nguồn  các web designer đa phần đã biết như

HTML  CSS. Nếu từ trước đến nay bạn chỉ  Designer chứ không phải coder, bạn cũng 

thể dễ dàng học jQuery  kiến thức về CSS giúp bạn rất nhiều khi bắt đầu với jQuery.

 

Nhận thấy jQuery còn khá mới mẻ với nhiều bạn   cũng  thư viện được đông đảo người

sử dụng. Izwebz giới thiệu đến các bạn loạt bài về jQuery. Trong loạt bài này chúng ta sẽ tìm

hiểu về jQuery  các tính năng của nó. Trước hết bạn nên biết jQuery  thể làm được

những gì.

 

Những  Jquery  thể làm

 

Hướng tới các thành phần trong tài liệu HTML. Nếu không sử dụng thư viện JavaScript

này, bạn phải viết rất nhiều dòng code mới  thể đạt được mục tiêu  di chuyển trong cấu

 

trúc cây (hay còn gọi  DOM = Document Object Model) của một tài liệu HTML  chọn ra

các thành phần liên quan. Jquery cho phép bạn chọn bất cứ thành phần nào của tài liệu để

“vọc” một cách dễ dàng như sử dụng CSS.

 

Thay đổi giao diện của một trang web. CSS  công cụ rất mạnh để định dạng một trang

web nhưng   một nhược điểm  không phải tất cả các trình duyệt đều hiển thị giống

nhau. Cho nên jQuery ra đời để lấp chỗ trống này,  vậy các bạn  thể sử dụng  để giúp

trang web  thể hiển thị tốt trên hầu hết các trình duyệt. Hơn nữa jQuery cũng  thể thay

đổi class hoặc những định dạng CSS đã được áp dụng lên bất cứ thành phần nào của tài liệu

HTML ngay cả khi trang web đó đã được trình duyệt load thành công. Thay đổi nội dung của

tài liệu. Jquery không phải chỉ  thể thay đổi bề ngoài của trang web,  cũng  thể thay

đổi nội dung của chính tài liệu đó chỉ với vài dòng code.   thể thêm hoặc bớt nội dung

trên trang, hình ảnh  thể được thêm vào hoặc đổi sang hình khác, danh sách  thể được sắp

xếp lại hoặc thậm chí cả cấu trúc HTML của một trang web cũng  thể được viết lại  mở

rộng. Tất cả những điều này bạn hoàn toàn  thể làm được nhờ sự giúp đỡ của API

(Application Programming Interface = Giao diện lập trình ứng dụng).

 

Tương tác với người dùng. Cho  công cụ bạn dùng  mạnh mẽ đến mấy, nhưng nếu bạn

không  quyền quyết định khi nào  được sử dụng thì công cụ đó cũng coi như bỏ. Với thư

viện javaScript như jQuery,  cho bạn nhiều cách để tương tác với người dùng  dụ như khi

người dùng nhấp chuột vào đường link thì sẽ   xảy ra. Nhưng cái hay của   không

làm cho code HTML của bạn rối tung lên chính  nhờ các Event Handlers. Hơn nữa Event

Handler API sẽ bảo đảm rằng trang web của bạn tương thích hầu hết với các trình duyệt, điều

này đã  đang làm đau đầu rất nhiều các web designer.

 

Tạo hiệu ứng động cho những thay đổi của tài liệu. Để tương tác tốt với người dùng, các

web designer phải cho người dùng thấy được hiệu ứng  sẽ xảy ra khi họ làm một tác vụ nào

đó. Jquery cho phép bạn sử dụng rất nhiều hiệu ứng động như mờ dần, chạy dọc chạy ngang

v.v..  nếu vẫn chưa đủ,  còn cho phép bạn tự tạo ra các hiệu ứng của riêng mình.

 

Lấy thông tin từ server  không cần tải lại trang web. Đây chính  công nghệ ngày

càng trở nên phổ biến Asynchronous JavaScript And XML (AJAX),  giúp người thiết kế

web tạo ra những trang web tương tác cực tốt  nhiều tính năng. Thư viện jQuery loại bỏ sự

phức tạp của trình duyệt trong quá trình này  cho phép người phát triển web  thể tập

trung vào các tính năng đầu cuối. Đơn giản hoá các tác vụ javaScript. Ngoài những tính năng

như đã nêu  trên, jQuery còn cho phép bạn viết code javaScript đơn giản hơn nhiều so với

cách truyền thống như  các vòng lặp  điều khiển mảng.

 

Tại sao jQuery làm việc tốt

 

Người dùng ngày càng quan tâm hơn đến Dynamic HTML, đó cũng  nền móng cho sự ra

đời của những javaScript Frameworks.  frameworks thì chỉ tập trung vào một vài tính năng

vừa nêu  trên,  cái thì ráng bao gồm tất cả những hiệu ứng, tập tính  nhồi nhét vào một

package. Để đảm bảo  một thư viện “nhanh gọn nhẹ” nhưng vẫn “ngon bổ rẻ” với các tính

năng đã nêu  trên, jQuery sử dụng những chiến lược sau:

 

Tận dụng kiến thức về CSS. Các jQuery Selector hoạt động y chang như CSS Selector với

cùng cấu trúc   pháp. Chính  thế thư viện jQuery  cửa ngõ cho các web designer

muốn thêm nhiều tính năng hơn nữa cho trang web của mình. Bởi  điều kiện tiên quyết để

 

trở thành một web designer chuyên nghiệp  khả năng sử dụng CSS thuần thục. Với kiến

thức  sẵn về CSS, bạn sẽ  sự khởi đầu thuận lợi với jQuery.

 

Hỗ trợ Plugin. Để tránh bị rơi vào trạng thái quá tải tính năng, jQuery cho phép người dùng

tạo  sử dụng Plugin nếu cần. Cách tạo một plugin mới cũng khá đơn giản  được hướng

dẫn cụ thể, chính  thế cộng đồng sử dụng jQuery đã tạo ra một loạt những plugin đầy tính

sáng tạo  hữu dụng.

 

Xoá nhoà sự khác biệt giữa trình duyệt. Một thức tế tồn tại  mỗi một hệ thống trình duyệt

lại  một kiểu riêng để đọc trang web. Dẫn đến một điều làm đau đầu các web designer 

làm thế nào để cho trang web  thể hiển thị tốt trên mọi trình duyệt. Cho nên đôi khi người

ta phải làm hẳn một phần code phức tạp để đảm bảo rằng trang web của họ được hiển thị gần

như tương đồng  các trình duyệt phổ biến. Jquery giúp bạn thêm một lớp bảo vệ cho sự khác

biệt của trình duyệt  giúp quá trình này diễn ra dễ dàng hơn rất nhiều.

 

Luôn làm việc với Set.  dụ khi chúng ta yêu cầu jQuery tìm tất cả các thành phần  class

 delete  ẩn chúng đi. Chúng ta không cần phải loop qua từng thành phần được trả về.

Thay vào đó, những phương pháp như  hide() được thiết kế ra để làm việc với set thay 

từng thành phần đơn lẻ. Kỹ thuật này được gọi  vòng lặp ẩn, điều đó  nghĩa  chúng ta

không phải tự viết code để loop nữa   vẫn được thực thi, chính  thế code của chúng ta

sẽ ngăn hơn rất nhiều.

 

Cho phép nhiều tác vụ diễn ra trên cùng một dòng. Để tránh phải sử dụng những biến tạm

hoặc các tác vụ lặp tốn thời gian, jQuery cho phép bạn sử dụng kiểu lập trình được gọi 

Chaining cho hầu hết các method của nó. Điều đó  nghĩa  kết quả của các tác vụ được

tiến hành trên một thành phần chính  thành phần đó,  sẵn sàng cho tác vụ tiếp theo được

áp dụng lên nó. Những chiến lược được nêu  trên giúp kích thước của jQuery rất nhỏ  chỉ

khoảng trên dưới 20Kb dạng nén. Nhưng vẫn đảm bảo cung cấp cho chúng ta những kỹ thuật

để giúp code trên trang nhỏ gọn  mạch lạc.

 

Jquery sở  trở nên phổ biến  do cách sử dụng đơn giản  bên cạnh đó còn  một cộng

đồng sử dụng mạnh mẽ vẫn ngày ngày phát triển thêm Plugin  hoàn thiện những tính năng

trọng tâm của jQuery. Cho  thực tế  vậy, nhưng jQuery lại  thư viện javaScript hoàn

toàn miễn phí cho mọi người sử dụng. Tất nhiên  được bảo vệ bởi luật GNU Public

License  MIT License, nhưng bạn cứ yên tâm  bạn  thể sử dụng  trong hầu hết các

trường hợp kể cả thương mại lẫn  nhân.

 

Tạo trang web đầu tiên với sự hỗ trợ của jQuery

 

Bởi  jQuery  một thư viện JavaScript do vậy để sử dụng  bạn phài chèn  vào trang

web thì mới  thể sử dụng được.  hai cách để chèn jQuery vào một trang web.

 

1. Tự host jQuery

 

Vào trang chủ của jQuery  download phiên bản mới nhất. Thường thì  2 phiên bản của

jQuery cho bạn download. Phiên bản chưa nén dành cho những người phát triển  đang học

như bạn. Còn phiên bản nén kia dành cho phần sử dụng trực tiếp trên trang    dung

lượng nhỏ hơn rất nhiều so với phiên bản chưa nén. Bạn không cần phải cài đặt jQuery, bạn

chỉ cần đặt đường link tới thư viện đó  được. Bất cứ khi nào bạn cần sử dụng jQuery, bạn

chỉ cần gọi  trong tài liệu HTML đến nơi lưu trữ  trên host của bạn.

 

 

2. Dùng phiên bản  sẵn trên server của Google

Ngoài cách trên ra bạn cũng  thể sử dụng phiên bản nén của jQuery  sẵn trên server của

Google. Sử dụng cách này  2 điều lợi  a) tiết kiệm băng thông cho trang web của bạn 

b) jQuery sẽ được load nhanh hơn nếu máy của người dùng đã cache jQuery.

Tuy nhiên trong phần sắp tới chúng ta sẽ sử dụng phiên bản  sẵn trên server của Google 

không cần phải download về máy.  pháp để chèn jQuery sử dụng file  sẵn trên server

của Google như sau:

 

<script

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

type="text/javascript"></script>

 

Chuẩn bị tài liệu HTML

 

Trong hầu hết các  dụ được sử dụng trong loạt bài này thì  3 thành phần được sử dụng

nhiều nhất đó chính  tài liệu HTML, Stylesheet CSS  một tài liệu JavaScript để thực hiện

lệnh trên đó. Trong  dụ đầu tiên chúng ta sẽ sử dụng một tài liệu HTML đơn giản với một

header, sidebar, content  footer. Trong phần content sẽ  3 đoạn văn bản  một số class

 sẵn. Tất nhiên bạn phải sử dụng CSS để định dạng cho tài liệu HTML này. Bởi  đây 

tutorial về jQuery cho nên tôi sẽ không giải thích về các thuộc tính cũng như chắc năng của

CSS. Nếu  điểm nào không  bạn  thể tham khảo phần CSS ngay trên izwebz.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>jQuery Introduction</title>

<link rel="stylesheet" href="stylesheet.css"</span> type="text/css" media="screen"

/>

<script

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

type="text/javascript"></script>

<script src=”first-jquery.js” type=”text/javascript”></script>

</head>

<body>

<div id="wrapper">

<div id="header">

<h1 id="logo">jQuery Introduction</h1>

</div>

<div id="mainContent">

<div id="sidebar">

<ul id="nav">

<li><a href="#">Home Page</a></li>

<li><a href="#">About Me</a></li>

<li><a href="#">Forum</a></li>

<li><a href="ebook.pdf">Ebooks</a></li>

<li><a href="http://www.jquery.com">Tutorials</a></li>

<li><a href="#">Photoshop</a></li>

<li><a href="mailto:email@yahoo.com">Email</a></li>

</ul>

</div><!–end #sidebar–>

<div id="primary">

<h3>Lorem ipsum dolor sit amet</h3>

<p class="text">

some text here

 

</p>

<div>

<h3>Lorem ipsum dolor sit amet</h3>

<p>

some text here

</p>

</div>

<h3>Lorem ipsum dolor sit amet</h3>

<p class="text">

some text here

</p>

</div><!–end #primary–>

</div><!–end #mainContent–>

<div id="footer">

<p>&copy;2010 Izwebz  Demon Warlock</p>

</div><!–end #footer–>

</div><!–end #wrapper–>

</body>

</html>

 

 đoạn code trên bạn dễ dàng nhận thấy rằng thư viện jQuery được đặt  dưới Stylesheet.

Đây  một điểm rất quan trọng  bạn cần lưu ý  thứ tự của các file khi gọi. Ban đầu phải

 CSS load trước, khi trang web đã load xong phần CSS thì chúng ta mới thêm vào phần thư

viện jQuery cuối cùng mới  code jQuery chúng ta tự viết ra. Nếu không khi code jQuery

của bạn sẽ không làm việc đúng như mong đợi nếu thư viện jQuery chưa được load.

 

Bắt đầu code jQuery

 

Bây giờ bạn mở trình soạn thảo code lên  tạo một file tên  first-jquery.js  file này đã

được chúng ta chèn vào trong dòng code:

 

<script src=”first-jquery.js” type=”text/javascript”></script>

 

 vào file vừa tạo 3 dòng code như sau:

 

$(document).ready(function() {

$('.text').addClass('important');

});

 

Thao tác  bản nhất của jQuery  chọn một phần nào đó của tài liệu HTML. Bạn tiến hành

 bằng cách sử dụng hàm $(). Thường thì nằm giữa dấu ngoặc ()  một chuỗi dưới dạng

tham số,   thể  những CSS Selectors. Trong  dụ này chúng ta muốn tìm tất cả những

thành phần nào  class=”text”,  pháp giống như khi bạn viết code CSS vậy. Tất nhiên 

những bài sau chúng ta sẽ tham khảo thêm nhiều những lựa chọn khác hay hơn nữa. Trong

chương 2 chúng ta sẽ nghiên cứu một vài cách khác để lựa chọn các thành phần trong tài liệu

HTML.

 

Hàm $() chính  một jQuery Object, đây  nên móng cho tất cả những  chúng ta sẽ học từ

bây giờ. Jquery Object bao gồm không hoặc nhiều thành phần DOM  cho phép chúng ta

tương tác với chúng bằng nhiều cách. Trong trường hợp này chúng ta muốn thay đổi cách

hiển thị của những phần này trong trang, chúng ta thực hiện  bằng cách thay đổi class của

nó.

 

Thêm vào một class mới

 

Phương pháp .addClass(), cũng giống như hầu hết các phương pháp jQuery khác, được đặt

tên theo chức năng của nó. Khi được gọi,  sẽ thêm một class vào thành phần chúng ta đã

chọn. Tham số duy nhất của   tên class sẽ được thêm vào. Phương pháp này  đối ngược

với   .removeClass(), sẽ cho phép chúng ta quan sát jQuery hoạt động như thế nào khi

chúng ta khám phá những phương pháp lựa chọn  sẵn của jQuery. Còn bây giờ, code

jQuery của chúng ta chỉ đơn giản thêm một class=”important”,  class này đã được khai báo

trong stylesheet với các thuộc tính như viền đỏ  nền hồng nhạt.

 

border: 1px solid red; background: pink;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Bạn cũng nhận thấy rằng chúng ta không phải chạy một vòng lặp nào để thêm class vào các

đoạn văn bản  cùng chung class. Đây chính  vòng lặp ẩn của các phương pháp jQuery,

như trong  dụ này  .addClass(), cho nên bạn chỉ phải gọi đúng một lần  chỉ  vậy để

thay đổi những thành phần bạn muốn trong tài liệu. Bây giờ nếu bạn chạy thử trang web vừa

tạo trên trình duyệt bạn sẽ thấy 2 đoạn văn  cùng class  .text sẽ bị  hồng   viền màu

đỏ.

 

Đến đây chúng ta đã kết thúc phần một của loạt bài về jQuery. Trong bài này bạn đã biết

được jQuery  thể làm những gì? Bạn cũng đã học được cách để sử dụng jQuery trên một tài

liệ HTML  cuối cùng  dùng thử một phương pháp của jQuery  .addClass().

 

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Related posts

Cách khắc phục Lỗi “Trang web này phía trước chứa các chương trình có hại” trong WordPress

Cách thêm thẻ tác giả Facebook trong WordPress

Cách sửa danh mục và số lượng bình luận sau khi nhập WordPress