jQuery - Hướng dẫn nhanh

JQuery là gì?

jQuery là một Thư viện JavaScript ngắn gọn và nhanh chóng được tạo ra bởi John Resig vào năm 2006 với phương châm tốt đẹp: Write less, do more. jQuery đơn giản hóa việc duyệt tài liệu HTML, xử lý sự kiện, tạo hoạt ảnh và các tương tác Ajax để phát triển web nhanh chóng. jQuery là một bộ công cụ JavaScript được thiết kế để đơn giản hóa các tác vụ khác nhau bằng cách viết ít mã hơn. Đây là danh sách các tính năng cốt lõi quan trọng được hỗ trợ bởi jQuery:

DOM manipulation - jQuery giúp dễ dàng chọn các phần tử DOM, thương lượng chúng và sửa đổi nội dung của chúng bằng cách sử dụng công cụ chọn mã nguồn mở đa trình duyệt được gọi là Sizzle.
Event handling - jQuery cung cấp một cách thanh lịch để nắm bắt nhiều sự kiện khác nhau, chẳng hạn như người dùng nhấp vào liên kết mà không cần phải làm lộn xộn mã HTML với các trình xử lý sự kiện.
AJAX Support - jQuery giúp bạn rất nhiều để phát triển một trang web đáp ứng và giàu tính năng bằng công nghệ AJAX.
Animations - jQuery đi kèm với nhiều hiệu ứng hoạt hình tích hợp mà bạn có thể sử dụng trong các trang web của mình.
Lightweight - Thư viện jQuery rất nhẹ - dung lượng khoảng 19KB (Đã thu nhỏ và nén).
Cross Browser Support - jQuery có hỗ trợ nhiều trình duyệt và hoạt động tốt trong IE 6.0+, FF 2.0+, Safari 3.0+, Chrome và Opera 9.0+
Latest Technology - jQuery hỗ trợ các bộ chọn CSS3 và cú pháp XPath cơ bản.

Làm thế nào để sử dụng jQuery?

Có hai cách để sử dụng jQuery.

Local Installation - Bạn có thể tải xuống thư viện jQuery trên máy cục bộ của mình và đưa nó vào mã HTML của bạn.
CDN Based Version - Bạn có thể đưa thư viện jQuery vào mã HTML của mình trực tiếp từ Mạng phân phối nội dung (CDN).

Cài đặt cục bộ

Đi đến https://jquery.com/download/ để tải xuống phiên bản mới nhất có sẵn.
Bây giờ đặt tải xuống jquery-2.1.3.min.js tệp trong thư mục của trang web của bạn, ví dụ: / jquery.

Thí dụ

Bây giờ bạn có thể bao gồm thư viện jquery trong tệp HTML của mình như sau:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Phiên bản dựa trên CDN

Bạn có thể đưa thư viện jQuery vào mã HTML của mình trực tiếp từ Mạng phân phối nội dung (CDN). Google và Microsoft cung cấp nội dung cung cấp cho phiên bản mới nhất.

Chúng tôi đang sử dụng phiên bản Google CDN của thư viện trong suốt hướng dẫn này.

Thí dụ

Bây giờ chúng ta hãy viết lại ví dụ trên bằng thư viện jQuery từ Google CDN.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Làm thế nào để gọi một hàm thư viện jQuery?

Như hầu hết mọi thứ, chúng ta thực hiện khi sử dụng jQuery đọc hoặc thao tác mô hình đối tượng tài liệu (DOM), chúng ta cần đảm bảo rằng chúng ta bắt đầu thêm các sự kiện, v.v. ngay khi DOM đã sẵn sàng.

Nếu bạn muốn một sự kiện hoạt động trên trang của mình, bạn nên gọi sự kiện đó bên trong hàm $ (document) .ready (). Mọi thứ bên trong nó sẽ tải ngay sau khi DOM được tải và trước khi nội dung trang được tải.

Để làm điều này, chúng tôi đăng ký một sự kiện sẵn sàng cho tài liệu như sau:

$(document).ready(function() {
   // do stuff when DOM is ready
});

Để gọi bất kỳ hàm thư viện jQuery nào, hãy sử dụng các thẻ tập lệnh HTML như được hiển thị bên dưới:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Làm thế nào để sử dụng tập lệnh tùy chỉnh?

Tốt hơn là viết mã tùy chỉnh của chúng tôi trong tệp JavaScript tùy chỉnh: custom.js, như sau -

/* Filename: custom.js */
$(document).ready(function() { $("div").click(function() {
      alert("Hello, world!");
   });
});

Bây giờ chúng ta có thể bao gồm custom.js tệp trong tệp HTML của chúng tôi như sau:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Sử dụng nhiều thư viện

Bạn có thể sử dụng nhiều thư viện cùng nhau mà không xung đột lẫn nhau. Ví dụ: bạn có thể sử dụng thư viện javascript jQuery và MooTool cùng nhau. Bạn có thể kiểm tra Phương thức jQuery noConflict để biết thêm chi tiết.

Tiếp theo là gì?

Đừng quá lo lắng nếu bạn không hiểu các ví dụ trên. Bạn sẽ sớm nắm bắt được chúng trong các chương tiếp theo.

Chương tiếp theo sẽ cố gắng đề cập đến một số khái niệm cơ bản đến từ JavaScript thông thường.

jQuery là một khung công tác được xây dựng bằng khả năng JavaScript. Vì vậy, bạn có thể sử dụng tất cả các chức năng và khả năng khác có sẵn trong JavaScript. Chương này sẽ giải thích hầu hết các khái niệm cơ bản nhưng thường được sử dụng trong jQuery.

Chuỗi

Chuỗi trong JavaScript là một đối tượng bất biến không chứa, một hoặc nhiều ký tự. Sau đây là các ví dụ hợp lệ về Chuỗi JavaScript:

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

Số

Các số trong JavaScript là các giá trị IEEE 754 định dạng 64 bit có độ chính xác kép. Chúng là bất biến, giống như các chuỗi. Sau đây là các ví dụ hợp lệ về Số JavaScript:

5350
120.27
0.26

Boolean

Boolean trong JavaScript có thể là true hoặc là false. Nếu một số là 0, nó sẽ mặc định là false. Nếu một chuỗi trống sẽ mặc định là false.

Sau đây là các ví dụ hợp lệ về Boolean JavaScript:

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

Các đối tượng

JavaScript hỗ trợ khái niệm Object rất tốt. Bạn có thể tạo một đối tượng bằng cách sử dụng đối tượng theo nghĩa đen như sau:

var emp = {
   name: "Zara",
   age: 10
};

Bạn có thể viết và đọc các thuộc tính của một đối tượng bằng cách sử dụng ký hiệu dấu chấm như sau:

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

Mảng

Bạn có thể xác định mảng bằng cách sử dụng ký tự mảng như sau:

var x = [];
var y = [1, 2, 3, 4, 5];

Một mảng có một length thuộc tính hữu ích cho việc lặp lại -

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

Chức năng

Một hàm trong JavaScript có thể được đặt tên hoặc ẩn danh. Một hàm được đặt tên có thể được định nghĩa bằng cách sử dụng từ khóa hàm như sau:

function named(){
   // do some stuff here
}

Một hàm ẩn danh có thể được định nghĩa theo cách tương tự như một hàm bình thường nhưng nó sẽ không có bất kỳ tên nào.

Một hàm ẩn danh có thể được gán cho một biến hoặc truyền cho một phương thức như hình dưới đây.

var handler = function (){
   // do some stuff here
}

JQuery thường xuyên sử dụng các hàm ẩn danh như sau:

$(document).ready(function(){
   // do some stuff here
});

Tranh luận

Đối số biến JavaScript là một loại mảng có thuộc tính độ dài . Ví dụ sau giải thích điều đó rất tốt -

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

Đối tượng đối số cũng có thuộc tính callee , tham chiếu đến hàm mà bạn đang sử dụng. Ví dụ -

function func() {
   return arguments.callee; 
}

func();                // ==> func

Bối cảnh

JavaScript từ khóa nổi tiếng thisluôn đề cập đến bối cảnh hiện tại. Trong một chức năngthis ngữ cảnh có thể thay đổi, tùy thuộc vào cách hàm được gọi -

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

Bạn có thể chỉ định ngữ cảnh cho một lệnh gọi hàm bằng các phương thức tích hợp sẵn của hàm call() và apply() các phương pháp.

Sự khác biệt giữa chúng là cách chúng vượt qua các đối số. Call chuyển tất cả các đối số qua làm đối số cho hàm, trong khi áp dụng chấp nhận một mảng làm đối số.

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

Phạm vi

Phạm vi của một biến là vùng chương trình của bạn mà nó được xác định. Biến JavaScript sẽ chỉ có hai phạm vi.

Global Variables - Một biến toàn cục có phạm vi toàn cầu có nghĩa là nó được xác định ở mọi nơi trong mã JavaScript của bạn.
Local Variables- Một biến cục bộ sẽ chỉ hiển thị trong một hàm mà nó được định nghĩa. Các tham số của hàm luôn là cục bộ của hàm đó.

Trong phần thân của một hàm, một biến cục bộ được ưu tiên hơn một biến toàn cục có cùng tên -

var myVar = "global";     // ==> Declare a global variable

function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

Gọi lại

Gọi lại là một hàm JavaScript thuần túy được truyền cho một số phương thức dưới dạng đối số hoặc tùy chọn. Một số lệnh gọi lại chỉ là sự kiện, được gọi để cung cấp cho người dùng cơ hội phản ứng khi một trạng thái nhất định được kích hoạt.

Hệ thống sự kiện của jQuery sử dụng các lệnh gọi lại như vậy ở khắp mọi nơi, ví dụ:

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

Hầu hết các lệnh gọi lại cung cấp đối số và ngữ cảnh. Trong ví dụ về trình xử lý sự kiện, lệnh gọi lại được gọi với một đối số, một Sự kiện.

Một số lệnh gọi lại được yêu cầu để trả về một thứ gì đó, những người khác đặt giá trị trả về đó là tùy chọn. Để ngăn việc gửi biểu mẫu, trình xử lý sự kiện gửi có thể trả về false như sau:

$("#myform").submit(function() {
   return false;
});

Đóng cửa

Đóng cửa được tạo bất cứ khi nào một biến được xác định bên ngoài phạm vi hiện tại được truy cập từ bên trong phạm vi bên trong nào đó.

Ví dụ sau cho thấy cách biến counter hiển thị trong các hàm tạo, tăng và in, nhưng không hiển thị bên ngoài chúng -

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

Mẫu này cho phép bạn tạo các đối tượng bằng các phương thức hoạt động trên dữ liệu không hiển thị với thế giới bên ngoài. Cần lưu ý rằngdata hiding là cơ sở của lập trình hướng đối tượng.

Mẫu proxy

Proxy là một đối tượng có thể được sử dụng để kiểm soát quyền truy cập vào một đối tượng khác. Nó thực hiện cùng một giao diện với đối tượng khác này và chuyển bất kỳ lệnh gọi phương thức nào cho nó. Đối tượng khác này thường được gọi là chủ thể thực.

