这篇博客详细介绍了JavaScript的基础知识，包括概念、引入方式、调试工具、元素获取、事件处理、变量声明、数据类型、运算符、条件语句以及常用的元素操作方法。内容涵盖了从JavaScript的基本语法到实际操作DOM和处理事件的各种技巧。
一、javascript初识
1、 概念
-
javascript是基于对象和事件驱动的解释性脚本语言;
-
特性
| 基于对象 | 可以运用自己创建的对象 |
|---|---|
| 事件驱动 | javascript可以直接对用户或者客户端的操作进行响应 |
| 解释性 | 相对编译性来说, 浏览器可以直接识别和解析代码 |
| 跨平台性 | 只要是浏览器就可以运行 |
-
js组成部分
-
ECMAScript: 用来指定javascript语法标准, 核心
-
DOM: Document Object Model 文档对象模型
-
BOM: Browser Object Model 浏览器对象模型
-
2、 js引入方式
- 行内引入： 事件驱动, 给元素加上对应的事件, 不常用
<div class="box" onclick="alert(1)">这是一个div</div>
- 内嵌: script双标签, script标签可以放置于任何位置,推荐放于body的结束标签之前, 工作少用, 学习常用
<script>
alert(3);
</script>
- 外链: script双标签, script标签可以放置于任何位置, 用src将地址引入进来, 工作常用
<script src="test.js"></script>
- 注意事项:
// 注意： 1. 从上到下的顺序执行, 遇到script标签会停止执行去运行script标签中的代码，script标签中代码执行完成后再继续执行其他代码
// 2. 外链的script标签中写其他js代码，其他js代码不会执行
<script>
// 阻断页面
alert(2);
</script>
<script src="test.js">
// 不会执行
alert(1);
</script>
3、 调试工具
-
alert(要弹出的内容): 警告框，让用户看到提示, 阻断页面
-
console.log(要输出的内容): 输出在控制台, 右键—> 检查—>console
4、获取元素（id）
document.getElementById('id')
// 获取元素方式: 通过id获取
// 语法: document.getElementById('id');
// document: 文档
// get: 得到
// Element: 元素
// ById: 通过id
document.getElementById('box')
5、 事件三部曲
- 元素添加事件三部曲
- 得到元素 document.getElementById(‘box’)
- 添加事件: .事件 = function(){}
- 具体要做的事情: alert(2);
document.getElementById('box').onclick = function(){
alert(2);
}
二、鼠标事件
| 鼠标事件 | 对应函数 |
|---|---|
| 单击事件 | onclick |
| 双击 | ondblclick |
| 鼠标移入 | onmouseover/ onmouseenter |
| 鼠标移出 | onmouseout / onmouseleave |
| 鼠标按下 | onmousedown |
| 鼠标抬起 | onmouseup |
| 鼠标移动 | onmousemove |
| 鼠标右键菜单 | oncontextmenu |
- 单击事件： onclick
document.getElementById('box').onclick = function(){
alert(2);
}
- 双击: ondblclick
document.getElementById('box').ondblclick = function(){
alert(3);
}
- 鼠标移入: onmouseover/ onmouseenter
- 鼠标移出: onmouseout / onmouseleave
// onmouseenter: enter中子元素不会触发父元素身上的事件
// onmouseover: over中子元素会触发父元素的事件
// document.getElementById('box').onmouseenter = function(){
// console.log(1);
// }
document.getElementById('box').onmouseover = function(){
console.log(2);
}
- 鼠标按下: onmousedown
document.getElementById('box').onmousedown = function(){
// alert(3);
console.log(1);
}
- 鼠标抬起: onmouseup
document.getElementById('box').onmouseup = function(){
// alert(4);
console.log(2);
}
- 鼠标移动：onmousemove
document.getElementById('box').onmousemove = function(){
console.log(5);
}
- 鼠标右键菜单: oncontextmenu
document.getElementById('box').oncontextmenu = function(){
console.log(6);
}
三、变量
用来存储数据的容器
1、 声明
-
先声明后赋值
-
单个声明: var 变量名; 变量名 = 值;
-
多个声明: var 变量名1, 变量名2, … , 变量名n; 变量名1 = 值; 变量名2 = 变量名3 = 值2;
-
-
声明的同时并赋值
-
单个声明: var 变量名 = 值;
-
多个声明: var 变1 = 值1, 变2 = 值2, …, 变n = 值n;
-
var val;
val = 10;
console.log(val);
var val1, val2, val3;
val1 = 20;
val2 = val3 = 30;
console.log(val1, val2, val3);
var newNum = 30;
console.log(newNum);
var newNum1 = 20, newNum2 = 30;
console.log(newNum1, newNum2);
2、 变量的命名规范
-
遵循驼峰命名法, 见名知意; userLoginName, userPassword
-
变量由字母、数字、_、$组成, 数字不能开头
-
不能使用关键字和保留字
-
不能重复, 后面的会覆盖前面的
3、 window.onload = function(){}
作用： 等待窗口(页面及资源)加载完成后在执行其中的代码
window.onload = function () {
console.log(1);
var oDiv = document.getElementById('box');
console.log(oDiv);
oDiv.onclick = function () {
alert(2);
}
oDiv.onmousedown = function () {
console.log(7);
}
}
四、js操作元素内容
1、获取
-
标签.innerText: 获取得到纯文本内容, 不识别标签
-
标签.innerHTML: 获取得到文本内容及标签(带标签的文本内容)
var box = document.getElementById('box');
var box1 = document.getElementById('box1');
console.log(box, box1);
console.log(box.innerText);
console.log(box1.innerHTML);
2、设置
-
标签.innerText = 值; 设置时，会覆盖标签中原有的内容, 不识别标签
-
标签.innerHTML = 值; 设置时, 会覆盖标签中原有的内容, 可以识别标签
box.innerText = '这是新更改的内容9';
box.innerText = '<i>这是第二次更新的内容8<i>';
box1.innerHTML = '这是新更改的内容7';
box1.innerHTML = '<strong>这是新更改的内容6</strong>';
3、 innerText与innerHTML的区别
| innerText不识别标签 | innerHTML可以识别标签 |
|---|
案例：简易聊天框
<div>
<ul id="oul">
<li>这是第一句话</li>
<li>这是第二句话</li>
<li>这是第的句话</li>
</ul>
</div>
<button id="btn">添加内容</button>
<script>
// 点击添加内容，往ul中添加li
// 1. 获取元素
var btn = document.getElementById('btn');
var oul = document.getElementById('oul');
// 2. 添加事件
btn.onclick = function(){
// 3. 做具体的事情
// 得到原有的ul中的内容
var text = oul.innerHTML;
console.log(text + '<li>这是新内容</li>');
oul.innerHTML = text + '<li>这是新内容</li>';
}
</script>
4、innerHTML与document.write的区别
| innerHTML | document.write |
|---|---|
| 都可以操作body标签，document.body.innerHTML页面中获取到body之后在操作 | document.write直接操作body |
| 可以操作所有的闭合标签 | 只能操作body |
| 都可以识别标签 | 都可以识别标签 |
| 覆盖原标签中的所有内容 | 也会覆盖原标签中的所有内容，但是自己添加的内容不覆盖 |
| document.body.innerHTML == document.write(在一定程度上相等) | document.write需要加window.onload |
window.onload = function () {
document.write('<b>123</b>');
document.write('<b>678</b>');
}
五、操作表单
1、获取
- 标签.value
- 注意： option中如果设置了value 得到的就是value， 建议使用value获取textarea的值
var userName = document.getElementById('userName');
var userPassword = document.getElementById('userPassword');
console.log(userName.value);
console.log(userPassword.value);
var ck = document.getElementById('ck');
var ck1 = document.getElementById('ck1');
console.log(ck.value, ck.checked);
console.log(ck1.value, ck1.checked);
var man = document.getElementById('man');
var woman = document.getElementById('woman');
console.log(man.value, woman.value);
var cs = document.getElementById('cs');
// 下拉列表中,没有添加value时, 默认用option中的内容作为value值
// 有value时, 返回被选中的option的value值
console.log(cs.value);
var txt = document.getElementById('txt');
console.log(txt.value); // textarea 中内容可以拿到, 建议用
console.log(txt.innerText); // 空
console.log(txt.innerHTML); // 可以拿到
2、设置
- 标签.value = 值
// 
最低0.47元/天 解锁文章
扫一扫
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
