jQuery实现的点击标题文字切换字体效果示例【测试可用】


Posted in jQuery onApril 26, 2018

本文实例讲述了jQuery实现的点击标题文字切换字体效果。分享给大家供大家参考,具体如下:

这个主要通过判断被点击的元素的子元素中是否包含了b元素来进行字体的切换,其中wrapInner函数是为了在$author元素的内部添加b标签。

切换回正常字体是通过将内容转化为纯文本形式,再替换元素内容来实现的。

核心代码如下:

$('#f-author').css('cursor','pointer');
$('#f-author').click(function(event){
  var $author = $(this);
  if(!$author.children().is('b')){//子元素没有b
    $author.wrapInner('<b></b>');//包含在$author里面
  }
  else{
    var text = $author.text(); //纯文本
    $author.text(text);
  }
});

完整代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3water.com jQuery点击标题切换字体</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="f-author">这里显示测试标题文字</div>
<script>
$('#f-author').css('cursor','pointer');
$('#f-author').click(function(event){
  var $author = $(this);
  if(!$author.children().is('b')){//子元素没有b
    $author.wrapInner('<b></b>');//包含在$author里面
  }
  else{
    var text = $author.text(); //纯文本
    $author.text(text);
  }
});
</script>
</body>
</html>

运行效果:

jQuery实现的点击标题文字切换字体效果示例【测试可用】

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery仿京东商品放大浏览页面
Jun 06 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 #jQuery
jQuery length 和 size()区别总结
Apr 26 #jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 #jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 #jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 #jQuery
JQuery元素快速查找与操作
Apr 22 #jQuery
关于jquery layui弹出层的使用方法
Apr 21 #jQuery
You might like
FCKeditor添加自定义按钮
2008/03/27 PHP
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
React组件生命周期详解
2017/07/03 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
Vue数据绑定实例写法
2019/08/06 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
Python接口测试文件上传实例解析
2020/05/22 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
大学生就业自荐书
2014/06/16 职场文书
应聘教师求职信
2014/07/19 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
长城的导游词
2015/01/30 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
windows安装python超详细图文教程
2021/05/21 Python
java版 简单三子棋游戏
2022/05/04 Java/Android