pink旧版JS学习笔记

基础

JS基础 ECMAScript

• JS是解释型语言，一边运行一边执行，而不是先编译再执行

输入输出

• 输入 var name = prompt(‘请输入’);
• 输出 alert console.log();

声明

• var a=9, b= 9, c =9;
• var a = b = c = 9;相当于var a = 9; b = 9; c = 9;

数据类型

• 普通+特殊；1+‘undefine’=NaN
• typeof typeof null 是object
• 强转
  • 转为字符串：num.toString(); String(num); num+''隐式转换
  • 转为数组：parseInt(str); parseFloat(str); Number(str) ; ‘12’ - 0/‘123’-‘120’(显示数字类型的3)
    • JavaScript 没有单独的整数和浮点类型，只有 number 一种数值类型，统一用 64 位双精度浮点数（IEEE 754）存储。
  • Boolean(); false:‘’ 0 null undefined NaN
• 自增 ++num num++后置先返回原值再自增 e++ + ++e
• == 会进行类型强转 18 == ‘18’ true ===会判断数据类型18 === ‘18’ false
• && || !
  • 短路运算123&&456返回456 0&&123返回0 被短路的表达式不再进行计算比如num++
  • 123 || 456 返回123 0 ||456 || 返回456
  • && 比 || 优先级高

分支循环

• 分支 if-else switch 三元运算符 ？ ：

  switch (num) { // 匹配时是===，必须break否则输出所有值，直接跳到匹配的条件而不是顺序判断
  	case 值1:
  		执行;
  		break;
  	case 值2:
  		执行;
  		break;
  		...
  	default:
  		执行;
  }
  

• 循环for while do…while

数组

• 新建数组

  • var arr = new Array();
  • var arr = []; 数组可以放不同类型的元素var arr = [1,2,‘pink’,true]

• 修改数组

  • 增加元素

    • arr[arr.length] = 新增元素；JS可以访问尚未被定义的数组部分
    • arr.length = arr.length + 2；此时会新增两个undefined
    • 注意：JS中元素类型不确定，如果直接arr=‘字符串’，那么原来的数组会被覆盖掉，arr会变成一个字符串

  • 翻转数组

    arr = [2, 3, 5, 1, 4];
    var newArr = [];
    for (var i = arr.length - 1; i >= 0; i--) {
    	newArr[newArr.length] = arr[i];
    }
    return newArr;
    

  • 冒泡排序

    		arr = [2, 3, 5, 1, 4]
    		for (var i = 0; i < arr.length - 1; i++) { // 外层控制趟数n-1
    			for (var j = 0; j < arr.length - 1 - i ; j++) { // 内层每次都是从0开始的，遍历终点改变
    				if (arr[j] > arr[j + 1]) {
    					var temp = arr[j];
    					arr[j] = arr[j + 1];
    					arr[j + 1] = temp;
    				}
    			}
    		}
    

函数

• 函数结构

  function 函数名(参数) {}; // 函数名()
  var 变量名 = function() {}; // 变量名()
  

  • 如果传入的实参的个数多于形参的个数，那取前面的；如果少，那没传的就是undefined

• return只能返回一个值，返回的是最后一个值；可以通过数组返回多个值；如果函数没有return那么函数默认返回undefined

• arguments存储了传递的所有实参，当不确定有几个实参时使用；伪数组（length，索引，没有pop push）

  function fu() {
  	console.log(arguments);
  }
  fu(1,2,3);
  // arguments = [1, 2, 3]
  

作用域

• 全局变量和局部变量
  • 全局变量：全局声明(var num=10)/在函数内部没有声明直接赋值(num=9)
  • 函数实参arguments是局部变量
• 块级作用域是在ES6才有的{},也就是说之前只有在函数function内部的才是局部变量，其他都是全局变量；而在ES6后，{}内部的都是局部变量
• 作用域链，函数嵌套，内部函数可以访问外部函数的变量，链式查找是就近原则

预解析

• js 1预解析 把所有的var变量和function函数的声明提升到当前作用域的最前面，但是不提升赋值，不调用函数2代码执行

• 变量预解析

  console.log(num); // 报错
  
  console.log(num);
  num = 10; //undefined
  

• 函数预解析

  fn();
  function fn() {
  	console.log(22);
  } // 正常打印22
  
  fun();
  var fun = function(){
  	console.log(22);
  } //报错，声明时fun属于是变量
  

• 案例

  var a = 18;
  f1();
  function f1() {
  	 var b = 9;
  	 console.log(a);
  	 console.log(b);
  	 var a = '123';
  }
  -------------------------
  预解析变为：
  var a;
  function f1() {
  	 var b;
  	 var a;
  	 b = 9;
  	 console.log(a);
  	 console.log(b);
  	 a = '123';
  }
  a = 18;
  f1();
  执行结果：undefined 9
  

  f1();
  console.log(c);
  console.log(b);
  console.log(a);
  function f1() {
  	var a = b = c = 9;
  	console.log(a);
  	console.log(b);
  	console.log(c);
  }
  ----------------------------
  预解析变为：
  function f1() {
  	var a;
  	a = 9;
  	b = 9;
  	c = 9; //b c是全局变量
  	console.log(a);
  	console.log(b);
  	console.log(c);
  }
  f1();
  console.log(c);
  console.log(b);
  console.log(a);
  执行结果： 9 9 9 9 9 报错(is not defined)
  

对象object

• 属性+方法

• 创建对象

  • 字面量 var obj = {uname : ‘xiaoyi’ , age : 18};

  • new：var obj = new Object();

  • 构造函数：一次创建多个对象，封装公共的属性和方法

    function 构造函数名() {
    	this.属性 = 值；
    	this.方法 = function () {}
    }
    new 构造函数名();
    
    function Star( uname, age, sex) { // 构造函数名首字母必须大写
    	this.name = uname;
    	this.age = age;
    	this.sex = sex;
    }
    new Star('刘德华', 18, '男'); // 1在内存中创建一个空的对象2this指向这个空对象3给空对象添加属性和方法4返回
    

• 调用对象

  • 属性：obj.uname obj[‘age’] (记得引号)
  • 方法：obj.fun();

• 遍历对象

  for (var k in obj) { // k key
  	console.log(k);
  	console.log(obj[k]); // 无引号，因为是变量
  }
  

内置对象 Math 日期 数组 字符串

• 自定义对象、内置对象、浏览器对象

• MDN 查功能、参数、返回值

• Math

  • Math.max()

  • Math.abs()

  • Math.floor() 向下取整 console.log(1.2) //1

  • Math.ceil() 向上取整

  • Math.round() 四舍五入Math.round(-1.5) // -1 不是-2 Math.round(-1.6) //-2

  • Math.random() 返回随机小数[0,1)

    • 返回随机整数可以查阅MDN

      function getRandom(min, max) { // [min,max]之间的随机整数，包括min max
      	return Math.floor(Math.random * (max - min + 1)) + min;
      }
      

