10、jQuery动画

10.1、显示show()隐藏hide()

显示show()：
当为show()添加参数时，就可以实现动画效果；
有两个参数：
参数1：执行动画的时长，以毫秒为单位，也可以使用代表时长的字符串：fast（相当于200毫秒）、normal（相当于400毫秒）、slow（相当于600毫秒），如果代表时长的单词写错了，相当于normal；
参数2：代表动画执行完毕后的回调函数；

$('#div1').show(2000);
$('#div1').show('fast');
$('#div1').show(2000,function(){
    alert('动画执行完毕');
});

隐藏hide()：语法与show()类似；

$('#div1').hide(2000);
$('#div1').hide('fast');
$('#div1').hide(2000,function(){
    alert('隐藏了');
});

切换toggle()：当状态为显示时切换为隐藏，当状态为隐藏时，切换为显示，语法与show()类似；

$('#div1').toggle(2000);
$('#div1').toggle('fast');
$('#div1').toggle(2000,function(){
    alert('切换了');
});

10.2、滑入slideDown()滑出slideUp()

默认参数400毫秒；
滑入slideDown()：
slideDown()不加参数时也可以实现动画效果，但是slideDown()也有两个参数；
参数1：执行动画的时长；
参数2：代表动画执行完毕后的回调函数；

$('#div1').slideDown();
$('#div1').slideDown(4000,function(){
    alert('滑入完成');
});

滑出slideUp()：语法和slideDown类似；

$('#div1').slideUp();
$('#div1').slideUp(4000,function(){
    alert('滑出完成');
});

切换slideToggle()：

$('#div1').slideToggle();
$('#div1').slideToggle(4000,function(){
    alert('切换完成');
});

10.3、淡入fadeIn()淡出fadeOut()

没有参数时默认400毫秒；
淡入fadeIn()：

$('#div1').fadeIn();
$('#div1').fadeIn(2000,function(){
    alert('淡入完成');
});

淡出slideOut()：

$('#div1').fadeOut();
$('#div1').fadeOut(2000,function(){
    alert('淡出完成');
});

切换fadeToggle()：

$('#div1').fadeToggle();
$('#div1').fadeToggle(2000,function(){
    alert('切换完成');
});

淡出到某种长度fadeTo()：

$('#div1').fadeTo(1000,0.5); //淡出到透明度为0.5
$('#div1').fadeTo(2000,0.5,function(){
    alert('淡出到某种程度完成');
});

10.4、自定义动画animate()

animate()有四个参数：
参数1：必选，对象类型，代表的是需要做动画的属性；
参数2：可选的，代表的是执行动画的时长，单位毫秒；
参数3：可选的，代表的是动画是缓动还是匀速，有两个可设置值：默认为swing（缓动）、linear（匀速）；
参数4：动画执行完毕后的回调函数。
示例：为id为div1的元素设置自定义动画

$('#div1').animate({
    left:800,
    width:200
},2000,'linear',function(){
    alert('动画执行完毕');
});

10.5、动画队列与停止动画

当我们多次触发一个元素上的动画时，就会出现动画队列，后面触发的动画要等前面的动画执行完才能开始执行；
我们可以使用stop()方法停止动画：
两个参数（都是布尔类型，如果不写参数，默认两个参数都是false）：
参数1：是否清除队列；
参数2：是否跳转到最终结果。
示例：设置元素div的动画的stop()

$('div').stop(true,true);

11、节点操作

11.1、动态创建元素html()和$()

html()：
当html()不给参数时，可以获取元素的所有内容，包括文本、标签等；
当html()给了参数时，可以设置元素的内容，新设置的内容将覆盖元素原来的内容，与text()不同的是html()可以解析html代码，因此可以创建节点；

$('#div1').html(); //获取id为div1的元素的所有内容
$('#div1').html('我是设置的内容<a>我是a标签</a>'); //设置id为div1的元素的内容，可以
解析出a标签

$()：
可以创建节点，但是创建的节点只存在于内存中，如果需要显示，则需要追加到页面；

var $link=$('<a>我是一个a标签</a>');
console.log($link);
$('#div1').append($link); //将$()创建的节点$link追加到id为div1的元素中

11.2、添加节点

添加节点的方法有append()、prepend()、before()、after()、appendTo()。

append()：作为最后一个子元素添加；
父元素.append(子元素);

prepend()：作为第一个子元素添加；
父元素.prepend(子元素);

before()：把元素B插入到元素A的前面，兄弟元素添加；
元素A.before(元素B);

after()：把元素B插入到元素A的后面，兄弟元素添加；
元素A.after(元素B);

appendTo()：把子元素作为父元素的最后一个子元素添加；
子元素.appendTo(父元素);

11.3、清除节点empty()和移除节点remove()

empty()：
不仅清除了节点，并且把节点的事件也清除了，相对于html()较为安全；

$('#ul1').empty(); //将id为ul1的元素节点清空

remove()：

$('li3').remove(); //移除id为li3的元素，自己移除自己

11.4、克隆节点clone()

clone()克隆出来的节点（包括后代节点）只存在于内存中，如果需要显示，则需要追加到页面；
clone()方法具有参数：
true：代表将事件一起克隆；
false：代表不会克隆事件。
ps：不给参数默认false，不管参数是什么都会克隆后代元素。

var $cloneDiv=$('#div1').clone(); //克隆id为div1的元素
$('body').append($cloneDiv); //将克隆出来的结果追加到body标签中

12、获取、设置表单元素内容val()

获取：
val()不给参数就可以获取内容；

$('#txt').val(); //获取id为txt的输入框的内容

