CSS 选择器之 > + ~

PS:标题没有乱码 :)

>选择器

div > a

选取父元素是 <div> 元素的每个 <a> 元素

父元素,就是其直接的上层元素

所以

<div>
    <p><a href="#">链接</a></p>
</div>

这样的<a>是不会被选中的。


+选择器

div + p

选择 <div> 元素之后紧跟的每个 <p> 元素

乍一听和上面的一样啊~

- 阅读剩余部分 -

珍珠玫瑰喂养心得

珍珠玫瑰是mini月季的另一个名称,4月份从宜家买回,买回之后就不得安宁。

最初好好的,过了几天我发现叶子慢慢变深了!整个植株看起来都成了黑色,叶子也在疯狂地掉落,不忍放正面照,放个逆光的好了。

月季白粉病

这时候才意识到可能生病了,于是上网查找可能的病症,发现和月季白粉病的症状类似,买了多菌灵来喷,果然第二天叶子上的白点就变黑了,过了几天发现有所好转。

又过了几天,发现叶子还是在卷曲,叶子还是在疯狂地掉。仔细观察,果然发现了红蜘蛛之类的小虫子,这个相对好办,用大量水喷,然后喷威猛先生去重油污剂(这个超级多用途,我还用它来杀蟑螂,哈哈哈),然后再清水喷喷喷

这下好多了,但是植株长起来还是慢慢的,原本5分支,现在只剩下2分支了,发现都是从根部开始烂的,换土!这时才发现原本自带的图根本就不是土,而是一种类似木屑和米糠之类的东西,怪不得,唉。

经过一系列折腾之后,叶子慢慢多了,不过最后还是只剩下了一株,可要好好活着啊。

在五月的29号,它开花了!

第一朵花

有些东西是慢慢地知道的,比如浇水,以前以为是一周三天浇一次水,后来发现还是得一天一次,只要植株长得好,病虫害也会少一些,抵抗力对于植物来说也是存在的一个东西。

- 阅读剩余部分 -

[译]HTML5 全屏Full-Screen API,支持Chrome、FF、IE11

什么是Full-Screen API

这个API允许单个的元素全屏显示,和F11全屏不同,这个API用来展示某个容器里面的图片、视频等。

支持的浏览器

所有的最新浏览器,包括IE11呢。移动端的支持有限,不过没关系,反正移动端的浏览器都是近乎全屏了。

因为这个API还没有规范,所以很可能以后会有改变,同时,使用起来也少不了各种浏览器厂商的前缀了。


Javascript 部分的API

下面的例子中,想要全屏显示的是ID为myimage的图片。先来看一下几个相应的方法。

1. document.fullscreenEnabled

如果当前浏览器允许进入全屏模式,这个属性返回true,可用来检测浏览器是否支持全屏API

if (document.fullscreenEnabled) { ... }

- 阅读剩余部分 -

[译]关于Textarea那些小技巧

1. 使用图片作为textarea的背景,输入的时候消失

textarea和其他的普通元素一样,css加上一个背景即可,不过为了阅读性更好,需要在输入的时候隐藏,这个功能使用jQuery来完成即可。
CSS:

textarea {
  background: url(images/benice.png) center center no-repeat; /* This ruins default border */
  border: 1px solid #888; 
}

Javascript:

$('textarea')
  .focus(function() { $(this).css("background", "none") })
  .blur(function() {
          if ($(this)[0].value == '') {
             $(this).css("background", "url(images.png) 0 0 no-repeat")
          }
   });

2. 使用HTML5的placeholder属性来设置预设文本

HTML5 的forms元素引入了一个新的属性:placeholder。它为表单元素显示默认值提供了可能,在用户填写之前给出提示,填写时候消失。


- 阅读剩余部分 -

slice / splice / split ,晕了没?

slice / splice / split这三个方法,不仅单词拼写非常像,而且字符串和数组涉及其中几个方法,非常容易混淆,有必要写篇文章来记录一下。

数组Array

slice

arrayObject.slice( start [,end] )

start 开始选取的位置;如果为负,将从数组尾部开始算起。即-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

end 结束选取的位置。如果未指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果为负,将从数组尾部开始算起。

start含,end不含,所以选取的是 [start, end) 的前闭后开的区间。

该方法并不会修改数组,而是返回一个子数组。

splice

arrayObject.splice(index, howmany [,item1,.....,itemX] )

index 进行操作的位置,为负则从数组尾部开始算起。

howmany 要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX 向数组添加的新项目,用来替代前一个参数删掉的那些项目。

splice() 方法会直接对数组进行修改。


- 阅读剩余部分 -