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:
未定义,若一个变量未被初始化时则被默认赋值为undefined
2.引用数据类型:对象
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
screen
2.获取DOM对象
document
4.特点
1.window对象不需要创建可以直接使用window使用。window.方法名();
2.window引用可以省略。 方法名称()
history:历史记录对象
1.概念:
仅记录当前窗口访问过哪些页面
2.创建:
1.window.history
2.history
3.方法:
back():加载 history 列表中的前一个 URL。
forward():加载 history 列表中的下一个 URL。
go(参数):加载 history 列表中的某个具体页面。
参数:
正数:前进几个历史记录
负数:后退几个历史记录
4.属性:
length:返回当前窗口历史列表中的 URL 数量。
location:地址栏对象
1.概念:
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。
1.创建(获取):
1.window.location
2.location
2.属性:
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中文网 进行详细学习
以上是本篇小节,不喜勿喷,感谢理解
相关链接: