layout: post title: "Web前端基础知识" date: 2018-07-01 10:36 toc: true comments: true categories: 技术学习 tags: - web
前端性能优化
一、代码部署：
1、代码的压缩与合并 2、图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。 3、使用内容分发网络 CDN 4、为文件设置Last-Modified、Expires和Etag
5、使用GZIP压缩传送 6、权衡DNS查找次数(使用不同域名会增加DNS查找) 7、避免不必要的重定向(加"/")
二、编码
html：
1、使用结构清晰，简单，语义化标签 2、避免空的src和href 3、不要在HTML中缩放图片
css：
1、精简css选择器 2、把CSS放到顶部 3、避免@import方式引入样式 4、css中使用base64图片数据取代图片文件，减少请求数，在线转base64网站：http://tool.css-js.com/base64.html 5、使用css动画来取代javascript动画 6、使用字体图标 7、使用css sprite(雪碧图) 8、使用svg图形 9、避免使用CSS表达式
body{
background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );
}10、避免使用css滤镜
javascript：
1、减少引用库的个数 2、使用requirejs或seajs异步加载js 3、JS放到页面底部引入 4、避免全局查找 5、使用原生方法 6、用switch语句代替复杂的if else语句 7、减少语句数，比如说多个变量声明可以写成一句 8、使用字面量表达式来初始化数组或者对象 9、使用innerHTML取代复杂的元素注入 10、使用事件代理(事件委托) 11、避免多次访问dom选择集 12、高频触发事件设置使用函数节流 13、使用Web Storage缓存数据
HTML：网页基本结构
资源分类
1. 静态资源：
* 使用静态网页开发技术发布的资源。
* 特点：
* 所有用户访问，得到的结果是一样的。
* 如：文本，图片，音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器.
* 浏览器中内置了静态资源的解析引擎，可以展示静态资源
2. 动态资源：
* 使用动态网页及时发布的资源。
* 特点：
* 所有用户访问，得到的结果可能不一样。
* 如：jsp/servlet,php,asp...
* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器HTML概念
1. 概念：是最基础的网页开发语言
* Hyper Text Markup Language 超文本标记语言
* 超文本:
* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
* 标记语言:
* 由标签构成的语言。<标签名称> 如 html，xml
* 标记语言不是编程语言
2. 快速入门：
* 语法：
1. html文档后缀名 .html 或者 .htm
2. 标签分为
1. 围堵标签：有开始标签和结束标签。如 <html> </html>
2. 自闭和标签：开始标签和结束标签在一起。如 <br/>
3. 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
正确：<a><b></b></a>
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
5. html的标签不区分大小写，但是建议使用小写。标签学习
1. 文件标签：构成html最基本的标签
* html:html文档的根标签
* head：头标签。用于指定html文档的一些属性。引入外部的资源
* title：标题标签。
* body：体标签
* <!DOCTYPE html>：html5中定义该文档是html文档
2. 文本标签：和文本有关的标签
注释：<!-- 注释内容 -->
<h1> to <h6>：标题标签
h1~h6:字体大小逐渐递减
<p>：段落标签
<br>：换行标签
<hr>：展示一条水平线
* 属性：
* color：颜色
* width：宽度
* size：高度
* align：对其方式
* center：居中
* left：左对齐
* right：右对齐
<!-- hr 显示一条水平线-->
<hr align="left" color="red" size="10" width="200"/>
<b>：字体加粗
<i>：字体斜体
<font>:字体标签
* 属性：
* color：颜色
* size：大小
* face：字体
<font color="red" face="楷体" size="5">白日依山尽</font> <br>
<center>:文本居中
属性定义：
* color：
1. 英文单词：red,green,blue
2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
* width：
1. 数值：width='20' ,数值的单位，默认是 px(像素)
2. 数值%：占比相对于父元素的比例
3. 图片标签：
* img：展示图片
* 属性：
* src：指定图片的位置
<img src="img/1.jpg" align="right" alt="古镇" width="500" height="500"/>
相对路径
* 以.开头的路径
* ./：代表当前目录 ./image/1.jpg
* ../:代表上一级目录
4. 列表标签：
* 有序列表：
* ol:
* li:
* 无序列表：
* ul:
* li:
<!--有序列表 ol-->
早上起床干的事情
<ol start="5" type="A">
<li>睁眼</li>
<li> 看手机</li>
<li> 穿衣服</li>
<li> 洗漱</li>
</ol>
5. 链接标签：
* a:定义一个超链接
* 属性：
* href：指定访问资源的URL(统一资源定位符)
* target：指定打开资源的方式
* _self:默认值，在当前页面打开
* _blank：在空白页面打开
<a href="http://www.itcast.cn" target="_self">点我</a>
超链接功能：
1.可以被点击：样式
2.点击后跳转到href指定的url
需求：保留1功能，去掉2功能
实现：href="javascript:void(0);"
6. div和span：
* div:每一个div占满一整行。块级标签
* span：文本信息在一行展示，行内标签 内联标签
7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。
1. <header>：页眉
2. <footer>：页脚
8. 表格标签：
* table：定义表格
* width：宽度
* border：边框
* cellpadding：定义内容和单元格的距离
* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
* bgcolor：背景色
* align：对齐方式
* tr：定义行
* bgcolor：背景色
* align：对齐方式
* td：定义单元格
* colspan：合并列
* rowspan：合并行
<td colspan="2">杨过</td>
<th rowspan="2">编号</th>
* th：定义表头单元格
* <caption>：表格标题
* <thead>：表示表格的头部分
* <tbody>：表示表格的体部分
* <tfoot>：表示表格的脚部分
9. 表单：
* 概念：用于采集用户输入的数据的。用于和服务器进行交互。
* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
* 属性：
* action：指定提交数据的URL
* method:指定提交方式
* 分类：一共7种，2种比较常用
* get：
1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2. 请求参数大小是有限制的。
3. 不太安全。
* post：
2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
2. 请求参数的大小没有限制。
3. 较为安全。
* 表单项中的数据要想被提交：必须指定其name属性
<form action="user/login" method="post">
用户名：<input name="username" type="text"><br>
密码：<input name="password"><br>
<input type="submit" value="登录">
</form>
10. 表单项标签：
* input：可以通过type属性值，改变元素展示的样式
* type属性：
* text：文本输入框，默认值
* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
* password：密码输入框
* radio:单选框
* 注意：
1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
3. checked属性，可以指定默认值
* checkbox：复选框
* 注意：
1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
2. checked属性，可以指定默认值
* file：文件选择框
* hidden：隐藏域，用于提交一些信息。
* 按钮：
* submit：提交按钮。可以提交表单
* button：普通按钮
* image：图片提交按钮
* src属性指定图片的路径
* label：指定输入项的文字描述信息
* 注意：
* label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
* select: 下拉列表
* 子元素：option，指定列表项
* textarea：文本域
* cols：指定列数，每一行有多少个字符
* rows：默认多少行。
<form action="registServlet" method="post">
<label for="username"> 用户名 </label>：<input id="username" name="username" placeholder="请输入用户名" type="text"><br>
密码：<input name="password" placeholder="请输入密码" type="password"><br>
性别：<input name="gender" type="radio" value="male"> 男
<input checked name="gender" type="radio" value="female"> 女
<br>
爱好：<input name="hobby" type="checkbox" value="shopping"> 逛街
<input checked name="hobby" type="checkbox" value="java"> Java
<input name="hobby" type="checkbox" value="game"> 游戏<br>
图片：<input name="file" type="file"><br>
隐藏域：<input name="id" type="hidden" value="aaa"> <br>
取色器：<input name="color" type="color"><br>
生日：<input name="birthday" type="date"> <br>
生日：<input name="birthday" type="datetime-local"> <br>
邮箱：<input name="email" type="email"> <br>
年龄：<input name="age" type="number"> <br>
省份：<select name="province">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option selected value="3">陕西</option>
</select><br>
自我描述：
<textarea cols="20" name="des" rows="5"></textarea>
<br>
<input type="submit" value="登录">
<input type="button" value="一个按钮"><br>
<input src="img/regbtn.jpg" type="image">
</form>html特殊字符集
CSS：布局控制美化
1. 概念： Cascading Style Sheets 层叠样式表
* 层叠：多个样式可以作用在同一个html的元素上，同时生效
2. 好处：
1. 功能强大
2. 将内容展示和样式控制分离
* 降低耦合度。解耦
* 让分工协作更容易
* 提高开发效率
3. CSS的使用：CSS与html结合方式
1. 内联样式
* 在标签内使用style属性指定css代码
<div style="color:red;">hello css</div>
2. 内部样式
* 在head标签内，定义style标签，style标签的标签体内容就是css代码
<style>
div{
color:blue;
}
</style>
<div>hello css</div>
3. 外部样式
1. 定义css资源文件。
2. 在head标签内，定义link标签，引入外部的资源文件
css/a.css文件：
div{
color:green;
}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>
* 注意：
* 1,2,3种方式 css作用范围越来越大
* 1方式不常用，后期常用2,3
* 3种方式可以写为：
<style>
@import "css/a.css";
</style>
4. css语法：
* 格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
* 选择器:筛选具有相似特征的元素
* 注意：
* 每一对属性需要使用；隔开，最后一对属性可以不加;
5. 选择器：筛选具有相似特征的元素
* 分类：
1. 基础选择器
1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
* 语法：#id属性值{}
* 注意：id选择器优先级高于类选择器元素选择器
2. 类选择器：选择具有相同的class属性值的元素。
* 语法：.class属性值{}
* 注意：类选择器优先级高于元素选择器
3. 元素(标签)选择器：选择具有相同标签名称的元素
* 语法： 标签名称{}
<style>
#div1 {color: red;}
.cls1 {color: blue;}
div {color: green;}
</style>
<div id="div1">传智播客</div> red
<div class="cls1">黑马程序员</div> blue
<p class="cls1">传智学院</p> blue
2. 扩展选择器：
1. 选择所有元素：
* 语法： *{}
2. 并集选择器：
* 选择器1,选择器2{}
3. 子选择器：筛选选择器1元素下的选择器2元素
* 语法： 选择器1 选择器2{}
4. 父选择器：筛选选择器2的父元素选择器1
* 语法： 选择器1 > 选择器2{}
5. 属性选择器：选择元素名称，属性名=属性值的元素
* 语法： 元素名称[属性名="属性值"]{}
6. 伪类选择器：选择一些元素具有的状态
* 语法： 元素:状态{}
* 如： <a>
* 状态：
* link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态
<style>
div p {color: red;}
div > p { border: 1px solid;}
input[type='text'] {border: 5px solid;}
a:link {color: pink;}
a:hover {color: green;}
a:active {color: yellow;}
a:visited {color: red;}
</style>
<div><p>传智播客</p></div> red solid
<p>黑马程序员</p>
<div>aaa</div>
<input type="text"> solid
<input type="password">
<a href="#">黑马程序员</a>
3.选择器优先级
最高优先级是 (直接在标签中的设置样式，假设级别为1000)
次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;}
其次优先级是（类选择器，假设级别为10）.divClass{color:Red;}
最后优先级是 （标签选择器，假设级别是 1） div{color:Red;}
那么后代选择器的优先级就可以计算了
.divClass span { color:Red;} 优先级别就是：10+1=11
6. 属性
1. 字体、文本
* font-size：字体大小
* color：文本颜色
* text-align：对其方式
* line-height：行高
2. 背景
* background：
3. 边框
* border：设置边框，符合属性
4. 尺寸
* width：宽度
* height：高度
5. 盒子模型：控制布局
* margin：外边距
* padding：内边距
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
* float：浮动
* left
* right
div {
color: #FF0000;
font-size: 30px;
text-align: center;
line-height: 200px;
border: 1px solid red;
//背景
background: url("img/logo.jpg") no-repeat center;
float: left;
width: 200px;
height: 200px;
padding: 50px;
box-sizing: border-box;
}css盒模型
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
JavaScript: 网页动态交互
* 概念： 一门客户端脚本语言
* 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
* 脚本语言：不需要编译，直接就可以被浏览器解析执行了
* 功能：
* 增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
* JavaScript发展史：
1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专用于表单校验。命名C--后来更名为：ScriptEase
2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
3. 1996年，微软抄袭JavaScript开发出JScript语言
4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
* JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)ECMAScript基本语法
1. 与html结合方式
1. 内部JS：
* 定义<script>，标签体内容就是js代码
2. 外部JS：
* 定义<script>，通过src属性引入外部的js文件
<script>alert("Hello World");</script>
<script src="js/a.js"></script>
* 注意：
1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
2. <script>可以定义多个。
2. 注释
1. 单行注释：//注释内容
2. 多行注释：/*注释内容*/
3. 数据类型：
1. 原始数据类型(基本数据类型)：
1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
2. string：字符串。 字符串 "abc" "a" 'abc'
3. boolean: true和false
4. null：一个对象为空的占位符
5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
// 定义null,undefined
var obj = null;
var obj2 = undefined;
2. 引用数据类型：对象
4. 变量
* 变量：一小块存储数据的内存空间
* Java语言是强类型语言，而JavaScript是弱类型语言。
* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
* 语法：
* var 变量名 = 初始化值;
* typeof运算符：获取变量的类型。
document.write(obj + "---" + typeof (obj) + "<br>");
* 注：null运算后得到的是object
5. 运算符
1. 一元运算符：只有一个运算数的运算符
++，-- ， +(正号)
* ++ --: 自增(自减)
* ++(--) 在前，先自增(自减)，再运算
* ++(--) 在后，先运算，再自增(自减)
* +(-)：正负号
* 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
* 其他类型转number：
* string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
* boolean转number：true转为1，false转为0
2. 算数运算符
+ - * / % ...
3. 赋值运算符
= += -+....
4. 比较运算符
> < >= <= == ===(全等于)
* 比较方式
1. 类型相同：直接比较
* 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
2. 类型不同：先进行类型转换，再比较
* ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
document.write(("123" === 123) + "<br>");
5. 逻辑运算符
&& || !
* 其他类型转boolean：
1. number：0或NaN为假，其他为真
2. string：除了空字符串("")，其他都是true
3. null&undefined:都是false
4. 对象：所有对象都为true
6. 三元运算符
表达式? 值1:值2;
判断表达式的值，如果是true则取值1，如果是false则取值2；
var c = 3 > 4 ? 1:0;//c=0
6. 流程控制语句：
1. if...else...
2. switch:
* 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
* switch(变量):
case 值:
* 在JS中,switch语句可以接受任意的原始数据类型
3. while
4. do...while
5. for
7. JS特殊语法：
1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
2. 变量的定义使用var关键字，也可以不使用
* 用var： 定义的变量是局部变量
* 不用var：定义的变量是全局变量(不建议)ECMAScript基本对象
1. Function：函数(方法)对象
1. 创建：
1. var fun = new Function(形式参数列表,方法体); //忘掉吧
2. function 方法名称(形式参数列表){
方法体
}
3. var 方法名 = function(形式参数列表){
方法体
}
2. 方法：
3. 属性：
length:代表形参的个数
4. 特点：
1. 方法定义是，形参的类型不用写,返回值类型也不写。
2. 方法是一个对象，如果定义名称相同的方法，会覆盖
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
5. 调用：
方法名称(实际参数列表);
//求任意个数的和
function add() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
var sum = add(1, 2, 3, 4);
2. Array:数组对象
1. 创建：
1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];
//数组创建方式
var arr1 = new Array(1,2,3);
var arr2 = new Array(5);
var arr3 = [1,2,3,4];
2. 方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
3. 属性
length:数组的长度
4. 特点：
1. JS中，数组元素的类型可变的。
2. JS中，数组长度可变的。
var arr = [1, "abc", true];
document.write(arr + "<br>");//1,abc,true
document.write(arr[10] +"<br>");//undefined
arr[10] = "hehe";
document.write(arr[10] + "<br>");//hehe
document.write(arr[9] + "<br>");//undefined
//alert(arr.length);//11
document.write(arr.join("--") + "<br>");//1--abc--true----------------hehe
arr.push(11);
document.write(arr.join("--") + "<br>");//1--abc--true----------------hehe--11
3. Boolean
4. Date：日期对象
1. 创建：
var date = new Date();
2. 方法：
toLocaleString()：返回当前date对象对应的时间本地字符串格式
getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
var date = new Date();
document.write(date + "<br>");//Sat Mar 07 2020 18:09:13 GMT+0800 (中国标准时间)
document.write(date.toLocaleString() + "<br>");//2020/3/7 下午6:09:13
document.write(date.getTime() + "<br>");//1583575753731
5. Math：数学对象
1. 创建：
* 特点：Math对象不用创建，直接使用。 Math.方法名();
2. 方法：
random():返回 0 ~ 1 之间的随机数。 含0不含1
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的整数。
3. 属性：
PI
//取 1~100之间的随机整数
var number = Math.floor((Math.random() * 100)) + 1;
6. Number
7. String
8. RegExp：正则表达式对象
1. 正则表达式：定义字符串的组成规则。
1. 单个字符:[]
如： [a] [ab] [a-zA-Z0-9_]
* 特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
2. 量词符号：
?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
{m,n}:表示 m<= 数量 <= n
* m如果缺省： {,n}:最多n次
* n如果缺省：{m,} 最少m次
3. 开始结束符号
* ^:开始
* $:结束
2. 正则对象：
1. 创建
1. var reg = new RegExp("正则表达式");
2. var reg = /正则表达式/;
2. 方法
1. test(参数):验证指定的字符串是否符合正则定义的规范
var reg = new RegExp("^\\w{6,12}$");//var reg = /^\w{6,12}$/;
var username = "zhangsan";
var flag = reg.test(username);
9. Global
1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();
2. 方法：
encodeURI():url编码
encodeURI("中文");
decodeURI():url解码
encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码
parseInt():将字符串转为数字
* 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN():判断一个值是否是NaN
* NaN六亲不认，连自己都不认。NaN参与的==比较全部问false
eval():将JavaScript字符串，并把它作为脚本代码来执行。
eval("alert(123)");
3. URL编码
传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2BOM：浏览器对象模型
1. 概念：Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象。
2. 组成：
* Window：窗口对象
* Navigator：浏览器对象
* Screen：显示器屏幕对象
* History：历史记录对象
* Location：地址栏对象
3. Window：窗口对象
1. 创建
2. 方法
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值：获取用户输入的值
alert("hello window");
window.alert("hello a")
//确认框
var flag = confirm("您确定要退出吗？");
//输入框
var result = prompt("请输入用户名");
2. 与打开关闭有关的方法：
close() 关闭浏览器窗口。
* 谁调用我 ，我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
//打开新窗口
var openBtn = document.getElementById("openBtn");
var newWindow;
openBtn.onclick = function(){
//打开新窗口
newWindow = open("https://www.baidu.com");
}
//关闭新窗口
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function(){
// 关闭新窗口
newWindow.close();
}
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数：
1. js代码或者方法对象
2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout("fun();",2000);
var id = setTimeout(fun,2000);
clearTimeout(id);
function fun(){alert('boom~~');}
3. 属性：
1. 获取其他BOM对象：
history
var h1 = window.history;
var h2 = history;
location
window.location
Navigator
Screen:
2. 获取DOM对象:document
window.document.getElementById("openBtn");
4. 特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。 方法名();
4. Location：地址栏对象
1. 创建(获取)：
1. window.location
2. location
2. 方法：
* reload() 重新加载当前文档。刷新
//3.刷新页面
location.reload();
3. 属性
* href 设置或返回完整的 URL。
//3.去访问www.itcast.cn官网
location.href = "https://www.baidu.com";
5. History：历史记录对象
1. 创建(获取)：
1. window.history
2. history
2. 方法：
* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(参数) 加载 history 列表中的某个具体页面。
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
//前进
// history.forward();
history.go(1);
3. 属性：
* length 返回当前窗口历史列表中的 URL 数量。
//3.获取当前窗口历史记录个数
var length = history.length;DOM: 文档对象模型
* 概念： Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
* 获取页面标签(元素)对象：Element
* document.getElementById("id值"):通过元素的id获取元素对象
* W3C DOM 标准被分为 3 个不同的部分：
* 核心 DOM - 针对任何结构化文档的标准模型
* Document：文档对象
* Element：元素对象
* Attribute：属性对象
* Text：文本对象
* Comment:注释对象
* Node：节点对象，其他5个的父对象
* XML DOM - 针对 XML 文档的标准模型
* HTML DOM - 针对 HTML 文档的标准模型
* 核心DOM模型：
* Document：文档对象
1. 创建(获取)：在html dom模型中可以使用window对象来获取
1. window.document
2. document
2. 方法：
1. 获取Element对象：
1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
document.getElementById("id值"):通过元素的id获取元素对象
//2.根据元素名称获取元素对象们。返回值是一个数组
var divs = document.getElementsByTagName("div");
//3.根据Class属性值获取元素对象们。返回值是一个数组
var div_cls = document.getElementsByClassName("cls1");
//4.根据name属性值获取元素对象们。返回值是一个数组
var ele_username = document.getElementsByName("username");
2. 创建其他DOM对象：
createAttribute(name)
createComment()
createElement()
createTextNode()
var table = document.createElement("table");
* Element：元素对象
1. 获取/创建：通过document来获取和创建
2. 方法：
1. removeAttribute()：删除属性
2. setAttribute()：设置属性
//获取a标签并设置属性
var element_a = document.getElementsByTagName("a")[0];
element_a.setAttribute("href", "https://www.baidu.com");
* Node：节点对象，其他5个的父对象
* 特点：所有dom对象都可以被认为是一个节点
* 方法：
* CRUD dom树：
* appendChild()：向节点的子节点列表的结尾添加新的子节点。
* removeChild() ：删除（并返回）当前节点的指定子节点。
* replaceChild()：用新节点替换一个子节点。
* 属性：
* parentNode 返回节点的父节点。
var div1 = document.getElementById("div1");
var div3 = document.createElement("div");
div3.setAttribute("id", "div3");
div1.appendChild(div3);
* HTML DOM
1. 标签体的设置和获取：innerHTML
var div = document.getElementById("div1");
//div标签中追加一个文本输入框
div.innerHTML += "<input type='text'>";
2. 使用html元素对象的属性
//2.获取文本框的内容
var id = document.getElementById("id").value;
3. 控制元素样式
1. 使用元素的style属性来设置
var div1 = document.getElementById("div1");
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。事件监听机制
* 概念：某些组件被执行了某些操作后，触发某些代码的执行。
* 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
* 事件源：组件。如： 按钮 文本输入框...
* 监听器：代码。
* 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
* 功能： 某些组件被执行了某些操作后，触发某些代码的执行。
* 造句： xxx被xxx,我就xxx
* 我方水晶被摧毁后，我就责备对友。
* 敌方水晶被摧毁后，我就夸奖自己。
* 如何绑定事件
1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
1. 事件：onclick--- 单击事件
2. 通过js获取元素对象，指定事件属性，设置一个函数
<img id="light2" src="img/off.gif">
<img id="light" οnclick="fun();" src="img/off.gif">
<script>
//1.获取light2对象
var light2 = document.getElementById("light2");
//2.绑定事件
light2.onclick = fun2;
//或者
fun(){}
</script>
* 常见的事件：
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
2. 焦点事件
1. onblur：失去焦点
* 一般用于表单验证
2. onfocus:元素获得焦点。
3. 加载事件：
1. onload：一张页面或一幅图像完成加载。
//2.加载完成事件 onload
window.onload = function () {
//1.失去焦点事件
document.getElementById("username").onblur = function(){
alert("失去焦点了...");
}
}
4. 鼠标事件：
1. onmousedown 鼠标按钮被按下。
* 定义方法时，定义一个形参，接受event对象，event对象button属性获取鼠标哪个按键被点击
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
//3.绑定鼠标移动到元素之上事件
document.getElementById("username").onmouseover = function(){
alert("鼠标来了....");
}
5. 键盘事件：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
7. 表单事件：
1. onsubmit 确认按钮被点击。
* 方法返回false则表单阻止提交
document.getElementById("form").onsubmit = function(){
var flag = false;
//校验用户名格式是否正确代码
return flag;
}
2. onreset 重置按钮被点击。全选案例
//2.给全选按钮绑定单击事件
document.getElementById("selectAll").onclick = function () {
//全选
//1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
//2.遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态为选中 checked
cbs[i].checked = true;
}
}轮播图案例
<img id="img" src="img/banner_1.jpg" width="100%">
<script>
/*
分析：
1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次。
*/
//修改图片src属性
var number = 1;
function fun() {
number++;
//判断number是否大于3
if (number > 3) {
number = 1;
}
//获取img对象
var img = document.getElementById("img");
img.src = "img/banner_" + number + ".jpg";
}
//2.定义定时器
setInterval(fun, 3000);
</script>表单校验案例
<script>
/*1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
如果都为true，则监听器方法返回true
如果有一个为false，则监听器方法返回false
2.定义一些方法分别校验各个表单项。
3.给各个表单项绑定onblur事件。
*/
window.onload = function () {
//1.给表单绑定onsubmit事件
document.getElementById("form").onsubmit = function () {
return checkUsername() && checkPassword();
}
//给用户名和密码框分别绑定离焦事件
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
}
//校验用户名
function checkUsername() {
//1.获取用户名的值
var username = document.getElementById("username").value;
//2.定义正则表达式
var reg_username = /^\w{6,12}$/;
//3.判断值是否符合正则的规则
var flag = reg_username.test(username);
//4.提示信息
var s_username = document.getElementById("s_username");
if (flag) {
//提示绿色对勾
s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
} else {
//提示红色用户名有误
s_username.innerHTML = "用户名格式有误";
}
return flag;
}
//校验密码
function checkPassword() {
//1.获取用户名的值
var password = document.getElementById("password").value;
//2.定义正则表达式
var reg_password = /^\w{6,12}$/;
//3.判断值是否符合正则的规则
var flag = reg_password.test(password);
//4.提示信息
var s_password = document.getElementById("s_password");
if (flag) {
//提示绿色对勾
s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
} else {
//提示红色用户名有误
s_password.innerHTML = "密码格式有误";
}
return flag;
}
</script>js加载顺序
因为javascript可能会来操作HTML文档的DOM树，所以，浏览器一般都不会像并行下载css文件并行下载js文件，所以，如果你的javascript想操作后面的DOM元素，基本上来说，浏览器都会报错说对象找不到。因为Javascript执行时，后面的HTML被阻塞住了，DOM树时还没有后面的DOM结点。所以程序也就报错了。
head里的<script>标签会阻塞后续资源的载入以及整个页面的生成。很多网站把javascript放在网页的最后面了，要么就是动用了window.onload或是docmuemt ready之类的事件。
js加载方式优化
1 通过动态加载引入js外部文件来提高网页加载速度
2 将所有需要的<script>标签都放在</body>之前
确保脚本执行之前完成页面渲染而不会造成页面堵塞问题
3 合并JS代码
尽可能少的使用script标签,代码写入一个js文件中，让页面只使用一次<script></script>标签引入
4 无堵塞加载JS
通过给script标签增加 defer属性或者是 async 属性来实现
<script src="file.js" defer></script>async和defer不同之处是async加载完成后会自动执行脚本，defer加载完成后需要等待页面也加载完成才会执行代码
5 动态创建script来加载-推荐
function loadJS(url, callback) {
var script = document.createElement('script'),
fn = callback || function () {
};
script.type = 'text/javascript';
//IE
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState == 'loaded' || script.readyState == 'complete') {
script.onreadystatechange = null;
fn();
}
}
} else {
//其他浏览器
script.onload = function () {
fn();
};
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
//用法
loadJS('file.js', function () {
alert(1);
});6 可以封装成类库，单独引入。
该原理实现的也有很多不错的js类库可以使用，如LazyLoad.js，支持数组的形式引入，打开浏览器在network中可看到js是同步加载的
7 XHR加载,使用ajax方式
var xhr = new XMLHttpRequest;
xhr.open('get', 'file.js', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
};
xhr.send(null);Bootstrap: 前端开发框架
1.概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
* 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
* 好处：
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 响应式布局:同一套页面可以兼容不同分辨率的设备。
2. 快速入门
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
3. 在线引入
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>响应式布局
* 同一套页面可以兼容不同分辨率的设备。
* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
* 步骤：
1. 定义容器。相当于之前的table、
* 容器分类：
1. container：两边留白
2. container-fluid：每一种设备都是100%宽度
2. 定义行。相当于之前的tr 样式：row
3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
* 设备代号：
1. xs：超小屏幕 手机 (<768px)：col-xs-12
2. sm：小屏幕 平板 (≥768px)
3. md：中等屏幕 桌面显示器 (≥992px)
4. lg：大屏幕 大桌面显示器 (≥1200px)
* 注意：
1. 一行中如果格子数目超过12，则超出部分自动换行
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备
3. 如真实设备宽度小于设置栅格类属性的设备代码的最小值，一个元素沾满一整行
<!--2.定义行-->
<div class="row">
<!--3.定义元素
在大显示器一行12个格子
在pad上一行6个格子
-->
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
<div class="col-lg-1 col-sm-2 inner">栅格</div>
</div>CSS样式和JS插件
多看文档！直接从文档粘贴并修改
1. 全局CSS样式：
* 按钮：class="btn btn-default"
* 图片：
* class="img-responsive"：图片在任意尺寸都占100%
* 图片形状
* <img src="..." alt="..." class="img-rounded">：方形
* <img src="..." alt="..." class="img-circle"> ： 圆形
* <img src="..." alt="..." class="img-thumbnail"> ：相框
* 表格
* table
* table-bordered
* table-hover
* 表单
* 给表单项添加：class="form-control"
2. 组件：
* 导航条
* 分页条
3. 插件：
* 轮播图XML: 可扩展标记语言
1. 概念：Extensible Markup Language 可扩展标记语言
* 可扩展：标签都是自定义的。 <user> <student>
* 功能
* 存储数据
1. 配置文件
2. 在网络中传输
* xml与html的区别
1. xml标签都是自定义的，html标签是预定义。
2. xml的语法严格，html语法松散
3. xml是存储数据的，html是展示数据
* w3c:万维网联盟xml语法
* 基本语法：
1. xml文档的后缀名 .xml
2. xml第一行必须定义为文档声明
3. xml文档中有且仅有一个根标签
4. 属性值必须使用引号(单双都可)引起来
5. 标签必须正确关闭
6. xml标签名称区分大小写
* 快速入门：
<?xml version='1.0' ?>
<users>
<user id='1'>
<name>zhangsan</name>
<age>23</age>
<gender>male</gender>
<br/>
</user>
<user id='2'>
<name>lisi</name>
<age>24</age>
<gender>female</gender>
</user>
</users>
* 组成部分：
1. 文档声明
1. 格式：<?xml 属性列表 ?>
2. 属性列表：
* version：版本号，必须的属性
* encoding：编码方式。告知解析引擎当前文档使用的字符集，默认值：ISO-8859-1
* standalone：是否独立
yes：不依赖其他文件
no：依赖其他文件
2. 指令(了解)：结合css的
<?xml-stylesheet type="text/css" href="a.css" ?>
3. 标签：标签名称自定义的
* 规则：
* 名称可以包含字母、数字以及其他的字符
* 名称不能以数字或者标点符号开始
* 名称不能以字母 xml（或者 XML、Xml 等等）开始
* 名称不能包含空格
4. 属性：
id属性值唯一
5. 文本：
* CDATA区：在该区域中的数据会被原样展示
* 格式： <![CDATA[ 数据 ]]>xml约束
XML约束：规定xml文档的书写规则
* 作为框架的使用者(程序员)：
1. 能够在xml中引入约束文档
2. 能够简单的读懂约束文档
* 分类：
1. DTD:一种简单的约束技术
2. Schema:一种复杂的约束技术
* DTD：
* 引入dtd文档到xml文档中
* 内部dtd：将约束规则定义在xml文档中
* 外部dtd：将约束的规则定义在外部的dtd文件中
* 本地：<!DOCTYPE 根标签名 SYSTEM "dtd文件的位置">
* 网络：<!DOCTYPE 根标签名 PUBLIC "dtd文件名字" "dtd文件的位置URL">
<!DOCTYPE students [
<!ELEMENT students (student+) >
<!ELEMENT student (name,age,sex)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
<!ELEMENT sex (#PCDATA)>
<!ATTLIST student number ID #REQUIRED>]/>
* Schema引入:
1.填写xml文档的根元素
2.引入xsi前缀. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3.引入xsd文件命名空间. xsi:schemaLocation="http://www.itcast.cn/xml student.xsd"
4.为每一个xsd约束声明一个前缀,作为标识 xmlns="http://www.itcast.cn/xml"
<students xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://www.itcast.cn/xml"
xsi:schemaLocation="http://www.itcast.cn/xml student.xsd">xml解析
解析：操作xml文档，将文档中的数据读取到内存中
* 操作xml文档
1. 解析(读取)：将文档中的数据读取到内存中
2. 写入：将内存中的数据保存到xml文档中。持久化的存储
* 解析xml的方式：
1. DOM：将标记语言文档一次性加载进内存，在内存中形成一颗dom树
* 优点：操作方便，可以对文档进行CRUD的所有操作
* 缺点：占内存
2. SAX：逐行读取，基于事件驱动的。
* 优点：不占内存。
* 缺点：只能读取，不能增删改
* xml常见的解析器：
1. JAXP：sun公司提供的解析器，支持dom和sax两种思想
2. DOM4J：一款非常优秀的解析器
3. Jsoup：jsoup 是一款Java 的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。
4. PULL：Android操作系统内置的解析器，sax方式的。
* Jsoup：jsoup 是一款Java 的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。
* 快速入门：
* 步骤：
1. 导入jar包
2. 获取Document对象
3. 获取对应的标签Element对象
4. 获取数据
* 代码：
//2.1获取student.xml的path
String path = JsoupDemo1.class.getClassLoader().getResource("student.xml").getPath();
//2.2解析xml文档，加载文档进内存，获取dom树--->Document
Document document = Jsoup.parse(new File(path), "utf-8");
//3.获取元素对象 Element
Elements elements = document.getElementsByTag("name");
System.out.println(elements.size());
//3.1获取第一个name的Element对象
Element element = elements.get(0);
//3.2获取数据
String name = element.text();
System.out.println(name);
* 对象的使用：
1. Jsoup：工具类，可以解析html或xml文档，返回Document
* parse：解析html或xml文档，返回Document
* parse(File in, String charsetName)：解析xml或html文件的。
* parse(String html)：解析xml或html字符串
* parse(URL url, int timeoutMillis)：通过网络路径获取指定的html或xml的文档对象
2. Document：文档对象。代表内存中的dom树
* 获取Element对象
* getElementById(String id)：根据id属性值获取唯一的element对象
* getElementsByTag(String tagName)：根据标签名称获取元素对象集合
* getElementsByAttribute(String key)：根据属性名称获取元素对象集合
* getElementsByAttributeValue(String key, String value)：根据对应的属性名和属性值获取元素对象集合
3. Elements：元素Element对象的集合。可以当做 ArrayList<Element>来使用
4. Element：元素对象
1. 获取子元素对象
* getElementById(String id)：根据id属性值获取唯一的element对象
* getElementsByTag(String tagName)：根据标签名称获取元素对象集合
* getElementsByAttribute(String key)：根据属性名称获取元素对象集合
* getElementsByAttributeValue(String key, String value)：根据对应的属性名和属性值获取元素对象集合
2. 获取属性值
* String attr(String key)：根据属性名称获取属性值
3. 获取文本内容
* String text():获取文本内容
* String html():获取标签体的所有内容(包括字标签的字符串内容)
5. Node：节点对象
* 是Document和Element的父类
* 快捷查询方式：
1. selector:选择器
* 使用的方法：Elements select(String cssQuery)
* 语法：参考Selector类中定义的语法
2. XPath：XPath即为XML路径语言，它是一种用来确定XML（标准通用标记语言的子集）文档中某部分位置的语言
* 使用Jsoup的Xpath需要额外导入jar包。
* 查询w3cshool参考手册，使用xpath的语法完成查询
//1.获取student.xml的path
String path = JsoupDemo6.class.getClassLoader().getResource("student.xml").getPath();
//2.获取Document对象
Document document = Jsoup.parse(new File(path), "utf-8");
//3.根据document对象，创建JXDocument对象
JXDocument jxDocument = new JXDocument(document);
//4.结合xpath语法查询
//4.1查询所有student标签
List<JXNode> jxNodes = jxDocument.selN("//student");
for (JXNode jxNode : jxNodes) {
System.out.println(jxNode);
}
System.out.println("--------------------");
//4.2查询所有student标签下的name标签
List<JXNode> jxNodes2 = jxDocument.selN("//student/name");
for (JXNode jxNode : jxNodes2) {
System.out.println(jxNode);
}
System.out.println("--------------------");
//4.3查询student标签下带有id属性的name标签
List<JXNode> jxNodes3 = jxDocument.selN("//student/name[@id]");
for (JXNode jxNode : jxNodes3) {
System.out.println(jxNode);
}
System.out.println("--------------------");
//4.4查询student标签下带有id属性的name标签 并且id属性值为itcast
List<JXNode> jxNodes4 = jxDocument.selN("//student/name[@id='itcast']");
for (JXNode jxNode : jxNodes4) {
System.out.println(jxNode);
}JQuery：JS框架简化开发
1. 概念： 一个JavaScript框架。简化JS开发
* jQuery是一个快速、简洁的JavaScript框架，jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
* JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已
2. 快速入门
1. 步骤：
1. 下载JQuery
* 目前jQuery有三个大版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
功能不再新增。因此一般项目来说，使用1.x版本就可以了，
最终版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
目前该版本是官方主要更新维护的版本。
* jquery-xxx.js 与 jquery-xxx.min.js区别：
1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快
2. 导入JQuery的js文件：导入min.js文件
3. 基本操作学习：
1. 事件绑定
//1.获取b1按钮
$("#b1").click(function(){
alert("abc");
});
2. 入口函数
$(function () {
});
window.onload 和 $(function) 区别
* window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
* $(function)可以定义多次的。
3. 样式控制：css方法
$("#div1").css("backgroundColor","pink");
//1. 根据id获取元素对象
var div1 = $("#div1");
//2.获取标签体内容
alert(div1.innerHTML);
//3.设置标签体内容
//div1.innerHTML = "aaa";
$("#div1").html("ccc");
//4. 通过jq方式来获取名称叫div的所有html元素对象
var $divs = $("div");
//jquery入口函数(dom文档加载完成之后执行该函数中的代码)
$(function () {
//1.获取b1按钮并绑定单击事件
$("#b1").click(function(){
alert("abc");
});
});JQuery对象和JS对象
1. JQuery对象在操作时，更加方便。
2. JQuery对象和js对象方法不通用的.
3. 两者相互转换
* jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
* js -- > jq : $(js对象)选择器：选有相似特征元素
1. 基本选择器
1. 标签选择器（元素选择器）
* 语法： $("html标签名") 获得所有匹配标签名称的元素
2. id选择器
* 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器
* 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
4. 并集选择器：
* 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
// <input type="button" value="改变 id 为 one 的元素的背景色为红色" id="b1"/>
$("#b1").click(function () {
$("#one").css("backgroundColor", "pink");
});
// <input type="button" value="改变元素名为 <div> 的所有元素的背景色为红色" id="b2"/>
$("#b2").click(function () {
$("div").css("backgroundColor", "pink");
});
// <input type="button" value="改变class为 mini 的所有元素的背景色为红色" id="b3"/>
$("#b3").click(function () {
$(".mini").css("backgroundColor", "pink");
});
// <input type="button" value="改变所有<span>元素和id为two元素背景色为红色" id="b4"/>
$("#b4").click(function () {
$("span,#two").css("backgroundColor", "pink");
});
2. 层级选择器
1. 后代选择器
* 语法： $("A B") 选择A元素内部的所有B元素,包括子元素的子元素
2. 子选择器
* 语法： $("A > B") 选择父元素为A元素的B元素
// <input type="button" value="改变<body>内所有<div>背景色为红色" id="b1"/>
$("#b1").click(function () {
$("body div").css("backgroundColor", "pink");
});
// <input type="button" value="改变 <body>内子<div>的背景色为红色" id="b2"/>
$("#b2").click(function () {
$("body > div").css("backgroundColor", "pink");
});
3. 属性选择器
1. 属性名称选择器
* 语法： $("A[属性名]") 包含指定属性的选择器
2. 属性选择器
* 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
3. 复合属性选择器
* 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
// <input type="button" value=" 含有属性title 的div背景色为红色" id="b1"/>
$("#b1").click(function () {
$("div[title]").css("backgroundColor", "pink");
});
// <input type="button" value="属性title值等于test的div背景色为红色" id="b2"/>
$("#b2").click(function () {
$("div[title='test']").css("backgroundColor", "pink");
});
// <input type="button" value=" 属性title值以te开始的div背景色为红色" id="b4"/>
$("#b4").click(function () {
$("div[title^='te']").css("backgroundColor", "pink");
});
//选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色
$("#b7").click(function () {
$("div[id][title*='es']").css("backgroundColor", "pink");
});
4. 过滤选择器
1. 首元素选择器
* 语法： :first 获得选择的元素中的第一个元素
2. 尾元素选择器
* 语法： :last 获得选择的元素中的最后一个元素
3. 非元素选择器
* 语法： :not(selector) 不包括指定内容的元素
4. 偶数选择器
* 语法： :even 偶数，从 0 开始计数
5. 奇数选择器
* 语法： :odd 奇数，从 0 开始计数
6. 等于索引选择器
* 语法： :eq(index) 指定索引元素
7. 大于索引选择器
* 语法： :gt(index) 大于指定索引元素
8. 小于索引选择器
* 语法： :lt(index) 小于指定索引元素
9. 标题选择器
* 语法： :header 获得标题（h1~h6）元素，固定写法
// 改变第一个 div 元素的背景色为 红色
$("#b1").click(function () {
$("div:first").css("backgroundColor", "pink");
});
// 改变class不为 one 的所有 div 元素的背景色为 红色
$("#b3").click(function () {
$("div:not(.one)").css("backgroundColor", "pink");
});
// 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
$("#b4").click(function () {
$("div:even").css("backgroundColor", "pink");
});
//改变索引值为大于 3 的 div 元素的背景色为 红色
$("#b6").click(function () {
$("div:gt(3)").css("backgroundColor", "pink");
});
// 改变所有的标题元素的背景色为 红色
$("#b9").click(function () {
$(":header").css("backgroundColor", "pink");
});
5. 表单过滤选择器
1. 可用元素选择器
* 语法： :enabled 获得可用元素
2. 不可用元素选择器
* 语法： :disabled 获得不可用元素
3. 选中选择器
* 语法： :checked 获得单选/复选框选中的元素
4. 选中选择器
* 语法： :selected 获得下拉框选中的元素
// 利用jQuery对象的val()方法改变表单内可用<input>元素的值
$("#b1").click(function () {
$("input[type='text']:enabled").val("aaa");
});
//利用 jQuery 对象的 val() 方法改变表单内不可用<input>元素的值
$("#b2").click(function () {
$("input[type='text']:disabled").val("aaa");
});
// 利用 jQuery 对象的 length 属性获取复选框选中的个数
$("#b3").click(function () {
alert($("input[type='checkbox']:checked").length);
});
// 利用 jQuery 对象的 length 属性获取下拉框选中的个数
$("#b4").click(function () {
alert($("#job > option:selected").length);
});JQuery操作DOM
1. 内容操作
1. html(): 获取/设置元素的标签体内容，html标签执行不显示
$("#mydiv").html("<p>aaaa</p>");//页面显示aaaa
2. text(): 获取/设置元素的标签体纯文本内容
$("#mydiv").text("<p>aaaa</p>");//页面显示<p>aaaa</p>
3. val()： 获取/设置元素的value属性值
// 获取myinput 的value值
var value = $("#myinput").val();
// 设置myinput 的value值
$("#myinput").val("李四");
2. 属性操作
1. 通用属性操作
1. attr(): 获取/设置元素的属性
2. removeAttr():删除属性
3. prop():获取/设置元素的属性
4. removeProp():删除属性
* attr和prop区别？
如果操作的是元素的固有属性，则建议使用prop
如果操作的是元素自定义的属性，则建议使用attr
//获取北京节点的name属性值
var name = $("#bj").attr("name");
//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name", "dabeijing");
//新增北京节点的discription属性 属性值是didu
$("#bj").attr("discription", "didu");
//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");
//获得hobby的的选中状态
var checked = $("#hobby").prop("checked");
//var checked = $("#hobby").attr("checked"); //获取不到弹undefined
2. 对class属性操作
1. addClass():添加class属性值
$("#one").addClass("second");
2. removeClass():删除class属性值
$("#one").removeClass("second");
3. toggleClass():切换class属性
toggleClass("one"):
* 若元素对象上存在class="one"，则将属性one删除。若不存在，则添加
$("#one").toggleClass("second");
4. css():设置/获得css样式
var backgroundColor = $("#one").css("backgroundColor"); $("#one").css("backgroundColor", "green");
3. CRUD操作:
1. append():父元素将子元素追加到末尾
* 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
2. prepend():父元素将子元素追加到开头
* 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
3. appendTo():
* 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
//将反恐放置到city的后面
$("#fk").appendTo($("#city"));
4. prependTo()：
* 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头
5. after():添加元素到元素后边
* 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系
6. before():添加元素到元素前边
* 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
7. insertAfter()
* 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
8. insertBefore()
* 对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
9. remove():移除元素
* 对象.remove():将对象删除掉
//删除<li id='bj' name='beijing'>北京</li>
$("#bj").remove();
10. empty():清空元素的所有后代元素。
* 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点
//删除city所有的li节点(后代元素)
$("#city").empty();常用案例
//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
$(function () {
//1. 获取数据行的奇数行的tr，设置背景色为pink
$("tr:gt(1):odd").css("backgroundColor", "pink");
//2. 获取数据行的偶数行的tr,设置背景色为yellow
$("tr:gt(1):even").css("backgroundColor", "yellow");
});
//需求：保证下边的选中状态和第一个复选框的选中状态一致
function selectAll(obj) {
//获取下边的复选框
$(".itemSelect").prop("checked", obj.checked);
}
//需求：点击qq表情，将其追加到发言框中
$(function () {
//1.给img图片添加onclick事件
$("ul img").click(function () {
//2.追加到p标签中即可。
$(".word").append($(this).clone());
});
});
//需求：实现列表选中条目左右选择功能
$(function () {
$("#toRight").click(function () {
//获取右边的下拉列表对象，append(左边下拉列表选中的option)
$("#rightName").append($("#leftName > option:selected"));
});
$("#toLeft").click(function () {
//appendTo 获取右边选中的option，将其移动到左边下拉列表中
$("#rightName > option:selected").appendTo($("#leftName"));
});
});JQuery动画
1. 默认显示和隐藏方式
1. show([speed,[easing],[fn]])
1. speed：动画速度,三个预定义值("slow","normal","fast")或表示动画时长毫秒数(如1000)
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
swing：动画执行时效果是 先慢，中间快，最后又慢
linear：动画执行时速度是匀速的
3. fn：在动画完成时执行的函数，每个元素执行一次。
$("#showDiv").hide("slow","swing",function(){
alert("隐藏了...")
});
2. hide([speed,[easing],[fn]])
$("#showDiv").hide(5000,"swing");
3. toggle([speed],[easing],[fn])
2. 滑动显示和隐藏方式
1. slideDown([speed],[easing],[fn])
2. slideUp([speed,[easing],[fn]])
3. slideToggle([speed],[easing],[fn])
$("#showDiv").slideUp("slow");
3. 淡入淡出显示和隐藏方式
1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed,[easing],[fn]])
$("#showDiv").fadeOut("slow");
$("#showDiv").fadeToggle("slow");JQuery遍历
1. js的遍历方式
* for(初始化值;循环结束条件;步长)
//1.获取所有的ul下的li
var citys = $("#city li");
//2.JS遍历li
for (var i = 0; i < citys.length; i++) {
if("上海" == citys[i].innerHTML){
//break; 结束循环
//continue; //结束本次循环，继续下次循环
}
alert(i+":"+citys[i].innerHTML);
}
2. jq的遍历方式
1. jq对象.each(callback)
1. 语法：
jquery对象.each(function(index,element){});
* index:就是元素在集合中的索引
* element：就是集合中的每一个元素对象
* this：集合中的每一个元素对象
2. 回调函数返回值：
* true:如果当前function返回为false，则结束循环(break)。
* false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
citys.each(function (index,element) {
//3.1 获取li对象 第一种方式 this
//alert(this.innerHTML);
//alert($(this).html());
//3.2 获取li对象 第二种方式 在回调函数中定义参数 index（索引） element（元素对象）
//alert(index+":"+element.innerHTML);
//alert(index+":"+$(element).html());
});
2. $.each(object, [callback])
$.each(citys,function () {
alert($(this).html());
});
3. for..of: jquery 3.0 版本之后提供的方式
for (li of citys) {
alert($(li).html());
}JQuery事件绑定与解绑
1. jquery标准的绑定方式
* jq对象.事件方法(回调函数)；
* 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
* 表单对象.submit();//让表单提交
$("#name").mouseover(function () {
alert("鼠标来了...")
}).mouseout(function () {
alert("鼠标走了...")
});
2. on绑定事件/off解除绑定
* jq对象.on("事件名称",回调函数)
* jq对象.off("事件名称"):若无参数，将所有事件全部解绑
//1.使用on给按钮绑定单击事件 click
$("#btn").on("click", function () {
alert("我被点击了。。。")
});
//2. 使用off解除btn按钮的单击事件
$("#btn2").click(function () {
//解除btn按钮的单击事件
//$("#btn").off("click");
$("#btn").off();//将组件上的所有事件全部解绑
});
3. 事件切换：toggle
* jq对象.toggle(fn1,fn2...)
* 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
//获取按钮，调用toggle方法
$("#btn").toggle(function () {
//改变div背景色backgroundColor 颜色为 green
$("#myDiv").css("backgroundColor", "green");
}, function () {
//改变div背景色backgroundColor 颜色为 pink
$("#myDiv").css("backgroundColor", "pink");
});
1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>插件：增强JQuery的功能
1. $.fn.extend(object)
* 增强通过Jquery获取的对象的功能 $("#id")
//1.定义jqeury的对象插件
$.fn.extend({
//定义了一个check()方法。所有的jq对象都可以调用该方法
check: function () {
//让复选框选中
//this:调用该方法的jq对象
this.prop("checked", true);
},
uncheck: function () {
//让复选框不选中
this.prop("checked", false);
}
});
//调用
$("input[type='checkbox']").check();
2. $.extend(object)
* 增强JQeury对象自身的功能
$.extend({
max: function (a, b) {
//返回两数中的较大值
return a >= b ? a : b;
},
min: function (a, b) {
//返回两数中的较小值
return a <= b ? a : b;
}
});
//调用全局方法
var max = $.max(4, 3);案例：广告自动显示与隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告的自动显示与隐藏</title>
<style>
#content{width:100%;height:500px;background:#999}
</style>
<!--引入jquery-->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
/*
需求：
1. 当页面加载完，3秒后。自动显示广告
2. 广告显示5秒后，自动消失。
分析：
1. 使用定时器来完成。setTimeout (执行一次定时器)
2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
3. 使用 show/hide方法来完成广告的显示
*/
//入口函数，在页面加载完成之后，定义定时器，调用这两个方法
$(function () {
//定义定时器，调用adShow方法 3秒后执行一次
setTimeout(adShow,3000);
//定义定时器，调用adHide方法，8秒后执行一次
setTimeout(adHide,8000);
});
//显示广告
function adShow() {
//获取广告div，调用显示方法
$("#ad").show("slow");
}
//隐藏广告
function adHide() {
//获取广告div，调用隐藏方法
$("#ad").hide("slow");
}
</script>
</head>
<body>
<div>
<!-- 广告DIV -->
<div id="ad" style="display: none;">
<img style="width:100%" src="../img/adv.jpg" />
</div>
<!-- 下方正文部分 -->
<div id="content">
</div>
</div>
</body>
</html>案例：选图片抽奖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽奖</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script language='javascript' type='text/javascript'>
/*
分析：
1. 给开始按钮绑定单击事件
1.1 定义循环定时器
1.2 切换小相框的src属性
* 定义数组，存放图片资源路径
* 生成随机数。数组索引
2. 给结束按钮绑定单击事件
1.1 停止定时器
1.2 给大相框设置src属性
*/
var imgs = ["../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg",
];
var startId;//开始定时器的id
var index;//随机角标
$(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//1. 给开始按钮绑定单击事件
$("#startID").click(function () {
// 1.1 定义循环定时器 20毫秒执行一次
startId = setInterval(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
//1.2生成随机角标 0-6
//0.000--0.999 --> * 7 --> 0.0-----6.9999
index = Math.floor(Math.random() * 7);
//1.3设置小相框的src属性
$("#img1ID").prop("src",imgs[index]);
},20);
});
//2. 给结束按钮绑定单击事件
$("#stopID").click(function () {
//处理按钮是否可以使用的效果
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
// 1.1 停止定时器
clearInterval(startId);
// 1.2 给大相框设置src属性
$("#img2ID").prop("src",imgs[index]).hide();
//显示1秒之后
$("#img2ID").show(1000);
});
});
</script>
</head>
<body>
<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
<img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div>
<!-- 大像框 -->
<div
style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
<img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div>
<!-- 开始按钮 -->
<input
id="startID"
type="button"
value="点击开始"
style="width:150px;height:150px;font-size:22px">
<!-- 停止按钮 -->
<input
id="stopID"
type="button"
value="点击停止"
style="width:150px;height:150px;font-size:22px">
</body>
</html>AJAX：异步的JS和XML
同步和异步
1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML
1. 异步和同步：客户端和服务器端相互通信的基础上
* 同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
* 异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新,提升用户的体验。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。AJAX实现方式
1. 原生的JS实现方式（了解）
function fun() {
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 建立连接
// 请求方式,请求的URL,同步或异步请求：true（异步）或 false（同步）
xmlhttp.open("GET", "ajaxServlet?username=tom", true);
//3.发送请求
xmlhttp.send();
//4.接受并处理来自服务器的响应结果
//获取方式 ：xmlhttp.responseText
//什么时候获取？当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
xmlhttp.onreadystatechange = function () {
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
}
2. JQeury实现方式
1. $.ajax()
* 语法：$.ajax({键值对});
//使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet1111" , // 请求路径
type:"POST" , //请求方式
//data: "username=jack&age=23",//请求参数
data:{"username":"jack","age":23},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误，会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});
2. $.get()：发送get请求
* 语法：$.get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
$.get("ajaxServlet", {username: "rose"}, function (data) {
alert(data);
}, "text");
3. $.post()：发送post请求
* 语法：$.post(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
$.post("ajaxServlet", {username: "rose"}, function (data) {
alert(data);
}, "text");Ajax请求参考
//入口函数
$(function () {
//当表单提交时，调用所有的校验方法
//如果这个方法没有返回值或者返回为true，表单提交，如果返回为false，表单不提交
$("#registerForm").submit(function(){
//获取表单文本输入框的值
var username = $("#username").val();
var pwd = $("#pwd").val();
if(checkUsername() && checkPassword() && checkEmail()){
//发送ajax请求到服务器
//校验通过,发送ajax请求，提交表单的数据 username=zhangsan&pwd=123
//$(this)==$("#registerForm") serialize()将form转为key=value形式
// 第二个参数也可以为{username:username:pwd=pwd}
$.post("user/regist",$(this).serialize(),function(data){
//处理服务器响应的数据data {flag:false,errorMsg:"注册失败"}
if(data.flag){
//注册成功，跳转成功页面
location.href="register_ok.html";
}else{
//注册失败,给errorMsg添加提示信息
$("#errorMsg").html(data.errorMsg);
}
});
}
//2.不提交表单
return false;
});
});JSON：JS的对象表示
1. 概念： JavaScript Object Notation JavaScript对象表示法
* json现在多用于存储和交换文本信息的语法
* 进行数据的传输
* JSON 比 XML 更小、更快，更易解析。
2. 语法：
1. 基本规则
* 数据在名称/值对中：json数据是由键值对构成的
* 键用引号(单双都行)引起来，也可以不使用引号
* 值得取值类型：
1. 数字（整数或浮点数）
2. 字符串（在双引号中）
3. 逻辑值（true 或 false）
4. 数组（在方括号中） {"persons":[{},{}]}
5. 对象（在花括号中） {"address":{"province"："陕西"....}}
6. null
* 数据由逗号分隔：多个键值对由逗号分隔
* 花括号保存对象：使用{}定义json 格式
* 方括号保存数组：[]
2. 获取数据:
1. json对象.键名
2. json对象["键名"]
3. 数组对象[索引]
4. 遍历
//1.定义基本格式
var person = {"name": "张三", age: 23, 'gender': true};
//获取name的值
//var name = person.name;
var name = person["name"];
//2.嵌套格式 {}———> []
var persons = {
"persons": [
{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}
]
};
//获取王五值
var name1 = persons.persons[2].name;
//2.嵌套格式 []———> {}
var ps = [{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}];
//获取李四值
alert(ps[1].name);
//获取ps中的所有值
for (var i = 0; i < ps.length; i++) {
var p = ps[i];
for(var key in p){
alert(key+":"+p[key]);
}
}JSON数据和Java对象互转
JSON解析器：Jsonlib，Gson，fastjson，jackson
1. JSON转为Java对象
1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的方法进行转换 readValue(json字符串数据,Class)
//1.初始化JSON字符串
String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
//2.创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//3.转换为Java对象 Person对象
Person person = mapper.readValue(json, Person.class);
2. Java对象转换JSON
1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
* writeValue(参数1，obj):
File：将obj对象转换为JSON字符串，并保存到指定的文件中
Writer：将obj对象转换为JSON字符串并将json数据填充到字符输出流
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流
ObjectMapper mapper = new ObjectMapper();
//writeValue，将数据写到d://a.txt文件中
mapper.writeValue(new File("a.txt"), p);
//writeValue.将数据关联到Writer中
mapper.writeValue(new FileWriter("b.txt"), p);
* writeValueAsString(obj):将对象转为json字符串
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(p);
2. 注解：
1. @JsonIgnore：排除属性。
2. @JsonFormat：属性值得格式化
* @JsonFormat(pattern = "yyyy-MM-dd")
3. 复杂java对象转换
1. List：数组
2. Map：对象格式一致案例：校验用户名是否存在
1. 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
1. $.get(type):将最后一个参数type指定为"json"
2. 在服务器端设置MIME类型
response.setContentType("application/json;charset=utf-8");前台
//在页面加载完成后
$(function () {
//给username绑定blur事件
$("#username").blur(function () {
//获取username文本输入框的值
var username = $(this).val();
//发送ajax请求
//期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
// {"userExsit":false,"msg":"用户名可用"}
$.get("findUserServlet", {username: username}, function (data) {
//判断userExsit键的值是否是true
// alert(data);
var span = $("#s_username");
if (data.userExsit) {
//用户名存在
span.css("color", "red");
span.html(data.msg);
} else {
//用户名不存在
span.css("color", "green");
span.html(data.msg);
}
});
});
});后台
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取用户名
String username = request.getParameter("username");
//2.调用service层判断用户名是否存在
//期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
// {"userExsit":false,"msg":"用户名可用"}
//设置响应的数据格式为json
response.setContentType("application/json;charset=utf-8");
Map<String,Object> map = new HashMap<String,Object>();
if("tom".equals(username)){
//存在
map.put("userExsit",true);
map.put("msg","此用户名太受欢迎,请更换一个");
}else{
//不存在
map.put("userExsit",false);
map.put("msg","用户名可用");
}
//将map转为json，并且传递给客户端
//将map转为json
ObjectMapper mapper = new ObjectMapper();
//并且传递给客户端
mapper.writeValue(response.getWriter(),map);
}AdminLTE
AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具，它提供了一系列响应的、 可重复使用的组件，并内置了多个模板页面；同时自适应多种屏幕分辨率，兼容PC和移动端。通 过AdminLTE，我们可以快速的创建一个响应式的Html5网站。
https://github.com/almasaeed2010/AdminLTE ：从上面网址获取AdminLTE源代码
AdminLTE布局与皮肤
可以查看start.html页面中查看。
布局
.wrapper包住了body下的所有代码
.main-header里是网站的logo和导航栏的代码
.main-sidebar里是用户面板和侧边栏菜单的代码
.content-wrapper里是页面的页面和内容区域的代码
.main-footer里是页脚的代码
.control-sidebar里是页面右侧侧边栏区域的代码
布局选项
fixed：固定
layout-boxed：盒子布局
layout-top-nav：顶部隐藏
sidebar-collapse：侧边栏隐藏
sidebar-mini：侧边栏隐藏时有小图标
皮肤
skin-blue：蓝色
skin-black：黑色
skin-purple：紫色
skin-yellow：黄色
skin-red：红色
skin-green：绿色
1947
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
