三、Web：JS_web 按钮 onmousedown js-优快云博客

本文深入浅出地讲解了JavaScript的基础知识，包括JS的组成部分、数据类型、循环、运算符、事件处理、函数、定时器、DOM操作以及事件监听器的使用。适合初学者和希望巩固基础的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、JavaScrip 组成

1.1： JS的组成：ECMAScrip、DOM、BOM

1.2： ECMAScrip，描述了该语言的语法和基本对象

1.3：文档对象模型（DOM），规定了文档的显示结构，可以轻松的删除、添加和替换节点，DOM是HTML和XML的应用程序接口（API）。DOM将把整个页面规划成由节点层构成的文档，HTML或XML页面的每个部分都是一个节点的衍生物。

1.4：浏览器对象模型（BOM），浏览器自带的一些功能样式，如搜索框、设置等学习浏览器窗口交互的对象，对浏览器窗口进行访问与操作。

1.5：可以将js代码放在.js文件中：

<script src="js/index_3.js"></script>

1.6： <script></script>标签通常放在body标签上，根据需要也会选择放在html的<head>标签中

1.7： js代码必须写在script标签或.js文件中

1.8： js中单行注释 /*注释内容*/ //多行注释

1.9：网页中写入内容 document.write（" "）

document.write("hello world")

弹窗alert

alert("hello world")

二、js基本数据类型

2.1: 值类型（基本类型）：数字（Number）、字符串（String）、布尔（Boolean）、对空（Null）、未定义（Undefined）、Symbol

2.2：引用数据类型：对象（Object）、数组（Array）、函数（Function）

2.2.1 数组的两种定义方式：

方法1：var class_1=["小明","小李","小王"]

方法2：var class_2 = new Array();

class_2[0]="小明";class_2[0]="小李";class_2[0]="小王";

2.2.2 对象object： var user={ user_name="yyy",user_pwd="yyy123",user_id="1001"}

三、循环

3.1：for循环

for (var i=0;i<7;i++){

    document.write("<div></div>")

    document.write("<br>")

    }

3.2 while循环

3.2.1：while 先判断，再执行

while (i<5)

{

    x=x + "The number is " + i + "<br>";

    i++;

}

3.2.2：do while 先执行，再判断

do

{

    x=x + "The number is " + i + "<br>";

    i++;

}

while (i<5);

3.3 switch循环

switch(n)

    {

        case 1:

        执行代码块 1

        break;

        case 2:

        执行代码块 2

        break;

        default:

        与 case 1 和 case 2 不同时执行的代码

    }

工作原理：首先设置表达式n（通常是一个变量）。随后表达式的值会与结构中的每个case的值做比较。如果存在匹配，则与该case关联的代码块会被执行。请使用break来阻止代码自动地向下一个case运行。

四：运算符

4.1：算数运算符

算数运算符用于对数字执行算数运算：

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	系数
++	递加
--	递减

实现一个简易计算器：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>计算器</title>

    <style>

        /*设置div样式*/

        .div_1{width: 300px;height: 300px;margin: 0 auto;background-color:bisque;}

    </style>

</head>

<body>

    <div class="div_1">

        <input type="number" id="input_1" placeholder="请输入第一个数字"> /* placeholder提示用户 */

        <input type="number" id="input_2" placeholder="请输入第二个数字">

        <button type="button" id="jia">+</button> //加的按钮

        <button type="button" id="jian">-</button> //减的按钮

        <button type="button" id="cheng">*</button> //乘的按钮

        <button type="button" id="chu">/</button> //除的按钮

        <br>

        <div class="div_2">计算结果为：<span id="result"></span></div>

    </div>

    <script>

        /*加的功能的实现*/

        /*获取“加”按钮的元素id*/

        jia=document.getElementById("jia");

        /*绑定单击事件*/

        jia.onclick=function () {

        /*获取输入的第一个数字的值*/

        number_1=parseInt(document.getElementById("input_1").value);

        /*获取输入的第二个数字的值*/

        number_2=parseInt(document.getElementById("input_2").value);

        /*获取id为result的标签的元素id*/

        result=document.getElementById("result");

        /*将计算结果显示在html网页（显示在id为result的标签中）*/

        result.innerHTML=number_1+number_2

        };

        /*减*/

        jian=document.getElementById("jian");

        jian.onclick=function () {

        number_1=parseInt(document.getElementById("input_1").value);

        number_2=parseInt(document.getElementById("input_2").value);

        result=document.getElementById("result");

        result.innerHTML=number_1-number_2

        };

        /*乘*/

        cheng=document.getElementById("cheng");

        cheng.onclick=function () {

        number_1=parseInt(document.getElementById("input_1").value);

        number_2=parseInt(document.getElementById("input_2").value);

        result=document.getElementById("result");

        result.innerHTML=number_1*number_2

        };

        /*除*/

        chu=document.getElementById("chu");

        chu.onclick=function () {

        number_1=parseInt(document.getElementById("input_1").value);

        number_2=parseInt(document.getElementById("input_2").value);

        result=document.getElementById("result");

        result.innerHTML=number_1/number_2  

        }

    </script>



