专栏首页零基础自学Java【JavaWeb】86:jQuery的属性、文档、动画以及事件

【JavaWeb】86:jQuery的属性、文档、动画以及事件

今天是刘小爱自学Java的第86天。

感谢你的观看,谢谢你。

话不多说,开始今天的学习:

昨天学习了jQuery中的选择器,有一些还没有学完全,只能说等到以后遇到了再查文档了。

并且更令人惊讶的是,其实这只是jQuery使用文档中的一部分,还有很多很多Api。

API是非常非常多的,全部学完那得花不少时间,只能说每种都学一点,学比较常见的。

选择器部分算是学的差不多了,今天继续学其它部分。所有的学习步骤也就是上图的这份文档。

一、DOM操作之属性

这个我们其实昨天就学过,比如获取标签内对应属性的值。

现在就对其做一个归纳总结,同时与js语法做一个对比。

1获得匹配元素的当前值

格式:val([val|fn|arr])。这是文档中的一个标准语法格式,其实也可以分情况来理解:

①获取标签的属性值

  • 在js中,对应的是value属性
  • 在jQuery中,对应的是函数val()

注意是val(),不是value()。

如果不赋值,那么获取的就是对应标签的值。

②设置标签的属性值

  • 在js中,是给value属性赋值。
  • 在jQuery中,是给函数val()传一个参数。

如果赋值,那么就是在修改对应标签的值。

2获得匹配元素的html内容/文本

这两个实在是太像了,就将它们放在一起讲了。

格式为:html([val|fn])、text([val|fn])。不要看其好像很复杂的样子,直接代码分析:

①获取标签的内容

  • 在js中,对应属性innerHTML和innerText
  • 在jQuery中,对应函数html()和text()

其中test只能获取文本内容,链接和标签名这些无法获取。

而html是获取所有的内容。

②设置标签的内容

使用text设置的话,标签只有文本不带有链接。

使用HTML设置的话,标签可以带有链接。

3获得匹配元素的属性

标签中有各种各样的属性,下面以div标签中的name属性作为例子:

attr,attribute 的缩写,即代表了属性。

①获取name属性

格式:attr("name"),获取对应标签的name属性值。

②修改name属性

格式:attr("name","xixi"),修改对应标签的name属性值。

③删除name属性

格式:removeAttr("name","xixi"),删除对应标签的name属性值。

其中除了attr()这个函数外,还有一个prop()这个函数,这两个函数功能是一样的。

它们两者之间的区别在于:

attr()更古老,能兼容多个版本,但功能不完整。

比如下拉框的属性使用attr()就没法获取,需要使用prop来获取。

二、CSS类和文档处理

1CSS类操作

①单独设置样式

这个通过函数css(),给对应标签设定样式。

其中参数为小驼峰式的命名规则:在CSS中是font-size,在jQuery中是fontSize。

②通过类选择器设置样式

先设置一个css类选择器样式,再通过addClass()函数,将对应标签指定为该类。

这样的话,选取的标签的样式也就是类选择器设定的样式了。

值得注意的是:如果选取的标签已经被CSS的id选择器指定了样式,那么这种方法是没有用的,因为id的优先级要比类高。

③移除类

addClass()是给对应标签添加一个类名,这样就能和CSS类选择器的样式对应了。

removeClass()是给对应标签移除一个类名,这样对应的样式就不存在了。

④切换样式

toggle,切换样式的意思。

其实也就是在添加类和移除类之间切换。

2文档处理

①内部插入append

