jQuery学习总结-----2017/12/20

---

一、选择网页元素

选择表达式可以是CSS选择器：

$(document)//选择整个文档对象

$('#myId')//选择ID为myId的网页元素

$('div.myClass')//选择class为myClass的div元素

$('input[name=first]')//选择name属性等于first的input元素

也可以是jQuery特有的表达式：

$('a:first')//选择网页中第一个a元素

$('tr:odd')//选择表格的奇数行

$('#myForm :input')//选择表单中的input元素

$('div:visible') //选择可见的div元素

$('div:gt(2)')//选择所有的div元素，除了前三个

$('div:animated')//选择当前处于动画状态的div元素

---

二、改变结果集

如果选中多个元素，jQuery提供过滤器，可以缩小结果集：

* $('div').has('p'); //选择包含p元素的div元素

* $('div').not('.myClass'); //选择class不等于myClass的div元素

* $('div').filter('.myClass'); //选择class等于myClass的div元素

* $('div').first(); //选择第1个div元素

* $('div').eq(5); //选择第6个div元素

有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：

$('div').next('p'); //选择div元素后面的第一个p元素

$('div').parent(); //选择div元素的父元素

$('div').closest('form'); //选择离div最近的那个form父元素

$('div').children(); //选择div的所有子元素

$('div').siblings(); //选择div的同级元素

---

三.jQuery 效果 - 淡入淡出

1.jQuery fadeIn() 用于淡入已隐藏的元素。

$(selector).fadeIn(speed,callback);

2.jQuery fadeOut() 方法用于淡出可见元素。

$(selector).fadeOut(speed,callback);

3.jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);

4.jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。

---

四.jQuery 效果 - 滑动

jQuery 拥有以下滑动方法：

    1.slideDown()

$(selector).slideDown(speed,callback);

    2.slideUp()

$(selector).slideUp(speed,callback);

    3.slideToggle()

$(selector).slideToggle(speed,callback);

---

五.jQuery 效果 - 动画

    jQuery animate() 方法允许您创建自定义的动画。

$("button").click(function(){

        $("div").animate({

                left:'250px',

                opacity:'0.5',

                height:'150px',

                width:'150px'

        });

    });

---