jquery传参
jQuery 传参方法
通过 data 属性传递参数
在 HTML 元素上使用 data-* 属性存储参数，通过 jQuery 的 data() 方法获取。
<button id="btn" data-user-id="123" data-role="admin">Click</button>$('#btn').click(function() {
var userId = $(this).data('userId');
var role = $(this).data('role');
console.log(userId, role); // 输出: 123 "admin"
});通过函数参数传递
直接在 jQuery 方法调用时传递参数。
$('#element').click({param1: 'value1', param2: 'value2'}, function(event) {
console.log(event.data.param1); // 输出: "value1"
console.log(event.data.param2); // 输出: "value2"
});通过 URL 查询字符串传递
在 AJAX 请求或页面跳转时使用查询字符串传递参数。
$.ajax({
url: 'api/data',
data: {id: 456, name: 'test'},
success: function(response) {
console.log(response);
}
});通过全局变量传递
在全局作用域定义变量，在 jQuery 代码中直接使用。
var globalConfig = {color: 'blue', size: 'large'};
$('#element').css({
'color': globalConfig.color,
'font-size': globalConfig.size
});通过闭包传递参数
使用立即执行函数传递参数到 jQuery 代码中。
(function(params) {
$('div').each(function() {
$(this).text(params.text);
});
})({text: 'Hello World'});注意事项
- 使用
data-*属性时注意 HTML5 兼容性 - 函数参数传递适合事件处理等场景
- URL 传参需要注意 URL 编码问题
- 全局变量需避免命名冲突
- 闭包方式可以保持变量私有性
