java web

Posted 2021-02-16 dxllp

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了java web相关的知识，希望对你有一定的参考价值。

网站的架构

CS：Client Server 客户端和服务端
- 移动客户端：android和ios
- 电脑客户端：windows和linux、Mac OS 客户端是由客户端工程师开发
- 服务端功能：给客户端提供数据应用场景：京东、淘宝、唯品会
BS：Browser Server 浏览器和服务端浏览器服务端功能：给浏览器提供数据和页面应用场景：页游
将来工作 BS和CS架构都会涉及，但是只需要掌握BS架构 CS就会了

前端介绍

html ：用来勾勒出页面的结构和内容(骨架)
CSS ：用来美化页面
javascript：让页面呈现动态效果和动态数据的
JQuery：用来简化JavaScript代码的

HTML

Hyper Text Markup Language：超文本标记语言

什么是超文本：不仅仅是文本，还包括文本的字体颜色，样式还包括多媒体（图片，音频，视频）
html学习内容：学习有哪些固定的标签，还有标签内部有哪些属性和标签和标签之间的嵌套关系

通过Eclipse创建html文件

新建文件-> other->搜索html

html结构

    <!DOCTYPE html>   //文档声明 告诉浏览器使用html的哪个版本来解析页面内容 ，此写法是告诉浏览器用最新的html5的版本解析 
    <html>//所有内容都在html标签内部 除了 文档声明
        <head>//头 ：里面的内容是给浏览器看的 比如使用什么编码 
        </head>
        <body>//体 ：里面的内容是给用户看的 
        </body>
    </html>

head里面的标签

    <meta charset="UTF-8">：告诉浏览器使用哪种字符集解析

    <title>Insert title here</title> 告诉浏览器 页面标题是什么，title还可以起到优化SEO的作用（让搜索引擎尽快搜索到此页面）
     keywords的作用：让搜索引擎尽快的找到本页面

Body内部的标签

文本标签

    1. <h1></h1>.......<h6></h6> 内容标题
      - align：left/center/right  水平对齐方式
    2. <p></p>    段落标签 ，每个段落标签独占一行并且上下会留有空白区域
    3. <hr> 水平分割线
    4. <br> 换行

Map 图像地图

什么是图像地图：可以将图片的某个区域作为可点击的链接

使用方式：

<!-- usemap:使用地图 #代表当前页面 -->
<img  src="../imgs/b.jpg" usemap="#mymap">
<!-- 为了保证兼容性问题 把name和id都写上  -->
<map name="mymap" id="mymap">
    <!-- area区域  shape形状 rect矩形 coords坐标-->
    <area shape="rect" coords="0,0,200,200" 
            href="../imgs/2.gif">
    <area shape="circle" coords="663,473,90"
         href="../imgs/d.jpg">
</map>

map中的id和name作用是让图片能够找得到此地图
area常见属性： shape表示形状常用有circle和rect
href：值为一个路径，可以写相对路径和绝对路径，路径可以指向页面，也可以指向文件（浏览器可以打开的文件直接浏览，不能打开的文件则下载）

超链接 a标签

如果a标签没有添加href属性就相当于一个文本不是超链接
href属性和图像地图中的href作用一样
target="_blank" 开启一个新的页面
锚点用法：需要先创建锚点:, 然后通过a标签跳转到锚点的位置：跳转到锚点
img标签放在a标签内部则图片就可以被点击了

表格 table

