JS、DOM和JQuery之间的关系示例分析


Posted in Javascript onApril 09, 2014

DOM(document object model) 其实是浏览器内元素对象的一个总称

我们用JavaScript对网页进行的所有操作都是通过DOM进行的。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容,所以如果你下载一个JavaScript语言的参考帮助文档来查的话,就连妇孺皆知的document.write方法也找不到。

文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素(一个HTML标签)都对应着一个对象(object,所谓“对象”,用白话说就是“东西”。object这个词在台湾通常翻译成“物件”)。网页上的标签是一层层嵌套的,最外面的一层是<HTML>,文档对象模型也这样一层层嵌套着,但是通常被理解成一棵树的形状。树根是window或document对象,相当于最外层的标签的外围,也就是整个文档。

举个小例子:

<script type="text/javascript"> 
var x = document.getElementById("test"); 
var xc = x.childNodes; 
var xcl = xc.length; 
for(var i=0;i<xcl;i++){ 
document.write("nodeName = " + xc[i].nodeName + "; nodeType = " + xc[i].nodeType + "<br />");} 
</script>

javascript是可对DOM进行操作的,比如:一个<table>是一个DOM对象,javascript可以对其添加,删除,等操作.

很多人看到 Java 和 JavaScript 都有“Java”四个字,就以为它们是同一样东西,连我自己当初也是这样。其实它们是完完全全不同的两种东西。Java,全称应该是 Java Applet,是嵌在网页中,而又有自己独立的运行窗口的小程序。Java Applet 是预先编译好的,一个 Applet 文件(.class)用 Notepad 打开阅读,根本不能理解。Java Applet 的功能很强大,可以访问 http、ftp等协议,甚至可以在电脑上种病毒(已有先例了)。相比之下,JavaScript 的能力就比较小了。JavaScript 是一种“脚本”(“Script”),它直接把代码写到 HTML 文档中,浏览器读取它们的时候才进行编译、执行,所以能查看 HTML 源文件就能查看JavaScript 源代码。JavaScript 没有独立的运行窗口,浏览器当前窗口就是它的运行窗口。它们的相同点,我想只有同是以 Java 作编程语言一点了。JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。

举个小例子:

var myVariable="outside"; 
function myFunction(){ 
var myVariable="inside"; 
alert(myVariable); 
} 
myFunction(); 
alert(myVariable);

jquery是所谓的javascript的框架,其实就是javacript函数的集合,打包。

Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。

举个小例子:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("p").click(function(){ 
$(this).hide(); 
}); 
}); 
</script>
Javascript 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 Javascript
jQuery遍历Table应用示例
Apr 09 #Javascript
通过url查找a元素并点击
Apr 09 #Javascript
js数组方法扩展实现数组统计函数
Apr 09 #Javascript
jquery实现pager控件示例
Apr 09 #Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 #Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 #Javascript
js定时调用方法成功后并停止调用示例
Apr 08 #Javascript
You might like
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
vue2.x select2 指令封装详解
2017/10/12 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中的多线程实例教程
2014/08/27 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
连锁经营管理专业大学生求职信
2013/10/30 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
单位创先争优活动方案
2014/01/26 职场文书
六个一活动实施方案
2014/03/21 职场文书
建筑工地质量标语
2014/06/12 职场文书
建筑安全责任书范本
2014/07/24 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
承诺函格式模板
2015/01/21 职场文书