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

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

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

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. 介绍CPU,内存,硬盘,指令以及他们之间的关系

    CPU:CPU,又称CPU芯片,中央处理器.是计算机上最重要的集成电路,位于计算机的主板上面,其主要任务是从主存上面提取指令和对指令进行执行,CPU包括运算逻辑部件.寄存器部件,运算器和控制部件等.C ...

  2. 关于mui选择器的使用

    使用mui引入选择器的picker.js.poppicker.js.及他们的css文件之后引入代码与点击确定之后的状态: document.querySelector('#osex').addEven ...

  3. webpack学习笔记(二)-- 初学者常见问题及解决方法

    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...

  4. java学习笔记 --- 抽象类

    一.抽象类 (1)定义: 把多个共性的东西提取到一个类中,这是继承的做法. 但是呢,这多个共性的东西,在有些时候,方法声明一样,但是方法体. 也就是说,方法声明一样,但是每个具体的对象在具体实现的时候 ...

  5. 编写PHP代码总结

    1- 编写模块化代码 良好的PHP代码应该是模块化代码.PHP的面向对象的编程功能是一些特别强大的工 具,可以把你的应用程序分解成函数或方法.你应该尽可能多的从你的应用程序的服务器端分开前端的HTML ...

  6. python安装图文教程---超详细。。。不过是转的,但有改动

    如果你已安装好python,想安装第三方模块,方法详见如下地址: python安装第三方模块教程----marsggbo 1.想要安装Python,首先当然是去Python的官方网站(www.pyth ...

  7. Maven 自定义 archetype

    最近在公司经常要写一些 storm-job 工程的骨架(archetype)非常相似,为了能够将大家的工程结构固定下来以及节约建工程的成本,所以给组内自定义了maven-archetype,中途遇到了 ...

  8. javaScript对象学习笔记(一)

    一.什么是对象 对象: JavaScript的一种基本数据类型 对象是属性的无序集合,每个属性都是一个名/值对 JavaScript中的事物都是对象:字符串.数值.数组.函数... JavaScrip ...

  9. C#研究OpenXML之路(2-DocumentFormat.OpenXml命名空间)

    一.OpenXML对象结构预览 昨天感受了一下OpenXML的编程,今天开始准备一头扎进OpenXML了.在了解一门新的知识前,首先最重要的是理清逻辑结构,否则学习起来会感觉摸不着北. 1.首先打开V ...

  10. 1.自定义控制器切换<一>

    一.自定义控制器切换:在同一个控制器上,展示不同的控制器,类似于tabbar一样 二.怎么做?(问题解决步骤) 1.创建若干控制器:OneViewController TwoViewControlle ...