JavaScript总结

最新推荐文章于 2023-05-25 17:57:54 发布
最新推荐文章于 2023-05-25 17:57:54 发布
阅读量287 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45999478/article/details/119334340
版权

JavaScript与html代码的结合方式

第一种方式：
只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript

<script type="text/javascript">
        //alert是JavaScript语言提供的一个警告框函数
        //它可以接受任意类型的参数，这个参数就说警告框的提示信息
        alert("hello1");
    </script>

第二种方式：
使用script标签引入单独的JavaScript代码文件
src属性专门用来引入js文件路径(相对路径或绝对路径)
script标签可以用来定义js代码，也可以用来引入js文件
但是，两个功能二选一使用，不能同时使用两个功能

    <script type="text/javascript" src="hellotest2.js"></script>
    <script type="text/javascript">
        alert("hellotest!");
    </script>

变量与数据类型

变量是可以存放某些值的内存的命名
JavaScript的变量类型：

数值类型：number 字符串类型：string 对象类型：object 布尔类型：boolean 函数类型：function
JavaScript里特殊的值： undefined 未定义，所有js变量未赋初值，默认值都是undefined. null 空值
NAN 全称：Not a Number 非数字、非数值

JS中的定义变量格式：

var 变量名; var 变量名 = 值;

<script type="text/javascript">
        var i;
        //alert(i);
        //i = 12;
        //alert(i);//12
        /*typeof()是JavaScript语言提供的一个函数
        它可以取变量的数据类型返回*/
        //alert(typeof (i));//number

        /*i = "abc";
        alert(typeof (i));//string*/

        var a = 12;
        var b = "abc";
        alert(a*b);//NULL

</script>

关系运算

等于： == 是简单的做字面值的比较
全等于： === 字面值的比较、比较两个变量的数据类型

<script type="text/javascript">
        var a = "12";
        var b = 12;

        alert(a == b);//true
        alert(a === b);//false
</script>

逻辑运算

且运算： &&
或运算： ||
取反运算： |

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

<script type="text/javascript">
        // 0、null、undefined、""都认为是false;
        /*var a = 0;
        if(a){
            alert("0为真");
        }else{
            alert("0为假");
        }
        var b = null;
        if(b){
            alert("null为真");
        }else{
            alert("null为假");
        }
        var c = undefined;
        if(c){
            alert("undefined为真");
        }else{
            alert("undefined为假");
        }
        var d = "";
        if(d){
            alert("空串为真");
        }else{
            alert("空串为假");
        }*/
        var a = "abc";//true
        var b = true;
        var c = null;//false
        var d = false;
        /*&&且运算：
        两种情况:
        第一种:当表达式全为真的时候。返回最后一个表达式的值。
        第二种:当表达式中，有一个为假的时候。返回第一个为假的表达式的值*/
        /*alert(a && b);//true
        alert(b && a);//abc
        alert(a && c);//null
        alert(a && d);//false*/
        /*|或运算：
        第一种情况:当表达式全为假时,返回最后一个表达式的值
        第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值*/
        /*alert(c || d);//false
        alert(d || c);//null
        alert(a || c);//abc
        alert(b || c);//true;*/
        /*&&与运算和||或运算有短路。
        短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行*/

</script>

数组

js中数组的定义：
格式：

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

<script type="text/javascript">
        var arr = [];
        //alert(arr.length);//0
        arr[0] = 12;
        //alert(arr[0]);//12
        //alert(arr.length);//1
        //js语言中的数组，通过数组下表赋值，最大的下标值，就会自动的给数组扩容
        arr[2] = "abc";
        //alert(arr.length);//3
        //alert(arr[1]);//undefined
        //数组的遍历
        for(var i = 0;i<arr.length;i++){
            alert(arr[i]);
        }
</script>

函数

定义方式第一种：使用function关键字定义函数
格式：

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

在函数体内直接使用return语句返回值定义带有返回值的函数。

定义方式第二种：
格式：

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

