第四章 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

by Charles Dickens

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的更多相关文章

  1. 【菜鸟学习jquery源码】数据缓存与data()

    前言 最近比较烦,深圳的工作还没着落,论文不想弄,烦.....今天看了下jquery的数据缓存的代码,参考着Aaron的源码分析,自己有点理解了,和大家分享下.以后也打算把自己的jquery的学习心得 ...

  2. 学习Jquery

    早就听说了Jquery的大名,一直没有细心的学习一下,通过阅读收集的一些资料,感觉Jquery真的很强大.决定开始自己的学习Jquery之旅.在这里不是为大家讲解Jquery(深知水平有限),只是将自 ...

  3. 学习jQuery之旅

    早就听说了Jquery的大名,一直没有细心的学习一下,通过阅读收集的一些资料,感觉Jquery真的很强大.决定开始自己的学习Jquery之旅.在这里不是为大家讲解Jquery(深知水平有限),只是将自 ...

  4. 学习jQuery(1)

    学习jQuery 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). jQuery 语法 jQuery 语法是为 HTML ...

  5. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  6. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  7. 从零开始学习jQuery (三) 管理jQuery包装集

    本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...

  8. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  9. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

随机推荐

  1. C语言 · 完美的代价

    基础练习 完美的代价   时间限制:1.0s   内存限制:512.0MB        锦囊1 使用贪心算法. 锦囊2 从左到右枚举每个字符,移动对应字符.个数为单的字符放中间.   问题描述 回文 ...

  2. [Makefile]多目录Makefile写法

    最近需要写一个测试程序,这个测试程序需要集成一些功能,写在同一个文件看上去很不好,多个文件的Makefile又不是很熟,于是分享下面这篇文章 先介绍下,调试Makefile时,想知道某个变量的值,怎么 ...

  3. javascript商务通

    //左侧就医服务新 document.write("<style type='text/css'>"); document.write(".left_swt{ ...

  4. 字符数组在C++、C#等语言中的操作

    1.C++中操作数组 #include <iostream> using namespace std; int length(char []); void output_frequency ...

  5. shell两个数字的运算,一共三个变量

    #!/bin/bash #两个数运算的简单脚本 + ,一共三个参数 echo $# #对获取的参数以此判断是否包含[a-zA-Z]的东西,如果包含就退出.因为数字相加不是数字就是加减乘除 for i_ ...

  6. 使用MultipartEntity上传文件(带进度对话框)

    package com.home.uploadfile; import java.io.File; import android.app.Activity; import android.os.Bun ...

  7. js学习笔记20----addClass,removeClass函数封装

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 自然语言交流系统 phxnet团队 创新实训 项目博客 (二)

    基本要求 打开软件,即可进入2D文本交流界面, 软件此时已经连接到服务器,点击文本输入框输入你想说的话,点击发送按钮即可进行交流,点击CHAT和STUDY分别切换到聊天模式或是学习模式,聊天模式是机器 ...

  9. EF修改对象里面的值。。。(对象字段多的时候)

    后台代码 public ActionResult Edit(my m)//my实体类 { testEntities t = new testEntities();//数据库上下文 t.my.Attac ...

  10. 【Java面试题】42 TreeSet里面放对象,如果同时放入了父类和子类的实例对象,那比较时使用的是父类的compareTo方法,还是使用的子类的compareTo方法,还是抛异常!

    应该是没有针对问题的确切的答案,当前的add方法放入的是哪个对象,就调用哪个对象的compareTo方法,至于这个compareTo方法怎么做,就看当前这个对象的类中是如何编写这个方法的 试验如下: ...