Jquery là một thư viện javascript với nhiều tính năng như truy xuất phần tử html, thay đội nội dung, định dạng, hiệu ứng, xử lý sự kiện ... Cú pháp jquery ngắn gọn và dễ nhớ. Dưới đây là những kiến thức về việc áp dụng jquery vào trang web ở mức độ cơ bản cho những bạn mới bắt đầu.
Tích hợp jquery vào trang web
Để tích hợp jquery vào trang web, chúng ta sẽ vào trang chủ tải về của jquery để nhận được phiên bản mới nhất. Sau khi tải file về, chúng ta sẽ nhúng vào website thông qua thẻ script như ví dụ bên dưới:
Trong ví dụ này, file jquery.js được đặt trong thư mục js
Truy xuất thành phần HTML bằng Jquery
Cú pháp: $(selector)
Ví dụ: Chọn thẻ h1 bằng jquery
Có thể nói, selector trong jquery khá giống selector trong css.
Xử lý nội dung bằng Jquery
Cú pháp:
$(selector).html() dùng để thao tác tới phần content html của một thẻ đầy đủ.
$(selector).text() dùng để thao tác tới phần chữ của một thẻ đầy đủ.
$(selector).val() dùng để thao tác đến giá trị của một ô nhập dữ liệu từ người dùng như textarea, input ...
Ví dụ: Lấy ra nội dung bằng jquery
Trong ví dụ này, chúng ta vừa lấy được nội dung html của thẻ p, nội dung text của thẻ p, và giá trị đang có của ô nhập tên học viên.
Ví dụ: Đặt lại nội dung bằng jquery
Trong ví dụ này, chúng ta đã đặt lại nội dung text cho thẻ h1, đặt lại nội dung html cho thẻ p với class intro, đặt lại giá trị tên học viên.
Xử lý thuộc tính thẻ html bằng jquery
Cú pháp:
$(selector).attr() dùng để thao tác đến giá trị của thuộc tính html
$(selector).prop() dùng để thao tác đến giá trị (thuộc kiểu bool) của thuộc tính html.
Ví dụ: Lấy ra giá trị thuộc tính bằng jquery
Ví dụ: Gắn giá trị cho thuộc tính bằng jquery
<body>
<h1>Gắn giá trị cho thuộc tính của thẻ html bằng jquery</h1>
<a href="https://google.com" id="a1">
Nhấn để chuyển trang
</a>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
$("#a1").attr('href', 'https://www.facebook.com');
</script>
</body>Trong ví dụ này, chúng ta đã đổi đường dẫn của liên kết thành facebook.
Xử lý định dạng bằng Jquery
Lấy ra giá trị css:
$(selector).css('css_attribute_name');
Đặt lại giá trị css:
$(selector).css('css_attribute_name', 'value');hoặc
$(selector).css({css_attribute_name: 'value'});
Ví dụ:
<a href="https://google.com" id="a1">
Nhấn để chuyển trang
</a>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
$("#a1").css("color", "red");
$("#a1").css({'background-color': '#999'});
console.log($("#a1").css("color"));
</script>
Xử lý sự kiện bằng Jquery
Bắt sự kiện bằng jquery:
Cú pháp:
$(selector).on('event_name', function () {
//Todo somethings
});
Ví dụ:
<p id="p1">
Nhấn vào để xem sự kiện click
</p>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
$("#p1").on('click', function () {
alert('bạn đã click vào thẻ p');
});
</script>
Gọi sự kiện
Cú pháp:
$(selector).trigger('event_name');
Ví dụ:
<p id="p1">
Nhấn vào để xem sự kiện click
</p>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
$("#p1").click(function(){
alert(1);
});
$("#p1").trigger('click'); // gọi sự kiện
</script>
Ngoài sự kiện là click như trên, chúng ta còn thường sử dụng các sự kiện khác như:
- dbclick: Nhấn đúp chuột 2 lần liên tiếp
- change: khi thay đổi giá trị của thuộc tính value
- mouseover: Khi vừa rê chuột vào
- mouseout: Khi vừa rời chuột đi ra ngoài phần tử
- mousemove: Khi rê con trỏ chuột bên trong phần tử
- keydown: Khi thành phần đang được focus mà chúng ta nhấn xuống phím bất kỳ, nếu chúng ta giữ phím không thả lên, thì sự kiện sẽ được bắt nhiều lần cách nhau một khoảng thời gian rất ngắn.
- keyup: Khi thành phần đang được focus mà chúng ta nhả lên phím bất kỳ
- keypress: Khi thành phần đang được focus mà chúng ta nhấn phím bất kỳ
- paste: Khi dán nội dung vào thành phần
- copy: Khi copy nội dung từ thành phần
- cut: Cắt nội dung từ thành phần
- focus: Khi thành phần được focus, hiểu đơn giản, nghĩa là thành phần đang được thao tác.
- blur: Thành phần bị mất focus, khi đang được thao tác rồi lại bị mất thao tác vì lý do nào đó, có thể do nhấn chuột ra ngoài phạm vi
Bình luận
Bài viết có vấn đề ? Hãy cho chúng tôi biết.
Gửi báo cáo sai phạmHãy để nguồn Suta.media khi phát hành lại nội dung này !
Hãy là nguời đầu tiên bình luận về Học jquery cơ bản dành cho người mới học lập trình web