Một proxy có thể được khởi tạo thay cho chủ thể thực này và cho phép nó được truy cập từ xa. Chúng ta có thể lưu phương thức setArray của jQuery trong một bao đóng và ghi đè nó như sau:

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };
	
})();

Phần trên kết thúc mã của nó trong một hàm để ẩn biến proxied . Sau đó proxy sẽ ghi lại tất cả các cuộc gọi đến phương thức và ủy quyền cuộc gọi cho phương thức ban đầu. Sử dụng apply (this, các đối số) đảm bảo rằng người gọi sẽ không thể nhận thấy sự khác biệt giữa phương thức gốc và phương thức proxied.

Chức năng tích hợp sẵn

JavaScript đi kèm với một tập hợp các hàm tích hợp hữu ích. Các phương thức này có thể được sử dụng để thao tác với Chuỗi, Số và Ngày.

Sau đây là các hàm JavaScript quan trọng:

Sr.No.	Phương pháp & Mô tả
1	charAt() Trả về ký tự tại chỉ mục được chỉ định.
2	concat() Kết hợp văn bản của hai chuỗi và trả về một chuỗi mới.
3	forEach() Gọi một hàm cho mỗi phần tử trong mảng.
4	indexOf() Trả về chỉ mục trong đối tượng Chuỗi đang gọi của lần xuất hiện đầu tiên của giá trị được chỉ định hoặc -1 nếu không tìm thấy.
5	length() Trả về độ dài của chuỗi.
6	pop() Loại bỏ phần tử cuối cùng khỏi một mảng và trả về phần tử đó.
7	push() Thêm một hoặc nhiều phần tử vào cuối mảng và trả về độ dài mới của mảng.
số 8	reverse() Đảo ngược thứ tự của các phần tử của một mảng - đầu tiên trở thành cuối cùng và cuối cùng trở thành đầu tiên.
9	sort() Sắp xếp các phần tử của một mảng.
10	substr() Trả về các ký tự trong một chuỗi bắt đầu tại vị trí đã chỉ định thông qua số ký tự đã chỉ định.
11	toLowerCase() Trả về giá trị chuỗi đang gọi được chuyển đổi thành chữ thường.
12	toString() Trả về biểu diễn chuỗi của giá trị của số.
13	toUpperCase() Trả về giá trị chuỗi đang gọi được chuyển đổi thành chữ hoa.

Mô hình đối tượng tài liệu

Mô hình Đối tượng Tài liệu là một cấu trúc cây gồm các phần tử khác nhau của HTML như sau:

<html>
   <head>
      <title>The jQuery Example</title>
   </head>
	
   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Sau đây là những điểm quan trọng về cấu trúc cây trên:

<html> là tổ tiên của tất cả các phần tử khác; nói cách khác, tất cả các phần tử khác là con của <html>.
Các phần tử <head> và <body> không chỉ là phần tử con mà còn là phần tử con của <html>.
Tương tự như vậy, ngoài việc là tổ tiên của <head> và <body>, <html> cũng là cha mẹ của chúng.
Các phần tử <p> là con (và con) của <div>, con của <body> và <html>, và là anh chị em của nhau các phần tử <p>.

Trong khi học các khái niệm jQuery, sẽ rất hữu ích nếu bạn hiểu về DOM, nếu bạn chưa biết về DOM thì tôi khuyên bạn nên xem qua hướng dẫn đơn giản của chúng tôi về Hướng dẫn DOM .

Thư viện jQuery khai thác sức mạnh của các bộ chọn Cascading Style Sheets (CSS) để cho phép chúng tôi truy cập nhanh chóng và dễ dàng các phần tử hoặc nhóm phần tử trong Mô hình Đối tượng Tài liệu (DOM).

Bộ chọn jQuery là một hàm sử dụng các biểu thức để tìm ra các phần tử phù hợp từ DOM dựa trên các tiêu chí đã cho. Bạn có thể nói một cách đơn giản, bộ chọn được sử dụng để chọn một hoặc nhiều phần tử HTML bằng jQuery. Khi một phần tử được chọn thì chúng ta có thể thực hiện các thao tác khác nhau trên phần tử đã chọn đó.

Hàm nhà máy $ ()

Bộ chọn jQuery bắt đầu bằng ký hiệu đô la và dấu ngoặc đơn - $(). Chức năng nhà máy$() sử dụng ba khối xây dựng sau trong khi chọn các phần tử trong một tài liệu nhất định -

Sr.No.	Bộ chọn & Mô tả
1	Tag Name Đại diện cho một tên thẻ có sẵn trong DOM. Ví dụ$('p') chọn tất cả các đoạn văn <p> trong tài liệu.
2	Tag ID Đại diện cho một thẻ có sẵn với ID đã cho trong DOM. Ví dụ$('#some-id') chọn một phần tử duy nhất trong tài liệu có ID là một số id.
3	Tag Class Đại diện cho một thẻ có sẵn với lớp đã cho trong DOM. Ví dụ$('.some-class') chọn tất cả các phần tử trong tài liệu có một lớp thuộc lớp nào đó.

Tất cả các mục trên có thể được sử dụng riêng hoặc kết hợp với các bộ chọn khác. Tất cả các bộ chọn jQuery đều dựa trên cùng một nguyên tắc ngoại trừ một số điều chỉnh.

NOTE - Chức năng nhà máy $() là một từ đồng nghĩa của jQuery()chức năng. Vì vậy, trong trường hợp bạn đang sử dụng bất kỳ thư viện JavaScript nào khác, nơi$ dấu hiệu xung đột với một số thứ khác thì bạn có thể thay thế $ ký bởi jQuery tên và bạn có thể sử dụng chức năng jQuery() thay vì $().

Thí dụ

Sau đây là một ví dụ đơn giản sử dụng Công cụ chọn thẻ. Thao tác này sẽ chọn tất cả các phần tử có tên thẻp.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Làm thế nào để sử dụng bộ chọn?

Các bộ chọn rất hữu ích và sẽ được yêu cầu ở mọi bước khi sử dụng jQuery. Họ nhận được phần tử chính xác mà bạn muốn từ tài liệu HTML của mình.

Bảng sau liệt kê một số bộ chọn cơ bản và giải thích chúng bằng các ví dụ.

Sr.No.	Bộ chọn & Mô tả
1	Tên Chọn tất cả các phần tử phù hợp với phần tử đã cho Name.
2	#TÔI Chọn một phần tử duy nhất phù hợp với phần tử đã cho ID.
3	.Lớp học Chọn tất cả các yếu tố phù hợp với Class.
4	Phổ cập (*) Chọn tất cả các phần tử có sẵn trong DOM.
5	Nhiều phần tử E, F, G Chọn kết quả tổng hợp của tất cả các bộ chọn được chỉ định E, F hoặc là G.

Ví dụ về bộ chọn

Tương tự như cú pháp và ví dụ ở trên, các ví dụ sau sẽ cho bạn hiểu về cách sử dụng các loại bộ chọn hữu ích khác -

Tại đây, bạn có các loại bộ chọn hữu ích khác -

Sr.No.	Bộ chọn & Mô tả
1	*$('')** Bộ chọn này chọn tất cả các phần tử trong tài liệu.
2	*$("p > ")** Bộ chọn này chọn tất cả các phần tử là con của một phần tử đoạn văn.
3	$("#specialID") Hàm bộ chọn này nhận phần tử có id = "specialID".
4	$(".specialClass") Bộ chọn này nhận tất cả các phần tử có lớp SpecialClass .
5	$("li:not(.myclass)") Chọn tất cả các phần tử được so khớp bởi <li> không có class = "myclass".
6	$("a#specialID.specialClass") Bộ chọn này so khớp các liên kết với id là specialID và một lớp SpecialClass .
7	$("p a.specialClass") Bộ chọn này so khớp các liên kết với một lớp SpecialClass được khai báo trong các phần tử <p>.
số 8	$("ul li:first") Bộ chọn này chỉ nhận phần tử <li> đầu tiên của <ul>.
9	$("#container p") Chọn tất cả các phần tử được so khớp bởi <p> là con của một phần tử có id của vùng chứa .
10	$("li > ul") Chọn tất cả các phần tử được so khớp bởi <ul> là con của một phần tử được so khớp bởi <li>
11	$("strong + em") Chọn tất cả các phần tử được so khớp bởi <em> ngay sau phần tử anh em được so khớp bởi <strong>.
12	$("p ~ ul") Chọn tất cả các phần tử được so khớp bởi <ul> theo sau một phần tử anh em được so khớp bởi <p>.
13	$("code, em, strong") Chọn tất cả các phần tử phù hợp với <code> hoặc <em> hoặc <strong>.
14	$("p strong, .myclass") Chọn tất cả các phần tử được so khớp bởi <strong> là con của một phần tử được so khớp bởi <p> cũng như tất cả các phần tử có một lớp myclass .
15	$(":empty") Chọn tất cả các phần tử không có phần tử con.
16	$("p:empty") Chọn tất cả các phần tử được so khớp bởi <p> không có phần tử nào.
17	$("div[p]") Chọn tất cả các phần tử được so khớp bởi <div> có chứa một phần tử được so khớp bởi <p>.
18	$("p[.myclass]") Chọn tất cả các phần tử được so khớp bởi <p> có chứa một phần tử có lớp myclass .
19	$("a[@rel]") Chọn tất cả các phần tử được so khớp bởi <a> có thuộc tính rel.
20	$("input[@name = myname]") Chọn tất cả các phần tử được so khớp bởi <input> có giá trị tên chính xác bằng tên của tôi .
21	$("input[@name^=myname]") Chọn tất cả các yếu tố kết hợp bởi <input> có giá trị tên bắt đầu với myname .
22	$("a[@rel$=self]") Chọn tất cả các phần tử được so khớp bởi <a> có relgiá trị thuộc tính kết thúc bằng self .
23	*$("a[@href=domain.com]")** Chọn tất cả các phần tử được so khớp bởi <a> có giá trị href chứa domain.com.
24	$("li:even") Chọn tất cả các phần tử được so khớp bởi <li> có giá trị chỉ mục chẵn.
25	$("tr:odd") Chọn tất cả các phần tử được so khớp bởi <tr> có giá trị chỉ số lẻ.
26	$("li:first") Chọn phần tử <li> đầu tiên.
27	$("li:last") Chọn phần tử <li> cuối cùng.
28	$("li:visible") Chọn tất cả các phần tử được so khớp bởi <li> có thể nhìn thấy.
29	$("li:hidden") Chọn tất cả các phần tử được so khớp bởi <li> bị ẩn.
30	$(":radio") Chọn tất cả các nút radio trong biểu mẫu.
31	$(":checked") Chọn tất cả hộp kiểm trong biểu mẫu.
32	$(":input") Chỉ chọn các phần tử biểu mẫu (đầu vào, chọn, vùng văn bản, nút).
33	$(":text") Chỉ chọn các phần tử văn bản (input [type = text]).
34	$("li:eq(2)") Chọn phần tử <li> thứ ba.
35	$("li:eq(4)") Chọn phần tử <li> thứ năm.
36	$("li:lt(2)") Chọn tất cả các phần tử được so khớp bởi phần tử <li> trước phần tử thứ ba; nói cách khác, hai phần tử <li> đầu tiên.
37	$("p:lt(3)") chọn tất cả các phần tử được so khớp bởi các phần tử <p> trước phần tử thứ tư; nói cách khác, ba phần tử <p> đầu tiên.
38	$("li:gt(1)") Chọn tất cả các phần tử được so khớp bởi <li> sau phần tử thứ hai.
39	$("p:gt(2)") Chọn tất cả các phần tử được so khớp bởi <p> sau phần tử thứ ba.
40	$("div/p") Chọn tất cả các phần tử được so khớp bởi <p> là con của một phần tử được so khớp bởi <div>.
41	$("div//code") Chọn tất cả các phần tử được so khớp bởi <code> là con của một phần tử được so khớp bởi <div>.
42	$("//p//a") Chọn tất cả các phần tử được so khớp bởi <a> chúng là con của một phần tử được so khớp bởi <p>
43	$("li:first-child") Chọn tất cả các phần tử được so khớp bởi <li> là phần tử con đầu tiên của cha mẹ chúng.
44	$("li:last-child") Chọn tất cả các phần tử được so khớp bởi <li> là con cuối cùng của cha mẹ chúng.
45	$(":parent") Chọn tất cả các phần tử là cha của một phần tử khác, bao gồm cả văn bản.
46	$("li:contains(second)") Chọn tất cả các phần tử được so khớp bởi <li> có chứa văn bản thứ hai.

