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 ...
随机推荐
- 介绍CPU,内存,硬盘,指令以及他们之间的关系
CPU:CPU,又称CPU芯片,中央处理器.是计算机上最重要的集成电路,位于计算机的主板上面,其主要任务是从主存上面提取指令和对指令进行执行,CPU包括运算逻辑部件.寄存器部件,运算器和控制部件等.C ...
- 关于mui选择器的使用
使用mui引入选择器的picker.js.poppicker.js.及他们的css文件之后引入代码与点击确定之后的状态: document.querySelector('#osex').addEven ...
- webpack学习笔记(二)-- 初学者常见问题及解决方法
这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
- java学习笔记 --- 抽象类
一.抽象类 (1)定义: 把多个共性的东西提取到一个类中,这是继承的做法. 但是呢,这多个共性的东西,在有些时候,方法声明一样,但是方法体. 也就是说,方法声明一样,但是每个具体的对象在具体实现的时候 ...
- 编写PHP代码总结
1- 编写模块化代码 良好的PHP代码应该是模块化代码.PHP的面向对象的编程功能是一些特别强大的工 具,可以把你的应用程序分解成函数或方法.你应该尽可能多的从你的应用程序的服务器端分开前端的HTML ...
- python安装图文教程---超详细。。。不过是转的,但有改动
如果你已安装好python,想安装第三方模块,方法详见如下地址: python安装第三方模块教程----marsggbo 1.想要安装Python,首先当然是去Python的官方网站(www.pyth ...
- Maven 自定义 archetype
最近在公司经常要写一些 storm-job 工程的骨架(archetype)非常相似,为了能够将大家的工程结构固定下来以及节约建工程的成本,所以给组内自定义了maven-archetype,中途遇到了 ...
- javaScript对象学习笔记(一)
一.什么是对象 对象: JavaScript的一种基本数据类型 对象是属性的无序集合,每个属性都是一个名/值对 JavaScript中的事物都是对象:字符串.数值.数组.函数... JavaScrip ...
- C#研究OpenXML之路(2-DocumentFormat.OpenXml命名空间)
一.OpenXML对象结构预览 昨天感受了一下OpenXML的编程,今天开始准备一头扎进OpenXML了.在了解一门新的知识前,首先最重要的是理清逻辑结构,否则学习起来会感觉摸不着北. 1.首先打开V ...
- 1.自定义控制器切换<一>
一.自定义控制器切换:在同一个控制器上,展示不同的控制器,类似于tabbar一样 二.怎么做?(问题解决步骤) 1.创建若干控制器:OneViewController TwoViewControlle ...