jQuery là gì?

jQuery là một Framework được xây dựng dựa trên các tính năng của JavaScript. Vì thế trong khi phát triển các ứng dụng sử dụng jQuery, bạn có thể sử dụng tất cả các hàm và các tính năng khác được bổ trợ trong JavaScript. jQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng động và tương tác Ajax. Với jQuery, khái niệm Rapid Web Development đã không còn quá xa lạ. jQuery là một bộ công cụ tiện ích JavaScript làm đơn giản hóa các tác vụ đa dạng với việc viết ít code hơn. Dưới đây liệt kê một số tính năng tối quan trọng được hỗ trợ bởi jQuery:

Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM để traverse (duyệt) một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội dung của chúng bởi sử dụng phương tiện Selector mã nguồn mở, mà được gọi là Sizzle.

Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơn bằng việc xử lý các sự kiện đa dạng mà không làm cho HTML code rối tung lên với các Event Handler.

Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tính năng và phản hồi tốt bởi sử dụng công nghệ AJAX.

Hiệu ứng − jQuery đi kèm với rất nhiều các hiệu ứng đa dạng và đẹp mắt mà bạn có thể sử dụng trong các Website của mình.

Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng 19KB (gzipped).

Được hỗ trợ hầu hết bởi các trình duyệt hiện đại − jQuery được hỗ trợ hầu hết bởi các trình duyệt hiện đại, và làm việc tốt trên IE 6.0+, FF 2.0+, Safari 3.0+, Chrome và Opera 9.0+

Hôm nay chúng ta sẽ đi tìm hiểu về JQuery xem vì sao đây là 1 Framwork được sử dụng rất nhiều và được các developer rất thích nha.

Cơ bản về jQuery

Đầu tiên chúng ta sẽ đi tìm hiểu các loại đối tượng được sử dụng trong JQuery

String

String trong JQuery thì cũng được định nghĩa giống như trong tất cả các ngôn ngữ khác, là 1 một đối tượng không đổi chứa 0, 1 hoặc nhiều ký tự. ví dụ :

"This is  String"
'This is  String'
'This is JQuery String'
"This is JQuery String"

Trong Jquery thì chuỗi được đặt trong Quote hoặc double quote thì đều được xem là string.

Number

Đối tượng Number trong JQuery là định dạng độ chính xác kép (64 bit) theo chuẩn IEEE 754. Chúng là không đổi, như đối tượng String.

ví dụ:

123
12.3
0.12

Boolean

Một Boolean trong JavaScript có thể nhận hoặc true hoặc false. Nếu một số là 0, thì mặc định của nó là false. Nếu một chuỗi là trống, thì mặc định là false. Nếu là 1 object thì có giá trị hoặc không giá trị

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true
testObject = {}  // false
testObject = {abc: "abc"}  // true

Object

JQuery hỗ trợ tốt khái niệm Object. Bạn có thể tạo một Object bởi sử dụng Object Literal, bạn có thể viết và đọc các thuộc tính của một Object bởi sử dụng ký hiệu dấu chấm (.)

var emp = {
   name: "employee name",
   age: 30
};

// Getting object properties
emp.name  // ==> employee name
emp.age   // ==> 30

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

Array

Array thì được Jquery định nghĩa khi bạn khởi tạo giá trị cho object với cặp dấu "[ ]"

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

khi duyệt array thì các bạn có thể dùng For Loop hoặc Each Loop: Với vòng lặp for thì chúng ta có thể sử dụng thuộc tính length, nhưng chú ý, length sẽ đếm số phần tử trong array nhưng index của array sẽ bắt đầu từ 0 nên các bạn chú ý khi sử dụng thuộc tính length cho vòng lặp for.

var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length ; i++) {
   // Do something with x[i]
}

còn với vòng lặp each thì sẽ có khác 1 ít

var x = [1, 2, 3, 4, 5];
$.each( x, function( key, value ) {
  console.log( key + ": " + value );
});

// 0: 1
// 1: 2
// 2: 3
// 3: 4
// 4: 5

Function

Một hàm trong Jquery 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ởi sử dụng từ khóa function.

function named(){
   console.log("hello, i'm Dat");
}

named();       //hello, i'm Dat

Một hàm ẩn danh có thể được định nghĩa theo cách tương tự như một hàm thông 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 tới một biến hoặc được truyền tới một phương thức.

var handler = function (){
    console.log("hello, i'm Dat with anonymous function");
}

//get function information by type variable name with out "()"
handler
//          function (){
//              console.log("hello, i'm Dat with anonymous function");
//          }

//call funtion by type variable name with "()"
handler();
//          hello, i'm Dat with anonymous function

Các tham số trong jQuery

Các tham số trong JavaScript là một loại của Array, muốn dynamic truy xuất các thuộc tính của function thì chúng ta có thể sử dụng object "arguments" bên trong function đó

function func(x){
   console.log(typeof x, arguments.length);
}
func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

Context trong jQuery

Từ khóa nổi tiếng trong JavaScript là this tham chiếu tới Context hiện tại. Trong một hàm, this có thể thay đổi, phụ thuộc 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
});

Ngoài ra bạn có thể xác định Context cho một lần hàm bởi sử dụng các phương thức call() và apply(). Sự khác nhau giữa chúng là cách chúng truyền các tham số. call() truyền tất cả các tham số thông qua các tham số tới hàm, trong khi apply() chấp nhận một mảng như là các tham 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

Scope

Scope của Jquery sẽ bao gồm 2 loại:

• Global variable: tất cả các function đều có thể sử dụng, tùy vào vị trí đặt của variable mà sử dụng, ví dụ nếu global được đặt ở layout thì tất cả các page đều có thể access, còn nếu đặt ở page nào đó thì chỉ có các function ở page đó có thể access
• Locall variable: thường được khởi tạo ở trong function, chỉ access được khi đang ở trong content của function đó. ví dụ:

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

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

Callback function

Đây được coi là 1 trong những tính năng hay nhất của Jquery, chúng ta có thể dễ dàng handle các event 1 cách dễ dàng. Định nghĩa về callback như sau: "Một callback là một hàm thuần JavaScript được truyền một số phương thức như là một tham số hoặc tùy chọn. Một số callback là các sự kiện, được gọi để cung cấp cho người sử dụng cơ hội để phản ứng lại khi một trạng thái nào đó được kích hoạt." Hệ thống sự kiện trong jQuery sử dụng các callback này ở khắp mọi nơi, ví dụ:

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

Hầu hết callback cung cấp các tham số và một context. Trong ví dụ event-handler, callback được gọi với một tham số, một Event.

Một số callback được yêu cầu để trả về cái gì đó, cái khác trả về giá trị tùy ý. Để ngăn cản sự đệ trình form, một xử lý sự kiện Submit có thể trả về false như sau:

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

Các hàm có sẵn trong jQuery

P1 Mình xin giới thiệu về Jquery và những đối tượng sử dụng trong Jquery, ở phần tiếp theo chúng ta sẽ tiếp tục tìm hiểu xem Jquery có những điều gì hấp dẫn developer nữa nha.