45 jQuery常用API

技术交流QQ群:1027579432,欢迎你的加入!

欢迎关注我的微信公众号:CurryCoder的程序人生

1.jQuery基础选择器

  • 原生JS获取元素的方式很多、很杂,而且兼容性情况不一致。因此,jQuery给我们做了封装,使获取元素统一标准。
  • 语法格式:
      $('选择器')   // 里面选择器直接写CSS选择器即可,但是要加引用
    jQuery基础选择器.png

2.jQuery层级选择器

jQuery层级选择器.png

3.jQuery隐式迭代

  • jQuery设置样式
      $('div').css('属性','值');
  • 隐式迭代:遍历内部DOM元素(伪数组形式存储)的过程。简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。

4.jQuery筛选选择器

jQuery筛选选择器.png

5.jQuery筛选方法[重点]

jQuery筛选方法.png

  • 重点记忆:parent()、children()、find()、siblings()、eq()。

6.jQuery中的排他思想

  • 想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式

7.jQuery中的样式操作

7.1 操作css方法
  • jQuery可以使用css方法来修改简单元素样式,也可以操作类,修改多个样式。
  • 参数只写属性名,则是返回属性值
      $(this).css("color");
  • 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用加单位和引号。
      $(this).css("color", "red");
  • 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号分隔开,属性名可以不用加引号。如果是复合属性必须采取驼峰名命名。如果属性值不是数字,必须加引号。
      $(this).css({"color": "red", "font-size": "14px"});
7.2 设置类样式方法[重点]
  • 作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点
  • 添加类
      $('div').addClass("current");
  • 删除类
      $('div').removeClass("current");
  • 切换类
      $('div').toggleClass("current");
7.3 类操作与className区别
  • 原生JS中的className会覆盖元素原先里面的类名。
  • jQuery里面的类操作只是对指定类进行操作,不影响原先的类名。

8.jQuery动画效果

  • jQuery给我们封装了很多的动画效果,最常见的如下所示:
    jQuery动画效果.png
8.1 显示、隐藏与切换效果
  • 显示语法规范:
      show([[speed], [easing], [fn]])
  • 显示参数说明:
    • 参数都可以省略,无动画直接显示;
    • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如:1000)。
    • easing:用来指定切换效果,默认是swing,可用参数linear。
    • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
  • 隐藏语法规范:
      hide([[speed], [easing], [fn]])
  • 隐藏参数说明:
    • 参数都可以省略,无动画直接显示;
    • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如:1000)。
    • easing:用来指定切换效果,默认是swing,可用参数linear。
    • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
  • 切换语法规范:
      toggle([[speed], [easing], [fn]])
  • 切换参数说明:
    • 参数都可以省略,无动画直接显示;
    • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如:1000)。
    • easing:用来指定切换效果,默认是swing,可用参数linear。
    • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
8.2 滑动效果
  • 下拉滑动效果语法规范:
      slideDown([[speed], [easing], [fn]])
  • 下拉滑动效果参数说明:
    • 参数都可以省略,无动画直接显示;
    • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如:1000)。
    • easing:用来指定切换效果,默认是swing,可用参数linear。
    • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
  • 上拉滑动效果语法规范:
      slideUp([[speed], [easing], [fn]])
  • 上拉滑动效果参数说明:
    • 参数都可以省略,无动画直接显示;
    • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如:1000)。
    • easing:用来指定切换效果,默认是swing,可用参数linear。
    • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
  • 切换滑动效果语法规范:
      slideToggle([[speed], [easing], [fn]])
  • 切换滑动效果参数说明:
    • 参数都可以省略,无动画直接显示;
    • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如:1000)。
    • easing:用来指定切换效果,默认是swing,可用参数linear。
    • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
8.3 事件切换
  • 事件切换语法规范:
      hover([over,]out)
  • 事件切换参数说明:
    • over:鼠标移动到元素上要触发的函数(相当于mouseenter)
    • out:鼠标移出元素要触发的函数(相当于mouseleave)
8.4 动画队列及其停止排队方法
  • 动画或效果队列:动画或效果一旦触发就会执行,如果多次触发,就会造成多个动画或者效果排队执行。
  • 停止排队
      stop()
  • 停止排队说明:
    • stop()方法用于停止动画或效果。
    • 注意:stop()写到动画或效果的前面,相当于停止结束上一次的动画
