致自己：JavaScript学习笔记一

最新推荐文章于 2024-03-29 06:31:30 发布

菜鸟自学编程

最新推荐文章于 2024-03-29 06:31:30 发布

阅读量1.9k

点赞数 5

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/sinat_42285508/article/details/123447367

版权

JavaScript

1、JavaScript和Html结合方式

1、方式1：在head标签或者body标签中，使用script标签来书写JavaScript代码

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript和Html结合方式1</title>
    <!-- 在head中通过script标签书写JavaScript代码 -->
    <script>
        /* JavaScript代码 */
    </script>
</head>
<body>
    <!-- 在body标签中通过scrip标签书写JavaScript代码 -->
    <script>
        alert('Hello JavaScript');
    </script>
</body>
</html>

2、方式2：使用script标签引入单独的JavaScript代码文件

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript和Html结合方式1</title>
    <!-- 
        src属性：JavaScript的文件路径，可以是相对路径，也可以是绝对路径
        script 标签可以用来定义 js 代码，也可以用来引入 js 文件
        但是，两个功能二选一使用。不能同时使用两个功能
        <script type="text/javascript" src="./js/index.js">
            alert('不生效');
        </script>
     -->
     <script type="text/javascript" src="js/1.js"></script>
    <script>
        // 想要生效必须分开写
        alert('此处的生效');
    </script>
</head>
<body>
    
</body>
</html>

2、变量

1、数据类型：

基本类型	说明
String	字符串
Number	数字
Boolean	布尔
Undefined	未定义
Null	空
Symbol	是 ES6 引入了一种新的原始数据类型，表示独一无二的值

引用类型	说明
Object	对象
Array	数组
Function	函数

变量类型	说明	特殊值	说明
number	数值类型	undefined	未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined
string	字符串类型	null	空值
boolean	布尔类型	NaN	全称是：Not a Number，表示不是数字
object	对象类型
function	函数类型

3、定义变量：var 变量名 = 值；

4、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量</title>
    <script>
        var a;
        console.log(a) //未赋值，值为undefined
        //typeof()：JS提供的函数，用来检测变量的类型
        console.log(typeof(a)); //undefined
        var a = null;
        console.log(typeof(a)); //null的类型是object

        var b = 10;
        var c = 'tt';
        console.log(c*b); //NaN
    </script>
</head>
<body>
    
</body>
</html>

3、数组

1、数组定义方式：

var 数组名 = []; //空数组
var 数组名 = [1,‘ab’,true]; //定义数组的同时赋值

2、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组</title>
    <script>
        var arr1 = []; //定义一个空数组
        console.log(arr1);
        console.log(arr1.length); //数组名.length：表示数组的长度
        arr1[3] = 123;
        /*
            javaScript 语言中的数组，只要我们通过数组下标赋值，
            那么最大的下标值，就会自动的给数组做扩容操作
        */
        console.log(arr1.length); //4
        console.log(arr1[0]); //undefined
        //遍历数组
        for(var i = 0;i < arr1.length;i++){
            console.log("arr[" + i + "]=" + arr1[i]);
        }
    </script>
</head>
<body>
    
</body>
</html>

4、函数

1、定义方式一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
    <script>
        /* 
            方式1：
            function 函数名（形式参数列表） {
                函数体
            }

            在 JavaScript 语言中，如何定义带有返回值的函数？
            只需要在函数体内直接使用 return 语句返回值即可！
        */
       //定义一个无参函数
       function fun1() {
           alert('无参数函数执行了');
       }
       //函数被调用才会执行
       fun1(); //调用函数

       //定义有参函数
       function fun2(a,b) {
           alert('有参函数执行了 a=' + a + '，b=' + b);
       }
       fun2(10,'TT'); //调用函数

       //定义有返回值的函数
       function sum(num1,num2) {
           var ret = num1 + num2;
           return ret;
       }
       alert(sum(100,200));
    </script>
</head>
<body>
    
</body>
</html>

