槐念的前端学习历程

考虑到知识产权的问题，我撰文不查看他处参考，所有知识点根据我的理解、我的语气敲出。必要引用时给出来源。此举是为将学习成果作收获小结分享给朋友，也算是在心理上对每日学习态度的监督。此外，本号不为商用，所有文字、图片、代码均为本人知识成果，未经允许禁止转载。

今天继续jQuery的学习。下面说一说今天学了啥：

* 链式编程

在jquery中，设置型方法会返回调用该方法的$对象。利用此特性，可以连续设置一个对象的不同属性。

//如:给一个ID为box的标签设置前景色、value和文本内容

$('box').css('color','red').val('xixi').text('hiahia');

值得注意的是：事件方法都是设置型方法。此外，当有一些方法的返回值不是当前对象时，可使用end()方法将匹配的元素变更为上一次的状态。若有n次改变，就调用n次以获得最初的对象。

*类样式控制

1、添加类样式：

$对象.addClass('类样式1','类样式2','类样式3',...);

注意：类样式名称之前没有点'.'

2、移除类样式

//移除所有类样式

$对象.removeClass();

//移除指定类样式

$对象.removeClass('类样式1','类样式2','类样式3',...);

3、检测是否含有一个类样式

$对象.hasClass('样式名');

//返回值为布尔值

4、切换类样式

$对象.toggleClass('样式名');

若含有指定样式，就删除该样式。否则添加该样式。在使用此法切换样式时，对象含有的其他类样式不受影响。

*获取兄弟元素的几个方法

$对象.next();//获取该对象的下一个兄弟元素

$对象.nextAll();//获取该对象之后的所有兄弟元素

$对象.prev();//获取该对象的上一个兄弟元素

$对象.prevAll();//获取该对象之前的所有兄弟元素

$对象.siblings();//获取该对象的所有兄弟元素

值得注意的是，若括号内填写了选择器，那么会先使用该方法获得元素，然后再用选择器筛选一次.若结果无符合的元素则返回-1

*简单动画效果

下列所有的方法，若无特殊说明，他们的参数形式均为：[speed],[easing],[fn]

其中，[]意为选填，不填写则为默认样式。speed可以有number型（单位为毫秒）和string型（fast--200ms ; normal--400ms ; slow--600ms）;easing意为动画样式，数据类型为string，样式有两种：swing（默认）和linear；fn是一个回调函数，每一个元素执行完动画后就会执行该函数一次。

1、对角线动画（默认无动画时长）

$对象.show();//显示对象

$对象.hide();//隐藏对象

2、滑动动画（默认有动画时长）

$对象.slidUp();//向上滑出（消失）

$对象.slideDown();//向下滑入（显示）

$对象.slideToggle();//切换slideUp和slideDown

3、淡入与淡出（默认有动画时长）

$对象.fadeIn();//淡入

$对象.fadeOut();//淡出

$对象.fadeToggle();//切换淡入与淡出

//特殊：渐变目标透明度

$对象.fadeTo();//[speed],opacity,[easing],[fn]

//opacity为最终透明度，取值区间是[0,1]

//可改变页面所有内容的透明度

*一个封装好的动画方法

animate方法于jQuery中封装，可让目标由当前的样式动态渐变为设置的样式。调用格式为：

animate({CSS键值对},时间,回调函数);

其中，CSS键值对的写法与CSS方法中的参数写法一致，时间单位为毫秒，回调函数在每一个元素执行完动画后就会执行一次。特别地，当要改变目标的坐标时，先要让其脱离文档流。

*动画的排队效应

在JQuery中，$对象每调用一次动画方法，就会给该对象的动画队列添加一个动画任务，它们会一个个依次执行。在一个动画任务执行完成前后、不会执行下一个动画任务。无论过了多久，这些任务都会等待前面的动画执行完毕再执行。此时可使用stop方法清除该对象的动画任务队列：

$对象.stop().动画方法();

上述语句意为在一个动画执行之前清除动画队列，从而保证了该动画能立刻执行。

*$对象的创建、插入、移除、深拷贝

1、创建一个$对象

这个说法对应了DOM中的document.createElement()方法，格式为：

$('innerHTML内容');

//一般来说，我们用一个变量接收这个新的$对象的值

varxixi=$('innerHTML内容');

//特别地，类似于innerHTML，可有：

$对象.html('innerHTML内容');

//注意，这个方法会覆盖该对象之前拥有的页面内容

2、把一个对象插到与$对象相关的位置

下面的五个方法的参数均可为：innerHTML字符串、$对象、DOM节点，且他们都是剪切操作。

//将元素添加到父元素最后一个子元素之后：

父$对象.append(子对象)；

子$对象.appendTo(父对象);//为了链式编程的方便

//把元素添加为父元素的第一个子元素

父$对象.prepend(子对象)；

//把元素作为当前$对象的兄弟元素添加到$对象之后

$对象.after(兄弟对象);

//把元素作为当前$对象的兄弟元素添加到$对象之前

$对象.before(兄弟对象);

3、移除内容

$对象.html('');//清空该对象前后标签包含的内容

$对象.empty();//清空该对象前后标签包含的内容

$对象.remove();//删除该对象（自杀）

4、克隆

把该$对象复制一份。返回值即为拷贝出的副本

$对象.clone();

//一般来说，我们用一个变量接收这个新副本的值

varxixi=$对象.clone();

参数为布尔值，默认为false。当为true时将拷贝$对象的所有事件属性。注意：由于id也会被拷贝，故在使用时需要更改副本的id。

今天的小结就到这里，都是干货。下次见，晚安。