Trong b&agrave;i trước ch&uacute;ng ta đ&atilde; nắm được cơ bản về jQuery cũng như những lợi thế v&agrave; t&aacute;c dụng của n&oacute; trong thực tế. Trong b&agrave;i n&agrave;y, ch&uacute;ng ta sẽ c&ugrave;ng t&igrave;m hiểu c&aacute;ch thức v&agrave; c&aacute;c bước đầu ti&ecirc;n để sử dụng jQuery.
<h2 style="text-align: justify;">L&agrave;m thế n&agrave;o để sử dụng jQuery?</h2>
jQuery l&agrave; một thư viện JavaScript. Do đ&oacute;, về cơ bản c&oacute; hai c&aacute;ch để sử dụng jQuery:
<ol style="text-align: justify;">
<li>C&agrave;i đặt cục bộ - Bạn c&oacute; thể tải thư viện jQuery về m&aacute;y v&agrave; đưa n&oacute; v&agrave;o m&atilde; HTML để sử dụng. Trường hợp n&agrave;y, jQuery sẽ l&agrave;m việc như c&aacute;c thư viện JavaScript cục bộ.</li>
<li>Sử dụng trực tiếp phi&ecirc;n bản trực tuyến được cung cấp tr&ecirc;n CDN - Bạn c&oacute; thể gọi trực tiếp thư viện jQuery v&agrave;o m&atilde; HTML của m&igrave;nh trực tiếp từ Mạng ph&acirc;n phối nội dung (CDN) th&ocirc;ng qua ch&egrave;n v&agrave;o một URL tương ứng cung cấp jQuery.</li>
</ol>
Mỗi c&aacute;ch sẽ c&oacute; c&aacute;ch thức sử dụng v&agrave; ưu nhược điểm kh&aacute;c nhau. Ch&uacute;ng ta sẽ c&ugrave;ng t&igrave;m hiểu cụ thể về cả hai c&aacute;ch ở phần dưới đ&acirc;y:
<h3 style="text-align: justify;">Tải về v&agrave; sử dụng thư viện jQuery cục bộ</h3>
Để bắt đầu, trước ti&ecirc;n h&atilde;y tải xuống jQuery v&agrave; đưa n&oacute; v&agrave;o t&agrave;i liệu của bạn. C&oacute; hai phi&ecirc;n bản jQuery c&oacute; sẵn để tải xuống l&agrave; phi&ecirc;n bản n&eacute;n v&agrave; kh&ocirc;ng n&eacute;n.
Phi&ecirc;n bản kh&ocirc;ng n&eacute;n ph&ugrave; hợp nhất để ph&aacute;t triển, gỡ lỗi hoặc hiệu chỉnh theo &yacute; muốn; trong khi đ&oacute;, phi&ecirc;n bản n&eacute;n (đ&atilde; được r&uacute;t gọn) được khuyến kh&iacute;ch để sử dụng thực tế v&igrave; n&oacute; tiết kiệm băng th&ocirc;ng&nbsp; v&agrave; cải thiện hiệu suất thực thi do k&iacute;ch thước tệp nhỏ.
Bạn c&oacute; thể tải xuống jQuery tại: <a href="https://jquery.com/download/">https://jquery.com/download/</a>
Khi bạn đ&atilde; tải xuống tệp jQuery, bạn c&oacute; thể thấy n&oacute; c&oacute; phần mở rộng .js, v&igrave; jQuery chỉ l&agrave; một thư viện JavaScript, do đ&oacute; bạn c&oacute; thể sử dụng tệp jQuery trong t&agrave;i liệu HTML của m&igrave;nh với thẻ &lt;script&gt; giống như khi sử dụng c&aacute;c tệp JavaScript b&igrave;nh thường kh&aacute;c.
<pre class="lang:default decode:true" title="V&iacute; dụ đơn giản đầu ti&ecirc;n">&lt;!DOCTYPE html&gt;
&lt;html lang="vi"&gt;
&lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;Bắt đầu với jQuery cũng tek4.vn&lt;/title&gt;
 &lt;link rel="stylesheet" href="css/style.css"&gt;
 &lt;script src="js/jquery-3.5.1.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;Hello, Tek4.vn!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