2、定义方式二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
    <script>
        /* 
            方式2：
            var 函数名 = function（形式参数列表） {
                函数体
            }
        */
       //定义一个无参函数
       var fun1 = function() {
           alert('无参数函数执行了');
       }
       //函数被调用才会执行
       fun1(); //调用函数

       //定义有参函数
       var fun2 = function(a,b) {
           alert('有参函数执行了 a=' + a + '，b=' + b);
       }
       fun2(10,'TT'); //调用函数

       //定义有返回值的函数
       var sum = function(num1,num2) {
           var ret = num1 + num2;
           return ret;
       }
       alert(sum(100,200));
    </script>
</head>
<body>
    
</body>
</html>

3、JavaScript中允许函数重载，但是JavaScript中函数重载，后面的函数会覆盖前面定义的函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
    <script>
        function fun() {
            alert('无参数函数执行了');
        }
        function fun(a,b) {
            alert('有参数函数执行了');
        }
        fun(); //调用无参函数，但是有参函数执行了
    </script>
</head>
<body>
    
</body>
</html>

4、在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
    <script>
        /* 
            隐形参数特别像 java 基础的可变长参数一样。
            public void fun( Object ... args );
            可变长参数其他是一个数组。
            js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组
        */
       function fun(a) {
           console.log(arguments.length); 
           console.log(arguments[0]);
           console.log(arguments[1]);
           console.log(arguments[2]);
           console.log('a = ' + a);
            for(var i = 0;i < arguments.length;i++){
                console.log(arguments[i]);
            }
       }
       fun(1);//1
       fun(1,2,3);//1

       //编写一个函数。用于计算所有参数相加的和并返回
       function sum(num1,num2) {
           var ret = 0;
           for(var i = 0;i < arguments.length;i++){
               if (typeof(arguments[i]) == "number"){
                   ret += arguments[i];
               }
           }
           return ret;
       }
       alert('结果为：' +sum(1,2,3,4,'TT',true));
    </script>
</head>
<body>
    
</body>
</html>

5、JavaScript中自定义对象

1、方式1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象</title>
    <script>
        /* 
        对象的定义：
            var 变量名 = new Object(); // 对象实例（空对象）
            变量名.属性名 = 值; // 定义一个属性
            变量名.函数名 = function(){} // 定义一个函数
        对象的访问：
            变量名.属性 / 函数名();
        */

        //定义一个对象
        var man = new Object();
        //定义属性
        man.name = '张三';
        man.age = 18;
        man.sex = '男';
        man.fun = function() {
            console.log('姓名：' + this.name + 
            '，年龄：' + this.age + '，性别：' + this.sex);
        }
        //访问对象
        console.log(man.name);
        man.fun();
    </script>
</head>
<body>
    
</body>
</html>

2、方式2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象</title>
    <script>
        /* 
        对象的定义：
            var 变量名 = { // 空对象
            属性名：值, // 定义一个属性
            属性名：值, // 定义一个属性
            函数名：function(){} // 定义一个函数
        };

        对象的访问：
            变量名.属性 / 函数名();
        */

        //定义一个对象
        var man = {
            //定义属性
            name : '张三',
            age : 18,
            sex : '男',
            fun : function() {
                console.log('姓名：' + this.name + 
                '，年龄：' + this.age + '，性别：' + this.sex);
            }
        }
        
        //访问对象
        console.log(man.name);
        man.fun();
    </script>
</head>
<body>
    
</body>
</html>

6、JavaScript中的事件

1、常用事件：

事件	描述	说明
onload	加载完成事件	页面加载完成之后触发，常用于做页面的JS代码初始化操作
onclick	鼠标单击事件	常用于按钮的点击响应操作
onblur	失去焦点事件	常用于输入框失去焦点验证其内容是否合法操作
onfocus	获得焦点事件	常用于输入框获得焦点操作
onchange	内容发生改变事件	常用于下拉列表和输入框内容发生改变之后的操作
onsubmit	表单提交事件	常用于表单提交之前，验证表单项是否合法

2、事件的静态注册：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。

3、事件的动态注册：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。

4、onload事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onload事件</title>
    <script>
        //静态注册
        function onloadFun() {
            alert('静态注册事件执行了');
        }

        /* 
        动态注册基本步骤：
            1、获取标签对象
            2、标签对象.事件名 = fucntion(){}
        */
       window.onload = function() {
           alert('动态注册事件执行了');
       }
    </script>
