jQuery与JavaScript简单对比

• 需求：对一个表格隔行变色

<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>

什么是DOM模型？

1. DOM是“Document Object Model(文档对象模型)”的英文单词的缩写，如果没有document,DOM就无从谈起，因此只有类似(X)HTML、XML等属于文档类型的语言，才具有DOM。这个DOM实际上就是开发人员写的(X)HTML代码。
2. 每一个(X)HTML页面，都具有一个DOM,每一个DOM都可以表示成一颗树，这是理解DOM模型的关键。
3. 在DOM里存在许多类型不同的节点，有些DOM节点还包括其他类型的节点。DOM里的节点通常分为3种类型，即元素节点，文本节点和属性节点。

对比：

1. 使用jQuery制作交互效果的语法更简单，代码量大大减少了
2. 使用jQuery不存在浏览器兼容性问题，即jQuery在各个浏览器保持统一的显示效果
3. 而JavaScript本身存在两个弊端：一个是复杂的文档对象模型，另一个是不一致的浏览器实现

突出jQuery的优势：

1. 轻量级。jQuery的体积很小，压缩之后大约只有100kb。
2. 强大的选择器。
3. 出色的DOM封装。
4. 可靠的事件处理机制。jQuery的事件处理机制吸收了JavaScript 中的事件处理函数的精华，使得jQuery在处理事件绑定时非常可靠。
5. 出色的浏览器兼容性。
6. 隐式迭代。当使用jQuery查找到相同名称（类名、标签名等）的元素隐藏他们时，无须循环遍历每一个返回的元素，它会自动操作所匹配的对象集合，而不是单独对象，这一举措使得大量的循环结构变得不再必要，从而简化代码量。
7. 丰富的插件支持。