javascript總結(jié)

javascript總結(jié)

ECMAScript

1.語法
2.變量:只能使用var定義,如果在函數(shù)的內(nèi)容使用var定義油讯,那么它是一個局部變量陌兑,如果沒有使用var它是一個全局的兔综。弱類型!
3.數(shù)據(jù)類型:原始數(shù)據(jù)類型(undefined/null/string/number/boolean)
4.語句:
5.運算符:==與===的區(qū)別
6.函數(shù):兩種寫法(有命名稱涧窒,匿名的)

BOM對象

window:alert(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()
history:go(參數(shù))纠吴,back(),forward()
location: href屬性

DOM操作

DOM文檔結(jié)構(gòu).PNG
  • Document:整個html文件都成為一個document文檔
  • Element:所有的標簽都是Element元素
  • Attribute:標簽里面的屬性
  • Text:標簽中間夾著的內(nèi)容為text文本
  • Node:document慧瘤、element、attribute、text統(tǒng)稱為節(jié)點node.
Document對象

每個載入瀏覽器的 HTML 文檔都會成為 Document 對象上煤。

document對象.png

后面兩個方法獲取之后需要遍歷劫狠!

以下兩個方法很重要独泞,但是在手冊中查不到!

創(chuàng)建文本節(jié)點:document.createTextNode()
創(chuàng)建元素節(jié)點:document.createElement()
Element對象

我們所認知的html頁面中所有的標簽都是element元素

  • element.appendChild():向元素添加新的子節(jié)點蜒犯,作為最后一個子節(jié)點罚随。
  • element.firstChild:返回元素的首個子節(jié)點淘菩。
  • element.getAttribute():返回元素節(jié)點的指定屬性值潮改。
  • element.innerHTML:設(shè)置或返回元素的內(nèi)容汇在。
  • element.insertBefore():在指定的已有的子節(jié)點之前插入新節(jié)點趾疚。
  • element.lastChild:返回元素的最后一個子元素糙麦。
  • element.setAttribute():把指定屬性設(shè)置或更改為指定值赡磅。
  • element.removeChild():從元素中移除子節(jié)點焚廊。
  • element.replaceChild():替換元素中的子節(jié)點。
Attribute對象

我們所認知的html頁面中所有標簽里面的屬性都是attribute

attribute對象.png
練習

在頁面中使用列表顯示一些城市

<ul>
    <li>北京</li>
    <li>上海</li>
    <li>廣州</li>
</ul>

我們希望點擊一個按鈕實現(xiàn)動態(tài)添加城市嚼隘。

分析:

  1. 事件(onclick)
  2. 獲取ul元素節(jié)點
  3. 創(chuàng)建一個城市的文本節(jié)點
  4. 創(chuàng)建一個li元素節(jié)點
  5. 將文本節(jié)點添加到li元素節(jié)點中去飞蛹。
  6. 使用element里面的方法appendChild()來添加子節(jié)點

JS代碼:

<script>
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            //1.獲取ul元素節(jié)點
            var ulEle = document.getElementById("ul1");
            //2.創(chuàng)建城市文本節(jié)點
            var textNode = document.createTextNode("深圳");//深圳
            //3.創(chuàng)建li元素節(jié)點
            var liEle = document.createElement("li");//<li></li>
            //4.將城市文本節(jié)點添加到li元素節(jié)點中去
            liEle.appendChild(textNode);//<li>深圳</li>
            //5.將li添加到ul中去
            ulEle.appendChild(liEle);
        }
    }
</script>   

HTML代碼

<body>
    <input type="button" value="添加新城市" id="btn"/>
    <ul id="ul1">
        <li>北京</li>
        <li>上海</li>
        <li>廣州</li>
    </ul>
</body>

事件:

onsubmit()此事件寫在form標簽中,必須有返回值焰宣。
onload()此事件只能寫一次并且放到body標簽中
其它事件放到需要操作的元素位置霉囚。(onclick盈罐、onfocus暖呕、onblur)

回顧之前已經(jīng)使用過的事件
(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)

事件.png
  • onfocus/onblur:聚焦離焦事件苞氮,用于表單校驗的時候比較合適湾揽。
  • onclick/ondblclick:鼠標單擊和雙擊事件
  • onkeydown/onkeypress:搜索引擎使用較多
  • onload:頁面加載事件,所有的其它操作(匿名方式)都可以放到這個綁定的函數(shù)里面去笼吟。如果是有名稱库物,那么在html頁面中只能寫一個。
  • onmouseover/onmouseout/onmousemove:購物網(wǎng)站商品詳情頁贷帮。
  • onsubmit:表單提交事件 戚揭,有返回值,控制表單是否提交撵枢。
  • onchange:當用戶改變內(nèi)容的時候使用這個事件(二級聯(lián)動)
