一、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 = 值
// ----------设置--------
userName.value = '前端迷';
userPassword.value = '666666';
txt.value = '这是新的设置内容';
city.value = '重庆'; //匹配不到
city.value = 'cq'; //所设置的内容要与value值完全一致否则为空
city.value = 'cq'; //重设默认选中项
简易聊天框
<div id="box">
<ul id="oul">
<li>我们已经成为好友,快开始聊天吧</li>
</ul>
</div>
<input type="text" id="inp"><button id="send">发送</button>
<script>
// 输入内容,点击发送,到对话框中
// 1. 获取元素
var inp = document.getElementById('inp');
var send = document.getElementById('send');
var oul = document.getElementById('oul');
// 2. 添加事件
send.onclick = function(){
// 3. 做具体的事情
// 3-1: 获取输入的内容
var txt = inp.value;
console.log(txt);
var ulHTML = oul.innerHTML;
// 拼接: 1. 删 2. 加: 加两个引号两个加号 3. 拼
oul.innerHTML = ulHTML + '<li>' + txt + '</li>';
// 3-2: 清空输入框
inp.value = '';
}
</script>
六、操作元素属性
1、获取
-
元素.属性名
-
元素[“属性名”] 元素[变量];
2、设置
-
元素.属性名 = “属性值”;
-
元素[“属性名”] = “属性值”;
元素[变量] = “属性值”;
-
注意: class作为保留字, 不能直接使用, 用className
-
区别: 所有点的方式都可以换成中括号, 中括号中属性名要加引号, 中括号中可以用变量, 点的方式不能用变量
var box = document.getElementById('box');
var btn = document.getElementById('btn');
btn.onclick = function(){
console.log(box.className);
box.id = 'a';
// class作为保留字, 不能直接使用, className
var y = box.className; // box
box.className = y + ' b';//注意要有空格拼接
var cn = 'id';//将id设为cn变量
console.log(box.id);
console.log(box["id"]);
console.log(box[cn]);
// box['id'] = 'c';
box[cn] = 'c';
}
七、操作img的src属性
1、获取
- 标签.src 注意: 获取到绝对地址, 没有实际作用
2、设置:
- 标签.src = ‘值’; 相对地址
var img = document.getElementById('img');
console.log(img.src); // file:///E:/%E4%B8%AD%E5%85%AC%E6%95%99%E8%82%B2/20200316/day02/img/dark.jpg
// 点击开灯按钮,让图片亮起来(换img的src)
// 1. 获取元素
var btn = document.getElementById('btn');
// 2. 添加事件
btn.onclick = function(){
// 3. 具体的事情
img.src = './img/bright.jpg';
//img.src = "../images/" + userInput + ".jpg";相对地址
}
八、操作元素样式
1、获取
- 标签.style.属性名
2、设置
- 标签.style.属性名 = ‘属性值’;
-
注意:
-
只能操作行内样式
-
js中没有连字符’-’, 遇到有连字符, 去掉连字符,将连字符紧跟的第一个字母变成大写, 遵循驼峰命名法
-
var box = document.getElementById('box');
console.log(box.style); // 不会直接用
console.log(box.style.width); // 200px
console.log(box.style.height);
console.log(box.style.background);
console.log(box.style.color); // 空
box.style.width = '500px';
box.style.border = '10px solid #0f0';
// 点击放大按钮, 将字体放大
var btn = document.getElementById('btn');
btn.onclick = function(){
box.style.fontSize = '100px';// 无连字符,遵循驼峰命名法
}
九、批量样式设置: cssText
1、获取
- 标签.style.cssText 只能获取到行内所设置的样式
2、设置
- 标签.style.cssText = ‘值’; 设置标签上的style属性
- 设置时, cssText会覆盖原有的所有行内样式
console.log(box.style.cssText);
box.style.cssText = 'width: 100px; height: 200px; font-size: 10px;';
操作元素案例:输入序号-显示对应图片
<input type="text" id="inp"> <button id="btn">切换</button>
<br>
<img src="./img/1.jpg" alt="" id="myImg">
<div id="cont">当前显示的是: img/1.jpg</div>
<script>
// 输入图片地址, 切换到对应的图片
// 用户输入图片名称, 点击切换按钮, 图片显示为用户所输入的名字的图片, 展示的文字对应更改成用户输入的名字
// 1. 获取元素
var inp = document.getElementById('inp');
var btn = document.getElementById('btn');
var myImg = document.getElementById('myImg');
var cont = document.getElementById('cont');
// console.log(inp, btn, myImg, cont);
// 2. 添加事件
btn.onclick = function(){
// 3. 具体要做的事情
// 3-1: 得到用户所输入的内容
var txt = inp.value; // 1 2 3 4
// 3-2: 切换图片
myImg.src = "./img/" + txt + ".jpg";
// 3-3:文字显示
cont.innerHTML = '当前显示的是: img/' + txt + '.jpg';
// 3-4: 清除输入框
inp.value = '';
}
</script>
十、数据类型
1. 检验数据类型
-
typeof 要检验的数据
-
typeof(要检验的数据)
-
typeof 检验结果:
-
返回自身类型: number\string\boolean\undefined\function
-
返回object: null\object\array
-
-
存储的数据类型和存储位置
-
基础: 存储数据类型比较单一, 存储于栈中
-
复杂: 存储数据类型比较多样化, 存储于堆中
-
复杂数据类型用=赋值,改变的是地址指针
-
2、分类
基础数据类型 | 复杂数据类型 |
---|---|
number\string\boolean\null\undefined | (引用、复合)object\array\function |
基础数据类型
number
-
整型: 0 1 2 3 整数
-
浮点型: 小数, 必须包含一个小数点并且小数点后至少一位不为0的数字 1.2 2.01
-
特殊值:
-
如果数字以0开头,并且后面的数字都不超过8,就表示八进制数
-
如果数字以0x开头,表示十六进制数 0-9ab-f
-
正无穷大:Infinity/-Infinity(100/0,除数为0)
-
NaN: 特殊值, Not a Number, 不是一个数字, 任何与数值操作错误的时候都会返回NaN
-
检验: 使用typeof之后,返回结果是number
-
NaN与所有数值进行计算,返回结果都是NaN
-
NaN与任何数值都不相等,包括自身
-
-
注意: 由于计算机存储不精的问题,导致计算结果有偏差, 在使用的过程中要避免使用小数去做判断
console.log(0.1 + 0.2); // 0.30000000000000004
string
- 概念: 字符串, 被成对的单双引号包裹起来的字符都是字符串
var str = 'abc';
console.log(typeof str); // string
var str1 = '123';
console.log(typeof str1); // string
-
字符串的长度: 字符串.length
-
获取到指定下标的字符:
-
字符串.charAt(下标);
-
字符串[下标]: ie8以上可以使用
-
下标: 从左往右、从0开始的数字
-
boolean
-
boolean: 布尔值, true(真) false(假)
-
一般用来做判断条件或者是判断条件的结果
var b = true;
console.log(b);
console.log(typeof b); // boolean
console.log(1 == 1); // true
if(true){
//如果为真就执行
console.log(1);//1
}
null与undefined
-
undefined: 声明了变量未赋值时(未初始化)
-
null: 空, 空对象, 现在没有值,但是将来可能会给他一个值
-
js中规定: null和undefined相等
-
null和undefined的区别: undefined是声明了未赋值, null本身就是空
var a; console.log(a); var b = undefined; console.log(typeof b); // undefined var nu = null; console.log(nu); console.log(typeof nu); // object console.log(1 == undefined); // false console.log(undefined == undefined); // true console.log(null == null);//true // js中规定: null和undefined相等 console.log(null == undefined); // true
复杂数据类型
object
-
概念: 对象, 对象是由方法和属性组成的, 一切皆对象, 所有的一切都是对象
-
例子: window\document\元素 {}
console.log(typeof window); // object
console.log(document);
console.log(typeof document); // object
var box = document.getElementById('box');
console.log(typeof box); // object
var obj = {
};
console.log(obj); // 空对象
-
创建: var 变量名 = {
‘key’: ‘value’,
‘key1’: ‘value1’
}
var myObj = {
'name': '彭于晏',
'height': '183cm'
}
console.log(myObj);
- 取值: 对象变量名.key 对象变量名[‘key’] 对象变量名[变量]
console.log(myObj.name);//彭于晏
console.log(myObj['name']);
var h = 'height';
console.log(myObj[h]);//183cm
array
-
array: 数组, 存放数据的容器, 用来存放不定数量、不定类型的数据值的有序集合;
索引: 每一个值的下标
元素: 数组中的每一项
-
创建: var 变量名 = [元素1, 元素2, …, 元素n];
-
数组的长度: 数组.length
-
得到指定下标的元素: 数组[下标]
var arr = [];
console.log(arr);//Array(0)[]
var arr1 = [1, 2, 3];
console.log(arr1);
var arr2 = [1, true, null, 0xa7, 060, 'abc', 1.2, undefined, NaN, {
}, 1/0, box, [1,2,3]];
console.log(arr2);
console.log(arr2.length);
console.log(arr2[3]); // 167 0xa7
console.log(typeof arr2); // object
function
-
function: 函数, 存放一段代码, 在有需要的时候调用
-
函数使用:
-
声明函数: function 函数名(){ // 要执行的代码块 }
-
调用: 函数名();
-
注意: 只声明不调用函数不起作用
-
函数名的命名规则遵循变量的命名规则
-
function today(){
console.log('啊,要学习');
}
today();//调用执行函数
3、强制转换
Number
-
Number(要转换的数据): 将数据强制转换成number类型
-
可以转换:
-
纯数字字符串\空和空格\Boolean\null
-
array: 空数组、只有一项且为数字、数字字符串、空字符串、boolean、null可以转换
-
// string: 纯数字字符串\空和空格
console.log(Number('')); // 0
console.log(Number(' ')); // 0
console.log(Number('a')); // NaN
console.log(Number('123a')); // NaN
console.log(Number('123')); // 123
console.log(Number('12.5')); // 12.5
// boolean: true(1) false(0)
console.log(Number(true)); // 1
console.log(Number(false)); // 0
// null(0) undefined
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
var obj = {
};
console.log(Number(obj)); // NaN
// array: 空数组、只有一项且为数字、数字字符串、空字符串、boolean、null可以转换
var arr = [];
console.log(Number(arr)); // 0
console.log(Number(['123'])); // 123
console.log(Number([null])); // 0
console.log(Number(['123', '456'])); // NaN
parseInt
-
parseInt(要转换的数据, 进制)
-
从左往右依次转换, 遇到不能转换的就停止, 返回整型(整数); 如果第一个字符就不能转换, 返回NaN
-
进制: 2-36进制, 得到对应进制字符串
注意: 进制不是必须写,但是建议写
console.log(parseInt('300px')); // 300
console.log(parseInt('12.5px')); // 12
console.log(parseInt('070')); // 在ie8及以下,以0为开头的会转换成8进制数
console.log(parseInt('070', 10));
console.log(parseInt('110', 8));
console.log(parseInt('a123')); // NaN
parseFloat
- parseFloat(要转换的数据): 转换规则与parseInt一致, 返回可以是浮点数
console.log(parseFloat('300px')); // 300
console.log(parseFloat('12.5px')); // 12.5
console.log(parseFloat('12.0px')); // 12
isNaN
-
isNaN(要判断的数据): 判断数据 是不是 不是一个数字
-
不是一个数字: true 是一个数字: false
console.log(isNaN(123)); // false
console.log(isNaN('123')); // false
console.log(isNaN('a123')); // true
console.log(isNaN('123a')); // true
// Number('123a')---> NaN--true 数字---false
console.log(isNaN('12.5')); // false
console.log(isNaN('12.5px')); // true
// Number(true); 1
console.log(isNaN(true)); // false
console.log(isNaN(null)); // false
console.log(isNaN(undefined)); // true
console.log(isNaN({
})); // true
console.log(isNaN([])); // false
console.log(isNaN([null])); // false
string
-
数据对象.toString(进制):
-
toString方法是属于要转换的对象的自带方法, 可以被改变
-
null与undefined不支持
-
进制, 转换后得到转换的数据对应的进制字符串, 2-36进制
-
// number
var num = 30;
console.log(num.toString());
console.log(typeof num.toString()); // string
// boolean
var t = true;
console.log(t.toString());
console.log(typeof t.toString()); // string
// null 与 undefined: null 是空对象,本身就是空 undefined是声明未赋值
var n = null;
// console.log(n.toString());
// console.log(undefined.toString());
var obj = {
};
console.log(obj.toString()); // [object Object]
var arr = [];
console.log(arr.toString()); // 空字符
var arr1 = [1,2,3];
console.log(arr1.toString()); // 1,2,3
// 进制, 转换后得到转换的数据对应的进制字符串, 2-36进制
var num = 10;
console.log(num.toString(2));
console.log(typeof num.toString(2)); // string
- String(要转换的数据): 强制转换
console.log(String(null));
console.log(typeof String(null)); // string
console.log(String(undefined)); // undefined
console.log(String(arr1)); // 1,2,3
Boolean
-
Boolean(要转换的数据): 强制转换
-
js中的真真假假:
假: 空字符 0 NaN null undefined false
真: 除了以上6个,剩下都是真的
// string
console.log(Boolean('')); // false
console.log(Boolean(' ')); // true
console.log(Boolean('a')); // true
console.log(Boolean('0')); // true
// number
console.log(Boolean(0)); // false
console.log(Boolean(10)); // true
console.log(Boolean(-1)); // true
console.log(Boolean(0.25)); // true
console.log(Boolean(NaN)); // false
// null与undefined
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
// 复杂
var obj = {
};
console.log(obj);
console.log(Boolean(obj)); // true
var arr = [];
console.log(arr);
console.log(Boolean(arr)); // true
function a(){
console.log(1);
}
console.log(Boolean(a));
十一、运算符
1、分类
运算符 | 语法 |
---|---|
算术运算符 | + - * / %(取余) ++ – |
赋值运算符 | = += -= *= /= %= |
比较运算符 | > >= < <= = =(双等) = = =(恒等\全等) !=(不等) !==(不全等) |
逻辑运算符 | &&(与) |
三目运算符 | 三元, 判断的条件 ? 条件成立时, 执行的代码 : 条件不成立时, 执行的代码 |
算术运算符
-
+: 计算中,如果有一边为string, 那么做拼接; 其他数据类型, 尽可能的用Number转换后在做计算
-
- * / %: 尽可能的使用Number转换后在做计算
-
复杂数据类型在做计算的时候, 先使用toString方法转换成字符串之后在做计算
console.log('abc' + '123'); // abc123
console.log('abc' + 123); // abc123
console.log(123 + true); // 123 + 1 124
console.log(123 + null); // 123 + 0 123
console.log(null + undefined); // 0 + NaN NaN
console.log('123' + {
}); // 123[object Object]
console.log(123 + [1,2,3]); // 123 + '1,2,3' '1231,2,3'
console.log(123 + []); // 123
// - * / %: 尽可能的使用Number转换后在做计算
// -:
console.log('abc' - '123'); // NaN - 123 NaN
console.log(123 - true); // 122
console.log(null - undefined); // NaN
console.log({
} - false); // NaN
console.log([] - null); // 0
console.log(true - []); // 1
// *:
console.log('abc' * null); // NaN
console.log(123 * undefined); // NaN
console.log(true * false); // 0
console.log({
} * '123'); // NaN * 123 NaN
console.log(['2'] * true); // 2
console.log(['2', '3'] * false); // NaN
// /:
console.log('123' / false); // 123 / 0 Infinity
console.log('-123' / null); // -Infinity
console.log(null / undefined); // NaN
console.log(true / [1]); // 1
// %: 取余: 余数(除不尽剩下的那个数)
console.log(10 % 3); // 1
console.log(10 % 2); // 0
console.log(true % false); // 1 % 0 NaN
console.log(null % true); // 0 % 1 0
console.log([5] % '2') // 5 % 2 1
++与–
-
++(在自身基础上+1) --(在自身基础上-1)
-
++/–在前: 先自加/减再运算(赋值/输出)
-
++/–在后: 先做运算(赋值或输出), 在做自加/减
var num = 10;
// num++;
// num = num + 1;
// num = num - 1;
// num--;
// ++num;
console.log(num);
// ++/--在前: 先自加/减再运算(赋值/输出)
var m = ++num; // ++num --> 11
console.log(m); // 11
console.log(num); // 11
console.log(++num); // 11
console.log(num); // 11
// ++/--在后: 先做赋值或输出, 在做自加/减
var m = num++;
console.log(m); // m = num; m = 10; num++; num-->11
console.log(num); // 11
console.log(num++);// 输出num-->10 num++; num--->11
console.log(num); // 11
console.log(--num); // 10
console.log(num); // 10
console.log(num--); // 10
console.log(num); // 9
赋值运算符: =(赋值) += -= *= /= %=
var num = 10;
// +=:
var num1 = 10;
num += 30;
// num = num + 30;
console.log(num);
// -=:
var num2 = 10;
num2 -= 2;
console.log(num2); // 8
// *=:
var num3 = 10;
num3 *= 10;
console.log(num3); // 100
// /=:
var num4 = 20;
num4 /= 2;
console.log(num4); // 10
// %=:
var num5 = 10;
num5 %= 2;
console.log(num5); // 0
var n = 30;
n += 'a';
// n = n + 'a';
console.log(n); // 30a
var m = true;
m /= 1;
console.log(m); // 1
比较运算符
-
< <= > >= == === != !==
-
返回结果是个布尔值, 比较的判断成立返回true 不成立返回false
-
字符串比较中, 从左到右依次比较每个字符的ASCII值, 如果有一位已经比较出来大小,那就结束比较
-
==: 双等: 只比较值
===: 三等\全等\恒等: 不仅比较值,还比较数据类型
-
!=: 只比较值
!==: 不仅比较值,还比较数据类型
// 返回结果是个布尔值
// 比较的判断成立返回true 不成立返回false
console.log(1 > 2); // false
console.log(2 < 3); // true
console.log('1' < '2'); // true 49 < 50
console.log('10000' < '2'); // true
// 字符串比较中, 从左到右依次比较每个字符的ASCII值, 如果有一位已经比较出来大小,那就结束比较
// 0 ----> 48
// A ----> 65
// a ----> 97
console.log('a' > 'A'); // 97 > 65 true
console.log('22221' < '2'); // false
console.log(true > false); // 1 > 0
console.log('a' > undefined); // false NaN > NaN
console.log('a' < undefined); // false
console.log('a' < 'undefined'); // true
console.log({
} > []); // '[object Object]' > '' true
console.log(1 >= 1); // 1 > 1 或 1 == 1 true
// ==: 双等: 只比较值
// ===: 三等\全等\恒等: 不仅比较值,还比较数据类型
console.log('1' == 1); // true
console.log('1' === 1); // false
// !=: 只比较值
// !==: 不仅比较值,还比较数据类型
console.log('1' != 1); // false
console.log('1' !== 1); // true
逻辑运算符
-
&&(与): 左右两边各为一个条件, 如果两边均为true, 返回true, 如果有一边为false则返回false
-
||(或): 左右两边各为一个条件,如果有一个条件为true, 返回true, 如果两个都是false, 会false
-
!(非\取反): 布尔, Boolean, true–>取反—> false
console.log(3 > 2 > 1); // false
console.log(3 > 2 && 2 > 1); // true && true true
console.log(3 < 2 && 2 > 1); // false && true false
console.log(3 > 2 || 2 > 1); // true
console.log(3 < 2 || 2 > 1); // false || true true
console.log(3 < 2 || 2 < 1); // false || false false
// js为假: false '' null undefined 0 NaN
console.log(!''); // true
console.log(!' '); // false
console.log(!0); // true
console.log(!{
}); // false
console.log(!!false); // !false ---> true !true --- > false
三目运算符
- 条件 ? 条件成立, 执行的代码 : 条件不成立, 执行的代码
var num = 10;
// num > 10 ? alert(1) : alert(2);
var a;
// num < 30 ? a = 30 : a = 10;
// console.log(a); // 30
a = num < 30 ? 30 : 20;
console.log(a); // 30
2、隐式转换规则
-
+: 计算中,如果有一边为string, 那么做拼接; 其他数据类型, 尽可能的用Number转换后在做计算
-
- * / %: 尽可能的使用Number转换后在做计算
-
复杂数据类型在做计算的时候, 先使用toString方法转换成字符串之后在做计算
十二、条件语句
1、流程控制语句分类: 控制代码的执行顺序的语句
流程控制语句分类 | 控制代码的执行顺序的语句 |
---|---|
顺序结构 | 按照顺序执行代码 |
条件选择结构(分支) | if\ if else\switch |
循环结构 | 将代码执行特定次数的语句, for\while\do while |
其他语句 | break\continue |
2、条件选择结构
-
if(条件) { // 条件为真(成立)时, 执行的代码}
if else: if(条件) { // 条件为真(成立)时, 执行的代码} else { // 条件为假(不成立)时, 所执行的代码 }
-
if else多层嵌套
if(条件1){
// 条件1成立的时候,执行的代码
} else if(条件2){
// 条件2成立的时候, 执行的代码
} else {
// 以上条件都不成立的时候, 所执行的代码
}
var m = 0;
// 适用于单一代码代码
// m > 60 ? alert('合格') : alert('不合格');
if(m > 60){
console.log('你可太优秀了');
alert('合格');
} else{
// 条件不成立
console.log('我们继续加油');
alert('不合格');
}
// 60及以下: 不合格 61 - 80: 中等 81 - 90: 良好 91 - 100: 优秀
var mark = 73;
if(mark <= 60){
console.log('不合格, 继续加油');
} else if(mark > 60 && mark <= 80){
console.log('中等, 在拼一下');
} else if(mark > 80 && mark <= 90){
console.log('良好, 在努力一下你就是优秀了');
} else {
console.log('非常优秀, 继续保持');
}
- 注意:if后的{}可以省略的, 如果省略了, 只能控制后面的第一条语句
// if后的{}可以省略的, 如果省略了, 只能控制后面的第一条语句
var a = 10;
if(a > 10){
console.log(1);
console.log(2);
}
if(a > 10)
console.log(1);
console.log(2);
案例:复选框的反选
<input type="checkbox" name="" id="inp" >
<button id="btn">反选</button>
<script>
// 点击btn, 将input从选中变成不选中, 从不选中变成选中
// 1. 获取元素
var btn = document.getElementById('btn');
var inp = document.getElementById('inp');
// console.log(inp, btn);
// 2. 添加事件
btn.onclick = function(){
// 3. 具体要做的事情
console.log(inp.checked); // 选中为true, 不选中为false
// true ----> false false ---> true
inp.checked = !inp.checked;
if(inp.checked){
inp.checked = false;
} else {
inp.checked = true;
}
}
</script>
3、switch
-
适用于条件结果比较明确并且单一的时候
-
语法:
switch(要判断的数据/ 条件){
case 结果1:
符合结果1时, 所执行的代码;
break; case 结果2:
符合结果2时, 所执行的代码;
break;
…(可以有很多个结果) default:
以上结果都不符合的时候, 所执行的代码;
break;
} -
注意事项: break: 是防止穿透; 不加break, case匹配到一个之后, 后面的结果都不会进行匹配, 直接执行;
/*
90以上: A 80以上: B 70以上: C 其他: D
*/
var core = 78;
// 找出如何是单一条件
var p = parseInt(core / 10);
switch (p) {
case 10:
console.log('A+');
break;
case 9:
console.log('A');
break;
case 8:
console.log('B');
break;
case 7:
console.log('C');
break;
default:
console.log('D');
break;
}
十三、获取元素的方式
Id获取 | document.getElementById(‘id’) |
---|---|
标签名获取 | document.getElementsByTagName(‘标签名’); |
类名获取 | document.getElementsByClassName(‘类名’); |
1、标签名获取
- document.getElementsByTagName(‘标签名’); 获取文档中的所有的标签
- 父元素.getElementsByTagName(‘标签名’); 获取对应的父元素中的标签
标签名不区分大小写
2、类名获取
-
document.getElementsByClassName(‘类名’); 获取文档中的所有此类名的标签
-
父元素.getElementsByClassName(‘类名’); 获取对应的父元素中的类名标签
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
var uls = document.getElementsByTagName('ul');
console.log(uls[1]);
var lis2 = uls[1].getElementsByTagName('li');
console.log(lis2);
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 第一个ul中的类名为box的元素
var box1 = uls[0].getElementsByClassName('box');
console.log(box1);
-
注意: 返回一个集合
-
集合: 类数组, 有索引有元素, 但是不能使用数组的方法
-
通过下标获取到对应的下标的元素
3、tagName/className与id获取元素的区别:
tagName/className获取元素 | id获取元素 |
---|---|
可以是document也可以是父元素; | id只能通过document获取 |
获取到的是一个集合 | id直接获取到元素 |
需要通过下标取出元素后再操作 | id可以直接操作 |
获取的元素具有动态性, 先获取, 后添加, 元素也可以找得到 | d不可以 |
- 特殊点: className在ie8以上才支持
var box = document.getElementById('box');
var lis = document.getElementsByTagName('li');
console.log(box, lis);
var ul = document.getElementsByTagName('ul')[0];
ul.innerHTML += '<li id="box">12345</li>';
console.log(lis);
console.log(box);
var four = document.getElementsByClassName('four'); // ie8报错
console.log(four);
十四、循环
1、for
-
语法:
for(表达语句一; 表达语句二; 表达语句三){
// 每次循环要执行的代码
}
for(1 初始化循环变量; 2 循环结束的条件; 4 更新循环变量){
// 3 循环体
}
-
执行顺序:
-
初始化循环变量: var i = 0;
-
循环判断: i < 5 ? 是符合条件, 执行第三步: 不符合条件, 终止循环
-
循环体执行
-
更新循环变量: i++;
-
回到第二步
-
-
注意: 必须要有一个可以让循环结束的条件, 否则就会造成死循环
for(var i = 0; i < 5; i++){
console.log(i);
}
2、for 变种
-
初始化变量: var i = 0;
for(;2.循环结束的条件;){
// 3.循环体
// 4.变量更新
}
- 注意: 两个分号不能省略
var sum = 0;
var i = 1;
for(; i <= 100;){
sum += i;
i++;
}
console.log(sum);