本篇內容主要講解“javascript小知識點有哪些”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“javascript小知識點有哪些”吧!
設置圖片時<image scr="" alt="" width="">單設置一個長或寬則剩下的邊長按比例自動設置。
鼠標移至圖片上時變成小手給圖片添加樣式 cursor:pointer;
阻止表單提交<form action="javascript:;">
設置盒子權重時在樣式中寫 z-index:數字越大優先級越高。
id選擇器與類選擇器的區別:同一個頁面中一個標簽只能對應一個id但是可以選擇多個類,類也可以應用在多個標簽中。
給a標簽的href="javascript:;" 其中javascript:是偽協議,它可以讓我們通過一個鏈接來調用javascript函數.而采用這個方式 javascript:;可以實現A標簽的點擊事件運行時,如果頁面內容很多,有滾動條時,頁面不會亂跳,用戶體驗更好。相當于執行了一段javascript空代碼,地址不發生跳轉。與這個相同
去掉li前面的小點用list-style-type: none;
使li或span的外形變為圓形用border-radius: 50%; 添加圓角邊框。
textarea設置resize:none;可以防止用戶改變文本框大小。
想讓盒子根據里面內容多少改變大小將盒子height改成auto。
使按鈕或者表單不可用this.disable=true;
a&&b 如果a 為假 ,則返回 a ;如果a 為真 ,則返回 b 。
i. a||b 如果 a 為假 ,則返回b ;如果 a 為真 ,則返回a 。
img {vertical-align: top; } /取消圖片底部3像素距離/
一定要注意在javascript里修改style樣式時候賦值都要用“”以字符串形式賦值。
javascript修改style中的數值后都可以到行內數值樣式上看到。
使用webstorm新建javascript文件時候先把右下角的編碼格式改為utf-8否則后面運行會出錯。新建css文件也一樣。
如果在head里面引用javascript文件則需要考慮文件內函數是否在window.onload里面否則會產生因為網頁未加載完造成javascript出錯。
表單中的input可以直接通過name屬性獲取到DOM對象,form.控件name
創建字符串時若里帶有標簽的最好用單引號括起來避免和里面的雙引號沖突。
JS 頁面跳轉: window.location.href = ”http://www.itcast.cn”。
要獲取當前頁面寬度用document.documentElement.clientWidth。
獲取當前頁面相對滾動document.documentElement.scrollTop||document.body.scrollTop;
input的type改為search時可以將回車當確認鍵。
獲取屏幕觸摸用addEventListener(“touchstart”,function(event){})在函數中用event.touches[0].clientY;來獲取鼠標點擊的Y坐標用touchmove來獲取觸摸離開時鼠標最后所在的坐標。
使用var img=new Image(width,height );效果和cratelement的效果相同。用img.src添加圖片。
字符串轉換成JSON對象用全局的JSON函數 JSON.parse(string);
可以利用instanceof來判斷對象的構造函數。
若函數中加return就不能當做構造函數來看,構造函數return的是一個對象。
判斷數據類型時常用typeof和call,在使用 typeof 運算符時采用引用類型存儲值(NULL,數組,對象)會出現一個問題,無論引用的是什么類型的對象,它都返回 "object"。
console.log(toString.call({})) //[object Object]
console.log(toString.call([])) //[object Array]
用window.addListener(“hashchange”,function(e){})來監聽地址欄中#后的哈希值變化,利用window.location來得到地址對象。
解析一個地址先創建一個a對象var aLink=document.creatElement(“a”)
再給a標簽對象href賦值為地址字符串,之后既可通過aLink.hash得到地址哈希值
小技巧給一個數組不斷添加內容可以arr[arr.length]=…;來給數組不斷賦值。
從數組中刪除元素也可以splice(元素索引,刪除元素數目)。
for循環數組或對象時若用(index in arry)作為條件index表示當前元素索引。
可以使用外部鏈接的標簽img(支持跨域但無法獲取服務端數據)、iframe(可以接受數據單操作復雜)、link(在CSS處理階段會報錯)、script(可以獲取服務器數據,被選做jsonp傳送方式)。
為了使代碼易于維護采用開閉原則,對于后期會產生變化的量一定不能寫死,以后需要通過修改來迭代。
變化點封裝,一般都把今后會變化的地址類的寫在config函數里面,后面通過別名來使用。一定不要暴露在代碼中。
將一個對象利用“=”賦值給另一個對象時傳遞的是一個內存對象,若修改其中一個的屬性則都會發生改動,想要避免源對象被篡改可以利用object.assign()方法或者object.creat()方法。
js中函數對象是有長度的,它的長度是由參數的個數決定。(function (a, b, c, d) {}).length === 4。
想要正確處理上傳的文件,并接受到文件的內容,需要把表單的enctype屬性設置為multipart/form-data,這是個適用于于BLOB(大型二進制文件)的MIME類型。
想要將一個包含對象的數組以字符串的形式保存到文件中,需要循環遍歷數組并用JSON對象的.stringify方法將對象轉化為字符串形式,再進行保存。
寫靜態網頁可以使用gulp+browersync(yo webapp生成模板),編寫動態網站用express+ejs+sass.
Sass監聽文件夾:sass --watch sassFileDirectory:cssFileDirectory;
Sass監聽單個文件:sass --watch style.scss:style.css;
函數的柯里化(Currying)是把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數,并且返回接受余下的參數而且返回結果的新函數的技術。增加了函數的適用性,但同時也降低了函數的適用范圍。
惰性載入表示函數執行的分支只會在函數第一次掉用的時候執行,在第一次調用過程中,該函數會被覆蓋為另一個按照合適方式執行的函數,這樣任何對原函數的調用就不用再經過執行的分支了。如函數功能是對應不同瀏覽器創建XMLHttpRquest當第一次執行時判斷完瀏覽器類型并創建完成后及可以返回一個被修改過后的本函數,覆蓋原來的函數,這樣以后調用此函數時就不需要再判斷瀏覽器類型,可以直接創建對應XMLHttpRquest。
面向切面編程AOP主要實現的目的是針對業務處理過程中的切面進行提取,它所面對的是處理過程中的某個步驟或階段,以獲得邏輯過程中各部分之間低耦合性的隔離效果。比如最常見的就是日志記錄了.
String的search、match、replace參數都可以為正則表達式。
任何語言在浮點數運算時都會有誤差,浮點數運算的時候,先轉化為二進制,用二進制來算,結果再轉回十進制,轉換的過程中會裝換成無限循環小數,所以最后結果會有誤差。js中使用Number.prototype.toFixed()來設置保留小數的位數,返回的是字符串??梢允褂胿alueOf()來再轉為number類型。
數組的歸約函數reduce(function(prev,cur,i){})會從左到右進行迭代,每次返回的值作為下一次的prev參數。
在循環遍歷數組時若是想在找到結果后將結果在數組中剔除防止重復,因為若是直接刪除會影響數組的循環,解決辦法是將此值賦為NaN,這樣在數組中顯示時為null。使用delete刪除數值元素,刪除元素會產生空缺,不會更新length,空缺部分顯示undefined。如果沒按照數組順序給數組某一索引賦值,數組將不連續,中間空缺部分會顯示undefined。forEach()會忽略undefined。使用splice()函數可以移除元素而不產生空缺。若修改數組的length為某個值,數組在此索引之外的部分都會被刪除。使用array.filter(function(v){return true;})可以濾出空缺函數。
使用閉包要注意,由于變量被保存在內存中,所以會對內存造成消耗,所以不能濫用閉包。解決方法是 在退出函數之前,將不使用的局部變量全部刪除。
使用array.filter(function(val){})可以遍歷數組里的所有內容,return true的話數組會保留當前內容,false移除當前內容。
獲得所有傳入的參數放入一個數組args = Array.prototype.slice.call(arguments);
寫遞歸函數時要注意:無論是否滿足跳出遞歸的條件,下一步的執行都要帶上return,即在調用自身時前面一定要帶上return,滿足跳出條件時才能一步一步跳出循環。
var lefted,sliced = [];function chunkArrayInGroups(arr, size) {
面向對象
在構造函數中創建共有屬性通過this.創建,私有屬性通過var 創建。
使用delete collection.tracks,可以刪除collection的tracks屬性。
數據屬性有4個描述的行為特性,通過Object.defineProperty(obj,propKey,propDesc)設置。
writable 表示能否修改屬性的值。默認為false
Enumerable 表示能否過過for in循環返回屬性是否可以枚舉。默認為false可以枚舉
configuralbe 表示是否能過來delete刪除屬性從來重新定義屬性,能否修改其配置。默認為false。
value 包含這個屬性的數據值。讀取屬性值的時候,從這個位置讀取。
使用Object.keys(obj)可以得到obj對象的所有自有(非繼承)可枚舉的屬性鍵,屬性通常都是可枚舉的,Object.getOwnPropertyNames(obj)返回obj對象的所有屬性鍵。
枚舉的一般規則是,系統創建的屬性不可枚舉,用戶創建的屬性可枚舉。枚舉的主要目的是判斷for-in循環中的哪些屬性該忽略。對于自己的代碼,通??珊雎悦杜e屬性,且應該避免用for-in循環,屬性的枚舉特性默認為可枚舉。
保護對象的三種方式:
防止擴展:Object.preventExtensions(obj);設置對象不能添加屬性。
封閉:Object.seal(obj);可以改變屬性的值,但屬性的特性不能被改變。
凍結:Object.freeze(obj)使所有的屬性不可寫,且封閉obj不能擴展。
A instanceof B運算符可以用來判斷B構造函數的prototype屬性是否存在A對象的原型鏈上。等價于B.prototype.isPrototypeOf(A);
設置原型的另一種方法Object.creat(proto,propDescObj?);
獲取原型的另一種方法Object.getPropertypeOf(obj);
實現模塊化編程
// 計算模塊calc_v2015.js
到此,相信大家對“javascript小知識點有哪些”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。