[每日一学] JavaScript学习笔记
作者：CC下载站 日期：2020-03-15 00:00:00 浏览：53 分类：涨姿势
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
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>js的声明和引入</title>
<script>
alert("这是我的第一个js");
/*js的声明方式1在head标签进行js代码域的声明只会作用于当前页面*/
</script>
<scriptsrc="59-my.js"type="text/javascript">
/*src属性引入外部js代码代码可重用，避免代码冗余*/
console.log(3,5));
</script>
</head>
<body>
</body>
</html>
外部59-my.js
alert("这是外部声明的js");
functionadd(x,y){
returnx+y;
}3.JS中的变量:
JavaScript变量是存储数据值的容器。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>js中的变量</title>
<scripttype="text/javascript">
vara=1;
varb="c";
varc;
alert(typeof(a));
alert(typeof(newDate()));
if(c){
alert(c);
}
functionadd(x,y){
alert(x+y);
}
for(vari=1;i<9;i++){
for(varj=1;j<=i;j++){
document.write("i*j"+"="+i*j+" ");
}
document.write("<br/>");
}
</script>
</head>
<body>
<inputtype="button"name=""id=""value=""onclick="add()"/>
<labelfor="">
点击这里调用add函数
</label>
</body>
</html>4.JS中的数据类型
字符型(string)，数值型(number)，布尔型(boolean),未定义(undefined)，null(空对象)，function(自定义函数),
对象(object),属性与方法的集合体;
{
propert:value,
....,
method:function([parameter,...]){
...
...
}
}
<!DOCTYPEhtml>
<!--p3120分钟-->
<html>
<head>
<metacharset="UTF-8">
<title>js中自定义对象</title>
<!--应该有哪些属性
应用：
Ajax中会使用
使用：
1.创建自定义对象
var对象名=newObject();
对象名.属性名1=属性值1；...
2.一般用来存储数据，不会再自定义对象中存储对象。
3.js中的对象属性是可以自定义的可扩充的，不是依赖于类的声明的，类只是对象公共部分的一种声明，是为了减少代码冗余
-->
<scripttype="text/javascript">
//1.创建自定义对象
varobj=newObject();
obj.name="jason";
obj.age=18;
obj.test=function(){
alert(obj.name);
}
obj.test();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPEhtml>
<html>
<head>
<!--
js中类的"继承"：prototype关键字
通过prototype关键字实现了不同对象之间的数据共享
作用1:实现某个类的所有子类对象的方法区对象的共享,节省内存;
作用2：
-->
<metacharset="UTF-8">
<title>js中类和对象</title>
<scripttype="text/javascript">
vardate=newDate();
console.log(date.getHours()+":"+date.getMinutes()+":"+date.getSeconds())
//创建类Person和User
functionPerson(name,age){
this.name=name;
this.age=age;
this.fav="唱歌";
}
functionUser(uname,pwd){
this.uname=name;
this.pwd=pwd;
}
//使用prototype
Person.prototype.test=function(){
alert("prototype关键字实现数据共享!!!");
}
Person.prototype.user=newUser();
User.prototype.testU=function(){
alert("User中的testU");
}
//使用类
varp1=newPerson("小李","18");
alert(p1.name);
alert(p1.test());
p1.user.testU();
</script>
</head>
<body>
</body>
</html>5.window对象
<!DOCTYPEhtml>
<html>
<head>
<metacharset="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
-->
<scripttype="text/javascript">
//弹窗警告框输入框
functiontestAlert(){
window.alert("测试alert");
}
functiontestConfirm(){
vara=window.confirm("确定要删除吗??");
console.log(a);
}
functiontestPrompt(){
vara=window.prompt("请输入昵称:");
console.log(a);
}
//声明全局变量id，为了停止定时执行
varid,ids;
//测试定时执行
functiontestSetTimeout(){
id=window.setTimeout(function(){
alert("三秒后执行弹窗!!!");
},3000);
}
//间隔执行
functiontestSetInterval(){
ids=window.setInterval(function(){
alert("我是间隔执行！！！每三秒弹一次");
},2000);
}
//停止定时
functiontestClearTimeout(){
window.clearTimeout(id);
}
functiontestClearinterval(){
window.clearInterval(ids);
}
</script>
</head>
<body>
<inputtype="button"name=""id=""value="测试警告框"onclick="testConfirm()"/><br/>
<inputtype="button"name=""id=""value="测试输入框"onclick="testPrompt()"/><br/>
<hr/>
<inputtype="button"name=""id=""value="测试setTimeg定时执行"onclick="testSetTimeout()"/><br/>
<inputtype="button"name=""id=""value="测试setInterval间隔执行"onclick="testSetInterval()"/><br/>
<inputtype="button"name=""id=""value="测试clearTimeout--停止指定的定时器"onclick="testClearTimeout()"/><br/>
<inputtype="button"name=""id=""value="测试clearInterval--停止间隔执行的定时器"onclick="testClearinterval()"/>
</html>
<!DOCTYPEhtml>
<html>
<head>
<metacharset="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
主题面板属性
-->
<scripttype="text/javascript">
//1.子页面的方法
functiontestOpen(){
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");
}
//子页面调用父页面的函数
functiontestUseFather(){
alert("父页面的方法!!!不知为什么会调用失败!!!");
}
//1.地址栏属性学习---location
functiontestLocation(){
window.location.href="https://www.baidu.com";
}
functiontestLocation2(){
window.location.reload();
}
//2.历史记录属性
functiontestHistory(){
window.history.forward();
}
//3.屏幕属性学习
functiontestScreen(){
varx=window.screen.width;
vary=window.screen.height;
alert("x:"+x+"y:"+y);
}
//浏览器配置属性
functiontestNavigtor(){
alert(window.navigator.userAgent);
}
</script>
</head>
<body>
<inputtype="button"name=""id=""value="测试open，打开子页面"onclick="testOpen()"/>
<br/>
<hr/>
<inputtype="button"name=""id=""value="测试地址栏属性--location--跳转资源"onclick="testLocation()"/><br/>
<inputtype="button"name=""id=""value="测试地址栏属性--location--重新加载资源"onclick="testLocation2()"/>
<hr/>
<br/>
<inputtype="button"name=""id=""value="测试历史记录--history--前进(bakc同理,go下标)"onclick="testHistory();"/>
<hr/>
<br/>
<inputtype="button"name=""id=""value="测试屏幕属性--screen"onclick="testScreen();"/>
<hr/>
<br/>
<inputtype="button"name=""id=""value="测试浏览器配置属性--navigator"onclick="testNavigtor()"/>
</body>
</html>6.DOM对象
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>document对象学习</title>
<!--
1.document对象的概念
浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息
2.使用document
获取HTML元素对象
直接获取方式
通过id
通过name属性值
通过标签名
通过class属性值
操作HTML对象的属性
操作HTML元素对象的内容和样式
操作HTML的文档结构
document操作Form元素
document操作表格
document对象实现form表单的校验
-->
<scripttype="text/javascript">
//document获取元素对象
//1.直接获取方式
functiontestGetElementById(){
varinp=document.getElementById("uname");
alert(inp);
}
functiontestGetElementsByName(){
alert(document.getElementsByName("uname1").length);
}
functiontestGetElementsByTagName(){
varinps=document.getElementsByTagName("input");
alert(inps.length);
}
functiontestGetElementsByClassName(){
varinp1=document.getElementsByClassName("uname");
alert(inp1);
}
//2.间接获取方式
//父子关系
functiontestParentGetChilds(){
//获取父级元素对象
varparentEle=document.getElementById("showdiv");
//获取所有的子元素对象群组
varchilds=parentEle.childNodes;
alert(childs.length);//有换行所以会增加很多
}
//子父关系
functiontestChildGetParent(){
alert(document.getElementById("inp").parentNode);
}
//兄弟关系
functiontestBrother(){//注意有回车换行
varpreEle=document.getElementById("inp").previousSibling;//弟获取兄
varnextEle=document.getElementById("inp").nextSibling; //兄获取弟
alert(preEle+":::"+nextEle)
}
</script>
<styletype="text/css">
.common{}
#showdiv{
border:solid1pxred;
width:400px;
height:500px;
}
</style>
</head>
<body>
<h3>document对象的概念和获取元素对象学习</h3>
直接获取：
<hr/><br/>
<inputtype="text"name="uname"id="uname"value="测试获取HTML元素对象---getElementById('id值')"onclick="testGetElementById()"style="width:400px;"/><br/>
<inputtype="text"name="uname1"id="uname1"value="测试获取HTML元素对象---getElementByName('name值')"onclick="testGetElementsByName()"style="width:400px;"/><br/>
<inputtype="text"name="uname2"id="uname2"value="测试获取HTML元素对象---getElementsByTagName('标签名')"onclick="testGetElementsByTagName()"style="width:400px;"/><br/>
<inputtype="text"name="uname3"id="uname3"value="测试获取HTML元素对象---getElementsByClassName('标签名')"onclick="testGetElementsByClassName()"style="width:400px;"/><br/>
<br/>
<inputtype="checkbox"name=""id=""value="复选框"class="common"/>
<br/>
间接获取：<br/>
<inputtype="button"name=""id=""value="获取所有子元素--父子关系"onclick="testParentGetChilds()"/><br/>
<inputtype="button"name=""id=""value="获取父元素--子父关系"onclick="testChildGetParent()"/><br/>
<inputtype="button"name=""id=""value="获取兄弟元素--兄弟关系"onclick="testBrother()"/><br/>
<divid="showdiv">
<inputtype=""name=""id=""value=""/>
<inputtype=""name=""id="inp"value=""/>
<inputtype=""name=""id=""value=""/>
<inputtype=""name=""id=""value=""/>
<inputtype=""name=""id=""value=""/>
<inputtype=""name=""id=""value=""/>
</div>
</body>
</html>7.JS操作元素
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>js操作HTML的元素属性</title>
<!--
js操作HTML元素属性学习
获取元素对象
操作元素属性
获取：
①元素对象.属性值//返回当前属性的属性值
②元素对象.getAttribute("属性名")
修改
元素对象.属性名=属性值
元素对象.setAttribute("属性名","属性值")
注意：
尽量不要去修改id和name属性值
使用固有方法获取value值是默认值，不能获取到实时的值
-->
<scripttype="text/javascript">
//获取修改
functiontestField(){
//获取元素对象
varinp=document.getElementById("uname");
alert(inp.value);
//修改属性
inp.value="修改后的属性";
inp.type="button";
}
//getArrtibute("属性名")和setAttribute("属性名","属性值")
functiontestGetAndSet(){
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>
<inputtype="button"name=""id=""value="元素对象.属性名获取元素属性"onclick="testField()"/>
<inputtype="button"name=""id=""value="getAttribute()和setAttribute()"onclick="testGetAndSet()"/>
<hr/>
用户名：<inputtype="text"name="uname"id="uname"value="先存放的12"/>
</body>
</html>
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>js操作元素内容</title>
<!--
操作元素内容
获取元素对象
获取
对象元素.innerHTML==>当前元素的所有内容，包括标签
对象元素.innerText==>当前元素的文本内容，不包括标签
修改：
对象元素.innerHTML="新的值";==>HTML标签会被解析且覆盖新的值
对象元素.innerHTML=对象元素.innerHTML+"新的值";==>HTML标签会被解析且追加到末尾
对象名.innerText="新的值"; ==>HTML标签不会被解析且覆盖新的值
对象元素.innerText=对象元素。innerTEXT+"新的值";==>HTML标签不会被解析且追加新的值
-->
<scripttype="text/javascript">
//获取元素内容
functiongetContext(){
//获取对象及其内容
alert(document.getElementById("div01").innerHTML);
alert(document.getElementById("div01").innerText);
}
//修改元素内容
functionupdateContext1(){
vardiv=document.getElementById("div01");
div.innerHTML=div.innerHTML+"<br/>测试文本3";
}
functionupdateContext2(){
vardiv=document.getElementById("div01");
div.innerText=div.innerText+"<br/>测试文本3";
}
</script>
<styletype="text/css">
#div01{
width:400px;
height:500px;
}
</style>
</head>
<body>
<h3>js操作元素内容学习</h3>
<inputtype="button"name=""id=""value="获取元素内容--innerHTML"onclick="getContext()"/>
<inputtype="button"name=""id=""value="修改元素内容--innerHTML"onclick="updateContext2()"/>
<hr/>
<divid="div01">
测试文本1，
测试文本2。
</div>
</body>
</html>
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>js操作元素的文档</title>
<!--
js操作HTML文档结构
增加节点
删除节点
第一种方式：
使用innerHTML:
div.innerHTML=div.innerHTML+"内容";//增加节点
div.innerHTML="";//删除所有节点
父节点.removeChild(子节点对象);//删除指定的子节点==不适合table
第二种方式：见操作文档结构2
获取元素对象
varobj=document.createElement("标签名");
obj.属性名="新值";
最后记得追加===》元素对象.appendChild(obj);
删除同上:父节点.removeChild(子节点对象);
-->
<scripttype="text/javascript">
//innerHTML添加节点
functiontestAdd(){
vardivEle=document.getElementById("showdiv");
divEle.innerHTML=divEle.innerHTML+"<div><inputtype='file'name=''value='选择文件'/><inputtype='button'name=''id=''value='删除'onclick='testDelete(this)'/></div>";
}
//删除按钮
functiontestDelete(btn){
//获取父级div
varshowdiv=document.getElementById("showdiv");
//获取要删除的子div
varparentDiv=btn.parentNode;
//父div删除子div
showdiv.removeChild(parentDiv);
}
</script>
</head>
<body>
<h3>js操作元素的文档结构</h3>
<inputtype="button"name=""id=""value="继续上传"onclick="testAdd()"/>
<br/><hr/>
<divid="showdiv">
<inputtype="file"name=""value="选择文件"/><inputtype='button'name=''id=''value='删除'onclick="testDelete(this);"/>
</div>
</body>
</html>
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>js操作元素的文档结构2</title>
<scripttype="text/javascript">
functiontestOpera(){
//获取元素对象
varshowdiv=document.getElementById("showdiv");
//创建input元素对象
varinp=document.createElement("input");
inp.type="file";
//创建input元素对象
varbtn=document.createElement("input");
btn.type="button";
btn.value="删除";
//onclick也是属性
btn.onclick=function(){
showdiv.removeChild(inp);
showdiv.removeChild(btn);
showdiv.removeChild(br);
}
//创建换行符
varbr=document.createElement("br");
//将创建的元素存放到div中
showdiv.appendChild(inp);
showdiv.appendChild(btn);
showdiv.appendChild(br);
}
</script>
</head>
<body>
<h3>js操作文档的结构2</h3>
<inputtype="button"name=""id=""value="继续上传"onclick="testOpera()"/>
<br/><hr/>
<divid="showdiv">
</div>
</body>
</html>
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>js操作元素的样式</title>
<!--
js操作元素样式
获取元素对象
1.通过style属性
元素对象.style.样式名="样式值";//添加或者修改样式
元素对象.style.样式名="";//删除样式
注意：以上操作，操作的是HTML的style属性声明中的样式，而不是其他css代码中的样式
2.通过className
元素对象.className="新的值";添加或者修改类选择器
元素对象.className="";删除类样式
-->
<scripttype="text/javascript">
//js操作样式--style添加修改删除元素样式
functiontestChangeCss(){
varshowdiv=document.getElementById("showdiv");
//添加样式的两种方法
//showdiv.style="background-color:green";//这种写法或者下面的写法
showdiv.style.backgroundColor="#FF0000";
//修改样式
showdiv.style.border="solid2px#00FF00";
//删除样式
showdiv.style.width="";
}
//js操作样式--className
functiontestOperaCss(){
vardiv01=document.getElementById("div01");
//获取
alert(div01.className);
//添加或者修改
div01.className="common2";
// //删除
// div01.className="";
}
</script>
<styletype="text/css">
#showdiv{
width:400px;
height:500px;
}
.common{
width:400px;
height:500px;
border:1pxsolidred;
}
.common2{
width:400px;
height:500px;
border:1pxsolidred;
background-color:aqua;
}
</style>
</head>
<body>
<h3>js操作元素的样式</h3>
<inputtype="button"name=""id=""value="style增删改样式"onclick="testChangeCss()"/>
<inputtype="button"name=""id=""value="通过class修改样式"onclick="testOperaCss()"/>
<br/><hr/>
<divid="showdiv">
</div>
<divid="div01"class="common">
</div>
</body>
</html>8.JS操作表格
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>操作表格</title>
<!--
js操作表格
1.删除行
行对象.rowIndex//返回行对象的下标
表格对象.deleteRow(行对象.rowIndex)
-->
<!--js代码区域-->
<scripttype="text/javascript">
//删除行
functiondeleteTr(btn){
//获取表格对象
vartable=document.getElementById("bookTable");
//获取要删除的行对象
vartr=btn.parentNode.parentNode;
//删除
table.deleteRow(tr.rowIndex);
}
//修改表格
functionupdateRow(btn){
//获取父节点的父节点==>行对象
vartr=btn.parentNode.parentNode;
//获取需要修改的单元格
varcell=tr.cells[4]
if(!isNaN(Number(cell.innerHTML))){
//修改单元格
cell.innerHTML="<inputtype='text'value='"+cell.innerHTML+"'onblur='updateRow2(this)'/>";
};
}
//失去焦点修改值
functionupdateRow2(inpText){
//获取父节点的父节点==>行对象
vartr=inpText.parentNode.parentNode;
//获取需要修改的单元格
varcell=tr.cells[4]
//失去焦点将值赋给单元格
cell.innerHTML=inpText.value;
}
</script>
<styletype="text/css">
#bookTabletr{
height:35px;
}
body{
text-align:center;
}
</style>
</head>
<body>
<h3align="center">js操作表格</h3>
<inputtype="button"name=""id=""value="添加行"/>
<inputtype="button"name=""id=""value="删除行"disabled="disabled"/>
<inputtype="button"name=""id=""value="复制行"disabled="disabled"/>
<br/><hr/>
<tableid="bookTable"border="2px"cellspacing="1px"cellpadding="3px"align="center">
<tralign="center"style="font-weight:bold;">
<td><inputtype="checkbox"name="chk"id="chk"onclick=""/></td>
<tdwidth="200px;">书名</td>
<tdwidth="100px;">作者</td>
<tdwidth="100px;">价格</td>
<tdwidth="100px;">数量</td>
<tdwidth="200px;">操作</td>
</tr>
<tr>
<td><inputtype="checkbox"name="chkd"id="chkd"onclick=""/></td>
<td>ThinkinginJava</td>
<td>jason</td>
<td>99.45</td>
<tdid="cell">30</td>
<td>
<inputtype="button"name=""id=""value="修改数量"onclick="updateRow(this)"/>
<inputtype="button"name=""id=""value="删除"onclick="deleteTr(this)"/>
</td>
</tr>
<tr>
<td><inputtype="checkbox"name="chkd"id="chkd"onclick=""/></td>
<td>JavaWeb开发详解</td>
<td>孙鑫</td>
<td>1000</td>
<td>1</td>
<td>
<inputtype="button"name=""id=""value="修改数量"onclick="updateRow(this)"/>
<inputtype="button"name=""id=""value="删除"onclick="deleteTr(this)"s/>
</td>
</tr>
<tr>
<td><inputtype="checkbox"name="chkd"id="chkd"onclick=""/></td>
<td>JSP应用开发详解</td>
<td>电子工业出版社</td>
<td>34</td>
<td>90</td>
<td>
<inputtype="button"name=""id=""value="修改数量"onclick="updateRow(this)"/>
<inputtype="button"name=""id=""value="删除"onclick="deleteTr(this)"/>
</td>
</tr>
</table>
<h1style="color:red">上面的功能和复选框暂时没写</h1>
</body>
</html>9.JS操作form表单
<!DOCTYPEhtml>
<!--p43开头-->
<html>
<head>
<metacharset="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禁用不提交
-->
<scripttype="text/javascript">
functiontestForm(){
//获取form表单对象
varfm=document.getElementById("fm");
//使用form表单的name属性值来获取form表单对象==》form特殊，其他不行
varfrm=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>
<inputtype="button"name=""id=""value="测试js操作form"onclick="testForm()"/>
<br/><hr/>
<formaction="#"method="get"id="fm"name="frm">
<b>用户名</b>:<inputtype="texf"name="wd"id="uname"value=""/><br/><br/>
密码:<inputtype="password"name="pwd"id="pwd"value=""/><br/><br/>
<inputtype="text"name="只读会提交"id=""value="只读"readonly="readonly"/><br/>
<inputtype="text"name="关闭不提交"id=""value="禁用"disabled="disabled"/><br/>
<inputtype="submit"name=""id=""value="登录"/>
</form>
</body>
</html>10.JS中的事件机制
<!DOCTYPEhtml>
<html>
<head>
<metacharset="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元素有效
-->
<scripttype="text/javascript">
//单击事件
functiontestOnclick(){
alert("单击事件!!");
}
//双击事件
functiontestOndblclick(){
alert("双击事件！！！");
}
//鼠标事件
functiontestOnmouseover(){
alert("我是鼠标悬停事件!!!");
}
//鼠标移动
functiontestOnmousemove(){
alert("我被移动了!!!");
}
//移出区域
functiontestOnmouseout(){
alert("被移出了!!");
}
//键盘事件
functiontestOnkeyup(){
alert("我是键盘弹起事件!!!");
}
functiontestOnkeydown(){
alert("我是键盘下压事件!!!");
}
//焦点事件
functiontestonfocus(){
document.getElementById("showDiv1").innerHTML="<br/>获取焦点";
// alert("获取焦点事件");
}
functiontestOnblur(){
alert("失去焦点事件!!!");
}
//页面加载
functiontestOnload(){
alert("我是页面加载事件!!!");
}
</script>
<style>
#showDiv1{
width:200px;
height:200px;
border:solid2px;
background:border-box;
}
</style>
</head>
<bodyonload="testOnload()">
<h2>js事件机制的学习1</h2>
<inputtype="button"name=""id=""value="测试单击"onclick="testOnclick()"/>
<inputtype="button"name=""id=""value="测试双击"ondblclick="testOndblclick()"/>
testOnload();
<br/>
<br/>
<br/>
<divid="showDiv1"onmouseover="testOnmouseover();"onmousemove="testOnmousemove();"onmouseout="testOnmouseout()"></div>
<br/><hr/>
键盘事件学习
键盘弹起事件：<inputtype="text"name=""id=""value=""onkeyup="testOnkeyup()"/><br/>
键盘下压事件:<inputtype="text"name=""id=""value=""onkeydown="testOnkeydown()"/>
<hr/>
焦点事件学习：
获取焦点:<inputtype="text"name=""id=""value=""onfocus="testonfocus()"/>
<br/>
失去焦点:<inputtype="text"name=""id=""value=""onblur="testOnblur()"/>
</body>
</html>
<scripttype="text/javascript">
testOnload();
</script>
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>js事件机制学习2</title>
<!--
1.给合适的HTML标签加上合适的事件
1.onchange---select下拉选
2.onload---body
3.鼠标键盘==>比如登录注册时
2.给HTML添加多个事件时，注意事件的冲突
3.事件的阻断
当事件监听的函数将返回值给事件时：false阻断，true则继续
4.超链接调用js函数
<ahref="javascript:函数()"></a>
-->
<scripttype="text/javascript">
//值改变事件
functiontestOnchange(btn){
// alert(document.getElementById(btn).value);
alert("改变了！！！");
}
//事件冲突
functiontestOnclick(){
alert("单击事件!!!");
}
functiontestOndblclick(){
alert("双击事件!!!");
}
//事件的阻断！！！
functiontestBreak(){
alert("事件的阻断!!");
returnfalse;
}
//超链接调用js函数
functiontestHref(){
alert("这是超链接调用js函数!!!");
}
</script>
</head>
<body>
值改变事件:<inputtype="text"name=""id="inp1"value=""onchange="testOnchange(this);"/>
<br/>
<br/>
<selectname=""id="sel1"onchange="testOnchange(this);">
<optionvalue="">北京</option>
<optionvalue="">上海</option>
<optionvalue="">赣州</option>
<optionvalue="">深圳</option>
</select>
<hr/>
事件的冲突：<br/>
<inputtype="button"name=""id=""value="事件的冲突事件"onclick="testOnclick()"ondblclick="testOndblclick()"/>
<br/>
事件的阻断:
<ahref="https://www.baidu.com/"target="_blank"onclick="returntestBreak()">点击打开百度</a>
<br/>
超链接调用js函数
<ahref="javascript:testHref()">超链接调用js函数!!!</a>
</body>
</html>11.JS中的正则表达式
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>js中的正则表达式</title>
<scripttype="text/javascript">
//$1反向引用
varstr="a1898989b2c3d4";
str=str.replace(/(d+)/g,'<spanstyle="color:red">$1</span>')
document.write("<br>"+str)
str=str.replace(/(d+)/g,'<spanstyle="color:red">1</span>')
document.write("<br>"+str)
vardate="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>猜你还喜欢
- 03-29 [摄影课堂] 电光火石间的决定
- 03-29 [摄影相关] UV镜不要随便将就
- 03-29 [摄影技巧] 抗光害滤镜 | 还原城市最美夜景 城市夜空的色彩救星！
- 03-29 [设计] 无边泳池是怎么设计的？以及它的原理介绍
- 03-29 [摄影] 我们应该怎么去看待摄影的能力？
- 03-27 [涨姿势] 爆冷的最强事业编，活少钱多，一年只有5个月在上班…
- 03-27 [涨姿势] 70年代中国打飞机教程：姿势全面内容详细！
- 03-25 [摄影] 使用除雾带后镜头起雾结霜一样能驰骋沙场
- 03-22 [摄影] 郁金香花朵怎么拍好看 注意这几点就可以了 花卉摄影技巧教程
- 03-06 [关于AI] 天天用AI还不知道AI是怎么反馈的？一文了解生成模型常见损失函数Python代码实现+计算原理解析
- 02-01 [AI绘图] “比较详细”的免费绘制爱好图的教程，我所体验到的开源中最佳效果
- 01-04 [涨姿势] 选择葡萄酒做为礼物的注意事项
您需要 登录账户 后才能发表评论
取消回复欢迎 你 发表评论:
- 精品推荐！
-
- 最新文章
- 热门文章
- 热评文章
![[编程相关] 熊猫脚本助手_吾爱专版 V1.9](https://www.cdz423.com/zb_users/upload/2024/04/20240403022256171208217645744.png)
[编程相关] 熊猫脚本助手_吾爱专版 V1.9
![[办公辅助] Office AI 助手免费版 v0.2.01](https://www.office-ai.cn/static/introductions/officeai/images/wordai.png)
[办公辅助] Office AI 助手免费版 v0.2.01
![[配音工具] 一点红语音合成2.0版本 -吾爱专版](https://www.cdz423.com/zb_users/upload/2024/04/20240403014154171207971478844.jpeg)
[配音工具] 一点红语音合成2.0版本 -吾爱专版
![[电影] 2024年国产动作片《天坑鹰猎 电影版》HD国语中字](https://www.cdz423.com/zb_users/upload/2024/04/20240402221410171206725090750.jpeg)
[电影] 2024年国产动作片《天坑鹰猎 电影版》HD国语中字
![[电影] 2010年国产经典武侠片《镖行天下前传之燃眉危机》HD国语中字](https://www.cdz423.com/zb_users/upload/2024/04/20240402221447171206728728027.jpeg)
[电影] 2010年国产经典武侠片《镖行天下前传之燃眉危机》HD国语中字
![[电影] 2021年国产动作片《妙手神探之鬼门十三针》HD国语中字](https://www.cdz423.com/zb_users/upload/2024/04/20240402221405171206724536799.jpeg)
[电影] 2021年国产动作片《妙手神探之鬼门十三针》HD国语中字
![[课程] Procreate元计划板绘入门系统课程](https://www.cdz423.com/zb_users/upload/2024/04/20240402163050171204665081133.jpeg)
[课程] Procreate元计划板绘入门系统课程
![[课程] DK图解数学动画课程](https://www.cdz423.com/zb_users/upload/2024/04/20240402162553171204635338698.png)
[课程] DK图解数学动画课程
![[有声读物] 儿童汉语分级读物《小羊上山》第1-4季PDF电子版+精读视频+MP3音频](https://www.cdz423.com/zb_users/upload/2024/04/20240402162012171204601279824.png)
[有声读物] 儿童汉语分级读物《小羊上山》第1-4季PDF电子版+精读视频+MP3音频
![[电影] 2023年国产爱情片《不要走散好不好》HD国语中字](https://www.cdz423.com/zb_users/upload/2024/04/20240402221401171206724136809.jpeg)
[电影] 2023年国产爱情片《不要走散好不好》HD国语中字
![[资料] [大学期末救急课] 猴博士+高斯课堂+斐多课堂，全集视频合集](https://www.cdz423.com/zb_users/upload/2024/03/20240330212550171180515014887.jpeg)
[资料] [大学期末救急课] 猴博士+高斯课堂+斐多课堂，全集视频合集
![[云资源] 价值2万元的老男孩Python教程](https://www.cdz423.com/content/uploadfile/201807/7044a3402019825e1e6a9efe74241bf820180720203647.jpg)
[云资源] 价值2万元的老男孩Python教程
![[书库] 史上最全摄影书推荐（附700本PDF版打包下载）](https://www.cdz423.com/zb_users/upload/2024/04/20240402011121171199148142755.jpeg)
[书库] 史上最全摄影书推荐（附700本PDF版打包下载）
![[云资源] 花了一千多元买的私人健身教程](https://www.cdz423.com/zb_users/upload/2024/03/20240331010425171181826527440.png)
[云资源] 花了一千多元买的私人健身教程
![[下载工具] Internet Download Manager 6.42.7 (IDM)](https://www.cdz423.com/zb_users/upload/2024/03/20240325194507171136710766324.png)
[下载工具] Internet Download Manager 6.42.7 (IDM)
![[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手：THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G](https://www.cdz423.com/zb_users/upload/2024/03/20240310103327171003800764975.webp)
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手：THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
![[即时通讯] 腾讯QQ PC版9.7.22.29315去广告绿色纯净版](https://www.cdz423.com/zb_users/upload/2024/02/202402051707112408370795.jpg)
[即时通讯] 腾讯QQ PC版9.7.22.29315去广告绿色纯净版
![[开发环境] PhpStorm2023中文激活版v2023.3.3 正式版](https://www.cdz423.com/zb_users/upload/2024/02/20240205133351170711123128774.jpeg)
[开发环境] PhpStorm2023中文激活版v2023.3.3 正式版
![[图像制作] Adobe Illustrator 2024 v28.1.0.141 破解版](https://www.cdz423.com/zb_users/upload/2023/10/20231012220330169711941029799.png)
[图像制作] Adobe Illustrator 2024 v28.1.0.141 破解版
![[资料] 3000 套电影电视剧 LOGO 宣传片常用音效合集包](https://www.cdz423.com/zb_users/upload/2024/02/20240216140536170806353623293.jpeg)
[资料] 3000 套电影电视剧 LOGO 宣传片常用音效合集包
[云资源] 价值2万元的老男孩Python教程
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手：THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[云资源] 花了一千多元买的私人健身教程
[书库] 史上最全摄影书推荐（附700本PDF版打包下载）
![[安卓软件] Android GIF助手 v3.9.7 GIF图片编辑器破解版](https://www.cdz423.com/zb_users/upload/2024/01/20240109033836170474271611690.jpeg)
[安卓软件] Android GIF助手 v3.9.7 GIF图片编辑器破解版
![[电视剧] 三体 (2024) 全8集 网飞版本 中文字幕 合集](https://www.cdz423.com/zb_users/upload/2024/03/20240325183741171136306189652.jpeg)
[电视剧] 三体 (2024) 全8集 网飞版本 中文字幕 合集
![[剧集] 繁花 (2023)[全30集][打包]](https://www.cdz423.com/zb_users/upload/2024/01/20240122084820170588450021496.jpeg)
[剧集] 繁花 (2023)[全30集][打包]
![[影视] 三大队 WEB-DL版下载/Endless Journey/请转告局长，三大队任务完成了 2023 三大队 6.7G](https://www.cdz423.com/zb_users/upload/2024/02/20240203180506170695470628444.webp)
[影视] 三大队 WEB-DL版下载/Endless Journey/请转告局长，三大队任务完成了 2023 三大队 6.7G
![[纪录片] 河西走廊【10集 国语 中文字幕 1080P 10.8G MP4】](https://www.cdz423.com/zb_users/upload/2024/03/20240314090934171037857429792.jpeg)
[纪录片] 河西走廊【10集 国语 中文字幕 1080P 10.8G MP4】
![[安卓软件] OfficeSuite中文版APP v14.2.50872.0破解版](https://www.cdz423.com/zb_users/upload/2023/12/20231208024844170197492476060.png)
[安卓软件] OfficeSuite中文版APP v14.2.50872.0破解版
- 最新评论
-
好yinhq693 评论于：04-02 谢谢支持！！CC下载站 评论于：03-26 很棒的资源，感谢分享云体风身 评论于：03-26 感谢分享，好东西云体风身 评论于：03-26 谢谢支持！CC下载站 评论于：03-14 央视精品，感谢付出提供。qwer9009 评论于：03-14 谢谢支持！！！CC下载站 评论于：03-13 
谢谢分享！Ypc9182 评论于：03-12 谢谢支持！！CC下载站 评论于：03-11 感谢本网站收集和提供这么多的资料，谢谢！Ypc9182 评论于：03-10
- 热门tag