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

 这篇文章主要介绍了JS、DOM和JQuery之间的关系,对此概念不是特别清楚的朋友可以参考下

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> 
 

时间: 2024-09-17 04:56:23

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

JS、DOM和JQuery之间的关系示例分析_基础知识

DOM(document object model) 其实是浏览器内元素对象的一个总称 我们用JavaScript对网页进行的所有操作都是通过DOM进行的.DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容,所以如果你下载一个JavaScript语言的参考帮助文档来查的话,就连妇孺皆知的document.write方法也找不到. 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以

使用js dom和jquery分别实现简单增删改_jquery

软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquery的强大: 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" con

原生Ajax 和jQuery Ajax的区别示例分析_jquery

前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的位置.打开时,在浏览器地址栏输入"localhost/指定页面"或者"127.0.0.1/指定页面"打开. 下面列出demo的HTML.PHP.原生ajax .jq ajax代码. HTML代码: 复制代码 代码如下: <!doctype html> <

JS对象转换为Jquery对象示例

 JS对象转换为Jquery对象的方便在于可以使用jquery的一些方法,下面有个示例,大家可以参考下  代码如下: $(document.getElementsByTagName("a")).each(function () {  if ($(this).text() == "jquerys") {  $(this).addClass("navTitle");  }  });   

Node.js中使用jQuery的方法示例

想要在NodeJs中使用jQuery? 首先,我们得安装jquery, npm install jquery .安装后的版本是 3.1.0 接着,第一感觉我们会使用 var $ = require('jquery') . 将以下代码保存为app.js var $ = require('jquery') $("body").append("<div>TEST</div>"); console.log($("body").ht

XML和数据库之间的关系

xml|数据|数据库  1.0 简介    本论文简要的探讨了XML和数据库之间的关系,同时列出一些可以使用数据库处理XML文档的软件. 虽然这里不打算详尽地介绍这些软件,但是笔者希望它能够描述使用数据库处理XML文档中的主要部分.这里有点偏向与关系数据库,因为我的经验如此.     2.0 XML是数据库吗?     在开始讨论XML和数据库之前,我们需要回答一个萦绕在很多心头的问题: "XML是数据库吗?"在严格意义上将,如果"XML"是指XML文档时,答案是&

常见Web技术之间的关系,你了解多少?

摘要:本文主要探讨了Web开发技术之间的关系,以及他们组合起来到底有什么用的问题. 如果你是一个Web开发初学者,那么你难免会在网上搜索HTML, CSS, XML, JS(Javascript), DOM, XSL等等这些词的意思,然而,随着学习的深入.当你把他们搅在一起,你又糊涂了,你会不停的问,HTML是什么?CSS是什么?XML是什么?JS是什么?它们到底有什么用?无论是网络百科,还是一些IT专题网站,又或者一些牛人博客,他们都会告诉你,某个单一的东西是什么,这类文章很多,但很少有涉及,

js iframe 父子页面之间的通信做法

js iframe 父子页面之间的通信做法 同域下父子页面的通信   父页面 parent.html <html> <head> <script type="text/网页特效"> function say() { alert("parent.html------>I'm at parent.html"); } function callChild() { //document.frames["myFrame&qu

MySQL---数据库从入门走向大神系列(四)-子查询、表与表之间的关系

本篇博客讲解(子查询)非相关子查询/相关子查询,一对一,一对多,多对一,多对的的关系! 准备: 首先我们创建一列sex.再为部分行设置好值0(女)或者1(男): delete from stud where age=26; 删除年龄为26的行. update stud set sex='1' where saddress like '湖南%'; 将地址中湖南开头的人的的sex修改为1. update stud set sex='0' where age>=30 and sex is null;