js复习

最新推荐文章于 2023-07-14 19:23:11 发布

哈哈大撒大撒

最新推荐文章于 2023-07-14 19:23:11 发布

阅读量90

点赞数

分类专栏： new

本文链接：https://blog.csdn.net/weixin_45371966/article/details/106277636

版权

new 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

javascript的基本用法：

第一种在head标签体内输入script标签
<script type="text/javascript">
    alert("hello javascript");
</script>  


第二种创建js文件 src引用js文件
<script type="text/javascript" src="1.js"></script>

js里面特殊的值：

undefined 未定义
null  空值
NAN 非数字非数值

JS中定义变量的格式：

var 变量名 = 值 ;

JS中的关系运算：

var a = "12";
var b = 12;
alert(a == b);  简单的做字面的比较
alert(a === b); 比较字面和类型

JS定义数组

var 数组名 = []；//空数组
var 数组名= [ 1 , "abc" , true ]；//定义并赋值

JS定义函数（不可以重载）

function fun1(){
    alert("fun1被调用了");
}
add();
function fun2(  a,  b){
    alert("fun2呗调用了，a为"+ a);
    return a+b;
}
alert(fun2(2,3));
var fun3 = function (a,b,c) {
    return a,b,c;
}
fun3(1,2,3);

JS arguments对象是所有（非箭头）函数中都可用的局部变量

function sum(num1 , num2) {
    var result = 0;
    for(var i = 0 ; i <arguments.length; i ++){
        result += arguments[i];
    }
    return result;
}

JS自定义对象

第一种方法：
var obj =new Object();
obj.name = "hua";
obj.age = 18;

第二种方法：
var 变量名 = {
	属性值 ：值，
	属性值 ：值
	函数名 ：function(){}
}

JS中常用的控件：

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

<body onload="alert('静态注册')">
</body>

<script type="text/javascript">
    window.onload = function () {
        alert("静态注册")
    }
</script>

onclick 单击事件：常用于点击相应操作

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var but1 = document.getElementById("but2");
            but1.onclick = function () {
                alert('按钮1被点击了');
            }
        }
    </script>
</head>
<body>
    <button onclick="alert('按钮1被点击了')">按钮1</button>
    <button id="but2">按钮2</button>
</body>

onblur 失去焦点事件：常用于输入框失去焦点后验证内容是否合法

</head>
    <script type="text/javascript">
        function fun1() {
            alert("失去焦点");
        }
        window.onload = function () {
            var edit = document.getElementById("edit");
            edit.onblur = function () {
                alert("失去焦点")
            }
        }
    </script>
</head>
<body>
用户名：<input typr="text" onblur="fun1()"><br>
密码：<input type="password" id="edit"><br>
</body>

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun1(){
            alert("改变了");
        }
        window.onload =function () {
        var elementById = document.getElementById("select");
        elementById.onchange = function(){
            alert("改变了");
        }
        }
    </script>
</head>
<body>
    <select onchange="fun1()">
        <option>佳佳</option>
        <option>芳芳</option>
        <option>娘娘</option>
    </select>
    <select id="select">
        <option>佳佳</option>
        <option>芳芳</option>
        <option>娘娘</option>
    </select>

onsubmit表单提交事件：常用于表单提交前，验证所有表单是否合法，返回false表单不提交

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

            function  fun1() {
                alert("提交")
                return false;
            }
        window.onload = function(){
                var form = document.getElementById("form");
                form.onsubmit = function(){
                    alert("表单不合法");
                    return false;
                }
        }

    </script>
</head>
<body>
    <form action="#" method="get" onsubmit=" return fun1()">
        <input type="submit" >
    </form>
    <form action="#" method="get" id="form">
        <input type="submit" >
    </form>
</body>

静态注册事件：通过html标签的事件属性直接赋值相应代码
动态注册事件：通过js代码获得标签dom对象，然后通过dom对象.事件名 = function(){}绑定
校验方法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
            window.onload = function(){
            var but = document.getElementById("but");
            var te = document.getElementById("te");
            var sp = document.getElementById("sp");
            var patt = /^\w{5,12}$/ ;
            but.onclick =function() {
                if (patt.test(te.value)) {
                    sp.innerHTML = "合法";
                } else {
                    sp.innerHTML = "不合法";
                }
            }
        }
    </script>
</head>
<body>
用户名:<input type="text" id="te"><button id="but">校验</button>
<span style="color: red" id="sp"></span>
</body>

也可以修改 sp.innerHTML = "合法";  ""里面换为标签

全选或反选

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function cheall(){
            var byName = document.getElementsByName("hobby");
            for(var i = 0; i<byName.length;i++){
                byName[i].checked = true;
            }
        }
        function cheon() {
            var byName = document.getElementsByName("hobby");
            for(var i = 0; i<byName.length;i++){
                byName[i].checked = false;
            }
        }
        function cheRevrse(){
            var byName = document.getElementsByName("hobby");
            for(var i = 0; i<byName.length;i++){
                byName[i].checked = !byName[i].checked;
            }
        }
    </script>
</head>
<body>
    兴趣爱好
    <input type="checkbox" name="hobby" value="c">c++
    <input type="checkbox" name="hobby" value="java">java
    <input type="checkbox" name="hobby" value="js">javascript<br>
    <button onclick="cheall()">全选</button>
    <button onclick="cheon()">全取消</button>
    <button onclick="cheRevrse()">反选</button>
</body>

getElementsByName获取name属性一样的标签体，然后修改checked属性为true为选中，false为不选

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function cheall(){
            var byTagName = document.getElementsByTagName("input");
            for ( var i =0 ;i <byTagName.length;i++){
                byTagName[i].checked = true;
            }
        }
        function cheon() {
            var byTagName = document.getElementsByTagName("input");
            for(var i = 0; i< byTagName.length;i++){
                byTagName[i].checked = false;
            }
        }
    </script>
</head>
<body>
    兴趣爱好
    <input type="checkbox"  value="c">c++
    <input type="checkbox"  value="java">java
    <input type="checkbox"  value="js">javascript<br>
    <button onclick="cheall()">全选</button>
    <button onclick="cheon()">全取消</button>
</body>

哈哈大撒大撒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js复习

javascript的基本用法：第一种在head标签体内输入script标签<script type="text/javascript"> alert("hello javascript");</script> 第二种创建js文件 src引用js文件<script type="text/javascript" src="1.js"></script>js里面特殊的值：undefined 未定义null 空值NAN 非数字非数
复制链接

扫一扫