JavaScript

最新推荐文章于 2024-10-15 12:38:43 发布

白开水最甜

最新推荐文章于 2024-10-15 12:38:43 发布

阅读量274

点赞数

分类专栏： javaweb 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_51994374/article/details/119639607

版权

javaweb 专栏收录该内容

13 篇文章

订阅专栏

1、定义：电脑输入设备与页面进行交互的响应，称之为事件

一、JavaScript与HTML结合

方式一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert("hello javaScript")
    </script>
</head>
<body>

</body>
</html>

方式二：

<script type="text/javascript" src="1.js"></script>

要点总结：

script标签可以用来定义js代码，也可以用来引入js文件，

但是两个功能二选一使用，不能同时使用

二、变量

数值类型： number

字符串类型： string

对象类型： object

布尔类型： boolean

函数类型： function

undefined:未定义，所有js变量为赋予初始值得时候，默认值都是undefined

null: 空值

NAN: Not a Number 非数字，非数值

三、关系运算

等于 ==：简单的作字面值的比较

全等于 ===：除了字面值的比较之外，还会比较变量的类型

四、逻辑运算

且运算：&&

或运算：||

取反运算：！

在js中，所有的变量都可以作为一个boolean类型的变量去使用

0、null、undefined、""(空串)都认为是false

&& 与运算

当表达式全为真时，返回最后一个表达式的值

当表达式有一个为假时，返回第一个为假的表达式的值

|| 或运算

当表达式全为假时，返回最后一个表达式的值

当表达式有一个为真时，返回第一个为真的表达式的值

五、数组

格式：

var 数组名=[];//空数组

var 数组名=[1,"abc",true];

定义时只要我们通过下标赋值，就会自动的作数组扩容操作

六、函数

1、定义方式

定义方式一：

function 函数名（形参列表）{

函数体

}
若需要返回值，只需要在函数体内直接使用return语句返回值即可

定义方式二：

var 函数名=function 函数名（形参列表）{

函数体

}

注意：js中函数的重载会直接覆盖之前函数的定义

二、隐性参数

    <script type="text/javascript">
        function f(num1,num2) {
            var result=0;
            for(var i=0;i<arguments.length;i++){
                if(typeof (arguments[i])=="number"){
                    result+=arguments[i];
                }
            }
            return result;
        }
        alert( f(1,2,3,"abc",4,5,6,7,8,9));

    </script>

七、自定义对象

1、Object形式的自定义对象

对象的定义：

var 变量名=new Object();//对象实例（空对象）

变量名.属性名=值;//定义一个属性

变量名.函数名=function(){ //定义一个函数

。。。
}

对象的访问：

变量名.属性名|函数名（）；

2、{}花括号形式的自定义对象

对象的定义：

var 变量名={

属性名：值，

函数名：function（）{}

}；

对象的访问：

变量名.属性|函数名（）；

八、事件

1、定义：电脑输入设备与页面进行交互的响应，称之为事件

常用的事件：

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

onclick单击事件：常用于按钮的点击响应操作

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

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

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

2、事件的注册（绑定）

定义：告诉浏览器，当事件响应后要执行哪些操作代码

静态注册事件：通过html标签的事件属性

动态注册事件：1、获取标签对象

2、标签对象.事件名=function（）{}

3、onload事件

静态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onloadFun() {
            alert("静态注册onload事件，所有代码")
        }
    </script>
</head>
<body onload="onloadFun()">

</body>
</html>

动态注册

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

4、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>
    <button onclick="onclickFun()">按钮1</button>
    <button>按钮2</button>
</body>
</html>

动态注册：

  var btnObj=document.getElementById("btn01");
       btnObj.onclick=function () {
            alert("动态注册的onclick事件");
       }

<button id="btn01">按钮2</button>

5、onblur事件

静态与动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onblurFun() {
            //console是控制台对象，是由JavaScript语言提供，
            // 专门用来向浏览器的控制器打印输出，用于测试使用
            console.log("静态注册失去焦点事件")
        }
        window.onload=function () {
            var passwordObj=document.getElementById("password");
            passwordObj.onblur=function () {
                console.log("动态注册失去焦点事件")
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" onblur="onblurFun()"/><br/>
    密码：<input id="password" type="text" /><br/>
</body>
</html>

6、onchange事件

静态注册与动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun(){
            alert("女神已经改变了");
        }
        window.onload=function () {
            var selObj=document.getElementById("oass");
            selObj.onchange=function () {
                alert("男神已经改变了")
            }
        }

    </script>
</head>
<body>
    请选择你心中的女神：
    <select onchange="onchangeFun()">
        <option>--女神--</option>
        <option>刘诗诗</option>
        <option>倪妮</option>
        <option>杨幂</option>
    </select><br/>
    请选择你心中的男神：
    <select id="oass">
        <option>--男神--</option>
        <option>胡歌</option>
        <option>张艺兴</option>
        <option>靳东</option>
    </select>
</body>
</html>

7、onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onsubmitFun() {
            alert("静态注册表单提交事件----发现不合法");
            return false;
        }
        window.onload=function () {
            var formObj = document.getElementById("form01");
            formObj.onsubmit=function () {
                alert("动态注册表单提交事件----发现不合法");
                return false;

            }
        }
    </script>
</head>
<body>
    <form action="http://localhost:8080" method="get"
          onsubmit="return onsubmitFun()">
        <input type="submit" value="静态注册"/>
    </form><br/>
    <form action="http://localhost:8080" method="get"
    id="form01">
        <input type="submit" value="动态注册"/>
    </form>
</body>
</html>

九、DOM模型

一、Document对象中的方法介绍

1、document.getElementById(elementId) 通过标签的id属性查找标签dom对象

2、doucument.getElementsByName(elementName) 通过标签的name属性查找标签dom对象

3、document.getElementsByTagName(tagname) 通过标签名查找标签dom对象

4、document.creatElement(tagName) 通过给定的标签名创建一个标签对象

1、document.getElementById(elementId) 通过标签的id属性查找标签dom对象

两种校验方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        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="用户名不合法";
            }

        }

    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="wzg"/>
    <span id="usernameSpan" style="color:red"></span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

  if(patt.test(usernameText)){
                //usernameSpanObj.innerHTML="用户名合法";
                usernameSpanObj.innerHTML=
"<img src=\"right.png\" width=\"18\" height=\"18\" >";
            }else {
                //usernameSpanObj.innerHTML="用户名不合法";
                usernameSpanObj.innerHTML=
"<img src=\"right.png\" width=\"18\" height=\"18\" >";
            }

2、doucument.getElementsByName(elementName) 通过标签的name属性查找标签dom对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            var hobbies = document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=true;
            }
        }
        function checkNone() {
            var hobbies = document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=false;
            }
        }
        function checkRevers() {
            var hobbies = document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                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="checkNone()">全不选</button>
    <button onclick="checkRevers()">反选</button>
</body>
</html>

3、document.getElementsByTagName(tagname) 通过标签名查找标签dom对象

   <script type="text/javascript">
        function checkAll() {
            var tags = document.getElementsByTagName("input");
            for(var i=0;i<tags.length;i++){
                tags[i].checked=true;
            }
        }
    </script>

要点总结：

（1）以上三个方法最好先用 id 再用name 再用标签

（2）这些方法在页面加载完成之后执行，才能查询到标签对象

4、document.creatElement(tagName) 通过给定的标签名创建一个标签对象

 <script type="text/javascript">
        window.onload=function () {
            var divObj=document.createElement("div");
            divObj.innerHTML="国哥，我爱你";
            document.body.appendChild(divObj);
        }
    </script>