jQuery实现点击标题文本的字体切换效果示例[测试可用]

本文举例说明了jQuery实现的点击标题文本切换字体的效果。分享给大家参考，如下：

这主要是通过判断被点击元素的子元素是否包含B元素来切换字体，其中wrapInner函数就是在$author元素内部添加B标签。

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

核心代码如下：

$('#f-author ')。css('光标'，'指针')；$('#f-author ')。click(function(event){ var $ author=$(this)；if(！$author.children()。is(' b '){//子元素没有b $ author . wrappinner(')；//包含在$ author } else { var text=$ author . text()；//纯文本$ author . text(text)；}});完整的代码如下：

！doctype html townleta charset=' utf-8 ' title www.jb51.net jquery点击标题切换字体/title Script src=' http:http://libs.baidu.com/jquery/2.0.0/jquery.min.js'/Script/headsdydiv id=' f-author '测试标题文本/div script $ ('# f-author ')。此处显示CSS('光标'，'指针')；$('#f-author ')。click(function(event){ var $ author=$(this)；if(！$author.children()。is(' b '){//子元素没有b $ author . wrappinner(')；//包含在$ author } else { var text=$ author . text()；//纯文本$ author . text(text)；}});/脚本/正文/html运行效果：

更多对jQuery感兴趣的读者，请查看本站话题：《jQuery切换特效与技巧总结》、《jQuery动画与特效用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》、0103010。

希望本文对大家的jQuery程序设计有所帮助。