• Date 是一个构造函数 new

  • var date = new Date(); 无参数，返回系统的当前时间

  • var date = new Date(‘2019-10-01 8:8:8’); 返回括号里的时间

  • 日期格式化

    • date.getFullYear() date.getMonth() + 1（0-11所以要+1） date.getDate() 年月日 date.getDay() 星期几（周日返回0，可以用一个数组对应下标） date.getHours() date.getMinutes() date.getSeconds() s=s>10?s:‘0’+s补零
    • console.log(‘今天是：’ + year + ‘年’)；

  • 计算机起始时间从1970年1月1日开始

    获得总的毫秒数（时间戳）因为永远不会重复，只会越变越大
    var date = new Date();
    console.log(date.valueOf());
    console.log(date.getTime()); // 两个函数都是返回当前时间到1970.1.1的毫秒数
    
    var date1 = +new Date();
    console.log(date1); // 同样返回毫秒数，最常用
    
    console.log(Date.now()); // H5新增的方法
    

  • 倒计时案例

    // 用时间戳相减，再转换为天 时 分 秒
    // time的输入格式为'2019-10-01 8:8:8'
    function countDown (time) {
    	var nowTime = +new Date();
    	var inputTime = +new Date(time);
    	times = (inputTime - nowTime) / 1000; // 1s = 1000 ms,这里得到剩余的秒数
    	var d = parseInt(times / 60 / 60 / 24); // 天
    	var h = parseInt(times / 60 / 60 % 24); // 时
    	var m = parseInt(times / 60 % 60); // 分
    	var s = parseInt(times % 60); // 秒
    	console.log('剩余' + d + '天' + h + '时' + m + '分' + s + '秒');
    }
    

• 数组

  • 定义

    var arr = new Array(2); // 创建了一个长度为2的空数组empty×2
    var arr1 = new Array(2, 3); // 创建了[2,3]
    

  • 判断是否为数组

    1.
    var arr = [];
    var obj = {};
    console.log(arr instanceof Array); // 这里的of是小写
    console.log(obj instanceof Array);
    2.H5新增方法
    console.log(Array.isArray(arr)); // true
    console.log(Array.isArray(1,2,3)); // false
    

  • 添加删除元素

    var arr = [1, 2, 3];
    arr.push(4); // [1, 2, 3, 4] 在后面添加，返回新的数组长度
    
    arr.unshift(0); // [0, 1, 2, 3, 4] 在前面添加，返回新的数组长度
    
    arr.pop(); // [0, 1, 2, 3] 删除最后一个元素，返回删除的元素
    
    arr.shift(); // [1, 2, 3] 删除第一个元素，返回删除的元素
    
    // 如果想要原地删除可以倒序遍历
    function removeGreaterThan(arr, target) {
      let i = 0;
      while (i < arr.length) {
        if (arr[i] > target) {
          arr.splice(i, 1);
        } else {
          i++; // 只有不删除时才递增索引
        }
      }
      return arr;
    }
    // 更简洁的方式
    const arr = [1, 3, 5, 7, 2];
    const newArr = arr.filter(x => x <= 3);
    console.log(newArr); // [1, 3, 2]（原数组未被修改）
    

  • 翻转和排序

    arr.reverse();
    arr.sort(); // 默认升序，默认是1，100，3，30存在问题
    arr.sort(function(a,b) {
    	return a - b; // 若要降序则b-a
    })
    

  • 索引

    var arr = ['pink', 'xiaoyi', 'shenxinghui', 'xiayizhou', 'xiaoyi'];
    console.log(arr.indexOf('xiaoyi')); // 1,返回第一个的索引号，找不到就-1
    console.log(arr.lastIndexOf('xiaoyi')); // 4,倒着找，但是索引号是不会变的
    

  • 数组去重

    // 新数组。遍历旧数组，有就不放了，没有就放进去arr原数组，newArr去重后的数组
    function unique(arr){
    	var newArr = [];
    	for (var i = 0; i < arr.length; i++) {
    		if(newArr.indexOf(arr[i] === -1)) {
    			newArr.push(arr[i]);
    		}
    	}
    	return newArr;
    }
    

  • 数组转换为字符串

    1.
    arr.toString();
    2.join分隔符
    arr.join(); // 1,2,3
    arr.join('&'); // 1&2&3
    

  • 数组还有很多其他的常用函数，比如splice

• 字符串

  • 基本包装类型： 把简单数据类型包装为复杂数据类型。之后就可以使用复杂数据类型的属性和方法

  • 字符串不可变，每次都是重新开辟一个内存空间并更改指针。不要大量拼接和重新赋值。

  • 根据字符返回位置

    str.indexOf('春');
    str.indexOf('纯', 3); // 从索引为3的位置开始查找
    
    // 返回所有的位置以及次数
    var str = 'abcoefoxyozz';
    var count  = 0;
    var index = str.indexOf('o');
    while (index !== -1) {
    	console.log(index);
    	count++;
    	index = str.indexOf('o', index + 1);
    }
    console.log(count);
    

  • 根据位置返回字符

    var str = 'Andy';
    console.log(str.charAt(3)); // y
    console.log(str.charCodeAt(0)); // 65,返回的是ASCII码，可以用于判断用户按了哪个键，可以用于游戏开发
    console.log(str[3]); // y H5新增
    

  • 统计一个字符串中出现次数最多的字符，并统计其次数

    // 哈希,我自己想的办法，似乎比较冗余。但是思路是没错的
    var times = {};
    var str = 'abcoefoxyozz';
    for (var i = 0; i < str.length; i++) {
    	if (str[i] in times) {  // pink老师写的是if(times[str[i]])
    		times[str[i]]++;
    	} else {
    		times[str[i]] = 1;
    	}
    }
    var timesMax = 0;
    var timesMaxChar = str[0];
    for (var key in times) {
    	if (times[key] > timesMax) {
    		timesMaxChar = key;
    		timesMax = times[key];
    	}
    }
    console.log(timesMaxChar, timesMax);
    

  • 字符串操作方法

    str.substr(a,b); // 从第a个索引开始取b个字符
    
    str.replace('a', 'b'); // 把'a'替换为'b'，只替换第一个
    // 替换全部
    while (str.indexOf('a') !== -1) {
    	str = str.replace('a', 'b');
    }
    
    // 字符串转换为数组
    str.split(''); // ''内放置隔开用的字符
    

• 简单数据类型和复杂数据类型

  • 简单数据类型放在栈中；复杂数据类型内容放在堆中，地址放在栈中。（js没有堆和栈的概念，仅作为辅助了解）
  • 简单数据类型传参时，只传递结果，不影响原来的数；复杂数据类型传参数时，传递地址，修改后会改变原来的内容

Web APIs

• 主要学习页面交互效果，DOM BOM

DOM

DOM树

• 一个页面就是一个文档document; 页面中的所有标签都是元素element; 网页中的所有内容都是节点node。DOM把所有内容都看作对象

获取元素

• getElementById() conosle.dir() 返回这个对象的所有具体内容

• 根据标签名获取getElementsByTagName(‘li’) 以伪数组的形式存储，可以遍历

  var ol = document.getElementById('ol');
  
  var lis = ol.getElementsByTagName('li'); // 父元素必须是指定的单个元素
  

• 根据类名获取document.getElementsByClassName()

• 选择器

  document.querySelector('.box');  //只返回第一个，类
  document.querySelector('#nav');  // id
  document.querySelector('li'); // 标签
  
  document.querySelectorAll('.box'); // 返回所有
  

• 获取body和html标签

  document.body;
  document.documentElement;
  

事件基础

