记一次jQuery id选择器返回不一致问题
jQuery版本：1.9.1
先看代码：
<head>
<title>测试页面</title>
<script type="application/javascript" src="jquery-1.9.1.js"></script>
</head>
<body>
<div id="test">我是id为”test”的div1</div>
<div id="test">我是id为”test”的div2</div>
<button onclick="changeColor(test)">jq改变id为”test”的颜色</button>
<br/>
<br/>
<div id="test测试">我是id为“test测试”的div1</div>
<div id="test测试">我是id为”test测试”的div2</div>
<button onclick="changeColor(test测试)">jq改变id为”test测试”的颜色</button>
</body>
<script>
function changeColor(divId){
var color = $(this).attr("customColor") || #000;
color = color === #000 ? #f00 : #000;
$(this).attr("customColor", color);
$("#" + divId).css("color", color);
}
</script>
上面代码都是通过id找到对应元素并修改其字体颜色，通过实测
我们发现id为“test”的元素只有第一个元素的颜色发生了改变；但是id为“test测试”的确是两个都发生了改变。
带着这个疑问我跟踪了jQuery的源码，发现jQuery在查找元素前正则“/^(?:#([w-]+)|(w+)|.([w-]+))$/”检测该选择器是id、标签【tag】还是类【class】选择器。
从正则分析我们发现id选择器实则是通过本地方法getElementById进行获取【该方法仅会返回匹配的第一个元素】；不匹配的则用本地方法querySelectorAll进行获取【该方法会找出所有匹配的节点并返回数组】。
jQuery部分源码：
至此我们了解到了为什么同样使用jQuery为什么有时返回一个元素有时又返回所有匹配的元素。
总结：
通过上面分析所以大家在命名id、class或者自定义tag时按照数字、字母、中划线和下划线命名规则命名。
jQuery版本：1.9.1 先看代码：
我是id为”test”的div1
我是id为”test”的div2
我是id为“test测试”的div1
我是id为”test测试”的div2
上面代码都是通过id找到对应元素并修改其字体颜色，通过实测 我们发现id为“test”的元素只有第一个元素的颜色发生了改变；但是id为“test测试”的确是两个都发生了改变。 带着这个疑问我跟踪了jQuery的源码，发现jQuery在查找元素前正则“/^(?:#([w-]+)|(w+)|.([w-]+))$/”检测该选择器是id、标签【tag】还是类【class】选择器。 从正则分析我们发现id选择器实则是通过本地方法getElementById进行获取【该方法仅会返回匹配的第一个元素】；不匹配的则用本地方法querySelectorAll进行获取【该方法会找出所有匹配的节点并返回数组】。 jQuery部分源码： 至此我们了解到了为什么同样使用jQuery为什么有时返回一个元素有时又返回所有匹配的元素。 总结： 通过上面分析所以大家在命名id、class或者自定义tag时按照数字、字母、中划线和下划线命名规则命名。
下一篇：
【蚕食C++】 静态联编和动态联编