8.5 jQuery淡入淡出效果
  • 淡入效果语法规范:
      fadeIn([[speed],[easing], [fn]])
  • 淡入效果参数说明:
    • 参数都可以省略,无动画直接显示;
    • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如:1000)。
    • easing:用来指定切换效果,默认是swing,可用参数linear。
    • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
  • 淡出效果语法规范:
      fadeOut([[speed],[easing], [fn]])
  • 淡出效果参数说明:
    • 参数都可以省略,无动画直接显示;
    • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如:1000)。
    • easing:用来指定切换效果,默认是swing,可用参数linear。
    • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
  • 淡入淡出切换效果语法规范:
      fadeToggle([[speed],[easing], [fn]])
  • 淡入淡出切换效果参数说明:
    • 参数都可以省略,无动画直接显示;
    • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如:1000)。
    • easing:用来指定切换效果,默认是swing,可用参数linear。
    • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
  • 渐进方式调整到指定的透明度语法规范
      fadeTo([[speed],opacity, [easing], [fn]])
    • 渐进方式调整到指定的透明度参数说明:
      • opacity透明度必须写,取值0~1之间
      • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如:1000),必须写
      • easing:用来指定切换效果,默认是swing,可用参数linear。
      • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
8.6 自定义动画animate[重点]
  • 语法规范:
      animate(params, [speed], [easing], [fn])
  • 参数说明:
    • params: 想要修改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果复合属性则需要采用驼峰命名法borderLeft,其余参数都可以省略
    • speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒值(如:1000)。
    • easing:用来指定切换效果,默认是swing,可用参数linear。
    • fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

9.资料下载

全部评论

相关推荐

程序员小白条:你是沟通了900个,不是投了900份简历,你能投900份,意味着对面都要回复你900次,你早就找到实习了,没亮点就是这样的,别局限地区,时间投的也要早,现在都要7月了
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
06-21 11:33
昨天是学校最后一场招聘会,鼠鼠去参加了,全场只有一个招聘java的岗位,上来先做一份笔试题,做完后他拿张纸对答案,然后开始问简历上的问题,深圳小厂,6-8k(题目如下),后面还有两轮面试。然后我就在招聘现场逛呀逛,看到有公司招聘电商运营,给的比上年的小厂还多,鼠鼠就去了解了下,然后hr跟鼠鼠要了份简历,虽然我的简历上面全是求职Java开发相关的内容,但是hr还是鼓励我说没关系,她帮我把简历给老板看看,下周一会给我通知。招聘会结束后鼠鼠想了一段时间,也和朋友聊了聊,发现我可能是不太适合这个方向,然后就跟爸爸说回家了给我发条微信,我有些话想跟他说说。晚上爸爸到家了,跟我发了条微信,我立马跑出图书馆跟他打起了电话,这个通话长达一个小时,主要是跟爸爸坦白说我不想找这行了,是你的儿子太没用了,想试试其他行业。然后爸爸也跟我说了很多,说他从来没有希望我毕业后就赚大钱的想法,找不到就回家去,回家了再慢慢找,实在找不到就跟他干(帮别人装修房子,个体户),他也知道工作不好找,让我不要那么焦虑,然后就是聊一些家常琐事。对于后面的求职者呢我有点建议想提一下,就是如果招实习的时间或者秋招开始,而你的简历又很差的情况下,不要说等做好项目填充完简历之后再投,那样就太晚了,建议先把熟悉的项目写上简历,然后边投边面边完善,求职是一个人进步的过程,本来就比别人慢,等到一切都准备好后再投岂不是黄花菜都凉了。时间够的话还是建议敲一遍代码,因为那样能让你加深一下对项目的理解,上面那些说法只是针对时间不够的情况。当然,这些建议可能没啥用,因为我只是一个loser,这些全是建立在我理想的情况下,有没有用还需其他人现身说法。上篇帖子没想到学校被人认了出来,为了不丢脸只能匿名处理了。
KPLACE:找研发类或技术类,主要还是要1.多投 2.多做准备,很多方面都要做准备 3.要有心理准备,投累了就休息一两天,再继续,要相信自己能找到
投递58到家等公司10个岗位
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
昨天 17:55
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务