前端开发总结

　　很久没有更新博客了，自从大学毕业整我的好像刚从监狱放出来似的，被外面的花花世界迷晕了，成天都是上班，再也没有熬夜敲代码，很久没有对本身的学习进行总结了，趁着周末的时光总结一下这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"
                    });
                }
            }
        }

　　未完待续......

　　暂时就先聊到这里，要睡觉喽，明天接着总结，感兴趣的请持续关注。