Monthly Archives: 八月 2015

JavaScript hosting

Reference: http://www.kenneth-truyers.net/2013/04/20/javascript-hoisting-explained/

What is hoisting?

In Javascript, you can have multiple var-statements in a function. All of these statements act as if they were declared at the top of the function. Hoisting is the act of moving the declarations to the top of the function.

Hoisting versus block-scope

In most programming languages there’s something called block-scope. Basically what it means is that every variable declared within a block is only visible within that block. The following code snippet in c# shows this behavior:

In the snippet above, the variable myvar is only available inside the for-loop. That’s because c# has block-scope (just as VB.NET, Java and most other languages).

If we look at Javascript however, there are only two scopes (in ES5): global and function scope. So if we write an equivalent method in Javascript the result is quite different:

Because Javascript “hoists” the declaration of myvar to the top of the function this will actually alert ‘5’. The above code is functionally equivalent to this, which explains the behavior:

Unexpected behavior due to hoisting

As said, if you expect your variables to be block-scoped, you will get unexpected behavior and unexplainable errors. Let’s look at a few examples:

Variable hoisting

Normally you would expect the first alert to display the value of the global variable since you haven’t overwritten it yet. However, since the declaration is actually hoisted to the top it overwrites it at the start of the function.

The following code is functionally equivalent:

Function hoisting

When we are declaring functions inside a function there are two patterns available: function expressions and function declarations:

As you can see, both implementations are valid and you can call them using the same syntax. This might lead you to believe that they are in fact equivalent. However, there is a small difference when it comes to hoisting: function declarations get hoisted completely (name AND implementation) whereas function expressions get only the variable declaration hoisted and not the implementation. Let’s look at an example:

In this example you can see that, as with normal variables, just the presence of mymethod and mysecondmethod inside the function moves them to the top. However, mymethod (a function declaration) gets hoisted completely and therefore is available everywhere inside the function. On the other hand, mysecondmethod (a function expression) has only the var declaration hoisted, which prevents the global method from being seen but is not usable as a function until it’s assigned.

Best practices

From the examples, it’s obvious that the hoisting behavior Javascript exhibits can lead to confusing results and make it difficult to read code. Therefore you should follow some best practices.

What you really want when you read code, is that it clearly states what it does. Since you know it’s moving the variable declarations to the top, you should do this explicitly, so it’s obvious that they’re there. Consider the following examples (the first one is the “wrong” one, the second example show a better version):

Sidenote

For completeness sake, I need to mention that behind the scenes things are actually implemented a little bit different. The ECMAScript standard does not define hoisting as “the declaration gets moved to the top of the function”. Handling code happens in two steps: the first one is parsing and entering the context and the second one is runtime code execution. In the first step variables, function declarations and formal parameters are created. In the second stage function expressions and unqualified identifiers (undeclared variables) are created. However for practical purposes we can adopt the concept of hoisting.

Conclusion

With this post I tried to demystify some of the strange behavior you sometimes may experience. I hope by reading this and applying the concept you can avoid some frustration in the future. Following the best practices will get you a long way, and remember: it’s Javascript, it IS different.

Some examples

Question: Can you please tell me why following throws error:

Answer: Because x is not hoisted. If you don’t declare x with a var-keyword, it will not be hoisted. When it reaches the second line (assuming it does) it just assigns it to a global variable. But because in the first line it tries to print something that doesn’t yet exist, it throws an error. To clarify this, you can rewrite your example like this:

Or similar, but instead of a global variable with a variable on an object. (global variables are just that, a variable on the window object, which is global):

Question: Can you explain this:

Answer: Remember “function declarations get hoisted completely (name AND implementation)” so after hoisting the function actually looks something like this:

The functions have been hoisted to the top and by effectively declaring the function twice the last one wins and overwrites the implemenation of the first.

Question: Does this mean things like variable declarations in for loops get hoisted, too? So declaring i in a for loop once will result in it getting hoisted to the top and any subsequent call to i in a for loop under the first one (but not inside) will have the same final value as i? Does that make sense? Guess I could try it out in dev tools, but this is more fun.

Answer: Yes, variables only have function scope, so in a loop they are shared as well:

CSS media Queries

Source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

A media query consists of a media type and at least one expression that limits the style sheets’s scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored (裁剪,使适合) to a specific range of output devices without having to change the content itself.

Syntax

Media queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true to false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.

When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Style sheets with media queries attached to their <link> tags will still downloaded even if their media queries would return false (they will not apply, however).

Unless you use the not or only operators, the media type is optional and the all type will be implied.

Logical operators

You can compose complex media queries using logical operators, including not, and, and only. The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. The not operator is used to negate an entire media query. The only operator is used to apply a style only if the entire query matches, useful for preventing older browsers from applying selected styles. If you use the not or only operators, you must specify an explicit media type.

You can also combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the entire media statement returns true. This is equivalent to an or operator.

and

The and keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied all media type, could look like this:

If, however, you wanted this to apply only if the display is in landscape, you could use an and operator to chain the media features together.

Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an and operator.

Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.

comma-separated lists

Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.

For instance, if you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:

Above, if I were on a screen device with a viewport width of 800px, the media statement would return true because the first part, interpreted as @media all and (min-width: 700px) would apply to my device and therefore return true, despite the fact that my screen device would fail the handheld media type check in the second media query. Likewise, if I were on a handheld device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.

not

The not keyword applies to the whole media query and returns true if the media query would otherwise return false (such as monochrome on a color display or a screen width of 600px with a min-width: 700px feature query). A not will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The not keyword cannot be used to negate an individual feature query, only an entire media query. For example, the not is evaluated last in the following query:

The means that the query is evaluated like this:

…rather than like this:

As another example, look at the following media query:

It is evaluated like this:

only

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles:

Pseudo-BNF (for those of you that like that kind of thing)

Media queries are case insensitive. Media queries involving unknown media types are always false.

Note: Parentheses are required around expressions; failing to use them is an error.

Again, for more details, please refer to https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.

meta标签

<meta>元素可提供有关页面的元信息(meta-information),该标签永远位于文档的头部(head元素内部),不包含任何内容

必须的属性
属性 描述
content some_text 定义与http-equiv或name属性相关的元信息(content属性始终要和name属性或http-equiv属性一起使用)
可选的属性
属性 描述
http-equiv content-type
expires
refresh
set-cookie
其他
把content属性关联到HTTP头部。(如果没有提供name属性,那么会采用http-equiv属性的值)。
name author
description
keywords
generator
revised
其他
把content属性关联到一个名称。
scheme some_text 定义用于翻译content属性值的格式,如<meta name=”date” content=”2012-01-01″ scheme=”YYYY-MM-DD” />和<meta name=”identifier” content=”0-1234-5678-9″ scheme=”ISBN” />。

