2 Jquery

Học phần: Công nghệ web (CT275)
Thư viện jQuery
Bùi Võ Quốc Bảo | Bộ môn CNTT
Học phần: Công nghệ web (CT275) 1

Mục tiêu
⚫ Vận dụng thư viện jQuery vào việc phát triển các tương tác
giữa người dùng và trang web
− Thực hiện tác vụ lựa chọn và các thao tác như thêm, sửa, xóa, hiệu chỉnh các
phần tử DOM
− Xử lý sự kiện và tạo hiệu ứng
− Tạo các yêu cầu bất đồng bộ (AJAX)
− Sử dụng các plugin của jQuery

Tài liệu tham khảo
⚫ Bear Bibeault, Yehuda Katz, Aurelio De Rosa. JQuery in Action,
3rd Edition, Manning, 2015
⚫ http://www.w3schools.com/jquery/
⚫ http://learn.jquery.com/
⚫ https://www.izwebz.com/jquery/gioi-thieu-v-jquery/
⚫ http://freetuts.net/hoc-jquery/jquery-can-ban

Nội dung
Thư viện jQuery

01 | Giới thiệu về jQuery 05 | Tạo các hiệu ứng
02 | Lựa chọn các phần tử DOM 06 | Làm việc với Ajax
03 | Thao tác các phần tử DOM 07 | Sử dụng các plugin của jQuery
04 | Xử lý sự kiện

01 | Giới thiệu về jQuery

JQuery là gì?
⚫ JQuery là một thư viện JS giúp đơn giản hóa các tác vụ:
− Lựa chọn các phần tử HTML (duyệt DOM)
− Thêm, hiệu chỉnh, xóa các phần tử
− Xử lý sự kiện, tạo các hiệu ứng
− Làm việc với Ajax,...

Tại sao là jQuery?
⚫ Các lợi điểm của jQuery:
− Đơn giản, dễ học
− Miễn phí, mã nguồn mở
− Nhẹ, tương thích với nhiều trình duyệt web
− Dễ dàng mở rộng (thông qua các plugin)
− JQuery được sử dụng bởi rất nhiều công ty lớn như: Microsoft, Google, Dell,
Digg, Wordpress,...
− Cộng đồng người dùng rất lớn → dễ dàng tìm kiếm sự hỗ trợ

Lịch sử phát triển

Tải thư viện jQuery
⚫ Truy cập trang web http://jquery.com và tải về jQuery mới nhất:
− Tập tin nén (*.min.js) sử dụng khi triển khai ứng dụng
− Tập tin không nén (*.js) dùng trong khi phát triển ứng dụng
⚫ Tham chiếu thư viện jQuery vào trang web:
<body>
…
<script type="text/javascript" src="jquery-3.x.x-min.js"></script>
<script type="text/javascript" src="myscript.js"></script>
</body>

Sử dụng các CDN (Content Deliver Network)
⚫ Ví dụ sử dụng jQuery trên jquery.com:
<body>
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="myscript.js"></script>
</body>

Hàm jQuery
⚫ Việc nạp thư viện jQuery vào trang web cho phép ta truy xuất được
hàm tên jQuery
− Tất cả các chức năng của jQuery được cung cấp thông qua hàm jQuery này
jQuery('li').css('background-color', 'yellow');
− Để thuận tiện, ta có thể sử dụng tên $ thay vì 'jQuery'
$('li').css('background-color', 'yellow');

Tài liệu HTML đã sẵn sàng (ready) chưa?
⚫ Các phần tử trong tài liệu phải được tạo ra trước khi jQuery có thể thực
hiện các thao tác với chúng
⚫ JQuery cho phép đăng ký một hàm callback sẽ được thực thi khi tài liệu
DOM sẵn sàng (trang HTML được tải xong):
$(document).ready(function() {
//Perform here all the jQuery magic
});
// Shorthand for $(document).ready()
$(function() {
//Perform here all the jQuery magic
});
02 | Lựa chọn các phần tử DOM

Nhắc lại: HTML DOM (Document Object Model)

