^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 阿里云1核2g仅需102元/年,今日10点开抢

Jquery特效:点击文字或图片隐藏指定div

阿里云双12限时特惠

Jquery 特效分类旨在分享学习 WordPress 过程中,一些常见的简单的 Jquery 特效,主要服务对象为零基础的 wordpress 初学者,如果你觉陌小雨分享的,就默默地点个赞,如果你觉得陌小雨分享的很好,就高调的打个赏,你的是对陌小雨最大的鼓励!

Jquery特效:点击文字或图片隐藏指定div

首先我们来了解一下下面这些知识:

1、什么是 jQuery ?

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少,做的多"的 JavaScript 库。

jQuery 库包含以下功能:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

提示: 除此之外,Jquery 还提供了大量的插件。

2、为什么使用 jQuery ?

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。

很多大公司都在使用 jQuery, 例如:

  • Google
  • Microsoft
  • IBM
  • Netflix

3、jQuery 是否适用于所有浏览器

jQuery 团体知道 JS 在不同浏览器中存在着大量的兼容性问题,目前部分版本的 jQuery 兼容于所有主流浏览器, 包括 Internet Explorer 6!

4、如何使用 jQuery

可以通过下面的标记把 jQuery 添加到网页中:

<script type="text/javascript" src="jquery.js"></script>

请注意,<script> 标签应该位于页面的 </body> 标签之前的任意位置。


本篇分享的就是利用 jquery 实现点击文字或者图片隐藏指定 div 层。

代码只需要一行即可:

<script>$(".close").click(function(){ $(".subsurface").toggle(); });</script>

上述代码可以直接加入网页中,如果需要整合到 WordPRess 的 js 文件,请移步查看:Script 脚本文件转换 js 文件调用

效果:首页底部有个 X,点击后隐藏该 div

举一反三:代码中.close 为你文字或者图片的 class,.subsurface 为你需要隐藏的 div 层 class。

让小雨知道,这篇文章帮到了你
扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来

热门推荐

如有疑问,请前往问答中心反馈!

反馈
  1. BanYuner
    这个不错 很简单 但是配上gif展示 估计会更好 其次右上角软件 图片最好也加上链接 或者整个block
    • 陌小雨博客网站管理员
      @BanYuner 恩,想法不错,忘了说了下,效果见首页底部的欢迎语。 :grin:
  2. themebetter
    过来瞅瞅老朋友 :grin:
  3. 纯洁博客
    这个是好东西
    • 陌小雨博客网站管理员
      @纯洁博客 简单、高效、值得拥有! :oops:
  4. Han
    签到成功!签到时间:下午9:22:45,陌小雨,你很棒!一起加油哦哦~
    • 陌小雨博客网站管理员
      @Han 神出鬼没呀 :mrgreen: