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 21 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
php无限遍历目录示例
2014/02/21 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
Python 抓取动态网页内容方案详解
2014/12/25 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
SQL数据库笔试题
2016/03/08 面试题
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
施工资料员的岗位职责
2013/12/22 职场文书
施工协议书范本
2014/04/22 职场文书
综合实践活动总结
2014/05/05 职场文书
工地宣传标语
2014/06/18 职场文书
生物学专业求职信
2014/07/23 职场文书
教导处教学工作总结
2015/08/12 职场文书
《游戏公平》教学反思
2016/02/20 职场文书