这个主要通过判断被点击的元素的子元素中是否包含了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. 【转】Lucene.NET详细使用与优化详解

    1 lucene简介1.1 什么是luceneLucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是提供了一种工 ...

  2. 100本最棒的web前端图书推荐

    前端技术,要学习的内容太多了,当你不知道从哪里开始的时候,你就先从看书开始,边看书边码代码,这个是学习编程必须的过程,因为你看一百遍,还不如自己写一遍,写一遍,第一可以加印象,第二便于更好的理解. 熟 ...

  3. rsync+inotify脚本

        #!/bin/bash src=/data/                           # 需要同步的源路径 des=data                             ...

  4. JS把命名空间传递给模块形式

    //方法依赖 jquery 或者其他 有扩展方法 extend() 类库  例如: underscore.js 链接地址 http://underscorejs.org var app = {}; ( ...

  5. zabbix 监控 tomcat jmx

    zabbix_server: zabbix_server.conf : # Add JavaGateway=127.0.0.1 JavaGatewayPort=10052 StartJavaPolle ...

  6. 五分钟秒懂Java日志组件

    Java中有许多种日志记录方式,有些API有占位符,有些API没占位符,初学的人可能会搞不清楚这些日志组件的由来.我一开始的时候也是很懵逼的,后来一点点弄懂了于是就又了这篇文章. 在Java中进行日志 ...

  7. SQL SERVER:CASE判断空,错误一例

     -----错误判断------------------------------------------------------------------------------------ SELEC ...

  8. 【Android】基于TCP协议的网络通信

    1.使用ServerSocket 创建TCP服务器端: ServerSocket server; try { server = new ServerSocket(8000); while (true) ...

  9. Web性能优化工具WebPageTest(一)——总览与配置

    网站性能优化工具大致分为两类:综合类和RUM类(实时监控用户类),WebPageTest属于综合类. WebPageTest通过布置一些特定的场景进行测试,例如不同的网速.浏览器.位置等. 测试完成后 ...

  10. AM335X开发板学习系列——环境搭建(vbox虚拟机ubuntu14.04下minicom的安装和配置)

    这个系列是我学习AM335X的总结. 1. ubuntu虚拟机的USB设备,选择启用usbserial 2. ubuntu虚拟机的网络,采用桥接模式,以保证开发板和ubuntu虚拟机能互相ping通 ...