下面是一些例子和说明

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
这将告诉浏览器准备接收一个字符集为gb2312的HTML文档。注意,在HTML5中,上面的内容可以直接缩写为<meta charset=”utf-8″>
<meta http-equiv=”expires” content=”Fri,31 Dec 2008 18:18:18 GMT” />
设定网页的到期时间,一旦网页过期,必须到服务器上重新传输。注意,必须使用GMT的时间格式。
<meta http-equiv=”Refresh” content=”5;url=http://www.orzzone.com” />
将在5秒后重定向到指定的网址(http://www.orzzone.com),注意这里的URL可为空。
<meta http-equiv=”Pragma” content=”no-cache” />
禁止浏览器从本地计算机的缓存(cache)中访问页面内容。注意,这样设定后,访问者将无法脱机浏览。
<meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/” />
设定cookie,如果网页过期,那么存盘的cookie将被删除。注意,必须使用GMT时间格式。
<meta http-equiv=”Window-target” content=”_top” />
强制页面在当前窗口以独立页面显示。用来防止别人在框架里调用自己的页面。
<meta http-equiv=”Content-Language” content=”zh-cn” />
设定显示语言。
&meta http-equiv=”Page-Enter” content=”revealTrans(duration=5.0,transition=20)” />
进出页面的时候会看到一些特殊的效果。在RevealTrans动态滤镜中,duration白哦是滤镜特效的持续时间(单位为秒);transition滤镜类型标明使用哪一种特效,取值为0~23,这些值的意义分别为:0矩形缩小、1矩形扩大、2圆形缩小、3圆形扩大、4下到上刷新、5上到下刷新、6左到右刷新、7右到左刷新、8竖百叶窗、9横百叶窗、10错位横百叶窗、11错位竖百叶窗、12点扩散、13左右到中间刷新、14中间到左右刷新、15中间到上下、16上下到中间、17右下到左上、18右上到左下、19左上到右下、20左下到右上、21横条、22竖条、23以上22种随机选择一种。
<meta http-equiv=”imagetoolbar” content=”false” />
指定是否显示图片工具栏,false代表不显示,true代表显示。
<meta http-equiv=”Content-Script-Type” content=”text/javascript” />
指明页面中脚本的类型。
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
这是一个非标准的报头,它的值是chrome=1和IE=edge,如果IE用户安装了Chrome Frame插件,则可以使用这个插件,如果没有安装,则使用IE浏览器最新、最好的引擎呈现,而不是以传统模式呈现。
<meta name=”author” content=”Yakima Teng” />
注明网页的作者为Yakima Teng
<meta name=”revised” content=”Yakima Teng, 8/5/2015″ />
指定了修订信息。
<meta name=”generator” content=”WordPress” />
指定了编辑软件
<meta name=”description” content=”HTML examples” />
对文本的描述信息,可能对SEO有好处
<meta name=”keywords” content=”keyword1, keyword2, keyword3, …” />
定义文本的关键字信息,可能对SEO有好处
<meta name=”robots” content=”all” />
robots告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。content的参数有all, none, index, noindex, follow, nofollow。all是默认值。它们对应的含义如下,all:文件将被检索,且页面上的链接可以被查询;none:文件将不被检索,且页面上的链接不可以被查询;index:文件将被检索;follow:页面上的链接可以被查询;noindex:文件将不被检索,但页面上的链接可以被查询;nofollow:文件将被检索,但页面撒花姑娘的链接不可以被查询。
<meta name=”Copyright” content=”信息”
说明网站的版权信息
<meta name=”revisit-after” content=”7 days” />
7天后重访网站。
<meta name=”viewport” content=”width=device-width”>
这个meta属性称为viewport,它目前仅适用于触屏设备,将它设置正确是非常重要的。在PC上可以在屏幕上一个一个地数出像素点,但在移动设备的屏幕上看到的像素与桌面设备上的像素并不一样,在一个没有viewport元信息的页面上,视图会默认设定宽度为980px,则宽度为300px的元素表示的宽度为300虚拟像素宽。viewport就是一个虚拟的窗口,viewport的边缘代替浏览器的边缘,成为了窗口的边缘。viewport的宽度和高度除了可以使用像素值,还可以接受两个关键字:device-width和device-height——这显然是根据设备屏幕的像素返回实际的尺寸。viewport属性对应的content中,可以设定的属性除了width,还有height、initial-scale、maximum-scale和user-scaleable,它们的含义分别为:width:设置viewport的宽度,默认值为980,允许的取值范围为200~10000;height:设置viewport的高度,默认值是通过宽度和设备宽高比计算出来的,允许的取值范围为223~10000;initial-scale:设置viewport的初始比例。默认值是通过计算使得整个页面在可见区域内。范围由minimum-scale和maximum-scale属性决定;maximum-scale:设置viewport的最大比例。默认值是5.0.允许的取值范围为0~10.0;user-scaleable:决定用户是否可以缩放视图。还可以防止文本开始输入时的滚动。

前端面试FAQ

8月末,我学前端快两个月的时候,虽然我还有很多知识漏洞,但我感觉应该可以去应聘个实习生的岗位了。于是我就做了份简历投给了几家杭州的IT公司,应聘的是前端实习生的岗位,期望薪资写的是2000元。后来接到了两个面试,一个是电话面试,一个是去杭州参加的现场面试。这两个面试下来,我觉得如果你的专业不是计算机、数学、物理、自动化等对一元思维要求较强的专业,你的学习能力会比较受怀疑,因为Coding基本上就是不断的判断true or false、1 or 0。我承认自己还有许多技术负债,但我应聘的是实习生,期望薪资是2000元人民币月薪,我觉得我的能力用来求职这样一份工作是没有问题的,我并不是要应聘三四千的熟练工。不过怀疑也是有道理的,毕竟我是新人。

下面是针对这两次面试被问到的一些非技术问题所写的回答,另外我自己也加了几个话题。

问题1:你有github、知乎、技术博客吗?你用google、gmail吗?

我知道github但没有github,知乎还没开放注册的时候我就有知乎账号了但一直只是看客,有博客但没有技术博客,因为我的博客以前写的废话实在太多了,而且以后也还会写很多个人日志,所以技术文章的比例很难达到两位数——博客主体还是个人日志,so未来可预见的时间内我也不会有技术博客的。

我当然用google,而且用得非常频繁,google的东西不是IT人士的专属产品!gmail不怎么用。

问题2:你之前的工作是什么?主要做什么事情?

我刚毕业的时候在一家药厂做了3个月的QA(Quality Assurance,质量保证);然后到另外一家药企做了近2年的国外药品注册工作,主要是做原料药的注册。我不夸张的话,做这两份工作的时候我的工作效率还是比较可以的。我所从事的国外药品注册的工作内容可以归纳为:3个工作流:

  • 工作流1:向公司相关部门索要技术资料→整理撰写注册文档→提交注册资料给国外药政机构(类似中国的药监局)→收到这些官方机构的补件函→反映给公司相关部门进而索要补充资料→将补充资料提交给国外的药政官方机构→反复直至注册成功或注册失败(有时候我们和这些药政机构中间会隔着代理,相当于有个中间的传话人)
  • 工作流2:公司销售人员将客户问卷资料等转发给我们→我们填写问卷中的问题→将填写好后的问卷转发给公司销售人员
  • 工作流3:有时候会需要翻译一些资料给别人看,有中译英的,也有英译中的,频率不是很高。印象中翻译任务比较重的时候是FDA(美国食品药品监督管理局)来公司检查的时候。

问题3:你为什么要转前端?

对前端感兴趣。谈不上“热爱前端”。并不是不热爱就要去深恶痛绝的,我自己有比较强的求知欲,自律方面也还好,就算不热爱,想做到中等水平偏上我觉得不会有什么问题的。另外,我觉得前端本身也不是什么“痛苦的事情”,并不难坚持,甚至于说,由于前端的效果反馈速度非常快(刷新一下浏览器就能看到效果),对学习者的驱动是非常明显的,以至于我觉得学前端技术本身对学习者自律方面的要求是不高的。作为药学人,我有经常去看一下我们这个行业的一些网站——从用户的角度,我目前为止还从来没有见过同学或同事跟我吐槽说丁香园、小木虫、蒲公英这些网站难看的——当然也没人跟我说这些网站好看。怎么说呢,我觉得大部分网络上的站点,最重要的是它们的内容,而不是他们的外观——当然外观上不能糟糕到前景色和背景色一致,前端技术是为内容服务的。我想学前端,是为了业余时间里可以将我自己的内容按我自己的想法表现出来。我比较喜欢写“文章”,虽然都比较水,但是我喜欢写,听着按键的声音我都觉得心里很充实。我高中毕业开始在QQ空间里写东西,然后新浪博客、网易博客都写过,大三的时候(2011年)自己用WordPress搭建了一个博客站点开始写博客,到现在(2015年)我用WordPress已近4年了,以前我只会写一点简单的HTML标签和CSS规则来对我的博客进行小型手术,一直不能做些比较大型的手术,对WordPress的结构我一直比较好奇。但是因为恰逢要做毕业专题、找工作,一直没有空去解开了解它,现在我转前端,有一定原因是想了解我所用的程序。我对前端,现在是感兴趣的同时外加有好奇心的驱动(但是你不用怀疑我做不久,我所说的“感兴趣”跟很多人说的“热爱”的程度没啥区别,只是我觉得大部分人所说的“热爱”有些用词不当,就跟我见过许多说自己喜欢看书的人,但我问他一年看几本书的时候,他马上跟我说书的数量没有意义,那我觉得他所说的“喜欢”也是用词不当——是的,书的数量没有意义,但是你看书花的时间是很有参考意义的,你不愿意往一件事情上花时间,你就不应该说自己“喜欢”做这件事——如果你认为“叶公好龙”是“好龙”,那我收回我的这些话,然后我再告诉你:那么,我也热爱前端)。凡是都有个过程,不热爱就不能去喜欢了吗?不喜欢就不能去接触吗?不接触怎么知道喜欢不喜欢,不喜欢一下怎么知道是不是真的喜欢,算不算热爱?

感兴趣为什么刚毕业的时候不搞的原因。因为我感兴趣的东西多得是。我念了4年的大学,才有机会去从事药学相关的工作,我为什么要放弃这个给人生增加阅历的机会?而且我很早就知道,如果我一毕业就去搞IT,我几乎不太可能有机会去从事药学相关的工作的;但是如果我先去做药学方面的工作,我随时有机会去搞IT。所以。。。而且我去药厂后先后从事了QA和国外药品注册的工作,刚开始的时候我觉得需要学习的东西是很多的,所以开始的一两年内我并没有多余的精力可以专心学其他的东西(当然有部分原因是自身自律方面做得不够),这两年下来,在前辈们的教导下,我觉得自己算是对药厂里的药学相关链有了个基本的认识,算是入了门。师傅领进门,修行看个人,我觉得我后面已经可以自己修行,不一定必须呆在药厂里面了。所以我觉得我可以开始考虑转前端了。

关于智商能不能满足前端工作需求的说明。因为面试的时候有被要求证明自己的学习能力强。很多药厂的地理位置都比较偏僻,整体环境的竞争意识比较弱,人才少,虽然我不算个人才,但不知道为什么我也会有一种孤独感,这种孤独感迫使我想让融入一个稍微有竞争力一点的氛围。像我现在呆的地方,可以说是当地我这个行业里最好的公司了,可我才二十几岁啊,二十几岁就在当地最好的公司里了,这是什么概念?努力的盼头都没有了。一辈子呆里面了吗?为什么感觉像是在坐牢。而且偏点的地方,年轻人流动率相对于在当地安家落户的年长一点的人来说要高得多,所以各个部门都比较缺核心副手,由于年轻人都比较新,对工作的熟悉程度自然有所欠缺,沟通成本大并且风险高,所以有点什么工作上的事情都是直接和各个部门的领导沟通的,这让我比较缺少和公司同龄人沟通的机会,缺少了解他们工作能力的机会,自然也就没法找到从心底上认可的“大神”,这样的环境对提高个人能力的驱动力是很有限的。我并没有觉得IT行业相比制药行业来说更加得人才济济,只是IT行业主要就集中在那个几个核心城市,而且位置大都没有药厂的那么偏僻,楼上、隔壁就是同行公司,而且IT发展很快,因为它很“轻”,不像制药公司那么“重”,诸如此类的原因导致整个IT生态环境的竞争意识相比制药要强多了,另外,IT公司非领导职位存在许多比制药公司非领导职位工资高的情况,这也给人一种IT公司到处是人才的情况,但这基本上只是一个市场供需比造就的经济现象外加大环境对内部人员的驱动造成的,真不是说学IT的更聪明。大家智商都差不多,你能做的事,我也没啥问题。不过如果你们现在做的工作已经难道需要考验你们的智商了的话,那请不要给我面试机会,我怕浪费你们时间。大部分的工作并不是搞创新,是在重复做某些事情(你为几十个网站写了后台的登陆注册逻辑之后,你就不觉得是在重复写一些东西?),还没到需要拼智商的地步,我可能只能做这样的工作。我转前端,更多得是奔着这个生态环境去的,不是奔着找更多牛人的心态去的,在这样的环境里,我会比现在进步得快一些。回到本段开头说的话,学习能力这个事情,我觉得主要是智商+花的时间决定的,智商我没得救了,就这么大众的水平(我跳级到初中,保送到高中,高考不是清华北大但也是个一本,所以我觉得我真的能达到大众的智商水平),但是我比较愿意花时间在学习这件事上(豆瓣已读100+),这个就是我对我的学习能力的答复。

转行的理由?其实我心里并没觉得IT是一个行业。IT,information technology,信息技术,我觉得这个名词本身就已经解释了为什么我会有这样的看法。我目前留意的编程语言只是JavaScript和PHP这样的高级语言,所谓“高级”,就是说它们比较接近人类语言,所以如果正如你某天看到你的同事在学英语的时候你不会觉得他要转行了一样,我学前端或者后端的一些东西的时候,从来没有觉得自己是在转行,我是要去一个可以实际应用所学知识的环境里进一步地学习一些技能。这些技术get过来,是要为了以后能将这些技术用到其他具体的行业里面的。我觉得前端技能就像英语技能一样,但是它在国内相对于英语来说是个比较“年轻”的技能,它现在就像以前的英语一样是少数人会的东西,但是它以后很可能是像现在的英语一样,是很多人都会的东西——虽然正如大部分人的英语不能达到做同声传译的要求一样那时候大部分人的前端技能也不能达到一个非常高的程度,但是也正如很多人的英语水平完全能够满足工作需要一样那时候的大多数具体行业的人的前端技能也完全能够满足他们的工作所需要的前端技能。等我前端技能比较熟络之后,让我选一个行业,我当然希望是制药行业,但是具体做什么,先不想那么多,机会自己会出现的。

最后,用我提出辞职意愿的时候我们经理跟我说的一句话结束这个话题吧:

有千万个理由喜欢,也就有千万个理由不喜欢。能经常自省,梳理,自然是一种积极的态度。祝,转角遇见自己的真正的喜欢。

问题4:说说你对我们公司的了解?

。。。

问题5:你有什么想问我们的问题吗?

  • 需要兼容IE8以下的IE浏览器吗?是渐进增强还是需要实现完全相同的效果?

问题6:你的期望薪资是多少?

期望实习薪资为当地法定最低工资。

另外说明一下,我不要求占用贵公司的转正名额,不要求贵公司帮我交五险一金之类的东西,不要求有师傅带我,不要求公司配电脑(我自己带手提就可以了)、不要求公司提供餐补房补。如果贵公司愿意提供单人间,我可以不要薪水。如果上述由法律上的问题,贵公司可以不跟我签劳务合同,我的身份就不是贵公司的员工了,应该可以规避一些问题。

问题7:你看过那些前端的书籍?

  • Learning PHP, MySQL, JavaScript&CSS
  • JavaScript Visual QuickStart Guide
  • Learning jQuery
  • 《HTML5与CSS3基础教程》
  • 《CSS设计指南》
  • 《疯狂HTML5/CSS3/JavaScript讲义》(暂未看完)
  • 《编写高质量代码:Web前端开发修炼之道》(暂未看完)

另,非前端类的书籍看过《程序员的职业素养》(作者的经验之谈)、《疯狂的程序员》(小说)。

问题8:你有什么项目经验和作品吗?

无正式的项目经验和作品。

我自己写的作品有:第三个作品、第二个作品、第一个作品。

问题9:你近期的职业发展规划?

请注意,职业规划并不是定死的。

开始的两三年时间用来基本掌握HTML、CSS、JavaScript、PHP、MySQL,达到可以搞个博客程序并按自己的需求进行功能改进的程度,然后继续从事前端工作,业务时间维护一个药学APP,一开始的时候自己提供内容,后面尽量形成一个社区氛围。

再次,请注意,职业规划并不是定死的。另,不要期望应聘者的职业规划是和贵司共存亡。。。

问题10:你的英语水平如何?

上一份近2年的工作中,敲的英文比中文多。平常工作不用口头说英语。大概每半年会拿本单词书过一下。

2015年公司付费在当地学校请了一个英国籍的老师来教英语口语,上课成员名额有限,我主动争取了这个名额。每周同时上课的加我一起一共8个同事,一开始大家英语口语水平差不多,或者说我还略差一点,因为我们几位同事平常工作也是不用说英语的,而我本身连中文也都很少说——不管是工作中还是下班后。不过我的进步同比别人要明显得多,后来【老师有比较难的问题都让我来回答】(这句是别人说的)。我觉得我的缺点是发音不那么好,优点是我说话更注重表达内容,我不是以学习英语这个工具为目的,而是以表达观点为目的,另外就是我虽然不太喜欢平常聊天的那种说话,但是我对站在讲台前给一堆人讲某个我准备好了的内容有着较强的渴望。我的英语口语能力可以总结为:能和老外(不包括一些方言音比较特别的)非正式地沟通。

多行多栏布局

Page Header

Here should be a picture, but I hadn’t upload a picture for this place.

Column 1 of 3

Some text

Column 2 of 3

Column 3 of 3

Column 1 of 4

Some text

Column 2 of 4

Column 3 of 4

Column 4 of 4

Page footer.

有三列的那一行是通过浮动三个设定了宽度的块级元素和他们共同的父元素(作为容器)以实现的。三个块级元素的宽度(未设置border、padding和margin的情况下)之和等于父元素的宽度。这个方法的缺点是并非每一列的高度都能一致。

有四列的那一行是通过将四列对应的容器的display设置为table-cell实现的(不需要对他的祖先设定display: table-row或display: table),这样在实现多列布局的同时还能让每一列的高度相同。唯一的缺点是IE7及7以下不支持,所以可以说是多列布局的最优实践了。

这里需要强调一下,由于四列对应行上面的三列对应行是浮动着的,所以四列行别忘了开始的时候要用clear清浮动。

围住浮动元素的三种方法

笔记来源:《CSS设计指南》(第3版)(图灵程序设计丛书)。

浮动元素脱离了文档流,其父元素也看不到它了,因而也不会包围它。这种情况有时候并非我们想要的。这里提供三种必须掌握的方法,在具体情况中选择合适的方法来围住浮动元素。

首先摆上实验案例:

section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素

现在我们看到的是常规文档流,即块级元素包围着所有子元素,而且在页面中自上而下相互堆叠在一起。假设我们想让p标签的段落内容位于span元素(已通过CSS设定为行内块级元素)的右侧,而不是像现在这样位于下方,我们需要对span元素添加float: left以便将span元素左浮动。

section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素

现在span元素的确浮动在了其后p元素的左侧,但是我们也看到了,由于span元素脱离了文本流,父元素section看不到span元素,就根据其内剩下的p元素的高度重新调整自己的高度了(section只包含了非浮动子元素)。section后面的footer元素仍然紧挨着重新调整高度后的section元素,这符合我们的理解,但这不是我们想要的。我们希望footer元素在视觉上仍然位于span内容的下方。怎么办呢?

方法一:为父元素添加overflow: hidden

第一个方法很简单,缺点是不太直观,即为父元素应用overflow: hidden,以强制它包围浮动子元素。

section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素

方法二:同时浮动父元素&width: 100%

我们给span的父元素section元素也添加float: left以让section元素浮动起来。浮动section以后,不管其子元素是否浮动,它都会紧紧地包围(也称收缩包裹)住它的子元素。因此,需要用width: 100%再让section的宽度撑满其父元素的内容区宽度。

section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素

方法三:添加非浮动的清除元素

第三种强制父元素包含其浮动子元素的方法,就是给父元素的最后添加一个非浮动的子元素,然后清除该子元素。由于父元素一定会包含非浮动的子元素,而且清除会让这个子元素位于(清除一侧)浮动元素的下方,因此父元素一定会包含这个子元素——以及前面的浮动元素。在父元素内最后添加子元素作为清除元素的方式有两种。

第一种方式是简单地在HTML标记中添加一个子元素(div很适合这个目的,因为它在无子元素时的默认高度为零,不会引入多余空间),并给它应用clear属性,如下所示。但这种过方式会在HTML中引入没有实际语义的纯表现性元素。

section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素

另外一种方法就是使用:after伪元素可以帮助我们实现这个目的,思路其实和上面的方法是一样的。

section父元素内的span子元素

section父元素内的p子元素

section元素后面的footer元素

提醒一下,这里的:after伪元素对应元素内部的末尾位置,而不是元素本身之后的下一个位置。

CSS2.1 reference

Reference: http://www.htmlcssvqs.com/8ed/appendixes/css-reference.php.

This page contains the following CSS reference tables:

For more information about what browsers support which CSS3 properties and values, please consult www.quirksmode.org/css/contents.html, http://caniuse.com, and http://findmebyip.com/litmus. In addition, you can test the browser support of many of these features from your own pages by using such JavaScript libraries such as Modernizr (www.modernizr.com).

Table B.1 CSS Properties and Values

Property/Values

Description and Notes

background

any combination of the values for background-attachment, background-color, background-image, background-repeat, and/or background-position, or inherit

For changing the background color and image of elements.

initial value depends on individual properties; not inherited; percentages allowed for background-position

To display multiple background images, separate the combined background values with a comma; if you are specifying a background-color, this should be included as a part of the last background.

background-attachment

either scroll, fixed, or inherit

For determining if and how background images should scroll.

initial value: scroll; not inherited

If you are displaying multiple background images, you can apply a separate background-attachment value to each by separating the values with commas.

background-color

either a color, transparent, or inherit

For setting just the background color of an element.

initial value: transparent; not inherited

background-image

either a URL, a CSS gradient (see Table B.4), none, or inherit

For setting just the background image of an element.

initial value: none; not inherited

To display multiple background images, separate the image values with a comma.

background-position

either one or two percentages or lengths (or one percentage and one length) or one of top, center, or bottom and/or one of left, center, or right, or use inherit

For setting the physical position of a specified background image.

initial value: 0% 0%; if a single percentage is set, it is used for the horizontal position, and the initial value of the vertical is set to 50%; if only one keyword is used, the initial value of the other is center; applies to block-level and replaced elements; not inherited; percentages refer to the size of the box itself

If you are displaying multiple background images, you can apply a separate background-position value to each by separating the values with commas.

background-repeat

one of repeat, repeat-x, repeat-y, no-repeat, or inherit

For determining how and if background images should be tiled.

initial value: repeat; not inherited

If you are displaying multiple background images, you can apply a separate background-repeat value to each by separating the values with commas.

background-size

either one or two percentages or lengths, or auto, or use cover or contain

For specifying the size of background images.

initial value: auto; not inherited

If you are displaying multiple background images, you can apply a separate background-size value to each by separating the values with commas.

border

any combination of the values of border-width, border-style, and/or a color, or inherit

For defining all aspects of a border on all sides of an element.

initial value depends on individual properties; not inherited

border-color

from one to four colors, transparent, or inherit

For setting only the color of the border on one or more sides of an element.

initial value: the element’s color property; not inherited

border-radius

For giving a box rounded corners.

initial value: 0; not inherited

border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius

For setting the border-radius values for only one corner of the box.

initial value: 0; not inherited

Note: older versions of Firefox use a different syntax for individual corners: -moz-border-radius-topright, -moz-border-radius-bottomright, -moz-border-radius-bottomleft, and -moz-border-radius-topleft.

border-spacing

either one or two lengths or inherit

For specifying the amount of space between borders in a table.

initial value: 0; may be applied only to table elements; inherited

border-style

one to four of the following values: none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit

For setting only the style of a border on one or more sides of an element.

initial value: none; not inherited

border-top, border-right, border-bottom, border-left

any combination of a single value each for border-width, border-style, and/or a color, or use inherit

For defining all three border properties at once on only one side of an element.

initial value depends on individual values; not inherited

border-top-color, border-right-color, border-bottom-color, border-left-color

one color or inherit

For defining just the border’s color on only one side of an element.

initial value: the value of the color property; not inherited

border-top-style, border-right-style, border-bottom-style, border-left-style

one of none, dotted, dashed, solid, double, groove, ridge, inset, outset, or inherit

For defining just the border’s style on only one side of an element.

initial value: none; not inherited

border-top-width, border-right-width, border-bottom-width, border-left-width

one of thin, medium, thick, or a length

For defining just the border’s width on only one side of an element.

initial value: medium; not inherited

border-width

one to four of the following values: thin, medium, thick, or a length

For defining the border’s width on one or more sides of an element.

initial value: medium; not inherited

bottom

either a percentage, length, auto, or inherit

For setting the distance that an element should be offset from its parent element’s bottom edge.

initial value: auto; not inherited; percentages refer to height of containing block

box-shadow

optional inset followed by two to four length values, followed by a color

For adding one or more drop shadows to a box. The length values refer (in order) to: position to the right of the box (negative values position to the left), position down from the box (negative values position up), blur radius (negative values are not allowed), and spread distance (negative values cause the shadow to contract). Each subsequent box-shadow value should be separated from its predecessor with a comma.

initial value: none; inherited

clear

one of none, left, right, both, or inherit

For preventing elements from wrapping around on one or both sides of floated elements.

initial value: none; may only be applied to block-level elements; not inherited

clip

one of auto, rect, or inherit

For displaying only a portion of an element.

initial value: auto; applies only to absolutely positioned elements

color

a color or inherit

For setting the text color of an element.

initial value: parent’s color, some colors are set by browser; inherited

cursor

one of auto, crosshair, default, pointer, progress, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, a URL, or inherit

For setting the cursor’s shape.

initial value: auto; inherited

display

one of inline, block, inline-block, list-item, run-in, compact, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, ruby, ruby-base, ruby-text, ruby-base-group, ruby-text-group, none, inherit

For determining how and if an element should be displayed.

initial value: usually inline or block; not inherited

float

one of left, right, none, inherit

For determining which side of the parent element an element will float to.

initial value: none; may not be applied to positioned elements or generated content; not inherited

font

if desired, any combination of the values for font-style, font-variant, and font-weight followed by the required font-size, an optional value for line-height, and the also-required font-family, or use inherit

For setting at least the font family and size, and optionally the style, variant, weight, and line height of text.

initial value depends on individual properties; inherited; percentages allowed for values of font-size and line-height; font-size and font-family are required for the font property to work

font-family

one or more quotation mark-enclosed font names followed by an optional generic font name, or use inherit

For choosing the font family for text.

initial value: depends on browser; inherited

font-size

an absolute size, a relative size, a length, a percentage, or inherit

For setting the size of text.

initial value: medium; the computed value is inherited; percentages refer to parent element’s font size

font-style

either normal, italic, oblique, or inherit

For making text italic.

initial value: normal; inherited

font-variant

either normal, small-caps, or inherit

For setting text in small caps.

initial value: normal; inherited

font-weight

either normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, or inherit

For applying, removing, and adjusting bold formatting.

initial value: normal; the numeric values are considered keywords and not integers (you can’t choose 150, for example); inherited

height

either a length, a percentage, auto, or inherit

For setting the height of an element.

initial value: auto; may be applied to all elements except non-replaced inline elements, table columns, and column groups; not inherited

left

either a length, a percentage, auto, or inherit

For setting the distance that an element should be offset from its parent element’s left edge.

initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to width of containing block

letter-spacing

either normal, a length, or inherit

For setting the amount of space between letters.

initial value: normal; inherited

line-height

either normal, a number, a length, a percentage, or inherit

For setting the amount of space between lines of text.

initial value: normal; inherited; percentages refer to the font size of the element itself

list-style

any combination of the values for list-style-type, list-style-position, and/or list-style-image, or use inherit

For setting a list’s marker (regular or custom) and its position.

initial value depends on initial values of individual elements; may only be applied to list elements; inherited

list-style-image

either a URL, none, or inherit

For designating a custom marker for a list.

initial value: none; may only be applied to list elements; overrides list-style-type; inherited

list-style-position

either inside, outside, or inherit

For determining the position of a list’s marker.

initial value: outside; may only be applied to list elements; inherited

list-style-type

either disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none, or inherit

For setting a list’s marker.

initial value: disc; may only be applied to list elements; not used if list-style-type is valid; inherited

margin

one to four of the following: length, percentage, or auto, or inherit

For setting the amount of space between one or more sides of an element’s border and its parent and/or sibling elements.

initial value depends on browser and on value of width; not inherited; percentages refer to width of containing block

margin-top, margin-right, margin-bottom, margin-left

either a length, a percentage, auto, or inherit

For setting the amount of space between only one side of an element’s border and its parent and/or sibling elements.

initial value: 0; not inherited; percentages refer to width of containing block; the values for margin-right and margin-left may be overridden if sum of width, margin-right, and margin-left are larger than parent element’s containing block

max-height, max-width

either a length, a percentage, none, or inherit

For setting the maximum height and/or width of an element, respectively.

initial value: none; may not be applied to inline elements or table elements; not inherited; percentages refer to height/width of containing block

min-height, min-width

either a length, a percentage, or inherit

For setting the minimum height and/or width of an element, respectively.

initial value: 0; may not be applied to inline elements or table elements; not inherited; percentages refer to height/width of containing block

opacity

any decimal value from 0.0 (fully transparent) to 1.0 (fully opaque)

For making an element translucent or invisible.

initial value: 1; not inherited

orphans

either an integer or inherit

For specifying how many lines of an element may appear alone at the bottom of a page.

initial value: 2; may only be applied to block-level elements; inherited; only for use with print media

overflow

either visible, hidden, scroll, auto, or inherit

For determining where extra content should go if it does not fit in the element’s content area.

initial value: visible; may only be applied to block-level and replaced elements; not inherited

padding

one to four lengths or percentages, or inherit

For specifying the distance between one or more sides of an element’s content area and its border.

initial value depends on browser; not inherited; percentages refer to width of containing block

padding-top, padding-right, padding-bottom, padding-left

either a length, a percentage, or inherit

For specifying the distance between one side of an element’s content area and its border.

initial value: 0; not inherited; percentages refer to width of containing block

page-break-after, page-break-before

either always, avoid, auto, right, left, or inherit

For specifying when page breaks should or should not occur.

initial value: auto; may only be applied to block-level elements; not inherited; only for use with print media

page-break-inside

either avoid, auto, or inherit

For keeping page breaks from dividing an element across pages.

initial value: auto; may only be applied to block-level elements; inherited; only for use with print media

position

either static, relative, absolute, fixed, or inherit

For determining how an element should be positioned with respect to the document’s flow.

initial value: static; not inherited

right

either a length, a percentage, auto, or inherit

For setting the distance that an element should be offset from its parent element’s right edge.

initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to width of containing block

table-layout

one of fixed, auto, or inherit

For choosing the algorithm that should be used to determine the widths of cells.

initial value: auto; not inherited

text-align

one of left, right, center, justify, a string, or inherit

For aligning text.

initial value depends on browser and writing direction; may only be applied to block-level elements; inherited

text-decoration

any combination of underline, overline, line-through, and blink, or none or inherit

For decorating text (mostly with lines).

initial value: none; not inherited

text-indent

either a length, a percentage, or inherit

For setting the amount of space the first line of a paragraph should be indented.

initial value: 0; may only be applied to block-level elements; inherited; percentages refer to width of containing block

text-overflow

one of clip, ellipsis, or "string"

For specifying how text overflow must be handled when it is not visible.

initial value: clip

text-shadow

two to four length values, followed by a color

For adding one or more drop shadows to the text of an element. The length values refer (in order) to: position to the right of the text (negative values position to the left), position down from the box (negative values position up), blur radius (negative values are not allowed), and spread distance (negative values cause the shadow to contract). Each subsequent text-shadow value should be separated from its predecessor with a comma.

initial value: none; inherited

text-transform

either capitalize, uppercase, lowercase, none, or inherit

For setting the capitalization of an element’s text.

initial value: none; inherited

transform

none or a list of transform functions (matrix, translate, translateX, translateY, scale, scaleX, scaleY, rotate, skew, skewX, skewY)

For transforming the shape, size, or orientation of an element.

initial value: none; not inherited; transform functions are applied in the same order they are listed

transform-origin

either one or two percentages or lengths (or one percentage and one length) or one of top, center, or bottom and/or one of left, center, or right

For defining the origin of any transforms applied to an element.

initial value: 50% 50%; not inherited; only applies to block-level and inline-level elements; percentages refer to the size of the element’s box

transition

a space-separated shorthand for defining (in order) transition-property, transition-duration, transition-timing-function, and transition-delay

For defining a transition effect on an element.

initial value depends on the individual property; applies to all elements, including the :before and :after pseudo-elements; the order of the values is important to this property

transition-property

none, all, or a comma-separated list of CSS properties

For identifying the CSS properties defined on an element that should have a transition applied to it.

initial value: all; not inherited; applies to all elements, including the :before and :after pseudo-elements

transition-duration

a time value in seconds or milliseconds

For defining the time that a transition takes to complete.

initial value: 0s (zero seconds); not inherited; applies to all elements including the :before and :after pseudo-elements

transition-timing-function

ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(number, number, number, number)

For describing how the intermediate values used during a transition are to be calculated.

initial value: ease; applies to all elements, including the :before and :after pseudo-elements

transition-delay

a time value in seconds or milliseconds

For defining when a transition will start.

initial value: 0s (zero seconds); not inherited; applies to all elements, including the :before and :after pseudo-elements

top

either a length, a percentage, auto, or inherit

For setting the distance that an element should be offset from its parent element’s top edge.

initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to height of containing block

vertical-align

either baseline, sub, super, top, text-top, middle, bottom, text-bottom, a percentage, a length, or inherit

For aligning elements vertically.

initial value: baseline; may only be applied to inline-level and table cell elements; not inherited; percentages refer to the element’s line-height property

visibility

either visible, hidden, collapse, or inherit

For hiding elements without taking them out of the document’s flow.

initial value: inherit, which rather makes the fact that it’s not inherited a moot point

white-space

either normal, pre, nowrap, pre-wrap, pre-lined, or inherit

For specifying how white space should be treated.

initial value: normal; may only be applied to block-level elements; inherited

widows

either an integer or inherit

For specifying how many lines of an element may appear alone at the top of a page.

initial value: 2; may only be applied to block-level elements; inherited; only for use with print media

width

either a length, a percentage, auto, or inherit

For setting the width of an element.

initial value: auto; may not be applied to inline elements, table rows, or row groups; not inherited; percentages refer to width of containing block

word-spacing

either normal, a length, or inherit

For setting the distance between words.

initial value: normal; inherited

z-index

either auto, an integer, or inherit

For setting the depth of an element with respect to overlapping elements.

initial value: auto; may only be applied to positioned elements; not inherited

Table B.1 is derived from the complete specifications at www.w3.org/TR/CSS21/propidx.html and is copyright © World Wide Web Consortium (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). All Rights Reserved.

Back to Top

Table B.2 CSS Selectors and Combinators

Pattern

Meaning

CSS3?

Selector Type

*

any element

Universal selector

E

an element of type E

Type selector

E[foo]

an E element with a “foo” attribute

Attribute selector

E[foo="bar"]

an E element whose “foo” attribute value is exactly equal to “bar” (quotes are optional)

Attribute selector

E[foo~="bar"]

an E element whose “foo” attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar” (quotes are optional)

Attribute selector

E[foo^="bar"]

an E element whose “foo” attribute value begins with “bar” (quotes are optional)

Y

Attribute selector

E[foo$="bar"]

an E element whose “foo” attribute value ends with “bar” (quotes are optional)

Y

Attribute selector

E[foo*="bar"]

an E element whose “foo” attribute value contains “bar” somewhere within it (quotes are optional)

Y

Attribute selector

E[foo|="en"]

an E element whose “foo” attribute has a hyphen-separated list of values beginning (from the left) with “en” (quotes are optional)

Attribute selector

E:root

an E element, root of the document

Y

Structural pseudo-class

E:nth-child(n)

an E element, the nth child of its parent

Y

Structural pseudo-class

E:nth-last-child(n)

an E element, the nth child of its parent, counting from the last one

Y

Structural pseudo-class

E:nth-of-type(n)

an E element, the nth sibling of its type

Y

Structural pseudo-class

E:nth-last-of-type(n)

an E element, the nth sibling of its type, counting from the last one

Y

Structural pseudo-class

E:first-child

an E element, first child of its parent

Structural pseudo-class

E:last-child

an E element, last child of its parent

Y

Structural pseudo-class

E:first-of-type

an E element, first sibling of its type

Y

Structural pseudo-class

E:last-of-type

an E element, last sibling of its type

Y

Structural pseudo-class

E:only-child

an E element, only child of its parent

Y

Structural pseudo-class

E:only-of-type

an E element, only sibling of its type

Y

Structural pseudo-class

E:empty

an E element that has no children (including text nodes)

Y

Structural pseudo-class

E:link, E:visited

an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)

