移動端前端界面開發學習

CSS：
一、總：
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;}
二、獲取到class=page的第1個，而後給其作樣式調整
class=page
.page:nth-of-type(1){z-index: 10;}
三、默認樣式隱藏及展現樣式顯示
.page{display:none;}
.pageShow{display:block;}
四、img圖片自適應且等比例縮放
width:auto; height:auto; max-width:100%; max-height:100%;
五、li去點
margin：0；padding:0;list-style:none;
六、幻燈片，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：
一、獲取到設備端高度寬度：
function view() {
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
};
}
把body的高度值=設備的高度值：
document.body.style.height=view().h+"px";

二、幻燈片
自動播放：
1）獲取到圖片
2）圖片設置定時，0.5s自動切換一屏
transform:translateX(640px);
transition:0.5s;
點擊播放
1）獲取到圖片
2）獲取到點
3）點和圖片關聯
4）點擊點顯示圖片

三、移動端事件
bind(對象,"touchstart",函數名)；
function 函數名(ev){
ev=ev.changedTouches; //手指列表
}
四、清除時間定時
clearInterval(oTime);

JQuery學習
一、childern 獲取到子集元素；eq(i) 獲取到子集元素的第i個元素
var picShadowUl=$(".picShadow ul");//用於獲取到點
picShadowUl.children('li').css("background-color","#fff");
picShadowUl.children('li').eq(iNow).css("background-color","red");

二、獲取到對象的索引值
obj.index();
三、this獲取到當前的對象
例：
obj.click(function(){
$(this).index();
//獲取到當前點擊對象的索引值
})

四、點擊時滑動消失
obj.click(function(){
$(this).slideUp();
})

五、數據類型轉換
parseInt("1234"); //返回1234

六、
每一個obj都會執行操做
obj.each(fuction(index){
})

七、索引值移動
八、獲取元素相對界面的絕對位置
offset()
picShadowOffset=$(".picShadow").offset();
console.log(picShadowOffset);
console.log(picShadowOffset.left);
console.log(picShadowOffset.top);
九、創造節點
var $div=$("<div >111</div>")
obj.apend($div);

十、鼠標移上離開
//鼠標移上去顯示
secnec.mouseover(function(event) {
secnecInfo.show();
});
//鼠標離開不顯示
secnec.mouseout(function(event) {
/* Act on the event */
secnecInfo.hidden();
});
十一、置頂固定菜單欄
b_obj 解決 obj爲固定定位時，文檔流少了個div會出現跳動的問題
$(window).scroll(function(){

if(windows.scrollTop==20px){
obj.css({
position:"fix", //給固定位置
})
b_obj.show();
}else{
position:"static"
}
b_obj.hidden();
})
十二、無縫滾動
一、要滾動的圖片（ul 裏面的li 複製，從5個變爲10個，ul width 爲10*li，overfloat 爲hidden）
複製：$(ul).html()=$()ul.html()+$()ul.html();
二、使用定時器 left值賦值移動ul
三、處理10個ul顯示空白的問題
1）當第一個ul徹底離開顯示區域時，$(ul).css(left,"0px");

1三、事件冒泡
狀況：父級、子級綁定相同的事件（例：click），調用子集的綁定事件時，會觸發父級的綁定事件，不管是相對定位方式仍是絕對定位方式。
阻止事件冒泡事件：
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
1四、默認行爲
瀏覽器右鍵菜單
$(document).contextmenu(function(event) {
event.preventDefault();
});
1五、獲取點擊的座標
$box.click(fumction(event){
return {
x:event.clientX,
y,event.clientY
}
})

1六、事件委託
狀況：利用冒泡原理，把事件綁定到父級，子級也相應地綁定了相關事件。
ul.delegate('li', 'eventType', function(event) {
$(this).css("color","#000");
});
取消事件委託：
ul.undelegate();

1七、滾輪事件
jquery.mousewheel插件使用
jquery中沒有鼠標滾輪事件，原生js中的鼠標滾輪事件不兼容，可使用jquery的滾輪事件插件jquery.mousewheel.js。
例：整屏滾動
一、獲取當前窗口顯示高度
$h=$(window).height;
二、網頁每屏幕高度爲顯示的高度

三、調用
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()
}
})

1八、
var $li=$("<li>")建立一個li
var $li=$("li")選擇li
1九、當前選中的li加active 樣式，其餘去除active樣式
$(this).addClass("active").siblings().remove("active")

20、獲取input 中value 的值
$("input[class='scoreValue']").attr("value")
2一、
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">