function fun() {
            alert("无参函数fun()被调用了");
        }
        //函数调用 === 才会执行
        fun();
        /*function fun2(a,b) {
            alert("有参函数fun2()被调用了 a=" +a +",b=" + b);
        }
        fun2(2,"abc");
        //定义带有返回值类型的函数
        function sum(num1,num2) {
            var result = num1+num2;
            return result;
        }
        alert(sum(2,3));
        var fun = function () {
            alert("无参函数");
        }
        fun();

        var fun2 = function (a,b) {
            alert("有参函数a="+a+",b="+b);
        }
        fun2(3,4);
        
        var fun3 = function (num1,num2) {
            return num1+num2;
        }
        alert(fun3(3,4));

js不允许重载

function f() {
            alert("无参函数f()");
        }
        function f(a,b) {
            alert("有参函数f(a,b)");
        }
        f();//有参函数f(a,b)

函数的arguments隐形参数(只在function函数内)
就是在function函数中不需要定义，却可以直接用来获取所有参数的变量。
隐形参数特别像java基础的可变长参数一样。
public void fun(Object…args);
可变长参数是一个数组

    js中的隐形参数跟java的可变长参数一样，操作类似。

function f() {
            alert(arguments.length);//2
            alert("无参函数f()");
            alert(arguments[0]);
            alert(arguments[1]);
            for(var i = 0;i<arguments.length;i++){
                alert(arguments[i]);
            }
        }
        f(1,"ad");

编写一个函数，用于计算所有参数相加的和并返回

function sum(num1,num2) {
            var result = 0;
            for(var i = 0;i<arguments.length;i++){
                // result += arguments[i];
                if(typeof(arguments[i] == "number")){
                    result += arguments[i];
                }
            }
            return result;
        }
        alert(sum(1,2,4));//7
        //alert(sum(1,2,3,"ad",4,5));//6ad45

Object形式的自定义对象

对象的定义：

var 变量名 = new Object(); //对象实例(空对象)
变量名.属性名 = 值; //定义一个属性
变量名.函数名 = function{};//定义一个函数

对象的访问：

变量名.属性/函数名();

<script type="text/javascript">
        var obj = new Object();
        //alert(typeof(obj));
        obj.name = "Q";
        obj.age = 20;
        obj.fun = function () {
            alert("姓名：" + this.name + ",年龄" + this.age);
        }
        alert(obj.name);
        alert(obj.fun());

</script>

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

对象的定义：

var 变量名 = { //空对象
属性值:值, //定义一个属性
属性值:值 //定义一个属性
函数名:function(){} //定义一个函数
};

 对象的访问：

变量名.属性/函数名();

<script type="text/javascript">
        var obj = {
            name:"Q",
            age:18,
            fun : function () {
                alert("姓名："+this.name+",年龄："+this.age);
            }

        };
        //alert(typeof(obj));
        alert(obj.name);
        obj.fun();
</script>

事件

事件是电脑输入设备与页面进行交互的响应。
常用的事件:
onload 加载完成事件：页面加载完成之后，常用于页面js代码初始化操作。
onclick 单击事件：常用于按钮的点击响应操作。
onblur 失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作。
onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。
事件的注册又分为静态注册和动态注册两种:
事件的注册（绑定）：告诉浏览器，当事件响应后要执行哪些操作代码。
静态注册事件:通过html标签的事件属性直接赋于事件响应后的代码。
动态注册事件：先通过js代码得到标签的dom对象，再通过dom对象.事件名=function(){}这种形式赋于事件响应后的代码
动态注册基本步骤：

1.获取标签对象
2.标签对象.事件名 = function(){}

onload事件：
静态注册

<body onload="onloadf();"></body>
//onload事件的方法
        function onloadf() {
            alert('静态注册onload事件,所有代码');
        }

动态注册

//onload事件动态注册，是固定写法
        window.onload = function(){
            alert("动态注册的onload事件");
        }

onclick事件：
静态注册

<button onclick="onclickf()">按钮1</button>
    <button id="button01">按钮2</button>
    用户名:<input type="text" onblur="onblurf"></br>
    密码:<input id="password" type="text"></br>
function onclickf() {
            alert("静态注册onclick事件");
        }

动态注册

window.onload = function () {
            //1.获取标签对象
            /*document是js语言提供的一个对象(文档)
            */
            var btnObj = document.getElementById("button01");
            //alert(btnObj);
            //2.通过标签对象.事件名 = function(){}
            btnObj.onclick = function () {
                alert("动态注册的onclick事件");
            }
        }

