深入理解JavaScript、DOM与jQuery的关系

JavaScript与DOM的关系

DOM（Document Object Model，文档对象模型）是浏览器内部元素对象的统称。网页开发中所有的JavaScript操作均需通过DOM接口执行。值得注意的是，DOM并非JavaScript语言规范的核心部分，而是浏览器提供的功能。因此，在标准的JavaScript参考文档中，甚至找不到如document.write这样常用的方法说明。DOM为HTML和XML文档提供了编程接口，允许开发者以结构化的方式表示文档，从而动态修改内容或样式。它将网页、脚本及其他编程语言连接起来，开发者可通过属性、方法和事件操控动态元素。每个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>标签进行增删改查等操作。

许多人因Java与JavaScript名称中均包含“Java”一词而误以为二者相同，作者早期亦有此误解。实际上，Java（全称Java Applet）是嵌入网页且拥有独立运行窗口的预编译小程序，其.class文件无法通过文本编辑器直接阅读，功能强大，可访问HTTP/FTP协议，甚至存在利用其植入病毒的风险。相比之下，JavaScript能力较弱，属于脚本语言，代码直接嵌入HTML文档，由浏览器在读取时编译执行，因此可通过查看HTML源码获取其源代码。JavaScript无独立运行窗口，依赖浏览器当前窗口，仅以Java为编程语言基础，是一种基于对象、事件驱动且具备相对安全性的客户端脚本语言，广泛用于Web开发，通过响应用户操作为HTML网页添加动态功能。

举个小例子：

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

jQuery框架简介

jQuery本质上是JavaScript函数的集合与封装，即JavaScript框架。

jQuery是继prototype之后另一款优秀的JavaScript框架。作为轻量级JS库（压缩后仅21KB），它兼容CSS3及多种浏览器（包括IE 6.0+、FF1.5+、Safari 2.0+、Opera 9.0+）。jQuery简化了HTML文档处理、事件管理、动画效果及AJAX交互的实现。其优势在于文档详尽、应用案例丰富且插件成熟。它实现了HTML内容与JavaScript代码的分离，开发者只需定义ID即可调用，无需在HTML中嵌入大量JS代码。

jQuery是目前使用最广泛的JavaScript函数库。据统计，全球排名前100万的网站中，有46%使用jQuery，远超其他库。微软甚至将其作为官方库。对于网页开发者而言，掌握jQuery是必要的，因为它代表了业界通用技术，有助于学习更高级的库，并能轻松实现复杂效果。

举个小例子：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>