Bạn có thể sử dụng tất cả các bộ chọn ở trên với bất kỳ phần tử HTML / XML nào theo cách chung chung. Ví dụ nếu bộ chọn$("li:first") hoạt động cho phần tử <li> sau đó $("p:first") cũng sẽ hoạt động cho phần tử <p>.

Một số thành phần cơ bản nhất mà chúng ta có thể thao tác khi nói đến phần tử DOM là các thuộc tính và thuộc tính được gán cho các phần tử đó.

Hầu hết các thuộc tính này có sẵn thông qua JavaScript dưới dạng thuộc tính nút DOM. Một số thuộc tính phổ biến hơn là -

className
tagName
id
href
title
rel
src

Hãy xem xét đánh dấu HTML sau cho phần tử hình ảnh:

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

Trong đánh dấu của phần tử này, tên thẻ là img và đánh dấu cho id, src, alt, lớp và tiêu đề đại diện cho các thuộc tính của phần tử, mỗi thuộc tính bao gồm tên và giá trị.

jQuery cung cấp cho chúng ta phương tiện để dễ dàng thao tác các thuộc tính của một phần tử và cho phép chúng ta truy cập vào phần tử để chúng ta cũng có thể thay đổi các thuộc tính của nó.

Nhận giá trị thuộc tính

Các attr() phương thức có thể được sử dụng để lấy giá trị của một thuộc tính từ phần tử đầu tiên trong tập hợp đã so khớp hoặc đặt các giá trị thuộc tính vào tất cả các phần tử đã so khớp.

Thí dụ

Sau đây là một ví dụ đơn giản tìm nạp thuộc tính title của thẻ <em> và đặt giá trị <div id = "divid"> với cùng một giá trị -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Đặt giá trị thuộc tính

Các attr(name, value) phương thức có thể được sử dụng để đặt thuộc tính đã đặt tên cho tất cả các phần tử trong tập hợp được bao bọc bằng cách sử dụng giá trị được truyền vào.

Thí dụ

Sau đây là một ví dụ đơn giản mà thiết lập src thuộc tính của thẻ hình ảnh đến một vị trí chính xác -

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Áp dụng kiểu

Các addClass( classes )phương pháp này có thể được sử dụng để áp dụng các biểu định kiểu đã xác định cho tất cả các phần tử phù hợp. Bạn có thể chỉ định nhiều lớp được phân tách bằng dấu cách.

Thí dụ

Sau đây là một ví dụ đơn giản đặt class thuộc tính của thẻ para <p> -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected"); $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Phương thức thuộc tính

Bảng sau liệt kê một số phương pháp hữu ích mà bạn có thể sử dụng để thao tác các thuộc tính và thuộc tính -

Sr.No.	Phương pháp & Mô tả
1	attr (thuộc tính) Đặt một đối tượng khóa / giá trị làm thuộc tính cho tất cả các phần tử phù hợp.
2	attr (phím, fn) Đặt một thuộc tính duy nhất thành một giá trị được tính toán, trên tất cả các phần tử phù hợp.
3	removeAttr (tên) Xóa một thuộc tính khỏi mỗi phần tử phù hợp.
4	hasClass (lớp) Trả về true nếu lớp được chỉ định có mặt trên ít nhất một trong các tập hợp các phần tử đã so khớp.
5	removeClass (lớp) Loại bỏ tất cả hoặc (các) lớp được chỉ định khỏi tập hợp các phần tử đã so khớp.
6	toggleClass (lớp) Thêm lớp được chỉ định nếu nó không có mặt, xóa lớp đã chỉ định nếu nó có mặt.
7	html () Lấy nội dung html (innerHTML) của phần tử phù hợp đầu tiên.
số 8	html (val) Đặt nội dung html của mọi phần tử phù hợp.
9	bản văn( ) Nhận nội dung văn bản kết hợp của tất cả các phần tử phù hợp.
10	văn bản (val) Đặt nội dung văn bản của tất cả các phần tử phù hợp.
11	val () Nhận giá trị đầu vào của phần tử được so khớp đầu tiên.
12	val (val) Đặt thuộc tính giá trị của mọi phần tử phù hợp nếu nó được gọi trên <input> nhưng nếu nó được gọi trên <select> với giá trị <option> đã truyền thì tùy chọn đã truyền sẽ được chọn, nếu nó được gọi trên hộp kiểm hoặc hộp radio thì tất cả hộp kiểm phù hợp và hộp radio sẽ được chọn.

Ví dụ

Tương tự như cú pháp và ví dụ ở trên, các ví dụ sau sẽ cho bạn hiểu về cách sử dụng các phương thức thuộc tính khác nhau trong các tình huống khác nhau -

Dưới đây là danh sách đầy đủ các phương thức thuộc tính trong các trường hợp khác nhau -

Sr.No.	Bộ chọn & Mô tả
1	$("#myID").attr("custom") Điều này sẽ trả về giá trị của thuộc tính tùy chỉnh cho phần tử đầu tiên phù hợp với ID myID.
2	$("img").attr("alt", "Sample Image") Điều này đặt alt của tất cả các hình ảnh thành một giá trị mới "Hình ảnh Mẫu".
3	$("input").attr({ value: "", title: "Please enter a value" }); Đặt giá trị của tất cả các phần tử <input> thành chuỗi trống, cũng như đặt Ví dụ jQuery thành chuỗi Vui lòng nhập giá trị .
4	$("a[href^=https://]").attr("target","_blank") Chọn tất cả các liên kết có thuộc tính href bắt đầu bằng https: // và đặt thuộc tính mục tiêu của nó thành _blank .
5	$("a").removeAttr("target") Điều này sẽ xóa thuộc tính đích của tất cả các liên kết.
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); Điều này sẽ sửa đổi thuộc tính bị vô hiệu hóa thành giá trị "bị vô hiệu hóa" trong khi nhấp vào nút Gửi.
7	$("p:last").hasClass("selected") Trả về true nếu thẻ <p> cuối cùng đã chọn lớp được liên kết .
số 8	$("p").text() Trả về chuỗi có chứa nội dung văn bản được kết hợp của tất cả các phần tử <p> phù hợp.
9	$("p").text("<i>Hello World</i>") Điều này sẽ đặt "<I> Hello World </I>" làm nội dung văn bản của các phần tử <p> phù hợp.
10	$("p").html() Điều này trả về nội dung HTML của tất cả các đoạn phù hợp.
11	$("div").html("Hello World") Điều này sẽ đặt nội dung HTML của tất cả <div> phù hợp thành Hello World .
12	$("input:checkbox:checked").val() Nhận giá trị đầu tiên từ hộp kiểm đã chọn.
13	$("input:radio[name=bar]:checked").val() Nhận giá trị đầu tiên từ một tập hợp các nút radio.
14	$("button").val("Hello") Đặt thuộc tính giá trị của mọi phần tử phù hợp <button>.
15	$("input").val("on") Điều này sẽ kiểm tra tất cả nút radio hoặc hộp kiểm có giá trị là "bật".
16	$("select").val("Orange") Điều này sẽ chọn tùy chọn Orange trong một hộp thả xuống với các tùy chọn Orange, Mango và Banana.
17	$("select").val("Orange", "Mango") Thao tác này sẽ chọn các tùy chọn Orange và Mango trong một hộp thả xuống với các tùy chọn Orange, Mango và Banana.

jQuery là một công cụ rất mạnh cung cấp nhiều phương thức duyệt DOM để giúp chúng ta chọn các phần tử trong tài liệu một cách ngẫu nhiên cũng như theo phương pháp tuần tự. Hầu hết các Phương thức truyền tải DOM không sửa đổi đối tượng jQuery và chúng được sử dụng để lọc ra các phần tử từ tài liệu dựa trên các điều kiện đã cho.

Tìm phần tử theo chỉ mục

Hãy xem xét một tài liệu đơn giản với nội dung HTML sau:

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Trên mỗi danh sách đều có chỉ mục riêng và có thể được định vị trực tiếp bằng cách sử dụng eq(index) như ví dụ dưới đây.
Mọi phần tử con đều bắt đầu chỉ mục của nó từ 0, do đó, mục danh sách 2 sẽ được truy cập bằng cách sử dụng$("li").eq(1) và như thế.

Thí dụ

Sau đây là một ví dụ đơn giản để thêm màu vào mục danh sách thứ hai.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Lọc ra các phần tử

Các filter( selector )phương pháp này có thể được sử dụng để lọc ra tất cả các phần tử từ tập hợp các phần tử đã so khớp không khớp với (các) bộ chọn được chỉ định. Bộ chọn có thể được viết bằng bất kỳ cú pháp bộ chọn nào.

Thí dụ

Sau đây là một ví dụ đơn giản áp dụng màu cho các danh sách được liên kết với tầng lớp trung lưu -

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Xác định vị trí các phần tử con cháu

Các find( selector )phương thức có thể được sử dụng để định vị tất cả các phần tử con của một loại phần tử cụ thể. Bộ chọn có thể được viết bằng bất kỳ cú pháp bộ chọn nào.

Thí dụ

Sau đây là một ví dụ chọn tất cả các phần tử <span> có sẵn bên trong các phần tử <p> khác nhau -

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Phương pháp lọc JQuery DOM

Bảng sau liệt kê các phương pháp hữu ích mà bạn có thể sử dụng để lọc ra các phần tử khác nhau từ danh sách các phần tử DOM -

Sr.No.	Phương pháp & Mô tả
1	eq (chỉ số) Giảm tập hợp các phần tử đã so khớp thành một phần tử duy nhất.
2	bộ lọc (bộ chọn) Loại bỏ tất cả các phần tử khỏi tập hợp các phần tử đã so khớp không khớp với (các) bộ chọn được chỉ định.
3	bộ lọc (fn) Loại bỏ tất cả các phần tử khỏi tập hợp các phần tử đã so khớp không khớp với chức năng đã chỉ định.
4	là (bộ chọn) Kiểm tra lựa chọn hiện tại so với một biểu thức và trả về true, nếu ít nhất một phần tử của lựa chọn phù hợp với bộ chọn đã cho.
5	bản đồ (gọi lại) Dịch một tập hợp các phần tử trong đối tượng jQuery thành một tập giá trị khác trong một mảng jQuery (có thể chứa hoặc không thể chứa các phần tử).
6	không (bộ chọn) Loại bỏ các phần tử khớp với bộ chọn được chỉ định khỏi tập hợp các phần tử đã khớp.
7	lát (bắt đầu, [kết thúc]) Chọn một tập hợp con của các phần tử phù hợp.

Các phương thức duyệt qua DOM trong JQuery

Bảng sau liệt kê các phương pháp hữu ích khác mà bạn có thể sử dụng để định vị các phần tử khác nhau trong DOM -

Sr.No.	Phương pháp & Mô tả
1	thêm (bộ chọn) Thêm nhiều phần tử hơn, được khớp bởi bộ chọn đã cho, vào tập hợp các phần tử đã khớp.
2	và bản thân( ) Thêm lựa chọn trước đó vào lựa chọn hiện tại.
3	trẻ em ([bộ chọn]) Nhận một tập hợp các phần tử chứa tất cả các phần tử con duy nhất của mỗi tập hợp các phần tử đã so khớp.
4	gần nhất (bộ chọn) Nhận một tập hợp các phần tử chứa phần tử mẹ gần nhất phù hợp với bộ chọn được chỉ định, bao gồm phần tử bắt đầu.
5	nội dung () Tìm tất cả các nút con bên trong các phần tử phù hợp (bao gồm cả các nút văn bản) hoặc tài liệu nội dung, nếu phần tử là iframe.
6	kết thúc( ) Hoàn nguyên hoạt động 'phá hủy' gần đây nhất, thay đổi tập hợp các phần tử đã khớp về trạng thái trước đó của nó.
7	tìm (bộ chọn) Tìm kiếm các phần tử con phù hợp với các bộ chọn được chỉ định.
số 8	tiếp theo ([bộ chọn]) Nhận một tập hợp các phần tử chứa các anh chị em tiếp theo duy nhất của mỗi tập hợp các phần tử đã cho.
9	nextAll ([bộ chọn]) Tìm tất cả các phần tử anh chị em sau phần tử hiện tại.
10	offsetParent () Trả về một tập hợp jQuery với phần tử gốc được định vị của phần tử được so khớp đầu tiên.
11	cha mẹ ([bộ chọn]) Lấy cha trực tiếp của một phần tử. Nếu được gọi trên một tập hợp các phần tử, cha sẽ trả về một tập hợp các phần tử cha trực tiếp duy nhất của chúng.
12	cha mẹ ([selector]) Lấy một tập hợp các phần tử chứa các phần tử tổ tiên duy nhất của tập hợp các phần tử đã so khớp (ngoại trừ phần tử gốc).
13	trước ([bộ chọn]) Nhận một tập hợp các phần tử chứa các phần tử trước đó duy nhất của mỗi tập hợp các phần tử đã so khớp.
14	trước tất cả ([bộ chọn]) Tìm tất cả các phần tử anh chị em ở phía trước phần tử hiện tại.
15	anh chị em ruột ([bộ chọn]) Nhận một tập hợp các phần tử chứa tất cả các anh chị em duy nhất của mỗi tập hợp các phần tử đã so khớp.

Thư viện jQuery hỗ trợ gần như tất cả các bộ chọn có trong các thông số kỹ thuật của Cascading Style Sheet (CSS) từ 1 đến 3, như được nêu trên trang của World Wide Web Consortium.

Sử dụng thư viện JQuery, các nhà phát triển có thể nâng cao trang web của họ mà không cần lo lắng về trình duyệt và phiên bản của chúng miễn là trình duyệt đã bật JavaScript.

Hầu hết các Phương thức CSS của JQuery không sửa đổi nội dung của đối tượng jQuery và chúng được sử dụng để áp dụng các thuộc tính CSS trên các phần tử DOM.

Áp dụng thuộc tính CSS

Điều này rất đơn giản để áp dụng bất kỳ thuộc tính CSS nào bằng phương thức JQuery css( PropertyName, PropertyValue ).

Đây là cú pháp của phương thức -

selector.css( PropertyName, PropertyValue );

Ở đây bạn có thể chuyển PropertyName dưới dạng một chuỗi javascript và dựa trên giá trị của nó, PropertyValue có thể là chuỗi hoặc số nguyên.

Thí dụ

Sau đây là một ví dụ thêm màu phông chữ vào mục danh sách thứ hai.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Áp dụng nhiều thuộc tính CSS

Bạn có thể áp dụng nhiều thuộc tính CSS bằng một phương thức JQuery CSS( {key1:val1, key2:val2....). Bạn có thể áp dụng bao nhiêu thuộc tính tùy thích trong một cuộc gọi.

Đây là cú pháp của phương thức -

selector.css( {key1:val1, key2:val2....keyN:valN})

Ở đây, bạn có thể chuyển khóa làm thuộc tính và val là giá trị của nó như được mô tả ở trên.

Thí dụ

Sau đây là một ví dụ thêm màu phông chữ cũng như màu nền vào mục danh sách thứ hai.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Đặt chiều rộng & chiều cao phần tử

Các width( val ) và height( val ) có thể được sử dụng để thiết lập chiều rộng và chiều cao tương ứng của bất kỳ phần tử nào.

Thí dụ

Dưới đây là một ví dụ đơn giản đặt chiều rộng của phần tử phân chia đầu tiên trong đó phần còn lại của phần tử có chiều rộng được đặt theo style sheet

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div:first").width(100); $("div:first").css("background-color", "blue");
         });
      </script>
		
      <style>
         div { 
            width:70px; height:50px; float:left; 
            margin:5px; background:red; cursor:pointer; 
         }
      </style>
   </head>
	
   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Phương thức CSS JQuery

Bảng sau liệt kê tất cả các phương pháp mà bạn có thể sử dụng để chơi với các thuộc tính CSS:

Sr.No.	Phương pháp & Mô tả
1	css (tên) Trả về một thuộc tính kiểu trên phần tử phù hợp đầu tiên.
2	css (tên, giá trị) Đặt một thuộc tính kiểu duy nhất thành một giá trị trên tất cả các phần tử phù hợp.
3	css (thuộc tính) Đặt đối tượng khóa / giá trị làm thuộc tính kiểu cho tất cả các phần tử phù hợp.
4	chiều cao (val) Đặt chiều cao CSS của mọi phần tử phù hợp.
5	Chiều cao( ) Lấy pixel, chiều cao được tính toán hiện tại của phần tử phù hợp đầu tiên.
6	innerHeight () Nhận chiều cao bên trong (không bao gồm đường viền và bao gồm phần đệm) cho phần tử được so khớp đầu tiên.
7	innerWidth () Lấy chiều rộng bên trong (không bao gồm đường viền và bao gồm phần đệm) cho phần tử được so khớp đầu tiên.
số 8	bù lại( ) Lấy độ lệch hiện tại của phần tử phù hợp đầu tiên, tính bằng pixel, liên quan đến tài liệu.
9	offsetParent () Trả về một tập hợp jQuery với phần tử gốc được định vị của phần tử được so khớp đầu tiên.
10	ngoàiHeight ([lề]) Nhận chiều cao bên ngoài (bao gồm đường viền và phần đệm theo mặc định) cho phần tử phù hợp đầu tiên.
11	externalWidth ([lề]) Lấy chiều rộng bên ngoài (bao gồm đường viền và phần đệm theo mặc định) cho phần tử phù hợp đầu tiên.
12	Chức vụ( ) Lấy vị trí trên cùng và bên trái của một phần tử so với phần tử gốc bù đắp của nó.
13	scrollLeft (val) Khi một giá trị được chuyển vào, độ lệch bên trái cuộn được đặt thành giá trị đó trên tất cả các phần tử được so khớp.
14	scrollLeft () Nhận được độ lệch bên trái cuộn của phần tử phù hợp đầu tiên.
15	scrollTop (val) Khi một giá trị được chuyển vào, độ lệch đầu cuộn được đặt thành giá trị đó trên tất cả các phần tử phù hợp.
16	scrollTop () Nhận độ lệch đầu cuộn của phần tử phù hợp đầu tiên.
17	chiều rộng (val) Đặt chiều rộng CSS của mọi phần tử phù hợp.
18	chiều rộng( ) Lấy pixel, chiều rộng được tính toán hiện tại của phần tử phù hợp đầu tiên.

JQuery cung cấp các phương thức để thao tác DOM một cách hiệu quả. Bạn không cần phải viết mã lớn để sửa đổi giá trị của bất kỳ thuộc tính nào của phần tử hoặc để trích xuất mã HTML từ một đoạn hoặc bộ phận.

JQuery cung cấp các phương thức như .attr (), .html () và .val () đóng vai trò là getters, lấy thông tin từ các phần tử DOM để sử dụng sau này.

Thao tác nội dung

Các html( ) phương thức nhận nội dung html (innerHTML) của phần tử phù hợp đầu tiên.

Đây là cú pháp của phương thức -

selector.html( )

Thí dụ

Sau đây là một ví dụ sử dụng các phương thức .html () và .text (val). Ở đây .html () lấy nội dung HTML từ đối tượng và sau đó phương thức .text (val) đặt giá trị của đối tượng bằng cách sử dụng tham số được truyền vào -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               var content = $(this).html(); $("#result").text( content );
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Thay thế phần tử DOM

Bạn có thể thay thế một phần tử DOM hoàn chỉnh bằng các phần tử HTML hoặc DOM được chỉ định. CácreplaceWith( content ) phương pháp này phục vụ rất tốt mục đích này.

Đây là cú pháp của phương thức -

selector.replaceWith( content )

Đây là nội dung bạn muốn có thay vì yếu tố gốc. Đây có thể là HTML hoặc văn bản đơn giản.

Thí dụ

Sau đây là một ví dụ sẽ thay thế phần tử chia bằng "<h1> JQuery is Great </h1>" -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Xóa các phần tử DOM

Có thể có tình huống khi bạn muốn xóa một hoặc nhiều phần tử DOM khỏi tài liệu. JQuery cung cấp hai phương pháp để xử lý tình huống.

