Hướng dẫn include html jquery - bao gồm jquery html

• Trang chủ
• Tham khảo
• jQuery
• Hướng dẫn cài đặt và sử dụng

Hướng dẫn cài đặt

• Chúng ta có thể download phiên bản mới nhất tại: http://jquery.com/download/, sử dụng tag kết nối file jquery nội dung như sau:

Tiêu đề //Code jquery viết ở đây...

//Code html viết ở đây...
//Code html viết ở đây...

Nếu không muốn download, chúng ta có thể kết nối file jquery tới file html thông qua một số cách sau:

• Kết nối trực tiếp từ trang web jquery với phiên bản mới nhất: https://code.jquery.com/jquery-latest.js.

• Sử dụng CDN Google: tất cả phiên bản jquery có sẵn tại đây: https://developers.google.com/speed/libraries/devguide?hl=vi#jquery
  https://developers.google.com/speed/libraries/devguide?hl=vi#jquery
• Sử dụng CDN Microsoft: tất cả phiên bản jquery có sẵn tại đây: http://www.asp.net/ajaxlibrary/cdn.ashx
  http://www.asp.net/ajaxlibrary/cdn.ashx

Hướng dẫn sử dụng

Có 2 cách viết một nội dung jquery:

• Viết nội dung jquery bên trong một $(document).ready(), điều này sẽ giúp cho đoạn script chạy sau khi các đoạn code trong file html đã được load xong, không bao gồm việc load các liên kết ngoài như image, iframe, file css, file script,...

$(document).ready(function(){//Nội dung jquery viết ở đây... });
//Nội dung jquery viết ở đây...
});

Chúng ta có thể viết gọn lại như sau:

$(function(){//Nội dung jquery viết ở đây... });
//Nội dung jquery viết ở đây...
});

• Viết nội dung jquery bên trong $(window).load(), điều này sẽ giúp cho đoạn script chạy khi toàn bộ trang web đã được load xong, bao gồm tất cả image, iframe, và cả các liên kết ngoài.

$(window).load(function(){//Nội dung jquery viết ở đây... });
//Nội dung jquery viết ở đây...
});

Ví dụ đơn giản sử dụng jquery

Html viết:

Tiêu đề $(document).ready(function(){ $('p').css('color','#ff0000'); });

hocwebchuan

hocwebchuan

Hiển thị trình duyệt:

• Thêm thành phần p với một định dạng color="red" cùng với thành phần div được định dạng thêm với thuộc tính border.
• .add(bộ chọn,context)
• Click vào "p nằm trong div" thì thành phần p này và thành phần div cha của nó sẽ được thêm class="test".
• Sau khi có jQuery - sử dụng click
• .add()

Thành phần p nằm trong div Thành phần p

• Trang chủ
• Tham khảo

jQuery

• jQuery - function

Định nghĩa và sử dụngbộ chọn)

$('div').add('p').css('color','red');
$('div').add('.test, ul li').css('color','red');

.add(html)html)

$('div').add('
tag p
').appendTo('body');

• .add(): Thêm thành phần vào thành phần đã có để cùng thực hiện một hành động.

.add(Object)Object)

$('div').add($('p').css('color','red')).css('border','1px solid blue');

• .add(): Xây dựng một đối tượng jQuery mới (đối tượng này là sự kết hợp của thành phần ban đầu và các thành phần được thêm vào), cùng nhau thực hiện hành động cụ thể nào đó.

Định nghĩa và sử dụngbộ chọn)

Html viết:

Thành phần div
Thành phần p

Hiển thị trình duyệt:

Thêm thành phần p với class="test" cùng với thành phần div được thêm vào body.p tham gia vào một hành động chèn style cùng với thành phần div.

So sánh code HTML trước và sau khi có jQuery:

Thành phần div

Html viết:

Thành phần div
Thành phần p

Hiển thị trình duyệt:

Thêm thành phần p với class="test" cùng với thành phần div được thêm vào body.style với background="#cccccc" trước, sau đó thêm thành phần p tham gia vào định dạng style chung với div.

So sánh code HTML trước và sau khi có jQuery:

.add(html)html)

Html viết:

Thành phần div

Hiển thị trình duyệt:

Thêm thành phần p với class="test" cùng với thành phần div được thêm vào body.p với class="test" cùng với thành phần div được thêm vào body.

So sánh code HTML trước và sau khi có jQuery:

.add(Object)Object)

Html viết:

Thành phần divdiv
Thành phần p

Hiển thị trình duyệt:

Thêm thành phần p với class="test" cùng với thành phần div được thêm vào body.p với một định dạng color="red" cùng với thành phần div được định dạng thêm với thuộc tính border.

So sánh code HTML trước và sau khi có jQuery:

.add(bộ chọn,context)bộ chọn,context)

Html viết:

Thành phần p nằm trong div

Thành phần p

Hiển thị trình duyệt:

Click vào "p nằm trong div" thì thành phần p này và thành phần div cha của nó sẽ được thêm class="test".p nằm trong div" thì thành phần p này và thành phần div cha của nó sẽ được thêm class="test".

So sánh code HTML trước và sau khi có jQuery: