Tìm kiếm
Tìm kiếm
0

Chưa có sản phẩm trong giỏ hàng.

jQuery

jQuery

  • Chuyên mục:
  • LTH
  • 331 lượt xem

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 <script> kết nối file jquery nội dung như sau:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="jquery.js"></script>
<script>
//Code jquery viết ở đây...
</script>
</head>

<body>
//Code html viết ở đây...
</body>
</html>

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.

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

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...
});

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

$(function(){
//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...
});

Ví dụ

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('p').css('color','#ff0000');
});
</script>
</head>

<body>
<p>Học jQuery</p>
</body>
</html>

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

Học jQuery

Bộ chọn (Selectors)

Hàm jQuery Mô tả
$(‘*’) Chọn tất cả các thành phần có trong văn bản HTML, khi sử dụng bộ chọn này có thể sẽ khiến quá trình xử lý của một số trình duyệt chậm lại.
$(‘tag‘) Chọn thành phần theo từng tag cụ thể.
$(‘tag.tênclass‘) Chọn thành phần theo từng class cụ thể.
$(‘tag#tênid‘) Chọn thành phần theo từng id cụ thể.
$(‘selector1, selector2, selectorN‘) Chọn nhiều bộ chọn giúp bạn có thể chọn một lúc nhiều bộ chọn khác nhau, tốn ít thời gian hơn cho việc chọn từng bộ chọn.
$(‘parent > child‘) Chọn thành phần con dựa theo thành phần cha.
$(‘tag:eq()’) Chọn thành phần với một chỉ số n cụ thể.
$(‘tag:gt()’) Chọn các thành phần với chỉ số lớn hơn chỉ số n.
$(‘tag:lt()’) Chọn các thành phần với chỉ số nhỏ hơn chỉ số n.
$(‘tag:even’) Chọn các phần tử ở vị trí lẻ.
$(‘tag:odd’) Chọn các phần tử ở vị trí chẵn.
$(‘tag:first’) Chọn phần tử ở vị trí đầu tiên.
$(‘tag:last’) Chọn phần tử ở vị trí cuối cùng.
$(‘tag:first-child’) Chọn các phần tử con ở vị trí đầu tiên.
$(‘tag:first-of-type’) Chọn thành phần con đầu tiên hoặc duy nhất trong các thành phần cha.
$(‘tag:last-child’) Chọn các phần tử con ở vị trí cuối cùng.
$(‘tag:last-of-type’) Chọn thành phần con cuối cùng hoặc duy nhất trong các thành phần cha.
$(‘tag:nth-child(n)’) Chọn thành phần thứ “n” trong thành phần cha, gốc tính được tính từ thành phần đầu tiên trở đi.
$(‘tag:nth-last-child(n)’) Chọn thành phần thứ “n” trong thành phần cha, gốc tính được tính từ thành phần cuối cùng trở lại.
$(‘tag:nth-of-type(n)’) Chọn thành phần thứ “n”, gốc tính được tính từ thành phần đầu tiên trở đi.
$(‘tag:nth-last-of-type()’) Chọn thành phần thứ “n”, gốc tính được tính từ thành phần cuối cùng trở lại.
$(‘tag:only-child’) Chọn thành phần con trong các thành phần cha, khi thành phần cha có mỗi thành phần con là chính nó, không được chứa thành phần con khác.
$(‘tag:only-of-type’) Chọn thành phần con trong các thành phần cha, khi thành phần cha có một thành phần con là chính nó.
$(‘tag:animated’) Chọn các thành phần đang chuyển động.
$(‘tag[attribute]’) Chọn các thành phần có sử dụng cùng thuộc tính.
$(‘tag[attribute=”value“]’) Chọn thành phần có thuộc tính với giá trị xác định.
$(‘tag[attribute!=”value“]’) Chọn những thành phần ngoài thành phần chứa thuộc tính với giá trị xác định.
$(‘tag[attribute|=”value“]’) Chọn thành phần có thuộc tính với giá trị xác định, hoặc một chuỗi với giá trị bắt đầu bằng value-.
$(‘tag[attribute^=”value“]’) Chọn thành phần có thuộc tính với giá trị xác định, hoặc một chuỗi với giá trị bắt đầu bằng value.
$(‘tag[attribute$=”value“]’) Chọn thành phần có thuộc tính với giá trị xác định, hoặc một chuỗi với giá trị kết thúc bằng value.
$(‘tag[attribute*=”value“]’) Chọn thành phần có thuộc tính với giá trị đặc biệt bằng value.
$(‘tag[attribute~=”value“]’) Chọn thành phần có thuộc tính với giá trị biệt bằng value riêng lẻ, chỉ chọn các giá trị nào được viết cách nhau bằng khoảng trắng.
$(‘tag:lang(language)’) Chọn các thành phần có sử dụng cùng thuộc tính lang với language xác định.
$(tag[bộ chọn thuộc tính 1][bộ chọn thuộc tính n]) Chọn nhiều các thành phần với từng bộ chọn cụ thể
$(‘tag:parent’) Chọn thành phần có chứa ít nhất một thành phần con (text cũng có thể xem là thành phần con).
$(‘tag:empty’) Chọn thành phần không có chứa bất kỳ thành phần nào, kể cả text.
$(‘tag:text’) Chọn thành phần input có thuộc tính type với giá trị text.
$(‘tag:button’) Chọn thành phần input có thuộc tính type với giá trị button, hoặc tag button.
$(‘tag:checkbox’) Chọn thành phần input có thuộc tính type với giá trị checkbox.
$(‘tag:checked’) Chọn thành phần có thuộc tính checked.
$(‘tag:disabled’) Chọn thành phần có thuộc tính disabled.
$(‘tag:enabled’) Chọn thành phần không có thuộc tính disabled.
$(‘tag:file’) Chọn thành phần có thuộc tính type với giá trị file.
$(‘tag:focus’) Chọn thành phần khi được focus.
$(‘tag:hidden’) Chọn tất cả các thành phần không hiển thị, không dùng cho input với thuộc tính type=”hidden”.
$(‘tag:image’) Chọn thành phần input có thuộc tính type với giá trị image.
$(‘tag:input’) Chọn thành phần thuộc về form như: input, select, textarea và button.
$(‘tag:password’) Chọn thành phần input có thuộc tính type với giá trị password.
$(‘tag:radio’) Chọn thành phần input có thuộc tính type với giá trị radio.
$(‘tag:reset’) Chọn thành phần input có thuộc tính type với giá trị reset.
$(‘tag:selected’) Chọn thành phần select.
$(‘tag:submit’) Chọn thành phần input có thuộc tính type với giá trị submit.
$(‘tag:visible’) Chọn thành phần đang nhìn thấy (visible), click vào các thành phần để hiểu rõ hơn.
$(‘tag:root’) Chọn thành phần gốc của văn bản, thành phần gốc chính là tag html.
$(‘tag:has(selector)’) Chọn thành phần có chứa ít nhất một phần tử phù hợp với quy định chọn.
$(‘tag:header’) Chọn thành phần headline.
$(‘prev + next‘) Chọn thành phần kế tiếp ngay sau thành phần trước.
$(‘prev ~ siblings‘) Chọn tất cả các thành phần kế tiếp ngay sau thành phần trước.
$(‘tag:not(selector)’) Không chọn bộ chọn này.
$(‘tag:contains(text)’) Chọn thành phần có chứa text được chỉ định.

Hàm xử lý HTML

Hàm jQuery Mô tả
.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.
.remove() Loại bỏ các thành phần được xác định.
.addClass() thêm class cho thành phần.
.removeClass()  xóa class của thành thành phần.
.after() Chèn nội dung vào ngay sau mỗi thành phần đã có.
.before()  Chèn nội dung vào ngay trước mỗi thành phần đã có.
.insertAfter() Chèn hoặc di chuyển một thành phần vào ngay sau mục tiêu được chọn.
.insertBefore() Chèn hoặc di chuyển một thành phần vào ngay trước mục tiêu được chọn.
.append() Chèn nội dung vào trong thành phần đã có, sắp xếp ở vị trí đầu.
.appendTo() Chèn nội dung vào trong thành phần đã có, sắp xếp ở vị trí sau cùng.
.attr() Xác định thuộc tính của thành phần.
.html() Lấy hoặc gán nội dung HTML cho thành phần.
.text() Lấy nội dung text của thành phần, hoặc thay đổi nội dung text cho thành phần.
.val() Lấy giá trị của thành phần, hoặc thay đổi giá trị cho thành phần.
.change() xác định một thành phần đã được thay đổi.
.clone() Tạo một bản sao (copy) cho thành phần.
.width() Xác định hoặc gán giá trị chiều rộng cho thành phần.
.height() Xác định hoặc gán giá trị chiều cao cho thành phần.

Hiệu ứng (effects)

Hàm jQuery Mô tả
.fadeIn() Hiển thị các thành phần phù hợp với hiệu ứng rõ dần (fade in).
.fadeOut() Ẩn các thành phần phù hợp với hiệu ứng mờ dần (fade).
.fadeToggle() Luân phiên hiển thị hoặc biến mất thành phần.
.slideDown() Hiển thị các thành phần phù hợp với hiệu ứng chuyển động trượt (slide).
.slideUp() Ẩn thị các thành phần phù hợp với hiệu ứng chuyển động trượt (slide).
.slideToggle() Hiển thị và ẩn các thành phần phù hợp với hiệu ứng chuyển động trượt (slide).
.toggle() Hiển thị và ẩn các thành phần phù hợp với hiệu ứng chuyển động trượt
.toggleClass() Thêm, xóa class của thành thành phần.
.hide()  Ẩn thành phần.
.show() Hiện thành phần.
.animate() Thực hiện một chuyển động.
.setTimeout() xác định thời gian sau bao lâu thì thực hiện hành động.
.setInterval() xác định thời gian sau bao lâu thì thực hiện hành động, và hành động này được thực hiện liên tục.

Sự kiện (events)

Hàm jQuery Mô tả

.click()

 Kích hoạt sự kiện click trên thành phần hoặc ràng buộc xử lý một sự kiện tới sự kiện click trong javascript.

.hover()

 Kích hoạt sự kiện hover trên thành phần hoặc ràng buộc xử lý một sự kiện tới sự kiện hover trong javascript.

.bind()

 Được sử dụng để đính kèm xử lý một sự kiện cho thành phần.

.resize()

 Ràng buộc một xử lý sự kiện resize hoặc kích hoạt sự kiện trên thành phần.

Tương tác các thành phần

Hàm jQuery Mô tả

.css()

 Thêm style cho thành phần, hoặc lấy giá trị style của thành phần.

.each()

 Thực hiện một hành động cho mỗi phần tử.

.find()

 Tìm thành phần trong thành phần cha.

.first()

 Xác định thành phần đầu tiên trong các thành phần phù hợp.

.last()

 Xác định thành phần cuối cùng trong các thành phần phù hợp.

.length

 Xác định số lượng thành phần trong jQuery Object.

Ajax

Hàm jQuery Mô tả
.ajaxComplete()  
.ajaxError()  
.ajaxSend()  
.ajaxStart()  
.ajaxStop()  
.ajaxSuccess()  
jQuery.ajax()  
jQuery.ajaxPrefilter()  
jQuery.ajaxSetup()  
jQuery.ajaxTransport()  
jQuery.get()  
jQuery.getJSON()  
jQuery.getScript()  
jQuery.post()  
.load()  

Quà tặng WordPress trị giá $1600

Kể từ 2020, AZDIGI chính thức áp dụng tặng kèm bản quyền theme và plugin WordPress, dành riêng cho khách hàng như WP Rocket, Rank Math Pro, WP Astra Lifetime,…với tổng trị giá quà tặng lên đến $1600 và luôn được cập nhật mỗi năm.

Chi tiết
Image

Bắt đầu thương hiệu với tên miền riêng của bạn

Tên miền quốc tế .COM chỉ từ 275k/năm, tên miền .VN chỉ từ 360.000/năm.
Đăng ký dễ dàng, thao tác đăng ký hoàn toàn trực tuyến, thủ tục nhanh gọn, và kích hoạt tự động ngay trong 15 phút kể từ khi AZDIGI nhận được thanh toán.

Chi tiết
Image

Bài viết liên quan

Thuộc tính quotes

Thuộc tính quotes

  • Chuyên mục: CSS
  • LTH
  • 937 lượt xem

Định nghĩa và sử dụng Thuộc tính quotes thiết lập các loại dấu bao ngoài khi nhúng một trích dẫn. Cấu trúc tag { quotes: giá trị; } Với thuộc tính và giá trị như sau: Thuộc tính giá trị Mô tả quotes none Không hiển thị các loại dấu bao ngoài khi nhúng một […]

Chi tiết
Chi tiết
Thuộc tính max-width

Thuộc tính max-width

  • Chuyên mục: CSS
  • LTH
  • 842 lượt xem

Định nghĩa và sử dụng Thuộc tính max-width thiết lập chiều rộng tối đa cho thành phần. Cấu trúc tag { max-width: giá trị; } Với thuộc tính và giá trị như sau: Thuộc tính giá trị Mô tả max-width đơn vị Chiều cao tính từ mép bên trái ngoài cùng của thành phần, đơn vị có […]

Chi tiết
Chi tiết
Thuộc tính width

Thuộc tính width

  • Chuyên mục: CSS
  • LTH
  • 734 lượt xem

Định nghĩa và sử dụng Thuộc tính width thiết lập chiều rộng cho thành phần. Chiều rộng này không bao gồm: border, padding, margin Cấu trúc tag { width: giá trị; } Với thuộc tính và giá trị như sau: Thuộc tính giá trị Mô tả width đơn vị Định rõ đơn vị cho chiều rộng, đơn vị có thể […]

Chi tiết
Chi tiết
Hướng dẫn cài đặt XAMPP

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

  • Chuyên mục: PHP
  • LTH
  • 513 lượt xem

Xampp là một trong những phần mềm được nhiều lập trình viên sử dụng để thiết lập website theo ngôn ngữ PHP. XAMPP có công dụng thiết lập web server có cài đặt sẵn các công cụ như PHP, Apache, MySQL… Xampp sở hữu thiết kế giao diện thân thiện với người dùng, cho phép các lập trình viên có thể đóng mở hoặc reboot các tính năng của server mọi lúc. Ngoài ra, Xampp cũng được xây dựng theo source code mở.

Chi tiết
Chi tiết
Tag col

Tag col

  • Chuyên mục: HTML
  • LTH
  • 628 lượt xem

Định nghĩa và sử dụng Tag col xác định giá trị thuộc tính cho một hoặc nhiều cột trong table Tag col hữu ích trong việc định dạng chung cho từng cột, thay vì đình dạng riêng, lặp lại cho mỗi hàng Tag col chỉ được sử dụng bên trong tag table hay colgroup Sự […]

Chi tiết
Chi tiết
Xuất / Nhập dữ liệu trong WordPress

Xuất / Nhập dữ liệu trong WordPress

Xuất nhập dữ liệu là 2 chức năng hữu ích nếu như bạn muốn di chuyển hoặc khôi phục dữ liệu. Dữ liệu là tài sản rất cần được bảo vệ, đặc biệt là với các bài viết mà bạn dày công xuất bản. Việc sao lưu nó định kỳ là rất cần thiết, để lỡ có chuyện gì thì không phải ngồi gõ lại từ đầu.

Chi tiết
Chi tiết
Xóa sản phẩm thành công. Thêm vào giỏ hàng thành công.