Các empty( ) phương thức loại bỏ tất cả các nút con khỏi tập hợp các phần tử phù hợp với tư cách là phương thức remove( expr ) phương thức xóa tất cả các phần tử phù hợp khỏi DOM.

Đây là cú pháp của phương thức -

selector.remove( [ expr ])

or 

selector.empty( )

Bạn có thể truyền tham số tùy chọn expr để lọc tập hợp các phần tử cần loại bỏ.

Thí dụ

Sau đây là một ví dụ trong đó các phần tử sẽ bị xóa ngay khi chúng được nhấp vào -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () { $(this).remove( );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Chèn các phần tử DOM

Có thể có tình huống khi bạn muốn chèn một hoặc nhiều phần tử DOM mới vào tài liệu hiện có của mình. JQuery cung cấp nhiều phương thức khác nhau để chèn các phần tử tại các vị trí khác nhau.

Các after( content ) phương thức chèn nội dung sau mỗi phần tử phù hợp với vị trí như phương thức before( content ) phương thức chèn nội dung trước mỗi phần tử phù hợp.

Đây là cú pháp của phương thức -

selector.after( content )

or

selector.before( content )

Đây là nội dung bạn muốn chèn. Đây có thể là HTML hoặc văn bản đơn giản.

Thí dụ

Sau đây là một ví dụ trong đó các phần tử <div> đang được chèn ngay trước phần tử được nhấp -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Phương pháp thao tác DOM

Bảng sau liệt kê tất cả các phương pháp mà bạn có thể sử dụng để thao tác các phần tử DOM -

Sr.No.	Phương pháp & Mô tả
1	sau (nội dung) Chèn nội dung sau mỗi phần tử phù hợp.
2	nối thêm (nội dung) Nối nội dung vào bên trong mỗi phần tử phù hợp.
3	appendTo (bộ chọn) Nối tất cả các phần tử đã so khớp vào một tập hợp các phần tử khác, được chỉ định.
4	trước (nội dung) Chèn nội dung trước mỗi phần tử phù hợp.
5	nhân bản (bool) Sao chép các Phần tử DOM phù hợp và tất cả các trình xử lý sự kiện của chúng và chọn các bản sao.
6	clone () Sao chép các Phần tử DOM phù hợp và chọn các bản sao.
7	trống( ) Xóa tất cả các nút con khỏi tập hợp các phần tử đã so khớp.
số 8	html (val) Đặt nội dung html của mọi phần tử phù hợp.
9	html () Lấy nội dung html (innerHTML) của phần tử phù hợp đầu tiên.
10	insertAfter (bộ chọn) Chèn tất cả các phần tử đã so khớp sau một tập hợp các phần tử khác, được chỉ định.
11	insertBefore (bộ chọn) Chèn tất cả các phần tử đã so khớp trước một tập hợp các phần tử khác, được chỉ định.
12	thêm trước (nội dung) Thêm nội dung vào bên trong mỗi phần tử phù hợp.
13	prependTo (bộ chọn) Thêm trước tất cả các phần tử đã so khớp vào một tập hợp các phần tử khác, được chỉ định.
14	loại bỏ (expr) Xóa tất cả các phần tử phù hợp khỏi DOM.
15	ReplaceAll (bộ chọn) Thay thế các phần tử được khớp bởi bộ chọn được chỉ định bằng các phần tử đã khớp.
16	ReplaceWith (nội dung) Thay thế tất cả các phần tử phù hợp bằng các phần tử HTML hoặc DOM được chỉ định.
17	văn bản (val) Đặt nội dung văn bản của tất cả các phần tử phù hợp.
18	bản văn( ) Nhận nội dung văn bản kết hợp của tất cả các phần tử phù hợp.
19	bọc (elem) Bọc mỗi phần tử đã so khớp với phần tử được chỉ định.
20	bọc (html) Bao bọc mỗi phần tử phù hợp với nội dung HTML được chỉ định.
21	wrapAll (elem) Gói tất cả các phần tử trong tập hợp đã so khớp thành một phần tử trình bao bọc duy nhất.
22	wrapAll (html) Gói tất cả các phần tử trong tập hợp đã so khớp thành một phần tử trình bao bọc duy nhất.
23	wrapInner (elem) Bao bọc nội dung con bên trong của mỗi phần tử được so khớp (bao gồm cả các nút văn bản) bằng một phần tử DOM.
24	wrapInner (html) Bao bọc nội dung con bên trong của mỗi phần tử được so khớp (bao gồm cả các nút văn bản) bằng cấu trúc HTML.

Chúng tôi có khả năng tạo các trang web động bằng cách sử dụng các sự kiện. Sự kiện là những hành động có thể được phát hiện bởi Ứng dụng web của bạn.

Sau đây là các sự kiện ví dụ -

Một cú nhấp chuột
Đang tải một trang web
Di chuột qua một phần tử
Gửi biểu mẫu HTML
Một lần gõ phím trên bàn phím của bạn, v.v.

Khi các sự kiện này được kích hoạt, bạn có thể sử dụng một chức năng tùy chỉnh để làm bất cứ điều gì bạn muốn với sự kiện. Các chức năng tùy chỉnh này gọi Trình xử lý sự kiện.

Trình xử lý sự kiện ràng buộc

Sử dụng Mô hình sự kiện jQuery, chúng ta có thể thiết lập các trình xử lý sự kiện trên các phần tử DOM với bind() phương pháp như sau -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Mã này sẽ khiến phần tử phân chia phản hồi với sự kiện nhấp chuột; khi người dùng nhấp vào bên trong bộ phận này sau đó, cảnh báo sẽ được hiển thị.

Điều này sẽ tạo ra kết quả sau:

Cú pháp đầy đủ của lệnh bind () như sau:

selector.bind( eventType[, eventData], handler)

Sau đây là mô tả của các tham số:

eventType- Một chuỗi chứa loại sự kiện JavaScript, chẳng hạn như nhấp chuột hoặc gửi. Tham khảo phần tiếp theo để biết danh sách đầy đủ các loại sự kiện.
eventData - Đây là tham số tùy chọn là một bản đồ dữ liệu sẽ được chuyển cho bộ xử lý sự kiện.
handler - Một hàm để thực thi mỗi khi sự kiện được kích hoạt.

Xóa trình xử lý sự kiện

Thông thường, một khi trình xử lý sự kiện được thiết lập, trình xử lý sự kiện vẫn có hiệu lực trong phần còn lại của trang. Có thể có nhu cầu khi bạn muốn xóa trình xử lý sự kiện.

jQuery cung cấp unbind()lệnh để loại bỏ một trình xử lý sự kiện đang thoát. Cú pháp của unbind () như sau:

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

Sau đây là mô tả của các tham số:

eventType- Một chuỗi chứa loại sự kiện JavaScript, chẳng hạn như nhấp chuột hoặc gửi. Tham khảo phần tiếp theo để biết danh sách đầy đủ các loại sự kiện.
handler - Nếu được cung cấp, hãy xác định người nghe cụ thể sẽ bị xóa.

Các loại sự kiện

Sau đây là nền tảng chéo và các loại sự kiện được đề xuất mà bạn có thể liên kết bằng cách sử dụng JQuery:

Sr.No.	Loại & Mô tả sự kiện
1	blur Xảy ra khi phần tử bị mất tiêu điểm.
2	change Xảy ra khi phần tử thay đổi.
3	click Xảy ra khi nhấp chuột.
4	dblclick Xảy ra khi nhấp đúp chuột.
5	error Xảy ra khi có lỗi trong quá trình tải hoặc dỡ hàng, v.v.
6	focus Xảy ra khi phần tử được lấy nét.
7	keydown Xảy ra khi phím được nhấn.
số 8	keypress Xảy ra khi nhấn và nhả phím.
9	keyup Xảy ra khi khóa được phát hành.
10	load Xảy ra khi tài liệu được tải.
11	mousedown Xảy ra khi nhấn nút chuột.
12	mouseenter Xảy ra khi chuột vào trong một vùng phần tử.
13	mouseleave Xảy ra khi chuột rời khỏi vùng phần tử.
14	mousemove Xảy ra khi con trỏ chuột di chuyển.
15	mouseout Xảy ra khi con trỏ chuột di chuyển ra khỏi một phần tử.
16	mouseover Xảy ra khi con trỏ chuột di chuyển qua một phần tử.
17	mouseup Xảy ra khi thả nút chuột.
18	resize Xảy ra khi cửa sổ được thay đổi kích thước.
19	scroll Xảy ra khi cửa sổ được cuộn.
20	select Xảy ra khi một văn bản được chọn.
21	submit Xảy ra khi biểu mẫu được gửi.
22	unload Xảy ra khi tài liệu được tải xuống.

Đối tượng sự kiện

Hàm gọi lại nhận một tham số duy nhất; khi trình xử lý được gọi là đối tượng sự kiện JavaScript sẽ được chuyển qua nó.

Đối tượng sự kiện thường không cần thiết và tham số bị bỏ qua, vì ngữ cảnh đầy đủ thường có sẵn khi trình xử lý bị ràng buộc biết chính xác những gì cần phải thực hiện khi trình xử lý được kích hoạt, tuy nhiên có một số thuộc tính nhất định mà bạn cần được truy cập.

Các thuộc tính sự kiện

Các thuộc tính / thuộc tính sự kiện sau đây có sẵn và an toàn để truy cập theo cách độc lập với nền tảng -

Sr.No.	Kê khai tài sản
1	altKey Đặt thành true nếu phím Alt được nhấn khi sự kiện được kích hoạt, false nếu không. Phím Alt được gắn nhãn Tùy chọn trên hầu hết các bàn phím Mac.
2	ctrlKey Đặt thành true nếu phím Ctrl được nhấn khi sự kiện được kích hoạt, false nếu không.
3	data Giá trị, nếu có, được chuyển làm tham số thứ hai cho lệnh bind () khi trình xử lý được thiết lập.
4	keyCode Đối với các sự kiện nhấn phím và nhấn phím, thao tác này sẽ trả về phím đã được nhấn.
5	metaKey Đặt thành true nếu phím Meta được nhấn khi sự kiện được kích hoạt, false nếu không. Phím Meta là phím Ctrl trên PC và phím Command trên Mac.
6	pageX Đối với sự kiện chuột, chỉ định tọa độ ngang của sự kiện tương đối từ nguồn gốc trang.
7	pageY Đối với các sự kiện chuột, chỉ định tọa độ dọc của sự kiện tương đối từ nguồn gốc trang.
số 8	relatedTarget Đối với một số sự kiện chuột, xác định phần tử mà con trỏ để lại hoặc nhập khi sự kiện được kích hoạt.
9	screenX Đối với sự kiện chuột, chỉ định tọa độ ngang của sự kiện tương đối từ gốc màn hình.
10	screenY Đối với sự kiện chuột, chỉ định tọa độ dọc của sự kiện tương đối từ điểm gốc màn hình.
11	shiftKey Đặt thành true nếu phím Shift được nhấn khi sự kiện được kích hoạt, false nếu không.
12	target Xác định phần tử mà sự kiện đã được kích hoạt.
13	timeStamp Dấu thời gian (tính bằng mili giây) khi sự kiện được tạo.
14	type Đối với tất cả các sự kiện, chỉ định loại sự kiện đã được kích hoạt (ví dụ: nhấp chuột).
15	which Đối với sự kiện bàn phím, chỉ định mã số cho phím gây ra sự kiện và đối với sự kiện chuột, chỉ định nút nào được nhấn (1 cho trái, 2 cho giữa, 3 cho phải).

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Các phương thức sự kiện

Có một danh sách các phương thức có thể được gọi trên Đối tượng sự kiện -

Sr.No.	Phương pháp & Mô tả
1	ngăn chặn Mặc định() Ngăn trình duyệt thực thi hành động mặc định.
2	isDefaultPrevented () Trả về liệu event.preventDefault () đã từng được gọi trên đối tượng sự kiện này hay chưa.
3	stopPropagation () Ngăn chặn việc tạo sự kiện cho các phần tử chính, ngăn không cho bất kỳ trình xử lý gốc nào được thông báo về sự kiện.
4	isPropagationStopped () Trả về liệu event.stopPropagation () đã từng được gọi trên đối tượng sự kiện này hay chưa.
5	stopIm InstantPropagation () Ngừng thực thi phần còn lại của trình xử lý.
6	isIm InstantPropagationStopped () Trả về liệu event.stopIm InstantPropagation () đã từng được gọi trên đối tượng sự kiện này hay chưa.

Phương pháp thao tác sự kiện

Bảng sau liệt kê các phương pháp quan trọng liên quan đến sự kiện:

Sr.No.	Phương pháp & Mô tả
1	ràng buộc (loại, [dữ liệu], fn) Liên kết một trình xử lý với một hoặc nhiều sự kiện (như nhấp chuột) cho mỗi phần tử phù hợp. Cũng có thể ràng buộc các sự kiện tùy chỉnh.
2	tắt (sự kiện [, bộ chọn] [, trình xử lý (eventObject)]) Điều này trái ngược với trực tiếp, nó loại bỏ một sự kiện trực tiếp bị ràng buộc.
3	di chuột (qua, ra ngoài) Mô phỏng di chuột, ví dụ như di chuyển chuột bật và tắt một đối tượng.
4	trên (sự kiện [, bộ chọn] [, dữ liệu], trình xử lý) Liên kết một trình xử lý với một sự kiện (như nhấp chuột) cho tất cả phần tử phù hợp hiện tại - và tương lai. Cũng có thể ràng buộc các sự kiện tùy chỉnh.
5	một (loại, [dữ liệu], fn) Liên kết một trình xử lý với một hoặc nhiều sự kiện được thực thi một lần cho mỗi phần tử được so khớp.
6	sẵn sàng (fn) Ràng buộc một hàm phải được thực thi bất cứ khi nào DOM sẵn sàng được duyệt và thao tác.
7	trình kích hoạt (sự kiện, [dữ liệu]) Kích hoạt một sự kiện trên mọi phần tử phù hợp.
số 8	triggerHandler (sự kiện, [dữ liệu]) Kích hoạt tất cả các trình xử lý sự kiện liên kết trên một phần tử.
9	unbind ([type], [fn]) Điều này ngược lại với ràng buộc, nó loại bỏ các sự kiện bị ràng buộc khỏi mỗi phần tử đã so khớp.

Phương thức của người trợ giúp sự kiện

jQuery cũng cung cấp một tập hợp các hàm trợ giúp sự kiện có thể được sử dụng để kích hoạt một sự kiện nhằm ràng buộc bất kỳ loại sự kiện nào được đề cập ở trên.

Phương pháp kích hoạt

Sau đây là một ví dụ sẽ kích hoạt sự kiện mờ trên tất cả các đoạn văn:

$("p").blur();

Phương pháp ràng buộc

Sau đây là một ví dụ sẽ ràng buộc một click sự kiện trên tất cả <div> -

$("div").click( function () { 
   // do something here
});

Đây là danh sách đầy đủ tất cả các phương pháp hỗ trợ được cung cấp bởi jQuery -

Sr.No.	Phương pháp & Mô tả
1	blur( ) Kích hoạt sự kiện mờ của từng phần tử phù hợp.
2	blur( fn ) Liên kết một hàm với sự kiện làm mờ của mỗi phần tử phù hợp.
3	change( ) Kích hoạt sự kiện thay đổi của từng phần tử phù hợp.
4	change( fn ) Liên kết một hàm với sự kiện thay đổi của mỗi phần tử được so khớp.
5	click( ) Kích hoạt sự kiện nhấp chuột của từng phần tử phù hợp.
6	click( fn ) Liên kết một chức năng với sự kiện nhấp chuột của mỗi phần tử phù hợp.
7	dblclick( ) Kích hoạt sự kiện dblclick của mỗi phần tử phù hợp.
số 8	dblclick( fn ) Liên kết một hàm với sự kiện dblclick của mỗi phần tử được so khớp.
9	error( ) Kích hoạt sự kiện lỗi của mỗi phần tử phù hợp.
10	error( fn ) Liên kết một hàm với sự kiện lỗi của mỗi phần tử được so khớp.
11	focus( ) Kích hoạt sự kiện trọng tâm của từng phần tử phù hợp.
12	focus( fn ) Liên kết một hàm với sự kiện trọng tâm của mỗi phần tử được so khớp.
13	keydown( ) Kích hoạt sự kiện keydown của mỗi phần tử phù hợp.
14	keydown( fn ) Liên kết một hàm với sự kiện keydown của mỗi phần tử phù hợp.
15	keypress( ) Kích hoạt sự kiện nhấn phím của mỗi phần tử phù hợp.
16	keypress( fn ) Liên kết một hàm với sự kiện nhấn phím của mỗi phần tử phù hợp.
17	keyup( ) Kích hoạt sự kiện keyup của mỗi phần tử phù hợp.
18	keyup( fn ) Liên kết một hàm với sự kiện keyup của mỗi phần tử được so khớp.
19	load( fn ) Liên kết một hàm với sự kiện tải của mỗi phần tử được so khớp.
20	mousedown( fn ) Liên kết một hàm với sự kiện tạm dừng của mỗi phần tử phù hợp.
21	mouseenter( fn ) Liên kết một hàm với sự kiện di chuột của mỗi phần tử phù hợp.
22	mouseleave( fn ) Liên kết một hàm với sự kiện mouseleave của mỗi phần tử được so khớp.
23	mousemove( fn ) Liên kết một hàm với sự kiện di chuyển chuột của mỗi phần tử phù hợp.
24	mouseout( fn ) Liên kết một hàm với sự kiện di chuột của mỗi phần tử được so khớp.
25	mouseover( fn ) Liên kết một hàm với sự kiện di chuột qua của mỗi phần tử được so khớp.
26	mouseup( fn ) Liên kết một hàm với sự kiện di chuột lên của mỗi phần tử được so khớp.
27	resize( fn ) Liên kết một hàm với sự kiện thay đổi kích thước của từng phần tử được so khớp.
28	scroll( fn ) Liên kết một hàm với sự kiện cuộn của mỗi phần tử được so khớp.
29	select( ) Kích hoạt sự kiện đã chọn của từng phần tử phù hợp.
30	select( fn ) Liên kết một hàm với sự kiện được chọn của mỗi phần tử phù hợp.
31	submit( ) Kích hoạt sự kiện gửi của mỗi phần tử phù hợp.
32	submit( fn ) Liên kết một hàm với sự kiện gửi của mỗi phần tử phù hợp.
33	unload( fn ) Liên kết một hàm với sự kiện dỡ bỏ của mỗi phần tử được so khớp.

AJAX là từ viết tắt của Asynchronous JavaScript and XML và công nghệ này giúp chúng ta tải dữ liệu từ máy chủ mà không cần làm mới trang trình duyệt.

Nếu bạn chưa quen với AJAX, tôi khuyên bạn nên xem qua Hướng dẫn Ajax của chúng tôi trước khi tiếp tục.

JQuery là một công cụ tuyệt vời cung cấp một loạt các phương pháp AJAX phong phú để phát triển ứng dụng web thế hệ tiếp theo.

Tải dữ liệu đơn giản

Điều này rất dễ dàng để tải bất kỳ dữ liệu tĩnh hoặc động nào bằng JQuery AJAX. JQuery cung cấpload() phương pháp thực hiện công việc -

Cú pháp

Đây là cú pháp đơn giản cho load() phương pháp -

[selector].load( URL, [data], [callback] );

Đây là mô tả của tất cả các tham số -

URL- URL của tài nguyên phía máy chủ mà yêu cầu được gửi đến. Nó có thể là tập lệnh CGI, ASP, JSP hoặc PHP tạo dữ liệu động hoặc từ cơ sở dữ liệu.
data- Tham số tùy chọn này đại diện cho một đối tượng có các thuộc tính được tuần tự hóa thành các tham số được mã hóa thích hợp để được chuyển đến yêu cầu. Nếu được chỉ định, yêu cầu được thực hiện bằng cách sử dụngPOSTphương pháp. Nếu bỏ qua,GET phương pháp được sử dụng.
callback- Một hàm gọi lại được gọi sau khi dữ liệu phản hồi đã được tải vào các phần tử của tập hợp đã so khớp. Tham số đầu tiên được truyền cho hàm này là văn bản phản hồi nhận được từ máy chủ và tham số thứ hai là mã trạng thái.

Thí dụ

Hãy xem xét tệp HTML sau với một đoạn mã JQuery nhỏ:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){ $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Đây load() bắt đầu một yêu cầu Ajax đến URL được chỉ định /jquery/result.htmltập tin. Sau khi tải tệp này, tất cả nội dung sẽ được điền vào bên trong <div> được gắn thẻ với giai đoạn ID . Giả sử, tệp /jquery/result.html của chúng tôi chỉ có một dòng HTML -

<h1>THIS IS RESULT...</h1>

Khi bạn nhấp vào nút đã cho, thì tệp result.html sẽ được tải.

Nhận dữ liệu JSON

Sẽ có một tình huống khi máy chủ trả về chuỗi JSON so với yêu cầu của bạn. Hàm tiện ích JQuerygetJSON() phân tích cú pháp chuỗi JSON được trả về và làm cho chuỗi kết quả có sẵn cho hàm gọi lại dưới dạng tham số đầu tiên để thực hiện thêm hành động.

Cú pháp

Đây là cú pháp đơn giản cho getJSON() phương pháp -

[selector].getJSON( URL, [data], [callback] );

Đây là mô tả của tất cả các tham số -

URL - URL của tài nguyên phía máy chủ được liên hệ qua phương thức GET.
data - Một đối tượng có các thuộc tính đóng vai trò là cặp tên / giá trị được sử dụng để tạo chuỗi truy vấn được nối vào URL hoặc chuỗi truy vấn được mã hóa và định dạng trước.
callback- Một hàm được gọi khi yêu cầu hoàn thành. Giá trị dữ liệu thu được từ việc tiêu hóa nội dung phản hồi dưới dạng chuỗi JSON được chuyển làm tham số đầu tiên cho lệnh gọi lại này và trạng thái là tham số thứ hai.

Thí dụ

Hãy xem xét tệp HTML sau với một đoạn mã JQuery nhỏ:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) { $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>'); $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Đây là phương thức tiện ích JQuery getJSON() bắt đầu một yêu cầu Ajax đến URL được chỉ định result.jsontập tin. Sau khi tải tệp này, tất cả nội dung sẽ được chuyển đến hàm gọi lại, cuối cùng sẽ được điền vào bên trong <div> được gắn thẻ với giai đoạn ID . Giả sử, tệp result.json của chúng ta có nội dung được định dạng json sau:

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

Khi bạn nhấp vào nút đã cho, thì tệp result.json sẽ được tải.

Truyền dữ liệu đến máy chủ

Nhiều khi bạn thu thập thông tin đầu vào từ người dùng và bạn chuyển thông tin đầu vào đó cho máy chủ để xử lý thêm. JQuery AJAX giúp dễ dàng chuyển dữ liệu đã thu thập đến máy chủ bằng cách sử dụngdata tham số của bất kỳ phương thức Ajax có sẵn nào.

Thí dụ

Ví dụ này chứng minh cách có thể chuyển thông tin đầu vào của người dùng tới một tập lệnh máy chủ web sẽ gửi lại cùng một kết quả và chúng tôi sẽ in nó ra -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#driver").click(function(event){
               var name = $("#name").val(); $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

Đây là mã được viết bằng result.php script -

<?php
   if( $_REQUEST["name"] ){ $name = $_REQUEST['name']; echo "Welcome ". $name;
   }
?>

Bây giờ bạn có thể nhập bất kỳ văn bản nào vào ô nhập liệu đã cho và sau đó nhấp vào nút "Hiển thị Kết quả" để xem những gì bạn đã nhập vào ô nhập liệu.

Phương thức JQuery AJAX

Bạn đã thấy khái niệm cơ bản về AJAX bằng cách sử dụng JQuery. Bảng sau liệt kê tất cả các phương thức JQuery AJAX quan trọng mà bạn có thể sử dụng dựa trên nhu cầu lập trình của mình:

Sr.No.	Phương pháp & Mô tả
1	jQuery.ajax (tùy chọn) Tải một trang từ xa bằng yêu cầu HTTP.
2	jQuery.ajaxSetup (tùy chọn) Thiết lập cài đặt chung cho các yêu cầu AJAX.
3	jQuery.get (url, [data], [callback], [type]) Tải trang từ xa bằng yêu cầu HTTP GET.
4	jQuery.getJSON (url, [data], [callback]) Tải dữ liệu JSON bằng yêu cầu HTTP GET.
5	jQuery.getScript (url, [callback]) Tải và thực thi tệp JavaScript bằng yêu cầu HTTP GET.
6	jQuery.post (url, [data], [callback], [type]) Tải trang từ xa bằng yêu cầu HTTP POST.
7	tải (url, [dữ liệu], [gọi lại]) Tải HTML từ một tệp từ xa và đưa nó vào DOM.
số 8	serialize () Tuần tự hóa một tập hợp các phần tử đầu vào thành một chuỗi dữ liệu.
9	serializeArray () Sắp xếp thứ tự tất cả các biểu mẫu và phần tử biểu mẫu như phương thức .serialize () nhưng trả về cấu trúc dữ liệu JSON để bạn làm việc.

Sự kiện JQuery AJAX

Bạn có thể gọi các phương thức JQuery khác nhau trong vòng đời của tiến trình gọi AJAX. Dựa trên các sự kiện / giai đoạn khác nhau, có các phương pháp sau:

Bạn có thể xem qua tất cả các Sự kiện AJAX .

Sr.No.	Phương pháp & Mô tả
1	ajaxComplete (gọi lại) Đính kèm một hàm sẽ được thực thi bất cứ khi nào một yêu cầu AJAX hoàn thành.
2	ajaxStart (gọi lại) Đính kèm một hàm được thực thi bất cứ khi nào yêu cầu AJAX bắt đầu và chưa có hàm nào hoạt động.
3	ajaxError (gọi lại) Đính kèm một hàm được thực thi bất cứ khi nào một yêu cầu AJAX không thành công.
4	ajaxSend (gọi lại) Đính kèm một chức năng sẽ được thực thi trước khi một yêu cầu AJAX được gửi đi.
5	ajaxStop (gọi lại) Đính kèm một hàm sẽ được thực thi bất cứ khi nào tất cả các yêu cầu AJAX đã kết thúc.
6	ajaxSuccess (gọi lại) Đính kèm một hàm sẽ được thực thi bất cứ khi nào một yêu cầu AJAX hoàn tất thành công.

jQuery cung cấp một giao diện đơn giản tầm thường để thực hiện nhiều loại hiệu ứng tuyệt vời khác nhau. Các phương thức jQuery cho phép chúng ta nhanh chóng áp dụng các hiệu ứng thường dùng với cấu hình tối thiểu. Hướng dẫn này bao gồm tất cả các phương pháp jQuery quan trọng để tạo hiệu ứng hình ảnh.

Các phần tử hiển thị và ẩn

Các lệnh để hiển thị và ẩn các phần tử là những gì chúng ta mong đợi - show() để hiển thị các phần tử trong một tập hợp được bao bọc và hide() để ẩn chúng.

Cú pháp

Đây là cú pháp đơn giản cho show() phương pháp -

[selector].show( speed, [callback] );

Đây là mô tả của tất cả các tham số -

speed - Một chuỗi biểu thị một trong ba tốc độ được xác định trước ("chậm", "bình thường" hoặc "nhanh") hoặc số mili giây để chạy hoạt ảnh (ví dụ: 1000).
callback- Tham số tùy chọn này đại diện cho một chức năng sẽ được thực thi bất cứ khi nào hoạt ảnh hoàn thành; thực thi một lần cho mỗi phần tử hoạt hình chống lại.

Sau đây là cú pháp đơn giản cho hide() phương pháp -

[selector].hide( speed, [callback] );

Đây là mô tả của tất cả các tham số -

speed - Một chuỗi biểu thị một trong ba tốc độ được xác định trước ("chậm", "bình thường" hoặc "nhanh") hoặc số mili giây để chạy hoạt ảnh (ví dụ: 1000).
callback- Tham số tùy chọn này đại diện cho một chức năng sẽ được thực thi bất cứ khi nào hoạt ảnh hoàn thành; thực thi một lần cho mỗi phần tử hoạt hình chống lại.

Thí dụ

Hãy xem xét tệp HTML sau với một đoạn mã JQuery nhỏ:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#show").click(function () {
               $(".mydiv").show( 1000 ); }); $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Chuyển đổi các yếu tố