獲取元素:
document.getElementById("id")
獲取元素里面的值:
document.getElementById("id").value
向頁面輸出
彈窗:alert();……
向瀏覽器中寫入內(nèi)容:document.write(內(nèi)容)民晒;
向頁面指定位置寫入內(nèi)容,innerHTML  

JavaScript內(nèi)置對象

  • JS Array
  • JS Boolean
  • JS Date
  • JS Math
  • JS Number
  • JS String
  • JS RegExp
Array對象

數(shù)組的創(chuàng)建:
Array對象用于在單個的變量中存儲多個值

創(chuàng)建Array對象的語法:

new Array();
new Array(size);
new Array(element0,element1,...,elementn);

數(shù)組的特點:長度可變!數(shù)組的長度=最大角標+1

Boolean對象

創(chuàng)建Boolean對象的語法:

new Boolean(value);//構(gòu)造函數(shù)
Boolean(value);//轉(zhuǎn)換函數(shù)

如果value 不寫锄禽,那么默認創(chuàng)建的結(jié)果為false

Date對象
getTime()返回 1970 年 1 月 1 日至今的毫秒數(shù)潜必。
解決瀏覽器緩存問題
Math和number對象
與java里面的基本一致磁滚。
String對象
match()找到一個或多個正則表達式的匹配。
substr()從起始索引號提取字符串中指定數(shù)目的字符。
substring()提取字符串中兩個指定的索引號之間的字符唁影。

例子:

<script>
    var str = "-a-b-c-d-e-f-";
    var str1 = str.substr(2,4);//-b-c
    //alert(str1);
    
    var str2 = str.substring(2,4);//-b
    alert(str2);
</script>
RegExp對象

正則表達式對象。
test
檢索字符串中指定的值猾警。返回 true 或 false穴墅。

全局函數(shù)

全局屬性和函數(shù)可用于所有內(nèi)建的 JavaScript 對象

全局函數(shù).png

關(guān)于編碼和解碼的一組方法:

<script>
    var str = "張三";
    //alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
    //alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89
    
    //alert(decodeURI(encodeURI(str)));//張三
    //alert(decodeURIComponent(encodeURIComponent(str)));//張三
    
    var str1 = "http://www.ithcx.cn";
    //alert(encodeURI(str1));//http://www.ithcx.cn
    //alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.ithcx.cn
    
    //alert(decodeURI(encodeURI(str1)));//http://www.ithcx.cn
    //alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.ithcx.cn
    
    var str2 = "alert('abc')";
    //alert(str2);
    eval(str2);     
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末隘世,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌侣集,老刑警劉巖缀辩,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件荣恐,死亡現(xiàn)場離奇詭異叠穆,居然都是意外死亡渗磅,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來密似,“玉大人抛猫,你說我怎么就攤上這事败匹√蚰模” “怎么了刹泄?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵姆蘸,是天一觀的道長。 經(jīng)常有香客問我芙委,道長逞敷,這世上最難降的妖魔是什么灌侣? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任皮壁,我火速辦了婚禮滴须,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好除呵,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著爪喘,像睡著了一般颜曾。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上秉剑,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天泛豪,我揣著相機與錄音,去河邊找鬼秃症。 笑死候址,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的种柑。 我是一名探鬼主播岗仑,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼聚请!你這毒婦竟也來了荠雕?” 一聲冷哼從身側(cè)響起稳其,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎炸卑,沒想到半個月后既鞠,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡盖文,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年嘱蛋,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片五续。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡洒敏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出疙驾,到底是詐尸還是另有隱情凶伙,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布它碎,位于F島的核電站函荣,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏扳肛。R本人自食惡果不足惜傻挂,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望挖息。 院中可真熱鬧踊谋,春花似錦、人聲如沸旋讹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽沉迹。三九已至,卻和暖如春害驹,著一層夾襖步出監(jiān)牢的瞬間鞭呕,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工宛官, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留葫松,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓底洗,卻偏偏與公主長得像腋么,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子亥揖,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Node類型 DOM1級定義了一個Node接口珊擂,該接口由DOM中所有節(jié)點類型實現(xiàn)圣勒。這個Node接口在JS中是作為N...
    Maggie_77閱讀 422評論 0 0
  • 一、JS前言 (1)認識JS 也許你已經(jīng)了解HTML標記(也稱為結(jié)構(gòu))摧扇,知道了CSS樣式(也稱為表示)圣贸,會使用HT...
    凜0_0閱讀 2,777評論 0 8
  • 輸入內(nèi)容:document.write(); 例:document.write("I love JavaScrip...
    wxyjj閱讀 2,320評論 0 15
  • 今天晚上我和我媽媽去吃巴金火鍋,那里有免費的冰激凌還可以免費玩ipad扛稽。我很想玩一小會兒吁峻,但是媽媽說:“不行...
    吳卓逸閱讀 108評論 0 1
  • 應(yīng)用配置是app 實例屬性,目前支持的配置如下: app.name 應(yīng)用名稱(可選項) app.env 默認為NO...
    螞蟻閑游閱讀 119評論 0 0