• 触发-响应的一种机制；

• 事件三要素：事件源，事件类型，事件处理程序

• 点击按钮，弹出对话框

  var btn = document.getElementById('btn');  
  btn.onclick = function() {
  	alert('点秋香')；
  }
  

• 步骤：

  1.获取事件源
  2.绑定事件 注册事件
  3.添加事件处理程序
  // 点击div 控制台弹出 我被选中了
  var div = document.querySelector('div'); // 获取事件源
  div.onclick = function() {   // 绑定事件
  	console.log('我被选中了');  // 添加事件处理程序
  }
  

操作元素

• 改变元素的内容

  // innerHTML和innerText都可以改变元素内容
  // innerText
  // 点击button div 里面的内容发生变化
  // 获取事件源
  var btn = document.querySelector('button');
  var div = document.querySelector('div');
  // 注册事件，添加事件处理程序
  btn.onclick = function () {
  	div.innerText = '2025-04-29';
  }
  
  // 实现不需要点击、刷新页面就显示时间，元素可以不添加事件
  var p = document.querySelector('p');
  p.innerText = '2025-04-29';
  
  // innerHTML
  p.innerHTML = '<strong>这部分加粗</strong>，这部分正常';  // 可以实现加粗。使用最多
  p.innerText = '<strong>这部分加粗</strong>，这部分正常';  // 直接输出<strong>这部分加粗</strong>，这部分正常，不做任何处理。不能识别HTML标签
  
  // 这两个属性可读写！！！这里上面和下面的实现效果有差别
  <p>
      我是文字
      <span>123</span>
  </p>
  <script>
       var p = document.querySelector('p');
       console.log(p.innerHTML); // 保留了空格和换行，能够识别标签
       console.log(p.innerText); // 去掉了空格和换行，直接跳过标签识别不到
  </script>
  

• 元素的其他属性src alt title等 （title是鼠标悬停在图片上显示的内容

  // 点击不同的按钮可以修改img的src和alt
      <button id = "btn1">按钮1</button>
      <button id = "btn2">按钮2</button>
      <img src = 'pics/1.jpg' alt = '图片1'>
  
      <script>
          var btn1 = document.getElementById('btn1');
          var btn2 = document.getElementById('btn2');
          var img = document.querySelector('img');
          btn1.onclick = function () {
              img.src = 'pics/1.jpg';
              img.alt = '图片1';
          }
          btn2.onclick = function () {
              img.src = 'pics/2.jpg';
              img.alt = '图片2';
          }
      </script>
  

• 分时，不同时间打开页面显示不同的图片。分支判断即可

• 表单元素的属性操作

      <button>按钮</button>
      <input type = 'text' value = '请输入内容' />
  
      <script>
          var btn = document.querySelector('button');
          var input = document.querySelector('input');
          btn.onclick = function () {
              input.value = '您未输入！';
              // 禁用这个按钮
              btn.disabled = true;
              this.disabled = true; // 效果同上，this指的是事件函数的调用者
          }
      </script>
  

• 一些案例

  • 点击按钮将密码框修改为文本框，同时实现图片的更换。用type = password/text切换，修改img.src
  • 修改元素的样式 this.style.backgroundColor = ‘’;注意JS和CSS命名格式区别，JS是驼峰命名法
  • 点击x将某个盒子的display修改为none,box.style.display = ‘none’;
  • 循环精灵图，按照某种样式排列图片。获取所有的li标签，然后通过循环修改背景图片的坐标

```
lis[i].style.backgroundPosition = '0 -' + yloc + 'px';  // '0 -33px'
```

- 点击文本框内部隐藏文本框默认文本

```
// 获得焦点
var text = document.querySelector('input');
text.onfocus = function () {
	// 获得焦点，隐藏默认文本
	if (this.value === '手机') {
		this.value = '';
	}
	// 获得焦点需要把文本框内部的文字颜色变深
	this.style.color = #333;
}
text.onblur = function () {
	// 失去焦点，显示默认文本
	if (this.value === '') {
		this.value = '手机';
	}
	// 失去焦点，文本框内部的文字颜色变浅
	this.style.color = #999;
}
```

- 修改style的多个值：className：this.className = 'change'; //提前定义好.change类。会覆盖掉原来的类名。如果想要保留原来的类名，可以this.className = 'first change'; 多类名选择器
- 判断输入密码位数是否正确

排他思想

• 通过循环给多个按钮绑定事件时，可以先把所有的样式都清空，再更换当前样式

• 案例

  • 百度换肤：点击某个按钮，背景图片更换为对应的图片。

    document.querySelector('baidu').querySelectorAll('li'); //可以嵌套写
    

  • 表格隔行变色

    onmouseover 鼠标经过 onmouseout 鼠标离开
    

  • 表单全选和取消全选

    复选框<input type="checkbox" checked = "checked">checked
    根据全选按钮决定其他子按钮的状态：j_tbs[i].checked = this.checked;
    子按钮如果全选中则全选按钮选中，否则不选中：每次点击子按钮都要检查所有的子按钮。根据flag决定全选按钮的状态
    j_cbAll.checked = flag;
    

自定义属性的操作

• 获取属性值

  element.属性  // div.id   获取内置属性
  element.getAttribute('属性')  // div.getAttribute('phone')  获取自定义的属性，最常用
  element.dataset.属性/element.dataset[属性]  // 针对自定义属性，data-属性，[]内部属性是listName而不是list-name。类似于css中是background-color但是JS要调用需要是backgroundColor
  

• 设置属性值

  div.id = 'test';
  div.setAttribute('phone', 'oppo');
  div.className = 'footer';
  div.setAttribute('class', 'footer');
  

• 移除属性

  div.removeAttribute('phone');
  

• 案例

  • tab栏切换(重要)，实现点击不同标题显示不同板块
    • 把所有的板块都设置成不可见display:none，然后点击哪个设置哪个的属性display:block(这个似乎不只是是否可见，是这个模块是否要存在)
    • 如何判断点击的是哪个模块？设置索引号lis[i].setAttribute(‘index’,i);

• 自定义属性的目的：保存并使用数据。

• 自定义属性的规范：必须以data-开头：data-index data-phone

节点操作

• 利用节点层级关系获取元素，更简单。

• nodeName nodeType nodeValue 节点名称 节点类型 节点值。

  • 元素节点nodeType = 1  // 主要操作的节点
    属性节点nodeType = 2
    文本节点nodeType = 3
    

• 层次关系

  • 父子

    node.parentNode // 得到最近的父节点 找不到就返回null
    node.childNodes // 得到所有的子节点，包括文本节点。不推荐使用
    node.children // 得到所有的子元素节点，更常用，只获得元素节点
    
    node.firstChild //第一个子节点
    node.lastChild // 最后一个节点
    node.firstElementChild // 第一个子元素节点
    node.lastElementChild // 最后一个子元素节点
    
    node.children[0]  // 第一个子元素节点 推荐使用
    node.children[node.children.length - 1] // 最后一个子元素节点
    

    • 案例：下拉菜单栏
      • a+ul(lis) 未鼠标经过时隐藏ul：display:none

  • 兄弟

    node.nextSibling   // 下一个兄弟节点，包含文本节点
    node.previousSibling  // 上一个兄弟节点
    node.nextElementSibling  //下一个兄弟元素节点
    node.previousElementSibling
    