Lu&ocirc;n bao gồm tệp jQuery trước c&aacute;c tập lệnh t&ugrave;y chỉnh của bạn; nếu kh&ocirc;ng, c&aacute;c API jQuery sẽ kh&ocirc;ng khả dụng khi m&atilde; jQuery của bạn cố gắng truy cập v&agrave;o n&oacute;.
Như bạn c&oacute; thể thấy, ch&uacute;ng ta đ&atilde; bỏ qua thuộc t&iacute;nh type = "text / javascript" b&ecirc;n trong thẻ &lt;script&gt;&nbsp; trong v&iacute; dụ tr&ecirc;n. Bởi v&igrave; điều n&agrave;y kh&ocirc;ng bắt buộc trong HTML5. JavaScript l&agrave; ng&ocirc;n ngữ kịch bản mặc định trong HTML5 v&agrave; trong tất cả c&aacute;c tr&igrave;nh duyệt hiện đại.
<h3 style="text-align: justify;">Sử dụng thư viện jQuery trực tuyến qua CDN</h3>
Ngo&agrave;i c&aacute;ch sử dụng cục bộ như tr&ecirc;n, bạn cũng c&oacute; thể đưa jQuery v&agrave;o t&agrave;i liệu của m&igrave;nh th&ocirc;ng qua c&aacute;c li&ecirc;n kết CDN (Mạng ph&acirc;n phối nội dung) c&oacute; sẵn miễn ph&iacute;, nếu bạn kh&ocirc;ng muốn tự tải xuống v&agrave; lưu trữ file jQuery cục bộ. Bạn chỉ cần đưa v&agrave;o một URL của CDN chứa file jQuery trong thẻ &lt;script&gt;&nbsp;.
CDN c&oacute; thể mang lại lợi &iacute;ch về hiệu suất bằng c&aacute;ch giảm thời gian tải, v&igrave; ch&uacute;ng lưu trữ c&aacute;c tệp jQuery tr&ecirc;n nhiều m&aacute;y chủ trải rộng tr&ecirc;n to&agrave;n cầu v&agrave; khi người d&ugrave;ng y&ecirc;u cầu tệp jQuery, n&oacute; sẽ được ph&acirc;n phối từ c&aacute;c m&aacute;y chủ gần họ nhất. CDN thực chất l&agrave; một hệ thống gồm nhiều m&aacute;y chủ chứa c&ugrave;ng một nội dung được đặt ph&acirc;n t&aacute;n tr&ecirc;n c&aacute;c vị tr&iacute; địa l&yacute; kh&aacute;c nhau. Chẳng hạn Việt Nam, Mỹ, Singapore,...Khi một y&ecirc;u cầu được gửi đến n&oacute; sẽ được chuyển cho m&aacute;y chủ c&oacute; vị tr&iacute; ph&ugrave; hợp nhất để cung cấp nội dung cho y&ecirc;u cầu đ&oacute; (ở đ&acirc;y l&agrave; tệp jQuery).
Điều n&agrave;y cũng mang lại một lợi thế kh&aacute;c đ&oacute; l&agrave; nếu kh&aacute;ch truy cập v&agrave;o trang web của bạn đ&atilde; tải xuống một bản sao của jQuery từ c&ugrave;ng một CDN trong khi truy cập c&aacute;c trang web kh&aacute;c, n&oacute; sẽ kh&ocirc;ng phải tải xuống lại v&igrave; n&oacute; đ&atilde; c&oacute; trong bộ nhớ cache của tr&igrave;nh duyệt. Điều n&agrave;y l&agrave; tiết kiệm kh&aacute; nhiều băng th&ocirc;ng v&agrave; tăng trải nghiệm cho người d&ugrave;ng.
C&oacute; rất nhiều c&aacute;c CDN jQuery được hỗ trợ tr&ecirc;n to&agrave;n cầu. Chẳng hạn dưới đ&acirc;y l&agrave; c&aacute;ch th&ecirc;m file jQuery phi&ecirc;n bản mới nhất hiện nay (3.5.1) bằng CDN của một số nh&agrave; cung cấp nổi tiếng:
<div class="shadow" style="text-align: justify;">
<div>CDN của StackPath</div>
<div class="syntax">
<pre class="lang:default decode:true ">&lt;script src="https://code.jquery.com/jquery-3.5.1.min.js"&gt;&lt;/script&gt;</pre>
CDN của Google:
<pre class="lang:default decode:true">&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;</pre>
CDN của Microsoft:
<pre class="lang:default decode:true ">&lt;script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"&gt;&lt;/script&gt;</pre>
<h2>Tạo Website đầu ti&ecirc;n sử dụng jQuery</h2>
Đến đ&acirc;y bạn đ&atilde; hiểu mục đ&iacute;ch của thư viện jQuery cũng như c&aacute;ch đưa n&oacute; v&agrave;o t&agrave;i liệu html của m&igrave;nh, b&acirc;y giờ đ&atilde; đến l&uacute;c đưa jQuery v&agrave;o sử dụng thực sự.
Trong phần n&agrave;y, ch&uacute;ng ta sẽ thực hiện một thao t&aacute;c jQuery đơn giản bằng c&aacute;ch thay đổi m&agrave;u của văn bản ti&ecirc;u đề từ m&agrave;u đen mặc định sang m&agrave;u đỏ.
</div>
</div>
<pre class="lang:default decode:true">&lt;!DOCTYPE html&gt;
&lt;html lang="vi"&gt;
&lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;Bắt đầu với jQuery c&ugrave;ng Tek4.vn&lt;/title&gt;
 &lt;link rel="stylesheet" href="css/style.css"&gt;
 &lt;script src="js/jquery-3.5.1.min.js"&gt;&lt;/script&gt;
 &lt;script&gt;
 $(document).ready(function(){
 $("h1").css("color", "#0088ff");
 });
 &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;Hello, Tek4.vn!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
