这个主要通过判断被点击的元素的子元素中是否包含了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);
}
});

JQuery实现通过点击标题切换字体的更多相关文章

  1. jquery如何实现点击标题收缩下面的内容

    jquery如何实现点击标题收缩下面的内容 一.总结 一句话总结:怎么做复杂前端任务,先把样式(最简单)做出来,然后在写js. 1.如何取jquery集合中的某个索引号的元素? 不是get(),是eq ...

  2. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  3. jQuery点击缩略图切换大图代码

    很多网站上都会有点击缩略图切换成大图的效果,下面来分享一下它的源码 还是先来看效果截图 运行文件 然后点击下一张 下面分享源代码 html文件 <!DOCTYPE html PUBLIC &qu ...

  4. jquery 实现点击颜色切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 利用jquery写的一个TAB页切换效果

    函数如下 /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == ...

  6. jQuery Mobile 连接外部连接或切换动画

    jQuery Mobile不同网页之间的跳转问题 jQuery Mobile,一个新的手机终端脚本开发库,从名字可以看出,它是基于jQuery:目前支持很多种手机设备,包括IOS/Android/Bl ...

  7. JS框架_(JQuery.js)文章全屏动画切换

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

  8. jQuery鼠标滚动垂直全屏切换代码

    体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...

  9. IOS 修改UIAlertController的按钮标题的字体颜色,字号,内容

    IOS 修改UIAlertController的按钮标题的字体颜色,字号,内容 UIAlertController *alertVC = [UIAlertController alertControl ...

随机推荐

  1. H5 表单元素

    HTML5 表单元素 HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input typ ...

  2. Python实现Windows定时关机

    是最初的几个爬虫,让我认识了Python这个新朋友,虽然才刚认识了几天,但感觉有种莫名的默契感.每当在别的地方找不到思路,总能在Python找到解决的办法.自动关机,在平时下载大文件,以及跑程序的时候 ...

  3. 深入解读Python的unittest并拓展HTMLTestRunner

    unnitest是Python的一个重要的单元测试框架,对于用Python进行开发的同事们可能不需要对他有过深入的了解会用就行,但是,对于自动化测试人员我觉得是要熟知unnitest的执行原理以及相关 ...

  4. [笔记]LR和SVM的相同和不同

    之前一篇博客中介绍了Logistics Regression的理论原理:http://www.cnblogs.com/bentuwuying/p/6616680.html. 在大大小小的面试过程中,经 ...

  5. iOS坐标转换失败?UIKit的屠神坑

    使用UIKit的坐标转换方法convertxxx,千万要注意: 一个控件可以转换子控件上的某个点,到另外一个控件上 但是不能转换自己本身的点,到另外一个控件上,否则会数量加倍 所以,一个控件若想转换本 ...

  6. JD . 圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中|不占位置

    ---恢复内容开始--- 圆角矩形 border-radius:50%  40%  30%  33px:   像素.百分比.小数( 0.5 ) 左上.右上.右下.左下 权重: 标签 1 : 类选择器 ...

  7. PRINCE2的发展情况是什么样

    英国皇家特许培训机构AXELOS近期公布了一份调查结果,调查共有172位项目经理参与,其结果展示了未来全球趋势,对项目经理未来的职业形态和对他们必备技能的影响.  未来的项目管理职业  调查结果同时给 ...

  8. 模式识别(1)——PCA算法

    作者:桂. 时间:2017-02-26  19:54:26 链接:http://www.cnblogs.com/xingshansi/articles/6445625.html 声明:转载请注明出处, ...

  9. 老李分享:qtp自动化测试框架赏析-关键字自动化测试框架

    老李分享:qtp自动化测试框架赏析-关键字自动化测试框架   QTP从2005年继winrunner,robot逐渐退出历史舞台之后,占领主流自动化测试工具市场已经10年之久.当初为了提高在自动化测试 ...

  10. Oracle常用数据字典

    1.查看所有存储过程.索引.表格.PACKAGE.PACKAGE BODY select * from user_objects; 2.查询所有的Job select * from user_jobs ...