jQuery - Khái niệm cơ bản

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

Một 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 dưới dạng đố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 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 bộ 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í được chỉ định thông qua số ký tự được 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 các phần tử <p> khác.

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 .