- 需求:对一个表格隔行变色
<script type="text/javascript" src="../tool/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
/*
$(document).ready();
网页中所有DOM文档结构绘制完毕后即刻执行
*/
$(document).ready(function () {
$("tr:even").css("background-color", "blue");//为表格偶数行添加背景色
});
/*
window.onload = function () {console.dir("ok");}
必须等待网页中所有的内容加载完毕后(包括图片、Flash、视频等)
*/
function showLine() {
var trs = document.getElementsByTagName("tr");//获取行对象集合
for (var i = 0; i < trs.length; i++) {
if (i % 2 == 0) {
var obj = trs[i];
obj.style.backgroundColor = "#ccc";
}
}
}
</script>
对比:
- 使用jQuery制作交互效果的语法更简单,代码量大大减少了
- 使用jQuery不存在浏览器兼容性问题,即jQuery在各个浏览器保持统一的显示效果
- 而JavaScript本身存在两个弊端:一个是复杂的文档对象模型,另一个是不一致的浏览器实现
突出jQuery的优势:
- 轻量级。jQuery的体积很小,压缩之后大约只有100kb。
- 强大的选择器。
- 出色的DOM封装。
- 可靠的事件处理机制。jQuery的事件处理机制吸收了JavaScript 中的事件处理函数的精华,使得jQuery在处理事件绑定时非常可靠。
- 出色的浏览器兼容性。
- 隐式迭代。当使用jQuery查找到相同名称(类名、标签名等)的元素隐藏他们时,无须循环遍历每一个返回的元素,它会自动操作所匹配的对象集合,而不是单独对象,这一举措使得大量的循环结构变得不再必要,从而简化代码量。
- 丰富的插件支持。