好久沒有更新博客了，自從大學(xué)畢業(yè)整個人好像剛從監(jiān)獄放出來似的，被外面的花花世界迷暈了，整天都是上班，再也沒有熬夜敲代碼，好久沒有對自己的學(xué)習(xí)進(jìn)行總結(jié)了，趁著周末的時光總結(jié)一下這5個月來自己在前端路上裸奔的這段日子。原本大學(xué)畢業(yè)打算找個JAVA方向的或Android開發(fā)的工作，真是歲月弄人，最后來到了一家做藝術(shù)品交易的網(wǎng)站，網(wǎng)站后臺用的是.NET，只好在前端的路上裸奔了，跌進(jìn)無數(shù)坑，一次次爬起，今天就一起看看我這些天遇到的各種坑，與君共勉。

　　首先前端開發(fā)就繞不開javascript和css，當(dāng)然還有jQuery和ajax，接下來我們就圍繞這三點(diǎn)一起來學(xué)習(xí)一下。

　　第一點(diǎn)我們就從ajax來一起聊聊，說實(shí)話第一次用ajax還是挺感覺復(fù)雜的，經(jīng)常聽別人說前端提交用異步呀，那是就感覺很牛的樣子，現(xiàn)在看來當(dāng)初是如何的天真，下面就和大家一起回憶一下ajax異步提交的知識。

var ajaxPara = "ThisType=" + thisType + "&HomeDiyTypeCode=" + HomeDiyTypeCode;//請求數(shù)據(jù)$.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);//將返回結(jié)果轉(zhuǎn)為jsonObject對象pageCount = jsonObjs[0].ClickCount;} else {$("#wrap").html("此分類下暫未上傳藝術(shù)品");}},complete: function() {window.setTimeout(function() {waterFall("wrap");requestStatus = 2; //請求完成}, 300);}});

　　是不是很簡單，就這樣簡單的幾句話我們就可以完成異步提交數(shù)據(jù)，剛下坑的就別繼續(xù)了，可以上岸了。

　　下面我們來一起看一些css的相關(guān)屬性，比如如何使元素單行顯示、如何在鼠標(biāo)經(jīng)過時變換樣式、如何讓圖片元素不變型居中顯示等等

行元素當(dāng)行顯示

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

　　2、行業(yè)指定行數(shù)顯示

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

　　3、鼠標(biāo)事件

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

　　4、孩子選擇器

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;}

　　5、偽元素（after/before）

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

　　6、圖片不變型居中顯示

<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>

　　暫時總結(jié)到這里，后續(xù)繼續(xù)補(bǔ)充，如果感興趣，請持續(xù)關(guān)注。

　　下面一起聊聊javascript和jQuery，之前沒有怎么用過jQuery，現(xiàn)在經(jīng)過這些日子的不斷學(xué)習(xí)，越來越對jQuery感興趣，真是太方便了，jQuery是對javascript的封裝，使用時只要導(dǎo)入jQuery的依賴文件就Ok了，下面就一起簡單回憶一下經(jīng)常使用的一些用法。

　　1、頁面加載完畢執(zhí)行

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

　　2、打開頁面

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

　 3、獲取屏幕屬性

網(wǎng)頁可見區(qū)域?qū)?#xff1a;document.body.clientWidth 網(wǎng)頁可見區(qū)域高：document.body.clientHeight 網(wǎng)頁可見區(qū)域?qū)?#xff1a;document.body.offsetWidth (包括邊線的寬) 網(wǎng)頁可見區(qū)域高：document.body.offsetHeight (包括邊線的寬) 網(wǎng)頁正文全文寬：document.body.scrollWidth 網(wǎng)頁正文全文高：document.body.scrollHeight 網(wǎng)頁被卷去的高：document.body.scrollTop 網(wǎng)頁被卷去的左：document.body.scrollLeft 網(wǎng)頁正文部分上：window.screenTop 網(wǎng)頁正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的寬：window.screen.width 屏幕可用工作區(qū)高度：window.screen.availHeight 屏幕可用工作區(qū)寬度：window.screen.availWidth

　　4、HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth?

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

　　5、頁面頂部浮動

//商品大類浮動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 {//當(dāng)鼠標(biāo)滾動回初始位子樣式變回。if (node.getAttribute("rel") != 0) {node.setAttribute("rel", "0");$("#float-search").animate({ opacity: "0" }, 1000, function () {node.style.display = "none"});}}}

　　未完待續(xù)......

　　暫時就先聊到這里，要睡覺嘍，明天接著總結(jié)，感興趣的請持續(xù)關(guān)注。

?

轉(zhuǎn)載于:https://www.cnblogs.com/AndroidJotting/p/6081276.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的前端开发总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。