格式:("#myId01").append(

也就是在id为myId01的标签后,添加到id为myId02的标签。

上述是在append参数里添加选择器,也可以直接在参数里面写标签添加。

append和appendTo的区别在于:

  • A append B:在A的后面添加B
  • A appendTo B:将A添加到B的后面

②内部插入prepend

格式:("#myId01").prepend(

原理①,只不过①是后面,②是前面。

③外部插入after

格式:("#myId01").after(

这个是和append是类似的,也是添加到后面。

和append的区别在于:

  • append是内部添加到后面
  • after是外部添加到后面

通过①和③的格式对比,可以很明显看出来。

④内部插入prepend

原理③,只不过③是后面,④是前面。

三、动画和事件

1动画效果

动画效果很难用文章来展示出来,我也就不一一展示了,大致能有个了解也好;

方法hide()、show()和toggle(),能达到动画的效果。

翻译过来就能理解,方法作用为:隐藏标签,展现标签,在隐藏和展现之间切换。

其中每个方法都有三个参数:

  • 第一个参数:可以设定动画时间(单位毫秒)
  • 第二个参数:可以设定动画效果("swing"为钟摆、"liner"为线性)
  • 第三个参数:可以设定一个函数,动画完成后会执行一次。

方法slideDown()、slideUp()、slideToggle(),能达到动画滑动的效果。

此外网上还有开源的各种动画效果,查询jQuery插件即可。

值得注意的是

在js中参数是不用完全一致,上述虽然有3个参数,但可写也可不写。

不像Java实参要与形参保持一致。

2事件

①绑定事件

函数为on(),一共有两个参数:

  • 第一个参数为事件名称,例子中为click事件。
  • 第二个参数为事件执行时的函数。

②解绑事件

函数为off(),参数即为事件名,即将对应标签绑定的事件名解绑。

③切换事件

函数为hover(),hover,盘旋悬浮的意思,一共有两个参数:

  • 第一个参数为鼠标移上去时触发的函数。
  • 第二个参数为鼠标移出去时触发的函数。

这样就能达到一个切换的效果。

以上就是对jQuery中动画和事件的说明,其它还有很多就不一一说明了。

再加上也有很多人说jQuery现在被淘汰了,不想花太多时间在这块,继续后面的学习。

最后

谢谢你的观看。

如果可以的话,麻烦帮忙点个赞,谢谢你。

本文分享自微信公众号 - 刘小爱(liuxiaoai946),作者:刘小爱

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【JavaWeb】75:写一个登录案例

    关于数据库这一块暂时也告一段落了,其中后续会做一个思维导图的总结。想把数据库完全学清楚,几天的学习肯定是远远不够的。毕竟要知道数据库在大学可是一门课,要花一整学...

    刘小爱
  • 【JavaWeb】83:js不能算是一门编程语言?

    因为才刚开始学js,所以很多话不敢说的太绝对,就加上了“基本,大概,可能”这样的形容词。

    刘小爱
  • 【JavaWeb】76:html各种标签

    下面编写代码,其中我每行之间用了两个换行符(<br/><br/>),为了使页面看起来相对而言更加美观些。

    刘小爱
  • 京东 AI Fashion-Challenge 挑战赛冠军方案详解(风格识别+时尚单品搜索)

    AI 科技评论按:随着消费升级时代的来临,中国时尚消费市场正渐渐变得更加个性化、精致化和多样化,服饰的时尚风格对消费动机的影响愈渐加深,而随着 AI 技术的发展...

    AI科技评论
  • [白话解析]以水浒传为例学习隐马尔可夫模型

    本文将尽量使用易懂的方式,尽可能不涉及数学公式,而是从整体的思路上来看,运用感性直觉的思考来解释隐马尔可夫模型。并且从名著中找了个具体应用场景来帮助大家深入这个...

    罗西的思考
  • JavaScript学习总结(七)

    这一讲我们来学习DOM编程(十分重要),有了DOM编程,我们就可以操作任意的HTML元素了。

    roobtyan
  • HTML第一课——基础知识普及【1】

    用户2149234
  • 学习设问以提高

    我在很多面试环节发现,工程师们往往不善于设问和解答,这样就导致他们面对问题时局促、紧张,甚至答非所问,无法正常发挥。而我觉得正确的学习方法需要工程师们学会设问,...

    数据和云
  • JavaScript 表单处理

    为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面。 一.表单介绍 在HTML中,表单是由<form>...

    汤高
  • 简易数据分析(七):Web Scraper 抓取表格、分页器翻页数据

    经典表格就这些知识点,没了。下面我们写个简单的表格 Web Scraper 爬虫。

    一只图雀

扫码关注云+社区

领取腾讯云代金券