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);
}
});
JQuery实现通过点击标题切换字体的更多相关文章
- jquery如何实现点击标题收缩下面的内容
jquery如何实现点击标题收缩下面的内容 一.总结 一句话总结:怎么做复杂前端任务,先把样式(最简单)做出来,然后在写js. 1.如何取jquery集合中的某个索引号的元素? 不是get(),是eq ...
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
- jQuery点击缩略图切换大图代码
很多网站上都会有点击缩略图切换成大图的效果,下面来分享一下它的源码 还是先来看效果截图 运行文件 然后点击下一张 下面分享源代码 html文件 <!DOCTYPE html PUBLIC &qu ...
- jquery 实现点击颜色切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 利用jquery写的一个TAB页切换效果
函数如下 /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == ...
- jQuery Mobile 连接外部连接或切换动画
jQuery Mobile不同网页之间的跳转问题 jQuery Mobile,一个新的手机终端脚本开发库,从名字可以看出,它是基于jQuery:目前支持很多种手机设备,包括IOS/Android/Bl ...
- JS框架_(JQuery.js)文章全屏动画切换
百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...
- jQuery鼠标滚动垂直全屏切换代码
体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...
- IOS 修改UIAlertController的按钮标题的字体颜色,字号,内容
IOS 修改UIAlertController的按钮标题的字体颜色,字号,内容 UIAlertController *alertVC = [UIAlertController alertControl ...
随机推荐
- canvas的使用
1.概念 canvas一般就是用来绘制图像的 2.基本知识 上下文对象 var canvas = doucment.getElementById("canvas") ...
- MongoDB一般安装
MongoDB一般安装 1.首先到官网(http://www.mongodb.org/downloads )下载合适的安装包,目前的最新版本为2.6 安装包有zip和msi格式的,这里推荐下载zip格 ...
- SQL注入相关的知识【Mysql为例子】
以DVWA的sql注入初级为例,结合网上搜索的相关利用方式,总结成这一篇文章,内容会有点跳跃. 大纲: 1.初级手工注入 2.order by的使用 3.union查询注意点 4.Mysql相关的注释 ...
- nodejs npm常用命令 转
npm是一个node包管理和分发工具,已经成为了非官方的发布node模块(包)的标准.有了npm,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装的包. 1.npm install m ...
- 随机跳转页面之使用VBA公共变量
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- 手机自动化测试:Appium源码分析之跟踪代码分析八
手机自动化测试:Appium源码分析之跟踪代码分析八 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家 ...
- 手机自动化测试:appium源码分析之bootstrap六
手机自动化测试:appium源码分析之bootstrap六 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.poptest测试 ...
- Oracle常用数据字典
1.查看所有存储过程.索引.表格.PACKAGE.PACKAGE BODY select * from user_objects; 2.查询所有的Job select * from user_jobs ...
- Selenium 2.0与Selenum 3.0介绍
什么是Selenium Selenium是一组web自动化测试工具集,它由以下几个部分构成: Selenium IDE(Integrated Development Environment)这是Fir ...
- Python爬虫 Cookie的使用
Cookie,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密) 比如说有些网站需要登录后才能访问某个页面,在登录之前,你想抓取某个页面内容是不允许的.那么 ...