槐念的前端学习历程

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

今天继续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。

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181030G1WCQK00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券