jQuery click() 方法介绍
click() 方法概述
click() 方法指定单击元素时运行的函数。
此方法需要一个函数作为参数，当用户单击指定元素时会执行该函数。
使用语法
$(selector).click(function() {});
click() 方法参数
click() 方法需要传递一个或两个参数：
- 一个函数（必需）。规定当被选元素被点击时运行的函数。
- data（可选）。规定要向事件处理程序传递的数据。
实例介绍
实例1：点击按钮弹出提示框
<!DOCTYPE html>
<html>
<head>
<title>click() 方法示例</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button id="testBtn">Click Me!</button>
<script>
$(document).ready(function(){
$('#testBtn').click(function(){
alert('我被点击了！');
});
});
</script>
</body>
</html>
实例2：点击列表项获取数据
<!DOCTYPE html>
<html>
<head>
<title>click() 方法示例</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<ul>
<li data-id="001">列表项1</li>
<li data-id="002">列表项2</li>
<li data-id="003">列表项3</li>
<li data-id="004">列表项4</li>
</ul>
<input type="hidden" id="selectedItemId" value="">
<script>
$(document).ready(function(){
$('li').click(function(){
var itemId = $(this).data('id');
$('#selectedItemId').val(itemId);
alert('你选择了项目 ' + itemId);
});
});
</script>
</body>
</html>
在这个示例中，我们定义了一个列表和一个隐藏的输入框。当用户点击列表的任何一项时，通过data()方法获取这个列表项的自定义data-id属性的值，并将该值设置到隐藏的输入框中供后续使用。
注意，在此示例中我们指定的是click()方法而不是on('click', ...)，因为对于简单的事件绑定来说，这两种方法是相同的。而且，click()方法的语法比on()更加清晰易读。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery click([data],fn)使用方法实例介绍 - Python技术站
微信扫一扫 
支付宝扫一扫 