JavaScript高级（二） 1.构造函数和原型1.1对象的三种创建方式--复习字面量方式var obj = {};new关键字var obj = new Object();构造函数方式function Person(name,age){ this.name = name; this.age = age; } var obj = new Person('zs',12);1.2静态成员和实例成员1.2.1实例成员实例成员就是构造函数内部通过this添加的成员 如下列代码中uname age sing 就是实例成员,实例成员只能通过实例化的对象来访问 function Star(uname, age) { this.uname = uname; this.age = age; this.sing = function() { console.log('我会唱歌'); } } var ldh = new Star('刘德华', 18); console.log(ldh.uname);//实例成员只能通过实例化的对象来访问1.2.2静态成员静态成员 在构造函数本身上添加的成员 如下列代码中 sex 就是静态成员,静态成员只能通过构造函数来访问 function Star(uname, age) { this.uname = uname; this.age = age; this.sing = function() { console.log('我会唱歌'); } } Star.sex = '男'; var ldh = new Star('刘德华', 18); console.log(Star.sex);//静态成员只能通过构造函数来访问1.3构造函数的问题构造函数方法很好用，但是存在浪费内存的问题。1.4构造函数原型prototype构造函数通过原型分配的函数是所有对象所共享的。JavaScript 规定，每一个构造函数都有一个prototype 属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。function Star(uname, age) { this.uname = uname; this.age = age; } Star.prototype.sing = function() { console.log('我会唱歌'); } var ldh = new Star('刘德华', 18); var zxy = new Star('张学友', 19); ldh.sing();//我会唱歌 zxy.sing();//我会唱歌1.5对象原型对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。 __proto__对象原型和原型对象 prototype 是等价的 __proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype1.6constructor构造函数对象原型（ __proto__）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性 ，constructor 我们称为构造函数，因为它指回构造函数本身。 constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。 一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了。此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数如: function Star(uname, age) { this.uname = uname; this.age = age; } // 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数 Star.prototype = { // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数 constructor: Star, // 手动设置指回原来的构造函数 sing: function() { console.log('我会唱歌'); }, movie: function() { console.log('我会演电影'); } } var zxy = new Star('张学友', 19); console.log(zxy)以上代码运行结果,设置constructor属性如图:如果未设置constructor属性,如图:1.7原型链​ 每一个实例对象又有一个__proto__属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有__proto__属性，这样一层一层往上找就形成了原型链。1.8构造函数实例和原型对象三角关系1.构造函数的prototype属性指向了构造函数原型对象 2.实例对象是由构造函数创建的,实例对象的__proto__属性指向了构造函数的原型对象 3.构造函数的原型对象的constructor属性指向了构造函数,实例对象的原型的constructor属性也指向了构造函数1.9原型链和成员的查找机制任何对象都有原型对象,也就是prototype属性,任何原型对象也是一个对象,该对象就有__proto__属性,这样一层一层往上找,就形成了一条链,我们称此为原型链;当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。 如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。 如果还没有就查找原型对象的原型（Object的原型对象）。 依此类推一直找到 Object 为止（null）。 __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。1.10原型对象中this指向构造函数中的this和原型对象的this,都指向我们new出来的实例对象function Star(uname, age) { this.uname = uname; this.age = age; } var that; Star.prototype.sing = function() { console.log('我会唱歌'); that = this; } var ldh = new Star('刘德华', 18); // 1. 在构造函数中,里面this指向的是对象实例 ldh console.log(that === ldh);//true // 2.原型对象函数里面的this 指向的是 实例对象 ldh1.11通过原型为数组扩展内置方法 Array.prototype.sum = function() { var sum = 0; for (var i = 0; i < this.length; i++) { sum += this[i]; } return sum; }; //此时数组对象中已经存在sum()方法了 可以始终 数组.sum()进行数据的求2.继承2.1call()call()可以调用函数call()可以修改this的指向,使用call()的时候 参数一是修改后的this指向,参数2,参数3..使用逗号隔开连接 function fn(x, y) { console.log(this); console.log(x + y); } var o = { name: 'andy' }; fn.call(o, 1, 2);//调用了函数此时的this指向了对象o,2.2子构造函数继承父构造函数中的属性先定义一个父构造函数再定义一个子构造函数子构造函数继承父构造函数的属性(使用call方法) // 1. 父构造函数 function Father(uname, age) { // this 指向父构造函数的对象实例 this.uname = uname; this.age = age; } // 2 .子构造函数 function Son(uname, age, score) { // this 指向子构造函数的对象实例 3.使用call方式实现子继承父的属性 Father.call(this, uname, age); this.score = score; } var son = new Son('刘德华', 18, 100); console.log(son);2.3借用原型对象继承方法先定义一个父构造函数再定义一个子构造函数子构造函数继承父构造函数的属性(使用call方法)// 1. 父构造函数 function Father(uname, age) { // this 指向父构造函数的对象实例 this.uname = uname; this.age = age; } Father.prototype.money = function() { console.log(100000); }; // 2 .子构造函数 function Son(uname, age, score) { // this 指向子构造函数的对象实例 Father.call(this, uname, age); this.score = score; } // Son.prototype = Father.prototype; 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化 Son.prototype = new Father(); // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数 Son.prototype.constructor = Son; // 这个是子构造函数专门的方法 Son.prototype.exam = function() { console.log('孩子要考试'); } var son = new Son('刘德华', 18, 100); console.log(son);如上代码结果如图:3.ES5新增方法3.1数组方法forEach遍历数组 arr.forEach(function(value, index, array) { //参数一是:数组元素 //参数二是:数组元素的索引 //参数三是:当前的数组 }) //相当于数组遍历的 for循环 没有返回值3.2数组方法filter过滤数组 var arr = [12, 66, 4, 88, 3, 7]; var newArr = arr.filter(function(value, index,array) { //参数一是:数组元素 //参数二是:数组元素的索引 //参数三是:当前的数组 return value >= 20; }); console.log(newArr);//[66,88] //返回值是一个新数组3.3数组方法somesome 查找数组中是否有满足条件的元素 var arr = [10, 30, 4]; var flag = arr.some(function(value,index,array) { //参数一是:数组元素 //参数二是:数组元素的索引 //参数三是:当前的数组 return value < 3; }); console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环3.4筛选商品案例定义数组对象数据var data = [{ id: 1, pname: '小米', price: 3999 }, { id: 2, pname: 'oppo', price: 999 }, { id: 3, pname: '荣耀', price: 1299 }, { id: 4, pname: '华为', price: 1999 }, ];使用forEach遍历数据并渲染到页面中data.forEach(function(value) { var tr = document.createElement('tr'); tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'; tbody.appendChild(tr); });根据价格筛选数据获取到搜索按钮并为其绑定点击事件search_price.addEventListener('click', function() { });使用filter将用户输入的价格信息筛选出来search_price.addEventListener('click', function() { var newDate = data.filter(function(value) { //start.value是开始区间 //end.value是结束的区间 return value.price >= start.value && value.price <= end.value; }); console.log(newDate); });将筛选出来的数据重新渲染到表格中将渲染数据的逻辑封装到一个函数中function setDate(mydata) { // 先清空原来tbody 里面的数据 tbody.innerHTML = ''; mydata.forEach(function(value) { var tr = document.createElement('tr'); tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'; tbody.appendChild(tr); }); }将筛选之后的数据重新渲染 search_price.addEventListener('click', function() { var newDate = data.filter(function(value) { return value.price >= start.value && value.price <= end.value; }); console.log(newDate); // 把筛选完之后的对象渲染到页面中 setDate(newDate); });根据商品名称筛选获取用户输入的商品名称为查询按钮绑定点击事件,将输入的商品名称与这个数据进行筛选 search_pro.addEventListener('click', function() { var arr = []; data.some(function(value) { if (value.pname === product.value) { // console.log(value); arr.push(value); return true; // return 后面必须写true } }); // 把拿到的数据渲染到页面中 setDate(arr); })3.5some和forEach区别如果查询数组中唯一的元素, 用some方法更合适,在some 里面 遇到 return true 就是终止遍历 迭代效率更高在forEach 里面 return 不会终止迭代3.6trim方法去除字符串两端的空格var str = ' hello ' console.log(str.trim()） //hello 去除两端空格 var str1 = ' he l l o ' console.log(str.trim()） //he l l o 去除两端空格3.7获取对象的属性名Object.keys(对象) 获取到当前对象中的属性名 ，返回值是一个数组 var obj = { id: 1, pname: '小米', price: 1999, num: 2000 }; var result = Object.keys(obj) console.log(result)//[id，pname,price,num]3.8Object.definePropertyObject.defineProperty设置或修改对象中的属性Object.defineProperty(对象，修改或新增的属性名，{ value:修改或新增的属性的值, writable:true/false,//如果值为false 不允许修改这个属性值 enumerable: false,//enumerable 如果值为false 则不允许遍历 configurable: false //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性 })

