Người Viết : ViKiMi Editor

Tạo chương trình khoa học và hiệu quả nhất với jQuery sử dụng cách viết các Functions
Bắt đầu với jQuery không khó khăn, tiếp cận với jQuery cũng không khó cho người mới bắt đầu. Thư viện jQuery được tạo ra giúp cho mọi người và ngay cả người mới bắt đầu cũng cảm thấy dùng nó thật thuận tiện. Công việc mà người lập trình cần thao tác với jQuery thật đơn giản. Nếu bạn có kiến thức về CSS tương đối ổn thì điều đó là một tiền đề cho phép bạn có thể thao tác ngay với jQuery.
Việc Bộ Chọn jQuery sử dụng cú pháp của CSS để truy vấn và tìm các phần tử HTML, sau đó có các hành động / actions cụ thể cho các phần tử tìm được. Điều đó thật quá rõ, sẽ không là bỡ ngỡ khi bạn hiểu về CSS trước khi bắt đầu với jQuery.
Bộ chọn của jQuery sẽ chọn các phần tử dựa vào tên (/name), mã định danh (/id), lớp (/classes), loại phần tử (/types), thuộc tính của phần tử (/attributes), giá trị của thuộc tính phần tử (/values of attributes) etc…
Để tìm ra các phần tử HTML sẽ thao tác các hành động trên chúng.
+ Bạn muốn bắt đầu với jQuery buộc lòng bạn phải biết sử dụng Bộ Chọn (jQuery Selector). Khi bạn chọn được các phần tử HTML thì bạn mới có thể thao tác chúng và tạo ra một Website tương tác linh hoạt nhờ jQuery.
+ Nếu bạn chưa hiểu về jQuery Selector thì bạn hãy bắt đầu với CSS Selector; bạn thành thạo CSS Selector bạn sẽ có thể quay lại với jQuery Selector. Tại sao lại như vậy?
§ Bởi vì jQuery Selector sẽ dựa trên CSS Selector đang tồn tại để có thể làm việc. Và Đồng thời jQuery cũng có một số bộ chọn riêng tuỳ chỉnh.
Để đơn giản điều này, chúng ta sẽ xem một vài ví dụ để biết cách cơ bản nhất mà jQuery Selector làm việc.
Nhưng phần đầu tiên, chúng ta sẽ xem cách viết các Function với jQuery / (Define a Function in jQuery ). Đây là cách hữu ích nhất khi bạn viết chương trình với jQuery, nó giúp chương trình của bạn trở nên khoa học hơn.
Phần tiếp theo chúng ta sẽ xem cách mà jQuery Selector làm việc để có thể vận dụng viết Website.
I >> Thực hành viết các hàm với jQuery
Khi bạn đã quen với các jQuery Selector, cách tốt nhất là bạn hãy thực hiện viết các Functions với jQuery.
Điều này cho phép bạn dễ dàng quản lý, làm việc với các Functions.
Chương trình bạn tạo ra sẽ trở nên khoa học hơn.
Bạn có thể tham khảo ví dụ << chương trình viết Functions với jQuery >>
Example :: Tạo thiết kế giao diện cho HTML TABLE
Đây là một đoạn chương trình tạo Function in jQuery cho phép thiết kế hiển thị Table với màu sắc phù hợp hơn dành cho khách truy cập.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script> $(function () { // declare function $.fn.myfunction = function () { $(".tbl_company tr:even").css("background-color", "aqua"); }; }); $(document).ready(function(){ /** Call Function **/ // $.fn.myfunction(); $(".tbl_company").myfunction(); }); </script> </head> <body> <h1>Welcome to My Web Page</h1> <table class="tbl_company" border="1"> <tr> <th>Company</th> <th>Country</th> </tr> <tr> <td>PepsiCo</td> <td>Germany</td> </tr> <tr> <td>Cocacola</td> <td>USA</td> </tr> <tr> <td>Hoang Long</td> <td>Viet Nam</td> </tr> </table> </body> </html>
Đây là chương trình viết Function với jQuery mà bạn có thể tham khảo và vận dụng khi tạo các thiết kế riêng. Điều này cho phép bạn tạo ra các chương trình khoa học hơn khi lập trình Website.
Lưu ý : Nếu bạn không thể chạy jQuery tại Localhost thì có thể đăng kí một Blog miễn phí với WordPress để kiểm tra chương trình. Vì thực tế Localhost sẽ không thể chạy được hết tất cả mọi thứ.
II >> Sử dụng Bộ Chọn jQuery
1 >> The jQuery Element Selector / Bộ chọn phần tử jQuery
Chúng ta sẽ làm quen với cách cơ bản nhất mà jQuery Selector làm việc.
Đó là bộ chọn phần tử jQuery / The jQuery Element Selector.
Nó cho phép jQuery chọn các phần tử dựa trên tên phần tử HTML.
Chẳng hạn : Chọn tất cả các thẻ span trên một trang như sau (Và cũng tương tự cho các phần tử HTML khác)
$(“span”)
Example :: Đoạn mã jQuery giúp ẩn đi tất cả phần tử span
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("span").hide();
});
});
</script>
</head>
<body>
<h1>Welcome to First Page</h1>
<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>PepsiCo</td>
<td> <span>1   </span> Germany</td>
</tr>
<tr>
<td>Cocacola</td>
<td> <span>2   </span> USA</td>
</tr>
</table>
<button>Click me</button>
</body>
</html>
2 >> The #id Selector / Bộ Chọn #id của jQuery
Đây là một bộ chọn mà bạn cũng rất hay làm việc khi dùng jQuery.
Bộ chọn #id của jQuery sử dụng thuộc tính id của thẻ HTML để tìm ra phần tử cần thiết.
Với một trang HTML, thuộc tính id phải là duy nhất. Do đó, bạn sẽ dùng bộ chọn này để tìm kiếm phần tử duy nhất trên một trang.
Chẳng hạn : Bạn muốn tìm phần tử duy nhất có id là age
Hãy sử dụng bộ chọn $(“#age”) / Khi bạn tìm hoặc truy vấn các phần tử HTML có id khác thì cũng tương tự
Example :: Đoạn mã jQuery giúp ẩn đi phần tử HTML có id là age
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#age").hide();
});
});
</script>
</head>
<body>
<h1>Welcome to Employers Page</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Additional Employer Infomation</th>
</tr>
<tr>
<td>Alen</td>
<td> <span id="age">20 years old,   </span> Male </td>
</tr>
<tr>
<td>Marry</td>
<td><span>22 years old,   </span> Female </td>
</tr>
</table>
<button>Click me</button>
</body>
</html>
3 >> The .class Selector / Bộ chọn .class của jQuery
Bộ chọn này cũng tương tự bộ chọn #id, nó rất hay được sử dụng.
Bộ chọn .Class của jQuery cho phép bạn tìm hoặc truy vấn các phần tử HTML có lớp xác định. Do một trang HTML có nhiều phần tử có thể chung một Class, vì vậy dựa vào bộ chọn này thì bạn có thể tìm được nhiều phần tử cùng một lúc trên một trang.
Chẳng hạn : Bạn muốn tìm các phần tử có class là gender
Hãy sử dụng bộ chọn $(“.gender”) / Khi bạn tìm hoặc truy vấn các phần tử HTML có class khác thì cũng tương tự
Example :: Đoạn mã jQuery giúp ẩn đi các phần tử HTML có class là gender
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".gender").hide();
});
});
</script>
</head>
<body>
<h1>Welcome to Employers Page</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Additional Employer Infomation</th>
</tr>
<tr>
<td>Alen</td>
<td> 20 years old,   <span class="gender"> Male </span> </td>
</tr>
<tr>
<td>Marry</td>
<td> 22 years old,   <span class="gender"> Female </span> </td>
</tr>
</table>
<button>Click me</button>
</body>
</html>
Cuối cùng, về bộ chọn jQuery Selector mà bạn có thể sử dụng. Bạn có thể dựa vào cách dùng CSS Selector để sử dụng jQuery Selector.
Điều này thật dễ dàng để bạn tìm ra các phần tử HTML và có các hành động trên chúng. Bạn sẽ có một Website linh hoạt hơn.
Nếu bạn muốn thành thạo jQuery để xây dựng Website buộc lòng bạn phải quen với bộ chọn jQuery.
Examples :: Một số bộ chọn đơn giản
$(“*”) Chọn tất cả phần tử HTML
$(this) Chọn phần tử HTML hiện tại
$(“div.begin”) Chọn tất cả phần tử div có class=”begin”
$(“p:first”) Chọn phần tử p đầu tiên trên một trang
$(“ul li:first”) Chọn phần tử li đầu tiên của phần tử ul đầu tiên
$(“ul li:first-child”) Chọn phần tử li đầu tiên của mọi phần tử ul