jQuery cung cấp các phương thức để chuyển đổi trạng thái hiển thị của các phần tử giữa tiết lộ hoặc ẩn. Nếu phần tử được hiển thị ban đầu, nó sẽ bị ẩn; nếu ẩn, nó sẽ được hiển thị.

Cú pháp

Đây là cú pháp đơn giản cho một trong các toggle() phương pháp -

[selector]..toggle([speed][, callback]);

Đây là mô tả của tất cả các tham số -

speed - Một chuỗi biểu thị một trong ba tốc độ được xác định trước ("chậm", "bình thường" hoặc "nhanh") hoặc số mili giây để chạy hoạt ảnh (ví dụ: 1000).
callback- Tham số tùy chọn này đại diện cho một chức năng sẽ được thực thi bất cứ khi nào hoạt ảnh hoàn thành; thực thi một lần cho mỗi phần tử hoạt hình chống lại.

Thí dụ

Chúng tôi có thể tạo hoạt ảnh cho bất kỳ phần tử nào, chẳng hạn như <div> đơn giản có chứa hình ảnh -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){ $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Phương thức hiệu ứng JQuery

Bạn đã thấy khái niệm cơ bản về jQuery Effects. Bảng sau liệt kê tất cả các phương pháp quan trọng để tạo các loại hiệu ứng khác nhau -

Sr.No.	Phương pháp & Mô tả
1	hoạt ảnh (thông số, [thời lượng, tốc độ, gọi lại]) Một chức năng để tạo hoạt ảnh tùy chỉnh.
2	fadeIn (tốc độ, [gọi lại]) Làm mờ tất cả các phần tử phù hợp bằng cách điều chỉnh độ mờ của chúng và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
3	fadeOut (tốc độ, [gọi lại]) Làm mờ tất cả các phần tử phù hợp bằng cách điều chỉnh độ mờ của chúng thành 0, sau đó đặt hiển thị thành "không có" và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
4	fadeTo (tốc độ, độ mờ, gọi lại) Làm mờ độ mờ của tất cả các phần tử phù hợp đến độ mờ được chỉ định và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
5	ẩn giấu( ) Ẩn từng tập hợp các phần tử đã so khớp nếu chúng được hiển thị.
6	ẩn (tốc độ, [gọi lại]) Ẩn tất cả các phần tử phù hợp bằng cách sử dụng hoạt ảnh duyên dáng và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
7	chỉ( ) Hiển thị từng tập hợp các phần tử đã so khớp nếu chúng bị ẩn.
số 8	hiển thị (tốc độ, [gọi lại]) Hiển thị tất cả các phần tử phù hợp bằng cách sử dụng hoạt ảnh duyên dáng và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
9	slideDown (tốc độ, [gọi lại]) Hiển thị tất cả các phần tử phù hợp bằng cách điều chỉnh chiều cao của chúng và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
10	slideToggle (tốc độ, [gọi lại]) Chuyển đổi chế độ hiển thị của tất cả các phần tử phù hợp bằng cách điều chỉnh chiều cao của chúng và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
11	slideUp (tốc độ, [gọi lại]) Ẩn tất cả các phần tử phù hợp bằng cách điều chỉnh chiều cao của chúng và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
12	dừng lại ([clearQueue, gotoEnd]) Dừng tất cả các hoạt ảnh hiện đang chạy trên tất cả các phần tử được chỉ định.
13	chuyển đổi () Chuyển đổi hiển thị từng tập hợp các phần tử phù hợp.
14	chuyển đổi (tốc độ, [gọi lại]) Chuyển đổi hiển thị từng tập hợp các phần tử phù hợp bằng cách sử dụng hoạt ảnh duyên dáng và kích hoạt lệnh gọi lại tùy chọn sau khi hoàn thành.
15	nút chuyển đổi ) Chuyển đổi hiển thị từng tập hợp các phần tử phù hợp dựa trên công tắc (true hiển thị tất cả các phần tử, false ẩn tất cả các phần tử).
16	jQuery.fx.off Tắt toàn cầu tất cả các hoạt ảnh.

