1..什么是JavaScript?
客户端的解释性脚本语言.与Java之间不存在任何关系;
2.JavaScript的语法结构，声明与引入
<script type="text/javascript">...</script>
<script type="text/javascript" src="JS文件路径及名称"></script>
内部JS直接在标签<script></script>中填写，外部导入<script src="外部js路径"></script>
第一步:创建JS文件并且写入相关的代码;
第二步:在网页文件内调用相关的JS文件;
说明:
A.JS严格区分大小写;
B.每行JS代码必须以分号结尾;(现在虽然可以不写,但是怕以后过度到全部用,以防万一)
C.JavaScript文件的扩展名为.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的声明和引入</title>
<script>
alert("这是我的第一个js");
/*js的声明方式1 在head标签进行js代码域的声明 只会作用于当前页面*/
</script>
<script src ="59-my.js" type="text/javascript">
/*src属性引入外部js代码 代码可重用，避免代码冗余*/
console.log(3,5));
</script>
</head>
<body>
</body>
</html>
外部59-my.js
alert("这是外部声明的js");
function add(x,y){
return x+y;
}3.JS中的变量:
JavaScript 变量是存储数据值的容器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的变量</title>
<script type="text/javascript">
var a = 1;
var b = "c";
var c;
alert(typeof(a));
alert(typeof(new Date()));
if(c){
alert(c);
}
function add(x,y){
alert(x+y);
}
for(var i = 1; i < 9;i++){
for(var j = 1; j <= i;j++){
document.write("i*j"+"="+i*j+" ");
}
document.write("<br />");
}
</script>
</head>
<body>
<input type="button" name="" id="" value="" onclick="add()"/>
<label for="">
点击这里调用add函数
</label>
</body>
</html>4.JS中的数据类型
字符型(string)，数值型(number)，布尔型(boolean),未定义(undefined)，null(空对象)，function(自定义函数),
对象(object),属性与方法的集合体;
{
propert:value,
....,
method:function([parameter,...]){
...
...
}
}
<!DOCTYPE html>
<!--p31 20分钟-->
<html>
<head>
<meta charset="UTF-8">
<title>js中自定义对象</title>
<!--应该有哪些属性
应用：
Ajax中会使用
使用：
1.创建自定义对象
var 对象名 = new Object();
对象名.属性名1 = 属性值1；...
2.一般用来存储数据，不会再自定义对象中存储对象。
3.js中的对象属性是可以自定义的可扩充的，不是依赖于类的声明的，类只是对象公共部分的一种声明，是为了减少代码冗余
-->
<script type="text/javascript">
//1.创建自定义对象
var obj = new Object();
obj.name = "jason";
obj.age = 18;
obj.test = function(){
alert(obj.name);
}
obj.test();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!--
js中类的"继承" ： prototype关键字
通过prototype关键字实现了不同对象之间的数据共享
作用1:实现某个类的所有子类对象的方法区对象的共享,节省内存;
作用2：
-->
<meta charset="UTF-8">
<title>js中类和对象</title>
<script type="text/javascript">
var date = new Date();
console.log(date.getHours()+":"+date.getMinutes()+":"+date.getSeconds())
//创建类Person 和 User
function Person(name,age){
this.name = name;
this.age = age;
this.fav = "唱歌";
}
function User(uname,pwd){
this.uname = name;
this.pwd = pwd;
}
//使用prototype
Person.prototype.test = function(){
alert("prototype关键字实现数据共享!!!");
}
Person.prototype.user = new User();
User.prototype.testU = function(){
alert("User中的testU");
}
//使用类
var p1 = new Person("小李","18");
alert(p1.name);
alert(p1.test());
p1.user.testU();
</script>
</head>
<body>
</body>
</html>5.window对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中window对象的学习</title>
<!--
1.框体方法
1.alert 没有返回值
2.confirm 警告框
确认返回true
取消返回false
3.prompt 输入框
返回输入的值 否则 返回null
2.定时和间隔执行方法
setTimeout:
指定的时间后执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒
setInterval : 没间隔指定的事件执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒
clearTimeout 停止当前的定时方法
参数，定时器的id
clearInterval 用来停止指定的时间间隔
参数，间隔器的id
-->
<script type="text/javascript">
//弹窗 警告框 输入框
function testAlert(){
window.alert("测试alert");
}
function testConfirm(){
var a = window.confirm("确定要删除吗??");
console.log(a);
}
function testPrompt(){
var a = window.prompt("请输入昵称:");
console.log(a);
}
//声明全局变量id，为了停止定时执行
var id,ids;
//测试定时执行
function testSetTimeout(){
id = window.setTimeout(function(){
alert("三秒后执行弹窗!!!");
},3000);
}
//间隔执行
function testSetInterval(){
ids = window.setInterval(function(){
alert("我是间隔执行！！！每三秒弹一次");
},2000);
}
//停止定时
function testClearTimeout(){
window.clearTimeout(id);
}
function testClearinterval(){
window.clearInterval(ids);
}
</script>
</head>
<body>
<input type="button" name="" id="" value="测试警告框" onclick="testConfirm()"/><br />
<input type="button" name="" id="" value="测试输入框" onclick="testPrompt()"/><br />
<hr />
<input type="button" name="" id="" value="测试setTimeg定时执行" onclick="testSetTimeout()"/><br />
<input type="button" name="" id="" value="测试setInterval间隔执行" onclick="testSetInterval()"/><br />
<input type="button" name="" id="" value="测试clearTimeout--停止指定的定时器" onclick="testClearTimeout()"/><br />
<input type="button" name="" id="" value="测试clearInterval--停止间隔执行的定时器" onclick="testClearinterval()" />
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中window对象学习2</title>
<!--
js的window对象学习
1.子窗口方法
window.open("子页面的相路径","打开方式","属性")
示例:window.open("59-js-测试用的son子页面.html","newwindow","height=400,width=600,top=0,left=0,toolbar=no,menubar=no,scrollbar =no,resizable=no,location=no,status=no");
注意：关闭子页面的方法window.close() 只能关闭打开的子页面
2.子页面调用父页面的函数
window.opener.父页面的函数
js的window对象的常用属性
地址栏属性： location
window.location.href = "新的资源路径（相对路径/URL）";
window.location.reload() 重新加载资源页面
历史记录属性:history
window.history.forward() 页面资源前景,历史记录的前进
window.history.back() 页面资源后退，历史记录后退
window.history.go(index) 跳转到指定的历史记录资源
-3 -2 -1 负数 0 正数
后退到第几个 当前页面=刷新 1-2-3 当前页面的前第几个
屏幕属性:screen
window.screen.width
window.screen.height 两个结合获取屏幕分辨率
浏览器配置属性：navigator
window.navigator.UserAgent
主题面板属性
-->
<script type="text/javascript">
//1.子页面的方法
function testOpen(){
window.open("59-js-测试用的son子页面.html","newwindow","height=400,width=600,top=0,left=0,toolbar=no,menubar=no,scrollbar =no,resizable=no,location=no,status=no");
}
//子页面调用父页面的函数
function testUseFather(){
alert("父页面的方法!!!不知为什么会调用失败!!!");
}
//1.地址栏属性学习 --- location
function testLocation(){
window.location.href = "https://www.baidu.com";
}
function testLocation2(){
window.location.reload();
}
//2.历史记录属性
function testHistory(){
window.history.forward();
}
//3.屏幕属性学习
function testScreen(){
var x = window.screen.width;
var y = window.screen.height;
alert("x:"+x +" y:"+y);
}
//浏览器配置属性
function testNavigtor(){
alert(window.navigator.userAgent);
}
</script>
</head>
<body>
<input type="button" name="" id="" value="测试open，打开子页面" onclick="testOpen()"/>
<br />
<hr />
<input type="button" name="" id="" value="测试地址栏属性--location--跳转资源" onclick="testLocation()"/><br />
<input type="button" name="" id="" value="测试地址栏属性--location--重新加载资源" onclick="testLocation2()"/>
<hr />
<br />
<input type="button" name="" id="" value="测试历史记录--history--前进(bakc同理,go下标)" onclick="testHistory();"/>
<hr />
<br />
<input type="button" name="" id="" value="测试屏幕属性--screen" onclick="testScreen();"/>
<hr />
<br />
<input type="button" name="" id="" value="测试浏览器配置属性--navigator" onclick="testNavigtor()"/>
</body>
</html>6.DOM对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document对象学习</title>
<!--
1.document 对象的概念
浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息
2.使用document
获取HTML元素对象
直接获取方式
通过id
通过name属性值
通过标签名
通过class属性值
操作HTML对象的属性
操作HTML元素对象的内容和样式
操作HTML的文档结构
document操作Form元素
document操作表格
document对象实现form表单的校验
-->
<script type="text/javascript">
//document获取元素对象
//1.直接获取方式
function testGetElementById(){
var inp = document.getElementById("uname");
alert(inp);
}
function testGetElementsByName(){
alert(document.getElementsByName("uname1").length);
}
function testGetElementsByTagName(){
var inps = document.getElementsByTagName("input");
alert(inps.length);
}
function testGetElementsByClassName(){
var inp1 = document.getElementsByClassName("uname");
alert(inp1);
}
//2.间接获取方式
//父子关系
function testParentGetChilds(){
//获取父级元素对象
var parentEle = document.getElementById("showdiv");
//获取所有的子元素对象群组
var childs = parentEle.childNodes;
alert(childs.length); //有换行所以会增加很多
}
//子父关系
function testChildGetParent(){
alert(document.getElementById("inp").parentNode);
}
//兄弟关系
function testBrother(){ //注意有回车换行
var preEle = document.getElementById("inp").previousSibling; //弟获取兄
var nextEle = document.getElementById("inp").nextSibling; //兄获取弟
alert(preEle + ":::" + nextEle)
}
</script>
<style type="text/css">
.common{}
#showdiv{
border: solid 1px red;
width: 400px;
height: 500px;
}
</style>
</head>
<body>
<h3>document 对象的概念和获取元素对象学习</h3>
直接获取：
<hr /><br />
<input type="text" name="uname" id="uname" value="测试获取HTML元素对象---getElementById('id值')" onclick="testGetElementById()" style="width: 400px;"/><br />
<input type="text" name="uname1" id="uname1" value="测试获取HTML元素对象---getElementByName('name值')" onclick="testGetElementsByName()" style="width: 400px;"/><br />
<input type="text" name="uname2" id="uname2" value="测试获取HTML元素对象---getElementsByTagName('标签名')" onclick="testGetElementsByTagName()" style="width: 400px;"/><br />
<input type="text" name="uname3" id="uname3" value="测试获取HTML元素对象---getElementsByClassName('标签名')" onclick="testGetElementsByClassName()" style="width: 400px;"/><br />
<br />
<input type="checkbox" name="" id="" value="复选框" class="common"/>
<br />
间接获取：<br />
<input type="button" name="" id="" value="获取所有子元素--父子关系" onclick="testParentGetChilds()"/><br />
<input type="button" name="" id="" value="获取父元素--子父关系" onclick="testChildGetParent()"/><br />
<input type="button" name="" id="" value="获取兄弟元素--兄弟关系" onclick="testBrother()"/><br />
<div id="showdiv">
<input type="" name="" id="" value="" />
<input type="" name="" id="inp" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
</div>
</body>
</html>7.JS操作元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js操作HTML的元素属性</title>
<!--
js 操作HTML元素属性学习
获取元素对象
操作元素属性
获取：
①元素对象.属性值 // 返回当前属性的属性值
②元素对象.getAttribute("属性名")
修改
元素对象.属性名 = 属性值
元素对象.setAttribute("属性名","属性值")
注意：
尽量不要去修改id 和 name 属性值
使用固有方法获取value值是默认值，不能获取到实时的值
-->
<script type="text/javascript">
//获取 修改
function testField(){
//获取元素对象
var inp = document.getElementById("uname");
alert(inp.value);
//修改属性
inp.value = "修改后的属性";
inp.type = "button";
}
//getArrtibute("属性名") 和 setAttribute("属性名","属性值")
function testGetAndSet(){
alert(document.getElementById("uname").getAttribute("type"));
document.getElementById("uname").setAttribute("abc","测试getAttribute()和setAttribute()");
alert(document.getElementById("uname").getAttribute("abc"));
}
</script>
</head>
<body>
<h3>
js操作HTML的元素属性
</h3>
<input type="button" name="" id="" value="元素对象.属性名获取元素属性" onclick="testField()"/>
<input type="button" name="" id="" value="getAttribute()和setAttribute()" onclick="testGetAndSet()"/>
<hr />
用户名：<input type="text" name="uname" id="uname" value="先存放的12" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js操作元素内容</title>
<!--
操作元素内容
获取元素对象
获取
对象元素.innerHTML ==>当前元素的所有内容，包括标签
对象元素.innerText ==>当前元素的文本内容，不包括标签
修改：
对象元素.innerHTML = "新的值"; ==>HTML标签会被解析且覆盖新的值
对象元素.innerHTML = 对象元素.innerHTML+"新的值"; ==>HTML标签会被解析且追加到末尾
对象名.innerText = "新的值"; ==>HTML标签不会被解析且覆盖新的值
对象元素.innerText = 对象元素。innerTEXT+"新的值"; ==>HTML标签不会被解析且追加新的值
-->
<script type="text/javascript">
//获取元素内容
function getContext(){
//获取对象及其内容
alert(document.getElementById("div01").innerHTML);
alert(document.getElementById("div01").innerText);
}
//修改元素内容
function updateContext1(){
var div = document.getElementById("div01");
div.innerHTML = div.innerHTML + "<br />测试文本3";
}
function updateContext2(){
var div = document.getElementById("div01");
div.innerText = div.innerText + "<br />测试文本3";
}
</script>
<style type="text/css">
#div01{
width:400px;
height: 500px;
}
</style>
</head>
<body>
<h3>js操作元素内容学习</h3>
<input type="button" name="" id="" value="获取元素内容--innerHTML" onclick="getContext()"/>
<input type="button" name="" id="" value="修改元素内容--innerHTML" onclick ="updateContext2()" />
<hr />
<div id="div01">
测试文本1，
测试文本2。
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js操作元素的文档</title>
<!--
js操作HTML文档结构
增加节点
删除节点
第一种方式：
使用innerHTML:
div.innerHTML = div.innerHTML + "内容"; //增加节点
div.innerHTML = ""; //删除所有节点
父节点.removeChild(子节点对象); //删除指定的子节点 == 不适合table
第二种方式：见操作文档结构2
获取元素对象
var obj = document.createElement("标签名");
obj.属性名="新值";
最后记得追加 ===》元素对象.appendChild(obj);
删除同上: 父节点.removeChild(子节点对象);
-->
<script type="text/javascript">
//innerHTML添加节点
function testAdd(){
var divEle = document.getElementById("showdiv");
divEle.innerHTML = divEle.innerHTML + "<div><input type='file' name='' value='选择文件'/><input type='button' name='' id='' value='删除' onclick='testDelete(this)' /></div>";
}
//删除按钮
function testDelete(btn){
//获取父级div
var showdiv = document.getElementById("showdiv");
//获取要删除的子div
var parentDiv = btn.parentNode;
//父div删除子div
showdiv.removeChild(parentDiv);
}
</script>
</head>
<body>
<h3>js操作元素的文档结构</h3>
<input type="button" name="" id="" value="继续上传" onclick="testAdd()" />
<br /><hr />
<div id="showdiv">
<input type="file" name="" value="选择文件"/><input type='button' name='' id='' value='删除' onclick="testDelete(this);"/>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js操作元素的文档结构2</title>
<script type="text/javascript">
function testOpera(){
//获取元素对象
var showdiv = document.getElementById("showdiv");
//创建input元素对象
var inp = document.createElement("input");
inp.type = "file";
//创建input元素对象
var btn = document.createElement("input");
btn.type = "button";
btn.value = "删除";
//onclick也是属性
btn.onclick=function(){
showdiv.removeChild(inp);
showdiv.removeChild(btn);
showdiv.removeChild(br);
}
//创建换行符
var br = document.createElement("br");
//将创建的元素存放到div中
showdiv.appendChild(inp);
showdiv.appendChild(btn);
showdiv.appendChild(br);
}
</script>
</head>
<body>
<h3>js操作文档的结构2</h3>
<input type="button" name="" id="" value="继续上传" onclick="testOpera()" />
<br /><hr />
<div id="showdiv">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js操作元素的样式</title>
<!--
js操作元素样式
获取元素对象
1.通过style属性
元素对象.style.样式名="样式值"; //添加或者修改样式
元素对象.style.样式名=""; //删除样式
注意：以上操作，操作的是HTML的style属性声明中的样式，而不是其他css代码中的样式
2.通过className
元素对象.className = "新的值"; 添加或者修改类选择器
元素对象.className = ""; 删除类样式
-->
<script type="text/javascript">
//js操作样式--style 添加 修改 删除 元素样式
function testChangeCss(){
var showdiv = document.getElementById("showdiv");
//添加样式的两种方法
//showdiv.style = "background-color:green"; //这种写法或者下面的写法
showdiv.style.backgroundColor = "#FF0000";
//修改样式
showdiv.style.border = "solid 2px #00FF00";
//删除样式
showdiv.style.width= "";
}
//js操作样式 -- className
function testOperaCss(){
var div01 = document.getElementById("div01");
//获取
alert(div01.className);
//添加 或者 修改
div01.className = "common2";
// //删除
// div01.className = "";
}
</script>
<style type="text/css">
#showdiv{
width:400px;
height: 500px;
}
.common{
width:400px;
height: 500px;
border: 1px solid red;
}
.common2{
width:400px;
height: 500px;
border: 1px solid red;
background-color: aqua;
}
</style>
</head>
<body>
<h3>js操作元素的样式</h3>
<input type="button" name="" id="" value="style增删改样式" onclick="testChangeCss()"/>
<input type="button" name="" id="" value="通过class修改样式" onclick="testOperaCss()"/>
<br /><hr />
<div id="showdiv">
</div>
<div id="div01" class="common">
</div>
</body>
</html>8.JS操作表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作表格</title>
<!--
js 操作表格
1.删除行
行对象.rowIndex //返回行对象的下标
表格对象.deleteRow(行对象.rowIndex )
-->
<!--js代码区域-->
<script type="text/javascript">
//删除行
function deleteTr(btn){
//获取表格对象
var table = document.getElementById("bookTable");
//获取要删除的行对象
var tr = btn.parentNode.parentNode;
//删除
table.deleteRow(tr.rowIndex);
}
//修改表格
function updateRow(btn){
//获取父节点的父节点 ==>行对象
var tr = btn.parentNode.parentNode;
//获取需要修改的单元格
var cell = tr.cells[4]
if(!isNaN(Number(cell.innerHTML))){
//修改单元格
cell.innerHTML = "<input type='text' value='" +cell.innerHTML +"' onblur='updateRow2(this)'/>";
};
}
//失去焦点修改值
function updateRow2(inpText){
//获取父节点的父节点 ==>行对象
var tr = inpText.parentNode.parentNode;
//获取需要修改的单元格
var cell = tr.cells[4]
//失去焦点将值赋给单元格
cell.innerHTML = inpText.value;
}
</script>
<style type="text/css">
#bookTable tr{
height: 35px;
}
body{
text-align: center;
}
</style>
</head>
<body>
<h3 align="center">js操作表格</h3>
<input type="button" name="" id="" value="添加行" />
<input type="button" name="" id="" value="删除行" disabled="disabled"/>
<input type="button" name="" id="" value="复制行" disabled="disabled"/>
<br /><hr />
<table id = "bookTable" border="2px" cellspacing="1px" cellpadding="3px" align="center">
<tr align="center" style="font-weight: bold;">
<td><input type = "checkbox" name = "chk" id = "chk" onclick="" /></td>
<td width = "200px;">书名</td>
<td width = "100px;">作者</td>
<td width = "100px;">价格</td>
<td width = "100px;">数量</td>
<td width = "200px;">操作</td>
</tr>
<tr>
<td><input type = "checkbox" name = "chkd" id = "chkd" onclick="" /></td>
<td>Thinking in Java</td>
<td>jason</td>
<td>99.45</td>
<td id="cell">30</td>
<td>
<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
<input type="button" name="" id="" value="删除" onclick="deleteTr(this)"/>
</td>
</tr>
<tr>
<td><input type = "checkbox" name = "chkd" id = "chkd" onclick="" /></td>
<td>Java Web 开发详解</td>
<td>孙鑫</td>
<td>1000</td>
<td>1</td>
<td>
<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
<input type="button" name="" id="" value="删除" onclick="deleteTr(this)"s/>
</td>
</tr>
<tr>
<td><input type = "checkbox" name = "chkd" id = "chkd" onclick="" /></td>
<td>JSP应用开发详解</td>
<td>电子工业出版社</td>
<td>34</td>
<td>90</td>
<td>
<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
<input type="button" name="" id="" value="删除" onclick="deleteTr(this)"/>
</td>
</tr>
</table>
<h1 style="color:red">上面的功能 和 复选框暂时没写</h1>
</body>
</html>9.JS操作form表单
<!DOCTYPE html>
<!--p43 开头-->
<html>
<head>
<meta charset="UTF-8">
<title>js操作form表单</title>
<!--
js操作form表单
1.获取form表单对象
使用id 或者 表单的name属性
2.获取form下的所有表单元素对象集合
fm.elements
3.form 表单的常用方法
表单对象.submit(); //提交表单数据
4.form 的属性的操作
表单对象.action = "新的值"; //动态改变数据提交路径
表单对象.method = "新的值"; //动态的改变提交方式
5.表单元素的通用属性
只读模式 readonly 只读会提交
关闭模式 disable 禁用不提交
-->
<script type="text/javascript">
function testForm(){
//获取form表单对象
var fm = document.getElementById("fm");
//使用form表单的name属性值来获取form表单对象==》form特殊，其他不行
var frm = document.frm; //===>获取的结果和上面完全一样
// alert(frm===fm);
//获取form表元素对象集合
// alert(fm.elements.length);
//form 表单的常用方法
// fm.submit(); //提交,很重要
fm.reset(); //重置
//form表单的属性操作
fm.action="https://www.baidu.com/s";
}
</script>
</head>
<body>
<h3>js操作form表单</h3>
<input type="button" name="" id="" value="测试js操作form" onclick="testForm()"/>
<br /><hr />
<form action="#" method="get" id="fm" name="frm">
<b>用户名</b>: <input type="texf" name="wd" id="uname" value="" /><br /><br />
密码:<input type="password" name="pwd" id="pwd" value="" /><br /><br />
<input type="text" name="只读会提交" id="" value="只读" readonly="readonly" /><br />
<input type="text" name="关闭不提交" id="" value="禁用" disabled="disabled" /><br />
<input type="submit" name="" id="" value="登录"/>
</form>
</body>
</html>10.JS中的事件机制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的事件机制学习1</title>
<!--
解释：当一位满足一定的条件后，会触发某类事务的执行
作用：主要结合js的函数来使用
一个事件可以添加多个监听时间，已 ; 分开
内容：
1.单双机事件
单击：onclick
双击：ondblclick
2.鼠标事件
onmousemove 鼠标停在
onmouseover 鼠标移动
onmouseout 鼠标移出
3.键盘事件
onkeyup 键盘弹起
onkeydown 键盘按下
4.焦点事件
onblur
onfocus
5.页面加载事件
onload
注意：
js中添加事件的第一种方式：直接添加监听函数
js的事件只在当前HTML元素有效
-->
<script type="text/javascript">
//单击事件
function testOnclick(){
alert("单击事件!!");
}
//双击事件
function testOndblclick(){
alert("双击事件！！！");
}
//鼠标事件
function testOnmouseover(){
alert("我是鼠标悬停事件!!!");
}
//鼠标移动
function testOnmousemove(){
alert("我被移动了!!!");
}
//移出区域
function testOnmouseout(){
alert("被移出了!!");
}
//键盘事件
function testOnkeyup(){
alert("我是键盘弹起事件!!!");
}
function testOnkeydown(){
alert("我是键盘下压事件!!!");
}
//焦点事件
function testonfocus(){
document.getElementById("showDiv1").innerHTML= "<br/>获取焦点";
// alert("获取焦点事件");
}
function testOnblur(){
alert("失去焦点事件!!!");
}
//页面加载
function testOnload(){
alert("我是页面加载事件!!!");
}
</script>
<style>
#showDiv1{
width: 200px;
height: 200px;
border: solid 2px;
background: border-box;
}
</style>
</head>
<body onload="testOnload()">
<h2>js事件机制的学习1</h2>
<input type="button" name="" id="" value="测试单击" onclick="testOnclick()"/>
<input type="button" name="" id="" value="测试双击" ondblclick="testOndblclick()" />
testOnload();
<br />
<br />
<br />
<div id = "showDiv1" onmouseover="testOnmouseover();" onmousemove="testOnmousemove();" onmouseout="testOnmouseout()"></div>
<br /><hr />
键盘事件学习
键盘弹起事件：<input type="text" name="" id="" value="" onkeyup="testOnkeyup()"/><br />
键盘下压事件: <input type="text" name="" id="" value="" onkeydown="testOnkeydown()"/>
<hr />
焦点事件学习：
获取焦点:<input type="text" name="" id="" value="" onfocus="testonfocus()"/>
<br />
失去焦点:<input type="text" name="" id="" value="" onblur="testOnblur()"/>
</body>
</html>
<script type="text/javascript">
testOnload();
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js事件机制学习2</title>
<!--
1.给合适的HTML标签加上合适的事件
1.onchange --- select下拉选
2.onload ---body
3.鼠标键盘 ==>比如登录注册时
2.给HTML添加多个事件时，注意事件的冲突
3.事件的阻断
当事件监听的函数将返回值给事件时：false阻断，true则继续
4.超链接调用js函数
<a href="javascript:函数()"></a>
-->
<script type="text/javascript">
//值改变事件
function testOnchange(btn){
// alert(document.getElementById(btn).value);
alert("改变了！！！");
}
//事件冲突
function testOnclick(){
alert("单击事件!!!");
}
function testOndblclick(){
alert("双击事件!!!");
}
//事件的阻断！！！
function testBreak(){
alert("事件的阻断!!");
return false;
}
//超链接调用js函数
function testHref(){
alert("这是超链接调用js函数!!!");
}
</script>
</head>
<body>
值改变事件:<input type="text" name="" id="inp1" value="" onchange="testOnchange(this);"/>
<br />
<br />
<select name="" id="sel1" onchange="testOnchange(this);">
<option value="">北京</option>
<option value="">上海</option>
<option value="">赣州</option>
<option value="">深圳</option>
</select>
<hr />
事件的冲突：<br />
<input type="button" name="" id="" value="事件的冲突事件" onclick="testOnclick()" ondblclick="testOndblclick()"/>
<br />
事件的阻断:
<a href="https://www.baidu.com/" target="_blank" onclick="return testBreak()" >点击打开百度</a>
<br />
超链接调用js函数
<a href="javascript:testHref()">超链接调用js函数!!!</a>
</body>
</html>11.JS中的正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的正则表达式</title>
<script type="text/javascript">
//$1反向引用
var str = "a1898989b2c3d4";
str = str.replace(/(d+)/g,'<span style="color:red">$1</span>')
document.write("<br>"+str)
str = str.replace(/(d+)/g,'<span style="color:red">1</span>')
document.write("<br>"+str)
var date = "12/25/2018"
//用一条语句将其输出成"2018-12-25"
date1 = date.replace(/(d{1,})/(d{1,})/(d{4})/,'$3-$1-$2')
document.write("<br>"+date1)
</script>
</head>
<body>
</body>
</html>
评论 (0)