【JavaScript】学习笔记2

TC_FANCY

已于 2024-01-21 10:10:52 修改

阅读量40

点赞数

分类专栏： javaweb 文章标签：学习笔记

于 2023-08-09 11:09:57 首次发布

本文链接：https://blog.csdn.net/qq_59400558/article/details/132183271

版权

javaweb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

事件

onload

onload（加载完成事件）

页面加载完成之后，常用于做页面js代码初始化操作

<head>
<script type="text/javascript">
//onload事件的方法
function onloadFun(){
    alert('静态注册onload事件，所有代码');
}
</script>
</head>
<body onload="onloadFun();">//静态注册

</body>

动态注册onload事件

<head>
<script type="text/javascript">
window.onload=function(){
    alert("动态注册的onload事件")
}
</script>
</head>
<body></body>

事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

静态注册事件：通过html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册事件：是指先通过js 代码得到标签的dom 对象，然后再通过dom 对象.事件名= function(){} 这种形式赋于事件响应后的代码，叫动态注册。
步骤：1.获取标签对象 2.标签对象.事件名=function（）{}

onclick（单击事件）

常用于按钮的点击响应操作

静态注册onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun(){
    alert("静态注册onClick事件");
}
</script>
</head>
<body>
<!--静态注册onClick 事件-->
<button onclick="onclickFun();">按钮1</button>
</body>
</html>

动态onclick事件

<script>
window.onload = function (){
/*获取标签对象*/
var btnObj=document.getElementById(btn01);
/*通过标签对象.事件名=function(){}*/
btnObj.onclick=function(){
    alert("动态注册onclick");
}
}
</script>
<body>
<button id="btn01">按钮</button>
</body>

onblur（失去焦点事件）

常用用于输入框失去焦点后验证其输入内容是否合法

静态注册onblur事件

<head>
<script type="text/javascript">
function onblurFun(){
    //console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
    //log()是打印的方法
    console.log("静态注册失去焦点事件");
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun()"><br/>
密码:<input type="password">
</body>

动态注册onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function(){
   //获取标签对象
     var password = document.getElementByID("password");
    //用标签对象名.事件名= function(){}
     password.onblur=function(){
         console.log("动态注册失去焦点事件")     
     }
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text" ><br/>
</body>
</html>

onchange（内容发生改变事件）

常用于下拉列表和输入框内容发生改变后操作

静态

<head>
<script type="text/javascript">
function onchangeFun(){
    //console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
    //log()是打印的方法
    console.log("静态注册失去焦点事件");
}
</script>
</head>
<body>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>

动态

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function(){
    var changefun=document.getElementById("sel01");
    changefun.onchange=function(){
        alert("发生改变");    
    }
}
</script>
</head>
<body>
请选择你心中的男神：
<select id="sel01">
<option>--男神--</option>
<option>国哥</option>
<option>华仔</option>
<option>富城</option>
</select>
</body>
</html>

onsubmit（表单提交事件）

常用于表单提交前，验证所有表单项是否合法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" >
// 静态注册表单提交事务
function onsubmitFun(){
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return flase;
}
window.onload = function () {
//1 获取标签对象
var formObj = document.getElementById("form01");
//2 通过标签对象.事件名= function(){}
formObj.onsubmit = function () {
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
</script>
</head>
<body>
<!--return false 可以阻止表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>

两种验证提示方式

第一种方法

/*
test()方法适用于测试某个字符串，是不是匹配我的规定
innerHTML：表示起始标签与结束标签中的内容
*/
<head>
Function onclickFun(){
    var usernameObj=document.getElementById("username");
    var usernameText=usernameObj.value;
    var patt=/^\w{5,12}$}/;
    var usernameSpanObj=document.getElementById("usernameSpan");
    if(patt.test(usernameText)){
        usernameSpanObj.innerHTML="用户名合法";                    
    }else{
        usernameSpanObj.innerHTML="用户名不合法";    
    }
    
}
</head>
<body>
用户名:<input type="text" id="username" value="wcw">
<span id="usernameSpan" style="color:red;">1234</span>
<button onclick="onclickFun()">校验</button>
</body>

第二种方法

/*
test()方法适用于测试某个字符串，是不是匹配我的规定
innerHTML：表示起始标签与结束标签中的内容
*/
<head>
Function onclickFun(){
    var usernameObj=document.getElementsById("username");
    var usernameText=usernameObj.value;
    var patt=/^\w{5,12}$}/;
    var usernameSpanObj=document.getElementsById("usernameSpan");
    if(patt.test(usernameText)){
        usernameSpanObj.innerHTML="<image src="1.img" width="20" height="18"/>";                    
    }else{
        usernameSpanObj.innerHTML="<image src="2.img" width="20" height="18"/>";    
    }
    
}
</head>
<body>
用户名:<input type="text" id="username" value="wcw">
<span id="usernameSpan" style="color:red;">1234</span>
<button onclick="onclickFun()">校验</button>
</body>

getElementsByName()方法


<head>
function checkAll(){
    //document.getElementByName();根据指定的name属性查询返回多个标签对象集合；
    //这个集合的操作跟数组一样
    //集合中每个元素都是dom对象
    //这个集合中的元素顺序是在他们在html页面中从上到下的顺序
    var hobbies=document.getElementsByName("hobby");
    for(var i=0;i<hobbies.length;i++){
        hobbies[i].checked=ture;    
        }
}
function checkNo(){
    var hobbies=document.getElementsByName("hobby");
    for(var i=0;i<hobbies.length;i++){
        hobbies[i].checked=false;  
}
function checkNo(){
    var hobbies=document.getElementsByName("hobby");
    for(var i=0;i<hobbies.length;i++){
        if(hobbies[i].checked){
            hobbies[i]=false;
        }    
    }
}
</head>
<body>
兴趣爱好：
<input type="checkbox" name="habby" value="cpp"/>c++
<input type="checkbox" name="habby" value="java"/>Java
<input type="checkbox" name="habby" value="javascript"/>JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>

getElementsByTagName()方法

按照指定标签名来进行查询并返回集合

<head>
    //getElementsByTagName();按照指定标签名来进行查询并返回集合
    //这个集合的操作跟数组一样
    //集合中每个元素都是dom对象
    //这个集合中的元素顺序是在他们在html页面中从上到下的顺序
     var hobbies=document.getElementsByTagName("input");
    for(var i=0;i<hobbies.length;i++){
        hobbies[i].checked=ture;    
        }
}
function checkNo(){
    var hobbies=document.getElementsByTagName("input");
    for(var i=0;i<hobbies.length;i++){
        hobbies[i].checked=false;  
}
function checkNo(){
    var hobbies=document.getElementsByTagName("input");
    for(var i=0;i<hobbies.length;i++){
        if(hobbies[i].checked){
            hobbies[i]=false;
        }    
    }
}
</head>
<body>
兴趣爱好：
<input type="checkbox" name="habby" value="cpp"/>c++
<input type="checkbox" name="habby" value="java"/>Java
<input type="checkbox" name="habby" value="javascript"/>JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>