Định nghĩa và sử dụng
.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ệnclicktrong javascript..click()được sử dụng trong việc thực hiện một việc gì đó khi click chuột, ví dụ như click mở một popup.
Cấu trúc
Kích hoạt sự kiện click cho thành phần
$('p').click();
Sử dụng function cho sự kiện click
$('p').click(function(){
$('span').css('color','red');
});
.click(bộ chọn)
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>
$(function(){
$('p').click(function(){
var clicked = $('span').click();
if(clicked){$('span').css('color','red');}
});
});
</script>
</head>
<body>
<p>Click</p>
<span>Thành phần span</span>
</body>
</html>
Hiển thị trình duyệt:
Khi click vào thành phần p, khi đó function sẽ thực hiện hành động $('span').click() tức là đã kích hoạt cho span một sự kiện click, span lúc này sẽ được hiểu là đang thực hiện sự kiện click.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<p>Click</p> |
<p>Click</p> |
.click(function(){})
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>
<style>
.current { color: red; }
</style>
<script>
$(function(){
$('li').click(function(){
$('li').removeClass();
$(this).addClass('current');
});
});
</script>
</head>
<body>
<ul>
<li>li thứ nhất</li>
<li>li thứ hai</li>
<li>li thứ ba</li>
<li>li thứ tư</li>
<li>li thứ năm</li>
</ul>
</body>
</html>
Hiển thị trình duyệt:
Một ví dụ đơn giản sử dụng click function, click từng li để thấy kết quả.
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
|---|---|
<ul> |
<ul> |