Link pseudo-classes

E:focus, E:hover, E:active

an E element during certain user actions

User action pseudo-classes

E:target

an E element being the target of the referring URI

Y

Target pseudo-class

E:lang(fr)

an element of type E in language “fr”

:lang() pseudo-class

E:enabled, E:disabled

a user interface element E that is enabled or disabled

Y

UI element states pseudo-classes

E:checked

a user interface element E that is checked (for instance a radio button or checkbox)

Y

UI element states pseudo-classes

E::first-line

the first formatted line of an E element

::first-line pseudo-element

E::first-letter

the first formatted letter of an E element

::first-letter pseudo-element

E::before

generated content before an E element

::before pseudo-element

E::after

generated content after an E element

::after pseudo-element

E.warning

an E element that has a class of "warning"

Class selector

E#myid

an E element with an ID equal to “myid”

ID selector

E:not(s)

an E element that does not match simple selector s (for example, input:not(.warning))

Y

Negation pseudo-class

E F

an F element descendant of an E element

Descendant combinator

E > F

an F element child of an E element

Child combinator

E + F

an F element immediately preceded by an E element

Adjacent sibling combinator

E ~ F

an F element preceded by an E element

Y

General sibling combinator

Table B.2 is derived from the CSS3 selector module at www.w3.org/TR/css3-selectors/ and is copyright © World Wide Web Consortium (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). All Rights Reserved.