</body>

</html>

4.2：赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

加法赋值运算符（+=）向变量添加一个值。

4.3：字符串运算符

4.3.1: + 运算符也可用于对字符串进行相加（concatenate，级联）。

实例

txt1 = "Bill";

txt2 = "Gates";

txt3 = txt1 + " " + txt2;

txt3 的结果将是：

Bill Gates

+= 赋值运算符也可用于相加（级联）字符串：

实例

txt1 = "Hello ";

txt1 += "Kitty!";

txt1 的结果将是：

Hello Kitty!

提示：在用于字符串时，+ 运算符被称为级联运算符。

4.3.2: 字符串和数字的相加

相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串：

实例

x = 7 + 8;

y = "7" + 8;

z = "Hello" + 7;

x、y 和 z 的结果将是：

Hello7

提示：如果您对数字和字符串相加，结果将是字符串！

4.4：比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

4.5：逻辑运算符

运算符	描述
&&	逻辑与
\|\|	逻辑或
!	逻辑非

4.6：类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

4.7：位运算符

位运算符处理 32 位数。

该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
\|	或	5 \| 1	0101 \| 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

上例使用 4 位无符号的例子。但是 JavaScript 使用 32 位有符号数。

因此，在 JavaScript 中，~ 5 不会返回 10，而是返回 -6。

~00000000000000000000000000000101 将返回 11111111111111111111111111111010。

五、事件

5.1：单击事件onclick

js中绑定单击事件：首先获取按钮的id元素，再通过id元素绑定

    //绑定单击事件 获取元素绑定function

    //通过id获取元素

    var btn_1=document.getElementById("btn_1");

    //通过js绑定单击事件（给对象的属性赋值一个函数）

    btn_1.onclick = function () {

    var a = parseInt(document.getElementById("first_num1").value);

    var b = parseInt(document.getElementById("second_num1").value);

    //只有数字可以进行加减等计算

    alert(a+b)

    };

js中将获取到的数据显示在某个标签中进行显示，使用innerHTML

<span id="result"></span>

result=document.getElementById("result");

result.innerHTML=number_1-number_2

5.2：onload和onunload事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>菜鸟教程(runoob.com)</title>

</head>

<body onload="checkCookies()">

    <script>

        function checkCookies(){

            if (navigator.cookieEnabled==true){

                alert("Cookies 可用")

                    }

            else{

                alert("Cookies 不可用")

                    }

            }

    </script>

    <p>弹窗-提示浏览器 cookie 是否可用。</p>


</body>

</html>

5.3：onchange事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>菜鸟教程(runoob.com)</title>

</head>

<head>

    <script>

        function myFunction(){

            var x=document.getElementById("fname");

            x.value=x.value.toUpperCase();

            }

    </script>

</head>

<body>



    输入你的名字: <input type="text" id="fname" onchange="myFunction()">

    <p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>



</body>

</html>

5.4：onmouseover和onmouseout事件鼠标滑过

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>菜鸟教程(runoob.com)</title>

</head>

<body>



    <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">

    Mouse Over Me</div>

    <script>

        function mOver(obj){

            obj.innerHTML="Thank You"

        }

        function mOut(obj){

            obj.innerHTML="Mouse Over Me"

        }

    </script>



</body>

</html>

5.5：onmousedown和onmouseup事件鼠标按下

onmousedown事件会在鼠标按键按下时发生，onmouseup则相反。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>菜鸟教程(runoob.com)</title>

</head>

<head>

    <script>

        function lighton(){

            document.getElementById('myimage').src="bulbon.gif";

        }

        function lightoff(){

            document.getElementById('myimage').src="bulboff.gif";

        }

    </script>

</head>

<body>

        <img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />

        <p>点击不释放鼠标灯将一直亮着!</p>

</body>

</html>

5.6：onkeyup、onkeydown事件

onkeyup：当用户释放键盘按钮时执行js代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>菜鸟教程(runoob.com)</title>

<script>

        function myFunction(){

            var x=document.getElementById("fname");

            x.value=x.value.toUpperCase();

        }

</script>

</head>

<body>

    <p>当用户在输入字段释放一个按键时触发函数。函数将字符转换为大写。</p>

    输入你的名称: <input type="text" id="fname" onkeyup="myFunction()">

</body>

</html>

 onkeydown：当用户按下一个按键时执行js代码 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>菜鸟教程(runoob.com)</title>

<script>

    function myFunction(){

        alert("你在输入栏内按下一个键");

    }

</script>

</head>

<body>

    <p>当你在输入框内按下一个按键是函数被触发</p>

    <input type="text" onkeydown="myFunction()">