onblur事件：
静态注册

function onblurf() {
            //console是控制台对象，是由js语言提供，专门用来向浏览器打印输出，用于测试使用
            //log()是打印的方法
            console.log("静态注册失去焦点事件");
        }

动态注册

window.onload = function () {
            //1.获取标签对象
            var passwordObj = document.getElementById("password");
            //alert(passwordObj);
            //2.通过标签对象.事件名 = functon(){};
            passwordObj.onblur = function () {
                console.log("动态注册失去焦点事件");
            }
        }

onchange事件：
静态注册

请选择你心中的女神：
<select onchange="onchangef()">
        <option>&#45;&#45;女神&#45;&#45;</option>
        <option>芳芳</option>
        <option>佳佳</option>
        <option>嬛嬛</option>
</select>
<script type="text/javascript">
        function onchangef() {
            alert("女神已经改变了");
        }
    </script>

动态注册

请选择你心中的男神：
<select id="se101">
        <option>&#45;&#45;男神&#45;&#45;</option>
        <option>轩轩</option>
        <option>涵涵</option>
        <option>强强</option>
</select>
<script type="text/javascript">
        window.onload = function () {
            // 1.获取标签对象
            var selObj= document.getElementById("se101");
            alert(selObj);
            // 2.通过标签对象.事件名 = functon(){};
            selObj.onchange = function () {
                alert("男神已经改变了");
            }
        }
    </script>

onsubmit事件：
静态注册

<form action="http://www.baidu.com" method="get" onsubmit="return onsubmitf()">
        <input type="submit" value="静态注册"/>
    </form>

动态注册

<form action="http://www.baidu.com" id="form01">
        <input type="submit" value="动态注册"/>
    </form>

正则表达式

<script type="text/javascript">
    //表示要求字符串中是否包含字母e
    var patt = new RegExp("e");
    var patt = /e/;
    //表示要求字符串中是否包含字母a或字母b或字母c
    var patt = /[abc]/;
    //表示字符串是否包含小写字母
    var patt = /[a-z]/;
    //表示字符串是否包含大写字母
    var patt = /[A-Z]/;
    //表示字符串是否包含任意数字
    var patt = /[0-9]/;
    //表示字符串是否包含字母、数字、下划线
    var patt = /\w/;
    //表示字符串是否包含至少一个n
    var patt  = /a+/;
    //表示字符串是否包含零个或多个a
    var patt  = /a*/;
    //表示字符串是否包含一个或零个a
    var patt  = /a?/;
    //表示字符串是否包含连续三个a
    var patt  = /a{3}/;
    //表示字符串是否包含至少连续三个a，最多5个连续的a
    var patt  = /a{3,5}/;
    //表示字符串是否包含至少连续三个a
    var patt  = /a{3,}/;
    //表示字符串必须以a结尾
    var patt  = /a$/;
    //表示字符串必须以a打头
    var patt  = /^a/;
    //表示字符串从头到尾必须完全匹配
    var patt  = /^a{3,5}$/;

    var patt = /^\w{5,12}$/;
    alert(patt);
    var str = "abcd";
    alert(patt.test(str));
</script>

DOM介绍

DOM全称：Document Object Model文档对象模型
把文档中的标签，属性，文本转换成为对象来管理。
Document对象的理解:

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

Document对象中的方法介绍
document.getE1ementById(elementId)
通过标签的id属性查找标签dom对象，elementId是标签的id属性值

document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象，elementName标签的name属性值

document.getE1ementsByTagName(tagname)
通过标签名查找标签dom对象。tagname是标签名

document 对象的三个查询方法，如果有id属性，优先使用getElementById方法来进行查询。
如果没有id属性，则优先使用getElementsByName方法来进行查询。
如果id属性和name属性都没有最后再按标签名查getElementsByTagName。

以上三个方法，一定要在页面加载完成之后执行。才能查询到标签对象。

