JavaScript认识

ablu56590

墨衍会员 · AI 创作全网分发码龄12年

关注

转载最新推荐文章于 2026-04-04 09:42:43 发布 205 阅读 AI 写同款· GEO 优化 ›

一、简单认识JavaScript（JS）

1.JavaScript是一种直译性的脚本语言。

2.JavaScript作用

1）操作html页面内容

2）响应用户操作，如页面某个元素变化等

3）验证数据，如ajax，后台数据交互等

3.JavaScript和java没有关系

4.jQuery是JavaScript代码组合的一堆代码，是一个注重特效的插件

二、书写JS代码

1.js代码写在<script></script>标签里或单独的js文件中。

2.<script></script>任意地方都可以放，一般放在head或body结束之前，但要注意加载顺序。

3.script标签一般会加上标签属性type="text/javascript"或language="javascript"，HTML5新规则下可以什么都不用加。

4.外部引入js文件，后缀“.js”，<script src="文件路径"></script>

三、JS代码书写注意事项

1.js严格区分大小写，js常采用驼峰命名法

2.标点符号都是英文的半角符号

3.代码要缩进，缩进要对齐

四、JS里的系统弹窗

每个浏览器弹窗不一样。

1.alert("内容");只有一个“确定”选项，调试时常用

2.confirm("你确定吗？");两个选项“确定”和“取消”

3.prompt("请输入内容：");弹出文本框，用户可以输入内容，有两个选项“确定”和“取消”

五、JS注释

1.单行注释：//注释内容

2.多行注释：/* 注释内容 */

六、JS获取页面元素节点或标签和修改内容

1.通过id获取元素

1）document.getElementByid("id名称");

2）修改方法：document.getElementByid("id名称").innerHTML = "添加内容";

这里需要注意的是innerHTML是可读可写的，即可以获取元素内容，也可以写内容。

2.通过class获取元素，class名称不唯一，所以获取的是一个集合

1）document.getElementsByClassName('class名称');

2）修改方法：document.getElementsByClassName('class名称')[0].innerHTML = "添加内容”;

3.通过css选择器获取属性，比较常用，且兼容性比较好，兼容IE8及以上版本

1）document.querySelector("css选择器");

2）修改方法：document.querySelector("css选择器").innerHTML = "添加内容”;

4.返回选择器对应的数据集合

1）document.querySelectorAll("css选择器");

2）修改方法：document.querySelectorAll("css选择器")[0].innerHTML = "添加内容”;

5.通过标签获取标签对应的数据集合

1）document.getElementByTagName("标签名");

2）修改方法：document.getElementByTagName("标签名")[0].innerHTML = "添加内容”;

6.通过name获取属性，返回的是集合，name一般标签支持不一样，如表单比较常见

1）document.getElementByName("name");

注意点：除了getElementByid前面必须是document外，其他的获取元素方法都是可以迭代使用的即前面不一定是document。

七、往标签后面追加东西

1.document.write("内容");，该内容是可以解析的。

2.document.getElementByid("id名称").innerText = "内容";，该内容是不会被解析的。

注意：如果js代码写在head里面，并且涉及到文档标签时，浏览器会报错，这时就需要事件来处理，如外部引用的js文件。

1）当文档加载完成后触发的事件

window.onload = function() {
　　document.getElementByid("id名称").innerText = "内容";，
} ;

2）注意，当浏览器触发window.onload时，意味着文档流已经关闭

此时document.write("内容");方法在文档流关闭之前可以正常显示；在文档流关闭之后，会把整个HTML替换成一个字符串即直接覆盖整个文档。所以不建议在window.onload里使用该方法。

八、JS事件

事件有很多种类，有鼠标事件、键盘事件、表单事件、系统事件。

更多JavaScript 事件可以参考手册：http://www.w3school.com.cn/jsref/jsref_events.asp

1.获取元素，推荐使用getElement方法，效率较高。

2.给元素注册事件，即注册一个反馈机制。

书写格式：

document.getElementById('box').onclick = function () {};

解释：鼠标单击后触发的事件，注意后面以分号结束。

3.初识事件

onclick　　单击事件

ondblclick　　双击事件

onmouseover / onmouseenter　　移入事件

onmouseout / onmouseleave　　移出事件

九、函数

1.匿名函数

function() {}

2.有名函数

function 函数名() {}

3.有名函数调用

1）事件函数

document.getElementById('box').onclick = function1;
function function1() {}
注意：调用函数时不要加括号。

2）js文件中函数自执行

function1();
注意：调用函数时要加括号和分号。

3）标签中

<div id="box" onclick="function1();"></div>
注意：调用函数时要加括号和分号。

十、this和变量

1.this指代当前触发事件的对象。

2.定义变量：var

3.变量命名规则：

1）禁止关键词、保留字
2）只允许数字、字母、“_”、 "$"，不能数字开头
3）严格区分大小写
4）通常要求见名之意

示例：

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>Document</title>
10   <style>
11     body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;}
12     *{margin: 0; padding: 0;}
13     ol,ul{list-style: none;}
14     a{text-decoration: none; color: inherit;}
15     html{background: #ccc;}
16     #container{
17         width: 50px;
18         height: 50px;
19         padding: 50px; 
20         background: deeppink;
21     }
22   </style>
23  </head>
24  <body>
25   <div id="container"></div>
26   <script>
27     var oBox = document.getElementById('container');
28 
29     oBox.onclick = function () {
30         this.innerHTML = 'Hello World！';
31     };
32 
33     oBox.onmouseover = function () {
34         this.innerHTML = '鼠标移入了！';
35     };
36 
37     oBox.onmouseout = function () {
38         this.innerHTML = "";
39     };
40   </script>
41  </body>
42 </html>

结果：

十一、牛刀小试

示例：

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <style>
 7     body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin: 0;}
 8     *{margin: 0; padding: 0;}
 9     ol,ul{list-style: none;}
10     a{text-decoration: none; color: inherit;}
11     div{
12         width: 100px;
13         height: 100px;
14         margin: 50px;
15         background: #ccc;
16     }
17   </style>
18  </head>
19  <body>
20   <div id="box1"></div>
21   <div id="box2"></div>
22   <script type="text/javascript">
23     document.getElementById("box1").onclick = function() {
24         document.getElementById("box1").innerHTML = "这是box1";
25         document.getElementById("box2").innerHTML = "你点击了box1";
26     };
27     document.getElementById("box2").onclick = function() {
28         document.getElementById("box2").innerHTML = "这是box2";
29         document.getElementById("box1").innerHTML = "你点击了box2";
30     };
31   </script>
32  </body>
33 </html>