深入分析JQuery和JavaScript的异同

210 阅读 0 评论 139 点赞

我是靠谱客的博主呆萌高跟鞋，最近开发中收集的这篇文章主要介绍深入分析JQuery和JavaScript的异同，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

ps:LZ觉得这个标题有点大了，超出了能力范围，不喜勿碰。目前只记录LZ能力范围内的，日后持续补充。

一、JQuery对象和DOM对象的相互转化（《锋利的JQuery》）

JQuery转化为DOM：

1、var jq = $(‘#selector'); var dom = jq[index];

2、var jq1 = $(‘#selector1'); var dom1 = jq1.get(index) 或者 var dom1 = jq1.get()[index];

DOM转化为JQuery：

假设cr是一个DOM对象，转为JQuery，jqcr = $(‘cr');

二、JQuery的$(document).ready()和JavaScript的window.onload()的区别（《锋利的JQuery》）

1、执行时机

window.onload必须等待网页中所有资源(包括图片)加载完成后才能执行，而$(document).ready()在所有DOM结构绘制完毕后就执行，但是可能与DOM相关联的资源还没有加载完毕。

2、编写个数

一个文档中，window.onload只有是一个，而$(document).ready()可以有多个

3、简化方法

window.onload没有简写形式，$(document).ready()可以简写为$(function(){}).

三、JQuery和JavaScript中访问属性名称的区别（《JQuery实战》）

       JQuery规范名称                             DOM规范
       cellspacing                                    cellSpacing
       class                                                className
       colspan                                          colSpan
       cssFloat                                         IE中是styleFloat，其他浏览器是cssFloat
       float                                               IE中是styleFloat，其他浏览器是cssFloat
       for                                                  htmlFor
       frameborder                                frameBorder
       maxLength                                  maxLength
       readonly                                      readOnly
       rowspan                                       rowSpan
       stylefloat                                      IE中是styleFloat，其他浏览器是cssFloat
       tabindex                                       tabIndex
       usemap                                         useMap

四、冲突

DOM理论上不会有冲突产生，JQuery防止冲突产生的两种解决方法：（《锋利的JQuery》）

1、JQuery库在其他库之后导入

调用JQuery。noConflict()方法将$控制权给其他库使用，或者自定义快捷方式，$j = JQuery.noConflict();

2、JQuery库在其他库之前导入

直接使用JQuery代替$工作，同时$可以作为其他库的快捷方式。