Nhắc lại: HTML DOM (Document Object Model)
⚫ Khi đọc một trang web (trang HTML), trình duyệt tạo một DOM cho
trang web đó
⚫ HTML DOM là một mô hình đối tượng chuẩn và là giao diện lập trình
cho HTML: một chuẩn cho việc đọc, hiệu chỉnh, thêm hoặc xóa các
phần tử HTML

Lựa chọn phần tử với jQuery
⚫ JQuery hỗ trợ hầu hết các bộ chọn của CSS cùng với các bộ chọn mở
rộng khác
⚫ Kết quả trả về của tác vụ lựa chọn phần tử trong jQuery là một đối
tượng jQuery
− Đối tượng jQuery này có thể đại diện cho 0 hoặc nhiều phần tử trong tài liệu
− Sử dụng thuộc tính .length để xác định số lượng phần tử trong tài liệu đươc lựa
chọn. Ví dụ: $('div').length trả về số lượng thẻ <div> trong trang web
− Để truy xuất phần tử DOM từ đối tượng jQuery:
$( "#foo" )[ 0 ]; // Equivalent to document.getElementById( "foo" )
$( "#foo" ).get( 0 ); // Identical to above, only slower
Các bộ chọn cơ bản
⚫ $('p'); → Chọn tất cả các phần tử <p> trong tài liệu
⚫ $('*'); → Chọn tất cả các phần tử trong tài liệu
⚫ $('.status'); → Chọn các phần tử có class là status
⚫ $('#header'); → Chọn phần tử có id là header
⚫ $('p, li, .status, #nav'); → Chọn tất cả các phần tử <p> và <li>, tất cả các
phần tử với class là status và phần tử với id là nav.

Các bộ chọn phân cấp
⚫ $('#footer span'); → Chọn tất cả các phần tử <span> là hậu duệ của
phần tử có id là footer
⚫ $('ul > li'); → Chọn tất cả các phần tử <li> là con trực tiếp của các phần
tử <ul>
⚫ $('h2 + p'); → Chọn các phần tử <p> theo ngay sau một phần tử <h2>
⚫ $('h2 ~ p'); → Chọn phần tử <p> theo sau và có cùng cha với phần tử
<h2> (phần tử anh em)
⚫ ...

Các bộ chọn dựa trên thuộc tính
⚫ $('a[href ]'); → Chọn các phần tử <a> có thuộc tính href
⚫ $('a[href="http://mrkn.co/f/271"]'); → Chọn các phần tử <a> có thuộc
tính href có giá trị là http://mrkn.co/f/271
⚫ $('a[href*="goo.gl"]'); → Chọn các phần tử <a> có thuộc tính href có
chứa "goo.gl"
⚫ $('a[href^="http://bit.ly"]'); → Chọn các phần tử <a> có thuộc tính href
bắt đầu với "http://bit.ly"
⚫ ...

Các bộ chọn liên quan đến form
⚫ $(':button');
⚫ $(':checkbox');
⚫ $(':file');
⚫ $(':image');
⚫ $(':password');
⚫ $(':submit');
⚫ …
→ Chọn tất cả các <input> có thuộc tính type tương ứng