设置：
val()中给的参数就是要设置的内容；

$('#txt').val('我是设置的内容'); //设置id为txt的输入框的内容

13、属性操作attr()和removeAttr()

设置属性：
attr('属性名','属性值');

//设置单属性
$('img').attr('src','992.jpg');
设置多属性
$('img').attr({
    src:'992.jpg',  //修改已有属性
    aaa:'hahaha', //修改自定义属性
    bbb:'bbb' //如果该属性原来没有，将追加此属性
});

获取属性：
attr('属性名');

$('img').attr('src'); //如果没有此属性则获取到的值为undefined

移除属性：
removeAttr('属性名');

//移除单属性
$('img').removeAttr('alt');
//移除多属性
$('img').removeAttr('alt aaa bbb');

14、布尔类型属性操作prop()

jQuery1.6以后，对于checked、selected、disabled这一类布尔类型的属性，不能用attr()，只能用prop()。
示例：

$('#ckb1').prop('checked'); //多选框选中返回true，否则返回false

15、尺寸和位置操作：宽width()和height()

width()和height()：
获取、设置元素的宽高，不包括padding/border/margin；

innerWidth()和innerHeight()：
返回元素的宽高，包括padding；

outerWidth()和outerHeight()：
返回元素的宽高，包括padding/border；

outerWidth(true)和outerHeight(true)：
返回元素的宽高，包括padding/border/margin；

获取页面可视区域的宽高：

$(window).width(); //获取可视区宽度
$(window).height(); //获取可视区高度

16、offset()和position()

offset()：
获取元素距离document的位置，返回值是一个对象，对象里面包含了top和left的值；

position()：获取的是元素距离有定位的父元素的位置，返回值是一个对象，对象里面包含了top和left的值。

$('#son').offset();
$('#son').position();

17、scrollLeft()和scrollTop()

设置或者获取垂直滚动条的位置：

$(window).scrollTop();//获取页面被卷曲的高度
$(window).scrollLeft();//获取页面被卷曲的宽度
//设置元素内容被卷曲出去的宽度、高度
$('div').scrollTop(100);
$('div').scrollLeft(100);

18、事件

18.1、注册事件on

jQuery与原生js注册事件的区别：jQuery给同一个元素注册相同的事件，后一个事件不会把前面的覆盖掉，而原生js则会覆盖前面的事件。
on注册简单事件：

//表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定
$(selector).on('click',function(){});

on注册委托事件：

//表示给$(selector)绑定代理事件，必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on('click','span',function(){});

18.2、解绑事件off()

示例：

//解绑匹配元素的所有事件
$(selector).off();
//解绑匹配元素的所有click()事件
$(selector).off('click');

18.3、事件触发trigger()

//用法1：触发事件
$('#one').trigger('click'); 
//用法2：触发自定义事件
$('#one').on('ziji',function(){
    console.log('我是自定义事件');
}); //注册一个自定义事件
$('#btn2').on('click',function(){
    var res=confirm('要触发自定义事件吗？');
    if(res){
        $('#one').trigger('ziji');
    } //res为true则触发自定义事件
});

18.4、事件对象

事件对象：注册一个事件，触发它时系统自动生成的记录这个事件触发时的一些信息就是事件对象，比如触发时有没有按住某个键等；
事件对象用事件参数来获取。

事件对象常用的三个坐标：
pageX和pageY：触发点距离页面最顶部的左上角的位置（会计算滚动条的距离）；
screenX和screenY：触发点距离屏幕最左上角的值；
clientX和clientY：可视区，触发点距离页面左上角的值（忽视滚动条）；

阻止事件冒泡（子元素事件组织父元素事件冒泡）：stopPropagation()；

阻止浏览器默认行为：preventDefault()；

既阻止事件冒泡，又阻止默认行为：return false;

获取按键：keyCode。

$('#one').on('click',function(event){
    console.log(event.pageX); 
    console.log(event.screenX);
    console.log(event.clientX); 
    event.stopPropagation(); //阻止id为one的元素的父元素的事件冒泡
    event.preventDefault(); //阻止id为one的元素的默认行为
});
$('#one').on('click',function(event){
    return false; //既阻止事件冒泡，又阻止默认行为
    console.log(event.keyCode()); //获取按键
});

19、链式编程

链式编程是jQuery的一大特性，只要方法返回值是jQuery对象，那么就可以继续点出方法。
end()：回到上一个状态。
jQuery方法只有jQuery对象能使用。
示例：

$(this).text(sx_wjx).prevAll().text(sx_wjx); //返回值为prevAll()
$(this).text(sx_wjx).prevAll().text(sx_wjx).end(); //返回值为this

20、显示迭代each()

each()：遍历jQuery对象集合，为每个匹配的元素执行函数；
lis是li对象数组，遍历$lis，并为每个li设置对应的opacity；

$lis.each(function(index,element){ 
//index就是$lis中li的索引，element就是$lis中li对象
    $(element).css('opacity',(index+1)/10);
});

21、多库共存

查看jQuery版本：

console.log(jQuery.fn.jquery);
console.log(jQuery.prototype.jquery);
console.log($.fn.jquery);
console.log($.prototype.jquery);

当引入多个jQuery时，后引入的jQuery文件将覆盖原来的jQuery文件（多库冲突）。
多库共存：noConflict()

var _$=$.noConflict();//把$符号的控制权释放，当前版本的jQuery释放掉$后，还可以使用
jQuery；如果不想使用jQuery，可以使用noConflict()的返回值定义一个$的替代品；
(function($){//可以将先前的代码放到自执行函数中，在自执行函数中可以继续使用$

}(_$));