JavaScript高级（一） 1.面向过程与面向对象1.1面向过程面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。1.2面向对象面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。1.3面向过程与面向对象对比 面向过程面向对象优点性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护缺点不易维护、不易复用、不易扩展性能比面向过程低2.对象与类2.1对象对象是由属性和方法组成的：是一个无序键值对的集合,指的是一个具体的事物属性：事物的特征，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中用方法来表示（常用动词）2.1.1创建对象//以下代码是对对象的复习 //字面量创建对象 var ldh = { name: '刘德华', age: 18 } console.log(ldh); //构造函数创建对象 function Star(name, age) { this.name = name; this.age = age; } var ldh = new Star('刘德华', 18)//实例化对象 console.log(ldh); 如上两行代码运行结果为:2.2类在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个，通过类实例化一个具体的对象2.2.1创建类语法://步骤1 使用class关键字 class name { // class body } //步骤2使用定义的类创建实例 注意new关键字 var xx = new name(); 示例 // 1. 创建类 class 创建一个 明星类 class Star { // 类的共有属性放到 constructor 里面 constructor(name, age) { this.name = name; this.age = age; } } // 2. 利用类创建对象 new var ldh = new Star('刘德华', 18); console.log(ldh);以上代码运行结果: 通过结果我们可以看出,运行结果和使用构造函数方式一样2.2.2类创建添加属性和方法 // 1. 创建类 class 创建一个类 class Star { // 类的共有属性放到 constructor 里面 constructor是 构造器或者构造函数 constructor(uname, age) { this.uname = uname; this.age = age; }//------------------------------------------->注意,方法与方法之间不需要添加逗号 sing(song) { console.log(this.uname + '唱' + song); } } // 2. 利用类创建对象 new var ldh = new Star('刘德华', 18); console.log(ldh); // Star {uname: "刘德华", age: 18} ldh.sing('冰雨'); // 刘德华唱冰雨以上代码运行结果:注意哟:通过class 关键字创建类, 类名我们还是习惯性定义首字母大写类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数多个函数方法之间不需要添加逗号分隔生成实例 new 不能省略语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function2.2.3类的继承语法// 父类 class Father{ } // 子类继承父类 class Son extends Father { } 示例class Father { constructor(surname) { this.surname= surname; } say() { console.log('你的姓是' + this.surname); } } class Son extends Father{ // 这样子类就继承了父类的属性和方法 } var damao= new Son('刘'); damao.say(); //结果为 你的姓是刘以上代码运行结果:子类使用super关键字访问父类的方法//定义了父类 class Father { constructor(x, y) { this.x = x; this.y = y; } sum() { console.log(this.x + this.y); } } //子元素继承父类 class Son extends Father { constructor(x, y) { super(x, y); //使用super调用了父类中的构造函数 } } var son = new Son(1, 2); son.sum(); //结果为3注意:继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super 调用父类的构造函数,super 必须在子类this之前调用 // 父类有加法方法 class Father { constructor(x, y) { this.x = x; this.y = y; } sum() { console.log(this.x + this.y); } } // 子类继承父类加法方法 同时 扩展减法方法 class Son extends Father { constructor(x, y) { // 利用super 调用父类的构造函数 super 必须在子类this之前调用,放到this之后会报错 super(x, y); this.x = x; this.y = y; } subtract() { console.log(this.x - this.y); } } var son = new Son(5, 3); son.subtract(); //2 son.sum();//8以上代码运行结果为:时刻注意this的指向问题,类里面的共有的属性和方法一定要加this使用.constructor中的this指向的是new出来的实例对象自定义的方法,一般也指向的new出来的实例对象绑定事件之后this指向的就是触发事件的事件源在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象3.面向对象版tab 栏切换3.1功能需求点击 tab栏,可以切换效果.点击 + 号, 可以添加 tab 项和内容项.点击 x 号, 可以删除当前的tab项和内容项.双击tab项文字或者内容项文字可以修改里面的文字内容3.2案例准备获取到标题元素获取到内容元素获取到删除的小按钮 x号新建js文件,定义类,添加需要的属性方法(切换,删除,增加,修改)时刻注意this的指向问题3.3切换为获取到的标题绑定点击事件,展示对应的内容区域,存储对应的索引 this.lis[i].index = i; this.lis[i].onclick = this.toggleTab;使用排他,实现只有一个元素的显示 toggleTab() { //将所有的标题与内容类样式全部移除 for (var i = 0; i < this.lis.length; i++) { this.lis[i].className = ''; this.sections[i].className = ''; } //为当前的标题添加激活样式 this.className = 'liactive'; //为当前的内容添加激活样式 that.sections[this.index].className = 'conactive'; }3.4添加为添加按钮+ 绑定点击事件 this.add.onclick = this.addTab;实现标题与内容的添加,做好排他处理addTab() { that.clearClass(); // (1) 创建li元素和section元素 var random = Math.random(); var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"> </span></li>'; var section = '<section class="conactive">测试 ' + random + '</section>'; // (2) 把这两个元素追加到对应的父元素里面 that.ul.insertAdjacentHTML('beforeend', li); that.fsection.insertAdjacentHTML('beforeend', section); that.init(); }3.5删除为元素的删除按钮x绑定点击事件 this.remove[i].onclick = this.removeTab;获取到点击的删除按钮的所在的父元素的所有,删除对应的标题与内容 removeTab(e) { e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件 var index = this.parentNode.index; console.log(index); // 根据索引号删除对应的li 和section remove()方法可以直接删除指定的元素 that.lis[index].remove(); that.sections[index].remove(); that.init(); // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变 if (document.querySelector('.liactive')) return; // 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态 index--; // 手动调用我们的点击事件 不需要鼠标触发 that.lis[index] && that.lis[index].click(); }3.6编辑为元素(标题与内容)绑定双击事件 this.spans[i].ondblclick = this.editTab; this.sections[i].ondblclick = this.editTab;在双击事件处理文本选中状态,修改内部DOM节点,实现新旧value值的传递editTab() { var str = this.innerHTML; // 双击禁止选定文字 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // alert(11); this.innerHTML = '<input type="text" />'; var input = this.children[0]; input.value = str; input.select(); // 文本框里面的文字处于选定状态 // 当我们离开文本框就把文本框里面的值给span input.onblur = function() { this.parentNode.innerHTML = this.value; }; // 按下回车也可以把文本框里面的值给span input.onkeyup = function(e) { if (e.keyCode === 13) { // 手动调用表单失去焦点事件 不需要鼠标离开操作 this.blur(); } } }

