??????????? 在牛腩中學習過css和div,在js中學習過css+js 封裝,在這里又回顧了一遍,也作為查漏補缺,也算比較系統(tǒng)的復習了一遍吧。
????????? css核心內(nèi)容主要包括四個方面:標準流,盒子模型,浮動和定位,而在B/S前臺頁面的布局中,它們也起著決定性作用。盒子模型來確定每個元素的具體大小,邊框和間距等,浮動定位與標準流結(jié)合來確定頁面中元素之間的排列順序和位置布局等,再加上一些基礎的CSS樣式如背景圖片,顏色等就能形成格式各樣的web頁面了。
??????? DIV:CSS中定位技術的一種,作為一個單獨的模塊出現(xiàn)。與span相對。而CSS中定位還包括如position的relative和absolute方式,它們可以結(jié)合起來進行使用,使頁面出現(xiàn)較為復雜的定位效果。
?????? JS:為了使CSS所設計好的頁面能夠呈現(xiàn)出一個動態(tài)的效果,同時為了解決其他語言在客戶端與服務器端之間交互的速度緩慢的問題,可以采用JavaScript技術,而JQuery則是一個兼容多種瀏覽器的一個經(jīng)過封裝好的輕量級的JS庫,利用它,可以更加方便的對頁面中的各種元素設計各種動態(tài)效果。
????? 而這二者間有著不可分割的關系:仔細分析發(fā)現(xiàn),在JS設計動畫效果時,許多看似很復雜的效果,其實都是通過設定頁面元素的CSS樣式來控制的。比如圖片的淡入淡出是通過opacity樣式來控制的,而滾動,加速減速等這些動畫效果也只是通過一些如元素位置,大小等簡單的CSS樣式或者DOM元素屬性加上一些簡單的方法如setTimeout和setInterval等簡單的函數(shù)封裝而成的。為了方便,同樣JS中也提供了一些方法來設置或獲取CSS樣式。
立即學習“前端免費學習筆記(深入)”;
???? css查漏補缺,過濾器:
Ie: opacity:filter(alpha=50);//w3c opacity:0.5/*2、blur模糊*/.blur{ filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);}/*3透明色*/ .chroma{ filter:chroma(color=FF6800); /* 去掉金黃色 */ }/*4、flip翻轉(zhuǎn)*/ .flip1{ filter:fliph; /* 水平翻轉(zhuǎn) */ } .flip2{ filter:flipv; /* 豎直翻轉(zhuǎn) */ } .flip3{ filter:flipv fliph; /* 水平、豎直同時翻轉(zhuǎn) */ }/*5、遮罩*/ .mask{ filter:mask(color=#8888FF); /* 遮罩 */ }/*6、波浪*/ span.wave1{ filter:wave(add=0,freq=2,lightstrength=70,phase=75,strength=4); }
?? JS:李炎恢的視頻中講的挺全面的,針對于JQuery,視頻中主要講了有關于在實際應用中經(jīng)常遇到的一些方法,在這里總結(jié)一下:
??? 1.實現(xiàn)連綴:封裝$()來返回一個JQuery對象。這里理解的JQuery對象其實和博客前端例子中的Base基礎庫核心對象一樣。通過定一個一個構造函數(shù)對象,為這個對象的原型對象定義許多封裝好的方法,以供外界進行調(diào)用,同時每次執(zhí)行完成后,返回這個對象本身,以便下一次繼續(xù)實現(xiàn)連綴調(diào)用。這樣大大方便了編程人員,這也充分體現(xiàn)了JQuery的write less,do more的設計理念。
?? 2、常用方法:
?????? 1.獲取和設置屬性
???????? html(),css(),val(),scrollLeft/Top(),height()/width(),outerWidth(true)/Height(true)
????? 2.顯示隱藏
?????? hide()和show(),slideDown()和slideUp(),toggle()和slideToggle(),fadeOut()/fadeIn()//這里要注意參數(shù)的使用slow,fast,normal或者直接為數(shù)字
???? 3.動畫效果
?????? animate(),dequeue()
????? 4、其他
????? Is()方法,scroll(),appendTo(),插件的使用,瀏覽器版本和類型的判斷browser,JSON數(shù)據(jù)格式等等。
??以上是關于JQuery視頻中講到的一些基礎的知識概括。此外還包括一些基礎的AJAX的封裝函數(shù)如ajaxStart()和ajaxStop(),ajaxComplete(),$().get(),$().post()等。
????? 小結(jié):CSS和JS二者的結(jié)合共同構成了如今網(wǎng)站中豐富多彩的web頁面,基于JQuery是JS的一個封裝庫,在封裝時,針對瀏覽器差異,應盡量采用能力控制而盡量摒棄版本控制的方式進行封裝。同時,針對于封裝好的JS庫,也應該盡量去理解封裝的原理,以達到知其然,知其所以然,以便今后建立我們自己的JS庫。
HTML怎么學習?HTML怎么入門?HTML在哪學?HTML怎么學才快?不用擔心,這里為大家提供了HTML速學教程(入門課程),有需要的小伙伴保存下載就能學習啦!
Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號