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. 丰富的插件支持。

你可能感兴趣的:(js)