Tạo một ứng dụng dựa trên Ajax trở nên rất đơn giản và nhanh chóng với jQuery.
jQuery ban đầu được tạo ra bởi John Resig vào đầu năm 2006. Dự án jQuery hiện được duy trì và bảo trì bởi một nhóm các nhà phát triển phân tán như một dự án mã nguồn mở.
Bạn có thể tiết kiệm rất nhiều thời gian và công sức với jQuery. Vì vậy, hãy thêm trang web này vào mục yêu thích của bạn và tiếp tục đọc
Còn rất nhiều điều bạn có thể làm với jQuery.
Danh sách không kết thúc ở đó, có rất nhiều điều thú vị khác mà bạn có thể làm với jQuery.
Có một số lợi thế tại sao một người nên chọn sử dụng jQuery:
Để bắt đầu, trước tiên hãy tải xuống một bản sao của jQuery rồi đưa nó vào dự án của chúng ta. Hai phiên bản jQuery có sẵn để tải xuống: đang vội e không nén .
Tệp không nén phù hợp hơn để phát triển hoặc gỡ lỗi; trong khi đó, tệp được rút gọn và nén được khuyến nghị cho sản xuất vì nó tiết kiệm băng thông và cải thiện hiệu suất do kích thước tệp nhỏ hơn.
Chúng tôi có thể tải xuống jQuery từ đây: https://jquery.com/download/
Khi bạn tải xuống tệp jQuery, bạn có thể thấy rằng tệp này có phần mở rộng là js, tức là tệp JavaScript. Trên thực tế, JQuery không là gì ngoài một thư viện JavaScript, vì vậy bạn có thể đưa tệp jQuery vào tài liệu HTML với phần tử giống như bạn bao gồm các tệp JavaScript thông thường.
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Hãy nhớ luôn bao gồm tệp jQuery trước tập lệnh tùy chỉnh; nếu không, các API jQuery sẽ không khả dụng khi mã jQuery của bạn cố gắng truy cập chúng.
Như bạn có thể nhận thấy, chúng tôi đã bỏ qua thuộc tính trong ví dụ trước type="text/javascript" bên trong thẻ . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiđã hoàn thành trong HTML5 và trong tất cả các trình duyệt hiện đại.
Thay vào đó, bạn có thể nhúng jQuery vào tài liệu của mình thông qua các liên kết CDN (Mạng phân phối nội dung) có sẵn miễn phí, nếu bạn không muốn tải xuống tệp.
CDN có thể mang lại lợi thế về hiệu suất bằng cách giảm thời gian tải vì chúng lưu trữ jQuery trên nhiều máy chủ trên khắp thế giới và khi người dùng yêu cầu tệp, tệp sẽ được phục vụ từ máy chủ gần nhất.
Điều này cũng có lợi thế là nếu khách truy cập trang web của bạn đã tải xuống bản sao jQuery từ cùng một CDN khi truy cập các trang web khác, thì họ sẽ không phải tải xuống lại vì bản sao này đã có trong bộ nhớ cache của trình duyệt.
Trong trường hợp này, bạn sẽ phải viết:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Ngoài CDN do dự án jquery cung cấp, bạn có thể thêm jQuery qua Google e microsoft cdn.
Sau khi đã xem các mục tiêu của thư viện jQuery và cách đưa nó vào tài liệu của bạn, giờ là lúc áp dụng jQuery vào thực tế.
Bây giờ, hãy thực hiện một thao tác jQuery đơn giản bằng cách thay đổi màu văn bản tiêu đề từ màu trướcdefinished màu đen sang màu xanh lá cây.
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Trong mã, chúng tôi đã thực hiện một thao tác jQuery đơn giản bằng cách thay đổi màu của tiêu đề, tức là phần tử sử dụng bộ chọn và phương thức css() của phần tử jQuery khi tài liệu sẵn sàng, được gọi là sự kiện tài liệu sẵn sàng.
Một câu lệnh jQuery thường bắt đầu bằng ký hiệu đô la ( $) và kết thúc bằng dấu chấm phẩy ( ;).
Trong jQuery, ký hiệu đô la ( $) chỉ là bí danh của jQuery. Hãy xem xét đoạn mã mẫu sau minh họa câu lệnh jQuery đơn giản nhất.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Ví dụ chỉ hiển thị một thông báo cảnh báo “Hello I'm a JQuery sign” cho người dùng. Hãy xem một số tính năng:
<script>: jQuery chỉ là một thư viện JavaScript, mã jQuery có thể được đặt bên trong phần tử <script>hoặc bạn có thể đặt nó trong một tệp JavaScript bên ngoài;$(document).ready(handler); được gọi là một sự kiện sẵn sàng. Nó đâu rồi handler nó là một chức năng được truyền cho phương thức sẽ được thực thi, ngay khi tài liệu sẵn sàng, tức là khi hệ thống phân cấp DOM đã được xây dựng hoàn chỉnh.Phương thức jQuery ready() nó thường được sử dụng với chức năng ẩn danh. Vì vậy, ví dụ trên cũng có thể được viết bằng ký hiệu tốc ký như sau:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Bên trong một hàm, bạn có thể viết các câu lệnh jQuery để thực hiện bất kỳ hành động nào theo cú pháp cơ bản, như:
$(selector).action();Nó đâu rồi, $(selector) về cơ bản, nó chọn các phần tử HTML từ cây DOM để có thể thao tác và action() áp dụng một số hành động trên các phần tử đã chọn, chẳng hạn như thay đổi giá trị của thuộc tính CSS hoặc đặt nội dung của phần tử, v.v.
Bây giờ hãy xem một ví dụ khác thiết lập văn bản đoạn văn:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>Ví dụ jQuery đề cập đến bộ chọn p, và điều này chọn tất cả các đoạn văn, sau đó phương thức text() đặt nội dung văn bản của đoạn văn với “Hello World!".
Đoạn văn bản trong ví dụ trước sẽ tự động được thay thế khi tài liệu sẵn sàng. Nhưng hãy xem cách thực hiện trong trường hợp bạn muốn thực hiện một hành động trước khi chạy mã jQuery, để thay thế văn bản của đoạn văn.
Hãy xem xét một ví dụ cuối cùng:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>Trong ví dụ này, đoạn văn bản chỉ được thay thế khi sự kiện nhấp chuột xảy ra trên nút "Replace Text“, nghĩa đơn giản là khi người dùng nhấp vào nút này.
Bạn có thể sử dụng bộ chọn ID để chọn một mục có ID duy nhất trên trang.
Ví dụ: đoạn mã jQuery sau sẽ chọn và đánh dấu một phần tử có thuộc tính ID id="markid", khi tài liệu đã sẵn sàng.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Bộ chọn lớp có thể được sử dụng để chọn các phần tử với một lớp cụ thể.
Ví dụ: đoạn mã jQuery sau sẽ chọn và đánh dấu các phần tử có thuộc tính class class="markclass", khi tài liệu đã sẵn sàng.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Bộ chọn mục có thể được sử dụng để chọn các mục theo tên mục.
Ví dụ: đoạn mã jQuery sau sẽ chọn và đánh dấu tất cả các đoạn văn, tức là các phần tử "<p>" của tài liệu khi nó đã sẵn sàng.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Bạn có thể sử dụng bộ chọn thuộc tính để chọn một phần tử dựa trên một trong các thuộc tính HTML của phần tử đó, chẳng hạn như thuộc tính liên kết targethoặc thuộc tính của một đầu vào type, Vân vân.
Ví dụ: mã jQuery sau sẽ chọn và đánh dấu tất cả các kiểu nhập văn bản, chẳng hạn như các phần tử "<input>" với type="text", khi tài liệu đã sẵn sàng.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Bạn cũng có thể kết hợp các bộ chọn CSS để làm cho lựa chọn của mình chính xác hơn.
Ví dụ: bạn có thể kết hợp bộ chọn lớp với bộ chọn phần tử để tìm các phần tử trong tài liệu có một loại và lớp nhất định.
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>Ngoài các bộ chọn definiti, jQuery cung cấp bộ chọn tùy chỉnh của riêng mình để nâng cao hơn nữa khả năng chọn các phần tử trên một trang.
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>Các sự kiện thường được kích hoạt bởi sự tương tác của người dùng với trang web, chẳng hạn như khi nhấp vào liên kết hoặc nút, nhập văn bản vào hộp nhập liệu hoặc vùng văn bản, thực hiện lựa chọn trong hộp lựa chọn, nhấn một phím trên bàn phím, di chuyển con trỏ chuột , vân vân. Trong một số trường hợp, chính trình duyệt có thể kích hoạt các sự kiện, chẳng hạn như sự kiện tải trang và tải xuống.
jQuery cải thiện các cơ chế xử lý sự kiện cơ bản bằng cách cung cấp các phương thức sự kiện cho hầu hết các sự kiện trình duyệt gốc, một số phương thức này là ready(), click(), keypress(), focus(), blur(), change(), Vân vân.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Nói chung, các sự kiện có thể được phân thành bốn nhóm chính:
Sự kiện chuột được kích hoạt khi người dùng nhấp vào một mục, di chuyển con trỏ chuột, v.v.
Dưới đây là một số phương thức jQuery thường được sử dụng để xử lý các sự kiện chuột.
click()Phương pháp click() đính kèm chức năng xử lý sự kiện cho các thành phần được chọn cho sự kiện “click“. Chức năng được liên kết thực thi khi người dùng nhấp vào mục đó. Ví dụ sau sẽ ẩn các phần tử <p> trên một trang khi được nhấp vào.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Phương pháp dblclick() đính kèm chức năng xử lý sự kiện cho các thành phần được chọn cho sự kiện “dblclick“. Hàm được liên kết thực thi khi người dùng nhấp đúp vào mục đó. Ví dụ sau sẽ ẩn các phần tử <p> khi nhấp đúp vào chúng.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Phương pháp hover() gắn một hoặc hai hàm xử lý sự kiện cho các phần tử được chọn thực thi khi con trỏ chuột di chuyển vào và ra khỏi các phần tử. Chức năng đầu tiên chạy khi người dùng đặt con trỏ chuột lên một mục, trong khi chức năng thứ hai chạy khi người dùng xóa con trỏ chuột khỏi mục đó.
Ví dụ sau sẽ làm nổi bật các mục <p> khi bạn đặt con trỏ lên đó, phần tô sáng sẽ bị xóa khi bạn xóa con trỏ.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Phương pháp mouseenter() đính kèm một chức năng xử lý sự kiện cho các phần tử đã chọn, chức năng này được thực thi khi chuột vào một phần tử. Ví dụ sau sẽ thêm đánh dấu lớp vào phần tử <p> khi bạn đặt con trỏ lên nó.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Phương pháp mouseleave() đính kèm chức năng xử lý sự kiện cho các mục đã chọn chạy khi chuột rời khỏi một mục. Ví dụ sau sẽ xóa đánh dấu lớp khỏi phần tử <p> khi bạn loại bỏ con trỏ khỏi nó.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Một sự kiện bàn phím được tạo ra khi người dùng nhấn hoặc thả một phím trên bàn phím. Hãy xem xét một số phương thức jQuery thường được sử dụng để xử lý các sự kiện bàn phím.
keypress()Phương pháp keypress() đính kèm chức năng xử lý sự kiện cho các thành phần được chọn (thường là các điều khiển biểu mẫu) chạy khi trình duyệt nhận đầu vào bàn phím từ người dùng. Ví dụ sau sẽ hiển thị thông báo khi sự kiện được kích hoạt keypress và nó được kích hoạt bao nhiêu lần khi bạn nhấn phím trên bàn phím.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Sự kiện nhấn phím tương tự như sự kiện nhấn phím, ngoại trừ các phím sửa đổi và phím không in như Shift, Esc, Backspace hoặc Delete, các phím mũi tên, v.v. chúng kích hoạt các sự kiện nhấn phím nhưng không kích hoạt các sự kiện nhấn phím.
keydown()Phương pháp keydown() đính kèm một chức năng xử lý sự kiện cho các mục đã chọn (thường là các điều khiển biểu mẫu) được thực thi khi người dùng nhấn một phím trên bàn phím lần đầu tiên. Ví dụ sau sẽ hiển thị thông báo khi sự kiện được kích hoạt keydown và nó được kích hoạt bao nhiêu lần khi bạn nhấn phím trên bàn phím.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Phương pháp keyup() đính kèm chức năng xử lý sự kiện cho các phần tử được chọn (thường là các điều khiển biểu mẫu) được thực thi khi người dùng nhả một phím trên bàn phím. Ví dụ sau sẽ hiển thị thông báo khi sự kiện được kích hoạt keyup và số lần nó được kích hoạt khi bạn nhấn và thả một phím trên bàn phím.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Sự kiện biểu mẫu được kích hoạt khi điều khiển biểu mẫu nhận hoặc mất tiêu điểm hoặc khi người dùng thay đổi giá trị điều khiển biểu mẫu, chẳng hạn như nhập văn bản vào kiểu nhập văn bản, chọn tùy chọn trong hộp chọn, v.v. . Dưới đây là một số phương thức jQuery thường được sử dụng để xử lý các sự kiện biểu mẫu.
change()Phương pháp change() đính kèm chức năng xử lý sự kiện cho các phần tử <input> và được thực thi khi giá trị của nó thay đổi. Ví dụ sau sẽ hiển thị thông báo cảnh báo khi chọn một tùy chọn trong hộp lựa chọn thả xuống.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Đối với hộp nhấp chuột, hộp kiểm và nút radio, sự kiện sẽ kích hoạt ngay lập tức khi người dùng thực hiện lựa chọn chuột, nhưng đối với kiểu nhập văn bản và vùng văn bản, sự kiện sẽ kích hoạt sau khi phần tử mất tiêu điểm.
focus()Phương pháp focus() gắn một hàm xử lý sự kiện vào các phần tử đã chọn (thường là các điều khiển và liên kết biểu mẫu) sẽ thực thi khi nó được đặt tiêu điểm. Ví dụ sau sẽ hiển thị thông báo khi kiểu nhập văn bản nhận được tiêu điểm.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Phương pháp blur() đính kèm một hàm xử lý sự kiện để tạo thành các phần tử như <input>, <textarea>, <select> được thực thi khi nó mất tiêu điểm. Ví dụ sau sẽ hiển thị thông báo khi nhập văn bản mất tiêu điểm.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Phương pháp submit() đính kèm chức năng xử lý sự kiện cho các phần tử <form> chạy khi người dùng cố gắng gửi biểu mẫu. Ví dụ sau sẽ hiển thị một thông báo dựa trên giá trị đã nhập khi cố gắng gửi biểu mẫu.
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>Các sự kiện cũng được kích hoạt trong trường hợp trang DOM (Mô hình đối tượng tài liệu) đã sẵn sàng hoặc khi người dùng thay đổi kích thước hoặc cuộn cửa sổ trình duyệt, v.v. Dưới đây là một số phương thức jQuery thường được sử dụng để xử lý loại sự kiện này.
ready()Phương pháp ready() chỉ định một chức năng để thực thi khi DOM được tải đầy đủ.
Ví dụ sau sẽ thay thế đoạn văn bản ngay khi hệ thống phân cấp DOM được xây dựng đầy đủ và sẵn sàng để thao tác.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Phương pháp resize() đính kèm một chức năng xử lý sự kiện cho phần tử cửa sổ chạy khi kích thước của cửa sổ trình duyệt thay đổi.
Ví dụ sau đây sẽ hiển thị chiều rộng và chiều cao hiện tại của cửa sổ trình duyệt khi bạn cố gắng thay đổi kích thước bằng cách kéo các góc của nó.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Phương pháp scroll() đính kèm một hàm xử lý sự kiện vào cửa sổ hoặc vào iframe và các mục có thể cuộn chạy bất cứ khi nào vị trí cuộn của mục đó thay đổi.
Ví dụ sau sẽ hiển thị thông báo khi cuộn cửa sổ trình duyệt.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Một ca phẫu thuật tạo hình mắt bằng cách sử dụng trình xem thương mại Apple Vision Pro đã được thực hiện tại Phòng khám đa khoa Catania…
Phát triển kỹ năng vận động tinh thông qua tô màu giúp trẻ chuẩn bị cho những kỹ năng phức tạp hơn như viết. Để tô màu…
Ngành hải quân là một cường quốc kinh tế toàn cầu thực sự, đang hướng tới thị trường 150 tỷ...
Thứ Hai tuần trước, Financial Times đã công bố một thỏa thuận với OpenAI. FT cấp phép cho hoạt động báo chí đẳng cấp thế giới…