.dblclick()

Định nghĩa và sử dụng

.dblclick(): Kích hoạt sự kiện double 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 double click trong javascript

Cấu trúc

Đã được thêm vào từ phiên bản 1.0

Kích hoạt sự kiện click cho thành phần

$('p').dblclick();

Đã được thêm vào từ phiên bản 1.4.3

Sử dụng function cho sự kiện click

.dblclick(function(){})

$('p').dblclick(function(){
    $('span').css('color','red');
});

.after(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').dblclick(function(){
        var dblclicked = $('span').dblclick();
        if(dblclicked){$('span').css('color','red');}
    });
});
</script>
</head>

<body>
<p>Double click</p>
<span>Thành phần span</span>
</body>
</html>

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

Khi double click vào thành phần p, khi đó function sẽ thực hiện hành động $('span').dblclick() tức là đã kích hoạt cho span một sự kiện double click, span lúc này sẽ được hiểu là đang thực hiện sự kiện double click.

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

Trước khi có jQuery	Sau khi có jQuery
<p>Double click</p> <span>Thành phần span</span>	<p>Double click</p> <span style="color: red;">Thành phần span</span>

.dblclick(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>
<script>
$(function(){
    $('p').dblclick(function(){
        $('span').css('color','red');
    });
});
</script>
</head>

<body>
<p>Double click</p>
<span>Thành phần span</span>
</div>
</body>
</html>

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

Khi tác động lên thành phần p một sự kiện double click thì ngay lập tức trình duyệt sẽ xử lý nội dung của function là đổi màu của span.

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

Trước khi có jQuery	Sau khi có jQuery
<p>Double click</p> <span>Thành phần span</span>	<p>Double click</p> <span style="color: red;">Thành phần span</span>

Ví dụ thêm

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').dblclick(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>
</div>
</body>
</html>

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

Một ví dụ đơn giản sử dụng click function, double 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> <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>	<ul> <li class="current">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>

data()

.delay()