我的学习笔记

1、文字超出处理：

.goodNews-ul a{
text-overflow:ellipsis;/*文字超出时，以引号结尾*/
-webkit-line-clamp:1;/*文字一行显示，不折行*/
overflow:hidden;
display: -webkit-box;
-webkit-box-orient:vertical;
}

2、图片处理：(<img>外层都要套一个div)
banner大图：<div><img src=""/></div> 只需要设置img的宽度，div img{width:100%;}
图文格式的img图片：<div><img src=""/></div> 设置div的具体宽 高，div{width:8rem; height:8rem; } div img{width:100%; height:auto;}

3、电话号码处理：
电话号码的元素外层都要加一个<a>标签，如下表示：<a href="tel:188xxxxxxxx">188xxxxxxxx</a> 否则会出现，手指一点击，数字变灰

4、制作page文章页面时，因为可编辑器的原因：标题跟正文部分都要用div包裹，

5、背景图片问题：background-size:10% 50%; (可以设置具体值) background-size:contain; background-size:cover;

6、css中flex布局的元素有padding情况下，各弹性元素width会出现问题，：给设置padding的元素加上元素属性box-sizing:border-box;

7、设置css3 placeholder 字体颜色：
placeholder 属性提供可描述输入字段预期值的提示信息
::-webkit-input-placeholder{color:#f00;}
::-moz-placeholder{color:#f00;}

8、textarea里面不能套用标签，仅仅作为文本编辑器

9、!important 比标签内部样式级别高，可以更改自定义样式，比如swiper

9、box-sizing: border-box; 可以使宽高不增加padding值

11、tabs 页面

$('.video-tabs li').click(function() {
var i = $(this).index();//下标第一种写法
//var i = $('tit').index(this);//下标第二种写法
$(this).addClass('tab-active').siblings().removeClass('tab-active');
$('.video-tab-con li').eq(i).show().siblings().hide();
});

index():返回指定元素相对于其他指定元素的 index 位置。如果未找到元素，index() 将返回 -1。
eq():选取带有指定 index 值的元素。

12、overflow 滚动条样式的改变：csdn收藏夹中

13、如果页面多处定位的话，建议在body定义该属性： body{position:relative;}
position:fixed;所在的标签是没有宽度的，不能自适应屏幕宽度，要自己定义width：100%； z-index:100;

14、弹出层插件：layer.js

15、触摸滑动插件：swiper.js

16、注意jq对象跟js对象的转换

17、表单提交的按钮类型必须是submit

18、input框 type="radio"显示不出 ：-webkit-appearance: none;

19、处理banner图片大背景 的时候。
一种方案：用margin padding撑开其边距，background-size:100% 100%;之后再用媒体查询 单独设置5,5s的margin padding 值。

20、手机端特别是点击跳转的按钮，都要注意是否有链接标签 ( a标签 ) ，且链接的地方 大小是否充满整个外层标签，确保手指肚能完全触摸到
验证手指是否能完全触摸到，在a标签上加一个页面跳转链接在手机上进行测试。

21、清理手机上的缓存，在css文件或者js文件后加一个问号（？）在刷新。

22、animate.css库 http://www.jq22.com/yanshi819

24、现在要写一个移动端项目，准备用前端模版引擎，但是html模版一般都是在script标签中，是不会被浏览器渲染的，当我解析模版的时候才让他渲染。但是我要解析这个模版首先我要异步发一个请求获取数据后再解析！那么中间存在的空白期用loading来解决。我想知道现在大部分用前端模版的都是这种解决方案吗？

25、data() 方法向被选元素附加数据，或者从被选元素获取数据。

26、prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。appendTo(content): 是将所有匹配的元素添加到另一个特定的目标元素中，加入后作为最后一个子节点

而prependTo():是将所有匹配的元素添加到另一个特定的目标元素中，加入作为第一个子节点

27、tmodjs前端模板引擎 http://code.csdn.net/news/2820926

http://www.icbc.com.cn/ICBCDynamicSite/Charts/GoldTendencyPicture.aspx 免费接口

28、http://framework7.taobao.org/docs/infinite-scroll.html （中文）
www.light7.cn(中文) www.light.org(外国)

31、end()

<ul class="first">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
<ul class="second">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>

主要是在利用 jQuery 的链条属性（命令链）时，jQuery 会比较有用。如果不使用命令链，我们一般是通过变量名来调用之前的对象，这样我们就不需要操作堆栈了。不过通过 end()，我们可以把所有方法调用串联在一起：

$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');

这条命令链检索第一个列表中类名为 foo 的项目，并把它们的背景设置为红色。end() 会将对象还原为调用 find() 之前的状态，所以第二个 find() 查找的是 <ul class="first"> 内的 '.bar' ，而不是在列表的 <li class="foo"> 中查找，并将匹配元素的背景设置为绿色。最后的结果是第一个列表中的项目 1 和项目 3 被设置了带颜色的背景，而第二个列表中的项目没有任何变化。

32、for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）

35、http://cli.im/ 二维码生成

36、对象有时被称之为关联数组(associative array)了——对象做了字符串到值的映射，而数组做的是数字到值的映射。
获取对象的属性: 括号表示法：person['age'] person['name']['first']

点表示法：来访问对象的属性和方法
括号表示法一个有用的地方是它不仅可以动态的去设置对象成员的值，还可以动态的去设置成员的名字。