</head>
<!--  
    静态注册 onload 事件
    onload 事件是浏览器解析完页面之后就会自动触发的事件
    <body οnlοad="onloadFun();">
 -->
<body>
    
</body>
</html>

5、onclick事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onclick事件</title>
    <script>
        //静态注册
        function onclickFun() {
            alert('静态注册事件执行了');
        }

        /* 
        动态注册基本步骤：
            1、获取标签对象
            2、标签对象.事件名 = fucntion(){}
        */
       //d.动态注册事件
       window.onload = function() {
            //getElementById 通过 id 属性获取标签对象
            var btn = document.getElementById('btn');
            //通过标签对象 . 事件名 = function(){} 注册事件
            btn.onclick = function() {
                alert('动态注册事件执行了');
            }
       }
    </script>
</head>
<body>
    <button onclick="onclickFun();">静态事件按钮</button>
    <button id="btn">动态事件按钮</button>
</body>
</html>

6、onblur事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onblur事件</title>
    <script>
        //静态注册
        function onblurFun() {
            alert('静态注册事件执行了');
        }

        /* 
        动态注册基本步骤：
            1、获取标签对象
            2、标签对象.事件名 = fucntion(){}
        */
       //d.动态注册事件
       window.onload = function() {
            //getElementById 通过 id 属性获取标签对象
            var btn = document.getElementById('psd');
            //通过标签对象 . 事件名 = function(){} 注册事件
            btn.onblur = function() {
                alert('动态注册事件执行了');
            }
       }
    </script>
</head>
<body>
    用户名：<input type="text" onblur="onblurFun();" />
    <br />
    密码：<input type="password" id="psd" />
</body>
</html>

7、onfocus事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onfocus事件</title>
    <script>
        //静态注册
        function onfocusFun() {
            alert('静态注册事件执行了');
        }

        /* 
        动态注册基本步骤：
            1、获取标签对象
            2、标签对象.事件名 = fucntion(){}
        */
       //d.动态注册事件
       window.onload = function() {
            //getElementById 通过 id 属性获取标签对象
            var btn = document.getElementById('psd');
            //通过标签对象 . 事件名 = function(){} 注册事件
            btn.onfocus = function() {
                alert('动态注册事件执行了');
            }
       }
    </script>
</head>
<body>
    用户名：<input type="text" onfocus="onfocusFun();" />
    <br />
    密码：<input type="password" id="psd" />
</body>
</html>

8、onchange事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onchange事件</title>
    <script>
        //静态注册
        function onchangeFun() {
            alert('静态注册事件执行了');
        }

        /* 
        动态注册基本步骤：
            1、获取标签对象
            2、标签对象.事件名 = fucntion(){}
        */
       //d.动态注册事件
       window.onload = function() {
            //getElementById 通过 id 属性获取标签对象
            var btn = document.getElementById('sct');
            //通过标签对象 . 事件名 = function(){} 注册事件
            btn.onchange = function() {
                alert('动态注册事件执行了');
            }
       }
    </script>
</head>
<body>
    <!-- 静态注册onchange事件 -->
    <select onchange="onchangeFun();">
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
        <option>jQuery</option>
    </select>

    <!-- 动态注册onchange事件 -->
    <select id="sct">
        <option>C语言</option>
        <option>C++</option>
        <option>Java</option>
        <option>Python</option>
    </select>
</body>
</html>