Các bộ lọc dựa trên vị trí
⚫ JQuery cho phép lọc các phần tử được lựa chọn dựa trên vị trí của
chúng trong tập hợp
− $('.article:eq(2)'); → Chọn phần tử thứ 3 có class là article
− $('.article:gt(1)'); → Trong các phần tử có class là article, chọn tất cả các phần tử
theo sau phần tử thứ 2 (có chỉ số >= 2)
− $('.article:lt(3)'); → Chọn 3 phần tử đầu tiên có class là article
− $('.article:first'); → Chọn phần tử đầu tiên có class là article
− $('.article:even') → Chọn các phần tử ở vị trí chẵn trong tất cả các phần tử có
class là article.
− ...
Các bộ lọc khác
⚫ $('p:contains("Marakana")'); → Chọn các phần tử <p> chứa (trực tiếp hoặc
gián tiếp) chuỗi "Marakana"
⚫ $('div:has(h2)'); → Chọn các phần tử <div> có ít nhất một phần tử <h2>
là hậu duệ
⚫ $('option:not(:selected)'); → Chọn các phần tử <option> không có
thuộc tính selected
⚫ $('ul li:nth-child(2)'); → Chọn các phần tử <li> là con thứ hai của phần
tử <ul>
⚫ $('p:hidden'); $('p:visible');
→ Chọn các phần tử <p> đang ẩn/hiện 22
Duyệt DOM
⚫ Bắt đầu với một đối tượng jQuery là kết quả trả về của một tác vụ lựa
chọn, ta có thể thực hiện duyệt DOM
⚫ JQuery cung cấp các phương thức để chọn các phần tử con, cha,
anh/em của từng phần tử trong tập hợp trả về
− $('span').parent(); → Chọn phần tử cha trực tiếp của từng thẻ <span>
− $('.article').children('p'); → Chọn các phần tử <p> là con trực tiếp của các phần
tử có class là article
− $('.article').find('p'); → Chọn các phần tử <p> là hậu duệ của các phần tử có
class là article
− $('h2').next('p'); → Chọn các phần tử <p> theo ngay phía sau các phần tử
<h2> Học phần: Công nghệ web (CT275) 23
Các phương thức lọc
⚫ Bắt đầu với một đối tượng jQuery đại điện cho một tập các phần tử
được chọn, ta có thể sử dụng các phương thức lọc để lấy về một tập
con các phần tử này
− $('#content h2').first(); → Chọn phần tử đầu tiên trong các phần tử <h2> được
chứa trong một phần tử có id là content
− $('#menu > li').eq(1); → Chọn các phần tử <li> thứ 2 nằm trong phần tử có id là
menu
− $('div').not('.article'); → Chọn các phần tử <div> mà giá trị thuộc tính class không
là article
− $('li').has('ul'); → Chọn các phần tử <li> có phần tử <ul> là hậu duệ

Xâu chuỗi hàm trong jQuery
$('.status').css('backgroundColor','yellow')
.prop('title', 'Training by Marakana');
→ Chọn các phần tử có class là status, đặt màu nền cho các phần tử được chọn
là vàng và đặt giá trị thuộc tính title
$('#selected').css('backgroundColor', 'yellow')
.parent().addClass('current');
→ Chọn phần tử có id là selected, đặt màu nền cho phần tử được chọn là vàng
và đặt thuộc tính class thành current cho phần tử cha

03 | Thao tác các phần tử DOM

Tạo phần tử
let menuli1 = $('<li class="menu-li1">Italian Food</li>');
hoặc
let menuli1 = $('<li/>', {

'class': 'menu-li1',
'text': 'Italian Food'
});

Chèn các phần tử
⚫ Có nhiều cách để chèn phần tử vào trang. Các phần tử có thể được
chèn vào:
− Trước một phần tử đã tồn tại: before, insertBefore
− Sau một phần tử đã tồn tại: after, insertAfter
− Trong một phần tử chứa, tại vị trí đầu tiên: prepend, prependTo
− Trong một phần tử chứa, tại vị trí cuối cùng: append, appendTo

Chèn một phần tử vào trước một phần tử khác
⚫ $(target).before(contentToBeInserted),
$(contentToBeInserted).insertBefore(target)
29
Chèn một phần tử vào như là phần tử con cuối
cùng của cha
⚫ $(parent).append(child), $(child).appendTo(parent)
30
Append vs Prepend vs Before vs After

Di chuyển các phần tử
⚫ Các kỹ thuật sử dụng cho việc chèn phần tử vào trang có thể được
dùng để di chuyển phần tử
− Điểm khác biệt duy nhất là các phần tử được chèn vào là kết quả của một sự lựa
chọn phần tử trước đó
⚫ Ví dụ: di chuyển phần tử đầu tiên có class là article đến vị trí con cuối
cùng của một phần tử có id là section
$('#section').append($('.article:first'));
$('.article:first').appendTo($('#section'));

