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 相关文章推荐
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 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
php5新改动之短标记启用方法
2008/09/11 PHP
php empty函数 使用说明
2009/08/10 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
python使用多线程不断刷新网页的方法
2015/03/31 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
Python中list初始化方法示例
2016/09/18 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
python获取引用对象的个数方式
2019/12/20 Python
python烟花效果的代码实例
2020/02/25 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
法学研究生自我鉴定范文
2013/12/04 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技