Tài liệu jQuery tiếng Việt

Chia sẻ: Nguyen Thanh Tuyen | Ngày: | Loại File: PDF | Số trang:93

Thêm vào BST

Báo xấu

145
lượt xem 31
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tài liệu "jQuery tiếng Việt" giới thiệu đến các bạn những nội dung về jQuery, tổng quan về jQuery, thuộc tính trong jQuery, thao tác DOM trong jQuery, xử lý sự kiện trong jQuery,... Với các bạn đang học và nghiên cứu về Hệ điều hành mày tính thì đây là tài liệu tham khảo hữu ích.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Tài liệu jQuery tiếng Việt

http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Mục lục Giới thiệu về jQuery .............................................................................................................. 5 Đối với độc giả ...................................................................................................................... 5 Điều kiện tiền đề ................................................................................................................... 5 Thực hành trực tuyến ........................................................................................................... 5 Tổng quan về jQuery ............................................................................................................ 5 jQuery là gì?...................................................................................................................... 5 Cách sử dụng jQuery?...................................................................................................... 6 Cài đặt jQuery nội bộ ........................................................................................................ 6 Ví dụ ............................................................................................................................ 7 Sử dụng CDN................................................................................................................... 7 Ví dụ ............................................................................................................................ 7 Cách để gọi một hàm thư viện jQuery?............................................................................. 8 Cách sử dụng Custom Script trong jQuery?...................................................................... 9 Sử dụng nhiều thư viện trong jQuery .............................................................................. 10 Những gì có trong Trang sau? ........................................................................................ 10 Cơ bản về jQuery ............................................................................................................... 11 Đối tượng String ............................................................................................................. 11 Đối tượng Number trong jQuery ..................................................................................... 11 Đối tượng Boolean trong jQuery ..................................................................................... 11 Đối tượng Object trong jQuery ........................................................................................ 12 Đối tượng Array trong jQuery .......................................................................................... 12 Hàm (Function) trong jQuery........................................................................................... 12 Các tham số trong jQuery ............................................................................................... 13 Context trong jQuery ....................................................................................................... 14 Phạm vi (Scope) trong jQuery ......................................................................................... 14 Callback trong jQuery...................................................................................................... 15 Các Closure trong jQuery................................................................................................ 15 http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 1
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Proxy Pattern trong jQuery.............................................................................................. 16 Các hàm có sẵn trong jQuery ......................................................................................... 17 Document Object Model (DOM) ..................................................................................... 18 Selector trong jQuery .......................................................................................................... 19 Hàm cơ sở $() trong jQuery ............................................................................................ 20 Ví dụ .......................................................................................................................... 20 Cách sử dụng các Selector trong jQuery? ...................................................................... 21 Ví dụ về Selector trong jQuery ........................................................................................ 22 Thuộc tính trong jQuery ...................................................................................................... 28 Nhận giá trị thuộc tính trong jQuery ................................................................................. 28 Ví dụ .......................................................................................................................... 28 Thiết lập giá trị thuộc tính trong jQuery............................................................................. 29 Ví dụ .......................................................................................................................... 29 Áp dụng Style trong jQuery ............................................................................................. 30 Ví dụ .......................................................................................................................... 30 Các phương thức Atribute trong jQuery .......................................................................... 31 Ví dụ ............................................................................................................................... 33 Truy cập DOM trong jQuery................................................................................................ 35 Tìm kiếm các phần tử bởi chỉ mục (index) trong jQuery .................................................. 35 Ví dụ .......................................................................................................................... 36 Lọc các phần tử trong jQuery.......................................................................................... 37 Ví dụ .......................................................................................................................... 38 Xác định vị trí các phần tử con trong jQuery .................................................................... 39 Ví dụ .......................................................................................................................... 39 Các phương thức DOM Filter trong jQuery ..................................................................... 40 Các phương thức DOM Traversing trong jQuery............................................................ 41 CSS Selector trong jQuery.................................................................................................. 43 Áp dụng các thuộc tính CSS trong jQuery....................................................................... 43 Ví dụ .......................................................................................................................... 43 http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 2
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Áp dụng nhiều thuộc tính CSS trong jQuery.................................................................... 45 Ví dụ .......................................................................................................................... 45 Thiết lập độ rộng và chiều cao phần tử trong jQuery ....................................................... 46 Ví dụ .......................................................................................................................... 46 Các phương thức CSS trong jQuery............................................................................... 47 Thao tác DOM trong jQuery................................................................................................ 49 Thao tác nội dung trong jQuery ....................................................................................... 50 Ví dụ .......................................................................................................................... 50 Thay thế phần tử DOM trong jQuery............................................................................... 51 Ví dụ .......................................................................................................................... 51 Gỡ bỏ các phần tử DOM trong jQuery............................................................................ 52 Ví dụ .......................................................................................................................... 53 Chèn các phần tử DOM trong jQuery ............................................................................. 54 Ví dụ .......................................................................................................................... 54 Các phương thức thao tác DOM trong jQuery ................................................................ 55 Xử lý sự kiện trong jQuery .................................................................................................. 58 Bind các Event Handler trong jQuery .............................................................................. 59 Gỡ bỏ Event Handler trong jQuery.................................................................................. 60 Các loại sự kiện trong jQuery .......................................................................................... 61 Đối tượng Event trong jQuery ......................................................................................... 63 Các thuộc tính của đối tượng Event trong jQuery............................................................ 63 Ví dụ ............................................................................................................................... 65 Các phương thức của đối tượng Event trong jQuery ...................................................... 67 Các phương thức thao tác đối tượng Event trong jQuery ............................................... 67 Các phương thức Event Helper trong jQuery.................................................................. 69 Các phương thức Trigger trong jQuery ........................................................................... 69 Phương thức Binding trong jQuery ................................................................................. 69 jQuery Ajax ......................................................................................................................... 73 Tải dữ liệu một cách đơn giản với jQuery........................................................................ 73 http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 3
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Cú pháp .................................................................................................................... 73 Ví dụ .......................................................................................................................... 74 Nhận dữ liệu JSON trong jQuery .................................................................................... 75 Cú pháp .................................................................................................................... 75 Ví dụ .......................................................................................................................... 75 Truyền dữ liệu tới Server trong jQuery ............................................................................ 77 Ví dụ .......................................................................................................................... 77 Các phương thức jQuery AJAX ...................................................................................... 78 Các sự kiện jQuery AJAX ............................................................................................... 80 Hiệu ứng trong jQuery ........................................................................................................ 80 Hiển thị và ẩn các phần tử trong jQuery .......................................................................... 81 Cú pháp .................................................................................................................... 81 Ví dụ .......................................................................................................................... 81 Toggle các phần tử trong jQuery..................................................................................... 83 Cú pháp .................................................................................................................... 83 Ví dụ .......................................................................................................................... 83 Các phương thức jQuery Effect ...................................................................................... 84 Các hiệu ứng trên cơ sở UI Library trong jQuery............................................................. 87 Plugins trong jQuery............................................................................................................ 88 Cách sử dụng Plugins trong jQuery ................................................................................ 89 Cách để phát triển một Plug-in trong jQuery.................................................................... 90 Ví dụ ............................................................................................................................... 90 Tài liệu tham khảo về jQuery............................................................................................... 92 Các đường link hữu ích về jQuery .................................................................................. 92 Các JavaScript Framework khác .................................................................................... 92 http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 4
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Giới thiệu về jQuery jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm 2006. 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ạ. Loạt bài hướng dẫn của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint Đối với độc giả Loạt bài hướng dẫn này được thiết kế cho những nhà lập trình muốn học những kiến thức cơ bản về jQuery và các khái niệm về chương trình theo các bước đơn giản và dễ dàng. Bài hướng dẫn sẽ cung cấp cho bạn sự hiểu biết đầy đủ về jQuery với những ví dụ phù hợp. Điều kiện tiền đề Trước khi tiến hành học tập với loạt bài này, bạn nên có kiến thức về HTML, CSS, JavaScript, Document Object Model (DOM) và bất kỳ bộ soạn thảo (Text Editor) nào khác. Khi chúng ta phát triển các ứng dụng trên web sử dụng jQuery, nó sẽ tốt nếu bạn hiểu cách các ứng dụng trên web và internet làm việc. Thực hành trực tuyến Với mỗi chủ đề trong bài học, chúng tôi sẽ cung cấp cho các bạn các ví dụ minh họa, từ đó giúp bạn hiểu sâu hơn cũng như cảm giác thích thú với bài hướng dẫn của chúng tôi. Hãy chọn tùy chọn Try it ở góc trên cùng bên phải mỗi ví dụ để thực hành ngay. Tổng quan về jQuery jQuery là gì? jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm 2006 với một phương châm tuyệt vời: Write less, do more. 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: http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 5
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com  Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM để traverse 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+  Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3 Selector và cú pháp XPath cơ bản. Cách sử dụng jQuery? Có hai cách để sử dụng jQuery:  Cài đặt nội bộ − Bạn có thể tải jQuery Library trên thiết bị nội bộ của bạn và include nó trong HTML code.  Sử dụng từ CDN (CDN Based Version) − Bạn có thể include thư viện jQuery vào trong HTML code một cách trực tiếp từ Content Delivery Network (CDN). Cài đặt jQuery nội bộ  Truy cập trang https://jquery.com/download/ để tải phiên bản jQuery mới nhất.  Bây giờ đặt file jquery-2.1.3.min.js vào trong một thư mục trong Website của bạn, ví dụ /jquery. http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 6
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Ví dụ Bây giờ bạn có thể include thư viện jquery vào trong HTML file của bạn như sau: The jQuery Example $(document).ready(function(){ document.write("Hello, World!"); }); Hello Nó sẽ cho kết quả: Sử dụng CDN Bạn có thể include thư viện jQuery vào trong HTML code một cách trực tiếp từ Content Delivery Network (CDN). Google và Microsoft cung cấp phiên bản mới nhất. Trong loạt bài này, chúng tôi sử dụng Google CDN. Ví dụ Bây giờ chúng ta viết lại ví dụ trên bởi sử dụng thư viện jQuery từ Google CDN. http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 7
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com The jQuery Example $(document).ready(function(){ document.write("Hello, World!"); }); Hello Nó sẽ cho kết quả: Cách để gọi một hàm thư viện jQuery? Cũng tương tự như JavaScript, trước khi chúng ta sử dụng các đoạn code của jQuery để đọc hay chỉnh sửa các đối tượng DOM, chúng ta cần đảm bảo rằng chúng ta bắt đầu thêm các sự kiện ngay sau khi DOM sẵn sàng. Nếu bạn muốn một sự kiện làm việc trên trang của bạn, bạn nên gọi nó bên trong hàm $(document).ready(). Mọi thứ bên trong 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 ta đă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 }); http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 8
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Để gọi bất kỳ hàm thư viện jQuery nào, sử dụng các thẻ HTML script như dưới đây: The jQuery Example $(document).ready(function() { $("div").click(function() {alert("Hello, world!");}); }); Click on this to see a dialogue box. Nó sẽ cho kết quả sau: Cách sử dụng Custom Script trong jQuery? Nó thực sự là tốt hơn khi viết riêng cho bạn Custom Code trong một Custom JavaScript file:custom.js, như sau: /* Filename: custom.js */ $(document).ready(function() { $("div").click(function() { alert("Hello, world!"); http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 9
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com }); }); Bây giờ chúng ta bao custom.js này vào trong HTML file như sau: The jQuery Example Click on this to see a dialogue box. Nó sẽ cho kết quả sau: Sử dụng nhiều thư viện trong jQuery Bạn có thể sử dụng nhiều thư viện cùng nhau mà không xảy ra xung đột giữa chúng. Ví dụ, bạn có thể sử dụng các thư viện jQuery và thư viện MooTool JavaScript cùng với nhau. Bạn có thể kiểm tra phương thức: jQuery - Phương thức noConflict để biết thêm chi tiết. Những gì có trong Trang sau? Đừng bận tâm quá nhiều nếu bạn không hiểu các ví dụ trên. Bạn sẽ sớm hiểu chúng trong các chương tiếp theo. Trong chương tới, chúng tôi sẽ đề cập một số khái niệm cơ bản mà đến từ qui ước của JavaScript. http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 10
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Cơ bản về jQuery 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. Chương này sẽ giải thích hầu hết khái niệm cơ bản thường được sử dụng trong các ứng dụng xây dựng trên jQuery. Đối tượng String Một chuỗi trong JavaScript là một đối tượng không đổi chứa 0, 1 hoặc nhiều ký tự. Sau đây là một ví dụ hợp lệ về một String trong JavaScript. "This is JavaScript String" 'This is JavaScript String' 'This is "really" a JavaScript String' "This is 'really' a JavaScript String" Đối tượng Number trong jQuery Đối tượng Number trong JavaScript 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. Sau đây là ví dụ hợp lệ về một số trong JavaScript. 5350 120.27 0.26 Đối tượng Boolean trong jQuery 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. Sau đây là các ví dụ hợp lệ về đối tượng Boolean trong JavaScript. true // true false // false 0 // false http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 11
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com 1 // true "" // false "hello" // true Đối tượng Object trong jQuery JavaScript 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 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 Object bởi 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" //
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com 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 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 như sau: var handler = function (){ // do some stuff here } jQuery sử dụng rất nhiều hàm ẩn danh như sau: $(document).ready(function(){ // do some stuff here }); Các tham số trong jQuery Các tham số trong JavaScript là một loại của Array mà có thuộc tính length. Ví dụ sau giải thích về điều này: 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 Argument cũng có một thuộc tính callee, mà tham chiếu đến hàm bạn đang ở trong đó. Ví dụ: function func() { return arguments.callee; } func(); // ==> func http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 13
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com 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 }); 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 Phạm vi (Scope) trong jQuery Phạm vi của một biến là khu vực trong chương trình của bạn mà biến đó được định nghĩa. Biến trong JavaScript sẽ chỉ có hai phạm vi:  Các biến Global − Một biến Global có phạm vi chung, nghĩa là nó được định nghĩa ở mọi nơi trong JavaScript code của bạn.  Các biến Local − Một biến Local sẽ chỉ nhìn thấy bên trong một hàm nơi nó được định nghĩa. Các tham số hàm luôn luôn là Local cho hàm đó. Trong thân của một hàm, một biến Local có quyền ưu tiên cao hơn biến Global mà có cùng tên. http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 14
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com var myVar = "global"; // ==> Declare a global variable function ( ) { var myVar = "local"; // ==> Declare a local variable document.write(myVar); // ==> local } Callback trong jQuery 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 Closure trong jQuery Các Closure được tạo bất cứ khi nào một biến được định nghĩa bên ngoài phạm vi hiện tại được truy cập từ bên trong phạm vi nội bộ. Ví dụ sau chỉ cách biến counter là nhìn thấy trong các hàm create, increment, và print, nhưng không nhìn thấy bên ngoài chúng. function create() { var counter = 0; http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 15
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com return { increment: function() { counter++; }, print: function() { console.log(counter); } } } var c = create(); c.increment(); c.print(); // ==> 1 Pattern này cho phép bạn tạo các đối tượng với các phương thức, mà hoạt động trên dữ liệu, mà không thấy được ở bên ngoài. Bạn ghi nhớ rằng, data hiding là khái niệm rất cơ bản của các chương trình hướng đối tượng. Proxy Pattern trong jQuery Một Proxy là một đối tượng mà có thể được sử dụng để điều khiển sự truy cập tới phần tử khác. Nó thi hành cùng giao diện cho đối tượng khác này và truyền trên bất kỳ phương thức nào tới nó. Đối tượng khác này thường được gọi là Real Subject. Một Proxy có thể được thuyết minh tại vị trí của Real Subject này và cho phép nó để được truy cập ở chế độ từ xa. Chúng ta có thể lưu giữ phương thức setArray của jQuery trong một Closure và viết đè lên (overwrite) 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); }; http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 16
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com })(); Ví dụ trên bao code của nó trong một hàm để ẩn biến proxied. Sau đó, Proxy này log tất cả các lời gọi phương thức và ủy thác lời gọi đó cho phương thức ban đầu. Sử dụng apply(this, arguments) bảo đảm cho việc người gọi không thể chú ý về sự khác nhau giữa phương thức ban đầu và phương thức được ủy nhiệm. Các hàm có sẵn trong jQuery JavaScript đi kèm một tập hợp các hàm hữu ích gắn liền với nó. Những phương thức này có thể được sử dụng để thao tác String, Number, và Date. Bảng dưới liệt kê các hàm JavaScript quan trọng: STT Phương thức & Miêu tả 1 charAt() Trả về ký tự tại chỉ mục (index) đã cho. 2 concat() Kết nối hai chuỗi văn bản và trả về một chuỗi mới. 3 forEach() Gọi một hàm cho mỗi phần tử của một mảng. 4 indexOf() Trả về chỉ mục về sự xuất hiện đầu tiên bên trong việc gọi đối tượng String với giá trị đã cho, hoặc -1 nếu không tìm thấy. 5 length() Trả về độ dài của chuỗi. 6 pop() http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 17
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com Gỡ bỏ phần tử cuối của một mảng và trả về phần tử đó. 7 push() Thêm một hoặc nhiều phần tử tới phần cuối của một mảng và trả về độ dài mới của mảng đó. 8 reverse() Đảo ngược thứ tự các phần tử trong một mảng – phần tử đầu tiên thành cuối cùng và cuối cùng thành đầu tiên. 9 sort() Sắp xếp phân loại các phần tử của một mảng. 10 substr() Trả về các ký tự trong một mảng bắt đầu từ vị trí đã cho từ số các ký tự đã xác định. 11 toLowerCase() Trả về giá trị chuỗi đang gọi được biến đổi thành kiểu chữ thường. 12 toString() Trả về sự biểu diễn chuỗi của giá trị số. 13 toUpperCase() Trả về giá trị chuỗi đang gọi được biến đổi thành chữ hoa. Bạn truy cập trang sau để có danh sách đầy đủ − Các hàm có sẵn trong JavaScript. Document Object Model (DOM) DOM là một cấu trúc cây của các phần tử HTML đa dạng, như sau: http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 18
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com The jQuery Example This is a paragraph. This is second paragraph. This is third paragraph. Nó sẽ cho kết quả sau: Sau đây là một số điểm quan trọng về cấu trúc cây trên:  Thẻ là ancestor (gốc hay 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ả phần tử khác là con cháu của phần tử .  Thẻ và không là hậu duệ (descendant), nhưng cũng là con của .  Phần tử là con của phần tử , con của phần tử và , và là anh em của các phần tử khác. Trong khi học các khái niệm jQuery, nó thực sự hữu ích khi bạn hiểu về DOM, nếu bạn chưa có khái niệm gì về DOM, tôi đề nghị bạn truy cập trang sau: DOM Tutorial. Selector trong jQuery Thư viện jQuery khai thác sức mạnh của các CSS (Cascading Style Sheets) Selector để giúp chúng ta truy cập nhanh và dễ dàng hơn tới các phần tử hoặc nhóm các phần tử trong DOM. Một jQuery Selector là một hàm mà sử dụng các Expression để tìm ra sự kết nối của các phần tử từ một DOM trên cơ sở tiêu chuẩn đã cho. Theo cách đơn giản, bạn có thể nói rằng, Selector được http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 19
http://vietjack.com/jquery/index.jsp Copyright © vietjack.com sử dụng để chọn một hoặc nhiều phần tử HTML bởi sử dụng jQuery. Khi một phần tử được chọn, thì chúng ta có thể thực hiện các hoạt động đa dạng trên phần tử đã chọn đó. Hàm cơ sở $() trong jQuery Factory Function có thể dịch là hàm cơ sở bởi vì đối với tôi, nó là nơi mọi thứ được tạo ra. jQuery Selector bắt đầu với ký hiệu đô la và cặp dấu ngoặc đơn $(). Hàm cơ sở $() sử dụng ba khối trong khi chọn các phần tử trong một tài liệu đã cho. STT Selector & Miêu tả 1 Tag Name Biểu diễn một tên thẻ có sẵn trong DOM. Ví dụ: $(‘p’) chọn tất cả đoạn văn trong phần tử. 2 Tag ID Biểu diễn một tên thẻ có sẵn với ID đã cho trong DOM. Ví dụ $('#some-id') chọn tất cả phần tử đơn trong tài liệu mà có một ID là some-id 3 Tag Class Biểu diễn 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 mà có một lớp là some-class. Tất cả các mục trên có thể được sử dụng hoặc trên chính nó hoặc trong sự kết hợp với Selector khác. Tất cả jQuery Selector xây dựng trên cùng qui tắc ngoại trừ một số “mẹo” (Tweaking). Ghi chú − Hàm cơ sở $() là đồng nghĩa với một hàm jQuery(). Vì thế trong trường hợp bạn đang sử dụng bất kỳ thư viện JavaScirpt nào khác thì có thể xuất hiện xung đột ở đây, khi đó bạn có thể đổi ký hiệu $ thành jQuery và bạn có thể sử dụng hàm jQuery() thay cho hàm$(). Ví dụ Sau đây là ví dụ đơn giản sử dụng Tag Selecor. Nó sẽ chọn tất cả phần tử vởi tên thẻ p và sẽ thiết lập màu nền thành “yellow”. http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Trang 20