接触标签有 table tr td
table的属性：align水平对齐 width宽度 border边框 cellspacing边框和单元格的距离 cellpadding内容和单元格的距离
td的属性：colspan跨列 rowspan跨行 align水平对齐 (row 行 col 列）
caption标签
分组标签：没有任何显示效果，提高代码可读性
```
即：<thead> <tbody> <tfoot> 
```

表单

<form action="提交地址" method="get/post"></form>

表单的作用是收集用户的数据提交到服务端
表单中的控件包括：文本框、密码框、按钮、下拉列表、单选、复选、时间选择、文件选择、文本域

文本框

    <input type="text" placeholder="占位文本" maxlength="最大字符长度" readonly="只读" >

密码框

    <input type="password" maxlength>

单选

    <input type="radio" checked默认选中>

多选、复选框

    <input type="checkbox" id="aaa">  <label for="aaa">xxx</label>

时间

    <input type="date" >

文件

    <input type="file" >

下拉选

    <select name>
            <option value selected></option>
    <select>

文本域

    <textarea rows="行数" cols="列数"></textarea>

隐藏域

    <input type="hidden">

按钮

    <input type="submit/reset/button" value="按钮标题">

CSS

美化页面的技术
Cascading 层叠 Style 样式 Sheet 表：层叠样式表，CSS用于美化html页面，html可以理解成盖房子，CSS相当于装修

CSS的引入方式

内联样式：在标签内部通过 style属性添加样式，弊端：只能作用于一个元素，不能复用，几乎不使用

<div style="color: red;border: 1px solid green;">我是一个div</div>
<span style="color: purple;border: 1px solid pink">我是一个span</span>

内部样式：在head标签内部通过 style子标签添加样式，好处：可以在本页面内复用样式，弊端：不能多个页面复用同一样式，工作中此种方式用的不多，但是学习的时候使用内部样式，主要是方便演示
```
<style type="text/css">
    /* 标签名选择器 */
    h3{
        color: blue;
        border: 2px solid yellow;
    }
</style>
```
外部样式：样式代码写在单独的*.css文件中，通过link标签引入到某个html页面中，好处：样式可以复用在多个页面中
```
<link rel="stylesheet" href="demo01.css">
css文件：
@charset "UTF-8";

p{
    color: red;
    background-color: green;
}
```

三种引入方式的优先级

如果三种引入方式作用的样式不同则全部生效
如果三种引入方式作用的样式相同则按照下面的优先级规则来决定到底哪个生效
内联优先级最高
内部和外部后执行会覆盖先执行的

CSS的选择器

基础选择器

标签名选择器
应用场景：当需要对页面中所有的某一种标签设置相同效果的时候标签名{ 样式名称:值; 样式名称:值; }
id选择器
通过标签的id属性找到对应的标签
应用场景：当需要对页面中的某一个元素设置样式的时候使用
```
#标签id{
    样式名称:值;
    样式名称:值;
}
```
类选择器
通过标签的class属性找到对应的标签
应用场景：当需要对页面中的多个元素设置样式的时候使用
```
.class{
    样式名称:值;
    样式名称:值;
}
```

其它各种选择器

属性选择器

通过标签内部指定属性查找对应的标签

标签名[属性名="属性值"]{
    样式名称:值;
    样式名称:值;
}

派生选择器(后代选择器)
通过多个标签之间的上下级关系查找子元素和孙子元素和。。。。所有后代元素
```
基础选择器 基础选择器 基础选择器{
    样式名称:值;
    样式名称:值;
}
```
子元素选择器

通过多个标签之间的上下级关系查找子元素。

基础选择器>基础选择器>基础选择器{
    样式名称:值;
    样式名称:值;
}

分组选择器
分组选择器可以把多种选择器通过逗号连接到一起，给多个选择器设置相同的样式 h3,p,.d1,#abc,#bcd{ color:red; }
伪类选择器
用于选择元素的状态
visited：访问过的状态
link：未点击状态
hover：鼠标悬停状态
active：鼠标点击时的状态
使用方式： /* 访问过的状态 / a:visited { color: red; } / 未点击状态 / a:link { color: yellow; } / 鼠标悬停状态 / a:hover { color: blue; } / 鼠标点击时的状态 */ a:active { color: pink; }
任意元素选择器
如果需要给页面中所有的元素设置相同的样式可以使用此选择器
```
*{
    样式名称:值;
    样式名称:值;
}
```

如果多个选择器设置相同样式的效果时，作用范围越小优先级越高

CSS中常用的属性

已经接触的属性 color（字体颜色）background-color(背景颜色) border（边框）

元素的宽高：

块级元素的默认高度为内容高度，默认宽度为父元素的宽度
行内元素的默认宽高为内容的宽高
只能修改块级元素的宽高，不能修改行内元素的宽高

设置元素的颜色

    /*1. 通过颜色名称赋值 red yellow green
     blue pink purple white black orange gray

    /*2. 6位16进制赋值 每两位表示一个颜色 红 绿 蓝   */
      background-color: #ff00ff; 

    /*3. 3位16进制赋值 每一位表示一个颜色  */
      background-color: #00f; 

    /*4. 通过3位 10进制赋值 每个取值0-255  */
      background-color:rgb(255,255,0); 

    /*5. 4位10进制赋值 第四位代表透明度取值0-1 */
      background-color: rgba(0,255,0,0.5);

设置元素的背景图片

    /* 设置背景图片 */
       background-image: url("../imgs/a.jpg");

    /* 设置背景图片的大小 参数为宽和高  */ 
       background-size: 100px 100px;

    /* 设置背景图片不重复 */
       background-repeat: no-repeat;

    /* 设置背景图片的位置 left center right top bottom 
       第一个参数代表水平 第二个参数代表垂直*/

    /* background-position: right center; */
    /* 通过百分比控制位置 */
       background-position:90% 90%;

盒子模型

外边距

元素距离父元素或相邻兄弟元素的距离称为外边距

赋值方式：

 margin: 40px; 四个外边距都是40px 

 margin: 20px 50px; 上下20 左右50 

 margin: 0 auto; 水平居中 

 margin: 10px 30px 60px 90px; 顺时针 上右下左

块级元素：上下左右都生效
行内元素：只有左右生效上下不生效
外边距粘连问题：当元素的上边缘和父元素的上边缘重合的时候，子元素的上外边距会带着父元素一起移动，通过在父元素中添加 overflow:hidden;解决。
上下外边距取最大值，左右外边距相加

边框

border: 粗细(像素值) 边框的样式(solid) 颜色

border: 10px inset purple; 

border-bottom:5px solid yellow;

border-left:5px solid pink;

border-top:5px solid green;

border-right:5px solid black;

border-radius:55px;/*圆角 值越大越园

块级元素：上下左右边框全部生效，而且边框都会占显示区域
行内元素：上下左右边框全部生效，但是只有左右边框才会占显示区域，上下不占显示区域（不会增加元素自身的高度）

内边距

内容距离边框的距离
给元素添加内边距会影响元素的宽高
移动元素内的子元素几种方式？两种：1. 给大的添加内边距（大的所占宽高会跟着改变） 2. 给小的添加外边距
移动元素内的文本的时候几种？一种：只能给大的添加内边距。
块级元素：内边距四个方向都生效，而且都会影响元素的显示范围
行内元素：内边距四个方向都生效，左右影响显示范围，上下不影响显示范围

块级元素和行内元素关于盒子模型的总结

块级元素：可以设置宽高，外边距全部生效并且影响元素的所占宽高, 边框四个方向都生效，并且影响元素的所占宽高，内边距全部生效，并且影响元素所占的宽高
行内元素：不可以设置宽高，外边距左右生效，上下不生效，边框都生效，上下不影响所占高度，内边距都有效果，左右影响所占宽度上下不影响所占高度

元素所占宽度计算公式

宽高为100*200 左外边距10 右外30  边框5px 左内8px 右内2px

100+10+30+5*2+8+2

左外边距+左边框+左内边距+元素宽度+右内边距+右边框+右外边距

文本相关的属性

    文本相关属性 */

    文本水平对齐方式 center/left/right

    例：text-align: center;

    文本修饰  none 没有 underline 下划线overline 上划线 line-through 删除线

    例：text-decoration: line-through;

    文本颜色 color: red;

    行高  通常让文本垂直居中的时候使用行高 line-height: 100px;

    文本阴影   4个参数 1. 阴影颜色  2和3是阴影的偏移值  4. 阴影的模糊度 值越小越清晰 0是不模糊

    例：text-shadow: #0f0 -15px 15px 1px;

字体相关属性

    字体相关属性 

    font-size: 20px;

    字体粗细属性  normal 不加粗 bold 加粗 lighter 比普通细一些

    font-weight: lighter;

    字体样式  可以设置多个值通过逗号分隔，以此检测哪个生效用哪个

    font-family: "楷体";

    设置斜体 font-style: italic;

溢出设置

指子元素显示范围超出父元素范围时的设置

visible(默认 超出显示)

hidden: 超出不显示

scroll:超出滚动显示  

overflow: hidden;

元素显示方式

block：块级元素默认的显示方式，独占一行，可以修改宽高
inline：行内元素的默认显示方式，共占一行，不可以修改宽高
inline-block:行内块，共占一行并且可以修改宽高

元素的定位

position定位

静态定位（文档流定位）（默认）

元素如果是块级元素则默认从上到下排列，如果是行内元素则从左向右排列
设置方式： position:static;

相对定位

相对于元素初始的位置，通过left/right/top/bottom让元素做位置的偏移
元素不会脱离文档流
场景：当元素需要从当前位置做位置偏移的时候，并且不希望其它元素跟着移动时使用此定位

绝对定位

会脱离文档流后面有元素的话会顶上来
left/right/top/bottom 做位置偏移，相对于谁？ 1. 相对于窗口(没有祖宗或有祖宗但是没有做非static定位) 2. 相对于祖宗元素(有祖宗并且有某个祖宗做了非static定位，如果都做了，则就近原则)（如果仅仅是为了给子元素做位置的参考一般都使用relative）
场景：当元素需要相对于某个祖先元素或窗口做位置偏移的时候，并且不再占用原来的位置时使用此定位方式

固定定位

固定在窗口的某个位置，不会随着内容位置改变而改变
脱离文档流，left/right/top/bottom 坐标相对于窗口

浮动定位

元素脱离文档流，元素在当前所在行内左侧或右侧浮动，当撞到父元素边框或浮起来的兄弟元素边缘的时候
如果所有浮动的元素一行装不下会自动换行，但是如果有凸出的元素会有卡住的效果
如果元素浮动则后面的元素会往上顶(因为浮动会脱离文档流)，如果不希望后面的元素往上移动，则需要在后面紧邻的元素上添加clear属性设置both/left/right,禁止元素两边/左/右有浮动的元素。
如果元素的所有子元素全部浮动，并且元素没有设置高度，此时自动识别的高度为0，可以通过添加 overflow:hidden; 让元素能够识别出浮动后子元素的高度
应用场景：当多个纵向排列的元素需要改成横向排列的时候使用浮动定位
练习： demo08.html 页面中添加一个无序列表把列表项改成横向排列

行内元素的垂直对齐方式

默认对齐方式为基线对齐 vertical-align：baseline
top/middle/bottom

CSS的三大特性

继承性：子元素可以继承父元素的部分属性，只能继承color/font-开头/text-文本相关/line- 此类型的属性，不仅仅子元素继承所有的后代元素都会继承
如果元素自身所带的样式和继承的冲突则以自身所带样式为准，如：h标签的字体大小，超链接的文本颜色和文本下划线
层叠性：通过不同的选择器可以多次指向同一个元素，如果设置的样式不同则全部生效，如果多个选择器设置的样式相同，则根据CSS的第三特性优先级来决定
优先级：
直接选中优先级高于间接选中(继承属于间接选中)
如果相同选择器，则后执行的覆盖前面的
不同选择器，作用范围越小优先级越高 id>class>标签名>继承

小结

溢出设置 overflow:hidden/visible/scroll;
显示方式： display：block/inline/inline-block
position定位：
- static静态定位（文档流定位）：从上到下从左向右
- relative相对定位：不脱离文档流，上左下右相对于元素初始位置
- absolute绝对定位：脱离文档流，相对于窗口或做了非static定位的祖先元素
- fixed固定定位：脱离文档，相对于窗口
浮动定位：从当前行向左或向右浮动，脱离文档流，后面元素如果不希望往上顶的添加clear:left/right/both;
当所有子元素都浮动后自动识别的高度为0，可以通过overflow：hidden解决
行内元素垂直对齐方式： vertical-align：baseline(基线)，top,middle,bottom
CSS三大特性
- 继承：可以继承祖先元素的部分样式只能继承 color、text-，font-,line-这些样式
- 层叠：多个选择器可以作用到同一个元素上如果样式不同则全部生效（层叠到一起），如果相同则取决于优先级
- 优先级：直接选中高于间接选中（继承），作用范围越小优先级越高，如果选择器相同，后执行的生效， id>class>标签名>继承

JavaScript 简称JS

html搭建页面结构和内容 CSS用来美化页面 JS给页面添加动态效果或显示动态内容

JS历史

1995年由网景（NetScape）公司发布 LiveScript 同年改名为 JavaScript，和Java没啥关系主要为了蹭热度

JS特点

属于脚本语言不需要编译由浏览器解析执行
JS可以嵌入到Html文件中
JS是基于面向对象语言
JS属于弱类型语言

JS优点

交互性：可以直接和用户进行交互
安全性： JS语言只能访问浏览器内部内容，不能访问浏览器以外内容(指磁盘中的各种数据)

如何在html文件中嵌入js代码

<!-- 1. 在元素的事件中添加js代码 -->

<input type="button" value="点我试试" onclick="alert(‘第一种引入方式成功！‘)">


<!-- 2. 通过script标签添加js代码  可以写在任意位置-->

    <script type="text/javascript"> alert("第二种引入方式");</script> 

<!-- 3.通过单独的*.js文件写js代码 以下方式引入 引入文件后不能在当前script标签体内写js代码  -->

<script type="text/javascript" src="first.js"> //这个位置不能再写js代码</script>

JavaScript语法

数据类型

数值类型（number）
字符串类型(string)
布尔值类型(boolean)
undefined (未定义)
对象类型 null

变量的声明和赋值

因为js属于弱类型语言声明变量的时候不需要指定类型，直接赋值即可
```
var x = 18;
var s = "abc";
s = 20;
var b = true/false;
var y;
```
如果变量只声明没有赋值则此变量的类型为undefined 值也是undefined。

数值类型

在js中所有的数值底层都是浮点型，在使用过程中会自动转换整数或小数
```
int x = 5/2; x=?(在java中结果是2)   
var x= 6/2; 3
var x = 5/2; 2.5
```
NaN（Not a Number）：不是一个数，用来判断一个变量是否为数值类型判断方式通过isNaN()函数判断,当变量不是数的时候为true，是数为false
```
isNaN(20);  false
isNaN("aaa"); true
```

字符串

通过单引号或双引号修饰一个字符串
```
例如：var s1 = ‘abc‘; var s2="abc";
```

布尔值

值为true和false

undefined

此类型只有一个值为undefined，变量声明但未定义的话为undefined

null

null为对象类型的值
```
var p = null; 
```

js各种类型间的隐式转换

数值类型

转字符串： 18->"18"     "abc"+18   "abc18"

转布尔值： 0和NaN转false 其它所有数转true

字符串

转数字：  "18"->18   "abc"->NaN  "18abc"->18

转布尔值: ""空字符串转成false  其它都是true

布尔值

转数字： true->1   false->0
转字符串：true->"true"    false->"false"

undefined

转数字  NaN     21+undefined= NaN  NaN和任何数值进行运算都得NaN
转布尔值  undefined->false   
转字符串 undefined->"undefined"

null

转数字  null->0
转布尔值    null->false 
转字符串 null->"null"    "abc"+null = "abcnull"

测试在页面中添加两个按钮点击时弹出 "66"+6 和 "66"-6 的结果(666 60)

运算符

js中运算符和Java中的基本一致
==和===：==会在比较两端变量数值之前先将变量类型统一，统一后再比较值.===会先比较类型是否相等如果相等再比较数值如果不等就直接false "666"==666 true "666"===666 false
typeof 获取变量的类型 typeof 234234+6 = "number6"
除法运算会自动根据结果转换整数还是小数

语句

包括：if else while do while for switch case - 条件如果不是布尔类型会自动转换成布尔类型 - for 中把int改成var， js中不支持增强for循环(foreach)

    for(var i=0;i<10;i++){
    }

函数(方法)

public String run(String name,int age){ return "abc"; }

格式一： function 函数名(参数列表){ return 18; } 例如：
```
function fun(name,age){
    return "abc";
}
```

格式二：

var 函数名 = function(参数列表){
    return "abc";
}

和页面元素相关的函数

得到页面元素对象的函数
```
var x = document.getElementById("id");
```
获取value值或给value赋值
```
var z = x.value;    x.value="abc";
```
给元素添加文本内容
```
x.innerText="abc";  
```
给元素添加html代码
```
x.innerHTML="<h1>abc</h1>";
```

内容介绍

String 数组日期对象正则

字符串强转成数值

parseFloat: 把字符串转成整数或小数
parseInt: 把字符串/小数转成整数
Number：等效parseFloat

String常用Api

字符串创建的方式

var str1 = "abc";
var str2 = new String("abc");

转大写和转小写
```
toUpperCase()  toLowerCase();
```

查找字符串出现的位置

str.indexOf(‘a‘)获取a在str中第一次出现的位置
str.lastIndexOf("a")获取z在str中最后一次出现的位置

截取字符串

str.substring(start,[end]);  //end可以省略

替换字符串
```
str.replace(old,new);
```
拆分字符串
```
str.split(":") a:b:c  [a,b,c]
```

数值函数

四舍五入 num.toFixed(2);//参数表示保留几位小数

数组相关函数

创建数组

var arr1 = ["刘备",50,true];
var arr2 = new Array();//空数组

数组中添加元素
```
arr.push("小明");
arr.push(18);
```
获取数组中的数据
数组 var arr = ["a",18,true]; arr = new Array();
- 添加元素 push
- 获取元素 arr[0];
- 数组长度 arr.length = 3;
- 反转 arr.reverse() 1,2,3 3,2,1
- 排序 arr.sort() 通过unicode编码排序
- 自定义排序 function mysort(a,b){return a-b/b-a};
日期相关
- var d = new Date();
- var d = new Date("2011/10/22 18:00:00");
- d.getFullYear()
- d.getMonth()
- d.getDate()
- d.getDay()
- d.getHours()
- d.getMinutes()
- d.getSeconds()
- d.toLocaleDateString() 年月日
- d.toLocaleTimeString() 时分秒
正则
- 创建方式两种
```
var reg = /^a/i;
var reg = new RegExp("^a","i");
```
- 相关函数：
  1. reg.exec(str) 查找内容
  2. reg.test(str) 校验文本
  3. str.match(reg) 查找内容得到装着所有内容的数组
  4. str.replace(reg,"新内容")

事件的取消

在元素的事件中如果执行 return false 则取消当前事件
```
<a href="http://tmooc.cn" onclick="return false">Tmooc</a>
```

失去焦点事件

失去焦点以文本框为例，当光标离开的时候，此事件触发
```
<input type="text" onblur="">
```

控制元素的隐藏和显示

display:block/inline/inline-block/none(隐藏脱离文档流)
visibility：hidden(隐藏不脱离文档流)/visible（显示）

自定义对象

    /* 通过声明函数的形式声明一个对象 */
    function Person(name,age){
    //声明属性
    this.name=name;
    this.age=age;
    //声明方法
    this.run=function(){
        alert("name="+this.name+" age="+this.age);
    }
    }
    //创建对象
    var p = new Person("貂蝉",85);
    p.run();

    /* 声明空对象 */
    function SuperMan(){
    }
    //创建对象 
    var sman = new SuperMan();
    //添加属性
    sman.name="克拉克";
    sman.age=18;
    //添加方法
    sman.fly = function(){
        alert("我叫"+this.name+"今年"
                +this.age+"岁，我在飞");
    }
    //调用方法
    sman.fly();


    /* 第二种声明对象的方式 */
    /* 以声明变量的形式创建对象 */
    var p = {
            "name":"吕布",
            "age":25,
            "run":function(){
                alert("name"+this.name+" age="+this.age);
            }
    }
    //调用对象的方法
    p.run();

DHTML

简介： Dynamic(动态) HTML，不是一门新技术，把HTML，CSS，JavaScript整合到一起得到的一门动态页面技术
DHTML包括： BOM Browser浏览器 Object对象 Model模型和 DOM Document文档 Object对象 Model模型
BOM：浏览器对象模型，包括一些和浏览器相关的对象和函数
DOM：文档对象模型，包括一些和页面相关的对象和函数

技术图片

BOM的相关内容

window

window中所有的属性和函数，调用时可以把window省略掉，

window中的属性称为全局属性，函数称为全局函数

window的全局函数

parseFloat/parseInt() 

alert();//弹出框

confirm();//确认框

prompt();//弹出文本框

isNaN();

window的全局属性

location（地址）：

location.href 可以获取和设置浏览器当前的显示地址

location.reload()  页面刷新

history（历史）： history.length 得到当前窗口访问过的页面数量

history.forward() //访问下一个页面

history.back() // 访问上一个页面

history.go(num) 前往某个页面 0代表当前页面，1代表下个页面，

2代表下两个页面 -1 代表上一个 -2 代表上两个页面

screen（屏幕）：

width/height: 获取屏幕的分辨率
availWidth/availHeight：获取屏幕可用分辨率

navigator（导航、帮助）

navigator.userAgent 获取浏览器的版本信息

window相关的事件

点击事件
加载完成事件
获取到焦点事件

失去焦点事件

/* 窗口点击事件 */
/* onclick = function(){
    //alert("窗口被点击了");
    location.href="http://tmooc.cn";
} */
/* 页面加载完成时执行 */
onload = function(){
    var input = document.getElementById("ip1");
    input.value="abc";
}
/* 获取和失去焦点事件 */
onblur = function(){
    console.log("失去焦点");
}
onfocus = function(){
    console.log("得到焦点");
}

eval()函数

可以将字符串以js代码的形式执行

通过js给元素添加css样式

div.style.css样式属性名称 = "属性的值";

定时器

通过定时器可以实现每隔一段时间执行某些代码
var id = setInterval(函数,3000);//每隔3秒执行函数
clearInterval(id);//停止定时器
setTimeout(函数,2000);//两秒后执行函数

DOM

DOM 文档对象模型，学习dom主要掌握如果对html中的标签进行增删改查操作

查找元素

通过id查找 document.getElementById("id");
通过标签名查找 document.getElementsByTagName("标签名");
通过元素的name属性查找 document.getElementsByName("name属性的值");
通过元素的class属性查找 document.getElementsByClassName("class属性的值");
获取body元素 document.body

通过层级关系查找元素

获取元素的上级元素 parentElement;
获取元素的下级内容（包括元素和文本内容和换行） childNodes
获取元素的兄弟 x.parentElement.childNodes;

创建元素

var h1 = document.createElement("h1");

添加元素到某个元素里面

父元素.appendChild(新元素);

插入元素到某个元素的上面

父元素.insertBefore(新元素,弟弟元素);

删除元素

父元素.removeChild(被删除的元素);

事件相关

事件分类

鼠标事件： onclick(点击) onmouseover(鼠标移动到元素上面) onmouseout(鼠标移出元素) onmousedown(在元素上鼠标按下) onmouseup(在元素上鼠标松手) onmousemove(在元素上移动)
键盘事件： onkeydown（键盘按下） onkeyup(键盘松开)
状态改变事件：onchange(value值发生改变的事件) onload（页面加载完成事件） onfocus(获得焦点事件) onblur(失去焦点事件) onsubmit(表单提交事件) onresize(窗口尺寸改变事件)

事件绑定

在元素标签中添加
```
<input type="text" onkeydown="downfn()">
```
- 此种方式添加事件，事件函数中的this代表的是window 如果需要用到事件对应的元素可以在标签中调用函数的时候传递过去一个this 此时的this代表元素自身

动态绑定事件

/* 动态绑定事件 */
    /* mybtn.onclick = function(){
        alert("动态绑定成功！");
    }
     */
    mybtn.onclick = myfn;

动态绑定的事件，事件函数中的this代表事件对应的元素

Event对象

通过Event对象可以得到和事件相关的信息

可以通过event得到鼠标点击屏幕的坐标 event.clientX event.clientY
可以通过event得到键盘按键的编码 event.keyCode

通过event获得事件源（事件源指添加事件的元素）

/* 通过event得到事件源  存在兼容性问题 

    有的浏览器支持target 有的支持srcElement

    通过以下写法可以保证任何浏览器都能正常执行*/

    var obj = event.target||event.srcElement;

    alert("标签名称："+obj.nodeName);

事件传递（事件冒泡）

如果同一个区域有多个事件响应，响应的顺序类似气泡，从下往上，也就是从底层元素往上级元素执行，这个过程称为事件传递
如果页面中有多个元素需要添加事件，可以把事件添加在它们共同的上级元素上面，然后获得事件源，通过判断事件源来处理不同的事件

JQuery

什么是JQuery

是一个通过JavaScript代码写的关于JavaScript的框架
用来简化js代码
可以像css一样通过选择器获取元素
可以快速修改元素的样式

如何引入jQuery

因为jQuery就是一个js文件所以引入方式和引入一个普通的js文件一样
```
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
```

jQuery对象和js对象互相转换

把js转成jq

/* 得到js对象 */

var input = document.getElementById("myinput");

/* 把js对象转成jQuery对象 */

/* $是jQuery单词的缩写  $=jQuery */

var $jq = $(input);

/* 弹出文本框的value值 */

把jq转成js

/* 得到jq对象 */

   var $jq = $("#myinput");

/* 把jq转成js对象 */

//第一种写法
  var js1 = $jq[0];

//第二种写法
  var js2 = $jq.get(0);
  alert(js1.value+"="+js2.value);

选择器

基础选择器

标签名选择器
```
var $div = $("div");    
```
id选择器
```
var $div = $("#id");    
```
类选择器
```
var $div = $(".class"); 
```
分组选择器
```
var $div = $("div,#id,.class"); 
```
任意元素选择器
```
var $div = $("*");  
```

层级选择器

$("div span") 匹配div下所有的span元素
$("div>span") 匹配div的所有span子元素
$("div+span") 匹配div相邻的后面的兄弟span元素
$("div~span") 匹配div后面所有的兄弟span元素

层级函数当得到某个元素对象后需要获得该元素的相关元素的时候使用

获取元素的所有兄弟元素
```
$("#abc").siblings("div");  
```
获取元素的哥哥元素
```
$("#abc").prev("div");
```
获取元素的哥哥们元素
```
$("#abc").prevAll("div");
```
获取元素的弟弟元素
```
$("#abc").next("div"); 
```
获取元素的弟弟们元素
```
$("#abc").nextAll("div"); 
```

过滤选择器

$("div:first")匹配所有div中的第一个
$("div:last")匹配所有div中的最后一个
$("div:even")匹配所有div中的偶数从0开始
$("div:odd")匹配所有div中的奇数从0开始
$("div:eq(n)") 匹配所有div中下标等于n的从0开始
$("div:lt(n)") 匹配所有div中下标小于n的从0开始
$("div:gt(n)") 匹配所有div中下标大于n的从0开始
$("div:not(.abc)" 匹配所有div中class值不等于abc

内容选择器

$("div:has(p)") 匹配所有包含p标签的div
$("div:empty") 匹配所有空的div
$("div:parent")匹配所有非空的div
$("div:contains(‘abc‘)") 匹配包含abc文本内容的div

可见选择器

$("div:hidden") 匹配所有隐藏的div
$("div:visible")匹配所有可见的div

显示隐藏相关的函数

让隐藏的元素显示 $("div:hidden").show();
让显示额元素隐藏 $("div:visible").hide();
切换隐藏和显示状态 $("#abc").toggle();

属性选择器

$("div[id]") 匹配所有有id属性的div元素
$("div[id=‘abc‘]") 匹配有id属性值为abc的所有div
$("div[id!=‘abc‘]") 匹配有id属性值不为abc的所有div

子元素选择器

$("div:nth-child(n)") 获取div中第n个子元素从1开始
$("div:first-child") 获取div中第1个子元素
$("div:last-child") 获取div中最后一个子元素

表单选择器

$(":input") 匹配所有文本框密码框单选多选下拉选文本域按钮
$(":password") 匹配所有密码框
$(":radio")匹配所有单选
$(":checkbox")匹配所有多选（复选框）
$(":checked")匹配所有被选中的单选、多选、下拉选
$("input:checked") 匹配所有被选中的单选、多选
$(":selected") 匹配被选中的下拉选

和页面(DOM)相关

创建元素

var div = document.createElement("div");
var $div = $("<div>abc</div>");

添加到页面中

$("#big").append($div); //添加到最后面
$("#big").prepend($div);//添加到最前面

插入元素

兄弟元素.after(新元素) 加载兄弟元素的后面

兄弟元素.before(新元素) 加载兄弟元素的前面

//添加到二哥前面 before

$("h1:contains(‘二‘)").before($h1);

//添加到二哥的后面 after

$("h1:contains(‘二‘)").after($h1);

删除元素
- 通过自己删除 $("#id").remove();
- 先匹配到所有的指定类型元素从里面删除某些元素 $("div").remove("#abc");
修改元素的样式css
```
$("div").css("color","red");
```

属性

$("#abc").attr("id"); 获取id的属性值  
$("#abc").attr("class","aaa"); 给元素添加class属性值为aaa

文本

$("#abc").text()  获取文本内容
$("#abc").text("啊啊啊") 赋值文本内容

html

$("#abc").html()  获取文本内容
$("#abc").html("<h1>啊啊啊</h1>") 赋值文本内容

获得元素的子元素和父元素

children() 得到所有子元素
parent() 得到父元素

jq事件相关内容

常见事件

鼠标相关： click 点击 mouseover mouseout mousedown mouseup mousemove
键盘： keydown keyup
状态： $(function(){}) focus blur submit resize窗口尺寸改变 change当value值发生改变时的事件

事件模拟

    //开启定时器
    setInterval(function(){
        //模拟事件
        $("input").trigger("click");
    },3000);

hover事件合并函数

hover(fn1,fn2); 等效 mouseover + mouseout

$("div").hover(function(){
    $("div").css("color","red");
},function(){
    $("div").css("color","green");
})

动画相关

function fn1(){//隐藏
    $("img").hide(3000);
}
function fn2(){//显示
    $("img").show(3000,function(){
        alert("啦啦啦"); 
    });
}

function fn3(){//滑出
    $("img").slideUp(2000);
}

function fn4(){//滑入
    $("img").slideDown(2000);
}

function fn5(){//淡入
    $("img").fadeIn(2000);
}

function fn6(){//淡出
    $("img").fadeOut(2000);
}

function fn7(){//自定义
    $("img").animate({"left":"250px"},1000)
        .animate({"top":"250px"},1000)
        .animate({"left":"0px"},1000)
        .animate({"top":"0px"},1000)
        .fadeOut(2000,function(){
            $(this).remove();
        });
}

音频视频播放

<!-- autoplay自动播放  loop循环播放 controls显示播放面板-->
<!-- <audio src="music.mp3" autoplay="autoplay"
    loop="loop" controls="controls"></audio> -->
    <!-- poster视频封面 -->
    <video poster="../imgs/k.jpg" controls="controls">
<source src="hero.mp4">
    </video>

以上是关于java web的主要内容，如果未能解决你的问题，请参考以下文章

暑假自学JAVA Web心得

maven web项目的web.xml报错The markup in the document following the root element must be well-formed.(代码片段

web代码片段

代码片段 - Golang 实现简单的 Web 服务器

高效Web开发的10个jQuery代码片段

java web

网站的架构

前端介绍

HTML

通过Eclipse创建html文件

html结构

head里面的标签

Body内部的标签

文本标签

Map 图像地图

超链接 a标签

表格 table

表单

文本框

密码框

单选

多选、复选框

时间

文件

下拉选

文本域

隐藏域

按钮

CSS

CSS的引入方式

三种引入方式的优先级

CSS的选择器

基础选择器

其它各种选择器

如果多个选择器设置相同样式的效果时，作用范围越小优先级越高

CSS中常用的属性

元素的宽高：

设置元素的颜色

设置元素的背景图片

盒子模型

外边距

边框

内边距

块级元素和行内元素关于盒子模型的总结

元素所占宽度计算公式

文本相关的属性

字体相关属性

溢出设置

元素显示方式

元素的定位

position定位

静态定位（文档流定位）（默认）

相对定位

绝对定位

固定定位

浮动定位

行内元素的垂直对齐方式

CSS的三大特性

小结

JavaScript 简称JS

JS历史

JS特点

JS优点

如何在html文件中嵌入js代码

JavaScript语法

数据类型

变量的声明和赋值

数值类型

字符串

布尔值

undefined

null

js各种类型间的隐式转换

测试 在页面中添加两个按钮点击时 弹出 "66"+6 和 "66"-6 的结果(666 60)

运算符

语句

函数(方法)

和页面元素相关的函数

内容介绍

字符串强转成数值

String常用Api

数值函数

数组相关函数

事件的取消

失去焦点事件

测试在页面中添加两个按钮点击时弹出 "66"+6 和 "66"-6 的结果(666 60)

层级函数当得到某个元素对象后需要获得该元素的相关元素的时候使用