Trong v&iacute; dụ tr&ecirc;n, ch&uacute;ng ta đ&atilde; thực hiện một thao t&aacute;c jQuery đơn giản bằng c&aacute;ch thay đổi m&agrave;u của ti&ecirc;u đề, tức l&agrave; nội dung của c&aacute;c phần tử trong thẻ &lt;h1&gt; trong trang bằng c&aacute;ch sử dụng bộ chọn phần tử jQuery v&agrave; phương thức css ()&nbsp; khi t&agrave;i liệu đ&atilde; sẵn s&agrave;ng (được d&agrave;n tr&ecirc;n trang), được gọi l&agrave; sự kiện ready . Ch&uacute;ng ta sẽ t&igrave;m hiểu về bộ chọn, sự kiện v&agrave; phương thức jQuery cụ thể hơn trong c&aacute;c b&agrave;i sắp tới. Ở đ&acirc;y ch&uacute;ng ta chỉ cần biết rằng, với v&iacute; dụ như tr&ecirc;n th&igrave; tất cả c&aacute;c phần tử trong thẻ&nbsp;&lt;h1&gt;&nbsp; sẽ biến th&agrave;nh m&agrave;u xanh (#0088ff). Hay chữ Hello Wolrld! khi hiển thị ra sẽ c&oacute; m&agrave;u xanh.
&nbsp;
<hr />
Fanpage Facebook:&nbsp;<a href="https://www.facebook.com/tek4.vn/">TEK4.VN</a>&nbsp;
Tham gia cộng đồng để chia sẻ, trao đổi v&agrave; thảo luận:&nbsp;<a href="https://www.facebook.com/groups/tek4.vn/">TEK4.VN - Học Lập Tr&igrave;nh Miễn Ph&iacute;</a>

Admin

Bắt đầu với jQuery

Cùng tác giả

Admin

Có liên quan