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判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
基于jQuery实现可编辑的表格
Dec 11 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操作xml
2013/10/27 PHP
php网站地图生成类示例
2014/01/13 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
python获取远程图片大小和尺寸的方法
2015/03/26 Python
jupyter安装小结
2016/03/13 Python
python之PyMongo使用总结
2017/05/26 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
HTML5制作表格样式
2016/11/15 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
自荐信不宜过于夸大
2013/11/06 职场文书
测绘工程系学生的自我评价
2013/11/30 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android