Back to Top

Table B.3 CSS3 Color Values
Color Value Description and Notes

rgb(red-value, green-value,
blue-value)

RGB (red, green, blue) color model

values can be a number from 0 to 255 or a percentage (but not a combination of numbers and percentages)

rgb(0, 0, 0) and rgb(0%, 0%, 0%) are black

rgb(255, 255, 255) and rgb(100%, 100%, 100%) are white

rgba(red-value, green-value,
blue-value, alpha)

RGB color model, plus alpha transparency

color values are the same as for RGB syntax

the fourth parameter, alpha, is a decimal greater than or equal to 0.0 (full transparency) and less than or equal to 1.0 (full opacity)

hsl(hue-value, saturation-value, lightness-value)

HSL (hue, saturation, lightness) color model

the hue value is expressed as the angle of a color circle (a number from 0 to 360); 0 and 360 = red, 120 = green, 240 = blue, with other colors represented in between

the saturation value is expressed as a percentage; 0% is gray, and 100% is full saturation of the color

the lightness value is expressed as a percentage; 0% is black, 100% is white, and 50% is “normal”

hsla(hue-value, saturation-value, lightness-value, alpha)

HSL color model, plus alpha transparency

color values are the same as for HSL syntax

the fourth parameter, alpha, is a decimal greater than or equal to 0.0 (full transparency) and less than or equal to 1.0 (full opacity)

