为什么我的jQuery总拿不到正确数据？

（基础问题）
你是不是遇到过这种情况：明明用.val()获取了input的值，提交时却显示为空？或者用.data()读取属性时，返回的总是undefined？

??核心矛盾点??：

1. 混淆.val()与.attr('value')的区别
2. 动态生成的元素无法读取data属性
3. 数据类型转换的隐性错误

举个真实案例：某电商网站的购物车数量统计，开发小哥用$('#count').attr('data-num')获取库存，结果用户下单时总是超卖。后来发现应该用.data('num')，因为attr()只能读取初始值...

input取值必知的3个真相

（场景问题）
??场景一：普通文本框??

javascript复制
// 正确做法（省去80%的调试时间）
let username = $('#user').val()

// 典型错误（在Chrome移动版失效）
let password = $('[type=password]').attr('value')

??场景二：单选/复选框??

javascript复制
// 单选按钮（必须加:checked）
let gender = $('input[name=gender]:checked').val()

// 多选框（要用map遍历）
let hobbies = $('input[name=hobby]:checked').map(function(){
    return $(this).val()
}).get()

??场景三：动态输入框??

javascript复制
// 事件委托才是王道（解决90%的取值问题）
$(document).on('input', '.dynamic-input', function(){
    console.log($(this).val())
})

data属性取值的隐藏关卡

（解决方案）
??坑位预警??：

1. HTML5的data-*属性命名规则（必须小写）
2. 数字会被自动转换为Number类型
3. JSON数据需要特殊处理

??正确操作指南??：

html运行复制
<div id="product" data-price="299" data-spec='{"color":"red"}'>
div>

<script>
// 基础取值（直接转数字）
let price = $('#product').data('price')

// 复杂数据（注意单双引号）
let spec = $('#product').data('spec')
console.log(spec.color) // 输出red

??血泪教训??：

• 不要用.data()获取实时变化的值
• 遇到"12px"这类字符串要用split()切割
• 布尔值建议存储为true/false而不是0/1

自检清单：避开这5个雷区

（三维问答矩阵）
??Q1：为什么.data()拿到的和HTML显示的不一样？??
A：因为.data()会把"123"转数字、"true"转布尔值，而.attr('data-xx')永远返回字符串

??Q2：动态修改data属性该用哪种方法？??
A：必须用.data('key', value)赋值，直接改HTML属性不会同步到jQuery缓存

??Q3：如何批量获取表单数据？??
A：推荐序列化方法：

javascript复制
let formData = $('#myForm').serializeArray()
let params = {}
$.each(formData, function(i, field){
    params[field.name] = field.value
})

小编观点

干了十年前端的老司机告诉你：jQuery的数据获取就像炒菜放盐——看起来简单，实际差之毫厘谬以千里。三点忠告：

1. 永远先console.log输出确认数据类型
2. 移动端务必测试Android 8和iOS 12等老系统
3. 复杂数据建议用代替data属性

（突然想到）对了！如果你发现.data()返回undefined，检查下是不是把data-user-name写成了data-username？中划线命名可是区分大小写的！