javascript是基于对象和事件驱动的解释性脚本语言;
特性
基于对象可以运用自己创建的对象事件驱动javascript可以直接对用户或者客户端的操作进行响应解释性相对编译性来说, 浏览器可以直接识别和解析代码跨平台性只要是浏览器就可以运行js组成部分
ECMAScript: 用来指定javascript语法标准, 核心
DOM: Document Object Model 文档对象模型
BOM: Browser Object Model 浏览器对象模型
alert(要弹出的内容): 警告框，让用户看到提示, 阻断页面
console.log(要输出的内容): 输出在控制台, 右键—> 检查—>console
用来存储数据的容器
先声明后赋值
单个声明: 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);遵循驼峰命名法, 见名知意; userLoginName, userPassword
变量由字母、数字、_、$组成, 数字不能开头
不能使用关键字和保留字
不能重复, 后面的会覆盖前面的
作用： 等待窗口(页面及资源)加载完成后在执行其中的代码
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); } }标签.innerText: 获取得到纯文本内容, 不识别标签
标签.innerHTML: 获取得到文本内容及标签(带标签的文本内容)
var box = document.getElementById('box'); var box1 = document.getElementById('box1'); console.log(box, box1); console.log(box.innerText); console.log(box1.innerHTML);标签.innerText = 值; 设置时，会覆盖标签中原有的内容, 不识别标签
标签.innerHTML = 值; 设置时, 会覆盖标签中原有的内容, 可以识别标签
box.innerText = '这是新更改的内容9'; box.innerText = '<i>这是第二次更新的内容8<i>'; box1.innerHTML = '这是新更改的内容7'; box1.innerHTML = '<strong>这是新更改的内容6</strong>';元素.属性名
元素[“属性名”] 元素[变量];
元素.属性名 = “属性值”;
元素[“属性名”] = “属性值”;
元素[变量] = “属性值”;
注意: 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'; }注意:
只能操作行内样式
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';// 无连字符，遵循驼峰命名法 }typeof 要检验的数据
typeof(要检验的数据)
typeof 检验结果:
返回自身类型: number\string\boolean\undefined\function
返回object: null\object\array
存储的数据类型和存储位置
基础: 存储数据类型比较单一, 存储于栈中
复杂: 存储数据类型比较多样化, 存储于堆中
复杂数据类型用=赋值，改变的是地址指针
整型: 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字符串的长度: 字符串.length
获取到指定下标的字符:
字符串.charAt(下标);
字符串[下标]: ie8以上可以使用
下标: 从左往右、从0开始的数字
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 }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概念: 对象, 对象是由方法和属性组成的, 一切皆对象, 所有的一切都是对象
例子: 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]);//183cmarray: 数组, 存放数据的容器, 用来存放不定数量、不定类型的数据值的有序集合;
索引: 每一个值的下标
元素: 数组中的每一项
创建: 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); // objectfunction: 函数, 存放一段代码, 在有需要的时候调用
函数使用:
声明函数: function 函数名(){ // 要执行的代码块 }
调用: 函数名();
注意: 只声明不调用函数不起作用
函数名的命名规则遵循变量的命名规则
function today(){ console.log('啊，要学习'); } today();//调用执行函数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'])); // NaNparseInt(要转换的数据, 进制)
从左往右依次转换, 遇到不能转换的就停止, 返回整型(整数); 如果第一个字符就不能转换, 返回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')); // NaNisNaN(要判断的数据): 判断数据 是不是 不是一个数字
不是一个数字: 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数据对象.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,3Boolean(要转换的数据): 强制转换
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));+: 计算中，如果有一边为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< <= > >= == === != !==
返回结果是个布尔值, 比较的判断成立返回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+: 计算中，如果有一边为string, 那么做拼接; 其他数据类型, 尽可能的用Number转换后在做计算
- * / %: 尽可能的使用Number转换后在做计算
复杂数据类型在做计算的时候, 先使用toString方法转换成字符串之后在做计算
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>适用于条件结果比较明确并且单一的时候
语法:
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; } 标签名不区分大小写
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);注意： 返回一个集合
集合: 类数组, 有索引有元素, 但是不能使用数组的方法
通过下标获取到对应的下标的元素
语法：
for(表达语句一; 表达语句二; 表达语句三){
// 每次循环要执行的代码
}
for(1 初始化循环变量; 2 循环结束的条件; 4 更新循环变量){
// 3 循环体
}
执行顺序：
初始化循环变量: var i = 0;
循环判断: i < 5 ? 是符合条件, 执行第三步: 不符合条件, 终止循环
循环体执行
更新循环变量: i++;
回到第二步
注意: 必须要有一个可以让循环结束的条件, 否则就会造成死循环
for(var i = 0; i < 5; i++){ console.log(i); }初始化变量: var i = 0;
for(;2.循环结束的条件;){
// 3.循环体
// 4.变量更新
}
注意: 两个分号不能省略 var sum = 0; var i = 1; for(; i <= 100;){ sum += i; i++; } console.log(sum);