jQuery jQuery 的入口函数$(function () { ... // 此处是页面 DOM 加载完成的入口 }) ; $(document).ready(function(){ ... // 此处是页面DOM加载完成的入口 }); 1.等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。 2.相当于原生 js 中的 DOMContentLoaded。 3.不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。更推荐使用第一种方式。jQuery 的顶级对象 $1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。 2.$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用 jQuery 的方法。jQuery 对象和 DOM 对象用原生 JS 获取来的对象就是 DOM 对象jQuery 方法获取的元素就是 jQuery 对象。jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。 注意： 只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。DOM对象与jQuery对象相互转换DOM 对象与 jQuery 对象之间是可以相互转换的。 因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把 jQuery对象转换为DOM对象才能使用。DOM 对象转换为 jQuery 对象： $(DOM对象) $('div') jQuery 对象转换为 DOM 对象（两种方式）$('div') [index] index 是索引号 $('div') .get(index) index 是索引号 jQuery 基础选择器原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号 名称用法描述ID选择器$("#id")获取指定ID的元素全选选择器$('*')匹配所有元素类选择器$(" .cass")获取同一类class的元素标签选择器$("div")获取同一类标签的所有元素并集选择器$("div,p,li")选取多个元素交集选择器$("li.current")交集元素子代选择器$("ul>li")使用>号，获取亲儿子层级的元素; 注意，并不会获取孙子层级的元素后代选择器$("ul li")使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等jQuery 设置样式$('div').css('属性', '值') 隐式迭代（重要）遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作， 方便我们调用。jQuery 筛选选择器语法用法描述:first$('li:first')获取第一个li元素:last$('li:last')获取最后一个li元素:eq(index)$("li:eq(2)")获取到的li元素中，选择索引号为2的元素，索引号index从0开始。:odd$("li:odd")获取到的li元素中，选择索引号为奇数的元素:even$("Ii:even")获取到的li元素中，选择索引号为偶数的元素jQuery 筛选方法（重点）语法用法说明parent()$("li").parent();查找父级children(selector)$("ul").children("li")相当于$("ul>li")，最近一级（亲儿子)find(selector)$("u1").find("li");相当于$("ul li"),后代选择器siblings(selector)$(".first").siblings("li");查找兄弟节点，不包括自己本身nextAll([expr])$(".first").nextAll()查找当前元素之后所有的同辈元素prevtAll([expr])$(".last").prevAll()查找当前元素之前所有的同辈元素hasClass(class)$( 'div'). hasClass("protected")检查当前的元素是否含有某个特定的类，如果有，则返回trueeq(index)$("li").eq(2);相当于$("li:eq(2)") , index 从0开始重点记住： parent() children() find() siblings() eq() jQuery 里面的排他思想想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。$(this).css(“color ”,” red ”); $(this).siblings(). css(“ color ”,””); 链式编程链式编程是为了节省代码量，看起来更优雅。$(this).css('color', 'red').sibling().css('color', ''); 操作 css 方法jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。参数只写属性名，则是返回属性值$(this).css(''color''); 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号$(this).css(''color'', ''red''); 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号，$(this).css({ "color":"white","font-size":"20px"}); 设置类样式方法作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。添加类 $(“div”).addClass('current'); 移除类 $(“div”).removeClass('current'); 切换类 $(“div”).toggleClass('current'); 类操作与className区别原生 JS 中 className 会覆盖元素原先里面的类名。 jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。显示隐藏效果 显示语法规范 show([speed,[easing],[fn]]) 显示参数 （1）参数都可以省略， 无动画直接显示。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。隐藏语法规范 hide([speed,[easing],[fn]]) 隐藏参数 （1）参数都可以省略， 无动画直接显示。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。切换语法规范 toggle([speed,[easing],[fn]]) 切换参数 （1）参数都可以省略， 无动画直接显示。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。 建议：平时一般不带参数，直接显示隐藏即可。滑动效果下滑效果语法规范 slideDown([speed,[easing],[fn]]) 下滑效果参数 （1）参数都可以省略。 （2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。上滑效果语法规范 slideUp([speed,[easing],[fn]]) 上滑效果参数 （1）参数都可以省略。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。滑动切换效果语法规范 slideToggle([speed,[easing],[fn]]) 滑动切换效果参数 （1）参数都可以省略。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。事件切换hover([over,]out) （1）over:鼠标移到元素上要触发的函数（相当于mouseenter） （2）out:鼠标移出元素要触发的函数（相当于mouseleave） （3）如果只写一个函数，则鼠标经过和离开都会触发它动画队列及其停止排队方法动画或效果队列 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。停止排队 stop() (1）stop() 方法用于停止动画或效果。 (2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。淡入淡出效果淡入效果语法规范 fadeIn([speed,[easing],[fn]]) 淡入效果参数 （1）参数都可以省略。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。淡出效果语法规范 fadeOut([speed,[easing],[fn]]) 淡出效果参数 （1）参数都可以省略。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。淡入淡出切换效果语法规范 fadeToggle([speed,[easing],[fn]]) 淡入淡出切换效果参数 （1）参数都可以省略。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。渐进方式调整到指定的不透明度 fadeTo([[speed],opacity,[easing],[fn]]) 效果参数 （1）opacity 透明度必须写，取值 0~1 之间。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。自定义动画 animate语法 animate(params,[speed],[easing],[fn]) 参数 （1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。 （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。 （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。设置或获取元素固有属性值 prop()所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 元素里面的 type。 获取属性语法 prop('属性') 设置属性语法 prop('属性', '属性值') 设置或获取元素自定义属性值 attr()用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。获取属性语法 attr('属性') // 类似原生 getAttribute() 设置属性语法 attr('属性', '属性值') // 类似原生 setAttribute() 改方法也可以获取 H5 自定义属性数据缓存 data()data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。 附加数据语法 data('name','value') // 向被选元素附加数据 获取数据语法 date('name') // 向被选元素获取数据 同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型jQuery 内容文本值主要针对元素的内容还有表单的值操作。普通元素内容 html()（ 相当于原生inner HTML) html() // 获取元素的内容 html('内容') // 设置元素的内容 普通元素文本内容 text() (相当与原生 innerText) text() // 获取元素的文本内容 text('文本内容') // 设置元素的文本内容 表单的值 val()（ 相当于原生value) val() // 获取表单的值 val('内容') // 设置表单的值 jQuery 元素操作遍历元素jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。 语法1： $("div").each(function (index, domEle) { xxx; })each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle) 语法2： $.each(object，function (index, element) { xxx; }） $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容创建元素语法：$(''<li></li>''); 动态的创建了一个 添加元素内部添加 element.append(''内容'') 把内容放入匹配元素内部最后面，类似原生 appendChild。element.prepend(''内容'') 把内容放入匹配元素内部最前面。外部添加 element.after(''内容'') // 把内容放入目标元素后面 element.before(''内容'') // 把内容放入目标元素前面 ①内部添加元素，生成之后，它们是父子关系。 ②外部添加元素，生成之后，他们是兄弟关系。删除元素element.remove() // 删除匹配的元素（本身） element.empty() // 删除匹配的元素集合中所有的子节点 element.html('''') // 清空匹配的元素内容 ①remove 删除元素本身。 ②empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。jQuery 尺寸以上参数为空，则是获取相应值，返回的是数字型。如果参数为数字，则是修改相应值。 参数可以不必写单位。 jQuery 位置 位置主要有三个： offset()、position()、scrollTop()/scrollLeft()offset() 设置或获取元素偏移①offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。 ②该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。 ③可以设置元素的偏移：offset({ top: 10, left: 30 }); 位置主要有三个： offset()、position()、scrollTop()/scrollLeft()position() 获取元素偏移①position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。 ②该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定 位父级左侧的距离。 ③该方法只能获取。 位置主要有三个： offset()、position()、scrollTop()/scrollLeft()scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧①scrollTop() 方法设置或返回被选元素被卷去的头部。 ②不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。 单个事件注册 语法： element.事件(function(){}) $(“div”).click(function(){ 事件处理程序 }) 其他事件和原生基本一致。 比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等 事件处理 on() 绑定事件 on() 方法在匹配元素上绑定一个或多个事件的事件处理函数 语法： element.on(events,[selector],fn)events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。selector: 元素的子元素选择器 。fn:回调函数 即绑定在元素身上的侦听函数。 on() 方法优势1： 可以绑定多个事件，多个处理事件处理程序。 $(“div”).on({ mouseover: function(){}, mouseout: function(){}, click: function(){} });如果事件处理程序相同 $(“div”).on(“mouseover mouseout”, function(){$(this).toggleClass(“current”); });on() 方法优势2： 可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。 $('ul').on('click', 'li', function() { alert('hello world!'); }); 在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。 on() 方法优势3： 动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件 $(“div").on("click",”p”, function(){ alert("俺可以给动态生成的元素绑定事件") }); $("div").append($("我是动态创建的p"));事件处理 off() 解绑事件 off() 方法可以移除通过 on() 方法添加的事件处理程序。 $("p").off() // 解绑p元素所有事件处理程序 $("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名 $("ul").off("click", "li"); // 解绑事件委托 如果有的事件只想触发一次， 可以使用 one() 来绑定事件。自动触发事件 trigger() 有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标 点击触发。 element.click() // 第一种简写形式 element.trigger("type") // 第二种自动触发模式 $("p").on("click", function () { alert("hi~"); }); $("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击 有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标 点击触发。 element.triggerHandler(type) // 第三种自动触发模式 triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。jQuery 事件对象 事件被触发，就会有事件对象的产生。 element.on(events,[selector],function(event) {}) 阻止默认行为：event.preventDefault() 或者 return false 阻止冒泡： event.stopPropagation() jQuery 对象拷贝 如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用 $.extend() 方法 语法： $.extend([deep], target, object1, [objectN])deep: 如果设为true 为深拷贝， 默认为false 浅拷贝target: 要拷贝的目标对象object1:待拷贝到第一个对象的对象。objectN:待拷贝到第N个对象的对象。浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象。jQuery 多库共存问题概述： jQuery使用$作为标示符，随着jQuery的流行,其他 js 库也会用这$作为标识符， 这样一起使用会引起冲突。 客观需求： 需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。 jQuery 解决方案：把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'')jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();jQuery 插件 jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。 jQuery 插件常用的网站：jQuery 插件库 http://www.jq22.com/jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤：引入相关文件。（jQuery 文件 和 插件文件）复制相关html、css、js (调用插件)。