Back to Top

Table B.4 Media Queries
Feature Description and Notes

width,
min-width,
max-width

a length

the width, minimum width, or maximum width of the targeted display area of the output device

applies to: visual and tactile media

height,
min-height,
max-height

a length

the height, minimum height, or maximum height of the targeted display area of the output device

applies to: visual and tactile media

device-width,
min-device-width,
max-device-width

a length

the width, minimum width, or maximum width of the rendering surface of the output device

applies to: visual and tactile media

device-height,
min-device-height,
max-device-height

a length

the height, minimum height, or maximum height of the rendering surface of the output device

applies to: visual and tactile media

orientation

portrait or landscape

the orientation is portrait when the height feature value is greater than or equal to the value of the width feature value; otherwise, the orientation is landscape

applies to: bitmap media

aspect-ratio,
min-aspect-ratio,
max-aspect-ratio

a ratio (e.g., 4/3 or 16/9)

the ratio, minimum ratio, or maximum ratio of the width feature value to the height feature value

applies to: bitmap media

device-aspect-ratio,
min-device-aspect-ratio,
max-device-aspect-ratio

a ratio (e.g., 4/3 or 16/9)

the ratio, minimum ratio, or maximum ratio of the device-width feature value to the device-height feature value

applies to: bitmap media

color,
min-color,
max-color

