1、查找HTML元素javascript
一般,經過 JavaScript,您須要操做 HTML 元素。html
一、經過 id 找到 HTML 元素前端
二、經過標籤名找到 HTML 元素java
三、經過類名找到 HTML 元素node
提示:經過類名查找 HTML 元素在 IE 5,6,7,8 中無效。web
var x=document.getElementById("intro"); var y=document.getElementsByTagName("p");
①、改變 HTML 元素的內容 (innerHTML)ajax
document.getElementById(id).innerHTML=new HTML
②、改變 HTML 屬性chrome
document.getElementById(id).attribute=new value document.getElementById("image").src="landscape.jpg";
③、改變 HTML 樣式編程
document.getElementById(id).style.property=new style <script> document.getElementById("p2").style.color="blue"; </script>
④、添加或刪除 HTML 元素json
2、DOM 事件
一、Js中的事件
行爲,結構,樣式分離的頁面
通常事件 onclick 鼠標點擊時觸發此事件
ondblclick 鼠標雙擊時觸發此事件
onmousedown 按下鼠標時觸發此事件
onmouseup 鼠標按下後鬆開鼠標時觸發此事件
onmouseover 當鼠標移動到某對象範圍的上方時觸發此事件
onmousemove 鼠標移動時觸發此事件
onmouseout 當鼠標離開某對象範圍時觸發此事件
onkeypress 當鍵盤上的某個鍵被按下而且釋放時觸發此事件.
onkeydown 當鍵盤上某個按鍵被按下時觸發此事件
onkeyup 當鍵盤上某個按鍵被按放開時觸發此事件
①、綁定事件的3種方式
1: 直接寫在html標籤內聲明
<div id="school" onclick="t();">
這種寫法最古老,兼容性最強.屬於DOM的lev0級的標準.這個效果,等同於在點擊div的時候,執行"t();"這一語句,
在全局範圍內執行,所以,t函數內部的this指代全局對象-->window 想操做被點擊的DOM對象,用this就不行了.
第2種綁定方式:
DOM對象.onclick = function () {}
這種綁定是把一個DOM對象onclick屬性賦值爲一個函數,
所以,函數內部的this直接指向該DOM對象.
在這種綁定方式中,只能給一個事件,綁定一個處理函數
即 .onclick = fn1; .onclick = fn2;
最終的效果, 是.onclick = fn2;
若是用函數來調用其餘函數的形式
例.onclick = function () {fn1(),fn2()}
那麼此時, fn1,fn2中的this又指向window.
如何綁定多個函數, 並令this指向DOM對象
第三種綁定事件的方法:
DOM lev3的事件綁定標準
添加和去除監聽事件.
addEventListener('事件',函數); // 第一個參數事件參數, 沒有前綴"on", w3c的標準,IE不支持
注意點1: 若是添加了多個事件處理函數, 按"添加時的前後順序來執行"
注意佔2: 事件處理函數中的this 指代 DOM節點自身 (w3c標準)
注意點3: 第一個事件參數,一概把事件名稱的'on'去掉 (w3c標準)
去除綁定
removeEventListener('事件',函數)
IE下綁定事件與解除事件的方法
attachEvent('事件',函數) // 注意: 事件 要加on
detachEvent('事件',函數) // 事件依然要加on
總結一下:
W3c addEventListener 與IE的attachEvent()的不一樣
1: 函數名不一樣
2: 事件名不一樣, IE下要加on,w3c不加on
3: 加事件後的執行順序不一樣, w3c按綁定事件的順序來執行, 而IE6,7,8,是後綁定的事件先發生.
4: this的指向, w3c中,綁定函數中的this指向 DOM對象, 而IE6,7,8中,指向window對象
3、事件的捕捉與冒泡模型
在w3c的模型中,
addEventListener 支持 第3個參數來聲明事件的模型爲冒泡仍是捕捉.
若是聲明爲 true,則爲捕捉方式
若是聲明爲false, 或者不聲明, 則爲冒泡方式
注意: IE的attchEvent 沒有第3個參數,不支持捕捉模型
事件對象的概念:
當事件對應的函數被觸發時, 函數會接收到一個事件參數, // w3c標準
例 xx.onclick = function (ev) {alert(ev)}
點擊後,ev 參數就表明單擊那一瞬間的"各個參數",以一個對象的方式傳過去.
對於IE, 當事件發生的瞬間,事件對象賦值給window.event屬性
4、事件的中斷
如何中斷事件的傳播???????
在w3c: 事件.stopPropagation();
在IE中, 事件對象.cancelBubble = true;
cancelBubble = true //IE取消冒泡
stopPropagation(); // w3c取消冒泡
returnValue = false; // IE取消事件效果
preventDefautl() ;// w3c取消事件效果
取消事件的默認效果
事件對象.preventDefault(); // 阻止事件的默認效果, w3c方法
事件對象.returnValue = false; // 設置returnValue 的屬性值爲false;
5、Js 做用域鏈(是指AO鏈)
1:參數
2:局部變量聲明
3:函數聲明
* 函數聲明與函數表達式的區別
表達式必有返回值,把返回值(即匿名函數)賦給了一個變量.
此時 就是普通的賦值過程.
This, 與 arguments
當一個函數運行的時候,函數內部能引用的變量有這麼幾種
AO、arguments、this
對於 arguments和this, 每一個函數都有本身獨有的arguments和this, 且不進行鏈式查找
arguments是什麼?
答:1:arguments是收到的實參副本
2:收到實參收集起來,放到一個arguments對象裏
在詞法分析中, 首先按形參造成AO的屬性,值爲undefined
當實參傳來時, 再修改AO的相應屬性.
t(a,b,c){},
調用時: t(1,2,3,4,5) 個參數
此時 , AO屬性只有a,bc,3個屬性, arguments裏有1,3,3,4,5, 全部的值
對於超出形參個數以外的實參, 能夠經過arguments來得到
3:arguments 的索引 從 0, 1,2,....遞增,與實參逐個對應
4:arguments.length 屬性表明實參的個數
5:Arguments必定不是數組, 是長的比較像數組的一個對象,雖然也有length屬性
6:Arguments每一個函數都會有,所以,arguemnts只會在內部找自身的arguments,
沒法引用到外層的arguments
This是誰
This是指調用上下文
針對函數的應用場景來討論
函數的4種調用方式
1:函數方式
直接調用函數名,或函數表達式的返回值,
This指代全局對象,window
2:屬性方式(對象方法方式)
This指代該對象(方法的屬主)
3:構造器方式
經過 new 函數 名() , 來建立對象
在js裏, 構造函數與對象的關係比較鬆散,
對象就是"屬性->值"的集合
構造器的做用,是製造一個對象,把this指向該對象,
4:call,apply方式
函數自己便是對象,對象就有方法
函數名.call(對象,參數1,參數2,參數3);
以fn.call(obj,'a','b');
實際效果至關於
1:fn內部的this指向了obj
2:fn('a','b');
Apply的效果與call同樣, 只不過傳參時,把全部參數包裝在數組裏,傳過去.
例 fn.call(obj,'a',' b') ===> fn.apply(obj,['a','b']);
還有一種改變this的方法
With 語句
With(對象) {
語句1
語句2
.....
}
在with內部的語句,就把參數中的對象當成的上下文環境.
6、詞法分析
6、Js面向對象
屬性,方法-->對象
"類"能作到封裝,繼承,多態,
"類"的靜態方法
1: js中的對象是什麼?
答:js的對象就是鍵值對的無序集合
2:種建立對象的方法
①、經過字面量來建立對象
例:{age:22,hei:180}
{}->空對象,沒有屬性
②、經過 new Object([value]);
經過構造函數來建立對象(和第2種沒區別,由於Object就是系統內建的構造函數)
7、Js面向對象中的封裝
對象的屬性外界是可讀可寫的, 如何來達到封裝的目的?
答:經過閉包+局部變量來完成
在構造函數內部聲明局部變量, 和普通方法,
由於做用域的關係,只有構造函數內的方法,才能訪問到局部變量.
而方法對於外界是開放的,所以能夠經過方法來訪問局部變量.
事件觸發總結:
一、onmousedown
定義:onmousedown事件會在鼠標按鍵被按下時發生
二、onmouseup
定義:onmouseup事件會在鼠標按鍵被鬆開時發生
三、onmousemove
定義:onmousemove事件會在鼠標指針移動時發生
支持該事件的js對象:document
可是onmousemove默認狀況下沒有任何對象的一個事件;
由於鼠標移動頻繁發生。
四、onmouseover
定義:onmouseover事件會在鼠標指針移動到指定的對象上時發生
五、onmouseout
定義:onmouseout事件會在鼠標指針移出指定的對象時發生
六、onclick單擊事件
定義:onclick事件和onmousedown不一樣。單擊事件是在同一元素上發生了
鼠標按下時間以後發生了鼠標放開時間是發生的。
理解:鼠標按下擡起之後事件才發生。
七、onfocus光標移入事件
定義:onfocus事件在對象得到焦點時發生
八、onblur光標移出事件
定義:onblur事件會在對象失去焦點時發生
九、oncontextmenu右鍵事件
鼠標按下右鍵的時候發生
十、onsubmit
onsubmit事件會在表單中的確認按鈕(submit)被
點擊是發生。
十一、onkeydown
onkeydown事件會在用戶按下一個鍵盤按鍵時發生
十二、onkeyup
obkeyup事件會在鍵盤按鍵被鬆開時發生
1三、onload
onload事件會在頁面或圖像加載完成後當即發生
1四、onscroll
onscroll事件拖動滾動條時發生
1五、onresize
onresize事件會在窗口或框架被調整大小時發生
1六、onmousewheel
onmousewheel事件ie、chrome下鼠標滾輪滾動時發生
1七、DOMMouseScroll
DOMMouseScroll事件是標準下(ff)鼠標滾輪事件,
鼠標滾輪滾動時發生
1八、onreadystatechange
onreadystatechange事件:當請求被髮送到服務器時;
咱們須要執行一些基於響應的任務。每當readyState
改變時,就會觸發onreadystatechange事件。
readyState屬性存有XMLHttpRequest的狀態信息。
在onreadystatechange事件中,咱們規定當服務器響應
已作好被處理的準備時所執行的任務。
1九、attachEvent綁定事件
ie下的綁定事件,2個參數,第一個什麼事件,第二個執
行函數(倒序執行)。注意this指向
如:obj。attachEvent(‘onclick’,aaa)
function aaa(){}
20、addEventListener綁定事件
標準下的綁定事件,3個參數。1什麼事件(不加ON),
2執行函數 三、一個布爾值。true是捕獲階段,false是
冒泡階段
2一、event對象指事件的狀態
簡單的:一個 存了 事件詳細信息的東西
網上較專業的:Event對象表明事件的狀態,好比事件在其中發生的元素
鍵盤按鍵的狀態,鼠標的位置,鼠標按鈕的狀態,一般
與函數結合使用。
2二、clientX、clientY
在Event對象下獲取鼠標位置
2三、cancelBubble =true
在Event對象下取消冒泡事件
2四、keyCode
在Event對象下獲取用戶按下鍵盤的哪一個按鍵
2五、preventDefault()
阻止默認默認事件的綁定寫法
2六、return false
阻止默認時間的普通寫法
2、DOM 27-46
2七、getElementById
經過id獲取某一個元素
2八、getElementsByTagName
經過標籤名獲取一組元素的集合
2九、childNodes
獲取子節點,可是標準下會獲取空白節點
獲取第一級子元素的節點
30、nodeType
節點類型
1)元素節點(標籤)2)文本節點(空白節點)
3一、children
獲取子節點,可是沒有兼容性問題
獲取第一級子元素的節點
3二、firstElementChild || firstChild
標準下:firstElementChild ie不支持
ie下是 firstChild
獲取子元素裏的第一個
3三、lastElementChild || lastChild
標準下:lastElementChild ie不支持
ie下是 lastChild
獲取子元素裏的最後一個
3四、nextElementSibling || nextSibling
標準下:nextElementSibling ie不支持
ie下 nextSibling
獲取子指定元素的下一個兄弟節點
3五、previousElementSibling || previousSibling
標準下: previousElementSibling ie不支持
id:previousSibling
獲取指定元素的上一個兄弟節點
3六、parentNode
獲取父節點
3七、offsetParent
獲取有定位的父節點,都沒有定位的話父節點就是body
3八、offsetWidth-----有問題
獲取元素的實際寬度(width+padding+border)
3九、offsetHeight
獲取元素的高度(height+padding+border)
40、clientWidth
獲取元素的內部寬度(width+padding)
4一、clientHeight
獲取元素的內部高度(height+padding)
4二、createElement(標籤名)
建立一個節點
4三、appendchild(節點)
追加一個節點
4四、insertBefore(節點,原有節點)
在已有的元素前面插入
4五、removeChild(節點)
刪除一個節點
4六、replaceChild(節點,已有節點)
替換已有的節點
3、BOM操做: 47-53
4七、window。open()
打開窗口
4八、window。close()
關閉窗口,標準下不支持
4九、window。location
獲取瀏覽器地址
50、window。location。href
獲取總體的網址
5一、window。location。search
獲取問號?後面的內容,包括問號
5二、window。location。hash
獲取警號#後面的內容,包括警號
5三、window。location。reload()
自動刷新,定時器配合
5三、window。navigator。userAgent
獲取瀏覽器信息
4、js基礎: 54-126
5四、if else 若是。。。。不然。。。
5五、switch 若是
5六、?: 三木,就是若是。。。不然。。。
5七、for(){} for循環
5八、for in
5九、while=for
60、continue 終止本次循環
if(i=2)continue 跳過這個條件
6一、break 終止當前循環
if(i=3)break 結束本次
6二、undefined 未定義
6三、null=========?
6四、=== 只比較,不轉換類型
6五、== 不只比較,並且還會將兩個東西轉換成相同的類型
6六、= 賦值
6七、! 就是 不 的意思
6八、setTimeout
設置定時器,2秒鐘後,執行一次,而且只執行一次,---定時炸彈
6九、clearTimerout
清楚定時器,清理setTimerout
70、setInterval
設置定時器,每兩秒執行一次
7一、clearInterval
清楚定時器,清理setInterval
7二、arguments
實參的元素集合
7三、call
改變this取向
fn名.call(this,‘black’)第一個參數是函數之行的環境,
從第二個參數開始,纔是函數的真正參數
oDiv.onclick = function(){
toChange.call(this,'black');
};
function toChange(sColor){
this.style.background = sColor;
}
7四、apply
改變this取向,
function show(a, b)
{
alert('this是:'+this+'\na是:'+a+'\nb是:'+b);
}
show(12, 8);
show.apply(document, [12, 8]);
第二個參數是以數組形勢存在的
7五、callee ===============?調用這個函數自身的
7六、var arr=【】; 聲明一個數組
7七、var arr=new Array() 聲明一個數組
7八、push
向數組的末尾添加一個或更多元素,並返回新的長度
7九、pop
刪除數組最後一個元素,並返回這個元素
80、shift
刪除數組第一個元素,並返回這個元素
8一、unshift
向數組的開頭添加一個或多個元素,並返回新的長度
8二、splice
刪除元素,並向數組添加新的元素
8三、join()
把數組的全部元素放入一個字符串。元素經過指定
的分隔符進行分隔
8四、sort()
對數組的元素進行排序
8五、concent----concat()?
鏈接兩個數組或者多個數組,並返回結果
8六、split
分割字符串,得到數組
8七、substring
獲取字符串
包括開始不包括結束
8八、indexOf
從前日後檢索字符串
8九、charAt
獲取某個字符
90、var re=//; 聲明一個正則對象
9一、var re=new RegExp() 聲明一個正則對象
9二、search 查找一個字符串,只找第一次出現的位置
9三、month ===============?
match-匹配符合正則的東西,挑東西返回數組
9四、test 用正則檢驗字符串是否符合它所規定的規則
9五、replace 替換,把符合規則的東西替換成字符串
9六、量詞:{n,m}至少出現n次,最多出現m次
+許多
* {0,} 0到任意次
?零次或者一次{0,1}
{n,}最少n次,最多不限
{,m}最少不限最多m次
{n}正好n次
9七、字符類:
1[abc]2 1和2中間出現a或b或c
[^0-9]排除數字之外全部均可以
[a-z]全部的英文
[0-9]全部的數字
9八、標識: i 忽略大小寫 g 全局匹配
9九、首尾: ^ $
100、轉義:
\d 查找數字 [0-9]
\D 除了數字[^0-9]
\s 空白
\b 單詞邊界
\w 數字字母下劃線--用戶名
. 任意字符
\. 表明.自己
10一、var oDate= new Date() 獲取當前時間
10二、getHours() 獲取小時
10三、getMinutes() 獲取分鐘
10四、getSeconds() 獲取秒
10五、getFullYear() 獲取年
10六、getDay() 獲取星期
10七、getDate() 獲取當前的時間日期
10八、setDate() 設置一個月的某一天
10九、var oImg=new Image() 建立一個image對象
1十、什麼叫ajax
經過XMLHttpRequest與服務器通訊,進行無刷新操做
ajax採用的是異步請求
1十一、同步與異步的區別
同步就是同一時間作一件事
異步就是同一時間作多件事
1十二、ajax的交互方式
1)發送數據並返回 ()(註冊)
2)只發送不返回 ()========?例子
3)不發送只返回 (股票)
11三、post與get的區別
1)發送方式不同:get加載網址問好後面的
post把數據放在一個傳輸體中發送上去的
2)安全不同
post相對安全,get不安全
3)網址長度不同
ie下get網址超過2048字節將被截斷
post沒有上限
4)緩存問題
get能夠緩存網址,post不會緩存網址
5)用途不同
get:查詢數據,post修改數據
11四、發送數據是什麼樣的?
串聯化數據:key1=value1&key2=value2
11五、返回數據是什麼樣的?
返回的是字符串
11六、跨域:jsonp?
(利用script標籤跨域)
在頭部建立個script標籤,
改變script標籤中src
11七、ajax的編寫步驟?
1)建立ajax對象(要有手機)
2)連接服務器open(撥號)
3)監聽數據返回onreadystatechange(聽)
4)發送數據send(說)
5)close(忽略)(掛了)
11八、json怎麼取?=========?
經過串聯化數據
11九、什麼是對象?
對象是一個總體,對外提供一些操做。||
黑盒子,看不到內部的樣子,
能看到表面的按鈕
120、什麼是面向對象?
使用對象時,只關注對象提供的功能,
不關注其內部細節,好比jQuery ||
使用一個東西的時候,不去管內部是
怎麼作的,只用好它的功能
下面是整理出來的一些函數,方便你們的學習和使用
下一步應該學習 HTML DOM 和 DHTML。
jQuery
jQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 編程。
jQuery 很容易學習。
jQuery Mobile 是一個爲觸控優化的框架,用於建立移動 web 應用程序。
jQuery 適用於全部流行的智能手機和平板電腦。
jQuery Mobile 構建於 jQuery 庫之上,這使其更易學習,若是您通曉 jQuery 的話。
它使用 HTML五、CSS三、JavaScript 和 AJAX 經過儘量少的代碼來完成對頁面的佈局。
HTML DOM 定義了訪問和操做 HTML 文檔的標準方法。
HTML DOM 獨立於平臺和語言,可被任何編程語言使用,好比 Java、JavaScript 和 VBscript。
AJAX = 異步 JavaScript 和 XML。
AJAX 不是一種新的編程語言,而是一種使用現有標準的新方法。
經過與服務器進行數據交換,AJAX 能夠在不從新加載整個網頁的狀況下,對網頁的某部分進行更新。
有不少使用 AJAX 的應用程序案例:新浪微博、Google 地圖、開心網等等。
JSON:JavaScript 對象表示法(JavaScript Object Notation)。
JSON 是存儲和交換文本信息的語法。相似 XML。
JSON 比 XML 更小、更快,更易解析。