`

jquery和DOM比较

阅读更多

1、window.onload$(document).ready()的区别

 

 

window.onload

$(document).ready()

执行时机

必须等整个网页中所有的内容加载完毕后(包括图片)才能执行

网页中所有DOM结构绘制完毕后就执行,可能DOM元素并没有加载完

编写个数

不能同时编写多个

Window.load=function(){

Alert(“helloworld”);

}

Window.load=function(){

Alert(“helloworld”);

}

只会输出最后一次结果

$(document).ready(functtion(){

Alert(“helloworld”);

});

$(document).ready(functtion(){

Alert(“helloworld”);

 

});

会输出两次结果

简化

   

 

 

2、jquery对象和DOM对象的区别

Juery对象是包装DOM后的产生的对象,DOM是原生对象,是一个基本的文档结构。

方法上区别:

DOM中:获取元素节点:document.getElementsByTagName或者getElementById来获取,获取属性:对象.innerHTML;

Jquery中:利用$(#id).html()获取id元素内的html

 

3.jquery对象和DOM对象的转换

A.首先约定好定义变量的风格;若定义jquery对象,则加上$,$varibale若为DOM,直接定义为variable

B.Jquery对象转成DOM对象可利用get(index)$[index]

利用数组,可用$[index]来获取一个DOM对象,如var$cr=$(“#cr”);varcr=$cr[0]

利用get方法,如var$cr=$(“#cr”);varcr=$cr.get(0);

C.DOM对象转成Jquery对象

利用$()DOM对象包装起来,就可获得jquer对象

varvr=document.getElementById(“cr”);var$cr=$(cr);

注意:DOM对象只能用DOM的操作方法。Jquery对象不能用DOM对象的方法

分享到:
评论

相关推荐

    JQuery DoM和ajax 操作

    jQuery提供了丰富的选择器、遍历和操作方法,使得DOM操作变得简单易行。 1. **选择器**: jQuery提供了多种CSS选择器,如ID选择器(#id),类选择器(.class),元素选择器(element),以及组合选择器等,使我们能够快速...

    jquery dom对象 详细介绍1

    jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、AJAX请求、事件处理以及创建复杂的网页特效。jQuery的核心特性包括对JSON...同时,理解jQuery对象和DOM对象的区别及其相互转换,是有效利用jQuery功能的关键。

    Jquery+dom+easyUI教程

    jQuery 是一个广受欢迎的 JavaScript 库,其核心理念是简化 DOM 操作,处理事件和创建动画,同时提供了统一的 API 以实现跨浏览器兼容性。jQuery 的“write less, do more”口号反映了它通过简洁的语法实现高效的...

    jquery对象和dom对象

    **jQuery对象和DOM对象** 在JavaScript中,DOM(Document Object Model)对象是浏览器解析HTML或XML文档后生成的树状结构,它允许我们通过编程方式访问和操作网页元素。而jQuery对象则是jQuery库中用于封装DOM对象...

    jquery的dom资料

    jquery的dom资料,学习jquery的使用,以及jquery的dom资料,学习jquery的使用,以及jquery的dom资料,学习jquery的使用,以及

    jQuery基础DOM和CSS操作源码

    这个"jQuery基础DOM和CSS操作源码"的压缩包显然是一份面向初学者的学习资源,包含了理论讲解和实践代码示例,帮助初学者理解并掌握jQuery在DOM操作和CSS选择器方面的应用。 DOM(Document Object Model)是HTML和...

    jQuery DOM节点操作源码

    jQuery 是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、...对于初学者来说,这些资源将有助于理解和实践jQuery的DOM操作,提升Web开发技能。记得结合实际项目练习,加深理解,将理论知识转化为实践经验。

    javascript 原生Dom对象和jQuery对象的联系和区别

    JavaScript中的DOM对象和jQuery对象是两种不同的数据结构,它们在处理网页元素时有着各自的特性和优缺点。了解它们之间的联系和区别对于JavaScript开发者来说至关重要,因为这有助于选择合适的工具进行网页交互。 ...

    弹出层的例子(含jquery.DOMWindow脚本)

    `DOMWindow`则是基于jQuery的一个插件,用于创建可定制的弹出窗口,提供更加灵活和丰富的用户体验。 弹出层在网页设计中通常用于显示警告消息、表单、图片预览、详细信息等。它们可以通过点击按钮、链接或其他交互...

    jQuery操作DOM解析

    **jQuery操作DOM解析** 在Web开发中,DOM(Document Object Model)是HTML或XML文档的结构化表示,它允许程序和脚本动态更新、添加、删除和改变元素。jQuery库简化了JavaScript对DOM的操作,提供了丰富的API来处理...

    第17周-第02章节-Python3.5-jQuery 和Dom关系及jQuery版本.avi

    第17周-第02章节-Python3.5-jQuery 和Dom关系及jQuery版本.avi

    关于dom和jquery对象理解

    2. **属性操作**:jQuery同样提供了一些便捷的方式来读取和修改元素的属性。例如,`$("#id").attr("checked")`用来获取ID为`id`的元素的`checked`属性值。 3. **事件处理**:jQuery简化了事件绑定的过程,例如`$(...

    Ch08-jQuery操作DOM核心笔记.txt

    Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txt

    Jsoup HTML解析器For Java 在Java程序中使用JQuery操作DOM

    Jsoup HTML解析器For Java 在Java程序中使用JQuery操作DOM 模式识别的新技术 狂顶

    jquery对象和dom对象.doc

    在JavaScript的世界里,jQuery是一个非常流行的库,它极大地简化了DOM操作和事件处理。当我们谈论jQuery对象和DOM对象时,我们需要理解两者之间的基本差异和转换方法。 DOM(Document Object Model)是HTML和XML...

    php仿jQuery控制dom | php采集

    通过phpQuery,你可以像使用jQuery一样选择元素、遍历DOM、添加和删除元素,以及执行其他DOM操作,而无需深入理解底层的DOM API。 【标签】:“源码”、“工具” 这里的“源码”指的是phpQuery库的源代码,它是...

    jquery.DOMWindow弹出层与TAB切换实例汇总.rar

    jquery.DOMWindow弹出层与TAB切换实例汇总,jquery.DOMWindow.js是浮动弹出框的核心部件,本插件的弹出框有多种形式,比如它可以弹出不带边框的、带有淡入淡出特效的、各种颜色的背景浮动框、弹出后背景会变暗的浮动...

    《jQuery权威指南》学习笔记之第3章 jQuery操作DOM

    总结,jQuery操作DOM的主要知识点包括:选择器的使用、元素的遍历、插入与删除、属性和内容的修改、事件处理以及动画和Ajax交互。熟练掌握这些技能,可以极大地提高开发效率,使得网页交互变得更加生动和流畅。通过...

    jQuery对象和DOM对象之间相互转换的方法介绍

    在Web开发中,经常需要在jQuery对象和DOM对象之间进行转换,以便可以利用各自对象的方法优势进行高效编程。jQuery对象是包装了DOM对象的类数组对象,它们之间的转换虽然看似简单,但在实际操作中却非常重要。 首先...

    jquery学习资料jQuery DOM的操作jQuery插件源码jQuery插件等资料.zip

    jquery学习资料jQuery DOM的操作jQuery插件源码jQuery插件等资料: jQuery DOM教辅.pdf jQuery DOM源码 jQuery DOM的操作.pdf jQuery 丰富的插件.pdf jQuery 事件的处理.pdf jQuery 元素选择器参考手册(教辅) .pdf ...

Global site tag (gtag.js) - Google Analytics