<script type="text/javascript">
        /*当用户点击了较验按钮，要获取输出框中的内容，然后验证其是否合法
        验证的规则是：必须由字母、数字、下划线组成，并且长度是5-12位*/
        function onclickf() {
            //1.要操作一个标签的时候，一定要先获取这个标签对象
            var usernameObj = document.getElementById("username");
            //alert(usernameObj);
            //[object HTMLInputElement] dom对象
            //alert(usernameObj.id);
            //alert(usernameObj.type);
            //alert(usernameObj.value);
            var usernameTest = usernameObj.value;
            //严重字符串符合某个规则，需要使用正则表达式
            var patt = /^\w{5,12}$/;
            /*test()方法用于测试某个字符串，是不是匹配我的规则，
            匹配就返回true，不匹配返回false*/
            var usernameSpanObj = document.getElementById("usernameSpan");
            //innerHTML表示起始标签和结束标签中的内容
            //innerHTML属性可读、可写
            usernameSpanObj.innerHTML = "我真可爱";
            alert(usernameSpanObj.innerHTML);
            if(patt.test(usernameTest)){
                //alert("用户名合法");
                //usernameSpanObj.innerHTML = "用户名合法";
                usernameSpanObj.innerHTML = "<img src=\"../imags/2.jpg\" width=\"12\" height=\"12\">"
            }else{
                //usernameSpanObj.innerHTML = "用户名不合法";
                usernameSpanObj.innerHTML = "<img src=\"../imags/2.jpg\" width=\"12\" height=\"12\">"
            }
        }
</script>
<body>
    用户名：<input type="text" id="username" value="www"/>
    <span id="usernameSpan" style="color: red"></span>
    <button onclick="onclickf()">较验</button>
</body>

getElementsByName

