为甚嚒要学习jQuery？
因为JS中有很多痛点：
- window.onload事件只能出现一次，如果出现多次，后面的事件会覆盖掉前面的事件；
- 代码容错性差，如果获取标签发生错误，会影响后续代码执行；
- 浏览器兼容性问题：如innerText等；
- 简单功能实现很繁琐，如渐变的动画效果。
jQuery是什么？
jQuery描述（理解）
- jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率；
- Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。
学习jQuery，主要学习什么内容？
- 目前这个阶段，主要学习如何来使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能方法，这些方法叫做API（Application Programming Interface应用程序编程接口）。
- 这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加
小括号()，小括号里面是相应的参数，参数不同，功能不同。
jQuery网站
- 官网：http://jquery.com/
- 汉化：http://www.css88.com/jqapi-1.9/
- 在线API：http://api.jquery.com/
jQuery特点
- 链式编程；
- 隐式迭代（遍历）。
如何使用jQuery重点
三个步骤：
- 引包
- 入口函数
- 功能实现代码（事件处理）
$(document).ready(function (){ //入口函数
//功能实现代码（事件处理）
//获取元素和绑定事件（通过方法实现）
事件源.事件(function(){
//事件处理程序
});
});
- 体验：
//引包
入口函数
- 入口函数一：文档加载完毕，图片没有加载时就可以调用：
$(document).ready(function () {
//code;
});
- 入口函数二：是入口函数一的简写，作用和入口函数一相同：
$(fucntion (){
//code
});
- 入口函数三：文档加载完毕，图片也加载完毕时候执行：
$(window).ready(function (){
//code;
});
- 原生js入口函数，页面上所有内容加载完毕时候执行（不仅文本加载完毕，而且图片也要加载完毕时候才执行函数）：
window.onload = function (){
//code;
};
- jQuery入口函数和js入口函数的区别（理解）
- 书写个数不同：js入口函数只能出现一次，出现多次会存在事件覆盖的问题（其它函数也都会出现覆盖的问题，除了addEventListener、attachEvent方法）；jQuery的入口函数可以出现任意多次，并不会存在事件覆盖问题。
- 执行时机不同：js入口函数是在所有的文件资源加载完成后，才执行（这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等）；jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成，如果想要所有的资源都加载完毕后再执行就用入口函数三。
jQuery的$符号重点
- js命名规范允许出现的字符有：数字、字母、下划线、$（不能以数字开头）；
- jQuery中$是一个函数，和jQuery的值基本一样
$===jQuery的值为true； - jQuery中使用$的原因：书写简洁，相对于其它字符更容易被记住。
- 怎么理解jQuery中的$符号：
- $实际上是一个函数名；
$(); //调用我们自定义的函数$
$(document).ready(function(){}); //调用入口函数
$(function(){}); //调用入口函数
$(window).ready(function(){}); //调用入口函数
$("#btnStyle"); //获取id属性为btnStyle的元素
$("div"); //获取所有的div元素
$(".content"); //获取类名为content(包含即可)的元素
jQuery对象(jQuery中的DOM对象)和js中的DOM对象的区别和联系重点！！！难点
jQuery对象是一个数组，数组中包含着原生js中的DOM对象；
jQuery中有css()方法，原生js没有，因为jQuery有一层功能皮肤，
jqDiv.css({"width":100});;jQuery中DOM对象和js中DOM对象的转换：
js中DOM对象转换为jQuery中DOM对象，使其皮肤上有功能，然后可以直接使用相应方法，使用$就可以实现转换：
$(js对象)，如：box = $(box);；-
jQuery对象转换为js对象：通过索引值就可以进行转换：
- 方法一：
jQuery对象[索引值];，如：jqDiv[0].style.backgroundColor = "red"; - 方法二：
jQuery对象.get(索引值);，如：jqDiv.get(3).style.backgroundColor = "pink";
- 方法一：
如果想要使用哪种方式(jQuery或者js)设置属性或者方法，必须转换成对应的类型(jQuery类型或者js类型)才能调用。
练习：
隔行变色；
- 马老大今天很漂亮---1---贼老美啦
- 马老大今天很漂亮---2---贼老美啦
- 马老大今天很漂亮---3---贼老美啦
- 马老大今天很漂亮---4---贼老美啦
- 马老大今天很漂亮---5---贼老美啦
- 马老大今天很漂亮---6---贼老美啦
- 马老大今天很漂亮---7---贼老美啦
- 马老大今天很漂亮---8---贼老美啦
- 马老大今天很漂亮---9---贼老美啦
- 马老大今天很漂亮---10---贼老美啦
- 开关灯
jQuery版本
- v1.11.3和v2.1.4是两个大版本的最新版；
- 版本一：1.x版本；版本二：2.x版本；
- 两个版本的最大区别：2.x版本不再支持IE678。
选择器
基本选择器重点
- id选择器：
$("#id名")； - 类选择器：
$(".类名")； - 标签选择器：
$("标签名")； -
jqDiv.css(参数1,参数2);：如果只有一个参数是获取属性值，如果有两个参数是设置属性值。
层级选择器重点，基本过滤选择器
层级选择器
- 空格：后代选择器（所有后代选择器，可以隔代），用法：
$("#jiang li").css("background-color","red");，选择id为jiang的元素的所有后代元素li； -
>：子代选择器，只能是直接下一代。
基本过滤选择器
-
:eq(index)：选择匹配到的元素中索引号为index的一个元素，index从0开始； -
:odd：选择匹配到的元素中索引号为奇数的所有元素； -
:even：选择匹配到的元素中索引号为偶数的所有元素； - 其它的有：
:first/:last/:not()/...
筛选选择器（方法）重点
元素.find(selector)：查找指定元素的所有后代元素（子子孙孙），必须指定参数，如$("#jiang").find("li").css("color","red");：设置id为jiang的元素的所有后代元素li的颜色；children()：查找指定元素的所有直接子元素（亲儿子元素），如$("jiang").children("ul").css("color","red");；siblings()：查找所有兄弟元素（不包括自己），如$("jiang").siblings().css("color","red");；parent()：查找亲父亲元素；eq(index)：查找指定元素的第index个元素，如$("li").eq(2).css("color","red");：选择所有li元素中的第2个；next()：该元素的下一个兄弟元素。练习：
-
下拉菜单（this）；
- jQuery对象绑定的事件中的this也代指js中的对象。
- 鼠标进入高亮，离开恢复（隔行变色）；
- 今天天气真好，我和马老大去放风筝
- 今天天气真好，我和马老大去放风筝
- 今天天气真好，我和马老大去放风筝
- 今天天气真好，我和马老大去放风筝
- 今天天气真好，我和马老大去放风筝
- 今天天气真好，我和马老大去放风筝
- 今天天气真好，我和马老大去放风筝
- 今天天气真好，我和马老大去放风筝
- 今天天气真好，我和马老大去放风筝
- 今天天气真好，我和马老大去放风筝
- 突出展示案例；
练习
- 手风琴；
- 淘宝精品服饰。
jQuery操作DOM
为甚嚒要使用jQuery操作DOM
- 对比js操作DOM和jQuery操作DOM发现，使用jQuery的方式来操作DOM更加的简洁、方便，统一的调用方式方便我们学习，降低我们的学习成本。
重点内容
- 样式和类的操作；
- jQuery动画；
- 节点操作。
样式操作
样式属性操作.css()
- 作用：设置或获取元素的样式属性值；
- 设置样式属性操作：
- 设置单个样式：
$("div").css("background-color","red");
- 第一个参数表示样式属性名称；
- 第二个参数表示样式属性值。
- 设置多个样式：（此种方式也可以用来设置单个）
$("div").css({"background-color":"red","margin":"10px"});
- 参数是{}(`对象`)。
- 获取样式属性值的操作：
$("div").css("background-color");
- 参数表示要获取的
样式属性名称。
类操作
- 添加类样式：
addClass(className) - 为指定元素添加类className：
$(selector).addClass("liItem");
注意：
此处类名不带点，所有类操作的方法类名都不带点;移除类样式：
removeClass(className)-
为指定元素移除类 className:
- 指定参数（类名）：
$(selector).removeClass(“liItem”);
- 不指定参数：表示移除被选中元素的所有类：
$(selector).removeClass();
- 判断有没有类样式：
hasClass(calssName) - 判断指定元素是否包含类 className
$("div").hasClass(“liItem”);
此时，会返回true或false;
有一个div有liItem时就返回true，只有所有的div都没有类liItem时才返回false。
练习：切换背景色（点击一次变换一下，再次点击恢复，可判断也可用toggle实现）。
切换类样式：
toggleClass(className):为指定元素切换类 className，该元素有类则移除，没有指定类则添加:
$(selector).toggleClass(“liItem”);
注意点：
操作类样式的时候，所有的类名，都
不带点（.）;经验：
操作的样式非常少，那么可以通过.css()这个 方法来操作;
操作的样式很多，那么要通过使用类的方式来操作;
如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。类比CSS书写位置（把css从html中分离出来）。
前面内容特色总结：简约、“粗暴”、干净利落、直截了当
案例：图片京东Table栏
jQuery动画
- jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。
隐藏显示动画（通过改变宽高和透明度display来实现）
- show方法：让匹配的方法展示出来
- 用法一：参数为数值类型，表示执行动画时长（从开始到结束的时间）（底层是改变
宽高和透明度）；
$("div").show(2000); //从开始展示到展示结束花费2秒时间（）
- 用法二：参数是字符串类型，是jQuery预设的值，共有三个，分别为：slow(600ms)、normal(400ms)、fast(200ms)，如果传入其它字符串默认为normal；
$("div").show("fast");
- 用法三：参数一可以是数值类型或者字符串类型表示动画执行时间，参数二表示动画执行完毕之后立刻执行的回调函数；
$("div").show(1000,function (){});
- 用法四：不带参数，作用等同于
css("display","block");（底层是通过改变display:block来实现的），此时没有动画效果
$("div").show();
- hide方法：使得匹配元素隐藏
- 四种用法如下：
//方法一
$("div").hide(1000);
//方法二
$("div").hide("slow");
//方法三
$("div").hide("normal",function (){});
//方法四
$("div").hide();
- 显示隐藏进行切换
toggle，用法完全一致。
滑入滑出动画（通过改变高度display来实现）
- 滑入动画效果（联想生活中的卷帘门）：让元素以下拉动画效果展示出来，也有四种用法，这里展示常用的两种
- 用法一：
$("div").slideDown(speed，callback);
- 用法二：
$("div").slideDown();
注意：省略参数或者传入不合法的参数，就会使用默认值400ms（同样适用于slideUp、fadeIn）。
滑出动画效果：让元素以上拉动画效果形式隐藏，也有四种方法，这里不再全部展示
$("div").slideUp(speed,callback);
- 滑入滑出切换动画效果
slideToggle - 如果元素已经隐藏，该方法就相当于slideDown；如果元素已经展示，该方法就相当于slideUp
$("div").slideToggle(speed,callback);
淡入淡出动画（通过改变透明度display来实现）
- 淡入动画效果：让元素以淡淡的的进入视线的方式展示出来，有四种方法；
$("div").fadeIn(speed,callback);
- 淡出动画效果：让元素以渐渐消失的方式隐藏起来，有四种方法
$("div").fadeOut(speed,callback);
- 淡入淡出切换动画效果：通过改变透明度，切换匹配元素的显示和隐藏(完全透明时隐藏)状态；
$("div").fadeToggle("fast",callback);
- 改变透明度到具体的某个值
fadeTo - 与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且
时间参数是必需的！ - 用法有别于其它动画效果；第一个参数表示时长；第二个参数表示透明度，范围：0-1，0为全透明，1为不透明；可以有第三个参数（回调函数）；
$("div").fadeTo(100,0.4);
- 第一个参数为0时，此时的作用相当于：
.css("opacity",.4);；
$("div").fadeTo(0,.4);
- 注意：
- jQuery预设的三组动画效果的语法几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画执行完成后的回调函数;第一个参数是：可以是指定字符或者毫秒数(fadeTo()除外)；
- 展示隐藏：
- 表示展示：show()、fadeIn()、slideDown();
- 表示隐藏：hide()、fadeOut()、slideUp()。
自定义动画
- 注意：所有能够执行动画的属性必须只有一个数字类型的值，如要改变字体的大小，要使用：fontSize（font-size），不要使用font。
$("div").animate(params,speen,callback);
Title
- 作用：执行一组CSS属性的自定义动画;
- 第一个参数表示要执行动画的
CSS属性（必选）（JSON串），不支持背景色；第二个参数表示执行动画时长（可选）；第三个参数表示动画执行完毕之后立即执行的回调函数（可选）：
停止动画stop():停止当前正在执行的动画
如果一个以上的动画方法在同一个元素上调用，那么对这个元素来说，后面的动画将被放到效果队列中。这样就形成了动画队列。（联想：排队进站）
动画队列里面的动画不会全部执行，直到第一个动画执行完成；
第一个参数表示后续动画是否要执行
true:后续动画不执行 ;false:后续动画会执行第二个参数表示当前动画是否执行完
true:立即执行完成当前动画 ;false:立即停止当前动画，一定要注意，是当前动画
$(selector).stop(clearQueue,jumpToEnd);
都不给，默认false；
解释：
当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
如果参数jumpToEnd被设置为true，参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。
注意：如果元素动画还没有执行完，此时调用stop()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。
常用方式：
$(selector).stop();
- 练习：
- 右下角弹出的广告（打开页面广告先滑入再滑出；再淡入，点击关闭按钮后再淡出）；两种方式实现：一种是链式编程，一种是通过函数回调实现。
jQuery节点操作
创建节点
回顾一下js中创建节点的三种方式：
方式一：
document.write();，容易层叠掉已有的元素；方式二：使用
innerHTML或者html属性；方式三：
document.createElement();$()函数的另外一个作用：动态创建元素；方式一：
var $spanNode = $(“我是一个span元素”);
- 类比js中的
document.createElement("span")。 - 方式二：html创建元素（推荐使用，
重点）
var node = $(“#box”).html（“我是li ”）；
- 作用：设置或返回所选元素的html内容（包括 HTML 标记）;
- 设置内容的时候，如果是html标记，会动态创建元素，此时可类比js里面的 innerHTML属性，因为此属性识别html标签；
- 获取html内容
$(selector).html();
添加元素append()（重点）
- 在元素的最后一个子元素后面追加元素；
- 作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）；
- 如果是页面中存在的元素，那么调用append()后，会把这个元素放到相应的目标元素里面去；但是，原来的这个元素，就不存在了；
- 如果是给多个目标追加元素，那么方法的内部会复制多份这个元素，然后追加到多个目标里面去；
- 常用参数：htmlString 或者 jQuery对象；
- 在$(selector)中追加$node
$(selector).append($node);
- 在$(selector)中追加div元素，参数为htmlString
$(selector).append('');
- 不常用操作：（用法跟append()方法基本一致）
-
appendTo(),作用：同append()；
node.appendTo($(selector));
-
prepend(),作用：在元素的第一个子元素前面追加内容或节点;
//方式一：
$(selector).prepend(node);
//方式二：
node.prependTo($(selector));
-
after(),作用：在被选元素$(selector)之后，作为兄弟元素插入内容或节点
$(selector).after(node);
-
before(),作用：在被选元素$(selector)之前，作为兄弟元素插入内容或节点
$(selector).before(node);
清空元素
- 清空指定元素的所有子元素（光杆司令）；
- 方法一：没有参数；
$(selector).empty(); //方式一
$(selector).html(""); //方式二
- “自杀” 把自己（包括所有内部元素）从文档中删除掉；
$(selector).remove();
复制元素
- 作用：复制匹配的元素
- 复制$(selector)所匹配到的元素；
- 返回值为复制的新元素，只有深层复制；
$(selector).clone();
总结：
推荐使用html("")方法来创建元素或者html("")清空元素。练习：
选择水果；
动态创建表格；
动态添加数据；
重点内容
-
val()属性操作； - 时间绑定；
- 事件解绑；
- 事件触发；
- 插件基本使用。
操作form表单
属性操作
- 设置属性
$(selector).attr("title","卡内基梅陇");
第一个参数表示：要设置的属性名称；
第二个参数表示：该属性名称对应的值。
获取属性：返回指定属性的值
$(selector).attr("title");
参数为：要获取属性的名称，该操作会返回指定属性对应的值。
移除属性操作
$(selector).removeAttr("title");
参数为：要移除的属性的名称；
注意：
checked、selected、disabled要使用
.prop()方法;prop方法通常用来影响DOM元素的动态状态，而不是改变的HTML属性;
例如：input和button的disabled特性，以及checkbox的checked特性;
细节参考：http://api.jquery.com/prop/
案例：表格案例全选反选；
值和内容
-
val()方法： - 作用：设置或者返回表单元素的值，例如：input、select、textarea的值；
//获取匹配元素的值，只匹配第一个元素
$(selector).val();
//设置所有匹配到的元素的值
$(selector).val("具体值");
-
text()方法： - 作用：设置或者获取匹配元素的文本内容；
- 方法一：获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！）
$(selector).text();
- 设置操作带参数，参数表示要设置的文本内容
// 如果设置的内容包含html标签（我要动态创建span），那么text这个方法会把他们当作文本内容输出，而不会创建元素。这个text()和html()方的主要区别
$(selector).text(“我是内容”);
- 案例：红鲤鱼与绿鲤鱼
尺寸位置操作
高度和宽度操作
- 高度操作height() ：
- 作用：设置或获取匹配元素的高度值;
- 带参数表示设置高度
$(selector).height(200);
- 不带参数获取高度
$(selector).height();
- 宽度操作width() ：
- 作用：设置或获取匹配元素的宽度值;
- 带参数表示设置宽度;
- 不带参数获取宽度;
$(selector).width(200);
- css()获取高度和height获取高度的区别:
- 方式一：
height()方法返回值为number类型，例如：30；
$("div").height();
- 方式二：
css()方法返回值为string类型，例如："30px"；
$("div").css("height");
- 区别：方式一常用于参与数学计算的情况。
坐标值操作
-
offset(): - 作用：获取或设置元素相对于文档的位置；
- 无参数表示获取，返回值为：
{left:num, top:num}，值是相对于document的位置;
$(selector).offset();
- 有参数表示设置，参数推荐使用数值类型;
$(selector).offset({left:100, top: 150});
注意点：设置offset后，如果元素没有定位(默认值：static)，则被修改为
relative。position():作用：获取相对于其最近的具有定位的父元素的位置;
获取，返回值为对象：{left:num, top:num};
$(selector).position();
注意：只能获取，不能设置。
scrollTop():作用：获取或者设置元素垂直方向滚动的位置；
无参数表示获取偏移；
有参数表示设置偏移，参数为数值类型；
$(selector).scrollTop(100);
-
scrollLeft(): - 作用：获取或者设置元素水平方向滚动的位置;
$(selector).scrollLeft(100);
对scrollTop的理解：
垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。
如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条，那么这个距离为0。案例：固定导航栏
jQuery事件机制
- jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。
jQuery事件的发展历程（了解）
简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >> on
重点；简单事件绑定：
| 事件 | 事件描述 |
|---|---|
| click(handler) | 单击事件 |
| blur(handler) | 失去焦点事件 |
| mouseenter(handler) | 鼠标进入事件 |
| mouseleave(handler) | 鼠标离开事件 |
| dbclick(handler) | 双击事件 |
| change(handler) | 改变事件，如：文本框值改变，下拉列表值改变等 |
| focus(handler) | 获得焦点事件 |
| keydown(handler) | 键盘按下事件 |
其他参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
bind方式（不推荐，1.7以后的jQuery版本被on取代）
作用：给匹配到的元素直接绑定事件
// 绑定单击事件处理程序
$("p").bind("click", function(e){
//事件响应方法
});
第一个参数：事件类型;
第二个参数：事件处理程序;
-
比简单事件绑定方式的优势：
- 可以同时绑定多个事件，比如：
bind(“mouseenter mouseleave”, function(){});； - 缺点：要绑定事件的元素必须存在文档中。
- 可以同时绑定多个事件，比如：
delegate方式（特点：性能高，支持动态创建的元素）
作用：给匹配到的元素绑定事件，对支持动态创建的元素有效；
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
第一个参数：selector，要绑定事件的元素；
第二个参数：事件类型；
第三个参数：事件处理函数。
与前两种方式最大的优势：
减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！
on方式（最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用的方式）重点
- jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法；
- 作用：给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点；
- 语法：
- 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）；
- 第二个参数：selector, 执行事件的后代元素；
- 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用；
- 第四个参数：handler，事件处理函数；
$(selector).on(events[,selector][,data],handler);
- 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件;
$(selector).on( "click",“span”, function() {});
- 绑定多个事件
- 表示给$(selector)匹配的元素绑定单击和鼠标进入事件;
$(selector).on(“click mouseenter”, function(){});
事件解绑
-
unbind()方式 - 作用：解绑 bind方式绑定的事件;
- 解绑所有的事件:
$(selector).unbind();
- 解绑指定的事件
$(selector).unbind(“click”);
- undelegate() 方式
- 作用：解绑delegate方式绑定的事件；
- 解绑所有的delegate事件;
$( selector ).undelegate();
- 解绑所有的click事件;
$( selector).undelegate("click"); ```
- off解绑on方式绑定的事件`重点`
- 解绑匹配元素的所有事件:
```js
$(selector).off();
- 解绑匹配元素的所有click事件:
$(selector).off("click");
- 解绑所有代理的click事件，元素本身的事件不会被解绑:
$(selector).off("click", "**" );
事件触发
- 简单事件触发
- 触发 click事件:
$(selector).click();
- trigger方法触发事件，触发浏览器行为：
$(selector).trigger(“click”);
- triggerHandler触发 事件响应方法，不触发浏览器行为，比如:文本框获得焦点的默认行为：
$(selector).triggerHandler(“focus”);
jQuery事件对象介绍
| 事件对象 | 说明 |
|---|---|
| event.data | 传递给事件处理程序的额外数据 |
| event.currentTarget | 等同于this，当前DOM对象 |
| event.pageX | 鼠标相对于文档左部边缘的位置 |
| event.target | 触发事件源，不一定===this |
| event.stopPropagation()； | 阻止事件冒泡 |
| event.preventDefault(); | 阻止默认行为 |
| event.type | 事件类型：click，dbclick… |
| event.which | 鼠标的按键类型：左1 中2 右3 |
| event.keyCode | 键盘按键代码 |
- 案例：按键变色
jQuery补充
链式编程
链式编程原理：return this;
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
end();:结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。
隐式迭代
- 隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用;
- 如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
- 案例【五角星评分控件】
each方法
有了隐式迭代，为什么还要使用each函数遍历？
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性；
如果要对每个元素做不同的处理，这时候就用到了each方法；
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
参数一表示当前元素在所有匹配元素中的索引号；
参数二表示当前元素（DOM对象）；
$(selector).each(function(index,element){});
element是一个 js对象，需要转换成jquery对象。
【案例】 什么都看不见
多库共存
此处多库共存指的是：jQuery占用了
$和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量，那么，要保证每个库都能正常使用，这时候就有了多库共存的问题。模拟另外的库使用了
$这个变量，此时，就与jQuery库产生了冲突:
var $ = { name : “itecast” };
- 解决方式：
- 作用：让jQuery释放对$的控制权，让其他库能够使用$符号，达到多库共存的目的。此后，只能使用jQuery来调用jQuery提供的方法;
$.noConflict(); //true两个都交出来，返回值是新的调用方法；
- 作用：让jQuery释放对$的控制权，让其他库能够使用$符号，达到多库共存的目的。此后，只能使用jQuery来调用jQuery提供的方法;
jQuery插件机制
- jQuery这个js库，虽然功能强大，但也不是面面俱到包含所有的功能。
- jQuery是通过插件的方式，来扩展它的功能：
- 当你需要某个插件的时候，你可以“安装”到jQuery上面，然后，使用；
- 当你不再需要这个插件，那你就可以从jQuery上“卸载”它。（就好比如手机软件，安装的app就好比插件，用的时候安装上，不用的时候卸载掉）
第三方插件
- jQuery.color.js
- animate()自定义动画：不支持背景的动画效果;
-
animate动画支持的属性列表; - jQuery.lazyload.js
- 使用步骤：
- 引入jQuery文件
- 引入插件
- 使用插件
制作插件
如何创建jQuery插件：http://learn.jquery.com/plugins/basic-plugin-creation/
全局jQuery函数扩展方法:
$.pluginName = function() {};
- jQuery对象扩展方法
$.fn.pluginName = function() {};
jQueryUI
- jQueryUI专指由jQuery官方维护的UI方向的插件。
- 官方API：http://api.jqueryui.com/category/all/
- 其他教程：jQueryUI教程:http://www.runoob.com/jqueryui/jqueryui-intro.html
- 基本使用:
- 引入jQueryUI的样式文件；
- 引入jQuery；
- 引入jQueryUI的js文件；
- 使用jQueryUI功能。