• 创建节点和添加节点，创建元素和添加元素

  document.createElement('tagName')
  node.appendChild(child)
  node.insertBefore(child,指定元素)  // 相当于是在node的所有子节点的最前面添加
  

  • 案例：发布留言。

• 删除节点

  node.removeChild(ul.children[0]) // 删除父元素中的一个子节点
  this.disabled = true; // 禁用按钮用disabled属性
  <a href = "javascript:;">删除</a> // 添加删除的链接，但是不跳转且地址栏不添加#。为什么这里不直接写一个按钮呢？
  ul.removeChild(this.parentNode); // 删除ul里面的li，this指的是li内部的链接，li是a的父亲
  删除节点必须找到父节点，删除节点只有这一种语法吗？
  

  • 案例：删除留言。

• 复制节点

  node.cloneNode();  // 复制完需要添加
  ()里面为空则为浅拷贝，只复制标签不复制标签内部的内容，不复制他的子节点；
  (true)则为深拷贝，复制标签也复制标签内部的内容，复制他的所有子节点，且内容跟随原来的标签变化
  

  • 案例：动态生成表格。（重要！！！）

    1准备数据 datas
    2创建行，根据datas的长度.创建tr行，创建tr内部的td
    3创建“删除”的单元格td
    4删除操作 tbody.removeChild(this.parentNode.parentNode); // this指的就是链接，链接的父亲是td，td的父亲是tr，要删除是tr这一行
    

• 三种创建元素的区别

  document.write() // document.write('<div>123</div>'); 会重新绘制整个页面，原来的没有了，页面重绘
  innerHTML  // 效率高，但是不要拼接字符串，可以采用数组形式
  document.createElement()  // 效率低，但是结构更加清晰
  
  var inner = document.querySelector('.inner');
  inner.innerHTML = '<a href = "#">百度</a>';
  
  var create = document.querySelector('.create');
  var a = document.createElement('a');
  create.appendChild(a);
  

DOM重点核心（复习）

• 创建

  • document.write
  • innerHTML
  • document.createElement

• 增

  • appendChild
  • insertBefore

• 删

  • node.removeChild

• 改

  • 主要修改dom的元素属性，dom元素的内容、属性、表单的值等
    • 修改元素属性：src、href、title
    • 修改普通元素内容：innerHTML、innerText
    • 修改表单元素：value、type、disabled
    • 修改元素样式：style、className

• 查

  • 主要获取查询dom的元素
    • DOM提供的API方法：getElementById;getElementsByTagName
    • H5提供的新方法：querySelector;querySelectorAll
    • 利用节点操作获取元素：parentNode;children;previousElementSibling;nextElementSibling

• 属性操作

  • 主要针对于自定义属性
    • setAttribute设置dom的属性值
    • getAttribute得到dom的属性值
    • removeAttribute移除属性

• 事件操作

  • 给元素注册事件，采取 事件源.事件类型 = 事件处理程序

    鼠标事件	触发条件
    onclick	鼠标点击左键
    onmouseover	鼠标经过
    onmouseout	鼠标离开
    onfocus	获得鼠标焦点，比如框框被选中
    onblur	失去鼠标焦点
    onmousemove	鼠标移动
    onmouseup	鼠标弹起
    onmousedown	鼠标按下

事件高级

• 注册事件（绑定事件）

  • 传统：on…唯一性

  • 方法监听注册：addEventListener()可以多个，顺序执行。更推荐更常用

    eventTarget.addEventListener(type, listener[, useCapture]);
    btn.addEventListener('click', function () {    // 没有on，有''
    	alert('点击触发');
    })
    

• 删除事件（解绑事件）

  • 传统：btn.onclick = null;

  • 方法监听：removeEventListener

    btn.addEventListener('click', fn); // 特殊，不需要加()
    function fn() {
    	alert('点击触发');
    }
    btn.removeEventListener('click', fn);
    

• DOM事件流

  • 事件的传播过程。1捕获阶段2当前目标阶段3冒泡阶段

    捕获阶段：由于捕获阶段顺序是从外到里从上到下，以下代码的执行结果是先弹出father再弹出son。实际开发很少用
    son.addEventListener('click', function () {
    	alert('son盒子');
    }, true); // true代表是捕获阶段
    father.addEventListener('click', function () {
    	alert('father盒子');
    }, true);
    冒泡阶段：false或省略，以下代码先son后father。son-father-body-html-document
    son.addEventListener('click', function () {
    	alert('son盒子');
    }, false); // false或者省略代表是冒泡阶段
    father.addEventListener('click', function () {	alert('father盒子');});
    

    有些事情没有冒泡：onblur onfocus onmouseenter onmouseleave

    事件冒泡有时不好有时有用

• 事件对象

  • btn.onclick = function (event) {};
  • event就是事件对象，针对于前面的具体事件（onclick），存储事件的相关信息比如鼠标在哪个位置按下的，比如键盘按了哪个键。有了事件才会存在事件对象。event可以自己命名，比如e
  • 常用：e.target e.type e.preventDefault()阻止默认事件执行
  • e.target和this的区别
    • e.target触发事件的对象，比如ul里面的li
    • this绑定的对象，比如绑定了事件的ul

• 阻止事件冒泡

  • e.stopPropagation();

• 事件委托（代理、委派）

  • 不是每个子节点单独设置事件监听器，而是给父节点设置事件监听器，利用冒泡原理影响每个子节点
  • 只操作一次DOM，提高性能

• 常用的鼠标事件

  • 禁止鼠标右键菜单

    document.addEventListener('contextmenu', function (e) {
    	e.preventDefault();
    });
    

  • 禁止鼠标选中文字

    document.addEventListener('selectstart', function (e) {
    	e.preventDefault();
    });
    

  • 视窗clientX clientY 文档顶部pageX pageY 电脑屏幕screenX screenY

  • 案例：跟随鼠标的动效mousemove.获得鼠标的最新xy并将其更改为图片的top left,记得加’px’

• 常用的键盘事件

  • onkeyup弹起。不区分大小写，a和A都是65
  • onkeydown按下。不区分大小写，a和A都是65
  • onkeypress按下，不识别功能键。区分大小写a97A65
  • 执行顺序：keydown-keypress-keyon
  • e.keyCode 按下的键的ASCII码
  • 案例：京东按键S焦点放到搜索框；京东快递单号查询字体变大

BOM

BOM概述

• 浏览器对象模型。与浏览器窗口交互。兼容性差没有统一标准。BOM更大。
• window = document + location + navigation + screen + history

window对象的常见事件

• 窗口加载事件
  • window.onload() {} 在页面全部加载完毕之后再执行代码，可以将script脚本放在任何地方。
  • window.onload只能写一次。如果多次以最后一个为准。
  • window.addEventListener(‘load’, function() {}) 可以写多次，都会执行。执行顺序是书写顺序的倒序。
  • document.addEventListener(‘DOMContentLoaded’, function(){})只加载DOM，不包括样式表图片flash
• 调整窗口大小事件
  • window.onresize(){}
  • window.addEventListener(‘resize’, function(){})
  • 响应式布局

定时器

