JavaScript部分
一、基础：
1.概念：
JavaScript是一门客户端脚本语言
运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行了
2.功能：
可以增强用户和html页面的一个交互过程，可以来控制html元素，让页面有些动态的效果，增强用户的体验
3.发展史：
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)
4.特点：
1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘）
3. 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）
二、ECMAScript：客户端脚本语言的标准
1.基本语法：
1.与html的结合方式
1.内部js：
定义<script>,标签体内容就是js代码。
只需要在 head 标签中或者在 body 标签中，使用script标签来书写JavaScript代码
实例(在head标签内):
{
<script type="text/javascript">
alert("hello javaScript!");
</script>
} 2.外部js：
定义<script>,通过src属性引入外部的js文件
使用script标签引入单独的JavaScript代码文件
实例(事先额外定义一个js文件，在head标签内有):
{
<script type="text/javascript" src="目标就是文件.js"></script>
} 注：
<script>标签可以定义在html的任意部分。但是定义的位置为影响执行的顺序。
<script>可以定义多个
2.注释：
1.单行注释：//注释内容
2.多行注释：/*注释内容*/
3.数据类型：
js是弱类型的语言
1.原始数据类型(基本数据类型)：
1.number：
数字。整数、小数、
NaN(not a number 一个不是数字的数字类型，和任何数字进行运算结果均为NaN)
2.string：
字符串。 字符串 "abc"='abc'
3.boolean：
true和false
4.null：
一个对象为空的占位符
5.undefined：
未定义，若一个变量未被初始化时则被默认赋值为undefined2.引用数据类型：对象
1.对象类型： object
2.函数类型： function 4.变量：
变量：一块存储数据的内存区域
java是强类型语言，JavaScript是弱类型语言
语法：
var 变量名称=初始化值；
var 变量名; 5.运算符：
typeof()运算符：用于判定输入的变量类型
1.一元运算符：只有一个远算数的运算符
++(自增)、--(自减)：
先加后用，先用后加
+(正号)、-(负号)：
在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
其它类型转number：
String转number：按照字面值进行转换，若字面值不是数字，则转为NaN(不是数字的数字)
boolean转number：true转1，false转0
2.算数运算符：
数学算数运算符
3.赋值运算符
=、+=、-=、...
4.比较运算符：
<、>、<=、>=、==、===(全等于)
比较方式：
1.类型相同：直接比较
字符串：按照字典顺序比较，按位逐一比较，直到得出大小结果为止
2.类型不同：先进行类型转换，再比较
===：全等于，在比较之前，先判断类型，若类型不一样，则直接返回false(除了做字面值的比较之外，还会比较两个变量的数据类型)
==：等于，等于是简单的做字面值的比较
5.逻辑运算符：
&&：与(交){短路：左边定了就不看右边}--交见假则假。
当表达式全为真的时候。返回最后一个表达式的值。
当表达式中，有一个为假的时候。返回第一个为假的表达式的值。
||：或(并){短路：左边定了就不看右边}--并见真则真
当表达式全为假时，返回最后一个表达式的值
只要有一个表达式为真。就会把回第一个为真的表达式的值
！：非--取反
其它类型转boolean：
1.number：0或NaN为假，其他为真
2.string：除了空字符串("")，其他都是true
3.null&undefined：都是false
4.对象：所有对象都为true
注：
在JavaScript语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
当且仅当0 、null、 undefined、""(空串) 都认为是 false。
并且 && 与运算 和 ||或运算 有短路。
短路:当这个&&或||运算有结果了之后 。后面的表达式不再执行
6.三元运算符：
语法(同java)：
表达式 ? 值1:值2
表达式为真返回值1
表达式为假返回值2
6.js特殊语法：
1.语句;结尾，若一行只有一条语句，则;可以省略(一般不建议使用)
2.变量的定义可以使用var关键字，当然也可以不使用
用var：定义局部变量
不用var：定义全局变量
7.流程控制语句：
1.if...else...
2.switch
在java中，switch语句可以接收的数据类型：byte short int char ，枚举(1.5以后)，String(1.7之后)
switch(变量)：
case 值：
在js中，switch语句可以接收任意的原始数据类型
3.while
4.do...while
5.for
2.基本对象
Function：函数对象
1.创建：
1. var fun=new function(形参列表，方法体)；//不推荐使用
2. function 方法名称(形参列表){方法体}
3. var 方法名 = function(形参列表){方法体} 2.属性:
length:代表形参的个数
3.特点:
1.方法定义时，形参类型不用写，因为都是var；返回值类型也可以不用写，只需要在函数体内直接使用 return 语句返回值即可！
2.方法是一个对象，若定义相同名称的方法，则会出现覆盖情况。在Java中函数允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义。
3.在js中，方法的调用只和方法名称有关，和参数列表无关
4.在方法声明中有一个隐藏的内置对象(数组)--arguments，封装了所有的实际参数
4.调用
方法名称(实参列表)； 5.函数的arguments隐形参数（只在function函数内）
就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量(称隐形参数)。
隐形参数特别像 java 基础的可变长参数一样。 public void fun( Object ... args );
可变长参数其他是一个数组。 那么js中的隐形参数也跟java的可变长参数一样。操作类似数组
三个类似包装类对象：
Boolean;Number;String
Array：数组对象：
1.创建：
1. var arr =new Array(元素列表);
2. var arr =new Array(默认长度);
3. var arr =[元素列表];2.方法:
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push():将新元素添加到数组的末尾，并返回新的长度3.数组的遍历
for (var i = 0; i < arr.length; i++){ alert(arr[i]); }
for (let i = 0; i < arr.length; i++){ alert(arr[i]); } 4.特点:
1.JS中，数组元素类型是可变的
2.JS中，数组长度是可变的
3.JS中，只要我们通过数组下标赋值,那么最大的下标值,就会自动的给数组做扩容操作。
Date：
1.创建：
var date = new Date();2.方法：
toLocalString():返回当前date对象对应的时间本地字符串格式
getTime():返回自 1970 年 1 月 1 日午夜以来与指定日期的毫秒数。 Math：
1.创建：
特点：Math对象不用创建，直接使用。 Math.方法();
2.方法：
random():返回 0 到 1 之间的随机数。含0不含1
ceil(x)：返回 x，向上舍入为最接近的整数。向上取整
floor(x)：返回 x，向下舍入为最接近的整数。向下取整
round(x)：将 x 舍入为最接近的整数。 3.属性：
如：PI：圆周率
RegExp：正则表达式对象
1.正则表达式：
1.概念：
定义字符串的组成规则
2.定义：
1.单个字符：[]
匹配[]中的内容，只要有一个符合即可
如：
[a] [ab]{表示a或b} [a-zA-Z0-9_]{表示全26个小写字母或全26个大写字母或0到9}特殊符号代表特殊含义的单个字符
\d:单个数字字符[0-9]
\w:单个单词字符[a-zA-Z0-9_]2.量词符号：
n+ 量词匹配包含至少一个n的任何字符串。
n* 量词匹配包含零个或多个 n 的任何字符串。
n? 量词匹配任何包含零个或一个 n 的字符串。
n{X} 量词匹配包含 X 个及其以上 n 的序列的字符串。
n{X,Y} 量词匹配包含 X 或 Y 个 n 的序列的字符串。X 和 Y 必须是数字。
n{X,} 量词匹配包含至少 X 个 n 的序列的字符串。X 必须是数字。
n$ 量词匹配任何结尾为 n 的字符串。
^n量词匹配任何开头为 n 的字符串。
?=n 量词匹配任何其后紧接指定字符串 n 的字符串。
*：表示出现0次或多次
?：表示出现0次或1次
+：表示出现1次或多次
{m,n}:表示m<=数量<=n
m若缺省：{,n}；最多n次
n若缺省：{m,}；最少m次3.开始结束符号
1.^：开始
2.$：结束 2.正则对象
1.创建：
1. var reg=new RegExp("正则表达式");
2. var reg=/正则表达式/;2.方法
1. test(参数)：验证指定的字符串是否符合正则定义的规范
返回一个boolean类型数值，匹配上即返回true，匹配不上即返回false Global：
1.特点：
全局对象，这个Global中封装的方法不需要对象就可以直接调用 方法名();
2.方法：
URL编码：
(在编码中%表示分隔符:老年社区=3Fwd%3D%E8%80%81%E5%B9%B4%E7%A4%BE%E5%8C%BA):
encodeURI()：对 URI 进行编码。
decodeURI()：解码 URI。
encodeURIComponent()：对 URI 组件进行编码。编码的字符更多
decodeURIComponent()：解码 URI 组件。
parseInt():将字符串转为数字
注意判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN():判断一个值是否是NaN
NaN参与的==比较全部为false,其中包括NaN本身
eval():将字符串转换成脚本代码执行。
3.JS中的自定义对象(扩展内容)
Object 形式的自定义对象
对象的定义：
var 变量名 = new Object(); // 对象实例（空对象）
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} // 定义一个函数对象的访问：
变量名.属性 / 函数名(); {}花括号形式的自定义对象
对象的定义：
var 变量名 = { // 空对象
属性名：值, // 定义一个属性
属性名：值, // 定义一个属性
函数名：function(){} // 定义一个函数
};对象的访问：
变量名.属性 / 函数名();三、BOM：
1.概念：
Browser Object Model 浏览器对象模型
将浏览器的各个部分封装成对象
浏览器对象{
window对象{
地址栏Location对象
历史记录对象history
DOM对象，Document对象
}
} 2.组成：
window：窗口对象：
1.创建:
1.window对象不需要创建可以直接使用window使用。window.方法名();
2.window引用可以省略。 方法名称() 2.方法
1.与弹出框有关的方法：
alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
若用户点击确定按钮，则方法返回true
若用户点击取消按钮，则方法返回false
prompt()：显示可提示用户输入的对话框。
返回值：获取用户输入的值2.与打开关闭有关的方法：
open("URL")：打开一个新的浏览器窗口或查找一个已命名的窗口。返回新的window对象
close()：关闭浏览器窗口。谁调用close()方法，那么谁就被关闭3.与定时器有关的方法：
setTimeout()：在指定的毫秒数后调用函数或计算表达式。
参数：
1.js代码或方法对象
2.毫秒值
返回值：唯一标识，用于取消定时器
clearTimeout()：取消由 setTimeout() 方法设置的 timeout。
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()：取消由 setInterval() 设置的 timeout。
3.属性：
1.获取其他BOM对象
history
location
navigator
screen2.获取DOM对象
document 4.特点
1.window对象不需要创建可以直接使用window使用。window.方法名();
2.window引用可以省略。 方法名称()
history：历史记录对象
1.概念：
仅记录当前窗口访问过哪些页面
2.创建：
1.window.history
2.history3.方法：
back()：加载 history 列表中的前一个 URL。
forward()：加载 history 列表中的下一个 URL。
go(参数)：加载 history 列表中的某个具体页面。
参数：
正数：前进几个历史记录
负数：后退几个历史记录4.属性：
length：返回当前窗口历史列表中的 URL 数量。 location：地址栏对象
1.概念：
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
1.创建(获取)：
1.window.location
2.location2.属性：
href：设置或返回完整的 URL。3.方法
reload()：重新加载当前文档。刷新 navigator：浏览器对象
screen：显示器屏幕对象
四、DOM：
1.概念：
Document Object Model文档对象模型
将标记语言的各个部分(标签，属性，文本)，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作即控制(增删改查)HTML文档的内容。
当html文档进入内存，此html文档会被转换成为一个DOM树型结构，每一个围堵标签就是一个结点，而文本内容就是叶子结点
Document 对象的理解：
1.Document管理了所有的HTML文档内容。
2.document是一种树结构的文档。有层级关系。
3.它让我们把所有的标签都对象化
4.我们可以通过document访问所有的标签对象。
实列：
html 标签对象化:{
<body>
<div id="div01">
div01
</div>
</body>
} 模拟对象化，相当于{
class Dom{
private String id; // id 属性
private String tagName; //表示标签名
private Dom parentNode; //父亲
private List<Dom> children; // 孩子结点
private String innerHTML; // 起始标签和结束标签中间的内容
}
} 2.W3C DOM 标准被分为3个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
Nnde：结点对象，其他5个的父对象 XML DOM - 针对XML 文档的标准模型
HTML DOM - 针对HTML文档的标准模型
3.操作Element对象：
1.修改属性值：
1.明确获取的对象是哪一个
2.查看API文档，找其中有哪些属性可以设置
2.修改改标签体内容
属性：innerHTML 4.核心DOM模型：
Document：文档对象
1.获取(获取)：在html dom模型中可以使用window对象来获取
1.window.document
2.document
2.方法：
1.获取element对象：
1.document.getElementById("id值")：
通过元素的id获取元素的对象，id属性值一般唯一
通过标签的id属性查找标签dom对象,elementId是标签的id属性值
实例:
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScriptGetElementById</title>
<script type="text/javascript">
/*
需求：
当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。
验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。
*/
function onclickFun00() {
// 1 当我们要操作一个标签的时候，一定要先获取这个标签对象。
var usernameObj = document.getElementById("getIDUsername");
// alert(usernameObj);
//[object HTMLInputElement]就是dom对象
// alert(usernameObj.id+":type为"+usernameObj.type+";value为"+usernameObj.value)
var usernameText = usernameObj.value;
//验证字符串是否符合某个规则，使用正则表达式
var patt=/^\w{5,12}$/;
/*
test()方法用于测试某个字符串,是不是匹配我的规则,匹配就返回 true。不匹配就返回 false.
*/
var usernameSpanObj = document.getElementById("usernameSpan");
innerHTML 表示起始标签和结束标签中的内容;innerHTML 这个属性可读，可写
usernameSpanObj.innerHTML="小王你好";
if(patt.test(usernameText)){
// alert("用户名合法");
// usernameSpanObj.innerHTML="用户名合法"
usernameSpanObj.innerHTML="<img src=\"right.png\" width=\"18\" height=\"18\">"
}else {
// alert("用户名不合法");
// usernameSpanObj.innerHTML="用户名不合法"
usernameSpanObj.innerHTML="<img src=\"wrong.png\" width=\"18\" height=\"18\">"
}
}
</script>
</head>
<body>
用户名：<input type="text" id="getIDUsername" value="张三">
<span id="usernameSpan" style="color: red">
</span><br>
<button onclick="onclickFun00()" >校验</button>
</body>
</html>
} 2.getElementsByTagName(tagname)：
由元素名称获取元素对象们，返回值是一个数组
通过标签名查找标签dom对象。tagname是标签名
实例
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScriptGetElementByName</title>
<script type="text/javascript">
//全选
function checkAll() {
// document.getElementsByTagName("input");是按照指定标签名来进行查询并返回集合
// 这个集合的操作跟数组一样,集合中都是 dom 对象,集合中元素顺序是他们在html页面中从上到下的顺序。
var inputs = document.getElementsByTagName("input");
// alert(inputs)
for (let i = 0; i < inputs.length; i++) {
inputs[i].checked=true;
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="cpp" checked="checked">c++
<input type="checkbox" value="java">java
<input type="checkbox" value="JavaScript">JavaScript
<br>
<button onclick="checkAll()">全选</button>
</body>
</html>
}
3.getElementsByName(elementName)：
根据name的属性值获取元素对象们，返回值是一个数组
通过标签的name属性查找标签dom对象,elementName标签的name属性值
实例:
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScriptGetElementByName</title>
<script type="text/javascript">
//全选
function checkAll() {
//让所有复选框都选中
//document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合。
//这个集合的操作跟数组一样,集合中每个元素都是dom对象,这个集合中的元素顺序是他们在html页面中从上到下的顺序
var hobbies = document.getElementsByName("hobby");
// alert(hobbies)
// checked 表示复选框的选中状态。如果选中是true,不选中是false;checked 这个属性可读，可写
for (let i = 0; i < hobbies.length; i++) {
hobbies[i].checked=true;
}
}
//全不选
function chechNo() {
var hobbies = document.getElementsByName("hobby");
for (let i = 0; i < hobbies.length; i++) {
hobbies[i].checked=false;
}
}
//反选
function chechReverse() {
var hobbies = document.getElementsByName("hobby");
for (let i = 0; i < hobbies.length; i++) {
hobbies[i].checked=!hobbies[i].checked
// if(hobbies[i].checked){
// hobbies[i].checked=false;
// }else {
// hobbies[i].checked=true;
// }
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp">c++
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="JavaScript">JavaScript
<br>
<button onclick="checkAll()">全选</button>
<button onclick="chechNo()">全不选</button>
<button onclick="chechReverse()">反选</button>
</body>
</html>
} 注：
document对象的三个查询方法,如果有id属性,优先使用getElementById方法来进行查询,如果没有id属性,则优先使用getElementsByName方法来进行查询,如果id属性和name属性都没有最后再按标签名查getElementsByTagName
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。
4.getElementsByClassName():根据class的属性值获取元素对象们，返回值是一个数组
2.创建其他dom对象
1.createAttribute(name)：创建拥有指定名称的属性节点，并返回新的 Attr 对象。
2.createComment()：创建注释节点。
3.createElement(tagName)：创建元素节点。
通过给定的标签名,创建一个标签对象。tagName是要创建的标签名
实例
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>creatElement</title>
<script type="text/javascript">
window.onload=function () {
// 现在需要我们使用 js 代码来创建 html 标签，并显示在页面上
// 标签的内容就是：<div>张三你好</div>
var divObj = document.createElement("div");//在内存中<div></div>
// alert(divObj)
var textNodeObj = document.createTextNode("张三你好");//有一个文本结点对象"张三你好"
divObj.appendChild(textNodeObj);//在内存中<div>张三你好</div>
// divObj.innerHTML="张三你好"//在内存中<div>张三你好</div>
//添加子元素
document.body.appendChild(divObj)
}
</script>
</head>
<body>
</body>
</html>
}
4.createTextNode()：创建文本节点。
Element：元素对象
1.获取/创建：通过document来获取和创建
2.方法：
1.removeAttribute()：删除指定的属性。
2.setAttribute()：设置新属性。 Nnde：结点对象，其他5个的父对象
特点：所有dom对象都可以被认为是一个节点
方法：
CRUD DOM树：
appendChild()：向节点的子节点列表的结尾添加新的子节点。
removeChild()：删除（并返回）当前节点的指定子节点。
replaceChild()：用新节点替换一个子节点。
属性：
parentNode：返回当前节点的父节点。
节点的常用属性和方法：
1.结点概念简述：节点就是标签对象
2.方法：
通过具体的元素节点调用
getElementsByTagName() 方法，
获取当前节点的指定标签名孩子节点
appendChild( oChildNode ) 方法，
可以添加一个子节点，oChildNode 是要添加的孩子节点
3.属性：
childNodes 属性，获取当前节点的所有子节点
firstChild 属性，获取当前节点的第一个子节点
lastChild 属性，获取当前节点的最后一个子节点
parentNode 属性，获取当前节点的父节点
nextSibling 属性，获取当前节点的下一个节点
previousSibling 属性，获取当前节点的上一个节点
className 属性，用于获取或设置标签的 class 属性值
innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
innerText 属性，表示获取/设置起始标签和结束标签中的文本 5.HTML DOM
1. 标签体的设置和获取：innerHTML
2. 使用html元素对象的属性
3. 控制元素样式
1. 使用元素的style属性来设置
如：
{
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
}2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
五、事件(监听机制)：
1、概念：
某些组件被执行了某些操作后，触发某些代码的执行。 电脑输入设备与页面进行交互的响应。
事件：某些操作，如：单击，双击，键盘按下，鼠标移动
事件源：组件。如：按钮 文本输入框...
监听器：代码
注册监听：将事，件事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听代码
2、注册(绑定)事件：
1.事件的注册(绑定)：
告诉浏览器，当事件响应后要执行哪些操作代码。
2.事件的注册又分为静态注册和动态注册两种：
1、静态注册事件：
通过 html 标签的事件属性直接赋于事件响应后的代码。即直接在html标签上，指定事件的属性(操作)，属性就是js代码：
事件：onclick---单击事件
2.动态注册事件：
是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码。 通过js获取元素对象，指定事件属性，设置一个函数
动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名 = fucntion(){}
3、常见的事件：
1. 点击事件：
1. onclick：单击事件，常用于按钮的点击响应操作。
实例
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScriptOnclick</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick事件")
}
//动态注册onclick事件
window.onload=function () {
//1.获取标签对象
/*
document是JavaScript提供的一个对象（文档）
getElementById：通过id属性获取标签对象
*/
var btnObj = document.getElementById("btn00");
// alert(btnObj)
//2.通过标签对象.事件名=function(){}
btnObj.onclick=function () {
alert("动态注册onclick事件")
}
}
</script>
</head>
<body>
<button onclick="onclickFun()">按钮1</button>
<button id="btn00">按钮2</button>
</body>
</html>
} 2. ondblclick：双击事件
2. 焦点事件
1. onblur：失去焦点
一般用于表单验证，常用用于输入框失去焦点后验证其输入内容是否合法。
实例
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScriptOnblur</title>
<script type="text/javascript">
//静态注册失去焦点事件
function onblurFun() {
/*
console 是控制台对象，是由 JavaScript 语言提供，
专门用来向浏览器的控制器打印输出， 用于测试使用
log() 是打印的方法
*/
console.log("静态注册失去焦点事件");
}
//静态注册onblur事件
window.onload=function () {
//1 获取标签对象
var passwordObj = document.getElementById("password");
// alert(passwordObj);
//2 通过标签对象.事件名 = function(){};
passwordObj.onblur = function () {
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun()"><br>
密码:<input id="password" type="text"><br>
</body>
</html>
} 2. onfocus:元素获得焦点。
3. 加载事件：
1. onload：一张页面或一幅图像完成加载。
页面加载完成之后，常用于做页面 js 代码初始化操作
onload 事件是浏览器解析完页面之后就会自动触发的事件
实例(静态)
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OnLoad</title>
<script type="text/javascript">
// onload 事件的方法
function onloadFun() {
alert('静态注册onload事件,所有代码');
}
</script>
</head>
<!--静态注册onload事件-->
<body onload="onloadFun();">
</body>
</html>
}实例(动态)
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OnLoad</title>
<script type="text/javascript">
// onload 事件动态注册。是固定写法
window.onload = function () {
alert("动态注册的 onload 事件");
}
</script>
</head>
<body>
</body>
</html>
}
4. 鼠标事件：
1. onmousedown 鼠标按钮被按下。
定义方法时，定义一个形参，接收event对象
event对象的button属性可以获取鼠标按钮那个键被点击了，左键是0，中间是1，右键是2
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 域的内容被改变。
常用于下拉列表和输入框内容发生改变后操作
实例
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScriptOnchange</title>
<script type="text/javascript">
function onchangeFun() {
alert("国籍已经改变了")
}
window.onload=function () {
//1 获取标签对象
var selObj = document.getElementById("select00");
// alert(selObj)
//2 通过标签对象.事件名 = function(){}
selObj.onchange=function () {
alert("爱好已经改变了")
}
}
</script>
</head>
<body>
请选择国籍
<!--静态注册onchange事件-->
<select onchange="onchangeFun()">
<option>--国籍--</option>
<option>中国</option>
<option>美国</option>
<option>瑞士</option>
</select>
<br>
请选择爱好
<!--动态注册onchange事件-->
<select id="select00">
<option>--爱好--</option>
<option>游泳</option>
<option>绘画</option>
<option>跑步</option>
</select>
</body>
</html>
} 2. onselect 文本被选中。
7. 表单事件：
1. onsubmit 确认按钮被点击。
常用于表单提交前，验证所有表单项是否合法。
可以阻止表单的提交
方法返回false，则表单被阻止提交
实例
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScriptOnsubmit</title>
<script type="text/javascript">
//静态注册表单提交事件
function onsubmitFun() {
//要验证所有表单项是否合法，若有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法")
return false//表单不能被成功提交
// return true;//表单可以成功提交
}
window.onload=function () {
//1 获取标签对象
var formObj = document.getElementById("form00");
// alert(formObj);
//2 通过标签对象.事件名 = function(){}
formObj.onsubmit=function () {
//要验证所有表单项是否合法，若有一个不合法就阻止表单提交
alert("动态注册表单提交事件----发现不合法")
return false//表单不能被成功提交
// return true;//表单可以成功提交
}
}
</script>
</head>
<body>
<!--return false 可以阻止表单提交-->
<form action="http://localhost:8080" method="post" onsubmit=" return onsubmitFun()">
<input type="submit" value="静态注册">
</form>
<form action="http://localhost:8080" method="post" id="form00">
<input type="submit" value="动态注册">
</form>
</body>
</html>
}2. onreset 重置按钮被点击。
tip1：当href的值设置为空时表示再本页面中跳转
tip2：超链接有两个功能：
1.可以被点击：样式
2.点击后跳转到href指定的url
注要实现保留1功能，删除2功能则：href="javascript:void(0);"
Bootstrap部分
一、概念：
Bootstrap是一个前端框架。Bootstrap作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。
好处：
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 响应式布局。
同一套页面可以兼容不同分辨率的设备。
二、快速入门
1. 下载Bootstrap
2. 在项目中将三个相关文件夹复制
3. 创建html页面，引入必要的资源文件
三、响应式布局：
同一套页面可以兼容不同分辨率的设备。
实现：依赖于栅格系统：将一行平均分成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. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行。
四、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. 插件：
轮播图
五、tip
tip：关于Bootstrap的学习教程可上 Bootstrap中文网 进行详细学习
以上是本篇小节，不喜勿喷，感谢理解
相关链接：
2251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