an integer

the number, minimum number, or maximum number of bits per color component of the output device; the value is 0 if the device is not a color device

applies to: visual media

color-index,
min-color-index,
max-color-index

an integer

the number, minimum number, or maximum number of entries in the color lookup table of the output device; the value is 0 if the device does not use a color lookup table

applies to: visual media

monochrome,
min-monochrome,
max-monochrome

an integer

the number, minimum number, or maximum number of bits per pixel in a monochrome frame buffer; the value is 0 if the device is not a monochrome device

applies to: visual media

resolution,
min-resolution,
max-resolution

a resolution value
(e.g., 300dpi or 118dpcm)

the resolution, minimum resolution, or maximum resolution of the output device (i.e., the pixel density); resolution (not min-resolution or max-resolution) never detects a device with non-square pixels

applies to: bitmap media

scan

progressive or interlace

the scanning process of TV output devices

applies to: TV media

grid

0 or 1

whether the device is grid or bitmap; the value is 1 if the output device is grid-based (e.g., a TTY terminal); otherwise, the value is 0; this media query can also be expressed without a value (for example, @media grid)

applies to: visual and tactile media

Back to Top

HTML reference

Reference: http://www.htmlcssvqs.com/8ed/appendixes/html-reference.php

There are two tables below: Table A.1 lists global attributes, which you apply to most HTML elements; Table A.2 contains HTML elements and their specific (that is, not global) attributes. Each element has a short description and an annotated list of its associated attributes.

Consult www.caniuse.com and findmebyip.com/litmus for the latest on browser support for the HTML5 features.

Table A.1 HTML Global Attributes – The following attributes may be used with most HTML elements
Global Attribute Description Version
  accesskey For adding a keyboard shortcut to an element
aria-* For associating accessibility attribute values specified by WAI-ARIA 5
class For identifying a set of elements in order to apply styles to them
contenteditable For making the content of an element editable 5
contextmenu For identifying a contextual menu for an element (the value must be the same as a menu element’s id attribute) 5
data-* For storing custom data that is private to the page or application 5
dir For specifying the element’s text direction
draggable For making an element draggable 5
dropzone For identifying an element as a place where draggable elements can be dropped 5
event For associating an element with a script (event is a placeholder for the actual event name)
hidden For indicating that an element is not yet relevant or is no longer relevant 5
id For identifying a particular element so that it can be linked to, styled, or scripted with JavaScript
lang For specifying the language an element is written in
role For providing additional information to assistive devices about the role of an element as defined by WAI-ARIA 5
spellcheck For indicating whether the content of an element should have its spelling and grammar checked 5
style For adding local style sheet information
tabindex For defining the order in which the Tab key takes the visitor through elements
title For labeling elements with tool tips
Table A.2 HTML Elements and Attributes
Element/ Attribute(s) Description Version
a For creating links and anchors
  href For specifying the URL of a page or the name of an anchor that a link goes to
