槽点极多的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 中没有 int float 类型，统一为 number 类型
<script>
	var a = 10;
	console.log(typeof a == 'number');
</script>
string 字符串类型
<script>
	var a = '字符串';
</script>
boolean 布尔类型

js 中布尔类型分为 true false 两种

0 undefined null “” NaN 均为 false 其余为 true

undefined 未定义类型

未初始化的变量类型默认为 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>