目录——Web第三阶段：Javascrip和Jquery和EasyUI

待整理（以下表格部分来源于菜鸟教程）

 

JavaScript

轻量级的脚本语言

 

一些命令：

输出数据：

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

document.getElementById(id) ：获取元素

document.getElementById("").innerHTML=：修改获取元素中HTML中的内容

document.write() 仅仅向文档输出写内容。，如果在文档已完成加载后执行 document.write，修改所有内容，整个 HTML 页面将被覆盖。

 

一些规范：

1. 注释方式、运算符、条件语句与Java相同
2. ";"可以带也可以不带，作用是可以在同一行写多条命令
3. 会忽略多余的空格，可以自行选择添加增加可读；可以在字符串内通过\对代码行进行换行。
4. 一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
5. 对象方法通过添加 () 调用
6. 对大小写敏感
7. 可以使用索引位置来访问字符串中的每个字符，字符串的索引从 0 开始，可以在字符串添加转义字符“\”来使用引号
8. === 为绝对相等，即数据类型与值都必须相等；==值相等即可，!==为不绝对相等
9. 写HTML代码时在外面加引号
10.  默认是在代码的最后一行自动结束

 

关于变量：

1. 使用var定义变量，一般称为声明变量；
2. 多个变量以","分隔，可以横跨多行，但是不可以赋同一个值；
3. 未使用值来声明的变量，其值实际上是 undefined；有声明为局部变量，不可删除，无声明可为全局变量，可删除，在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象，所以可以通过window.变量名来调用；
4. 数组是一种特殊的对象，typeof返回的是object；
5. null是一个只有一个值的特殊类型。表示一个空对象引用，typeof返回的是object；

6. undefined 是一个没有设置值的变量，typeof 一个没有值的变量会返回 undefined，任何变量都可以通过设置值为 undefined 来清空。

7. 在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法，对象只有被定义才有可能为 null，否则为 undefined。

8.  5 种不同的数据类型：
    string
   number
   boolean
   object
   3 种对象类型（都返回object类型）：
   Object
   Date
   Array
   2 个不包含任何值的数据类型：
   null
   undefined
   function 
   特殊说明：
   NaN 的数据类型是 number
   数组(Array)的数据类型是 object
   日期(Date)的数据类型为 object
   null 的数据类型是 object
   未定义变量的数据类型为 undefined

9. String()和.toString可以将数字、日期、布尔值等转换为字符串

   toExponential()	把对象的值转换为指数计数法。
   toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字。
   toPrecision()	把数字格式化为指定的长度。

10. Number()可以将字符串、布尔值（0、1）、日期（.getTime()同效）等转换为数字

    parseFloat()	解析一个字符串，并返回一个浮点数。
    parseInt()	解析一个字符串，并返回一个整数。

11. 浮点型数据使用注意事项：
    JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

    所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：

    var x = 0.1;
    var y = 0.2;
    var z = x + y            // z 的结果为 0.3
    if (z == 0.3)            // 返回 false

    为解决以上问题，可以用整数的乘除法来解决：

    var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3

    更多内容可以参考：JavaScript 中精度问题以及解决方案

 

常见的事件（处理表单验证，用户输入，用户行为及浏览器动作）：其他

onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

 

关于正则表达式：

1、test()（返回true、false）、exec()（返回结果）

正则表达式修饰符：

修饰符 可以在全局搜索中不区分大小写:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

正则表达式模式：

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x|y)	查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

 

作用：

1、数据验证

典型的数据验证有：

• 必需字段是否有输入?
• 用户是否输入了合法的数据?
• 在数字字段是否输入了文本?

属性	描述
disabled	规定输入的元素不可用
max	规定输入元素的最大值
min	规定输入元素的最小值
pattern	规定输入元素值的模式
required	规定输入元素字段是必需的
type	规定输入元素的类型

完整列表，请查看 HTML 输入属性。

 

记录至表单验证（菜鸟教程）

 

 

Jquery

 

• 入口函数

1. Jquery入口函数：
   $(document).ready(function(){ // 开始写 jQuery 代码... });
   $(function(){ // 开始写 jQuery 代码... });    //简洁写法（与以上写法效果相同）:
   使用说明：防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作
2. JavaScript 入口函数:
   window.onload = function () { // 执行代码 }
3. jQuery 入口函数与 JavaScript 入口函数的区别：
   jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
   JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

 

• 一些规范：

1. 选择器都以美元符号开头：$()
2. "" 表示全部，# 选择id，. 选择class
3. 事件格式：

   页面中指定一个点击事件：$("p").click();

   定义什么时间触发事件。您可以通过一个事件函数实现：$("p").click(function(){ // 动作触发后执行的代码!! });

4.  

 

EasyUI

别的介绍先不整理，记录一下数据库不同时在现有代码基础上进行修改时的一些困惑和解决。（商品列表显示）

逆向工程生成对应自己数据库的文件，对pojo进行序列化

修改jsp中的field中的属性和显示名称即可，该属性个数无需与数据库完全一致，仅添加展示属性即可，但属性名要与数据库保持一致。

对应的Service，ServiceImpl，Controller实现及配置文件的相关修改。