hreflang For specifying the language of the linked resource 5
media For describing the media for which the target document was defined 5
rel For identifying the nature of the link
target For specifying the window or iframe where a link should open *
type For noting a resource’s MIME type
abbr For explaining the meaning of abbreviations and acronyms *
address For identifying contact information for the nearest article or body element ancestor
area For specifying the coordinates of image maps
accesskey For adding a keyboard shortcut to a particular region of the map
alt For giving information about an area
coords For giving the coordinates of an area in an image map
href For specifying the destination URL of a link in an area of an image map
hreflang For specifying the language of the linked resource 5
media For describing the media for which the target document was defined 5
rel For identifying the kind of link
shape For specifying the shape of an area in an image map
target For specifying the window or iframe where a link should open *
article For identifying a self-contained composition in a page that is in principle independently distributable or reusable 5
aside For identifying a section of a page that consists of content that is tangentially related to the content around it 5
audio For embedding sound or audio in a page 5
autoplay For telling the browser to start playing the audio file as soon as it can 5
controls For telling the browser to provide controls for the audio element 5
crossorigin For setting cross-origin request credentials 5
loop For telling the audio file to start over without interruption upon reaching its end 5
mediagroup For associating multiple media files together 5
muted For controlling the default state of audio output 5
preload For specifying whether the browser can begin downloading the audio file before the visitor starts playing it 5
src For identifying the URL of the audio file to play 5
b For identifying a span of text to which attention is being drawn for utilitarian purposes, without conveying any extra importance and with no implication of an alternate voice or mood *
base For specifying the base URL of the page
href For specifying the URL to be used to generate relative URLs
target For specifying the default target for the links on the page *
bdi For identifying a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting 5
dir For specifying text direction 5
bdo For explicitly formatting the text direction of its content
dir For specifying text direction
blockquote For identifying a section quoted from another source
cite For giving the URL of the source
body For enclosing the main content area of a page
br For creating a line break
button For creating buttons
autofocus For specifying that the button is to be focused as soon as the page is loaded 5
disabled For indicating that the element is not available in the current state
form For associating the element with a form that it is not a part of 5
formaction For overriding the form’s action attribute 5
formenctype For overriding the form’s enctype attribute 5
formmethod For overriding the form’s method attribute 5
formnovalidate For overriding the form’s novalidate attribute 5
formtarget For overriding the form’s target attribute 5
name For identifying the data sent with a button, or for identifying the button itself (perhaps for a JavaScript function)
type For using the button in a form element
value For specifying the data that should be submitted when the button is clicked
canvas To provide scripts with a resolution-dependent bitmap canvas for rendering graphics on the fly 5
width, height For specifying the size of the canvas 5
caption For creating a caption for a table
cite For marking text as a citation
code For marking text as computer code
col For joining columns in a table into a non-structural group
span For specifying the number of columns in a column group
colgroup For joining columns in a table into a structural column group
span For specifying the number of columns in a column group
command For representing a command the user can invoke, such as defining a keyboard command 5
checked For indicating the checked state of the command (if the command type is “checkbox” or “radio”) 5
disabled For indicating that the command is not available in the current state 5
icon For providing an image that represents the command 5
label For showing the name of the command to the user 5
radiogroup For identifying the radio buttons that will be toggled when the command is toggled (if the command type is “radio”) 5
type For indicating the type of command 5
datalist To contain a group of option elements that represent a predefined set of options for another form control 5
dd For marking a definition in a list
details For creating a disclosure widget from which the visitor can obtain additional information or controls 5
open For specifying whether the element is open or closed by default 5
del To mark deleted text
cite For referencing a URL that explains the change
datetime For specifying the time and date of the change
dfn For specifying the defining instance of a term
title For providing the definition of the term
div For dividing a page into block-level sections
dl For creating a definition list
dt For marking a term to be defined in a list
em To mark text that has stress emphasis *
embed For adding multimedia *
src For specifying the URL of a multimedia file
type For identifying the MIME type of the multimedia file
width, height For specifying the size of the embedded multimedia player
fieldset For grouping a set of form elements together
disabled For disabling all form controls within the fieldset 5
form For associating the element with a form that it is not a part of 5
name For providing the fieldset with a name for use later 5
figcaption For identifying a caption or legend for the contents of its parent figure element 5
figure For identifying content that is referenced within the main flow of the document but that could be moved elsewhere without affecting the flow of the document 5
footer For identifying a footer for the nearest ancestor body, section, article, or aside element 5
form For designating a form to collect data for submission
accept-charset For identifying the character encoding to be used with the form submission (defaults to the page’s character set)
action For giving the URL of the script that will process the form data
autocomplete For preventing the browser from providing/remembering autocompletion values when the attribute is set to “off” (the default is “on”; that is, autocompletion is allowed by default) 5
enctype For making sure files are sent to the server in the proper format
method For specifying how data should be sent to the server
name For providing the form with a name for use later
novalidate For allowing the form to be submitted without validation 5
target For identifying the target window or iframe of the form’s submission *
h1, h2, h3, h4, h5, h6 For creating headings
head For creating the head section, which contains information about the page, including the title, author, keywords, style sheets, and scripts
header For identifying a group of introductory content or navigational aids 5
hgroup For identifying the heading of a section when a heading has multiple levels 5
hr For identifying a paragraph-level thematic break *
html For identifying a text document as an HTML document
manifest For specifying an application cache manifest that is used when the page is offline 5
i For marking a span of text that is in an alternate voice or mood or that is otherwise offset from the normal prose in a manner indicating a different quality of text *
iframe For creating a nested browsing context *
name For specifying the name of the iframe, to be used as a target
sandbox For specifying additional restrictions on the content of the iframe, for security purposes 5
seamless For specifying whether the iframe should appear to be part of the containing page 5
src For specifying the URL of the initial page
srcdoc For specifying the URL of the initial page 5
width, height For specifying the size of the iframe
img For inserting images on a page
alt For offering alternate text that is displayed if the image is not and that is for users of assistive devices
crossorigin For allowing images from third-party sites (that allow cross-origin access) to be used with the canvas element
ismap For indicating that the element provides access to a server-side image map (the element must be a descendant of an a element)
src For specifying the URL of an image
usemap For specifying the client-side image map that should be used with the referenced image
width, height For specifying the size of an image so that the page is loaded more quickly, or for scaling
input For creating form elements
accept For informing the browser what file types will be accepted if the input type is “file”
alt For providing a textual alternate if the input type is “image”
autocomplete For preventing the browser from providing/remembering autocompletion values when the attribute is set to “off” (the default is “on”; that is, autocompletion is allowed by default) 5
autofocus For specifying that the input is to be focused as soon as the page is loaded 5
checked For marking a radio button or checkbox by default
dirname For identifying the direction of the entered text 5
disabled For indicating that the input is not available in the current state
form For associating the element with a form that it is not a part of 5
formaction For overriding the form’s action attribute 5
formenctype For overriding the form’s enctype attribute 5
formmethod For overriding the form’s method attribute 5
formnovalidate For overriding the form’s novalidate attribute 5
formtarget For overriding the form’s target attribute 5
list For associating the input with a datalist 5
max, min For indicating the input element’s allowed range of values 5
maxlength For specifying the maximum number of characters that can be entered in an input element
multiple For specifying whether the user can be allowed to enter more than one value 5
name For identifying data collected by an element
pattern For providing a regular expression against which the input element’s value is checked 5
placeholder For providing a hint to aid in data entry 5
readonly For keeping visitors from changing certain form elements
required For identifying that the element must not be blank to submit the form (not allowed when the input type is “hidden,” “image,” or some button types) 5
size For specifying the length of a text or password box
src For specifying the URL of an active image
step For controlling the granularity and specificity of allowed values 5
type For specifying if a form element is a text box, password box, radio button, checkbox, hidden field, submit button, reset button, active image, date/time box, number box, or color box; for selecting from a range of values; or for entering a telephone number, email address, or set of search terms *
value For specifying the default data in a form element
width, height For specifying the dimensions of the input (only allowed when the input type is “image”) *
ins For marking an addition to the document
cite For referencing a URL that explains the change
datetime For specifying the time and date of the change
kbd For marking user input
keygen For generating a public and private key pair 5
autofocus For specifying that the keygen element is to be focused as soon as the page is loaded 5
challenge For generating a challenge to go along with the key pair 5
disabled For indicating that the element is not available in the current state 5
form For associating the element with a form that it is not a part of 5
keytype For identifying the kind of key pair to be generated 5
name For identifying the data that is gathered 5
label For labeling form elements
for For specifying which form element the label belongs to
form For associating the element with a form that it is not a part of 5
legend For labeling fieldsets
li For creating a list item
value For determining the initial value of the list item (if it is the child of an ol) *
link For linking to an external style sheet or other external resource
href For specifying the URL of the resource
hreflang For specifying the language of the linked resource 5
media For defining a style sheet’s targeted media types and/or media features
rel For identifying the kind of link
sizes For identifying the size of the referenced icon (for use only when the rel attribute is “icon”) 5
title For labeling an alternate style sheet or other resource
type For noting a resource’s MIME type (only required if the link type is not “text/css”)
map For creating a client-side image map
name For naming a map so it can be referenced later
mark For highlighting text for reference purposes due to its relevance in another context 5
math For embedding MathML in the page 5
menu For containing a list of commands *
label For labeling the menu 5
type For identifying the kind of menu being used: “context,” “list” (default), or “toolbar” 5
meta For associating various kinds of metadata with the page
charset For identifying the character encoding of the page itself 5
content For adding extra information about the page itself
http-equiv For creating automatic jumps to other pages, setting the default scripting language, and declaring the character encoding
name For identifying extra information about the page
meter For representing a measurement within a known range 5
high, low For specifying a range of values as being “high” or “low” 5
max, min For identifying the maximum and minimum allowable values 5
name For identifying the data that is gathered 5
optimum For identifying the optimum value 5
value For indicating the current value of the meter (required) 5
nav For identifying a section of a page that links to other pages or to parts within the page 5
noscript For providing alternatives to scripts
object For embedding objects in Web pages
data For identifying the source of the multimedia file to be embedded
form For associating the element with a form that it is not a part of 5
name For identifying the object (e.g., so it can be scripted)
type For noting the object’s MIME type
typemustmatch For indicating that the resource specified in the object’s data attribute must have the same MIME type as identified in the object’s type attribute (allowed only if the object’s data and type are both specified)
usemap For indicating whether the object has an associated image map
width, height For specifying the dimensions of the object’s box
ol For creating ordered lists
reversed For specifying whether the list is descending (. . . , 3, 2, 1) 5
start For specifying the initial value of the first list item *
type For specifying the kind of numerals that should begin each list item *
optgroup For grouping a set of option elements under a common label within a select element
disabled For indicating that the element is not available in the current state
label For labeling the group of options
option For creating the individual options in a select or datalist element
disabled For indicating that the element is not available in the current state
label For specifying how the option should appear in the menu
selected For making a menu option be selected by default in a blank form
value For specifying the initial value of a menu option
output For representing the result of a calculation 5
for For creating an explicit association between the result of a calculation and the values that went into the calculation 5
form For associating the element with a form that it is not a part of 5
name For identifying the data that is gathered 5
p For creating a paragraph
param For setting properties of an object
name For identifying the kind of property
value For setting the value of the named property
pre For representing a block of preformatted text
progress For identifying the completion progress of a task 5
max Must be a valid floating-point number greater than zero (if present) 5
value Must be a valid floating-point number equal to or greater than zero (and less than or equal to the value of the max attribute, if it is present) 5
q For quoting short passages from another source
cite For giving the URL of the source of the quote
rp For providing parentheses around a ruby text component of a ruby annotation in browsers that don’t support ruby annotations 5
rt For marking the ruby text component of a ruby text annotation 5
ruby For allowing text to be marked up with ruby annotations 5
s For identifying text that is no longer accurate or no longer relevant *
samp For representing sample output from a program or computing system
script For adding “automatic” scripts to a page
async For influencing script loading and execution 5
charset For specifying the character set an external script is written in
defer For influencing script loading and execution
src For referencing an external script
type For specifying the scripting language the script is written in (only required if the script type is not “text/javascript”) *
section For identifying a section of a document 5
select For creating form control for selecting from a set of options
autofocus For specifying that the select element is to be focused as soon as the page is loaded 5
disabled For indicating that the element is not available in the current state
form For associating the element with a form that it is not a part of 5
multiple For allowing users to choose more than one option in the menu
name For identifying the data collected by the menu
required For identifying that the user must select one of the options in order to submit the form (the first child option element must be a placeholder or an empty value) 5
size For specifying the number of items initially visible in the menu (and for displaying the menu as a list)
small For representing side comments such as small print *
source For identifying multiple alternative media resources within an audio or video element 5
crossorigin For setting cross-origin request credentials 5
media For identifying the intended media type of the resource 5
src For identifying the URL of the audio or video file to play 5
type For noting a resource’s MIME type 5
span For wrapping content in an element that has no intrinsic semantic meaning *
strong For indicating strong importance of the element’s content *
style For embedding style information in a page
media For indicating a style sheet’s purpose
scoped For applying styles only to the descendants of the element’s parent 5
type For indicating a style sheet’s MIME type (only required if the style type is not “text/css”) *
sub For creating subscripts
summary For identifying a summary, caption, or legend for the contents of its parent details element 5
sup For creating superscripts
svg For embedding Scalable Vector Graphics in the page 5
table For creating tables
tbody For identifying the body of the table; in contrast with the header (thead) or footer (tfoot)
td, th For creating regular and header cells, respectively, in a table
colspan For spanning a cell across more than one column
rowspan For spanning a cell across more than one row
scope For identifying to which rows, columns, rowgroups, or columngroups a th applies
textarea For creating text block entry areas in a form
autofocus For specifying that the text area is to be focused as soon as the page is loaded 5
dirname For identifying the direction of the entered text 5
disabled For indicating that the element is not available in the current state
form For associating the element with a form that it is not a part of 5
maxlength For specifying the maximum number of characters that can be entered in a textarea
name For identifying the data that is gathered with the text block
placeholder For providing a hint to aid in data entry 5
readonly For protecting a text area’s contents
required For indicating that the element must not be blank in order to submit the form 5
rows, cols For specifying the number of rows and columns in the text block
wrap For specifying the use of soft or hard wraps when content of field is submitted 5
tfoot, thead For identifying the footer and header area of a table
time For specifying a date, a time, or both 5
datetime For providing a machine-readable version of the time or date expressed in the element’s text 5
pubdate For specifying the publication date and time of the element’s ancestor article or body element 5
title For creating the title of the page (required)
tr For creating rows in a table
track For specifying external timed text tracks for the parent audio or video element 5
default For indicating which track is the default 5
kind For identifying whether the track is “subtitles,” “captions,” “descriptions,” “chapters,” or “metadata” 5
label For providing a user-readable name for the track 5
src For identifying the URL of the track’s data 5
srclang For identifying the language of the track’s data 5
u For displaying a span of text with an unarticulated, though explicitly rendered, non-textual annotation *
ul For creating unordered lists
var For marking text as a variable name
video For embedding videos, movies, and captioned audio files 5
autoplay For telling the browser to start playing the video file as soon as it can 5
controls For telling the browser to provide controls for the video element 5
crossorigin For setting cross-origin request credentials 5
loop For telling the video file to start over without interruption upon reaching its end 5
mediagroup For associating multiple media files together 5
muted For controlling the default state of audio output 5
poster For specifying the URL of an image to use as a placeholder while media loads, or in case of an error loading 5
preload For specifying whether the browser can begin downloading the media file before the visitor starts playing it 5
src For identifying the URL of the video file to play 5
width, height For specifying the dimensions of the video 5
wbr For identifying an appropriate place to insert a line-break into a word without hyphenation 5