• window.setTimeout(调用函数， 延时时间); 也称为回调函数。window可以省略

  setTimeout(function(){}, 2000);  // 单位是ms,2s后执行函数。执行一次就结束
  setTimeout(fn, 2000);
  var timer1= setTimeout(fn, 2000);
  var timer2= setTimeout(fn, 5000);
  

  案例：5秒后关闭广告。

  停止定时器。window.clearTimeout(timer定时器名称); window也可以省略

• window.setInterval(回调函数，间隔毫秒数);

  setInterval(fn, 2000); // 每隔2s就执行一次，永不停止。
  

  案例：实现倒计时模块。

  清除定时器：clearInterval(定时器名称)

  var begin = document.querySelector('.begin');
  var stop = document.querySelector('.stop');
  var timer = null;
  begin.addEventListener('click', function(){
  	timer = setInterval(function () {}, 1000);
  })
  stop.addEventListener('click', function () {
  	clearInterval(timer)
  })
  

  案例：发送短信后60s内禁用按钮

  发送短信：<input /> <button>发送</button>
  <script>
  	var btn = document.querySelector('button');
  	var time = 3; // 定义剩下的秒数
  	btn.addEventListener( 'click', function(){
  		btn.disabled = true;
  		var timer = setInterval(function(){
  			if(time == 0) {
  				clearInterval(timer);  // 清除定时器
  				btn.disabled = false;
  				btn.innerHTML = '发送';
  				time = 3;
  			} else {
  				btn.innerHTML = '还剩下'+ time +'秒';
  				time--;
  			}
  		}, 1000);
  	})
  </script>
  

• this指向谁？

  • 全局作用域和普通函数和定时器里的this指向window
  • 方法调用中谁调用指向谁
  • 构造函数中this指向构造函数的实例

JS执行机制

• JS是单线程，同一时间只能做一件事

• H5提出WebWorker标准，允许JS脚本创建多个线程。于是出现了同步和异步的概念。

  • 同步：顺序依次执行任务，烧完水再切菜

  • 异步：一边烧水一边切菜

  • 同步任务------主线程执行栈

    异步任务------任务队列（消息队列），比如回调函数

    执行顺序：先主线程执行栈中的同步任务（遇到回调函数/异步任务放到任务队列）->再顺序执行任务队列中的回调函数

  • 事件循环：即使同步任务已经全部执行完毕，还是会不断获取任务队列中是否有任务，如果有就放入执行栈进行执行

location对象

• window的一个对象，获取或者设置窗体的URL，可以用于解析URL

• URL的一般格式

  protocol://host[:port]/path/[?query]#fragment
  https://www.baidu.com/index.html?name=andy&age=18#link
  

• location对象的属性

  location.href  整个URL
  location.host  主机/域名
  location.port   端口号
  location.pathname 返回路径
  location.search 返回参数?name=andy
  location.hash  片段。常见于链接锚点
  
  location.assign('链接')  //跳转，可以后退
  location.replace('链接') //跳转，不记录浏览历史，不可以后退
  location.reload()  // 刷新页面 如果参数为true则强制刷新
  

• 案例：5秒后自动跳转页面。location.href = ‘https://…’

• 案例：数据在不同页面中传递。location.search。实现从用户登录页到用户页面的跳转login.html->index.html

  login.html
  <body>
  	<form action = "index.html">    // 这里可以将表单中的内容提交到另一个页面index.html
  		用户名：<input type = 'text' name = 'uname'>
  		<input type = 'submit' value = '登录'>
  	</form>
  </body>
  
  index.html
  <body>
  	<script>
  		var params = location.search.substr(1);  // 去掉？留下uname=andy
  		var arr = params.split('=');  // arr数组中是['uname', 'andy']
  		var div = document.querySelector('div');
  		div.innerHTML = arr[1] + '欢迎您';
  	</script>
  </body>
  

navigator对象

• 有关浏览器的信息，比如用的是手机还是电脑。userAgent可以实现跳转

history对象

• history.back();后退
• history.forward();前进
• history.go(-1); history.go(1);

PC端网页特效

元素偏移量offset系列

• 动态获取位置、大小

• 常见属性，返回值不带单位

  offsetTop  // 位置，相对于有定位的父元素，如果父元素没有定位position=relative那就是相对于body
  offsetLeft
  offsetWidth   //大小，包含content padding border 不包括margin
  offsetHeight
  offsetParent  // 返回带有定位的父亲，没有则body
  

• offset和style的区别

  offset	style
  任意样式表中的样式	只能获取行内样式表的样式，内嵌样式表就不行
  返回值是数字	返回值是带有单位px的字符串
  只读	可读可修改
  包含padding+border	只包含content,不包含padding和border
  适用于获取大小和位置	适用于需要修改的情况

• 案例：获取鼠标在盒子内的坐标click->mousemove。鼠标在页面中的坐标pageXY-盒子的offsetLeftTop

• 案例：模态框拖拽

  • 点击登录按钮，弹出登录框。实现登录框的拖拽效果。点击关闭关闭登录框。
    • 鼠标在盒子内的坐标不变，根据这个修改lefttop

• 案例：仿京东放大镜效果

元素可视区client系列

• 与offset区别：client包括padding不包括border

• 立即执行函数：不需要调用，立刻执行的函数。()()

  (function(){})();
  (function(){}());
  

  也可以传递参数

  独立创建了一个作用域，里面的变量是局部变量。方便引用多个js不会存在变量命名冲突

• 案例：淘宝flexibleJS源码分析

  • 核心原理：根据移动端和网页端的屏幕尺寸自适应调整字体大小
  • pageshow与load的区别是，不管是从哪里来，都重新计算rem大小，火狐浏览器

元素滚动scroll系列

• 也是不包含border,和client的区别是，scroll是内容本身的高度宽度283，但client在超出盒子后还是显示盒子的最大值220

  scrollTop  有滚动条时，显示被卷去的内容高度，而不是相对于边框的高度
  scrollLeft
  scrollWidth
  scrollHeight
  滚动事件div.addEventListener('scroll', fn);
  

• 案例：仿淘宝固定侧边栏

  • 原来是绝对定位absolute

  • 继续滚动时固定定位fixed，出现“顶部”按钮display:block

  • 点击顶部返回顶部display:none

    window.pageYOffset页面被卷去的头部
    window.pageXOffset页面被卷去的左侧
    element.scrollTop  element.scrollLeft // 元素被卷去的
    

• 这三类的返回值都不带单位

  • offset常用于获得元素位置offsetLeft offsetTop
  • client常用于获取元素大小clientWidth clientHeight
  • scroll常用于获取滚动距离scrollTop scrollLeft（元素的）
  • 页面的滚动距离通过window.pageXOffset获得

• mouseenter和mouseover区别：mouseenter只在经过自身盒子时触发，mouseover在经过自身盒子和子盒子都会触发。因为mouseenter不会冒泡。mouseleave类似于mouseenter

动画

• 动画原理：通过定时器setInterval()不断移动盒子的位置

  • 实现步骤：
    • 获得盒子当前位置
    • 让盒子在当前位置上加上1个移动距离div.style.left=div.offsetLeft + 1 +‘px’;
    • 利用定时器不断重复这个操作
    • 加一个结束定时器的条件
    • 注意此元素需要添加定位position:relative，才能使用element.style.left

