jQuery二!!!

举报
hello word~/ 发表于 2020/08/10 22:46:07 2020/08/10
【摘要】 这是续前节的jQuery一: 1:insertBefore(‘xx’):将什么插入到xx前面。【解释:将一个标签插入某某标签XX前面,当然设置的样式也跟着一起插】 2: before($()):和上同理,不过括号里面传的东西需$()。【跟上面同理,不过有一点不同,这个括号里面传的东西需加$()】 3: insertAfter:同理,插入到xx后面。 4: after...

这是续前节的jQuery

一:

    1:insertBefore(‘xx’):将什么插入到xx前面。【解释:将一个标签插入某某标签XX前面,当然设置的样式也跟着一起插】

    2:  before($()):和上同理,不过括号里面传的东西需$()。【跟上面同理,不过有一点不同,这个括号里面传的东西需加$()】

    3: insertAfter:同理,插入到xx后面。

    4: after($()):同理(before),插入到后面。

    5: appendTo:将什么到xx里面。

    6:append($()):同理。

    7: prependTo(xx):将什么插入到xx元素里的第一个(就是传进去就是第一个)

    8:prepend($()):同理。

    9: remove(),.detach():删除事件或......

    10:$():1,创建可加样式 2,可创建任何字符串 3,可创建任何标签。【例如:$('<div style='color:red'><span>AA</span></div>')】

二:

基于jQuery对象增删改查相关方法:

     1: wrap:添加

     2: wrapper(),wrapInner(),wrapAll(),unWrap()

     3:wrapInner在内层外加东西

     4:$('.demo').wrapInner('<|div|>');就在.demo的这个标签内加了一个div,然后在两个span,p标签外包裹着span和p标签。

     5:wrapAll(xx):加的东西在最外层,就是给两个.demo加了一个爹(div),加的东西包裹所有xx,同级中使用这个。【就是加了标签后,这个标签就包裹着你本身的的标签】

     6:unWrap(xx):消除xx父级

     7:$(".demo").unWrap()就是直接把demo外层的类名为a的div标签干掉了。

     8: clone():克隆

     【 注:”click“点击克隆需要传参如:  $('.demo'),clone(true),appendTo('body');】

三 :

jQuery实例方法----事件

      1:事件绑定:

      2:on():后面可以绑定任何类型,同时也可绑定多个事件

      3:one():一次性事件

      4:off():取消,解绑,

      5:trigger():触发一些系统事件或自定义事件,也可以设置后让它自动触发

      6:hover():跟鼠标放上去,离开的状态

      7:click/keydown/mouseenter

   【 解释:就是输入的值在控制台都能显示,就像在一个input里面输入的值,然后这个方法就是让他按键盘后他就是显示出来】

四:

jQuery实列方法——动画

   1: show()——展示

   2:hide()——隐藏

   3: toggle——切换状态【一般用这种,很方便,也很容易】

   4:针对上面的解释【拓展:如果(xx)里面加了数字,就表示时间,就是展示的过程,比如举个列子:我要做一个东西展示,需要1000毫秒完成,然后速度匀速,show('1000','linear')】

   5:fadeIn()——淡入

   6: fadeOut()——淡出

   7:fadeToggle()——切换

   8: fadeTo——到...

   9:针对上面的解释【拓展:fadeTo(1500,0.6,fn)/(1500,0.1,fn)解释:在1500毫秒内,从透明0.6到0.1】

   10: slideDown()——卷出

   11: slideUp——卷入

   12:slideToggle——切换

五:animation==>变换、回调

        这个可以加很多属性,也可以改很多属性,像什么加宽高,直接就使用它$(this).animation(width:’+50‘,height:’+100px‘,left:’‘....)

    1:stop(true,true)——停止并瞬间移到目标点

    2:finish()——直接到最后的目标点,不管有几次目标点【就是一个标签或者元素使用finish()方法加个点击就ok了】

        上面两者的参数是true和false

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。