Sao chép các phần tử
let article=$('.article:first').clone(); // (1)

$('#section').append(article); // (2)
(1) Biến article tham chiếu đến một bản sao của phần tử
(2) Thực hiện chèn bản sao của vào vị trí thích hợp; phần tử ban đầu
không di chuyển

Loại bỏ các phần tử
⚫ JQuery hỗ trợ 2 phương thức để loại bỏ các phần tử ra khỏi trang:
.detach() và .remove()
− Sử dụng .detach() nếu trong tương lai các phần tử bị loại bỏ có thể được “gắn”
trở lại trang
− Sử dụng .remove() khi không sử dụng đến phần tử bị loại bỏ nữa

Thay thế các phần tử
⚫ Để thay thế các phần tử trong trang ta có thể sử dụng: .replaceWith()
hoặc .replaceAll()
35
Nội dung phần tử: HTML vs text
⚫ Hai phương thức có thể được sử dụng để truy xuất nội dung phần tử:
.html() và .text()
− $('.article').html(); → Trả về chuỗi HTML nằm trong phần tử đầu tiên của tập hợp
các phần tử khớp với bộ chọn
− $('.article').text(); → Trả về chuỗi văn bản tổng hợp từ các văn bản nội dung của
từng phần tử trong tập hợp (bao gồm cả hậu duệ của chúng nếu có)
⚫ Có thể dùng 2 hàm trên để đặt nội dung cho các phần tử
− $('.header').html('<b>cool</b>'); → nội dung được xem là HTML
− $('.header').text('<b>cool</b>'); → nội dung được xem là văn bản
Chú ý: Ta sử dụng .val() để truy xuất giá trị các phần tử <input> thay vì dùng .text() 36
Thuộc tính thẻ HTML
⚫ JQuery cung cấp hàm .attr() để truy xuất thuộc tính (attribute) của thẻ
HTML
− .attr(attributeName); → đọc giá trị thuộc tính của phần tử đầu tiên trong tập hợp
các phần tử được chọn
− .attr(attributeName, attributeValue); → thay đổi giá trị thuộc tính của từng phần
tử trong tập hợp các phần tử được chọn

Thuộc tính DOM
⚫ JQuery cung cấp hàm .prop() để truy xuất thuộc tính (property) DOM
− .prop(propertyName); → đọc giá trị thuộc tính của phần tử đầu tiên trong tập hợp
− .prop(propertyName, propertyValue); → thay đổi giá trị thuộc tính của từng phần tử
trong tập hợp các phần tử được chọn
⚫ .prop() vs .attr()
− Trong hầu hết các trường hợp, chúng ta muốn làm việc với các thuộc tính của DOM,
do đó nên dùng .prop()
− .prop() được khuyến khích sử dụng khi truy xuất các thuộc tính sau: selectedIndex,
tagName, nodeName, nodeType, ownerDocument, defaultChecked, hoặc
defaultSelected
Thuộc tính CSS của phần tử
⚫ Hàm .css() trong jQuery được dùng để truy xuất các thuộc tính CSS của
phần tử
− .css(propertyName); → đọc giá trị thuộc tính của phần tử đầu tiên trong tập hợp
− .css(propertyName, propertyValue); → thay đổi giá trị thuộc tính của từng phần
tử trong tập hợp các phần tử được chọn
$('div').css('backgroundColor');
$('.article').css({
'backgroundColor': '#C2F5BF',
'borderColor': 'yellow',
'marginBottom': '10px'
});
Thao tác với các lớp CSS
⚫ .addClass(className)
⚫ .removeClass(className)
⚫ .toggleClass(className)
⚫ .hasClass(className)

Kích thước của phần tử
⚫ .height()/.width() → Chiều dài/rộng của phần tử
⚫ .innerHeight()/.innerWidth() → Chiều dài/rộng + padding
⚫ .outerHeight()/.outerWidth() → Chiều dài/rộng + padding, border và có
thể + margin (nếu nhận tham số true)


