jquery

jquery官网

插件

jQuery插件库
jQuery之家
fullpage.js（全屏滚动）
fullPage.js插件GitHub网址

常见JavaScript库（即library，封装好的特定集合（方法和函数））

jQuery，Prototype，YUI，Dojo，Ext JS，移动端的zepto

jQuery库

入口函数：

        $(function(){
            页面DOM加载完成的入口
        });（推荐使用）
        $(document).ready(function(){
            页面DOM加载完成的入口
        });

DOM对象转换jQuery对象：$(DOM对象)Query对象转换DOM对象：$(DOM对象)[索引号]/$(DOM对象).get(索引号)

• jQuery选择器：
  • ID选择器：$(“#id名”)
  • 全选选择器：$(‘*’)
  • 类选择器：$(“.+类名”)
  • 标签选择器：$(“标签名”)
  • 并集选择器：$(“标签名,标签名,标签名”)
  • 交集选择器：$(“标签名 类名”)
  • 子代选择器：$(“父标签名>子标签名”)（获取亲儿子层级元素，不会获取孙子层级元素）
  • 后代选择器：$(“标签名 标签名”)
• jQuery筛选选择器：
  • 获取第一个li元素：$(“li:first”)
  • 获取最后一个li元素：$(“li:last”)
  • 获取选定索引号的li元素：$(“li:eq(索引号)”)
  • 获取索引号为奇数的li元素：$(“li:odd”)
  • 获取索引号为偶数的li元素：$(“li:even”)
• jQuery筛选方法：
  • 选择祖先级元素：$(“标签”).parents(“选择器”)（选择指定选择器的祖先）
  • 选择父级元素：$(“标签”).parent()（重点）
  • 选择亲儿子元素：$(“标签”).children(“标签”)（重点）
  • 选择所有后代元素：$(“标签”).find(“标签”)（重点）
  • 选择兄弟元素：$(“标签”).siblings(“标签”)（选中除自身之外的所有兄弟元素）（重点）
  • 选择当前元素之后的同辈元素：$(“标签”).nextAll()
  • 选择当前元素之前的同辈元素：$(“标签”).prevAll()
  • 检查当前元素是否含有特定类元素：$(“标签”).hasClass(“标签”)（含有特定类则返回true）
  • 选择第n（索引号）个元素：$(“标签”).eq(索引号)（重点）
• jQuery动画效果：
  • 显示：show(slow/normal/fast/毫秒数（显示速度），swing/linear（切换效果），fn（回调函数）)（括号内常为空）
  • 隐藏：hide(slow/normal/fast/毫秒数（显示速度），swing/linear（切换效果），fn（回调函数）)（括号内常为空）
  • 切换：toggle(slow/normal/fast/毫秒数（显示速度），swing/linear（切换效果），fn（回调函数）)（括号内常为空）
  • 下拉滑动：slideDown(slow/normal/fast/毫秒数（显示速度），swing/linear（切换效果），fn（回调函数）)（括号内常为空）
  • 上拉滑动：slideUp(slow/normal/fast/毫秒数（显示速度），swing/linear（切换效果），fn（回调函数）)（括号内常为空）
  • 切换滑动：slideToggle(slow/normal/fast/毫秒数（显示速度），swing/linear（切换效果），fn（回调函数）)（括号内常为空）
  • 事件切换：hover(经过函数，移出函数)（只有一个函数则鼠标经过和移开都会触发）
  • 动画队列停止排队：stop()（写到动画或者效果前面，停止前一次动画）
  • 淡入：fadeIn(slow/normal/fast/毫秒数（显示速度），swing/linear（切换效果），fn（回调函数）)（括号内显示速度必写）
  • 淡出：fadeOut(slow/normal/fast/毫秒数（显示速度），swing/linear（切换效果），fn（回调函数）)（括号内显示速度必写）
  • 切换淡入淡出：fadeToggle(slow/normal/fast/毫秒数（显示速度），swing/linear（切换效果），fn（回调函数）)（括号内显示速度必写）
  • 透明度调整：fadeTo(slow/normal/fast/毫秒数（显示速度），0~1（透明度），swing/linear（切换效果），fn（回调函数）)（括号显示速度和透明度必写）
  • 自定义动画：animate(对象形式的样式属性，slow/normal/fast/毫秒数（显示速度），0~1（透明度），swing/linear（切换效果），fn（回调函数）)（样式属性必写）
• jQuery属性操作：
  • 获取属性：prop(“属性”)
  • 设置属性：prop(“属性”, “属性值”)
  • 获取自定义属性：attr(“属性”)
  • 设置自定义属性：attr(“属性”, “属性值”)
  • 附加数据：date(“name”, “value”)（向被选元素附加数据，不会修改DOm元素结构，页面刷新存放数据被移除）
  • 获取数据：date(“name”)（向被选元素获取数据，不会修改DOm元素结构，页面刷新存放数据被移除）

状态变化事件：change
被选中的元素：$(“标签:checked”)
保留小数：toFixed(小数位数)

• jQuery内容文本值：
  • 获取元素内容：html()（等于innerHTML）
  • 设置元素内容：html(“内容”)（等于innerHTML）
  • 获取元素文本内容：text()（等于innerText）
  • 设置元素文本内容：text(“文本内容”)（等于innerText）
  • 获取表单值：val()（等于value）
  • 设置表单值：val(“内容”)（等于value）
• jQuery元素操作：
  • 遍历元素： $("标签").each(function(索引号, DOM元素对象){$(DOM对象)})或$.each(遍历目标, function(索引号, 遍历内容){})（主要用于处理数组、对象数据）
  • 创建元素：$(“<标签>内容</标签>”);
  • 内部添加元素：$("标签").append("内容")（内容放到标签最后面）/$(“标签”).prepend(“内容”)（内容放到标签最前面）（元素生成之后为父子关系）
  • 外部添加元素：$("标签").after("内容")（内容放到标签最后面）/$(“标签”).before(“内容”)（内容放到标签最前面）（元素生成之后为兄弟关系）
  • 删除元素：$("标签").remove()（删除匹配元素）$("标签").empty()（删除匹配元素子节点）$("标签").html("")（清空匹配元素内容）
• jQuery样式操作：
  • $(‘标签’).css(‘属性’，‘值’)（只写属性则返回值，属性必须加引号，值如果是数字可以不用加单位和引号，参数以对象形式属性不用加引号属性与值用冒号隔开，值如果是字符要加引号）
  • 添加类：$(“标签”).addClass(“类名”)（追加类名）
  • 删除类：$(“标签”).removeClass(“类名”)
  • 移除类：$(“标签”).toggleClass(“类名”)（有则删除，无则添加）

隐式迭代：遍历匹配到的元素

• jQuery事件：
  • 单个事件注册：$("标签").事件(function(){事件处理程序})或$("标签").事件(function(){事件处理程序})
  • 绑定事件：$("标签").on(事件, 元素的子元素选择器, fn)（事件处理程序相同事件可写多个用空格分隔以引号包裹，事件处理程序不同 事件可用对象形式，可以把原本加给子元素身上的事件绑定到父元素身上委派给父元素，可以给未来动态创建的元素绑定事件）
  • 单次绑定事件：$("标签").one(事件, fn)（只能触发一次事件）
  • 解绑事件：$("标签").off()（解绑标签所有事件处理程序）或$("标签").off("事件")（解绑标签上的事件）或$("标签").off("事件", "元素的子元素选择器")（解绑事件委托）
  • 自动触发事件：$("标签").事件()或$("标签").trigger("事件")或$("标签").triggerHandler("事件")（不会触发元素默认事件）
• jQuery事件对象：
  • 阻止默认行为：event.preventDefault()或return false
  • 阻止冒泡：event.stopPropagation()
  • 对象拷贝：$.extend(true（深拷贝）/false（浅拷贝）, 被拷贝目标对象, 待拷贝到第一个对象的对象, 待拷贝到第N个对象的对象)（浅拷贝把被拷贝对象复杂数据类型地址拷贝给目标对象，深拷贝完全复制对象不冲突属性会合并）
• jQuery多库共存
  • 解决方案1：把$符号改成jQuery
  • 解决方案2：jQuery变量规定新名称：$/jQuery.noConflict()
• jQuery尺寸：（括号内参数为空则是获取，参数为数字则是修改，参数都是数字）
  • 设置获取元素宽度值：width()
  • 设置获取元素高度值：height()
  • 设置获取元素宽度值：innerWidth()（包含padding）
  • 设置获取元素高度值：innerHeight()（包含padding）
  • 设置获取元素宽度值：outerWidth()（包含padding、border）
  • 设置获取元素高度值：outerHeight()（包含padding、border）
  • 设置获取元素宽度值：outerWidth(true)（包含padding、border、margin）
  • 设置获取元素高度值：outerHeight(true)（包含padding、border、margin）
• jQuery位置：
  • 设置获取元素相对于文档偏移坐标：offset()（可以添加left、top，offset()top属性用于获取元素距离文档距离，offset({top: 数字, left: 数字})用于设置元素偏移）
  • 获取相对于带有定位父级的元素偏移坐标：position()（父级没有元素以文档为准）
  • 设置获取元素被卷去的值：scrollTop()/scrollLeft()

链式编程：当多行代码对象相同样式不同时，可以合并成一行对象相同的代码

---

动画函数封装

原理：通过定时器不断移动盒子位置
注意：需要添加定位
缓动动画公式：（目标值-现在位置）/10（为每次移动步长）
节流阀：利用回调函数添加一个变量控制，锁住函数和解锁函数
var flag = true
if(flag){flag = false;动画结束添加flag = true}

---

flexible分析

立即执行函数：不需要调用，立马能自己执行的函数，可以独立创建作用域
(function(){})()或者(function(){}())
重新加载页面事件：load和pageshow（pageshow在火狐中后退也可以重新触发）

面向过程编程（性能比面向对象高，分析步骤按步骤解决问题）
面向对象编程（封装性，继承性，多态性，灵活、代码可复用、容易维护和开发，适合多人合作的大型项目，以对象功能划分问题而不是步骤）

ES6（脚本语言规范化标准）

**类：**抽象了对象公共部分，泛指某一大类(class)
**对象：**特指某一个通过类实例化一个具体的对象，有属性和方法组成
**创建类：**class 类名{constructor(参数1，参数2…){}函数名(){}}（类名首字母大写，类共有的属性和方法必须加this，constructor中的this指向的是实例化对象，constructor()方法是类的构造函数用于传递参数返回实例对象，函数（方法）里的this指向的是调用者，类必须用new实例化对象）
**利用类创建对象：**new 类名(参数1，参数2…);（new生成实例自动调用constructor，对象参数传递给类参数并返回实例对象）
类的继承（extends）：class 父类名{constructor(参数1，参数2...){}函数名(){}} class 子类名 extends 父类名{}
**类的调用（super）：**class 父类名{constructor(参数1，参数2…){}函数名(){}} class 子类名 extends 父类名{constructor(参数1，参数2…){super()}}（super()可以调用父类中的constructor，super.函数名()可以调用父类中的普通函数）
**添加字符串格式元素到父元素中：**element.insertAdjacentHTML(‘beforebegin(元素自身之前)’/‘afterbegin(插入元素内部第一个子节点之前)’/‘beforeend(插入元素内部最后一个子节点之后)’/‘afterend(元素自身之后)’, text(被解析为html或xml，并插入到DOm树中的字符串))
**原型对象（prototype）：**ES6之前使用构造函数，并且把公共方法定义到protoype对象上以供实例共享方法
**对象原型（proto）：**指向构造函数的protoype原型对象（对象名.__proto__等价于构造函数名.protoype）
**构造函数（constructor）：**对象原型（proto）和构造函数的原型对象都有构造函数（contructor）属性，该属性指回构造函数本身（构造函数主要用于记录对象引用的构造函数，可以让原型对象重新指向原来的构造函数）
原型链：

**静态成员：**在构造函数本身中添加的成员，只能由构造函数本身访问
**动态（实例）成员：**在构造函数内部创建的对象，只能由实例化的对象来访问
在构造函数和原型对象函数中this指向实例对象
**选中状态：**select()
**继承：**call(当前调用函数this的指向对象, 参数1, 参数2, …)（可以调用函数，可以改变函数this指向）
**组合继承：**ES6之前没有提供extends继承，使用的是构造函数+原型对象模拟继承

---

ES6新增

声明变量：let（其声明变量处于块级作用域，且防止循环变量变成全局变量，不存在变量提升，let声明的变量会暂时性死区，var不具备块级作用域特性）
声明常量：const（其声明常量处于块级作用域，声明常量必须赋初始值，简单数据类型赋值后不能更改，复杂数据类型赋值后不能替换只能更改内部值）

• 关键字区别：

  • var（作用域在该语句所在函数内，且存在变量提升现象，值可更改）
  • let（作用域在该语句所在代码块内，不存在变量提升现象，值可更改）
  • const（作用域在该语句所在代码块内，不存在变量提升现象，值不可更改）

• 解构赋值（提取数组或对象的值按照对应位置对变量赋值）

  • 数组解构（对象也可解构）：let [变量1，变量2，变量3] = [值1, 值2, 值3]（变量没有对应值返回undefined）
  • 对象解构：let 变量名 = {属性: 值}; let {属性1, 属性2} = 变量名;

箭头函数（定义函数方式）：如果函数体只有一句代码，且代码执行结果就是函数返回值（return），函数体大括号可省略，如果形参只有1个小括号也可以省略，箭头函数不绑定this，如果箭头函数中使用this则执行箭头函数定义位置中的this

() => {}
const fn = (形参) =>{函数体} fn();

剩余参数：没有形参对应的实参会表示为数组，接受没有对应实参的形参前面加…，剩余参数可以和解构配合使用
扩展运算符：可以将数组拆分成以逗号分隔的参数序列（可以用于合并数组）let 变量名 = [...数组名1, ...数组名2];或被追加数组名1.push(...追加数组名2);，可以将伪数组转换成真正的数组var 数组名 = [...伪数组名];
构造函数方法：Array.from(转换对象, 参数)（可以将伪数组转换成真正的数组，第二个参数可以为箭头函数用来对每个元素处理然后将处理后的值返回数组）
查找第一个符合条件的数组成员：find();（没有找到返回undefined）
查找第一个符合条件的数组成员索引号：findIndex();（没有找到返回-1）
判断某个数组是否包含给定值：[参数1, 参数…].includes(查找值)（包含返回true否则返回false）
模板字符串：let 变量名 = 字符串${};（使用反引号定义，可以解析变量，字符串拼接可以直接添加${另一个变量名}，可以直接换行，可以调用函数）

• 判断参数字符串在原字符串头尾：
  • 在头部：变量名.startsWith(‘参数’)（在头部则返回true否则返回false）
  • 在尾部：变量名.endWith(‘参数’)（在头部则返回true否则返回false）
    重复字符串：‘原字符串’.repeat(n)（将原字符串重复n次返回一个新字符串）
• set数据结构：const 变量名 = new Set(参数)（set类似数组，成员唯一可以用来查重，参数可为空或数组用来初始化，size指参数里有几个不重复的值）
  • 添加值：add(值)（添加值返回set结构）
  • 删除值：delete(值)（删除值返回true表示删除成功）
  • 查找值：has(值)（set结构中有值则返回true）
  • 清除值：clear()（清除set结构中所有值）
    遍历：变量名.forEach(箭头函数)（没有返回值）

---

ES5

• 数组方法：
  • 迭代（遍历）方法：forEach()、map()、filter()、some()、every()
    • 遍历数组：数组名.forEach(function(数组当前项值, 数组当前项索引号, 数组对象本身){})
    • 筛选数组：数组名.filter(function(数组当前项值, 数组当前项索引号, 数组对象本身){return 数组当前项值的筛选条件})（创建一个新数组并，主要用于筛选，返回一个新数组）
    • 检测特定元素数组：数组名.some(function(数组当前项值, 数组当前项索引号, 数组对象本身){return 数组当前项值的筛选条件})（找到特定元素返回true否则返回false，找到第一个满足条件元素则终止循环，返回一个新数组）
    • some遇到return true会终止遍历，迭代效率高，forEach和filter里面return不会终止迭代
• 字符串方法：
  • 删除字符串左右两侧空格：变量名.trim()（该方法不影响字符串本身，返回一个新字符串）
• 对象方法：
  • 获取对象自身所有属性：Object.key(目标对象名)（类似for…in，返回一个属性名组成的数组）
  • 添加修改对象中属性：

Object.definProperty(目标对象名, 目标对象属性名, {
      value: 值,（设置属性值）
      writable: true/false,（值是否可以重写，默认不可以为false）
      enumerable: true/false,（目标对象属性是否可以枚举，默认不可以为false）
      configurable: true/false,（目标对象属性是否可以被删除或再次修改，默认不可以为false）
    }（目标属性特性）)

（目标属性特性以对象形式{}书写）

---

函数的定义和调用

• 函数的定义方式：
  • 自定义函数（命名函数）：function 函数名(){};
  • 函数表达式（匿名函数）：var 变量名 = function(){};
  • 构造函数（构造函数里的都是字符串形式，效率较低）：

  var 变量名 = new 函数名('参数1'，'参数2', '函数体')
  变量名()

• 函数内this指向：指向调用者
  • 普通函数/定时器函数/立即执行函数调用：window
  • 构造函数调用：实例对象（原型对象方法也指向实例对象）
  • 对象方法调用：方法所属对象
  • 事件绑定方法调用：事件绑定对象
• 改变函数内this指向：bind()、call()、apply()（该方法调用一个对象替换函数的this指向）
  • fun.call(目标对象，参数1，参数2，...)（可以调用函数，可以改变函数内this指向，常用于继承）
  • fun.apply(函数运行指定this值, 参数)（可以调用函数，参数必须包是数组，返回值等于函数返回值，可借助数学内置对象求最值）
  • fun.bind(函数运行指定this值, 参数1，参数2，...)（不调用原来函数，可以改变原来函数内部this指向，返回原函数改变this后的新函数，需要一个变量接住新函数再调用，定时器函数常用）
• 严格模式：消除不合理，禁用保留字
  • 开启脚本严格模式：在所有语句之前放入’use strict’或在立即执行函数第一行放入’use strict’或在某个函数内第一行’use strict’为某单个函数开启严格模式（单引双引都可以）
    • 严格模式变化：
      • 变量：必须先声明，严禁删除声明变量
      • this指向：全局作用域指向window对象的this指向了undefined，构造函数不加new不可以调用且this会报错，new实例化构造函数指向创建的对象实例，定时器this不变，事件、对象依旧指向调用者
      • 函数变化1：参数不允许重名，函数必须声明在顶层（不允许在非函数内）
• 高阶函数：将函数作为参数传递给函数或将函数作为返回值输出function 函数名(参数){参数&&函数名()}fn(function(){})或return function(){}
• 闭包：有权访问另一个函数作用域中局部变量的函数（延伸变量作用范围，主要使用return function(){}，立即执行函数为小闭包）
• 递归函数：可以在函数内部调用自身的函数（容易发生栈溢出，必须加return）
  • 浅拷贝：Object.assign(拷贝赋值对象名，被拷贝对象名)（深层次对象只拷贝地址）
  • 深拷贝：

            function 函数名(拷贝赋值对象名, 被拷贝对象名) {
            for (var k in 被拷贝对象名) {
                // 判断我们的属性值属于那种数据类型
                // 1. 获取属性值  被拷贝对象名[k]
                var 变量名 = 被拷贝对象名[k];
                // 2. 判断这个值是否是数组
                if (变量名 instanceof Array) {
                    拷贝赋值对象名[k] = [];
                    函数名(拷贝赋值对象名[k], 变量名)
                } else if (变量名 instanceof Object) {
                    // 3. 判断这个值是否是对象
                    拷贝赋值对象名[k] = {};
                    函数名(拷贝赋值对象名[k], 变量名)
                } else {
                    // 4. 属于简单数据类型
                    拷贝赋值对象名[k] = 变量名;
                }
    
            }
        }

• 函数名(拷贝赋值对象名, 被拷贝对象名);
• 正则表达式：用于匹配字符串中的字符组合的模式（对象，匹配文本，替换敏感词，提取字符串特定部分，用于表单验证，灵活性、逻辑性、功能性非常强，可以用既简单方式达到字符串控制）
  • 创建：注释中间放表达式就是正则字面量
    • 调用RegExp对象的构造函数创建：var 变量名 = new RegExp(/表达式/);
    • 字面量创建：var 变量名 = /表达式/;
  • 测试：正则表达式.test(测试文本)（检测测试文本是否符合正则表达式规范，符合返回true否则false）
  • 组成：简单和特殊字符组合，特殊字符称为元字符有特殊意义
  • 测试工具：http://tool,oschina.net/regex
  • 边界符：提示字符所处位置
    • 匹配行首文本（以谁开始）：^
    • 匹配行尾文本（以谁结束）：${（}^{和}$一起则表示精确匹配）
  • 字符类：[字符]（表示有一系列字符可供选择，但只能匹配一个）/[字符-字符]（表示有范围内字符可供选择，但只能匹配一个）/[^{字符-字符]（中括号内}为取反）
  • 量词符：设定某个模式出现的次数（{}中间不能有空格）
    • 重复零次或更多次：*
    • 重复一次或更多次：+
    • 重复零次或一次：?
    • 重复n次：{n}
    • 重复n次或更多次：{n,}
    • 重复n次到m次：{n,m}
  • 预定义类：
    • 匹配0~9任一数字：\d（相当于[0-9]）
    • 匹配0~9以外字符：\D（相当于[^0-9]）
    • 匹配任意字母、数字和下划线：\w（相当于[A-Za-z0-9_]）
    • 匹配除字母、数字和下划线以外字符：\W（相当于[^A-Za-z0-9_]）
    • 匹配空格（包括换行符、制表符、空格符）：\s（相当于[\t\r\n\v\f]）
    • 匹配非空格字符：\S（相当于[^\t\r\n\v\f]）
  • 正则表达式或者字符串：
  • 检索：检索字符串变量名.exec(被检索字符串变量名)（有匹配值返回匹配值否则返回null）
  • 替换：目标参数.replace(被替换参数或正则表达式, 替换为的字符串)（返回一个替换完毕的新字符串）
  • 正则表达式参数：/表达式/修饰符（修饰符为g则全局匹配，修饰符为i则忽略大小写，修饰符为gi则全局匹配+忽略大小写）
  • 括号总结：
    • 大括号：量词符，里面表示重复次数
    • 中括号：字符集合，匹配方括号中的任意字符
    • 小括号：表示优先级