• 动画函数封装

  function animate(obj, target) {   // obj是想要做动画效果的对象，target是移动的停止位置
  	var timer = setInterval(function(){
  		if (obj.offsetLeft >= target) {
  			clearInterval(timer);
  		}
  		obj.style.left = obj.offsetLeft + 1 + 'px';
  	}, 30);
  }
  

  • 优化：给不同的对象记录不同的定时器

    timer... ---> obj.timer
    点击按钮多次会开启多个定时器，对象会越来越快。解决方案是，让元素只有一个定时器执行
    function animate(obj, target) {   // obj是想要做动画效果的对象，target是移动的停止位置
    	clearInterval(obj.timer); // 清楚之前的所有定时器，避免开启多个定时器导致元素过快
    	obj.timer = setInterval(function(){
    		if (obj.offsetLeft >= target) {
    			clearInterval(obj.timer);
    		}
    		obj.style.left = obj.offsetLeft + 1 + 'px';
    	}, 30);
    }
    

• 缓存动画

  • 原理：让动画慢慢停下来。

    • 每次移动的距离慢慢变小。(目标值-现在的位置)/10作为移动的步幅。
    • 停止条件，停止计时器

  • 代码

    function animate(obj, target) {   // obj是想要做动画效果的对象，target是移动的停止位置
    	clearInterval(obj.timer); // 清楚之前的所有定时器，避免开启多个定时器导致元素过快
    	obj.timer = setInterval(function(){
    		var step = Math.ceil((target - obj.offsetLeft) / 10);  // 计算每次移动的步长
    		if (obj.offsetLeft == target) {
    			clearInterval(obj.timer);
    		}
    		obj.style.left = obj.offsetLeft + step + 'px';   // 使用step而不是固定的值
    	}, 30);
    }
    
    // 步长优化，正值8.1->9 负值-8.1->-9
    var step = (target - obj.offsetLeft) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    

• 动画函数添加回调函数

  • 回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。

    回调主要体现在这个函数是在动画运行完毕之后才会执行，也就是定时器结束之后才会执行

  • 回调函数写的位置：定时器结束的位置。

    // 最终版，使用频率高！！！
    function animate(obj, target, callback) {   // obj是想要做动画效果的对象，target是移动的停止位置
    	clearInterval(obj.timer); // 清楚之前的所有定时器，避免开启多个定时器导致元素过快
    	obj.timer = setInterval(function(){
    		var step = (target - obj.offsetLeft) / 10;
    		step = step > 0 ? Math.ceil(step) : Math.floor(step);
    		if (obj.offsetLeft == target) {
    			clearInterval(obj.timer);  // 定时器结束的位置
    			if (callback) {
    				callback();
    			}
    		}
    		obj.style.left = obj.offsetLeft + step + 'px';   // 使用step而不是固定的值
    	}, 30);
    }
    

• 动画函数封装到一个单独的JS文件中

常见网页特效案例

• 网页轮播图

  • 如何实现图片的无缝滚动：将第一个图片复制到最后cloneNode(true)，然后快速从最后跳转到第一张，同时num=0,人眼识别不出

• 节流阀

  • 防止轮播图按钮连续点击造成播放过快。

  • 目的：当上一个函数的动画执行完毕，再执行下一个，防止过快。

  • 思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

  • var flag = true;
    if (flag) {
    	flag = false;  // 关闭节流阀
    	do something   // 动画执行
    }
    animate(,,function(){
    	flag = true;  // 动画执行完毕后打开节流阀
    })
    

• 返回顶部。点击返回按钮，回到窗口的顶部。window.scroll(0,0);//没有单位。用缓动函数可以缓慢动

• 筋斗云案例

移动端

触屏事件

• 不太考虑兼容性问题。

• touchstart  // 触摸
  touchmove  // 移动
  touchend  // 离开
  

• 触摸事件对象touchevent

  touches // 所有触摸的手指的列表
  targetTouches // 正在触摸当前dom元素的手指列表。最常用
  changedTouches // 手指状态发生了改变的列表，从有到无或从无到有
  

• 移动端拖动元素

  // 触摸元素touchstart 获取手指的初始坐标和盒子的初始位置
  // 移动手指touchmove 计算手指的移动距离并移动盒子
  // 离开手指touchend
  var div = document.querySelector('div');
  var startX = 0; // 手指的初始位置
  var startY = 0;
  var x = 0;  // 盒子的初始位置
  var y = 0;
  div.addEveentListener('touchstart', function(e) {
  	// 获取手指初始坐标
  	startX = e.targetTouches[0].pageX;  // pageX、clientX、screenX的区别
  	startY = e.targetTouches[0].pageY;
  	// 获取盒子的初始位置
  	x = this.offsetLeft;  // 这里this指的是div
  	y = this.offsetTop;
  })
  div.addEventListener('touchmove', function(e){
  	// 计算手指的移动距离：手指移动之后的坐标减去手指的初始坐标
  	var moveX = e.targetTouches[0].pageX - startX;
  	var moveY = e.targetTouches[0].pageY - startY;
  	// 移动盒子
  	this.style.left = x + moveX + 'px';
  	this.style.top = y + moveY + 'px';
  	// 阻止默认的屏幕滚动
  	e.preventDefault();
  })
  

移动端常见特效

• 案例：移动端轮播图

  • translate移动，transform transition

    // 获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    // 获得focus的宽度
    var w = focus.offsetWidth;
    // 利用定时器轮播图片
    var index = 0;
    var timer = setInterval(function(){
    	index++;
    	var translatex = -index * w; // 移动距离
    	ul.style.transition = 'all .3s'; // 渐入渐出的过渡效果
    	ul.style.transform = 'translateX('+ translatex +'px)'; // translate函数translateX(1px)  
    }, 2000);
    // 无缝滚动
    ul.addEventListener('transitionend', function(){
    	if (index>=3) {
    		index = 0;
    		ul.style.transition = 'none'; // 去掉过渡效果
    		var translatex = -index*w; 
    		ul.style.transform = 'translateX('+ translatex +'px)';
    	} else if (index < 0) {
    		index = 2;
    		ul.style.transition = 'none'; // 去掉过渡效果
    		var translatex = -index*w; 
    		ul.style.transform = 'translateX('+ translatex +'px)';
    	}
    })
    

  • calssList返回元素的类名

    div.classList.add('类名');  // 添加类名
    div.classList.remove('类名'); // 移除
    document.body.classList.toggle('类名'); // 切换，有就去掉，没有就添上
    

• 案例：返回顶部

• 移动端click事件有300ms的延时，原因是双击可以放大

  • 解决方案1：禁止双击放大屏幕
  • 解决方案2：利用touch事件自己封装函数。触摸到离开的事件小于150ms定义为点击

移动端常用开发插件

• js文件。先引入文件(cssjs)再按照规定的语法规范使用(html+css)
• fastclick 解决click延时
• swiper 轮播图
• superSlide
• zy.media.js视频
• 常见的插件有swiper superslide isroll等

移动端常用开发框架

• 前端常用的框架有Bootstrap Vue Angular React等，既能开发移动端，又能开发PC端

本地存储

