JavaWeb一JavaScript

最新推荐文章于 2023-05-10 21:41:54 发布

你最多在第二层

最新推荐文章于 2023-05-10 21:41:54 发布

阅读量135

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/Fifth_floor/article/details/105044102

版权

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

变量

数据类型

数值类型： number

字符串类型： string

对象类型： object

布尔类型： boolean

函数类型： function

特殊值

undefined ：未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined.

null：空值

NaN ：非数字，非数值。

数组

var 数组名 = []; 空数组
var 数组名 = [1 , ‘abc’ , true]; 定义数组同时赋值元素

特点：自动扩容

函数

定义的两种方式：

var 函数名 = function(形参列表) { 函数体 }

function 函数名(形参列表){ 函数体 }

特点：

JS的函数不允许重载，如果重载的话会覆盖掉上一次的定义

事件

定义：所谓的事件，是浏览器监听用户行为的一种机制

onload 加载完成事件：页面解析完成后自动触发的事件
onclick 单击事件：常用于按钮的点击响应操作
↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1</title>
<script type="text/javascript">
    function onclickfun() {
    alert("静态注册onclick事件");
    }
    window.onload=function c() {
        var cc=document.getElementById("3")
        cc.onclick=function () {
            alert("动态注册onclick事件")
        }
    }
</script>
</head>

<body >
<button onclick="onclickfun();" >你好</button>
<button id="3">我好</button>
</body>
</html>

onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法
onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange</title>
    <script type="text/javascript">
        function onchangefun() {
            alert("静态注册onchange")
        }
        window.onload=function () {
            var abc=document.getElementById("333")
            abc.onclick=function () {
                alert("动态注册onchange")
            }
        }
    </script>
</head>
<body>
<select onchange="onchangefun()">
    <option>--我是谁--</option>
    <option>--aaa--</option>
    <option>--bbb--</option>
    <option>--ccc--</option>
</select>
<select id="333">
    <option>--我是谁--</option>
    <option>--aaa--</option>
    <option>--bbb--</option>
    <option>--ccc--</option>
</select>
</body>
</html>

onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。

DOM模型

所谓的DOM模型就是把文档中的标签，属性，文本等当作对象处理

Document对象及其方法

什么是Document对象

Document 它管理了所有的 HTML 文档内容
Document 它是一种树结构的文档,有层级关系。
它让我们把所有的标签都对象化
我们可以通过 document 访问所有的标签对象。

一些常用的方法

1. 通过标签的id属性查找标签DOM对象

如：建立一个检验输入的用户名是否合法按钮，合法的要求是必须由字母，数字、下划线组成，并且长度是 6 到 15 位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script type="text/javascript">
        function onclickfun() {
            var usernamefun = document.getElementById("a")
            var usernametext = usernamefun.value;
            var patt = /^\w{6,15}$/
            var usernamespan = document.getElementById("b")
            if (patt.test(usernametext)) {
                usernamespan.innerHTML="用户名可用"
            } else {
                usernamespan.innerHTML="用户名不可用"
            }
        }
        </script>
</head>
<body>
用户名：<input type="text" id="a">
        <span id="b" style="color: red"></span>
        <button onclick="onclickfun()">检验</button>
</body>
</html>

2. 通过标签的name属性查找标签DOM对象

如：设置全选、全不选、反选的按钮
↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            var checkall=document.getElementsByName("abc")
                for (var i=0;i<checkall.length;i++){
                   checkall[i].checked=true
                }
        }
        function selectNone() {
            var checkall=document.getElementsByName("abc")
            for (var i=0;i<checkall.length;i++){
                checkall[i].checked=false
            }
        }
        function selectInvert() {
            var checkall=document.getElementsByName("abc")
            for (var i=0;i<checkall.length;i++){
                checkall[i].checked=!checkall[i].checked
            }
        }
    </script>
</head>
<body>
<input type="checkbox" name="abc">AAA
<input type="checkbox" name="abc">BBB
<input type="checkbox" name="abc">CCC
<button onclick="checkAll()">全选</button>
<button onclick="selectNone()">全不选</button>
<button onclick="selectInvert()">反选</button>
</body>
</html>