<script type="text/javascript">
        //全选
        function checkAll() {
            //document.getElementsByName()根据指定的name属性查询返回多个标签对象集合
            //这个集合的操作数和数组一样
            //集合中每个元素都是dom对象
            //这个集合中的元素顺序是他们在html页面中从上到下的顺序
            var hobbies = document.getElementsByName("hobby");
            /*alert(hobbies);
            alert(hobbies.length);
            alert(hobbies[1]);
            alert(hobbies[0].value);
            //checked表示复选框的选中状态，如果选中-true，否则false
            //checked这个属性可读、可写
            alert(hobbies[1].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>
<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>

getElementsByTagName

<script type="text/javascript">
        //全选
        function checkAll() {
            //document.getElementsByTagName("input")是按照指定标签名来进行查询并返回集合
            //这个集合的操作数和数组一样
            //集合中每个元素都是dom对象
            //这个集合中的元素顺序是他们在html页面中从上到下的顺序
            var inputs = document.getElementsByTagName("input");
            //alert(inputs);
            for(var i = 0;i<inputs.length;i++){
                inputs[i].checked = true;
            }
        }

    </script>
<body>
    兴趣爱好：
    <input type="checkbox" value="cpp" checked="checked">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
    <br/>
    <button onclick="checkAll()">全选</button>

</body>

dom查询

节点的常用属性和方法
节点就是标签对象
方法:
通过具体的元素节点调用getElementsByTagName()
方法，获取当前节点的指定标签名孩子节点

appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode是要添加的孩子节点 属性
childNodes 属性，获取当前节点的所有子节点
firstChild 属性，获取当前节点的第一个子节点
lastChild属性，获取当前节点的最后一个子节点 parentNode 属性，获取当前节点的父节点
neLtSibling 属性，获取当前节点的下一个节点
previousSibling 属性，获取当前节点的上一个节点 className 用于获取或设置标签的class属性值
innerHTML属性,表示获取/设置起始标签和结束标签中的内容
innerText 属性,表示获取/设置起始标签和结束标签中的文本

la__
关注
前端JavaScript总结
06-19
在这个"前端JavaScript总结"中，我们将深入探讨JavaScript的基本概念、语法特性、核心功能以及在实际开发中的应用。 首先，JavaScript是一种解释型的、弱类型的脚本语言，它基于ECMAScript规范，并在Web浏览器中...
【前端每日一问001】HTML中script标签应该写在哪个位置
周周の博客小屋
04-26 3707
HTML中script应该写在哪个位置
html+js 计算两数之和 （简洁易懂）
一口大芒果的博客
06-13 1万+
计算两数之和 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.οnlοad=function(){ ...
js, 往head里面追加一个网络css的引用
weixin_41340064的博客
05-25 163
const link = document.createElement(‘link’); link.rel = ‘stylesheet’; link.href = ‘https://example.com/your-css-file.css’; document.head.appendChild(link);
js 封装函数，计算两个数的和
2203_75410429的博客
05-05 719
NUXT head 配置 script 脚本
呵呵，到处看看
08-09 4153
NUXT head 配置 script 脚本 链接形式 head:{ script:[{src='xxx.js'}] } javascript 脚本直接嵌入 head:{ script:[{ innerHtml:"console.log(`js脚本`)" }] } 总结 外部文件引入使用 src 加文件路径即可 直接引入脚本需使用其他方法将脚本嵌入 使用innerHtml时需注意转义 ...
JavaScript基础大总结
热门推荐
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript学习总结
qq_53069622的博客
07-08 1965
JavaScript学习总结
javascript总结
09-06
在“javascript总结”这个主题中，我们将深入探讨JavaScript的基础知识，以及它如何与HTML标签相互作用来增强用户体验。 首先，让我们从HTML标签开始。HTML（超文本标记语言）是网页内容的结构框架，而JavaScript则...
Javascript总结导图
10-08
本篇内容将围绕"JavaScript总结导图"展开，深入探讨JavaScript的基础知识、核心概念以及高级特性。 1. **基础语法** JavaScript的基础包括变量声明（var、let、const）、数据类型（如字符串、数字、布尔值、null、...
2025年软考高级 - 信息系统项目管理师考试备考全攻略
11-09
2025年软考高级 - 信息系统项目管理师考试备考全攻略
MySQL 5.7从入门到精通 第23章 新闻发布系统数据库设计 共6页.pptx
最新发布
11-09
【课程大纲】 第1章 初始MySQL 共19页.pptx 第2章 MySQL的安装与配置 共14页.pptx 第3章 数据库的基本操作 共11页.pptx 第4章 数据表的基本操作 共26页.pptx 第5章 数据类型和运算符 共17页.pptx 第6章 MySQL函数 共76页.pptx 第7章 查询数据 共48页.pptx 第8章 插入、更新与删除数据 共10页.pptx 第9章 索引 共11页.pptx 第10章 存储过程和函数 共19页.pptx 第11章 视图 共20页.pptx 第12章 触发器 共11页.pptx 第13章 用户管理 共25页.pptx 第14章 数据备份与还原 共21页.pptx 第15章 MySQL日志 共22页.pptx 第16章 性能优化 共18页.pptx 第17章 MySQL Workbench5.2 的使用 共15页.pptx 第18章 MySQL Replication 共27页.pptx 第19章 MySQL Cluster 共49页.pptx 第20章 MySQL管理利器——MySQL Utilities 共5页.pptx 第21章 读写分离的利器——MySQL Proxy 共5页.pptx 第22章 PHP操作MySQL数据库 共7页.pptx 第23章 新闻发布系统数据库设计 共6页.pptx 第24章 论坛管理系统数据库设计 共6页.pptx
高分springboot毕设+vue的游戏创意工坊与推广平台的设计与实现_orv论文-Java源码.zip
11-09
本项目是一个基于Spring Boot和Vue的游戏创意工坊与推广平台的设计与实现。该项目旨在为游戏开发者和玩家提供一个集中的平台，使他们能够分享创意、展示作品并获取反馈。平台的核心功能包括游戏创意的提交与管理、游戏作品的展示与评价、用户间的互动交流以及推广活动的组织与管理。 在技术实现上，后端采用Spring Boot框架，利用其快速开发和部署的特点，确保系统的稳定性和高效性。前端则使用Vue.js，以其灵活的数据绑定和组件化开发方式，为用户提供流畅的交互体验。数据库设计充分考虑了数据的安全性和扩展性，以支持大量用户和作品的存储需求。 此外，项目还集成了多种实用工具和插件，如用户认证、权限管理、文件存储等，以提升平台的整体功能和用户体验。通过这个项目，用户不仅能够锻炼自己的编程技能，还能深入了解游戏开发和运营的全过程。
考研助手--论文.zip
11-09
基于SSM的毕业设计源码
C# AutoCAD DWG打印成PDF 代码
11-09
自己写的转PDF代码，调试，可用。
PowerQuery的使用与M语言介绍.docx
11-09
PowerQuery的使用与M语言介绍.docx
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值