一、index()方法小结
今天做购物车弹窗的时候碰到一个问题，需要判断这个元素是父级的第几个元素。即判断具体是哪个商品。又看了一下资料，自己来做一个总结。
简单的说，就两种用法：
- 1、单个元素选择器点index()不穿参数，返回的是该元素在自己同级元素中的下标位置。
- 2、群组选择器点index()括号里传参数，就是参数选择的这个元素在之前那个群组中的下标位置；当找不到这个元素时返回-1.
简单代码示例：
html代码：
<ul>
<span>1</span>
<li class="li" id="li">2</li>
<li class="li">3</li>
<li class="li">4</li>
</ul>
js代码：
<script type="text/javascript">
var a = $('#li').index();
var b = $('.li').index('#li');
var c = $('ul').index('#li');
console.log(a,b,c);//1,0,-1
</script>
二、设置input输入框的placeholder文字的样式
placeholder为C3新增的占位符，可以把它看做一个伪元素。所以设置它的样式时需要用伪元素来选择。下面是一个兼容性的写法：
::-webkit-input-placeholder { /* WebKit browsers */
color:#999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:#999;
}
当然了，既然是伪类也可以采用下面这种写法（上面的简写形式就能满足我们，所以一般用上面那张即可，下面只是帮助理解用的）：
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #666;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:#666;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color:#666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color:#666;
}
知识点：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
css伪类：可以看做添加一些样式。如：hover,focus等；
css伪元素：可以看做是一个元素。如：after,before等
伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类， 如:first-line,:first-letter,:before,:after等等。因此对于css2之前已经有的伪元素两种写法的作用是一样的，但是为了兼容IE浏览器还是使用单冒号的写法。