Hiệu ứng dựa trên thư viện giao diện người dùng

Để sử dụng các hiệu ứng này, bạn có thể tải xuống Thư viện giao diện người dùng jQuery mới nhất jquery-ui-1.11.4.custom.ziptừ Thư viện giao diện người dùng jQuery hoặc sử dụng Google CDN để sử dụng nó theo cách tương tự như chúng tôi đã làm cho jQuery.

Chúng tôi đã sử dụng Google CDN cho giao diện người dùng jQuery bằng cách sử dụng đoạn mã sau trong trang HTML để chúng tôi có thể sử dụng giao diện người dùng jQuery -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

Sr.No.	Phương pháp & Mô tả
1	Mù Làm mờ phần tử đi hoặc hiển thị nó bằng cách làm mù phần tử đó.
2	Nảy Trả lại phần tử theo chiều dọc hoặc chiều ngang n lần.
3	Kẹp Cắt hoặc tắt phần tử theo chiều dọc hoặc chiều ngang.
4	Rơi vãi Bỏ phần tử đi hoặc hiển thị nó bằng cách thả nó vào.
5	Phát nổ Nổ phần tử thành nhiều mảnh.
6	Gập lại Gấp phần tử giống như một tờ giấy.
7	Điểm nổi bật Đánh dấu nền bằng một màu xác định.
số 8	Phun Chia tỷ lệ và làm mờ các hoạt ảnh tạo ra hiệu ứng phồng.
9	Pulsate Tăng độ mờ của phần tử nhiều lần.
10	Tỉ lệ Thu nhỏ hoặc tăng trưởng một phần tử theo hệ số phần trăm.
11	Rung chuyển Lắc phần tử theo chiều dọc hoặc chiều ngang n lần.
12	Kích thước Thay đổi kích thước một phần tử thành chiều rộng và chiều cao được chỉ định.
13	Cầu trượt Trượt phần tử ra khỏi khung nhìn.
14	chuyển khoản Chuyển đường viền của một phần tử sang phần tử khác.

