jQuery学习-02

jQuery的两大特性

1. 链式编程
任意的设置操作后，都可以继续操作当前的jQuery对象。
获取操作后，无法操作当前的jQuery对象 。
函数根据功能划分为两种：获取型操作，设置型操作。
返回值的设置方式：

		- 获取性操作必须有返回值；
		- 设置型操作不需要返回值。（不需要，不是不可以return）
        - 链式编程的实现方式：设置后返回 retuen this ;

2. 隐式迭代
偷偷的遍历，对一个jQuery对象进行设置操作时，jQuery会自动对内部所有元素应用操作。
如果是获取操作，大多数情况会返回第一个元素的对应结果。内容获取时，取得了所有内容，但是无法使用。
获取型操作无法使用隐式迭代，可以进行显示迭代操作。（手动遍历一下），不能使用普通的遍历，需要使用.eq(i);的方法进行遍历。 $(‘div’).eq(i);这种写法进行for循环。
jQuery提供了一个方法用于手动遍历.each();方法进行遍历。
$(‘div’).each(function (index,element) { $(element).text(); $(element.css(‘width’)) });
参数element和this都是一个内部的DOM对象，需要转换后使用

    $.each();用于对普通的数据（数组或者对象）进行遍历操作。
    var arr = [‘1’,’2’,’3’];
    $.each(arr,function (index,element) { console.log(index , element) });

小结：
隐式迭代的概念：内部帮助遍历，不用自己去遍历
隐式迭代的使用场景：设置使用，获取不使用
jQuery的两种遍历：$(‘div’).each(); $.each();

jQuery操作样式

css操作
功能：设置或者修改样式，操作的是style属性。
设置单个样式

//name：需要设置的样式名称
//value：对应的样式值
css(name, value);
//使用案例
$("#one").css("background","gray");//将背景色修改为灰色

设置多个样式

//参数是一个对象，对象中包含了需要设置的样式名和样式值
css(obj);
//使用案例
$("#one").css({
    "background":"gray",
    "width":"400px",
    "height":"200px"
});

获取样式

//name:需要获取的样式名称
css(name);
//案例
$("div").css("background-color");
//注意：获取样式操作只会返回第一个元素对应的样式值。

class操作
添加样式类

//name：需要添加的样式类名，注意参数不要带点.
addClass(name);
//例子,给所有的div添加one的样式。
$('div').addClass('one');

移除所有样式类

//不带参数，移除所有的样式类
removeClass()
//例子，移除div所有的样式类
$('div').removeClass();

移除单个样式类

//name:需要移除的样式类名
removeClass('name');
//例子，移除div中one的样式类名
$('div').removeClass('one');

判断是否有样式类

//name:用于判断的样式类名，返回值为true false
hasClass(name)
//例子，判断第一个div是否有one的样式类
$('div').hasClass('one');

切换样式类

//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
toggleClass(name);
//例子
$('div').toggleClass('one');

经验总结：

1. 如果操作到的样式非常少，可以考虑css方法
2. 如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。
3. 如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。

jquery动画

jquery提供了三组动画，这些动画都是标准的、有规律的效果，jquery还提供了自定义动画的功能。
显示与隐藏
显示(show)与隐藏(hide)是一组动画：
show方法详解：

show([speed], [callback]);
//speed(可选)：动画的执行时间
1.如果不传，就没有动画效果。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
//callback(可选):执行完动画后执行的回调函数

hide方法详解：
与show方法的用法完全一致。
show/hide：修改的是元素的width、height、opacity。

滑入与滑出
滑入(slideUp)与滑出(slideDown)是一组动画，效果与卷帘门类似
slideUp/slideDown,使用方法与show/hide基本一致。

slideUp(speed, callback);
//speed(可选)：动画的执行时间
1.如果不传，默认为normal，注意区分show/hide。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串，slow(200)、normal(400)、fast(600)
//callback(可选):执行完动画后执行的回调函数

滑入滑出切换

$(selector).slideToggle(speed,callback);
//如果是隐藏状态，那么执行slideDown操作，如果是显示状态，那么执行slideUp操作。

slideUp/slideDown：修改的是元素的height

淡入与淡出
fadeIn/fadeOut使用方法与show/hide、slideDown/slideUp一致。

fadeIn(speed, callback);
//speed(可选)：动画的执行时间
1.如果不传，默认是normal。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串，slow(200)、normal(400)、fast(600)
//callback(可选):执行完动画后执行的回调函数

淡入淡出切换：

fadeToggle(speed, callback);
//如果当前元素处于隐藏状态，那么执行fadeIn操作，如果处于显示状态，那么执行fadeOut操作。

淡入淡出到某个值
与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！

fadeTo(speed, value, callback)//可以设置具体的透明度
//speed（必须）
//value  0-1之间的数值(比如0.4)，表示淡到某一个值。
//callback(可选) 回调函数

fade系列方法：修改的是元素的opacity

动画小结

1. jQuery给我们提供了三组动画，show/hide、slideUp/slideDown、fadeIn/fadeOut
2. 动画切换方法：slideToggle、fadeToggle，注意：show和hide没有切换的方法。
3. 淡入淡出到某个值：fadeTo方法。
4. show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。
5. show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值，都是带数字的，因为带了数字才能做渐变。

自定义动画
animate：自定义动画

$(selector).animate({params},[speed],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）
// callback：动画执行完后立即执行的回调函数（可选）

动画队列问题
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行。

停止动画
stop方法：停止动画效果

stop(clearQueue, jumpToEnd);
//第一个参数：是否清除队列
//第二个参数：是否跳转到最终效果