• sessionStorage

  • 生命周期为关闭浏览器窗口

  • 同一个窗口（页面）下数据可以共享

  • 以键值对存储

  • sessionStorage.setItem('uname', val);  // key为uname.存储数据
    sessionStorage.getItem('uname');  // 获取数据
    sessionStorage.removeItem('uname');  // 删除数据
    sessionStorage.clear();  // 清除数据
    

  • 在应用程序-会话存储中找

• localStorage

  • 生命周期永久生效，除非手动删除，否则关闭页面也会存在

  • 可以多窗口共享（同一浏览器可以共享）

  • 以键值对存储

  • localStorage.setItem('uname', val);  // key为uname.存储数据
    localStorage.getItem('uname');  // 获取数据
    localStorage.removeItem('uname');  // 删除数据
    localStorage.clear();  // 清除数据
    

  • 在应用程序-本地存储中找

• 案例：记住用户名 'change’事件

jQuery

jQuery概述

• 库。
• js库有很多：jQuery Prototype YUI Dojo Ext JS 移动端的zepto

jQuery基本使用

• 下载：官网-production版本-复制所有内容-粘贴到自己的jquery.mini.js-自己的文件中

• jquery入口函数
  1页面DOM加载完毕后再执行JS代码 DOMContentLoaded
  $(document).ready(function(){
  	$('div').hide();
  })
  
  2页面DOM加载完毕后再执行JS代码。最常用的格式
  $(function (){
  	$('div').hide();  // 与jQuery('div').hide();等价
  })
  

• $等价于jQuery,也是jQuery的顶级对象

• jQuery获取的对象是jQuery对象；用原生方式获取的对象是DOM对象。各自只能使用自己的属性和方法。

  二者可以相互转换：

  DOM转jQuery
  $(DOM对象)
  jQuery转DOM
  $()[index]
  $().get(index)
  

jQuery常用API

jQuery选择器

• jQuery基础、层级选择器

  名称	用法	描述
  ID选择器	$(“#id”)
  全选选择器	$(‘*’)
  类选择器	$(“.class”)
  标签选择器	$(“div”)
  并集选择器	$(“div,p,li”)
  交集选择器	$(“li.current”)
  子代选择器	$(“ul>li”)	只要亲儿子
  后代选择器	$(“ul li”)	全部

• 隐式迭代：把匹配的所有元素进行遍历循环，给每一个元素添加css这个方法$(“div”).css(“background”,“red”);

• jQuery筛选选择器

  语法	用法	描述
  :first	$(“li:first”)	第一个
  :last	$(“li:last”)	最后一个
  :eq(index)	$(“li:eq(2)”)	索引为2，从0开始
  :odd	$(“li:odd”)	奇数
  :even	$(“li:even”)	偶数

• jQuery筛选方法

  语法	用法	说明
  parent()	$(“li”).parent();	查找父级，亲爸爸
  children(selector)	$(“ul”).children(“li”)	亲儿子，$(“ul>li”)
  find(selector)	$(“ul”).find(“li”)	后代选择器,$(“ul li”)
  sibling(selector)	$(“.first”).sibling(“li”)	除了自己的所有亲兄弟
  nextAll([expr])	$(“.first”).nextAll()	当前元素之后的所有同辈元素
  prevtAll([expr])	$(“.last”).prevAll()	当前元素之前的所有同辈元素
  hasClass(class)	$(‘div’).hasClass(“protected”)	检查当前的元素是否含有某个特定的类，如果有则返回true
  eq(index)	$(“li”).eq(2)	第几个$(“li:eq(2)”)

  案例：新浪下拉菜单$(this)

• jQuery中的排他思想

  $("button").click(function(){   // 有隐式迭代
  	$(this).css("background", "pink");
  	$(this).siblings("button").css("background", ""); // 有隐式迭代
  })
  

  案例：淘宝服饰精品 $(this).index()可以拿到索引

  $("#left li").mouseover(function(){
  	var index = $(this).index();   // 获取当前图片的索引
  	$("#content div").eq(index).show();  // 显示对应索引的盒子
  	$("#content div").eq(index).siblings().hide();  // 让其余兄弟隐藏起来
  })
  

• 链式编程

  $(this).css("color", "red");
  $(this).siblings().css("color", "");
  以上两句等价于
  $(this).css("color", "red").siblings().css("color","");
  也就是说.....的内容是并列的
  注意执行对象，到底是哪个对象在执行样式
  

jQuery样式操作

• css方法

  $(this).css("width");  // 只写了属性名称就返回这个属性对应的值
  $(this).css("width", "500px");  // 对这个属性进行了修改   也可以写500，不加引号和单位
  $(this).css({    // 一次修改多个属性
  	width: 200,
  	height: 400
  })
  

• 设置类样式方法

  $(this).addClass("current");  // 添加类
  $(this).removeClass("current");  // 删除类
  $(this).toggleClass("current");  // 切换类,没有就添上，有就删了
  

  案例：tab栏切换

  原生JS和jQuery中类操作的区别：原生JS修改className会覆盖原来的，jQuery不影响原来的

jQuery效果

显示隐藏show hide toggle

• show([speed, [easing], [fn]])  速度、切换效果、回调函数
  hide
  toggle
  一般不加参数
  

滑动slideDown slideUp slideToggle

• slideDown下拉
  slideUp上拉
  slideToggle滑动切换
  // 事件切换
  hover([over,]out)   over鼠标来out鼠标走，相当于原来的mouseover+mouseout
  写法优化一：
  $(".nav>li").hover(function(){}, function(){});
  $(".nav>li").hover(function(){
  	$(this).children("ul").slideDown();  // 鼠标来
  }, function(){
  	$(this).children("ul").slideUp();  // 鼠标走
  });
  写法优化二：
  $(".nav>li").hover(function(){
  	$(this).children("ul").slideToggle();
  })
  

• 动画队列及其停止排队方法

  • 动画队列：一旦触发就会执行，多次触发会造成多个动画排队执行

  • 停止排队：stop，停止以前的，只执行最新的。需要写在动画的前面

    $(this).children("ul").stop().slideToggle();
    

淡入淡出fadeIn fadeOut fadeToggle fadeTo

• fadeIn  // 淡入
  fadeOut  // 淡出
  fadeToggle   // 切换
  fadeTo([[speed], opacity, [easing], [fn]])  速度，透明度(0-1之间)，切换效果，回调函数。渐进调整到指定的透明度。
                                               speed和opacity必须写
  

自定义动画animate

• animate(params, [speed], [easing], [fn])
  params想要更改的样式属性，以对象形式传递，必须写。
  $(this).animate({
  	left: 500,
  	top: 300,
  	opacity: 0.5,
  	width: 500
  }, 500);
  

• 案例：王者手风琴

jQuery属性操作

• 固有属性

  $(this).prop("属性名");  // 获取
  $(this).prop("属性名","要修改成的内容");   // 设置与修改
  

• 自定义属性

  attr()
  

• 数据缓存data() 在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除

  不会显示在页面中

  $(this).data(key, value);   // 设置数据缓存
  console.log($(this).data(key));  // 获取
  // 这个方法也可以用来获取H5属性，H5属性的命名规则是data-自定义，比如data-index
  $(this).attr("data-index")
  $(this).data("index")   // 这两种写法等价，并且后者返回的是数字型
  

• 案例：购物车全选按钮

  $(function() {
  	// 全选/全不选：将checkall的状态赋值给j-checkbox和另一个checkall
  	$(".checkall").change(function() {
  		$(".j-checkbox, .checkall").prop("checked", $("checkall").prop("checked"));
  	})
  	// 三个小按钮全选则修改全选按钮
  	$(".j-checkbox").change(function(){
  		// $(".j-checkbox:checked").length代表被选中的小框的个数
  		if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
  			$(".checkall").prop("checked", true);
  		} else {
  			$(".checkall").prop("checked", false);
  		}
  	})
  })
  

