L07-jQuery
jQuery基本概念
学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。
为什么要学习jQuery？
使用javascript开发过程中，有许多的缺点：
- 查找元素的方法太少，麻烦。
- 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。
- 有兼容性问题。
- 想要实现简单的动画效果，也很麻烦
- 代码冗余。
jQuery初体验
案例-：让div显示与设置内容
$(document).ready(function () {
$("#btn1").click(function () {
//隐式迭代：偷偷的遍历，在jQuery中，不需要手动写for循环了，会自动进行遍历。
$("div").show(200);
});
$("#btn2").click(function () {
$("div").text("我是内容");
});
});
jQuery优点总结：
- 查找元素的方法多种多样，非常灵活
- 拥有隐式迭代特性，因此不再需要手写for循环了。
- 完全没有兼容性问题。
- 实现动画非常简单，而且功能更加的强大。
- 代码简单、粗暴。
没有对比，就没有伤害，有了对比，处处戳中要害。
什么是jQuery?
jQuery的官网 http://jquery.com/
jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。
js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）
我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。
jQuery的版本
官网下载地址：http://jquery.com/download/
jQuery版本有很多，分为1.x 2.x 3.x
大版本分类：
1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）
关于压缩版和未压缩版
jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。
jQuery中的顶级对象
- DOM中的顶级对象：document 页面中的顶级对象
- BOM中的顶级对象：window 浏览器中的顶级对象
- jQuery的顶级对象：jQuery / $ jQuery的js文件中所有的东西都是在jQuery = $ 之下的
jq中简单的写法：$.属性 或者 $.方法()
大多数的情况下，jQuery中都是方法，属性很少。jQuery基本上把DOM中的事件都封装成了方法
// DOM中的click事件
document.getElementById('id').onclick = function(){};
// jQuery中的click事件
$('#id').click(function(){});
jQuery的入口函数
使用jQuery的三个步骤：
- 引入jQuery文件
- 入口函数
- 功能实现
关于jQuery的入口函数：
//第一种写法
$(document).ready(function() {
});
//第二种写法（与第一种写法是一样的效果，都是在加载了文档后执行）
$(function() {
});
jQuery入口函数与js入口函数的对比
- JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
- jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。
- Javascript中的onload事件在同一个脚本中只能执行一次，后面的onload会覆盖前面的
jQuery对象与DOM对象的区别、互相转换（重点）
- DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
- jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
- jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））
- DOM对象与jQuery对象的方法不能混用。
DOM对象转换成jQuery对象：【联想记忆：花钱】
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象
jQuery对象转换成DOM对象：
var $li = $("li");
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)
案例-：隔行变色案例
$(function(){
$('#box li:odd').css('backgroundColor','skyblue');
$('#box li:even').css('backgroundColor','pink');
});
案例-：网页开关灯
.cls { background: #000; }
// 网页开关灯
$('#btn').click(function(){
$('body').toggleClass('cls');
});
选择器
什么是jQuery选择器
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
基本选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(“#id”); | 获取指定ID的元素 |
| 类选择器 | $(“.class”); | 获取同一类class的元素 |
| 标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”); | 使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
总结：跟css的选择器用法一模一样。
层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”); | 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
跟CSS的选择器一模一样。
过滤选择器
这类选择器都带冒号:
| 名称 | 用法 | 描述 |
|---|---|---|
| :eq（index） | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
| :odd | $(“li:odd”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(“li:even”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为偶数的元素 |
案例：隔行变色
筛选选择器(方法)
筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”)，子类选择器 |
| find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
| siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点，不包括自己本身。 |
| parent() | $(“#first”).parent(); | 查找父亲 |
| eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
| next() | $(“li”).next() | 找下一个兄弟 |
| prev() | $(“li”).prev() | 找上一次兄弟 |
案例-：下拉菜单
this+children+mouseenter+mouseleave
<div id="box" class ="center">
<ul class="lv1">
<li>
<span>四大名著</span>
<ul class="lv2">
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
<li>西游记</li>
</ul>
</li>
<li>
<span>四大天王</span>
<ul class="lv2">
<li>刘德华</li>
<li>张学友</li>
<li>黎明</li>
<li>郭富城</li>
</ul>
</li>
<li>
<span>四大银行</span>
<ul class="lv2">
<li>中国工商银行</li>
<li>中国农业银行</li>
<li>中国建设银行</li>
<li>中国银行</li>
</ul>
</li>
</ul>
</div>
;$(function(){
var aLi1 = $('.lv1>li');
// 鼠标进入
aLi1.mouseenter(function(){
$(this).children('.lv2').stop().show(100);
});
// 鼠标离开
aLi1.mouseleave(function(){
$(this).children('.lv2').stop().hide(100);
});
});
案例：突出展示
siblings+find
案例：手风琴
next+parent
案例：淘宝精品
index+eq
jQuery操作样式
为什么要使用jQuery操作DOM
对比JS操作DOM和jQuery操作DOM
使用jQuery的方式来操作DOM更加的简介，方便，统一的调用方式方便我们学习，降低来我们的学习成本。
重点内容
-
样式和类操作
-
jQuery动画
-
节点操作
-
表单值、属性和内容 html()
样式属性操作 .css()
作用：设置或获取元素的样式属性值
- 设置样式属性操作：
a设置单个样式：
// 第一个参数表示：样式属性名称
// 第二个参数表示：样式属性值
$(selector).css("color", "red");
b设置多个样式：（也可以设置单个）
// 参数为 {}（对象）
$(selector).css({"color": "red", "font-size": "30px"});
- 获取样式属性操作：
// 参数表示要获取的 样式属性名称
$(selector).css("font-size");
此时，会返回”font-size”样式属性对应的值。
隐式迭代
- 设置操作的时候，会给jq内部所有的对象都设置上相同的值
- 获取操作的时候，只会返回第一个元素对应的值
$('li').eq(0).css('fontSize','20px');
$('li').eq(1).css('fontSize','21px');
$('li').eq(2).css('fontSize','22px');
$('li').eq(3).css('fontSize','23px');
console.log( $('li').css('fontSize') ); // 20px
类class操作
addClass(className)添加类样式
为指定元素添加类className
$(selector).addClass("liItem"); // 注意：此处类名不带点，所有类操作的方法类名都不带点
removeClass(className)移除类样式
为指定元素移除类 className
$(selector).removeClass("liItem");
$(selector).removeClass(); // 不指定参数，表示移除被选中元素的所有类
hasClass(calssName)判断有没有类样式
判断指定元素是否包含类className
$(selector).hasClass("liItem"); // 此时，会返回true或false
toggleClass(className)切换类样式
为指定元素切换类className，该元素有类则移除，没有指定类则添加。
$(selector).toggleClass("liItem");
注意点：
- 操作类样式的时候，所有的类名，都不带点（.）
经验：
- 操作的样式非常少，那么可以通过.css()这个 方法来操作
- 操作的样式很多，那么要通过使用类的方式来操作
- 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。类比CSS书写位置（把css从html中分离出来）
前面内容特色总结：简约、“粗暴”、干净利落、直截了当
案例-：图片京东Tab栏
$(function(){
$('.box-header li').mouseenter(function(){
$(this).addClass('active').siblings().removeClass('active');
var idx = $(this).index();
$('.con').eq(idx).addClass('active').siblings().removeClass('active');
});
});
jQuery操作属性
属性操作
- 设置属性：
// 第一个参数表示：要设置的属性名称
// 第二个参数表示：改属性名称对应的值
$(selector).attr("title", "传智播客”);
// 设置多个属性
$(selector).attr({
'alt': '图破了',
'title': '传智黑马',
'myAttr': '自定义的属性' // 可以设置自定义的属性
});
- 获取属性：
// 参数为：要获取的属性的名称，改操作会返回指定属性对应的值
$(selector).attr("title"); // 此时，返回指定属性的值
- 移除属性：
// 参数为：要移除的属性的名称
$(selector).removeAttr("title");
注意：
1. checked、selected、disabled要使用.prop()方法。
2. prop方法通常用来影响DOM元素的动态状态，而不是改变的HTML属性。例如：input和button的disabled特性，以及checkbox的checked特性。
细节参考：http://api.jquery.com/prop/
// checkbox,button有checked、disabled属性
$('input').prop('checked',true);
$('input').prop('checked',false);
$('button').prop('disabled',true);
$('button').prop('disabled',false);
// select标签有selected属性
$('select').prop('selected',true);
$('select').prop('selected',false);
案例-：全选、反选
效果：
// 点击cb-all，实现其他的选框全选、全不选
$(function(){
$('.cb-all').click(function(){
$('.cb').prop('checked',$(this).prop('checked') );
});
// 点击其他的选框，当所有的选框都选中时，总选框也选中
// 点击其他的选框，当有一个选框没有被选中时，总选框也不会被选中
$('.cb').click(function(){
var flag = true;
// 通过each来遍历获取到的伪数组
$('.cb').each(function(i){
if( $('.cb').eq(i).prop('checked') == false ){
flag = false;
}
});
$('.cb-all').prop('checked',flag);
});
});
值和内容val、text
- val()方法：
作用：设置或返回表单元素的值，例如：input,select,textarea的值
// 获取匹配元素的值，只匹配第一个元素
$(selector).val();
// 设置所有匹配到的元素的值
$(selector).val("具体值");
- text() 方法:
作用：设置或获取匹配元素的文本内容
//获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！）
$(selector).text();
//设置操作带参数，参数表示要设置的文本内容
$(selector).text("我是内容");
jQuery动画
jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。
隐藏显示动画
show方法
作用：让匹配的元素展示出来
// 用法一：
// 参数为数值类型，表示：执行动画时长
/* 单位为：毫秒（ms），参数2000即2秒钟显示完毕 */
$(selector).show(2000);
// 用法二：
// 参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast
/* 跟用法一的对应关系为： */
/* slow：600ms、normal：400ms、fast：200ms */
$(selector).show("slow");
// 用法三：
// 参数一可以是数值类型或者字符串类型
// 参数二表示：动画执行完后立即执行的回调函数
$(selector).show(2000, function() {});
// 用法四：
// 不带参数，作用等同于 css("display","block")
/* 注意：此时没有动画效果 */
$(selector).show();
注意：
jQuery预设的三组动画效果的语法几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画执行完成后的回调函数。
第一个参数是：可以是指定字符或者毫秒数
hide方法
作用：让匹配元素隐藏掉
用法参考show方法
$(selector).hide(1000); // 1000表示什么？
$(selector).hide("slow");
$(selector).hide(1000, function(){});
$(selector).hide();
滑入滑出动画
滑入动画效果（联想：生活中的卷帘门）
作用： 让元素以下拉动画效果展示出来
$(selector).slideDown([speed],[callback]);
// 注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）
$(selector).slideDown();
滑出动画效果
作用： 让元素以上拉动画效果隐藏起来
$(selector).slideUp([speed],[callback]);
滑入滑出切换动画效果
$(selector).slideToggle([speed],[callback]);
参数等同与1.5.1 隐藏和显示
淡入淡出动画
淡入动画效果
作用： 让元素以淡淡的进入视线的方式展示出来
$(selector).fadeIn([speed], [callback]);
淡出动画效果
作用： 让元素以渐渐消失的方式隐藏起来
$(selector).fadeOut(1000);
淡入淡出切换动画效果
作用： 通过改变透明度，切换匹配元素的显示或隐藏状态
$(selector).fadeToggle('fast',function(){});
参数等同与1.5.1 隐藏和显示
改变透明度到某个值
与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！
作用： 调节匹配元素的不透明度
// 用法有别于其他动画效果
// 第一个参数表示：时长
// 第二个参数表示：不透明度值，取值范围：0-1
$(selector).fadeTo(1000, .5); // 0全透，1全不透
// 第一个参数为0，此时作用相当于：.css("opacity", .5);
$(selector).fadeTo(0, .5);
- jQuery提供的动画使用方法总结：
- 有规律的体现：
- jQuery提供的这几个动画效果控制的CSS属性包括：高度、宽度、不透明度。
- 这三个CSS属性的共性是：属性值只有一个，并且这个值是数值（去掉单位后）。
自定义动画
注意：所有能够执行动画的属性必须只有一个数字类型的值。
比如：要改变字体大小，要使用：fontSize（font-size），不要使用：font
动画支持的属性：
http://www.w3school.com.cn/jquery/effect_animate.asp
作用： 执行一组CSS属性的自定义动画
// 第一个参数表示：要执行动画的CSS属性（必选）
// 第二个参数表示：执行动画时长（可选）
// 第三个参数表示：动画执行完后立即执行的回调函数（可选）
$(selector).animate({params},speed,callback);
案例-：自定义动画
$('input').click(function(){
// 开始动画
$('#box')
.animate({left: 600},3000)
.animate({top: 400},2000)
.animate({width: 50,height: 50},1000)
.animate({left:0},3000)
.animate({top: 0},2000);
});
效果：
案例-：手风琴
<div id="box" class="center">
<ul>
<li><a href="#"><img src="images/1.jpg"/></a></li>
<li><a href="#"><img src="images/2.jpg"/></a></li>
<li><a href="#"><img src="images/3.jpg"/></a></li>
<li><a href="#"><img src="images/4.jpg"/></a></li>
<li><a href="#"><img src="images/5.jpg"/></a></li>
</ul>
</div>
$('#box li').mouseenter(function(){
$(this).stop().animate({width: 800}).siblings().stop().animate({width: 100});
});
$('#box').mouseleave(function(){
$(this).find('li').stop().animate({width: 240});
});
案例-：音乐导航
window.onload=function(){
$(".nav li").mouseenter(function () {
$(this).children("span").stop().animate({top:0});
var idx = $(this).index();
//让对应的音乐播放, 音乐播放的方法时DOM对象。
$("audio").get(idx).load();
$("audio").get(idx).play();
}).mouseleave(function () {
$(this).children("span").stop().animate({top:60});
});
};
效果：
案例-：京东轮播图-fade版
<div id="box" class="center">
<ul>
<li><a href="javascript:;"><img src="images/1.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="images/2.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="images/3.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="images/4.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="images/5.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="images/6.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="images/7.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="images/8.jpg" alt="" /></a></li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<div class="arrow">
<span class="left-arrow"><</span>
<span class="right-arrow">></span>
</div>
</div>
// 鼠标经过轮播图，显示翻页箭头
$('#box').mouseenter(function(){
$('.arrow').stop().fadeIn();
}).mouseleave(function(){
$('.arrow').stop().fadeOut();
});
// 点击翻页箭头，动画形式切换图片
var idx = 0;
$('.right-arrow').click(function(){
idx ++;
idx %= $('#box>ul>li').length;
$('#box>ul>li').eq(idx).stop().fadeIn().siblings().stop().fadeOut();
$('#box>ol>li').eq(idx).addClass('active').siblings().removeClass('active');
});
$('.left-arrow').click(function(){
if(idx < 0){
idx = $('#box>ul>li').length - 1;
}
idx --;
$('#box>ul>li').eq(idx).stop().fadeIn().siblings().stop().fadeOut();
$('#box>ol>li').eq(idx).addClass('active').siblings().removeClass('active');
});
// 点击下方图片索引圆点，动画切换图片
$('#box ol li').click(function(){
idx = $(this).index();
// 突出显示当前选中的索引
$(this).addClass('active').siblings().removeClass('active');
// 切换到选中索引的图片
$('#box>ul>li').eq(idx).stop().fadeIn().siblings().stop().fadeOut();
});
效果：
uploading-image-683047.png
停止动画
stop()
作用：停止当前正在执行的动画
为什么要停止动画？
如果一个以上的动画方法在同一个元素上调用，那么对这个元素来说，后面的动画将被放到效果队列中。这样就形成了动画队列。（联想：排队进站）
动画队列里面的动画不会执行，直到第一个动画执行完成。
// clearQueue 是否清空所有的后续动画
// jumpToEnd 是否立即执行完当前正在执行的动画
$(selector).stop(clearQueue,jumpToEnd); // 语法
解释：
当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。
注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。
常用方式：
$(selector).stop();
延迟动画
// duration 延时时间，单位：毫秒
// queueName 队列名词，默认是Fx，动画队列。
$(selector).delay(duration,[queueName]) // 语法
$('#foo').slideUp(400).delay(2000).fadeIn(400);
jQuery节点操作
动态创建元素
// $()函数的另外一个作用：动态创建元素
var $spanNode = $("<span>我是一个span元素</span>");
添加元素
在元素的最后一个子元素后面追加元素：
- append()（重点）/ appendTo()
作用：- 在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）
- 如果是页面中存在的元素，那么调用append()后，会把这个元素放到相应的目标元素里面去；但是，原来的这个元素，就不存在了。
- 如果是给多个目标追加元素，那么方法的内部会复制多份这个元素，然后追加到多个目标里面去。
常用参数：htmlString 或者 jQuery对象
// 在$(selector)中追加$node
$(father).append(son);
// 在$(selector)中追加div元素，参数为htmlString
$(father).append('<div></div>');
不常用操作：（用法跟append()方法基本一致）
- appendTo()
作用：同append()，区别是：把$(selector)追加到node中去，与链式语法结合的更好
$(son).appendTo(father);
- prepend() / prependTo()
作用：在元素的第一个子元素前面追加内容或节点
$(father).prepend(son);
$(son).prependTo(father);
- after() / insertAfter()
作用：在被选元素之后，作为兄弟元素插入内容或节点
$(brother).after(self);
$(self).insertAfter(brother);
- before() / insertBefore()
作用：在被选元素之前，作为兄弟元素插入内容或节点
$(brother).before(self);
$(self).insertBefore(brother);
案例-：城市选择
// 将左边的内容 全部 移动到右边
$('#operator input').eq(0).click(function(){
$('#src option').appendTo('#tar select');
});
// 将右边的内容 全部 移动到左边
$('#operator input').eq(1).click(function(){
$('#tar option').appendTo('#src select');
});
// 将左边 选中 的内容移动到右边
$('#operator input').eq(2).click(function(){
$('#src option:selected').appendTo('#tar select');
});
// 将右边 选中 的内容移动到左边
$('#operator input').eq(3).click(function(){
$('#tar option:selected').appendTo('#src select');
});
html创建元素（推荐使用，重点）
作用：
- 设置或返回所选元素的html内容（包括 HTML 标记）
- 设置内容的时候，如果是html标记，会动态创建元素，此时作用跟js里面的 innerHTML属性相同
// 动态创建元素
$(selector).html('<span>传智播客</span>');
// 获取html内容
$(selector).html();
案例：创建元素和全选反选
清空元素
清空指定元素的所有子元素（光杆司令）
// 没有参数-jquery中建议使用，会同时清除事件
$(selector).empty();
// jquery中不建议使用，因为如果里面的元素注册了事件，会发生内存泄漏
$(selector).html("");
// “自杀”，把自己（包括所有内部元素）从文档中删除掉
$(selector).remove();
案例-：微博发布
$(function(){
$('.input input').click(function(){
// 获取输入的内容
var txt = $('.w-input').val();
if(txt.trim().length == 0){
return ;
}
// 获取当前时间
var t = new Date();
txt = "<em>" + formatTime(t) + "</em> " + txt;
$('<li></li>').html(txt).appendTo('.msg-show ul');
//清空输入框
$('.w-input').val('');
});
/*
* 格式化时间
**/
function formatTime (t){
var month = (t.getMonth()+1) < 10 ? ('0' + (t.getMonth()+1)) : t.getMonth()+1;
var date = t.getDate() < 10 ? ('0' + t.getDate()) : t.getDate();
var hour = t.getHours() < 10 ? ('0' + t.getHours()) : t.getHours();
var minute = t.getMinutes() < 10 ? ('0' + t.getMinutes()) : t.getMinutes();
var second = t.getSeconds() < 10 ? ('0' + t.getSeconds()) : t.getSeconds();
return t.getFullYear() +"-"+ month +"-"+ date +" "+ hour +":"+ minute +":"+ second;
}
});
案例-：弹幕效果
$('.ipt-wrap input').eq(1).click(function(){
var msg = $('.ipt-wrap input').eq(0).val(); // 获取输入框的文本
// 随机颜色和随机高度
var red = parseInt(Math.random() * 100 +100);
var green = parseInt(Math.random() * 100 +100);
var blue = parseInt(Math.random() * 100 +100);
var randTop = parseInt(Math.random() * 200);
if(msg.trim().length === 0){
return;
}
// 添加弹幕属性和动画
$('<span></span>')
.text(msg)
.css({
fontSize: '20px',
color: 'rgb('+red+','+green+','+blue+')',
left : '1000px',
top : randTop
})
.animate({left:-100},7000,'linear',function(){
$(this).fadeOut();
})
.appendTo('.show');
// 清空输入框
$('.ipt-wrap input').eq(0).val('');
});
// 绑定键盘事件
$('.ipt-wrap input').eq(0).keydown(function(e){
var e = e || window.event;
if(e.keyCode === 13){
$('.ipt-wrap input').eq(1).click();
}
});
复制元素
作用：复制匹配的元素
// 复制$(selector)所匹配到的元素
// 返回值为复制的新元素，默认是深度复制
// clone(true)：深度复制，同时复制事件
// clone()、clone(false)：深度复制，但不复制事件
$(selector).clone();
总结：
// 推荐使用html("<span></span>")方法来创建元素或者html("")清空元素
jQuery特殊属性操作
val方法
val方法用于设置和获取表单元素的值，例如input、textarea的值
//设置值
$("#name").val("张三");
//获取值
$("#name").val();
案例：京东搜索
html方法与text方法
html方法相当于innerHTML text方法相当于innerText
//设置内容
$("div").html("<span>这是一段内容</span>");
//获取内容
$("div").html()
//设置内容
$("div").text("<span>这是一段内容</span>");
//获取内容
$("div").text()
区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
width方法与height方法
设置或者获取高度
//带参数表示设置高度
$("img").height(200);
//不带参数获取高度
$("img").height();
获取网页的可视区宽高
$(window).width([val]); // width 获取/设置 可视区宽度
$(window).innerWidth() // width + padding 只读，只能获取
$(window).outerWidth([false]) // width + padding + border 只读，只能获取
$(window).outerWidth(true) // width + padding + border + margin 只读，只能获取
$(window).height([val]); // height 获取/设置 可视区高度
$(window).innerHeight() // height + padding 只读，只能获取
$(window).outerHeight([false]) // height + padding + border 只读，只能获取
$(window).outerHeight(true) // height + padding + border + margin 只读，只能获取
scrollTop与scrollLeft
设置或者获取垂直滚动条的位置
//val 获取/设置 页面被滚动出去的高度
$(window).scrollTop([val])
//val 获取/设置 页面被滚动出去的宽度
$(window).scrollLeft([val]);
案例：仿腾讯固定菜单栏案例
案例：小火箭返航案例
offset方法与position方法
offset方法获取元素距离document的位置
position方法获取的是元素距离有定位的父元素的位置。
//获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset([{top: ,left: }]);
//获取相对于其最近的有定位的父元素的位置。只读属性，不能设置
$(selector).position();
jQuery事件机制
JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。
jQuery事件发展历程(了解)
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
简单事件注册
click(handler) 单击事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
缺点：不能同时注册多个事件，不支持动态事件绑定
bind方式注册事件
$(selector).bind(events,[data],fn) // 语法（弃用）
//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
//事件响应方法
});
// 通过bind注册多个事件，并且每个事件执行不同的方法
$("p").bind({
click: function(){
alert(111);
},
mouseenter: function(){
alert(222);
}
});
缺点：不支持动态事件绑定
delegate注册委托事件
$(selector).delegate(selector,[type],[data],fn) // 语法（弃用）
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
缺点：只能注册委托事件，因此注册事件需要记得方法太多了
on注册事件
on注册事件(重点)
jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：fn，事件处理函数
$(selector).on(events,[selector],[data],fn) // 语法（推荐）
on注册简单事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});
on注册委托事件
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click","span", function() {});
事件解绑
off方式（推荐）
// events 一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
// selector 一个最初传递到.on()事件处理程序附加的选择器
// fn 之前附加在事件上的事件处理程序函数，或特殊值false
$(selector).off(events,[selector],[fn]) // 语法（推荐）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");
unbind方式（弃用）
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件
undelegate方式（弃用）
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( "click" ); //解绑所有的click事件
触发事件
$(selector).trigger(events,[data]) // 语法
$(selector).events(); //语法 触发事件类型:click、mouseenter、focus...
$(selector).click(); //触发 click事件
$(selector).trigger("click");
jQuery事件对象
jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。
//e.screenX和e.screenY 对应屏幕最左上角的值
//e.clientX和e.clientY 距离页面左上角的位置（忽视滚动条）
//e.pageX和e.pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
//e.keyCode 按下的键盘代码
//e.data 存储绑定事件时传递的附加数据
//e.stopPropagation() 阻止事件冒泡行为
//e.preventDefault() 阻止浏览器默认行为
//return false 既能阻止事件冒泡，又能阻止浏览器默认行为。
e.data示例
// 传递一个参数
var param = 1000;
$('#btn').on('click',param,function(e){
console.log(e.data); //1000
});
// 传递多个参数
var name = 'Tom',age=20,sex='male';
$('#btn').on('click',{name,age,sex},function(e){
console.log(e.data); // {name: "Tom", age: 20, sex: "male"}
console.log(e.data.name); // Tom
console.log(e.data.age); // 20
console.log(e.data.sex); // male
});
param = 10;
案例-：钢琴版导航（加强）
$(function(){
// 鼠标移动到对应的li上，播放动画，且播放钢琴音
$('#nav li').mouseenter(function(){
$(this).children('span').stop().animate({top: 0}, 200);
// 播放音乐
var idx = $(this).index();
$('audio').get(idx).load();
$('audio').get(idx).play();
}).mouseleave(function(){
$(this).children('span').stop().animate({top: 50}, 200);
});
// 按下键盘上指定的1~9键，播放动画，且播放钢琴音
var flag = true;
$(window).on('keydown',function(e){
if(flag == false){ // 没有弹起则flag为false，直接return
return ;
}
flag = false;
var idx = -1;
switch(e.keyCode){
case 49: idx = 0; break;
case 50: idx = 1; break;
case 51: idx = 2; break;
case 52: idx = 3; break;
case 53: idx = 4; break;
case 54: idx = 5; break;
case 55: idx = 6; break;
case 56: idx = 7; break;
case 57: idx = 8; break;
default: idx = undefined;
}
// 这里有个BUG：如果一直按着按键不放，会一直触发keydown事件
// 解决方法：节流阀，按下的时候触发事件，如果没有弹起则阻止继续触发事件
console.log(idx);
$('#nav li').eq(idx).trigger('mouseenter');
});
// 键盘放开，触发mouseleave事件
$(window).on('keyup',function(e){
flag = true;
var idx = -1;
switch(e.keyCode){
case 49: idx = 0; break;
case 50: idx = 1; break;
case 51: idx = 2; break;
case 52: idx = 3; break;
case 53: idx = 4; break;
case 54: idx = 5; break;
case 55: idx = 6; break;
case 56: idx = 7; break;
case 57: idx = 8; break;
default: idx = undefined;
}
$('#nav li').eq(idx).trigger('mouseleave');
});
});
jQuery补充知识点
链式编程
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。
end() // 语法 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
案例：五角星评分案例
each方法
jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
// index 当前元素在所有匹配元素中的索引号
// element 当前元素（DOM对象）
$(selector).each(function(index,element){}) // 语法
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
案例：不同的透明度
多库共存，$冲突
jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权.
// extreme 传入true 来允许彻底将jQuery变量还原
var $$ = $.noConflict([extreme]) // 语法 释放$的控制权,并且把$的能力给了$$
插件
常用插件
插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。
jquery.color.js
jquery.lazyload.js
jquery.ui.js
jquery.color.js
animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。
使用插件的步骤
1. 引入jQuery文件
2. 引入插件（如果有用到css的话，需要引入css）
3. 使用插件
案例-：背景色由红变蓝
<head>
<style>
#box { width: 100px; height: 100px;background: red; }
</style>
<script src="js/jquery-1.12.4.js"></script> <!-- 1. 引入jQuery文件 -->
<script src="js/jquery.color.js"></script> <!-- 2. 引入插件（如果有用到css的话，需要引入css） -->
<script>
$(function(){
$('#box').stop().animate({backgroundColor: 'blue'},4000); // 3. 使用插件
});
</script>
</head>
<body>
<div id="box"></div>
</body>
jquery.lazyload.js
懒加载插件
jquery.ui.js（UI丑的很）
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API：http://api.jqueryui.com/category/all/
其他教程：jQueryUI教程
基本使用:
引入jQueryUI的样式文件
引入jQuery
引入jQueryUI的js文件
使用jQueryUI功能
案例：使用jquery.ui.js实现新闻模块
制作jquery插件
原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。
// 通过给$.fn添加方法就能够扩展jquery对象
// $.fn == $.prototype == jQuery.prototype
$.fn.pluginName = function() { // 声明方法
console.log(this); // 这里的this是jQuery对象，不是DOM对象
};
$(selector).pluginName(); // 调用方法
案例：制作手风琴插件