Tổng quan về các sự kiện
⚫ Khi người dùng tương tác với trang web, rất nhiều sự kiện có thể xảy ra
− Nhấp chuột vào một phần tử, gõ văn bản, cuộn trang, di chuyển chuột đến
phần tử,...
⚫ JS cho phép lập trình viên phát hiện một sự kiện và thực thi mã lệnh
ứng với sự kiện đó
− Đoạn mã lệnh này được biết đến như là một trình xử lý sự kiện (event handler)
hoặc một callback

Gắn kết trình xử lý sự kiện
⚫ Để xử lý một sự kiện, lập trình viên thực hiện gắn kết (bind) một hàm xử
lý sự kiện cho một sự kiện cụ thể
$('.header').on('click', function () {
// Đoạn mã lệnh xử lý sự kiện
});
$('.header').on('click mouseleave', function () {
});
$('.article ).on('click', '.header', function () {

});
$(document).on('click', '.btn-control', function () {
}); 44
Gắn kết các sự kiện thường gặp
$('.header').click(function () {
$(this).css('background-color', 'yellow');
});

Loại bỏ trình xử lý sự kiện
⚫ .off('click') → Loại bỏ các trình xử lý sự kiện click
⚫ .off('click', handleClick) → Loại bỏ một hàm xử lý sự kiện
⚫ .off() → Loại bỏ tất cả các trình xử lý sự kiện
⚫ Hàm .one() (cách dùng tương tự như hàm .on()): xử lý sự kiện một lần
duy nhất

Đối tượng sự kiện (event object)
⚫ Mỗi hàm xử lý sự kiện nhận vào một đối tượng chứa các thông tin liên
quan đến sự kiện làm tham số
⚫ Một số thuộc tính và phương thức quan trọng:
− pageX, pageY: tọa độ vị trí trỏ chuột khi sự kiện xảy ra
− target: phần tử DOM khởi tạo sự kiện
− type: loại sự kiện (click, mousedown,...)
− data: dữ liệu được truyền vào khi gắn kết sự kiện
− preventDefault(): ngăn ngừa hành xử mặc định của sự kiện

Đối tượng sự kiện (event object)
// Preventing a link from being followed
$("a").click(function(eventObject) {
let elem = $(this);
if (elem.prop("href").match(/evil/) ) {
eventObject.preventDefault();
elem.addClass("evil");
} // Event setup using the .on() method with data
}); $("input").on(
"change",
{ foo: "bar" }, // Associate data with event binding
function(eventObject) {
console.log("An input value has changed!",
eventObject.data.foo);
} 48
);
05 | Tạo các hiệu ứng

Các hiệu ứng trong jQuery
⚫ JQuery hỗ trợ các hiệu ứng thường gặp trên web
− Hiệu ứng ẩn hiện (hide/show)
− Hiệu ứng làm mờ (fade in/fade out)
− Hiệu ứng trượt (slide up/slide down)
− Các hiệu ứng tùy biến khác (custom animations)
⚫ Các hàm hiệu ứng của jQuery nhận vào 2 tham số tùy chọn
− Tốc độ hiệu ứng (“slow”, “fast” hoặc millisecond)
− Một hàm callback, sẽ được gọi khi hiệu ứng hoàn thành

Các hiệu ứng trong jQuery
$(selector).hide(speed, callback); $(selector).slideUp(speed, callback);
$(selector).show(speed, callback); $(selector).slideDown(speed, callback);
$(selector).toggle(speed, callback); $(selector).slideToggle(speed, callback);
$(selector).fadeIn(speed, callback); $(selector).animate({params}, speed, callback);

$(selector).fadeOut(speed, callback);
$(selector).fadeToggle(speed, callback);

Tạo các hiệu ứng – Ví dụ: toggle()

Tạo các hiệu ứng – Ví dụ: animate()

06 | Làm việc với Ajax

