1. DOM基本概念
1.1 DOM
DOM Document Object Model 文檔對象模型
就是把HTML文檔模型化，當作對象來處理
DOM提供的一系列屬性和方法可以視作一個工具箱，極大地方便了我們對文檔的處理。
1.2 內容概念
文檔(Document)：就是指HTML或者XML文件
節點(Node)：HTML文檔中的所有內容都可以稱之為節點，常見的節點有
元素節點 屬性節點 文本節點 注釋節點
元素(Element)
HTML文檔中的標簽可以稱為元素
1.3 結構概念
父節點 當前節點的父級
子節點 當前節點的子級
兄弟節點 和當前節點同屬一個父級的節點
2. 獲取元素
getElementById("#id名"); /*該方法只能被document對象調用*/
getElementsByTagName("div"); /*通過標簽名尋找一類元素（找到的是由元素對象組成的偽數組） 即可以被document調用，又可以被元素對象調用，被元素對象調用時表示在該元素對象內部執行查找 */
getElementsByClassName("div");
getElementByName();
nextElementSibling;
3. 設置屬性
元素對象.屬性名 = “屬性值”;
<標簽 屬性名=”屬性值”>
4. 綁定事件
事件三要素 事件源.事件 = function(){ 事件處理程序 };
等價於 <標簽 事件=”事件處理程序”>
和對象方法一樣，this指的還是調用該方法的對象
5. 禁止a標簽的默認行為
onclick="return false;"
6. 常用屬性
6.1 常用標簽屬性
DOM對象的屬性和HTML的標簽屬性幾乎是一致的，常用的有src、title、className、href和style
其中className對應就是標簽的class屬性，但是由於class在JS中是關鍵字，所以變成了className
6.2 內部文本屬性
innerHTML 獲取和設置標簽中的內容，設置的內容會當作節點對象被解析到DOM樹上
innerText 獲取和設置標簽中的內容，設置的內容會被當作普通文本（有兼容性問題，舊版ff不支持，舊版本的IE支持）
textContent 獲取和設置標簽中的內容，設置的內容會被當作普通文本（有兼容性問題，舊版IE不支持，舊版本FF支持）
獲取內部文本的方法封裝
1 function getInnerText(element) { 2 if (typeof element.innerText === "string") { 3 return element.innerText; 4 } else { 5 return element.textContent; 6 } 7 } 8 function setInnerText(element, content) { 9 if (typeof element.innerText === "string") { 10 element.innerText = content; 11 } else { 12 element.textContent = content; 13 } 14 }
6.3 常用的表單屬性
常見的表單元素屬性有：
type、value、checked、selected、disabled
type可以設置input元素的類型
value可以設置input元素的值
checked可以設置input元素是否選中
selected 可以設置下拉列表select中的option是否被選中
disabled 可以設置input元素是否被禁用
文本框獲取焦點和失去焦點
獲取焦點事件是onfocus 失去焦點事件是onblur (不是所有的標簽都有這個事件)
6.4 自定義屬性
對象的自定義屬性
可以像給對象設置屬性一樣，給元素對象設置屬性
標簽的自定義屬性
可以通過getAttribute()和setAttribute()設置和獲取標簽屬性，通過removeAttribute()移除標簽的屬性
正常瀏覽器中 HTML中有規定的屬性 兩種方式才可以相互設置和獲取
總之用setAttribute設置的就用getAttribute獲取 用對象的自定義屬性設置的就用對象的自定義屬性獲取 以免出問題
6.6 獲取焦點和失去焦點事件
onfocus();
onblur();
6.7 排他思想
7. 節點
7.1 節點類型node.nodeType
1表示元素節點 2表示屬性節點 3表示文本節點 8表示注釋節點
/*所有獲取節點相關屬性都沒有兼容性問題*/
7.2 節點層次
childNodes //子節點
children //子元素 雖然不是早期DOM標准中的方法，但是所有瀏覽器都支持
nextSibling //下一個兄弟節點
nextElementSibling //下一個兄弟元素 有兼容性問題
previousSibling//上一個兄弟節點
previousElementSibling //上一個兄弟元素 有兼容性問題
firstChild //第一個節點
firstElementChild //第一個子元素 有兼容性問題
lastChild //最后一個子節點
lastElementChild //最后一個子元素 有兼容性問題
parentNode //父節點 （一定是元素節點，所以無需處理）
8. 樣式屬性
style屬性是對象，style對象的屬性是字符串
style只能獲取和設置行內樣式
DOM對象中style的屬性和標簽中style內的值幾乎一樣
只是帶有 - 的屬性名較為特殊（如background-color變成了backgroundColor），因為在JS中 - 不能作為標識符
widh; height; padding; margin; display;
8.1 設置和獲取樣式
通過對象的style屬性只能設置和獲取行內樣式
獲取樣式的時候 如果行內沒有該樣式 輸出空字符串
設置樣式的時候 賦的值是一個字符串 如果這個屬性有單位 一定要節點加單位
8.2 什么情況通過class控制樣式 什么情況通過style控制樣式
不嚴格的說：
//如果樣式很多 通過 直接控制類名 的方式加樣式
//如果樣式比較少 通過直接設置比較方便
嚴格來說：
//從標准的角度講 即使是樣式比較少的時候 設置樣式也要用類名
//但是有一類情況 是無論如何也必須直接通過JS加的 那就是涉及到計算的時候
9. 動態創建表結構s
9.1. 插入和移除節點
在父元素中的最后追加子元素
father.appendChild(要追加的元素);
在父元素中的某個子元素前面插入子元素
father.insertBefore(要插入的元素,插到這個元素的前面);
從父元素中移除子元素
father.removeChild(要移除的子元素);
9.2. 動態創建結構
方式一：直接在文檔中書寫
document.write(“內容”)
方式二：改變元素對象內部的HTML
innerHTML=”內容”
方式三：創建或克隆節點並追加
createElement();
cloneNode();
通過這兩種方法創建出來的元素只是保存在內存中，必須放到頁面上才行!
9.3. 動態創建結構（效率問題）
把字符串變為文檔對象
把當前對象掛接到DOM樹上
渲染引擎根據新的DOM樹重新渲染
10. js加強
10.1 函數的兩種定義方式
10.2 變量的作用域
10.3 沒有塊級作用域
10.4 作用域鏈
10.5 先找var 在找function
10.6 遞歸
能不用遞歸盡量不用遞歸 遞歸非常消耗資源
我們一般用遞歸的情況也不多 但是回調就很常用了
10.7 函數也是一種數據
console.log(fn6.name);//函數名
console.log(fn6.length);//形參個數
console.log(fn6.arguments);//實參列表
JS沒有重載
但是通過arguments可以模擬重載
1 function getMax(a, b, c) { 2 if (getMax.arguments.length === 2) { 3 return a > b ? a : b; 4 } 5 if (getMax.arguments.length === 3) { 6 return (a > b ? a : b) > c ? (a > b ? a : b) : c; 7 } 8 }
10.8 回調
10.9 sort原理
1 function sort(arr, fn) { 2 for (var i = 0; i < arr.length - 1; i++) { 3 var flag = true; 4 for (var j = 0; j < arr.length - 1 - i; j++) { 5 if (fn(arr[j], arr[j + 1]) > 0) { 6 var temp = arr[j]; 7 arr[j] = arr[j + 1]; 8 arr[j + 1] = temp; 9 flag = false; 10 } 11 } 12 if (flag) { 13 break; 14 } 15 } 16 return arr; 17 }
10.10 判斷數據類型
typeof 變量 //判斷這個變量是什么數據類型的
instanceof----作用:判斷這個對象是不是這個類型的-----返回值
10.11 對象的第三種創建方式
1.開辟空間,存儲新創建的對象
2.把this設置為當前的對象
3.設置該構造函數中的屬性和方法的值
4.返回當前創建好的對象
1 function Student(name,sex,age) {//name就是名字,//sex--性別,age---年齡 2 //設置屬性和方法的值,不需要new Object();不需要返回值 3 //對象直接用this 4 //this.name是對象的屬性,后面的name是用戶傳的參數 5 this.name=name;//名字 6 this.age=age; 7 this.sex=sex; 8 this.sayHi=function () { 9 console.log("阿涅哈斯誒呦!"); 10 console.log("我的名字:"+this.name+"性別"+this.sex+"年齡"+this.age); 11 }; 12 } 13 //創建對象 14 var stu=new Student("小明","男",18); 15 stu.sayHi();
10.12 json數據格式
JSON格式的數據都是鍵值對,這些鍵值對,鍵---是字符串,值----字符串
遍歷
for循環遍歷的是有一定長度的數據（數組）
for-in循環---主要遍歷的就是對象---鍵值對 （對象）
10.13 基本包裝類、值類型、引用類型
基本類型---值類型---String Undefined Number Boolean Null
復雜類型---引用類型--Object 數組--Array,Date.....
基本類型的值存儲在----棧中
復雜類型的地址(引用)存儲在棧中,---地址指向的空間中的對象(對象)---存儲在堆中
創建對象並返回對象---返回的是對象的地址(對象在堆空間中的地址)
基本類型傳值的時候，傳遞的是 值
復雜類型(引用類型)傳遞的時候,傳遞的是:地址(引用)
10.14 數組方法
1 isArray();這個方法是判斷變量是不是數組 2 toString();這個方法是轉字符串類型 3 join();這個方法可以把數組中每個元素按照分隔符的方式轉換成字符串返回 4 push();追加元素的 5 pop();//刪除數組中最后一個元素,返回值是被刪除的這個元素 6 shift();這個方法刪除數組中的第一個元素,返回值就是被刪除的元素 7 unshift();這個方法向數組中第一個元素之前插入一個新的元素(或者是插入多個元素),返回值是數組的新的長度 8 find();在某個數組中查找滿足條件的元素,找到則返回該元素，找不到則返回undfined 9 concat();//新的數組和舊的數組拼接,產生一個新的數組 10 slice();可以從原來的數組中截取出來指定的一部分元素，產生新的數組 11 splice();第一個參數是開始的下標,第二個參數是要替換的個數；可以有第三個參數，第四個參數.......；該方法返回的是一個數組,如果沒有替換則返回空數組. 12 indexOf();ES5,查找某個元素，第一個參數是要查找的元素,第二個參數是開始查找的下標,找到了則返回該元素的索引，找不到則返回-1 13 lastIndexOf();ES5,這個方法也是查找元素,從后面向前面找,找到則返回對應的下標,找不到則返回-1,序號規則是按照數組中的元素的序號順序進行返回 14 >>>>>下面幾種方法，ES5，都是在遍歷數組中的每一個元素，並且利用回調函數處理數組中的每一個元素，所有的回調函數都是采用（數據項，序號）的方式調用 15 arr.every(fn(v,i){});ES5,傳入一個函數,判斷每個數組中的元素是否滿足條件,如果都滿足在回調函數中則返回true，有一個不滿足條件的則返回false。 16 arr.some(fn(v,i){});ES5, 傳入一個函數,判斷每個數組中的元素是否滿足條件,如果都不滿足在回調函數中則返回false，有一個滿足條件的則返回ture。 17 arr.map(fn(v,i){});ES5,map這個方法可以傳入一個回調函數。比如直接傳入了一個Math.sqrt方法,sqrt方法是為某個數字開平方的,調用map方法傳入Math.sqrt的時候,去掉了括號,也沒有傳入參數(map方法內部幫我們遍歷並且傳入數組的每個元素) 18 arr.filter(fn(v,i){}); ES5，變量數組中每一個元素，並且按照某個要求去判斷該元素是否符合要求，如果符合，那么回調函數返回true，如果不滿足，回調函數返回false，該方法會將返回true的元素組織起來構成一個新的數組。全為false返回空數組 19 arr.ForEach(function(v,i){}); ES5，單純的循環操作。沒有返回值，也沒有跳出，這樣的循環就是迭代。
10.15 js中的內置對象
ES:Number, Boolean, String, Math, Array, Date, Error, RegExp, Object, Function---系統自帶的就是內置對象
BOM: window, document, history, location...
DOM: html, body, div, ...
10.15.1 js中的內置對象Date();
var dt=new Date();//顯示的是星期，月份，年份，小時，分鍾，秒
var dt=Date.now();//毫秒---為了進行計算
var dt=+new Date();//毫秒
兩種格式的日期轉換
console.log(dt.valueOf());//顯示的是毫秒
var dt=new Date(1471769122820); //顯示年份等
10.15.2 js中的內置對象Math();
1 console.log(Math.max(1,2,3,4,5));//這些數字中的最大值 2 console.log(Math.min(1,2,3,4,5));//返回多個數中的最小值 3 console.log(Math.floor(45.84334));//向下取整 4 console.log(Math.ceil(5.4443));//向上取整 5 console.log(Math.round(67.55));//四舍五入 console.log(Math.random());//隨機數0-1 6 console.log(parseInt(Math.random()*10+1)); //隨機數1-10 7 console.log(parseInt(Math.random()*100+1)); //隨機數1-100 8 console.log(Math.abs(-100));//返回絕對值 9 console.log(Math.pow(4,3)); //4的3次冪 10 console.log(Math.sqrt(16)); //開平方 11 console.log(Math.sin(4));//返回正弦值
10.16 基本包裝類
1.基本類型不能直接調用屬性和方法
2.對象可以直接調用屬性和方法
10.16.1 字符串
屬性:length,獲取字符串的長度
方法:
charAt(下標);獲取該下標位置的字符串
charCodeAt(下標);獲取對應下標字符串的ASCII的碼值
concat(字符串);拼接字符串的
slice(開始下標,結束下標);截取一段字符串的
substring(開始的下標,結束的下標);截取指定部分的字符串
substr(開始的下標，截取的個數);截取指定長度的字符串
toLocaleUpperCase 字符串轉大寫
toLocaleLowerCase 字符串轉小寫
indexOf 查找指定的字符串，找到則返回下標，找不到返回-1
lastIndexOf 從后面向前面找指定的字符串，找不到也是返回的是-1
trim 切掉字符串前面和后面的空格
split 切割指定的字符串的，返回的是一個數組
replace 替換指定的字符串，返回的是一個新的字符串
11. BOM 瀏覽器對象模型
DOM:中的頂級對象是document----太監(大總管)
BOM:中的頂級對象是window------皇上
整個瀏覽器就是window,頁面中的document也屬於window
變量,函數,對象都屬於window
但是:寫代碼的時候,window可以直接省略
11.1 彈出對話框
1 if(window.confirm("你確定要退出嗎?")){ 2 //執行到這里,證明用戶點擊了確定按鈕 3 console.log("點擊了確定"); 4 }else{ 5 //證明了用戶點擊了取消的按鈕 6 console.log("點擊了取消"); 7 } 8 window.prompt("請輸入用戶名");
11.2 一個很重要的屬性 location.href
location.href是一個屬性.可以跳轉到指定的頁面
11.3 BOM的一些方法
1 win=window.open("09test.html","_blank","width=200,height=200,top=100,left=100,resizable=no"); 2 win.close();//此時close方法 無論open中第一個參數是不是地址都可以關閉窗口 3 win.moveTo(300,300);//把新打開的窗口移動到距離左側和上面300px 4 win.moveBy(20,20);//每次移動20px 5 win.resizeTo(400,400);//窗口的大小發生了改變 6 win.resizeBy(40,40);
11.4 計時器
setInterval 計時器,該計時器返回來的是該計時器的id
參數:
1.---要執行的函數
2.---時間:1000毫秒----
返回值:是當前這個計時器的id
clearInterval 銷毀計時器的,需要的參數就是計時器的id
setTimeout(function () {alert("啊!....."); },1000);
clearTimeout(timeId);
11.5 location對象
1 console.log(window.location.hash);//獲取地址欄中有#后面的內容 2 console.log(window.location.host); 3 console.log(window.location.hostname); 4 console.log(window.location.pathname); 5 console.log(window.location.port); 6 console.log(window.location.protocol); 7 console.log(window.location.search); 8 location.href="";-------屬性 9 location.assign("http://www.baidu.com");//---方法 10 location.replace("http://www.baidu.com");//---方法----地址不會記錄到歷時中----后退點不了 11 location.reload();//刷新的---一般情況在頁面中誰不會來一個按鈕點一下刷新
11.6 navigator對象
console.log(window.navigator.userAgent);
console.log(window.navigator.platform);
11.7 history對象
window.history.forward();
window.history.back();//后退
12. js特效
12.0 事件
1 document.getElementById("txt").onkeydown=function (e) { console.log(e.keyCode); }; 2 window.onresize=function () { 3 if (document.body.clientWidth>960) { 4 console.log("您用的是電腦瀏覽的該頁面"); 5 }else if(document.body.clientWidth>500){ 6 console.log("您用的是平板瀏覽的該頁面"); 7 }else{ 8 console.log("您用的是手機瀏覽的頁面"); 9 } 10 } 11 }; // 判斷瀏覽器窗口大小 12 document.onclick=function (e) { 13 document.title = e.screenX+"==="+e.screenY; //screenX和screenY是相對於屏幕的左上角 14 console.log(e); 15 }; 16 screenX和screenY是相對於屏幕左上角的坐標 17 e.button是鼠標左右鍵和滾輪的值 18 e.keyCode 是獲取用戶按下的是哪一個鍵盤中的鍵 19 e.shiftKey 判斷用戶是否按下了shift鍵 20 this是當前觸發事件的對象 21 target是事件源對象-----源頭---IE8中不支持 22 window.event.srcElement是事件源對象----源頭---谷歌支持
12.1 獲取圖片寬高
window.onload = function(){var imgWidth = img.width;}; // 等頁面加載之后獲取
1---如果希望頁面加載后就執行做一些事件:比如直接獲取圖片的寬度或者高度,那么可以把代碼直接寫入到onload中
2----onload事件到底是什么時候執行:頁面中的所有的文字，標簽，圖片，全部加載后才執行
12.2 獲取圖片寬高
window.onbeforeunload=function () { alert("您確定要關閉當前頁面嗎?"); };
window.onunload=function () {alert("頁面已經關閉了"); };
12.3 圖片跟着鼠標飛
1 document.onmousemove=function (e) { 2 e=e||window.event; // 兼容代碼 3 document.title=e.clientX+"==="+e.clientY; // clientX和clientY----事件參數獲取 4 imgObj.style.position="absolute"; 5 imgObj.style.left=e.clientX+"px"; 6 imgObj.style.top=e.clientY+"px"; 7 imgObj.style.left=e.pageX+"px";//pageX--包含可視區域的橫坐標和隱藏區域 8 imgObj.style.top=e.pageY+"px";//pageY---包含可視區域的縱坐標和隱藏區域 9 }； 10 注意： 11 1.如何獲取某個事件處理的函數中的參數:arguments.length 12 arguments---是一個對象,可以看成是一個數組 13 2.獲取可視區域的橫縱坐標: 14 > 事件參數.clientX和事件參數.clientY 15 > 事件參數:就是某個事件處理的函數中傳入的參數: 16 > 事件參數可以使用arguments[0]來代替 17 IE8中事件處理的函數中沒有參數,如何在IE8瀏覽器中用到這個事件參數? 18 答:window.event 19 解決事件參數兼容問題: 20 e=e?e:window.event;或者e=e||window.event; 21 > 圖片能夠跟着鼠標移動是設置了圖片的left和top分別等於clientX和clientY 22 clientX和clientY是獲取的可視區域的橫縱坐標 23 > 如果頁面有滾動條了,此時卷出去的區域應該用pageX和pageY 24 > e.type來獲取事件的類型(沒有on)
12.4 模擬多人開發注冊事件
1 function addEvent(element,eventName,fn) { 2 var oldEvent=element["on"+eventName]; 3 if(oldEvent==null){//表示該事件沒有處理函數 4 element["on"+eventName]=fn;//注冊事件了 5 }else{ 6 //有事件了---先調用原來的事件,再重新注冊新的事件 7 element["on"+eventName]=function () { 8 //調用原來的事件-注冊新的事件 9 oldEvent(); 10 fn(); 11 }; 12 } 13 }
12.5 注冊多個事件（重要）
三種注冊事件的方式:
1 對象.on事件名字=事件處理函數;
2 對象.addEventListener("事件的名字",事件處理函數,false);
3 對象.attachEvent("on事件的名字",事件處理函數);
注冊事件方式的區別:
1.btnObj.onclick=fn;這種方式任何瀏覽器都支持
2.btnObj.addEventListener();谷歌和火狐瀏覽器支持
3.btnObj.attachEvent();IE8支持
同一個元素同時注冊多個相同的事件，addEventListener和attachEvent區別:
前者三個參數,后者兩個參數
前者第一個參數是事件的名字，沒有on
后者第一個參數是事件的名字,有on
addEventListener方法中第三個參數如果是false則是事件冒泡,如果是true則是事件捕獲
12.6 移除事件
注冊事件有三種方式:
移除事件有三種方式:
1. 對象.on事件的名字=null
舉例子: btnObj.onclick=null;
2. 對象.removeEventListener("事件的類型",該事件對應的處理函數的名字,false);
舉例子: btnObj.removeEventListener("click",f1,false);
3. 對象.detachEvent("on事件的類型",改時間對應的處理函數的名字);
舉例子: btnObj.detachEvent("onclick",f1);
12.7 為任意的一個元素注冊任意的事件的兼容函數和移除事件
1 var eventArg = { 2 myAddEventListener: function (element, eventName, fn) { 3 //判斷注冊事件的方法是否存在----當前瀏覽器是否支持這種寫法 4 if (element.addEventListener) {//谷歌和火狐 5 element.addEventListener(eventName, fn, false); 6 } else if (element.attachEvent) {//IE8 7 element.attachEvent("on" + eventName, fn); 8 } else { 9 element["on" + eventName] = fn; 10 } 11 }, 12 myRemoveEventListener: function (element, eventName, fn) { 13 if (element.removeEventListener) {//谷歌和火狐 14 element.removeEventListener(eventName, fn, false); 15 } else if (element.detachEvent) {//IE8 16 element.detachEvent("on" + eventName, fn); 17 } else {//所有瀏覽器都支持 18 element["on" + eventName] = null; 19 } 20 } 21 };
12.8 this
如果通過addEventListener注冊事件,該事件中的this就是當前的觸發事件的對象
如果是按鈕注冊點擊事件,點擊的時候this就是按鈕對象
如果通過attachEvent注冊事件,該事件中的this是window對象====IE8中
12.9 事件冒泡
12.9.1 事件冒泡解析
事件冒泡:
有一個元素A,在A元素內又有一個元素B,此時A和B都注冊了相同的事件，如果B的事件被觸發了,那么此時A元素對應的事件也會被觸發。
12.9.2 事件冒泡階段
捕獲階段-------1
目標階段-------2
冒泡階段-------3
12.9.3 事件冒泡階段判斷
通過事件參數--e.eventPhase 可以獲取當前事件經歷的是什么階段
如果是1則是捕獲階段
如果是2則是目標階段:第一次點誰誰就是目標
目標階段之后就是冒泡階段
以上是結合第三個參數是false的情況而言
另一種情況:第三個參數是true的時候,只有捕獲階段和目標階段
先捕獲,然后再目標
一般網頁中都是有事件冒泡的,一般情況我們不用捕獲
12.9.4 阻止事件冒泡
兩種方式:
第一種:方法 e.stopPropagation();
第二種:屬性 window.event.cancelBubble=true;
13. 高清放大鏡
1 small.onmousemove=function (e) { 2 var w=e.pageX-mask.offsetWidth/2; 3 var h=e.pageY-mask.offsetHeight/2; 4 var x=w-100; 5 var y=h-100; 6 x=x<0?0:x; 7 y=y<0?0:y; 8 x=x>this.offsetWidth-mask.offsetWidth?this.offsetWidth-mask.offsetWidth:x; 9 y=y>this.offsetHeight-mask.offsetHeight?this.offsetHeight-mask.offsetHeight:y; 10 mask.style.left=x+"px"; 11 mask.style.top=y+"px"; 12 //按比例移動圖片;遮擋層移動的距離/圖片的移動距離=遮擋層最大移動距離/圖片的最大移動距離--->圖片移動的距離=遮擋層移動的距離*圖片的最大移動距離/遮擋層最大移動距離 13 var maxMaskMove=this.offsetWidth-mask.offsetWidth;//遮擋層移動最大距離 14 var maxImgMove=img.offsetWidth-big.offsetWidth;//圖片移動最大距離 15 var imgMoveLeft=x*maxImgMove/maxMaskMove; 16 var imgMoveTop=y*maxImgMove/maxMaskMove; 17 //設置圖片的移動 18 img.style.marginLeft=-imgMoveLeft+"px"; 19 img.style.marginTop=-imgMoveTop+"px"; 20 };
13.1 隱藏的問題
在style標簽中設置寬 高 left top通過style.屬性都是獲取不到
在style屬性中設置寬 高 left top通過style.屬性都是可以獲取到的
console.log(document.getElementById("dv").style.left);
console.log(document.getElementById("dv").);
如何獲取
console.log(document.getElementById("dv").offsetLeft);
console.log(document.getElementById("dv").offsetTop);
涉及內容
offsetHeight; offsetWidth;
e.pageX; e.pageY;
名稱.style.left;
14. offset的內容
總結:
1. 如果在行內樣式設置元素的寬和高，那么dvObj1.style.width可以獲取寬和高
2. 如果在style標簽中設置元素的寬和高,那么dvObj1.style.width不能獲取元素的寬和高
3. 如果元素的樣式是在style標簽中設置的寬和高,如果想要獲取,用offsetWidth或者是offsetHeight,這里是包括邊框的寬度
4. offsetWidth獲取到的是數字類型,沒有px,只讀的(只能獲取)
5. style.width獲取到的是字符串類型,有px,可讀可寫(可以獲取也可以設置)
6. 以后在頁面中獲取元素的寬和高....用offsetWidth或者offsetHeight
7. 如果是設置呢:divObj.style.width
8. 如果想要獲取頁面中的元素距離左側和上面的像素，用的是offsetLeft和offsetTop
9. offsetLeft：父級元素的border的寬度+父級元素的margin-left；還要有自身的margin-left,還要有父級元素的padding-left
10. 如果父級元素脫離了文檔流,此時,當前的這個元素的offsetLeft沒有了父級元素的border的寬度了
11. 如果自身脫離了文檔流,自身的offsetLeft就是自身的border左邊到body的左邊的像素
12. 如果自身和父級元素同時脫離了文檔流,此時的offsetLeft是父級元素border右邊到自身的border的左邊
13. 如果自身和父級元素同時脫離了文檔流,此時的offsetLeft是父級元素border右邊到自身的border的左邊，如果在自身的style屬性中設置了margin-left,也要加上
15. scroll的內容
scrollHeight:文本內容的高度
scrollWidth:文本內容的寬度
width和height和scrollHeight及scrollWidth沒關系的(沒有內容一致)
scrollTop:豎着的滾動條拉動后,文本出去的高度
scrollLeft:橫着的滾動條拉動后,文本出去的內容
1 function scroll() { 2 return { 3 left : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0, 4 top : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 5 }; 6 }
16. 獲取頁面中的幾個特殊元素
1 console.log(document.title);//獲取title標簽中的字符串內容 2 console.log(document.body);//body對象 3 console.log(document.html);//undefined------獲取不到 4 console.log(document.documentElement);//獲取html標簽對象 5 pageY---pageX 6 e.pageY=(document.body||document.documentElement).scrollTop+e.clientY 7 document.onclick=function (e) { 8 console.log(e.clientY); 9 console.log(e.pageY); 10 console.log(window.event.clientY); 11 console.log(window.event.pageY);//ie8中沒有值 12 document.documentElement.scrollTop; //在谷歌歌瀏覽器不支持,IE8中支持 13 document.body.scrollTop; //在谷歌中支持,IE8中不支持 14 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 15 };
17. 動畫函數封裝（js）
1 //根據id獲取對應的元素 2 function my$(id) { 3 return document.getElementById(id); 4 } 5 /* 6 * element---任意的元素 7 * attr---屬性 8 * */ 9 function getAttrValue(element,attr) { 10 return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0; 11 } 12 /* 13 * element----要移動的元素 14 * target----移動的目標 15 * 初級版本 16 * */ 17 function animate1(element,target) { 18 clearInterval(element.timeId); 19 element.timeId=setInterval(function () { 20 //獲取當前的位置 21 var current=element.offsetLeft; 22 //每次移動多少步 23 var step=(target-current)/10;//(目標-當前)/10 24 step=step>0?Math.ceil(step):Math.floor(step); 25 current=current+step; 26 element.style.left=current+"px"; 27 if(current==target){ 28 clearInterval(element.timeId); 29 } 30 console.log("target:"+target+"current:"+current+"step:"+step); 31 },10); 32 } 33 /* 34 * 終版動畫函數 35 * */ 36 function animate(element,json,fn) { 37 clearInterval(element.timeId); 38 element.timeId=setInterval(function () { 39 var flag=true;//假設都達到了目標 40 for(var attr in json){ 41 if(attr=="opacity"){//判斷屬性是不是opacity 42 var current= getAttrValue(element,attr)*100; 43 //每次移動多少步 44 var target=json[attr]*100;//直接賦值給一個變量,后面的代碼都不用改 45 var step=(target-current)/10;//(目標-當前)/10 46 step=step>0?Math.ceil(step):Math.floor(step); 47 current=current+step; 48 element.style[attr]=current/100; 49 }else if(attr=="zIndex"){//判斷屬性是不是zIndex 50 element.style[attr]=json[attr]; 51 }else{//普通的屬性 52 //獲取當前的位置----getAttrValue(element,attr)獲取的是字符串類型 53 var current= parseInt(getAttrValue(element,attr))||0; 54 //每次移動多少步 55 var target=json[attr];//直接賦值給一個變量,后面的代碼都不用改 56 var step=(target-current)/10;//(目標-當前)/10 57 step=step>0?Math.ceil(step):Math.floor(step); 58 current=current+step; 59 element.style[attr]=current+"px"; 60 } 61 if(current!=target){ 62 flag=false;//如果沒到目標結果就為false 63 } 64 } 65 if(flag){//結果為true 66 clearInterval(element.timeId); 67 if(fn){//如果用戶傳入了回調的函數 68 fn(); //就直接的調用, 69 } 70 } 71 console.log("target:"+target+"current:"+current+"step:"+step); 72 },10); 73 }
總結三大系列
clientX clientY clientWidth clientHeight
pageX pageY pageWidth pageHeight
offsetLeft offsetTop offsetWidth offsetHeight
18. 正則表達式
18.1 正則表達式中的基本元字符
. 通配符（. 除了\n以外的任意一個內容）
[]表示的是范圍:表示的是范圍中的任意一個
[0-9]表示的是:0到9之間(包含)任意一個數字
[a-z]表示所有的小寫字母中的一個
[A-Z]表示的是所有的大寫字母中的任意一個
[a-zA-Z]表示的是所有的字母中的任意一個
[9]表示的就是9
[o]o
[0-9a-zA-Z]表示的是任意的一個數字或者任意的一個字母
()表示的是分組(為了更明確這個正則表達式的意思),提升優先級,組號從左往右數圓括號
| 表示的是或者的意思
[0-9]|[a-z] 0-9之間的任意一個數字或者是小寫字母中的任意一個字母
* 表示的是該符號前面的表達式出現了0次到多次
+ 表示的是該符號前面的表達式出現了1次到多次
? 表示的是該符號前面的表達式出現了0次到一次
{} 表示的是前面的表達式出現了多少次,具體是多少次:大括號中的寫法
18.2 數字 字母 特殊符號
\d 表示的是任意的一個數字和[0-9]一樣
\D 表示的是非數字
\s 空白符號
\S 非空白符號
\w 非特殊符號
\W 特殊符號
18.3 之前的元字符 都是不嚴格的匹配字符串
^:1.以什么內容開頭,必須以什么開始
2.取反
用法:
^[0-9] 必須以數字開頭
^[a-z0-9] 必須以數字或者以小寫字母開始
^[0-9a-zA-Z] 必須以數字或者是字母開頭
^\d 必須以數字開頭
[^0-9]取反 字母或者特殊符號
[^0-9a-zA-Z] 特殊符號
$ :必須以什么內容結尾
[0-9]$ "hsgd7y273d9"
[a-zA-Z]$
^[0-9a-z][a-z]$
18.4 在js中正則表達式的寫法:/正則表達式/
創建正則表達式對象的方式:
1. var reg=new RegExp(/正則表達式/
2. var reg=/正則表達式/; reg.test("hello998");
3. /正則表達式/.方法名(參數);
18.5 字符串中方法的使用
str=str.replace(/帥/g,"呆"); //g表示的是全局 //i 表示的是小寫的
str=str.replace(/^\s+|\s+$/g,"");
while((index=reg.exec(str))!=null){console.log(index.index); } // 如果結果為null沒有匹配的
如果匹配到了數據，那么返回值是數據，如果沒有匹配到，返回null
var result=str.match(/帥/g); // match根據正則表達式匹配字符串中的內容,如果沒有g,匹配的是第一個,如果有g匹配的是全局的