槽点极多的JAVASCRIPT
原生JS && JQuery && BootStrap
原生 js
js 的三种插入方式
- 行间式 : 直接在
html标签内写入<body id="body" onload="body.style.backgroundColor='red'">
- 内联式：在
script标签中写入<script type="text/javascript"> body.style.backgroundColor='orange' </script>
- 外联式：在
script标签的src属性中引入 外部js文件<script type="text/javascript" src="./js/01.js"></script>
三种方式不存在优先级，按照代码的执行顺序，谁后导入谁生效
注释
// 单行注释
/ ** / 多行注释
三种弹出框
- 普通弹出框 alert()
- 确认框 confirm()
- 输入框 prompt
变量的声明
<script> var a; // 未赋值时 a 默认为 undefined a = 100 // 定义过的变量无需再次定义直接可以赋值 </script>ES5变量的定义
ES5标准下没有块级作用域，只有方法可以产生实际的局部作用域
<script> //无块级作用域的局部变量 var a = 10; //全局变量 b = 20; //验证 : (function () { var x = 10; y = 20; })() alert(x) //报错,x只能在局部作用域中使用 alert(y); //正常使用 //块级作用域 { var n = 10; // 无视块级作用域 m = 20; // 全局变量,更无视块级作用域 } alert(n) // 可以 alert(m) // 可以 </script>ES6变量的定义
<script> //有块级作用域的局部变量 let aa = 100; //有块级作用域的常量 //注意 : 常量值不允许更改 const bb = 200; //验证 : { let xx = 100; const yy = 200; } alert(xx); // 无法访问 alert(yy); // 无法访问 //函数产生的局部作用域同该情况 </script>数据类型
number 数字类型
js中没有intfloat类型，统一为number类型<script> var a = 10; console.log(typeof a == 'number'); </script>string 字符串类型
<script> var a = '字符串'; </script>boolean 布尔类型
js中 布尔类型分为truefalse两种
0undefinednull“”NaN均为false其余为trueundefined 未定义类型
未初始化的变量类型默认为
undefined类型<script> var b; console.log(b, typeof b); var c = undefined; console.log(c, typeof c); </script>function 函数类型
<script> var m = function () {}; </script>object 对象类型
<script> var obj = {}; obj = new Object(); console.log(obj, typeof obj); console.log(obj instanceof Object); </script>特殊对象类型
null空对象<script> var o = null; console.log(o == null); </script>Array 数组对象
<script> o = new Array(1, 2, 3, 4, 5); </script>Data 时间对象
<script> o = new Date(); </script>RegExp 正则对象
<script> o = new RegExp(); </script>类型转换
显性转换
<script> // 1. 数字,布尔转化为 => 字符串 var a = 10; var b = true; var c = new String(a); console.log(c, typeof c); // '10', object var c = String(a); console.log(c, typeof c); // '10', string c = String(b); console.log(c, typeof c); // 'true', string c = a.toString(); console.log(c, typeof c); // '10', string c = b.toString(); console.log(c, typeof c); // 'true', string </script><script> // 2. 布尔,字符串转化为数字 var aa = true; var bb = '10'; var cc = Number(aa); console.log(cc, typeof cc); // 1 number cc = Number(bb); console.log(cc, typeof cc); // 10 number cc = + aa; console.log(cc, typeof cc); // 1 number cc = + bb; console.log(cc, typeof cc); // 10 number // 针对字符串 cc = parseFloat('3.14.15.16abc'); console.log(cc, typeof cc); // 3.14 cc = parseInt('10.35abc'); // 10 console.log(cc, typeof cc); // 字符串以非数字开头,结果为NaN // NaN(not a number)特点: // 1.非数字类型 // 2.不与任何数相等,包含自己 // 3.通过isNaN()进行判断 </script>隐性转换（自动转换）
<script> 5 + null // 5 "5" + null // "5null" "5" + 1 // "51" "5" - 1 // 4 "" + ? // "?" </script>三目运算符
结果 = 条件表达式 ？ 结果1 ：结果2
<script> var num = if 20 > 30 ? 1 : 0 </script>ES6语法解构赋值
数组的解构赋值
<script> let [a, b, c] = [1, 2, 3] // a=1,b=2,c=3 let [a, ...b] = [1, 2, 3] // a=1,b=[2,3] </script>对象的解构赋值
<scrip> let {key: a} = {key: 10} // a=10 </scrip>字符串解构赋值
<script> let [a,b,c] = 'xyz' // a='x',b='y',c='z' </script>流程控制
if 语句
<script> if (表达式1) { code1; } else if (表达式2) { code2; } else { code3; } </script>switch 语句
<script> switch (表达式) { case 值1: 代码块1; break; case 值2: 代码块2; break; default: 代码块3; } // 1.表达式可以为 整数表达式 或 字符串表达式 // 2.值可以为 整数 或 字符串 // 3.break可以省略 // 4.default为默认代码块，需要出现在所有case最下方，在所有case均未被匹配时执行 </script>for 循环
<script> for (循环变量①; 条件表达式②; 循环变量增量③) { 代码块④; } for (var i = 0; i < 5; i++) { '循环体代码' } // 1.循环变量可以在外、在内声明 // 2.执行逻辑 ① ②④③ ... ②④③ ②，入口为①，出口为②，②④③个数为[0, n] </script>while 循环
<script> while (条件表达式) { 代码块; } </script>函数初级
函数的定义
function 函数名 (参数列表) { 函数体; } var 函数名 = function (参数列表) { 函数体; }匿名函数
function (参数列表) { 函数体; } //匿名函数需要自调用 (function (参数列表) { 函数体; })(参数列表);
BOM操作
窗口操作
// 新tag打开目标地址
open("http://www.yahoo.com");
// 自身tag转跳目标地址
open("http://www.yahoo.com", '_self');
// 自定义窗口打开目标地址
open("http://www.yahoo.com", '_blank', 'width=300, height=300');
历史记录 history
// 历史后退
history.back();
// 历史前进
history.forward()
导航器 navigator
// 拥有浏览器信息的字符串
navigator.userAgent;
地址信息
// 协议
location.protocol
// 服务器
location.hostname
// 端口号
location.port
// 参数拼接
location.search
DOM操作
标签关系
获取父级标签 : sub.parentElement
获取上一个兄弟标签: sub.previousElementSibling
获取下一个兄弟标签: sub2.nextElementSibling
获取所有子标签: sup.children
获取第一个子标签: sup.firstElementChild
<div class="sup">
<div class="sub1"></div>
<div class="sub2"></div>
<div class="sub3"></div>
</div>
<script>
var sub2 = document.querySelector('.sub2');
// 父级标签
console.log(sub2.parentElement);
// 上一个标签
console.log(sub2.previousElementSibling);
// 下一个标签
console.log(sub2.nextElementSibling);
var sup = document.querySelector('.sup');
// 所有子标签
console.log(sup.children);
// 第一个子标签
console.log(sup.firstElementChild);
// 最后一个子标签
console.log(sup.lastElementChild);
</script>
操作页面标签
// 创建一个div标签
var div = document.createElement("div");
// 设置属性样式
div.className='box';
// 添加到body末尾，返回自身
div = body.appendChild(div);
// 插入到body中box标签前，返回自身
div = body.insertBefore(div, box);
// 替换掉body中box标签，返回box
box = body.replaceChild(div, box);
// 在body中移除div，返回自身
div = body.removeChild(div);
获得标签对象
// 1.通过id名获取唯一满足条件的页面元素
document.getElementById('id名');
// 该方法只能由document调用
// 2、通过class名获取所有满足条件的页面元素
document.getElementsByClassName('class名');
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])
// 3.通过tag名获取所有满足条件的页面元素
document.getElementsByTagName('tag名');
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])
操作页面
- innerText：普通标签内容（自身文本与所有子标签文本）(不被解析)
- innerHTML：包含标签在内的内容（自身文本及子标签的所有）(被解析)
- value：表单标签的内容
- outerHTML：包含自身标签在内的内容（自身标签及往下的所有）
操作页面样式
div.style.backgroundColor = 'red';
结合css操作页面样式
页面元素对象.className = ""; // 清除类名
页面元素对象.className = "类名"; // 设置类名
页面元素对象.className += " 类名"; // 添加类名
一次性定时器
setTimeout(函数, 毫秒数, 函数所需参数(可以省略));
setTimeout(function (data) {
console.log(data);
}, 1000, "数据");
持续性定时器
setInterval(函数, 毫秒数, 函数所需参数(可以省略));
setInterval(function() {
console.log("呵呵");
}, 1000);
定时器清除
- 持续性与一次性定时器通常都应该有清除定时器操作
- 清除定时器操作可以混用
clearTimeout()|clearInterval()括号参数为定时器编号- 定时器的返回值就是定时器编号,就是普普通通的数字类型
- 允许重复清除
- 允许清除不存在的定时器编号
做个定时器
var timer = setInterval(function() {
console.log("呵呵");
}, 1000);
查看定时器的返回值是什么
console.log(timer);// 打印1 ,则返回值就是创建过的定时器的编号
点击页面清除定时器
document.onclick = function () {
console.log("定时器清除了");
clearInterval(timer);
// clearTimeout(timer);
};
清除所有定时器
如果上方创建过n个定时器,那么timeout值为n+1
var timeout = setTimeout(function(){}, 1);
for (var i = 0; i < timeout; i++) {
// 循环将编号[0, n]所有定时器都清除一次
clearTimeout(i)
}
绑定事件
on 绑定事件
document.onclick = function() {
console.log("文档点击");
}
// on事件只能绑定一个方法，重复绑定保留最后一次绑定的方法
document.onclick = function() {
console.log("文档点击");
}
// 事件的移除
document.onclick = null;
非 on 事件绑定
addEventListener('事件名',回调函数,冒泡方式);
document.addEventListener('click', function() {
console.log("点击1");
})
document.addEventListener('click', function() {
console.log("点击2");
})
// 非on事件可以同时绑定多个方法，被绑定的方法依次被执行
// addEventListener第三个参数(true|false)决定冒泡的方式
function fn () {}
document.addEventListener('click', fn);
// 事件的移除
document.removeEventListener('click', fn);
事件的冒泡与默认事件
- 事件的冒泡：父子都具有点击事件，不处理的话，点击子级也会出发父级的点击事件
- 在子集绑定事件里设置
ev.stopPropagation();或ev.cancelBubble = true;
<body >
<div id="sup">
<div id="sub"></div>
</div>
</body>
<script>
var sub = document.querySelector('#sub');
sub.onclick = function (ev) {
// 方式一
ev.stopPropagation();
// 方式二
ev.cancelBubble = true;
console.log("sub click");
}
</script>
- 默认事件：取消默认的事件动作，如鼠标右键菜单
ev.preventDefault();或return false;
<body>
<div id="sup">
<div id="sub"></div>
</div>
</body>
<script>
var sub = document.querySelector('.sub');
sub.oncontextmenu = function (ev) {
// 方式一
ev.preventDefault();
// 方式二
return false;
console.log("sub menu click");
}
</script>