JavaScript Reserved Words

摘自:《JavaScript Visual QuickStart Guide (8th Edition)》。

Reversed words are words that have special meaning to JavaScript. Therefore, they cannot be used as variable or function names.

ECMAScript Edition 3 Reserved Words

These words are part of the JavaScript language as of ES3.

  • break
  • case
  • catch
  • continue
  • default
  • delete
  • do
  • else
  • finally
  • for
  • function
  • if
  • in
  • instanceof
  • new
  • return
  • switch
  • this
  • throw
  • try
  • typeof
  • var
  • void
  • while
  • with

ES3 Future Reserved Words

  • abstract
  • boolean
  • byte
  • char
  • class
  • const
  • debugger
  • double
  • enum
  • export
  • extends
  • final
  • float
  • goto
  • implements
  • import
  • int
  • interface
  • long
  • native
  • package
  • private
  • protected
  • public
  • short
  • static
  • super
  • synchronized
  • throws
  • transient
  • volatile

ECMAScript Edition 5 Reserved Words

This is ES5’s list of reserved words. It’s similar to that of ES3, but given that browsers primarily suppot ES3, we recommend that you keep both lists in mind.

  • break
  • case
  • catch
  • continue
  • debugger
  • default
  • delete
  • do
  • else
  • finally
  • for
  • function
  • if
  • in
  • instanceof
  • new
  • return
  • switch
  • this
  • throw
  • try
  • typeof
  • var
  • void
  • while
  • with

ES5 Future Reserved Words

  • class
  • const
  • enum
  • export
  • extends
  • implements
  • import
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • super
  • yield

Oter identifiers to avoid

These (along with the object names) aren’t officially reserved, but as they are (or may be) part of the JavaScript language, you shouldn’t use them as function or variable names. If you do, abandon all hope; the results will be unpredictable.In addition, most browsers are case-sensitive, which means that they differentiate between Document and document. Internet Explorer is only sometimes case-sensitive, which means that, for example, it may not understand any difference etween Document and document. Consequently, be aware that just because it works in one browser doesn’t mean tha it’ll always work in others. Test, test, test.

  • abstract
  • arguments
  • Array
  • Boolean
  • byte
  • call
  • cast
  • char
  • Date
  • decimal
  • decodeURI
  • decodeURIComponent
  • double
  • dynamic
  • each
  • encodeURI
  • encodeURICompnent
  • Error
  • eval
  • EvalError
  • false
  • final
  • float
  • Function
  • generator
  • get
  • goto
  • has
  • include
  • Infinity
  • int
  • internal
  • intrinsic
  • is
  • isFinite
  • isNaN
  • JSON
  • like
  • long
  • Math
  • namespace
  • NaN
  • native
  • null
  • Number
  • Object
  • override
  • parseFloat
  • parseInt
  • precision
  • prototype
  • RangeError
  • ReferenceError
  • RegExp
  • rounding
  • set
  • short
  • standard
  • strict
  • String
  • synchronized
  • SyntaxError
  • throws
  • to
  • transient
  • true
  • type
  • TypeError
  • uint
  • undefined
  • URIError
  • use
  • volatile
  • xml

Miscellaneous properties and functions in jQuery

These utility methods are often very useful when writing scripts using jQuery.

Properties of the jQuery object

Properties of the jQuery object
Property Description
$.support Returns an object containing properties indicating whether the browser supports various feactures and standards.

Arrays and objects

Arrays and objects
Function Description
$.each(collection, callback) Iterates over collection, executing callback for each item.
$.extend(target, addition, …) Modifies the object target by adding properties from the other supplied objects.
$.grep(array, callback, [invert]) Filters array by using calback as a test.
$.makeArray(object) Converts object into an array.
$.map(array, callback) Constructs a new array consisting of the result of callback being called on each item.
$.inArray(value, array) Determines whether value is in array.
$.merge(array1, array2) Combines the contents of array1 and array2.
$.unique(array) Removes any duplicate DOM elements from array.

Object introspection

Object introspection
Function Description
$.isArray(object) Determines whether object is a true JavaScript array.
$.isEmptyObject(object) Determines whether object is empty.
$.isFunction(obejct) Determines whether object is a function.
$.isPlainObject(object) Determines whether object was created as an object literal or with new object.
$.isNumeric(object) Determines whether object is a numeric scalar value.
$.isWindow(object) Determines whether object is an XML node.
$.isXMLDoc(object) Determines whether object is an XML node.
$.type(object) Gets the JavaScript class of object.

Other

Other
Function Description
$.trim(string) Removes whitespace from the ends of string.
$.noConflict([removeAll]) Reverts $ to its pre-jQuery definition.
$.noop() A function that does nothing.
$.now() The current time in milliseconds since the epoch.
$.holdReady(hold) Stops the ready event from being triggered, or releases this hold.