Ajax là gì?
⚫ Ajax = Asynchronous JavaScript and XML
⚫ Ajax là một sự kết hợp các công nghệ cho nhà phát triển web thực
thiện các lời gọi bất đồng bộ đến máy chủ từ JavaScript
− XML: định dạng trao đổi dữ liệu. Tuy nhiên, ngày nay, định dạng JSON được sử
dụng phổ biến hơn
− Đối tượng XMLHttpRequest được dùng để tạo các lời gọi bất đồng bộ + cơ chế
gắn kết sự kiện cho phép xử lý dữ liệu trả về khi nó sẵn sàng
− fetch(): API được hỗ trợ bởi các trình duyệt, được xây dựng dựa tính năng hiện
đại của JavaScript là Promise, hỗ trợ xử lý tốt hơn các tác vụ bất đồng bộ

JSON là gì?
⚫ JSON = JavaScript Object Notation
− Một định dạng trao đổi dữ liệu dựa trên văn bản
⚫ Định dạng JSON có cú pháp tương đồng với cú pháp tạo các đối tượng
trong JavaScript
− Dễ dàng chuyển đổi dữ liệu JSON ↔ các đối tượng JavaScript

Định dạng JSON
⚫ Khóa phải được đặt trong dấu ngoặc
kép
⚫ Giá trị có thể thuộc vào các kiểu dữ
liệu sau: Number, String, Boolean,
Array, Object, null
⚫ Chỉ hỗ trợ dữ liệu dạng khóa-giá trị,
không hỗ trợ ghi chú (comment). Nếu
cần ghi chú có thể thêm ghi chú dạng
khóa-giá trị

AJAX với jQuery
⚫ JQuery cung cấp một số hàm cho phép nhà phát triển web
làm việc với Ajax một cách dễ dàng hơn
− $(selector).load()
Tải dữ liệu từ máy chủ và thay đổi nội dung HTML của phần tử bằng dữ liệu trả về
− $.get() / $.post()
Tải dữ liệu từ máy chủ sử dụng HTTP GET/POST
− $.ajax()
Gửi một yêu cầu HTTP bất đồng bộ đến máy chủ
− $.getJSON()
Tải dữ liệu JSON về từ server dùng HTTP GET 58
Phương thức load()
⚫ $(selector).load(URL, data, callback);
$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr) {

if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});

Phương thức get()
⚫ $.get( url [, data ] [, success ] [, dataType ] )
$.get( "test.php", { name: "John", time: "2pm" } )
.done(function( data ) {
alert( "Data Loaded: " + data );
});
// The returned data is in JSON format