</body>

</html>

六、函数

6.1：函数，语法：function 函数名（）{ 功能 } 调用函数：函数名（）

function alert_number() {

    //获取input标签中的内容

    alert(document.getElementById("number").value)

    }

alert_number() //调用函数

实例：

<body>

    <form>

        <input type="text" placeholder="请输入数字：" id="number">

            <!-- onclick 单击事件-->

            <button type="button" class="btn" onclick="alert_number()">确定</button>

    </form>

        <!--js代码必须写在script标签或.js文件中-->

    <script>

        /*单行注释 */ //多行注释

        //1.向网页中写入hello world

        //document.write("hello world")

        //2.弹窗

        //alert("hello world")

        //3.函数，一般用于计算或单纯的某个小功能实现

        //语法： function 函数名(){ 功能 } 调用函数： 函数名()

        function alert_number() {

        //获取input标签中的内容

        alert(document.getElementById("number").value)

        }

        //alert_number() //调用函数

</script>

</body>

6.2：定时调用函数setInterval，每隔一段时间自动调用函数

语法：setInterval（函数名，时间ms）

或者：setInterval（function 函数名（）{ 功能 }，时间ms）

<script>

    x=0

    content_div=document.getElementById("content")

    content_div.innerHTML+=content_div.innerHTML

    function scroll() {

        x--

        if(x==-601){

            x=0

            }

        content_div.style.left=x+"px"

        }

    setInterval(scroll,10)

</script>

七、document对象

7.1：用来操控元素（标签），比如获取（改变）标签文本数据、样式等

HTML文档中可以使用以下属性和方法:

属性 / 方法	描述
document.activeElement	返回当前获取焦点元素
document.addEventListener()	向文档添加句柄
document.adoptNode(node)	从另外一个文档返回 adapded 节点到当前文档。
document.anchors	返回对文档中所有 Anchor 对象的引用。
document.applets	返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 <applet> 元素。
document.baseURI	返回文档的绝对基础 URI
document.body	返回文档的body元素
document.close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
document.cookie	设置或返回与当前文档有关的所有 cookie。
document.createAttribute()	创建一个属性节点
document.createComment()	createComment() 方法可创建注释节点。
document.createDocumentFragment()	创建空的 DocumentFragment 对象，并返回此对象。
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。
document.doctype	返回与文档相关的文档类型声明 (DTD)。
document.documentElement	返回文档的根节点
document.documentMode	返回用于通过浏览器渲染文档的模式
document.documentURI	设置或返回文档的位置
document.domain	返回当前文档的域名。
document.domConfig	已废弃。返回 normalizeDocument() 被调用时所使用的配置。
document.embeds	返回文档中所有嵌入的内容（embed）集合
document.forms	返回对文档中所有 Form 对象引用。
document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.images	返回对文档中所有 Image 对象引用。
document.implementation	返回处理该文档的 DOMImplementation 对象。
document.importNode()	把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding	返回用于文档的编码方式（在解析时）。
document.lastModified	返回文档被最后修改的日期和时间。
document.links	返回对文档中所有 Area 和 Link 对象引用。
document.normalize()	删除空文本节点，并连接相邻节点
document.normalizeDocument()	删除空文本节点，并连接相邻节点的
document.open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
document.readyState	返回文档状态 (载入中……)
document.referrer	返回载入当前文档的文档的 URL。
document.removeEventListener()	移除文档中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()	重命名元素或者属性节点。
document.scripts	返回页面中所有脚本的集合。
document.strictErrorChecking	设置或返回是否强制进行错误检查。
document.title	返回当前文档的标题。
document.URL	返回文档完整的URL
document.write()	向文档写 HTML 表达式或 JavaScript 代码。
document.writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

7.2：获取标签id

语法：变量名=document.getElementById("标签id")

content=document.getElementById("content");//获取div标签

7.3：创建标签

语法：变量名=document.createElement("标签")

var div_1=document.createElement("div");//创建div标签

7.4：为标签添加属性（比如添加id）

语法：变量名.setArrtibute("id","show") //第一个参数为属性名，第二个参数为属性值

div_1.setAttribute("id","show");//第一个参数为属性名，第二个参数为属性值

7.5：为标签添加文本内容

语法：变量名.innerText="文本内容"

div_1.innerText="123123";//添加文本内容

7.6：在标签中添加子标签

content.appendChild(div_1);//添加元素，将创建的div添加到content中

注意：通过js新建的标签，必须添加到一个已经存在的标签中，新标签才会显示出来。

八、addEventListener方法和removeEventListener方法

8.1 addEventListener（）方法用于向指定元素添加事件句柄，

8.2 使用removeEventListener（）方法移除添加的事件句柄。

8.3 语法：element.addEventListener（evennt,function,useCapture）

8.4 参数值：

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。提示：所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行