jQuery文本属性值

$(this).html()
$(this).html(要修改成的内容)
$(this).text()   // 只有文字
$(this).text(要修改的内容)
$("input").val()   // 表单的值
$("input").val(要修改的内容)

• 案例：购物车加减商品按钮

$(this).parents("属性名称")   // parents返回所有的祖先元素
(num).toFixed(n) // 给num保留n位小数

jQuery元素操作

• 遍历

  • 给同一类元素做不同的操作

    语法1 
    $("div").each(function (index, domEle) { xxx;})  // domEle是每个DOM对象，不是jQuery对象
    var arr = ['red', 'blue', 'green'];
    $("div").each(function (index, domEle) {    // $(domEle)将DOM对象转为jQuery对象
    	$(domEle).css("color", arr[i]);
    })
    语法2
    $.each(arr, function(){})  // 主要用于数据处理，arr是待处理的数组
    

  • 案例：计算购物车的总计和总额

• 创建、添加、删除

  $("<>内容</>")
  $("父亲").append()
  $("父亲").pretend()   // 内部添加
  
  $("").after()
  $("").before()    // 外部添加
  
  $("").remove() // 删除自己
  $("").empty()  //删除所有子节点
  $("").html("")  // 修改所有内部元素为空，类似于empty()
  

​ 案例：删除购物车中的商品

​ 案例：给选中商品添加背景

jQuery尺寸、位置操作

• 语法	用法
  width() height()	只有content的
  innerWidth() innerHeight()	content+padding
  outerWidth() outerHeight()	content+padding+border
  outerWidth(true) outerHeight(true)	content+padding+border+margin

  不用写单位，返回的是数字。如果括号里面写了数字那就代表要修改的值

• $(this).offset().top/left:距离文档边界，与父无关

position：相对于带有定位的父亲

$(window).scroll(function(){ $(document).scrollTop() })

案例：带有动画的返回顶部

$(".back").click(function() {
	// $(document).scrollTop(0);
	$("body,html").stop().animate({    // 注意做动画的对象
		scrollTop: 0
	});
})

• 案例：品优购电梯导航

jQuery事件

jQuery事件注册

$(this).click(function(){}); // 单个事件注册

jQuery事件处理

element.on(events, [selector], fn)  // 真正触发事件的是selector
$(this).on({   // 优势1：可以绑定多个事件
	mouseenter: function(){},
	click: function() {}
})
$(this).on("mouseenter mouseleave", fn) // 两个元素绑定同一个事件

$("ul").on("click", "li", fn)  // 优势2：可以实现事件委派。on事件绑定在ul上，但是实际触发事件的是li

$("ol").on("click", "li", fn) // 优势3：可以给后来创建的动态事件绑定元素
var li = $("<li>这里是在动态创建li元素</li>");
$("ol").append(li);

案例：发布微博

// 解除事件绑定
$("div").off();   // 解除所有事件
$("div").off("click");   // 解除click事件
$("ul").off("click", "li"); // 解除事件委托

$("div").one();  // 类似于on，但是只触发一次

// 自动触发事件
element.click();
element.trigger("click");
element.triggerHandler("click");  // 这个不会触发元素的默认行为，比如光标的闪烁？

jQuery事件对象

$(this).on("click", function(event){})   // 事件对象:event
event.preventDefault() / return false  // 阻止默认行为
event.stopPropagation()   // 阻止冒泡

jQuery其他方法

jQuery拷贝对象

语法：$.extend([deep], target, object1, [objectN])
deep如果设置为true则为深拷贝，默认是浅拷贝。  对于复杂数据类型，浅拷贝只拷贝地址，深拷贝完全克隆。
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象

多库共存

把$改为jQuery/自定义一个名称suibian=$.noConflict() / jQuery.noConflict()，以后直接使用suibian

jQuery插件

jQuery插件库：http://www.jq22.com/
jQuery之家： http://www.htmleaf.com/

• 瀑布流
• 图片懒加载。只显示用户能看到的区域的图片。插件必须写在body最后面
• 全屏滚动
• bootstrap JS插件

todolist

• 本地存储，只能存储字符串。

  • 存储时把数组对象转换为字符串格式：JSON.stringify()
    (true) outerHeight(true) | content+padding+border+margin |

  不用写单位，返回的是数字。如果括号里面写了数字那就代表要修改的值

• $(this).offset().top/left:距离文档边界，与父无关

position：相对于带有定位的父亲

$(window).scroll(function(){ $(document).scrollTop() })

案例：带有动画的返回顶部

$(".back").click(function() {
	// $(document).scrollTop(0);
	$("body,html").stop().animate({    // 注意做动画的对象
		scrollTop: 0
	});
})

• 案例：品优购电梯导航

jQuery事件

jQuery事件注册

$(this).click(function(){}); // 单个事件注册

jQuery事件处理

element.on(events, [selector], fn)  // 真正触发事件的是selector
$(this).on({   // 优势1：可以绑定多个事件
	mouseenter: function(){},
	click: function() {}
})
$(this).on("mouseenter mouseleave", fn) // 两个元素绑定同一个事件

$("ul").on("click", "li", fn)  // 优势2：可以实现事件委派。on事件绑定在ul上，但是实际触发事件的是li

$("ol").on("click", "li", fn) // 优势3：可以给后来创建的动态事件绑定元素
var li = $("<li>这里是在动态创建li元素</li>");
$("ol").append(li);

案例：发布微博

// 解除事件绑定
$("div").off();   // 解除所有事件
$("div").off("click");   // 解除click事件
$("ul").off("click", "li"); // 解除事件委托

$("div").one();  // 类似于on，但是只触发一次

// 自动触发事件
element.click();
element.trigger("click");
element.triggerHandler("click");  // 这个不会触发元素的默认行为，比如光标的闪烁？

jQuery事件对象

$(this).on("click", function(event){})   // 事件对象:event
event.preventDefault() / return false  // 阻止默认行为
event.stopPropagation()   // 阻止冒泡

jQuery其他方法

jQuery拷贝对象

语法：$.extend([deep], target, object1, [objectN])
deep如果设置为true则为深拷贝，默认是浅拷贝。  对于复杂数据类型，浅拷贝只拷贝地址，深拷贝完全克隆。
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象

多库共存

把$改为jQuery/自定义一个名称suibian=$.noConflict() / jQuery.noConflict()，以后直接使用suibian

jQuery插件

jQuery插件库：http://www.jq22.com/
jQuery之家： http://www.htmleaf.com/

• 瀑布流
• 图片懒加载。只显示用户能看到的区域的图片。插件必须写在body最后面
• 全屏滚动
• bootstrap JS插件

todolist

• 本地存储，只能存储字符串。
  • 存储时把数组对象转换为字符串格式：JSON.stringify()
  • 获取时转换为对象格式：JSON.parse()