.get( "test.php", function( data ) {
$( "body" )
.append( "Name: " + data.name ) // John
.append( "Time: " + data.time ); // 2pm
}, "json" );
Phương thức ajax()
⚫ $.ajax({name:value, name:value, ... })
$.ajax({ $.ajax({
method: "POST", url: "test.html",
url: "some.php", cache: false
data: { name: "John", location: "Boston" } })
}) .done(function( html ) {
.done(function( msg ) { $( "#results" ).append( html );
alert( "Data Saved: " + msg ); });
});
61
Phương thức getJSON()
⚫ $.getJSON( url [, data ] [, success ] )
$.getJSON( "ajax/test.json", function( data ) {
let items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
62
07 | Sử dụng các plugin của jQuery

Plugin
⚫ Một plugin là một tập các mã lệnh được thêm nhằm mở rộng
chức năng một phần mềm/thư viện
⚫ JQuery cho phép người dùng tạo các plugin riêng của mình
hoặc sử dụng các plugin sẵn có
− Các chức năng sau có thể được tìm thấy ở các plugin của jQuery: tạo hiệu ứng
trình chiếu, tạo các hiệu ứng đặc biệt, hợp lệ hóa dữ liệu của form, tự động điền
thông tin cho form, mở rộng khả năng tương tác với bảng dữ liệu,...
− Thư viện các plugin: https://plugins.jquery.com/

Một số plugin jQuery
⚫ Plugin hỗ trợ làm việc với ảnh/trình chiếu ảnh
− ColorBox (http://www.jacklmoore.com/colorbox/)
− Cycle (http://malsup.com/jquery/cycle/download.html)
− Jcrop (http://deepliquid.com/content/Jcrop_Download.html)
⚫ Làm việc với form:
− Jquery Validation (https://jqueryvalidation.org/)
⚫ Làm việc với bảng:
− DataTable (https://www.datatables.net/)

Câu hỏi?
Thư viện jQuery

01 | Giới thiệu về jQuery 05 | Tạo các hiệu ứng
02 | Lựa chọn các phần tử DOM 06 | Làm việc với Ajax
03 | Thao tác các phần tử DOM 07 | Sử dụng các plugin của jQuery

2 Jquery

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2 Jquery

Uploaded by

Copyright:

Available Formats

Học phần: Công nghệ web (CT275)

Thư viện jQuery

Bùi Võ Quốc Bảo | Bộ môn CNTT

Học phần: Công nghệ web (CT275) 1

Học phần: Công nghệ web (CT275) 2

Học phần: Công nghệ web (CT275) 3

Thư viện jQuery

02 | Lựa chọn các phần tử DOM 06 | Làm việc với Ajax

Học phần: Công nghệ web (CT275) 4

Bùi Võ Quốc Bảo | Bộ môn CNTT

Học phần: Công nghệ web (CT275) 5

Học phần: Công nghệ web (CT275) 6

Học phần: Công nghệ web (CT275) 7

Học phần: Công nghệ web (CT275) 8

Học phần: Công nghệ web (CT275) 9

Học phần: Công nghệ web (CT275) 10

− Để thuận tiện, ta có thể sử dụng tên $ thay vì 'jQuery'

Học phần: Công nghệ web (CT275) 11

Bùi Võ Quốc Bảo | Bộ môn CNTT

Học phần: Công nghệ web (CT275) 13

Học phần: Công nghệ web (CT275) 14

Học phần: Công nghệ web (CT275) 15

Học phần: Công nghệ web (CT275) 17

Học phần: Công nghệ web (CT275) 18

Học phần: Công nghệ web (CT275) 19

Học phần: Công nghệ web (CT275) 20

Học phần: Công nghệ web (CT275) 24

Học phần: Công nghệ web (CT275) 25

Bùi Võ Quốc Bảo | Bộ môn CNTT

Học phần: Công nghệ web (CT275) 26

let menuli1 = $('<li class="menu-li1">Italian Food</li>');

let menuli1 = $('<li/>', {

Học phần: Công nghệ web (CT275) 27

Học phần: Công nghệ web (CT275) 28

Học phần: Công nghệ web (CT275) 31

Học phần: Công nghệ web (CT275) 32

let article=$('.article:first').clone(); // (1)

Học phần: Công nghệ web (CT275) 33

Học phần: Công nghệ web (CT275) 34

Học phần: Công nghệ web (CT275) 37

Học phần: Công nghệ web (CT275) 40

Học phần: Công nghệ web (CT275) 41

Bùi Võ Quốc Bảo | Bộ môn CNTT

Học phần: Công nghệ web (CT275) 42

Học phần: Công nghệ web (CT275) 43

$('.article ).on('click', '.header', function () {

Học phần: Công nghệ web (CT275) 45

Học phần: Công nghệ web (CT275) 46

Học phần: Công nghệ web (CT275) 47

Bùi Võ Quốc Bảo | Bộ môn CNTT

Học phần: Công nghệ web (CT275) 49

Học phần: Công nghệ web (CT275) 50

$(selector).fadeIn(speed, callback); $(selector).animate({params}, speed, callback);

Học phần: Công nghệ web (CT275) 51

Học phần: Công nghệ web (CT275) 52

Học phần: Công nghệ web (CT275) 53

Bùi Võ Quốc Bảo | Bộ môn CNTT

Học phần: Công nghệ web (CT275) 54

Học phần: Công nghệ web (CT275) 55

Học phần: Công nghệ web (CT275) 56

Học phần: Công nghệ web (CT275) 57

$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr) {

Học phần: Công nghệ web (CT275) 59