移动端前端界面开发学习

CSS：
1、总：
body{margin: 0;font-family: Arial,"Mircoscft YaHei";color: #666;position:relative;}
.page{height: 100%;width: 100%;position: absolute;left:0;top:0;overflow: hidden;}
2、获取到class=page的第1个，然后给其做样式调整
class=page
.page:nth-of-type(1){z-index: 10;}
3、默认样式隐藏及展示样式显示
.page{display:none;}
.pageShow{display:block;}
4、img图片自适应且等比例缩放
width:auto; height:auto; max-width:100%; max-height:100%;
5、li去点
margin：0；padding:0;list-style:none;
6、幻灯片，5张图片放置
<div class="pictureSlide">
<ul>
<li><img src="image/1.jpg" alt=""></li>
<li><img src="image/2.jpg" alt=""></li>
<li><img src="image/3.jpg" alt=""></li>
<li><img src="image/4.jpg" alt=""></li>
<li><img src="image/5.jpg" alt=""></li>
</ul>
</div>
CSS:
.pictureSlide{
width:500%;//5张所以是500
height:200px;
overfloat:hidden;
}
.pictureSlide img{
width:20%; //100/5
height:200px;
float:left;//记得给左浮动！
}
7.渐变：
background-:webkit-linear-gradient(bottom,rgba(0,0,0,0.9) 0,rgba(0,0,0,0.8) 10%,rgba(0,0,0,0))
8.p标签里面的文字缩进
padding-left:15px;

JS：
1、获取到设备端高度宽度：
function view() {
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
};
}
把body的高度值=设备的高度值：
document.body.style.height=view().h+"px";

2、幻灯片
自动播放：
1）获取到图片
2）图片设置定时，0.5s自动切换一屏
transform:translateX(640px);
transition:0.5s;
点击播放
1）获取到图片
2）获取到点
3）点和图片关联
4）点击点显示图片

3、移动端事件
bind(对象,"touchstart",函数名)；
function 函数名(ev){
ev=ev.changedTouches; //手指列表
}
4、清除时间定时
clearInterval(oTime);

JQuery学习
1、childern 获取到子集元素；eq(i) 获取到子集元素的第i个元素
var picShadowUl=$(".picShadow ul");//用于获取到点
picShadowUl.children('li').css("background-color","#fff");
picShadowUl.children('li').eq(iNow).css("background-color","red");

2、获取到对象的索引值
obj.index();
3、this获取到当前的对象
例：
obj.click(function(){
$(this).index();
//获取到当前点击对象的索引值
})

4、点击时滑动消失
obj.click(function(){
$(this).slideUp();
})

5、数据类型转换
parseInt("1234"); //返回1234

6、
每个obj都会执行操作
obj.each(fuction(index){
})

7、索引值移动
8、获取元素相对界面的绝对位置
offset()
picShadowOffset=$(".picShadow").offset();
console.log(picShadowOffset);
console.log(picShadowOffset.left);
console.log(picShadowOffset.top);
9、创造节点
var $div=$("<div >111</div>")
obj.apend($div);

10、鼠标移上离开
//鼠标移上去显示
secnec.mouseover(function(event) {
secnecInfo.show();
});
//鼠标离开不显示
secnec.mouseout(function(event) {
/* Act on the event */
secnecInfo.hidden();
});
11、置顶固定菜单栏
b_obj 解决 obj为固定定位时，文档流少了个div会出现跳动的问题
$(window).scroll(function(){

if(windows.scrollTop==20px){
obj.css({
position:"fix", //给固定位置
})
b_obj.show();
}else{
position:"static"
}
b_obj.hidden();
})
12、无缝滚动
1、要滚动的图片（ul 里面的li 复制，从5个变为10个，ul width 为10*li，overfloat 为hidden）
复制：$(ul).html()=$()ul.html()+$()ul.html();
2、使用定时器 left值赋值移动ul
3、处理10个ul显示空白的问题
1）当第一个ul完全离开显示区域时，$(ul).css(left,"0px");

13、事件冒泡
情况：父级、子级绑定相同的事件（例：click），调用子集的绑定事件时，会触发父级的绑定事件，无论是相对定位方式还是绝对定位方式。
阻止事件冒泡事件：
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
14、默认行为
浏览器右键菜单
$(document).contextmenu(function(event) {
event.preventDefault();
});
15、获取点击的坐标
$box.click(fumction(event){
return {
x:event.clientX,
y,event.clientY
}
})

16、事件委托
情况：利用冒泡原理，把事件绑定到父级，子级也相应地绑定了相关事件。
ul.delegate('li', 'eventType', function(event) {
$(this).css("color","#000");
});
取消事件委托：
ul.undelegate();

17、滚轮事件
jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。
例：整屏滚动
1、获取当前窗口显示高度
$h=$(window).height;
2、网页每屏幕高度为显示的高度

3、调用
var lenght=$("section").lenght;
var ipage=0;
//dat为-1则是向下滑
windows.mousewheel(function(event,dat){
1）向下
if(dat==-1){
if(ipage<lenght-1){
改变top值
}else{
ipage=lenght-1;
}
}
2）向上
if(dat==1){
if()
}
})

18、
var $li=$("<li>")创建一个li
var $li=$("li")选择li
19、当前选中的li加active 样式，其他去除active样式
$(this).addClass("active").siblings().remove("active")

20、获取input 中value 的值
$("input[class='scoreValue']").attr("value")
21、
number()
可以把true变成 1，false变成0
Date()时间可变成时间戳
parseInt()
把true false都变成NaN
$("classname").offset().top+30;

HTML：
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">