js知識總結

2022-03-06 21:13:16 字數 2838 閱讀 9777

1.獲取螢幕可視的大小:

標準瀏覽器及ie9+ || 低版本瀏覽器ie8以下 || 低版本混雜模式

window.innerheight || document.documentelement.clientheight || document.body.clientheight

jquery : $(window).height()

2.獲取滾動條滾動的距離:

window.pageyoffset || document.documentelement.scrolltop || document.body.scrolltop

jquery: $(document).scrolltop()

3.獲取元素的尺寸:(左邊jquery方法 右邊原生方法)

$(o).width() = 0.style.width;

$(o).innerwidth() = o.style.width + o.style.padding;

$(o).outerwidth() = o.style.width + o.style.padding + o.style.border;

4.獲取元素的位置:(左邊jquery方法 右邊原生方法)

$(o).offset.top = getoffsettop();

var imgs = document.getelementbytagname("img");

function lazyload() }}

setinterval(lazyload,1000); //設定定時器來檢查是否進行滾動,然後處理在可視視窗範圍內的。

settimeout方法是乙個定時程式,運用在延遲一段時間,只執行一次

setinterval方法是表示在一定間隔內重複執行某個操作的程式

核心基本原理:做乙個div,寬高固定,設定overflow:hidden,

在該div裡面設定乙個ul,每個li裡面放著排列的,大小就是外層div的寬高

ul的寬度設定為所有大小的總和,這樣就不會換行,

然後,js裡面設定乙個定時器setinterval,每個幾秒不斷修改ul的margin-left,大小就是為一張的寬度

效果就是向左滑動了乙個,每次切換乙個,就將ul的第乙個li copy到ul的最後一位,並刪除掉第乙個li,這個時候,li已經在可視視窗的外面,使用者看不到,然後修改ul的margin-left為零。這樣就可以實現無縫首尾切換了

js**實現:

window.onload = function() , i);

}//執行完之後,將第乙個li放到最後去

settimeout(function() , time);

}, speed);

};for (var i = 0; i < len; i++)

}ul.style.width = it * 78 + "px";

scroller();

ul.onmouseover = function() ;

ul.onmouseout = function() ;

};

1.觸發事件不一樣,transition需要某個事件觸發(點選,滑鼠懸停等)。animation不需要事件去觸發,文件載入完成之後就可以執行動畫。

2.迴圈次數。transition只執行一次,而animation迴圈一次或者多次動畫

3.變化形態。transition是從0-100%乙個遞進的變化。而animation可以自定義任何乙個時間段內的變化狀態樣式。

4.結合js。transition可以很好的結合js來實現乙個簡單的動畫。

結論:1.如果要靈活定製多個幀以及迴圈,就用animation

2.如果只是簡單的form to效果,就用tranition

3.如果使用js靈活設定動畫屬性,用transition

cookie是**為了標識使用者身份而儲存在使用者本地終端上的資料(通常已經加密)

cookie資料始終在同源的http請求中攜帶(即使不需要),會在伺服器與瀏覽器之間來回傳遞。

localstorage 和 sessionstorage不會自動把資料發給服務端,僅在本地儲存。

儲存大小:

cookie的資料大小不能夠超過4k,比較小

localstorage 和 sessionstorage雖然也有儲存大小限制,但是比cookie大的多,可以達到5m

同源策略:要求網域名稱,協議,埠都要相同

1.jsonp

原理:通過動態建立script,通過script標籤引入乙個js檔案,當這個js檔案引入成功後就會執行url引數中指定的函式,並且會把我們需要的json資料作為引數傳入

function createjs(surl) 

createjs('jsonp.js');

// jsonp.js

box()

function box(json)

優點:相容性好,簡單易用,支援瀏覽器和伺服器的雙向通訊,

缺點:只是支援get請求

2.cors(跨源資源共享)

服務端對於cors的支援,主要是通過設定access-control-allow-origin

else if(this.device()=='ios')else if(this.device()=='android')

JS相關知識總結

首先把前兩天接觸到的關於靜態方法與構造器的理解貼上來 a.建構函式 只執行一次 而可以被呼叫多次 b.構造 塊 物件建立則執行構造 塊 而且優於建構函式執行。構造 塊是給所有物件進行統一初始化,而 建構函式是給對應的物件初始化,建構函式可以為多個,構造 塊中定義的是不同物件共性的初始化內容 c.靜態...

面試知識總結一 JS知識

vue的雙向繫結,data應該是乙個函式,返回資料,這個每個資料都是單獨的副本,不會相互影響。對於陣列值的改變和物件屬性的變化,不能直接檢測到變化,原因是vue使用的defineproperty來劫持資料更新,對這類變化無法檢測,需要使用vue.set方法進行更新。session伺服器端儲存使用者狀...

js基礎知識總結

作為梳理的目錄 移動端開發相關 框架和工具相關 vue資料繫結原理 vue父子元件和兄弟元件的通訊問題 vuex的原理 vuex的action和mutation的非同步操作和同步操作問題 vue的事件監聽 vue router獲取自定義引數 vue router的go相關 vue元件設計相關 模組化...