1. Giới thiệu
jQuery là một thư viện Javascript cụ thể và nó được thiết kế để giúp việc sử dụng Javascript trên trang web của bạn dễ dàng hơn nhiều.
Các tính năng chính của jQuery là: * Lệnh gọi AJAX * Thao tác DOM / HTML * Thao tác CSS * Phương thức sự kiện HTML * Hoạt ảnh và hiệu ứng * hỗ trợ plugin * hỗ trợ nhiều trình duyệt
2. Dom là gì?
DOM – là một giao diện chương trình độc lập với nền tảng và ngôn ngữ, cho phép các chương trình và tập lệnh truy cập HTML và một số tài liệu khác (XML, XHTML) và thay đổi nội dung, cấu trúc và thiết kế của chúng. DOM xử lý các tài liệu như vậy như một cấu trúc cây, trong đó mỗi nút là một đối tượng và bằng cách thao tác với các đối tượng đó, biểu diễn trực quan của HTML / XML / etc được thay đổi. Về cơ bản khi bạn mở html giao diện trang web được tạo bởi HTML. Ban đầu không ai nghĩ rằng sẽ có Javascript hoặc thứ gì đó khác được sử dụng, và HTML không như bây giờ
3. Cài đặt?
Chính thức có hai cách cài đặt jQuery:
Thứ nhất là lấy từ (CDN) ví dụ https://cdnjs.com/libraries/jquery/. Để tải nó từ CDN, hãy truy cập vào ví dụ https://cdnjs.com/libraries/jquery/ /cdnjs.com/libraries/jquery/ hoặc sử dụng liên kết microsoft hoặc google CDN bằng cách liên kết nó trong mã html. Google:
<head> <script>src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head>Microsoft:
> <head> > <script>src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> > </head>
Thứ 2 là từ trang web chính thức, hãy truy cập http://jquery.com/download. Thư viện jQuery là một tệp javascript và bạn kích hoạt nó chỉ cần thêm vào tệp html của bạn phần sau.
> <head> > <script src="jquery-3.2.1.min.js"></script> > </head>
4. Cách sử dụng cơ bản
1) Đầu tiên, hãy tạo một trang html:
> <!doctype html>
> <html>
> <head>
> <title>jQuery demo</title>
> </head>
> <body>
> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
> <script>
>
> // Write your code here
>
> </script>
> </body>
> </html>
2) Chỉ thực thi mã khi trang được tải
Nó cho phép bạn chạy mã ngay khi DOM sẵn sàng được kiểm soát, mà không cần đợi các biểu ngữ và tất cả các hình ảnh được tải. Câu lệnh này trông như thế này:
> $( document ).ready(function() {
> // Write your code here
> });
Ví dụ, hãy hiển thị văn bản, khi nó có thể được kiểm soát
> $( document ).ready(function() {
> $("p").text("DOM is loaded.");
> });
Bây giờ nếu bạn đặt đoạn mã đó vào trang html của mình, thì nó sẽ giống như
> <!doctype html>
> <html lang="en">
> <head>
> <title>jQuery demo</title>
> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
> <script>
> $(document).ready(function () {
> $("p").text("DOM is loaded.");
> });
> </script>
> </head>
> <body>
> <p>DOM is not loaded</p>
> </body>
> </html>
Bạn sẽ thấy một thông báo rằng DOM đã được tải.
5. SELECTORS
SELECTORS là một trong những phần quan trọng nhất của jQuery. Chúng cho phép bạn thao tác các phần tử của HTML. Tất cả các bộ chọn jQuery phải bắt đầu bằng:
> $()
Dưới đây là một số bộ chọn được sử dụng rộng rãi * $ (“*”) chọn tất cả các phần tử * $ (this) chọn phần tử HTML hiện tại * $ (“p: first”) chọn phần tử đoạn đầu tiên * $ (“[href]”) chọn tất cả các phần tử với thuộc tính href * $ ( “: nút”) chọn tất cả <button> <input>với type="button"các yếu tố * $ ( “tr: ngay cả”) chọn tất cả các yếu tố thậm chí <tr> * $ ( “tr: lẻ”) chọn tất cả các yếu tố không đồng đều<tr>
Ẩn một phần tử bằng bộ nhận dạng “hideme” khi nhấp vào nút chuột
> $(document).ready(function(){
> $("button").click(function(){
> $("#hideme").hide();
> });
> });
Vì vậy, về cơ bản khi nhấp vào nút chuột, phần tử có bộ nhận dạng hideme sẽ bị ẩn. Đây là ví dụ đầy đủ:
> <!DOCTYPE html>
> <html>
> <head>
> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
> </script>
> <script>
> $(document).ready(function(){
> $("button").click(function(){
> $("#hideme").hide();
> });
> });
> </script>
> </head>
>
> <body>
> <h2>Header</h2>
> <p>text</p>
> <button>Hide</button>
> <div style="background-color:tomato;height:50px;width:50px;position:absolute;"
> id="hideme"></div>
> </body>
>
> </html>
6. Sự kiện JQUERY
Một trong những mục tiêu chính của jQuery là trả lời cho các sự kiện cụ thể, về cơ bản là thực hiện điều gì đó trên trang web, khi sự kiện cụ thể được kích hoạt. Một số sự kiện là: * click () – sự kiện chuột, xảy ra khi phần tử được nhấp vào * dbclick () – sự kiện chuột, tương tự nhưng đối với sự kiện doubleclick * keypress () – bàn phím, xảy ra khi nhấn phím * mouseenter () và mouseleave () – sự kiện chuột, xảy ra khi bạn con trỏ vào vùng phần tử và rời khỏi nó * focus () – xảy ra, khi biểu mẫu web được lấy tiêu điểm
Còn nhiều sự kiện hơn nữa, hãy xem chúng tại trang web chính thức [5] của jQuery. Ví dụ: để chỉ định một sự kiện nhấp chuột cho tất cả các đoạn trên trang, hãy sử dụng:
> $("p").click();
Bây giờ bạn cần xác định điều gì sẽ xảy ra khi nhấp chuột:
> $("p").click(function(){
> // action you want
> });
Hãy ẩn đoạn khi nhấp chuột:
> <!DOCTYPE html>
> <html>
> <head>
> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
> </script>
> <script>
> $(document).ready(function(){
> $("p").click(function(){
> $(this).hide();
> });
> });
> </script>
> </head>
> <body>
>
> <p>click on me to hide</p>
> <p>this will also be hidden after click</p>
>
> </body>
> </html>
7. Hiệu ứng JQUERY
jQuery cũng có một cách dễ dàng để thêm một số hiệu ứng vào trang web của bạn, từ các hoạt ảnh đơn giản đến các hiệu ứng phức tạp. Dưới đây là một số trong số chúng: * .animate () – chạy một hoạt ảnh cụ thể với các thuộc tính CSS cụ thể * .clearQueue () – xóa hàng đợi của tất cả các mục chưa được thực thi * .delay () – trì hoãn việc thực thi các mục đã xếp hàng * .fadeOut () – biến phần tử vô hình, bằng cách làm mờ phần tử đó thành vô hình
Có rất nhiều hiệu ứng khác nhau, vui lòng xem chúng tại đây [6]. Hãy chuẩn bị một ví dụ đơn giản về hoạt ảnh, các hiệu ứng cho phép chúng ta tạo. Trong ví dụ này, hãy thực hiện hoạt ảnh của một phần tử div di chuyển sang trái:
> $(document).ready(function(){
> $("button").click(function(){
> $("div").animate({left:'250px'});
> });
> });
Như bạn có thể thấy, khi tài liệu đã sẵn sàng, khi nhấp chuột vào nút div, phần tử div sẽ di chuyển sang trái 250 pixel. Ví dụ đầy đủ trông như thế này:
> <!DOCTYPE html>
> <html>
> <head>
> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
> </script>
> <script>
> $(document).ready(function(){
> $("button").click(function(){
> $("div").animate({left:'250px'});
> });
> });
> </script>
> </head>
>
> <body>
> <button>move the element</button>
> <div style="background-color:tomato;height:50px;width:50px;position:absolute;">
> </div>
>
> </body>
> </html>
* KẾT LUẬN
OK vậy là bây giờ bạn đã có kiến thức cơ bản về cách sử dụng jQuery. Chúc các bạn thành công.
Leave a Reply