学习JQuery - 10
第四章 Styling and Animating
1. 使用内联属性修改CSS
我们知道HTML在onload时会读取css的各项值。
那么,我们能不能在之后的操作中改变css值呢?
答案是肯定的!要不然,我们前几章就不会出现那么多不同的效果了。
那么jQuery通过那个方法控制的CSS值呢?
css()
jQuery无论获取或者设置css值都是通过这个方法。
在DW中键入“css”后的提示如下:
(1) 使用映射,即K-V
(2) 属性名
(3) 属性名和索引值
(4) 属性名和值
我们获取css值时使用(2); 设置css根据情况使用(1)、(3)、(4)。
我们把chpater03-1.html, chapter03.css更名为chapter04-1.html和chaptper04.css来做一演示。
a. 读取“.switcher”的“font-size”值
b. 转换为数字
c. 设置新的文章字体大小
js代码
// Get css value
var num = parseFloat($('.switcher').css('font-size'));
// Set css value
num *= 1.4;
$('body').css('font-size', num);
实现效果
Style Switcher
Default
Narrow Column
Large Print
A Christmas Carol
In Prose, Being a Ghost Story of Christmas
Preface
I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my readers out of humour with themselves, with each other, with the season, or with me. May it haunt their houses pleasantly, and no one wish to lay it.
Their faithful Friend and Servant,
C. D.
December, 1843.
Stave I: Marley's Ghost
MARLEY was dead: to begin with. There is no doubt whatever about that. The register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief mourner. Scrooge signed it: and Scrooge's name was good upon 'Change, for anything he chose to put his hand to. Old Marley was as dead as a door-nail.
Mind! I don't mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail. I might have been inclined, myself, to regard a coffin-nail as the deadest piece of ironmongery in the trade. But the wisdom of our ancestors is in the simile; and my unhallowed hands shall not disturb it, or the Country's done for. You will therefore permit me to repeat, emphatically, that Marley was as dead as a door-nail.
Scrooge knew he was dead? Of course he did. How could it be otherwise? Scrooge and he were partners for I don't know how many years. Scrooge was his sole executor, his sole administrator, his sole assign, his sole residuary legatee, his sole friend, and sole mourner. And even Scrooge was not so dreadfully cut up by the sad event, but that he was an excellent man of business on the very day of the funeral, and solemnised it with an undoubted bargain.
The mention of Marley's funeral brings me back to the point I started from. There is no doubt that Marley was dead. This must be distinctly understood, or nothing wonderful can come of the story I am going to relate. If we were not perfectly convinced that Hamlet's Father died before the play began, there would be nothing more remarkable in his taking a stroll at night, in an easterly wind, upon his own ramparts, than there would be in any other middle-aged gentleman rashly turning out after dark in a breezy spot—say Saint Paul's Churchyard for instance— literally to astonish his son's weak mind.
Scrooge never painted out Old Marley's name. There it stood, years afterwards, above the warehouse door: Scrooge and Marley. The firm was known as Scrooge and Marley. Sometimes people new to the business called Scrooge Scrooge, and sometimes Marley, but he answered to both names. It was all the same to him.
Oh! But he was a tight-fisted hand at the grind-stone, Scrooge! a squeezing, wrenching, grasping, scraping, clutching, covetous, old sinner! Hard and sharp as flint, from which no steel had ever struck out generous fire; secret, and self-contained, and solitary as an oyster. The cold within him froze his old features, nipped his pointed nose, shrivelled his cheek, stiffened his gait; made his eyes red, his thin lips blue; and spoke out shrewdly in his grating voice. A frosty rime was on his head, and on his eyebrows, and his wiry chin. He carried his own low temperature always about with him; he iced his office in the dog-days; and didn't thaw it one degree at Christmas.
External heat and cold had little influence on Scrooge. No warmth could warm, no wintry weather chill him. No wind that blew was bitterer than he, no falling snow was more intent upon its purpose, no pelting rain less open to entreaty. Foul weather didn't know where to have him. The heaviest rain, and snow, and hail, and sleet, could boast of the advantage over him in only one respect. They often "came down" handsomely, and Scrooge never did.
Nobody ever stopped him in the street to say, with gladsome looks, "My dear Scrooge, how are you? When will you come to see me?" No beggars implored him to bestow a trifle, no children asked him what it was o'clock, no man or woman ever once in all his life inquired the way to such and such a place, of Scrooge. Even the blind men's dogs appeared to know him; and when they saw him coming on, would tug their owners into doorways and up courts; and then would wag their tails as though they said, "No eye at all is better than an evil eye, dark master!"
But what did Scrooge care! It was the very thing he liked. To edge his way along the crowded paths of life, warning all human sympathy to keep its distance, was what the knowing ones call "nuts" to Scrooge.
附:
chapter04-1.js
$(document).ready(function() {
$('#switcher-large').click(function(e) {
// Get css value
var num = parseFloat($('.switcher').css('font-size'));
// Set css value
num *= 1.4;
$('body').css('font-size', num);
});
});
学习JQuery - 10的更多相关文章
- 【菜鸟学习jquery源码】数据缓存与data()
前言 最近比较烦,深圳的工作还没着落,论文不想弄,烦.....今天看了下jquery的数据缓存的代码,参考着Aaron的源码分析,自己有点理解了,和大家分享下.以后也打算把自己的jquery的学习心得 ...
- 学习Jquery
早就听说了Jquery的大名,一直没有细心的学习一下,通过阅读收集的一些资料,感觉Jquery真的很强大.决定开始自己的学习Jquery之旅.在这里不是为大家讲解Jquery(深知水平有限),只是将自 ...
- 学习jQuery之旅
早就听说了Jquery的大名,一直没有细心的学习一下,通过阅读收集的一些资料,感觉Jquery真的很强大.决定开始自己的学习Jquery之旅.在这里不是为大家讲解Jquery(深知水平有限),只是将自 ...
- 学习jQuery(1)
学习jQuery 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). jQuery 语法 jQuery 语法是为 HTML ...
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- 从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- 从零开始学习jQuery (一) 入门篇
本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些 ...
随机推荐
- 恶补java基础 位运算符
以前不知道在哪看过别人写博客里的一句话 “越学的深入觉得自己会的东西越少”.最近研究了一下java的基础算法 hash表 被一些位运算符搞的头都大了 决心花一些时间研究一下以前一直觉得没用的东西! ...
- Apache HttpComponents 如何在正常结束前中止一个HTTP请求
package org.apache.http.examples.client; import org.apache.http.HttpEntity; import org.apache.http.H ...
- BusyBox rcS&fstab配置
rcS为系统初始化脚本,完成最开始的一些配置工作,可开启应用程序. #!/bin/shmount -a ;mount文件,要mount的文件有fstab指定. . /etc/profile ...
- [Django学习]Ajax访问静态页面
Web开发中常用的一种开发方式是:通过Ajax进行系统的交互,采用Ajax进行交互的时候,更多的时候传输的是JSON格式的数据. 所以开发中我们需要将数据格式转化成JSON,请参见:https://w ...
- hadoop 参数
看<Hadoop:权威指南>的时候收集了书上写的一些需要优化的参数,记录了一下子,给大家分享一下吧. 1.mapred.task.timeout 任务超时时间,默认是10分钟 2.mapr ...
- PHPstorm8 自动换行设置方法
PHPstorm是一款非常不错的PHP开发工具,有很多需要自己设置.比如,IDE常见的代码自动换行功能需要我们自己去配置才能实现. File -> Settings -> Editor ...
- Charles安装包及破解包下载地址
Charles安装包及破解包下载地址 http://xclient.info/s/charles.html?_=baf317d2a9932afca9b32c327f8a34c9
- Nginx之虚拟目录-root与alias的区别
最近在nginx上部署日志分析工具awstats时,在配置awstats分析结果可供网页浏览这步时,分析结果页面访问总是404.后来查阅了一些资料,发现是root和alias的用法区别没搞懂导致的,这 ...
- Qt 反射
简介 本文主要讲解Qt是如何实现反射,以及一点点反射使用的小心得. 文章概览 Qt反射内幕小窥 详细内容 反射前期准备 得到注册的类成员变量 得到注册的类成员函数 访问类成员属性(get,set) 调 ...
- 《FPGA全程进阶---实战演练》第四章之Quartus II使用技巧
技巧1:“新”技能 hierarchies警告寻找 在编译之后,警告中“hierarchies”这个单词大家估计都很熟悉了,一看到这个警告,基本上就是例化时出现的问题.一般例化时,要是哪个连线没引出, ...