Tương tác có thể được thêm các hành vi cơ bản dựa trên chuột vào bất kỳ phần tử nào. Sử dụng với các tương tác, Chúng tôi có thể tạo danh sách có thể sắp xếp, các phần tử có thể thay đổi kích thước, hành vi kéo và thả. Tương tác cũng tạo nên các khối xây dựng tuyệt vời cho các vật dụng và ứng dụng phức tạp hơn.

Sr.No.	Tương tác & Mô tả
1	Kéo có thể Bật chức năng có thể kéo trên bất kỳ phần tử DOM nào.
2	Có thể thả Bật bất kỳ phần tử DOM nào để có thể thả.
3	Có thể thay đổi kích thước Cho phép bất kỳ phần tử DOM nào có thể thay đổi kích thước.
4	Chọn có thể Cho phép phần tử DOM (hoặc nhóm phần tử) có thể chọn được.
5	Sắp xếp có thể Cho phép một nhóm các phần tử DOM có thể sắp xếp được.

một widget jQuery UI là một trình cắm thêm jQuery chuyên biệt. Sử dụng trình cắm thêm, chúng ta có thể áp dụng các hành vi cho các phần tử. Tuy nhiên, trình cắm thiếu một số khả năng tích hợp, chẳng hạn như cách liên kết dữ liệu với các phần tử của nó, hiển thị phương thức, hợp nhất các tùy chọn với giá trị mặc định và kiểm soát thời gian tồn tại của trình cắm.

Sr.No.	Widget & Mô tả
1	Accordion Cho phép thu gọn nội dung, được chia thành các phần hợp lý.
2	Tự động hoàn thành Bật để cung cấp các đề xuất trong khi bạn nhập vào trường.
3	Cái nút Nút là một đầu vào của loại gửi và một neo.
4	Bảng chọn ngày Đó là mở lịch tương tác trong một lớp phủ nhỏ.
5	Hộp thoại Hộp thoại là một trong những cách hay để trình bày thông tin trên trang HTML.
6	Thực đơn Menu hiển thị danh sách các mục.
7	Thanh tiến trình Nó hiển thị thông tin tiến độ.
số 8	Chọn menu Bật một kiểu có thể chọn phần tử / phần tử.
9	Thanh trượt Thanh trượt cơ bản nằm ngang và có một tay cầm duy nhất có thể được di chuyển bằng chuột hoặc bằng cách sử dụng các phím mũi tên.
10	Spinner Nó cung cấp một cách nhanh chóng để chọn một giá trị từ một tập hợp.
11	Các tab Nó được sử dụng để hoán đổi giữa các nội dung được chia thành các phần hợp lý.
12	Chú giải công cụ Nó cung cấp các mẹo cho người dùng.

Jquery có hai chủ đề tạo kiểu khác nhau là A và B. Mỗi chủ đề có màu sắc khác nhau cho các nút, thanh, khối nội dung, v.v.

Cú pháp của câu truy vấn J như được hiển thị bên dưới:

<div data-role = "page" data-theme = "a|b">

Một ví dụ về chủ đề đơn giản như được hiển thị bên dưới -

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
			
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>
	
   <body>
      <div data-role = "page" id = "pageone" data-theme = "a">
        <div data-role = "header">
            <h1>Tutorials Point</h1>
         </div>

         <div data-role = "main" class = "ui-content">
			
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </div>

         <div data-role = "footer">
            <h1>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Ví dụ về A Simple of B theming như hình dưới đây -

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>
	
   <body>
      <div data-role = "page" id = "pageone" data-theme = "b">
        <div data-role = "header">
            <h1>Tutorials Point</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </div>

         <div data-role = "footer">
            <h1>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Jquery cung cấp các tiện ích phục vụ ở dạng $ (không gian tên). Các phương thức này rất hữu ích để hoàn thành các tác vụ lập trình. Một vài phương thức tiện ích như được hiển thị bên dưới.

$ .trim ()

$ .trim () được sử dụng để Loại bỏ khoảng trắng đầu và cuối

$.trim( "    lots of extra whitespace    " );

$ .each ()

$ .each () được sử dụng để Lặp lại các mảng và đối tượng

$.each([ "foo", "bar", "baz" ], function( idx, val ) {
   console.log( "element " + idx + " is " + val );
});
 
$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
   console.log( k + " : " + v );
});

.each () có thể được gọi trên một vùng chọn để lặp qua các phần tử có trong vùng chọn. .each (), không phải $ .each (), nên được sử dụng để lặp qua các phần tử trong một vùng chọn.

$ .inArray ()

$ .inArray () được sử dụng để trả về chỉ số của một giá trị trong một mảng hoặc -1 nếu giá trị không có trong mảng.

var myArray = [ 1, 2, 3, 5 ];
 
if ( $.inArray( 4, myArray ) !== -1 ) {
   console.log( "found it!" );
}

$ .extend ()

$ .extend () được sử dụng để thay đổi các thuộc tính của đối tượng đầu tiên bằng cách sử dụng các thuộc tính của các đối tượng tiếp theo.

var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };
 
var newObject = $.extend( firstObject, secondObject );
 
console.log( firstObject.foo ); 
console.log( newObject.foo );

$ .proxy ()

$ .proxy () được sử dụng để Trả về một hàm sẽ luôn chạy trong phạm vi được cung cấp - nghĩa là, đặt ý nghĩa của hàm này bên trong hàm đã truyền thành đối số thứ hai

var myFunction = function() {
   console.log( this );
};

var myObject = {
   foo: "bar"
};
 
myFunction(); // window
 
var myProxyFunction = $.proxy( myFunction, myObject );
 
myProxyFunction();

$ .browser

$ .browser được sử dụng để cung cấp thông tin về trình duyệt

jQuery.each( jQuery.browser, function( i, val ) {
   $( "<div>" + i + " : <span>" + val + "</span>" )
   .appendTo( document.body );
});

$ .contains ()

$ .contains () được sử dụng để trả về true nếu phần tử DOM được cung cấp bởi đối số thứ hai là con của phần tử DOM được cung cấp bởi đối số đầu tiên, cho dù nó là phần tử con trực tiếp hay được lồng sâu hơn.

$.contains( document.documentElement, document.body ); $.contains( document.body, document.documentElement );

$ .data ()

$ .data () được sử dụng để cung cấp thông tin về dữ liệu

<html lang = "en">
   <head>
      <title>jQuery.data demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      <div>
         The values stored were <span></span>
            and <span></span>
      </div>
 
      <script>
         var div = $( "div" )[ 0 ]; jQuery.data( div, "test", { first: 25, last: "tutorials" }); $( "span:first" ).text( jQuery.data( div, "test" ).first );
         $( "span:last" ).text( jQuery.data( div, "test" ).last );
      </script>
   </body>
</html>

Một đầu ra sẽ như sau

The values stored were 25 and tutorials

$ .fn.extend ()

$ .fn.extend () được sử dụng để mở rộng nguyên mẫu jQuery

<html lang = "en">
   <head>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      <label><input type = "checkbox" name = "android"> 
         Android</label>
      <label><input type = "checkbox" name = "ios"> IOS</label>
 
      <script>
         jQuery.fn.extend({
			
            check: function() {
               return this.each(function() {
                  this.checked = true;
               });
            },
            uncheck: function() {
               return this.each(function() {
                  this.checked = false;
               });
            }
         });
 
         // Use the newly created .check() method
         $( "input[type = 'checkbox']" ).check();
			
      </script>
   </body>
</html>

Nó cung cấp đầu ra như hình dưới đây -

$ .isWindow ()

$ .isWindow () được sử dụng để nhận dạng cửa sổ

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.isWindow demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      Is 'window' a window? <b></b>
 
      <script>
         $( "b" ).append( "" + $.isWindow( window ) );
      </script>
   </body>
</html>

Nó cung cấp đầu ra như hình dưới đây -

$ .now ()

Nó trả về một số đại diện cho thời gian hiện tại

(new Date).getTime()

$ .isXMLDoc ()

$ .isXMLDoc () kiểm tra xem tệp có phải là xml hay không

jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )

$ .globalEval ()

$ .globalEval () được sử dụng để thực thi javascript trên toàn cầu

function test() {
   jQuery.globalEval( "var newVar = true;" )
}
test();

$ .dequeue ()

$ .dequeue () được sử dụng để thực thi hàm tiếp theo trong hàng đợi

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.dequeue demo</title>
		
      <style>
         div {
            margin: 3px;
            width: 50px;
            position: absolute;
            height: 50px;
            left: 10px;
            top: 30px;
            background-color: green;
            border-radius: 50px;
         }
         div.red {
            background-color: blue;
         }
      </style>
		
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>

   <body>
      <button>Start</button>
      <div></div>
 
      <script>
         $( "button" ).click(function() {
            $( "div" ) .animate({ left: '+ = 400px' }, 2000 ) .animate({ top: '0px' }, 600 ) .queue(function() { $( this ).toggleClass( "red" );
               $.dequeue( this );
            })
				
            .animate({ left:'10px', top:'30px' }, 700 );
         });
      </script>
   </body>
</html>

Nó cung cấp đầu ra như hình dưới đây -