笔记-html

最新推荐文章于 2022-03-04 20:52:05 发布

Zz_z__

最新推荐文章于 2022-03-04 20:52:05 发布

阅读量181

点赞数

分类专栏： linux相关

本文链接：https://blog.csdn.net/Zz_z__/article/details/108804735

版权

linux相关专栏收录该内容

4 篇文章 0 订阅

订阅专栏

超链接：qqqq

函数

无参函数
function f(){
alert(“hello”);
}
有参函数
function f1(a,b){
alert(“hello”);
}
函数返回值
直接在函数中写return就行了
function sum(num1, num2) {
var result = num1 + num2;
return result;
}
函数的另一种形式
var fun = function(){
alert(“hello”);
}

js事件

onload 加载完成事件：页面加载完成，常用于做页面js代码的初始化操作
- 示例代码

	<!DOCTYPE html>
	<html lang="en">
	<head>
    <meta charset="UTF-8">
    <title>onload事件</title>
    <script type="text/javascript">
		/*        function onloadfun() {
            	alert("静态注册onload事件，所有代码")
        }
        <body onload="onloadfun()">//只用在body中调用函数即可
        */
        window.onload = function () {
            alert("动态注册onload事件")
        }
    </script>
	</head>
	<body>
	</body>
	</html>

onclick 单击事件：常用于按钮的点击响应操作
- 示例代码

   <!DOCTYPE html>
	<html lang="en">
	<head>
    <meta charset="UTF-8">
    <title>单击事件</title>
    <script type="text/javascript">
        //静态注册事件
        function f() {
            alert("静态注册onclick事件")
        }
        //动态注册事件
        window.onload = function () {
            //1.获取标签对象
            var btnobj =  document.getElementById("btn02");
            //2.通过标签对象.事件名 = function(){}
            btnobj.onclick = function () {
                alert("动态注册的onclick事件")
            }
        }
    </script>
	</head>
	<body>
   	 <!--静态注册onclick事件-->
   	 <button onclick="f()">按钮1</button>
   	 <button id="btn02">按钮2</button>
	</body>
	</html>

onblur 失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法
- 示例代码

   <!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <title>失去焦点事件</title>
   <script type="text/javascript">
       function f() {
           console.log("静态注册失去焦点事件！")
       }
       window.onload = function () {
           var obj = document.getElementById("password");
           obj.onload= function(){
               console.log("动态注册失去焦点事件！")
           }
       }
   </script>
   </head>
   <body>
   <form>
   	用户名:<input type="text" onblur="f()"><br/>
   	密码:<input id="password" type="text"><br/>
   </form>
   </body>
   </html>

onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
- 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容发生改变事件</title>
    <script type="text/javascript">
        function f() {
            alert("静态事件：内容已经发生改变了！")
        }
        window.onload= function () {
            var obj = document.getElementById("dt");
            obj.onchange = function () {
                alert("动态事件：内容已经发生改变了！")
            }
        }
    </script>
</head>
<body>
<form>
    请选择国家：
    <!--静态注册onchange事件-->
<!--    <select onchange="f()">-->
    <select id="dt">
        <option>--请选择--</option>
        <option>中国</option>
        <option>美国</option>
        <option>英国</option>
    </select>
</form>
</body>
</html>

onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法
- 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单事件</title>
    <script type="text/javascript">
        function f() {
            alert("静态注册表单提交事件！---如果表单有不合法值阻止提交");
            return false;
        }
        window.onload = function () {
            var obj = document.getElementById("dt");
            obj.onsubmit = function () {
                alert("动态注册表单提交事件！---如果表单有不合法值阻止提交");
                return false;
            }
        }
    </script>
</head>
<body>
<!--return false;可以阻止表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return f();">
    <input type="submit" value="静态注册">
</form>
<form action="http://localhost:8080" method="get" id="dt">
    <input type="submit" value="动态注册">
</form>
</body>
</html>

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

Document对象

getElementById 方法

需求校验用户输入是否合法，示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //校验文本框输入内容
        function onclickFun() {
            // 操作标签的时候要先获取到这个标签对象
           var obj =  document.getElementById("username");
           var usernametext = obj.value;
           // 验证是否符合规则，使用正则
           var patt = /^\w{5,12}$/;
           var usernameSpanObj = document.getElementById("usernameSpan");
           // innerHtml 标识起始标签和结束标签中的内容，改属性可读可写
           if(patt.test(usernametext)){
               // 通过文字形式
               // usernameSpanObj.innerHTML = "合法用户名";
               // 通过图片形式
               usernameSpanObj.innerHTML = "<img src=\"right.png\" height=\"18\" wight=\"18\">";
           }else {
               // 通过文字形式
               // usernameSpanObj.innerHTML = "不合法用户名";
               // 通过图片形式
               usernameSpanObj.innerHTML = "<img src=\"wrong.png\" height=\"18\" wight=\"18\">";
           }
        }
    </script>
</head>
<body>
    用户名: <input type="text" id="username"/>
    <span id="usernameSpan" style="color: red"></span>
    <button onclick="onclickFun()">验证</button>
</body>
</html>

getElementsByName 方法

全选，全不选和反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            //document.getElementsByName：是根据自定的name属性查询返回多个标签对象集合
            //集合中的每个元素都是dom对象
            var hobbies = document.getElementsByName("hobby");
            //checked 表示复选框的选中状态，true 选中，false 不选中。checked 可读可写
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = true;
            }
        }
        function checkNo() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = false;
            }
        }
        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
/*                if(hobbies[i].checked){
                    hobbies[i].checked = false;
                }else {
                    hobbies[i].checked = true;
                }*/
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </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="js" />JavaScript
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

getElementsByTagName 方法

全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            // document.getElementsByTagName：是按照指定的标签名来进行查询并返回集合，集合中都是dom对象
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" value="cpp" />C++
    <input type="checkbox" value="java" />Java
    <input type="checkbox" value="python" />Python
    <br />
    <button onclick="checkAll()">全选</button>
</body>
</html>

document 对象的三个查询方法，有id属性优先使用getElementById方法进行查询，没有id属性，则优先使用getElementsByName方法进行查询，如果没有id属性和name属性，则按标签名查getElementsByTagName。以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象！