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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现简单轮播图效果
Dec 27 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
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
php给图片加文字水印
2015/07/31 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
php表单处理操作
2017/11/16 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
详解使用vuex进行菜单管理
2017/12/21 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
python套接字流重定向实例汇总
2016/03/03 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
python如何实现数据的线性拟合
2019/07/19 Python
windows下python安装pip方法详解
2020/02/10 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
编辑找工作求职信分享
2014/01/03 职场文书
自荐信的格式
2014/03/10 职场文书
交通志愿者活动总结
2014/06/27 职场文书
升学宴学生答谢词
2015/01/05 职场文书
村干部任职承诺书
2015/01/21 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python