Ajax Bootstrap JSP .jsp JS .js DOM 概念

WebVincent 2020-04-20

Ajax Bootstrap JSP .jsp JS .js DOM 概念
2018/12/03 Chenxin

Ajax
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术(或技巧?)。
使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户!核心对象XMLHTTPRequest。通过这个对象,您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果。
Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。

Bootstrap (Web框架)(包含十几个自定义的JQuery插件)
中文官网与使用手册: https://v3.bootcss.com/css/
对table的封装可以参考的框架: https://datatables.net/examples/basic_init/zero_configuration.html

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
Bootstrap 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机.

Bootstrap是Twitter公司基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。
基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

CSS部分:Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。属于CSS部分.
组件部分:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。属于布局组件部分。
JavaScript 插件:Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。属于插件部分.
定制:您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。

JSP .jsp JavaScript JS .js Jquery(一个Javascript框架) 说明
2016/11/25 Chenxin
1.JSP
全称 JAVA SERVER PAGE,是JAVA企业应用的一种动态技术,jsp是服务器端运行的JSP网页代码文件.Java和JSP是运行在服务器端的,也可以说他俩运行的结果就生成html,html是静态页面,而jsp是动态页面,jsp实际上就是servlet.
.jsp是jsp网页文件的后缀,而jsp是java web 的表现层的一种技术.

2.JavaScript
简称JS. javascript是一种解释性语言,和java没有关系(为了能火,名字里带个java). 是一种解释型的/基于对象和事件驱动的编程语言,由浏览器解释执行,可以直接嵌入HTML文档中,编写HTML文档就像编辑文本文件一样,格式为*.js,在Web页面中与HTML元素一起发挥作用;.js文件一般是以javascript为语法写的一些为html元素服务的函数/方法的库文件.在html里的嵌入方式.

Jquery是继prototype之后又一个优秀的Javascript框架.jquery 是一个函数库,基于javascript的,这个函数库让我们使用javascript进行网页dom操作的时候更加简便.它是轻量级的js库,jQuery使用户能更方便地处理HTML documents/events/实现动画效果,并且方便地为网站提供AJAX交互.jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可. 
用jquery的前提,首先要引用一个有jquery的文件:<script type="text/javascript"src="/Public/Js/jquery-1.6.2.min.js"></script>.

HTML XML DOM 说明
HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构。

什么是 DOM?Document Object Model(文档对象模型)的缩写。DOM 是 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准:“DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分:

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

什么是 XML DOM?
XML DOM 定义了所有 XML 元素的对象和属性,以及访问它们的方法。

什么是 HTML DOM?
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
HTML DOM 是:* HTML 的标准对象模型 * HTML 的标准编程接口 * W3C 标准

编程接口
可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。方法是您能够执行的动作(比如添加或修改元素)。属性是您能够获取或设置的值(比如节点的名称或内容)。
比如,getElementById() 方法. getElementById() 方法返回带有指定 ID 的元素: var element=document.getElementById("intro");

一些 DOM 对象方法(这里提供一些常用方法)
方法 描述
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

相关推荐

mmywcoco / 0评论 2020-06-06