js和jquery 加载页面后再执行的区别

JavaScript0176

js和jquery 加载页面后再执行的区别,第1张

亲,js中的window.onload是等页面加载完所有的元素，包括图片等等资源要全部加载成功后才执行，而jq的是加载完dom元素就可以执行了，比如一个<img src="xxx.jpg"/>,js一定要加载好这张图片，里面的js代码才会执行，而jq可以只加载这个<img>标签后里面的js代码就可以执行了(此时这张图片可能还没有下载好)

一、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规范

cellspacingcellSpacing

classclassName

colspan colSpan

cssFloat IE中是styleFloat，其他浏览器是cssFloat

float IE中是styleFloat，其他浏览器是cssFloat

for htmlFor

frameborderframeBorder

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代替$工作，同时$可以作为其他库的快捷方式。