前端開發總結

　　很久沒有更新博客了，自從大學畢業整我的好像剛從監獄放出來似的，被外面的花花世界迷暈了，成天都是上班，再也沒有熬夜敲代碼，很久沒有對本身的學習進行總結了，趁着週末的時光總結一下這5個月來本身在前端路上裸奔的這段日子。本來大學畢業打算找個JAVA方向的或Android開發的工做，真是歲月弄人，最後來到了一家作藝術品交易的網站，網站後臺用的是.NET，只好在前端的路上裸奔了，跌進無數坑，一次次爬起，今天就一塊兒看看我這些天遇到的各類坑，與君共勉。

　　首先前端開發就繞不開javascript和css，固然還有jQuery和ajax，接下來咱們就圍繞這三點一塊兒來學習一下。

　　第一點咱們就從ajax來一塊兒聊聊，說實話第一次用ajax仍是挺感受複雜的，常常聽別人說前端提交用異步呀，那是就感受很牛的樣子，如今看來當初是如何的天真，下面就和你們一塊兒回憶一下ajax異步提交的知識。

var ajaxPara = "ThisType=" + thisType + "&HomeDiyTypeCode=" + HomeDiyTypeCode;//請求數據
        $.ajax({
            type: "POST",
            url: "/Search/GetData",//請求地址
            data: ajaxPara,
            dataType: "json",
            beforeSend: function() {
                $("#wrap").empty();
                $("#wrap").append('<img src="/Img/loading_horizontal.gif" />');
            },
            success: function(data) {//成功返回
                $("#wrap").empty();
                if (undefined != data && data !== "") {
                    var jsonObjs = eval(data);//將返回結果轉爲jsonObject對象
                    pageCount = jsonObjs[0].ClickCount;
                  
                } else {
                    $("#wrap").html("此分類下暫未上傳藝術品");
                }
            },

            complete: function() {
                window.setTimeout(function() {
                    waterFall("wrap");
                    requestStatus = 2; //請求完成
                }, 300);
            }
        });

　　是否是很簡單，就這樣簡單的幾句話咱們就能夠完成異步提交數據，剛下坑的就別繼續了，能夠上岸了。

　　下面咱們來一塊兒看一些css的相關屬性，好比如何使元素單行顯示、如何在鼠標通過時變換樣式、如何讓圖片元素不變型居中顯示等等

行元素當行顯示

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

　　二、行業指定行數顯示

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

　　三、鼠標事件

.span{color:blue;}
.span:hover{color:red;}

ul li .span{color:blue;}
ul li:hover .span{color:red;}

　　四、孩子選擇器

ul li:first-child{border:1px solid #a00;}
ul li:nth-child(2){border:1px solid #0a0;}
ul li:nth-last-child(2){border:1px solid #aa0;}
ul li:nth-child(2n + 1){border:1px solid #aaa;}
ul li:nth-last-child(2n + 1){border:1px solid #0aa;}
ul li:last-child{border:1px solid #00a;}

　　五、僞元素（after/before）

h1:before{content:url(logo.gif);}
h1:after{content:url(logo.gif);}

　　六、圖片不變型居中顯示

<style>
.father{width:200px;height:200px;line-height:200px;text-align:center;}
.father img{max-width:200px;max-height:200px;vertical-align: middle;}
</style>
<div class="father">
    <img src="" /> 
</div>

　　暫時總結到這裏，後續繼續補充，若是感興趣，請持續關注。

　　下面一塊兒聊聊javascript和jQuery，以前沒有怎麼用過jQuery，如今通過這些日子的不斷學習，愈來愈對jQuery感興趣，真是太方便了，jQuery是對javascript的封裝，使用時只要導入jQuery的依賴文件就Ok了，下面就一塊兒簡單回憶一下常常使用的一些用法。

　　一、頁面加載完畢執行

function myfun()
{
    alert("this window.onload");
}
/*用window.onload調用myfun()*/
window.onload=myfun;//不要括號

　　二、打開頁面

window.location.href="http://www.cnblogs.com/AndroidJotting/"; //在同當前窗口中打開窗口
window.open("http://www.cnblogs.com/AndroidJotting/");//在另外新建窗口中打開窗口

　 三、獲取屏幕屬性

網頁可見區域寬：document.body.clientWidth 
網頁可見區域高：document.body.clientHeight 
網頁可見區域寬：document.body.offsetWidth (包括邊線的寬) 
網頁可見區域高：document.body.offsetHeight (包括邊線的寬) 
網頁正文全文寬：document.body.scrollWidth 
網頁正文全文高：document.body.scrollHeight 
網頁被捲去的高：document.body.scrollTop 
網頁被捲去的左：document.body.scrollLeft 
網頁正文部分上：window.screenTop 
網頁正文部分左：window.screenLeft 
屏幕分辨率的高：window.screen.height 
屏幕分辨率的寬：window.screen.width 
屏幕可用工做區高度：window.screen.availHeight 
屏幕可用工做區寬度：window.screen.availWidth 

　　四、HTML精肯定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 

scrollHeight: 獲取對象的滾動高度。 
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離 
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離 
scrollWidth:獲取對象的滾動寬度 
offsetHeight:獲取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的高度 
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置 
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置 
event.clientX 相對文檔的水平座標 
event.clientY 相對文檔的垂直座標 
event.offsetX 相對容器的水平座標 
event.offsetY 相對容器的垂直座標 
document.documentElement.scrollTop 垂直方向滾動的值 
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量 

　　五、頁面頂部浮動

//商品大類浮動
        window.onscroll = function () {//滾輪事件
            var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//滾輪滾動的距離
            var node = document.getElementById('float-search');//變化的菜單模塊
            if (top >= 600) {//就是滾動條滾動到600px位置，顯示菜單，而且能夠修改它的樣式。
                if (node.getAttribute("rel") != 1) {
                    node.style.display = "block";
                    node.setAttribute("rel", "1");
                    $("#float-search").animate({opacity:"0.98" }, 1000);
                }
            } else {//當鼠標滾動回初始位子樣式變回。
                if (node.getAttribute("rel") != 0) {
                    node.setAttribute("rel", "0");
                    $("#float-search").animate({ opacity: "0" }, 1000, function () {
                        node.style.display = "none"
                    });
                }
            }
        }

　　未完待續......

　　暫時就先聊到這裏，要睡覺嘍，明天接着總結，感興趣的請持續關注。