9、onsubmit事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onsubmit事件</title>
    <script>
        //静态注册
        function onsubmitFun() {
            alert('静态注册事件执行了');
            return false;
        }

        /* 
        动态注册基本步骤：
            1、获取标签对象
            2、标签对象.事件名 = fucntion(){}
        */
       //d.动态注册事件
       window.onload = function() {
            //getElementById 通过 id 属性获取标签对象
            var btn = document.getElementById('form1');
            //通过标签对象 . 事件名 = function(){} 注册事件
            btn.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="form1">
        <input type="submit" value="动态注册" />
    </form>
</body>
</html>

7、DOM模型

1、Document 对象的理解：

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

2、DOM对象方法介绍：

document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement( tagName)
方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

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

4、getElementById方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
        需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
              验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。
        */
       function onclickFun() {
           //获取标签
           var uname = document.getElementById('userName');
           //alert(uname); //[object HTMLInputElement]：DOM对象
           var unameText = uname.value;
           console.log(unameText);
           //使用正则表达式校验
           var patt = /^w{5,12}$/;
           //test()：测试某个字符串是不是匹配我的规则，匹配返回true，否则返回false
           var unameSpan = document.getElementById('userNameSpan');
           // innerHTML 表示起始标签和结束标签中的内容
           // innerHTML 这个属性可读，可写
           unameSpan.innerHTML = '测试内容';
           console.log(unameSpan.innerHTML); //测试内容
           if (patt.test(unameText)) {
               // alert("用户名合法！");
                // usernameSpanObj.innerHTML = "用户名合法！";
                unameSpan.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            } else {
                // alert("用户名不合法！");
                // usernameSpanObj.innerHTML = "用户名不合法！";
                unameSpan.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
            }

       }
    </script>
</head>
<body>
    用户名：<input type="text" id="userName" value="zs" />
    <span id="userNameSpan" style="color: red;">

    </span>
    <button onclick="onclickFun();">校验</button>
</body>
</html>

5、getElementsByName方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //全选
        function checkAll() {
            // 让所有复选框都选中
            // document.getElementsByName();是根据 指定的name属性查询返回多个标签对象集合
            // 这个集合的操作跟数组 一样
            // 集合中每个元素都是dom对象
            // 这个集合中的元素顺序是他们在html页面中从上到下的顺序
            var loves = document.getElementsByName('hobby');
            // checked表示复选框的选中状态。如果选中是true，不选中是false
            // checked 这个属性可读，可写
            for(let i = 0;i < loves.length;i++){
                loves[i].checked = true;
                console.log(loves[i].checked);
            }
        }
        //全不选
        function checkNo() {
            var loves = document.getElementsByName('hobby');
            for(let i = 0;i < loves.length;i++){
                loves[i].checked = false;
            }
        }
        //反选
        function checkReverse() {
            var loves = document.getElementsByName('hobby');
            for(let i = 0;i < loves.length;i++){
               /*  if(loves[i].checked) {
                    loves[i].checked = flase;
                }
                else {
                    loves[i].checked = true;
                } */
                loves[i].checked = !loves[i].checked;
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp" checked="checked">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>

6、getElementsByTagName方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //全选
        function checkAll () {
            console.log( document.getElementById("btn01") );
            // document.getElementsByTagName("input");
            // 是按照指定标签名来进行查询并返回集合
            // 这个集合的操作跟数组 一样
            // 集合中都是dom对象
            // 集合中元素顺序 是他们在html页面中从上到下的顺序
            var loves = document.getElementsByTagName('input');
            for(let i = 0;i < loves.length;i++){
                loves[i].checked = true;
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" value="cpp" checked="checked">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
    <br/>
    <button id="btn01" onclick="checkAll()">全选</button>
</body>
</html>

7、createElement方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            //使用js代码创建html标签，并显示到页面上
            var divObj = document.createElement('div'); // 在内存中 <div></div>
            var textNodeObj = document.createTextNode('文本对象'); // 有一个文本节点对象
            divObj.appendChild(textNodeObj);
            document.body.appendChild(divObj);
            }
    </script>
</head>
<body>
    
</body>
</html>

8、节点的常用属性和方法

1、通过具体的元素节点调用getElementsByTagName()方法，获取当前节点的指定标签名孩子节点appendChild( oChildNode )方法，可以添加一个子节点，oChildNode 是要添加的孩子节点。

2、属性：

属性	说明
childNodes	获取当前节点的所有子节点
firstChild	获取当前节点的第一个子节点
lastChild	获取当前节点的最后一个子节点
parentNode	获取当前节点的父节点
nextSibling	获取当前节点的下一个节点
previousSibling	获取当前节点的上一个节点
className	用于获取设置标签的class属性
innerHTML	表示获取/设置起始标签和结束标签中的内容
innerText	表示获取/设置起始标签和结束标签中的文本

菜鸟自学编程

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
致自己：JavaScript学习笔记一

JavaScript1、JavaScript和Html结合方式1、方式1：在head标签或者body标签中，使用script标签来书写JavaScript代码示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
复制链接

扫一扫