js學(xué)習(xí)筆記

1.js對事件的響應(yīng)
<button type="button" onclick="alert('你好')">點(diǎn)擊</button>
2.改變html元素內(nèi)容
<script>
function test(){
alert('你好');
document.getElementById("p").innerHTML="changed"
}
</script>
<p id="p">test</p>
<button type="button" onclick="test()">點(diǎn)擊</button>

3.x=document.getElementById("some id")//查找html頁面元素
x.innerHTML="wdada"http://改變內(nèi)容
4.匹配字符串
.match("abcd")
5.改變樣式
x.style.color="#ff0000";
6.獲取輸入框的值,驗(yàn)證用戶輸入
.value
document.getElementById("test").value
7.判斷是否為數(shù)字
isNaN(x)方法,true表示不是數(shù)字,false表示是數(shù)字
8.<script></script>標(biāo)簽表示js腳本,html腳本別虛位于此標(biāo)簽之間,腳本可被放置于<body>或<head>中,通常放在<head>中方便管理
9.引用外部js文件,文件以.js結(jié)尾(外部腳本不能包含 <script> 標(biāo)簽)
<script src="xxx.js"></script>
10.js輸出
js木有打印或輸出的函數(shù)
但可通過以下方式輸出數(shù)據(jù)
window.alert()/alert()彈出警告框
document.write() 方法將內(nèi)容寫到 HTML 文檔中
innerHTML 寫入到 HTML 元素
console.log() 寫入到瀏覽器的控制臺(tái)
11.document.write()直接輸出,無需id
innerHTML用于改變元素值
12.通過js獲取當(dāng)前時(shí)間
Date()方法
13.如果在文檔已完成加載后執(zhí)行 document.write,整個(gè) HTML 頁面將被覆蓋翘贮。
14.js通過//進(jìn)行單行注釋,通過/* 內(nèi)容 */進(jìn)行多行注釋
15.js數(shù)據(jù)類型
字符串(String)罢洲、數(shù)字(Number)谤祖、布爾(Boolean)、數(shù)組(Array)冯丙、對象(Object)、空(Null)、未定義(Undefined)
16.數(shù)組定義形式
一般形式
var arr = new Array();
arr[0] = "a";
document.write(arr[0]);

以鍵值對形式
    var arr = {a:"a",b:"b"};
    document.write(arr.a);

17.通常認(rèn)為 js對象是鍵值對的容器,鍵值對通常寫法為 name : value (鍵與值以冒號分割)脱篙。
18.如果變量在函數(shù)內(nèi)沒有聲明(沒有使用 var 關(guān)鍵字),該變量為全局變量
19.修改自身內(nèi)容用this
<button onclick="this.innerHTML=Date()">現(xiàn)在時(shí)間</button>
20.常用html事件
鼠標(biāo)事件
onclick ondbclick onmouseover onmouseout onmouseup(鼠標(biāo)按鍵松開)
鍵盤事件
onkeydown onkeypress onkeyup
表單事件
onblur(元素失去焦點(diǎn)) onchange(表單元素內(nèi)容改變時(shí))
onfocus(元素獲取焦點(diǎn)時(shí)) oninput(元素獲取用戶輸入時(shí))
onreset(表單重置時(shí)) onsearch(用戶向搜索域輸入文本時(shí))
onselect(用戶選取文本時(shí)) onsubmit(表單提交時(shí))
21.反斜杠:轉(zhuǎn)義字符,將特殊字符轉(zhuǎn)換為字符串字符
22.=== 為絕對相等伤柄,即數(shù)據(jù)類型與值都必須相等
23.字符串方法
charAt() 返回指定索引位置的字符
concat() 連接兩個(gè)或多個(gè)字符串绊困,返回連接后的字符串
indexOf()返回字符串中檢索指定字符第一次出現(xiàn)的位置
lastIndexOf()返回字符串中檢索指定字符最后一次出現(xiàn)的位置
match() 找到一個(gè)或多個(gè)正則表達(dá)式的匹配
replace()替換與正則表達(dá)式匹配的子串
search() 檢索與正則表達(dá)式相匹配的值
split() 把字符串分割為子字符串?dāng)?shù)組
toString() toLowerCase() toUpperCase() trim() valueOf()
24.break 語句用于跳出循環(huán)
continue 用于跳過循環(huán)中的一個(gè)循環(huán)
25.typeof 操作符:檢測變量的數(shù)據(jù)類型
26.js中的5種不同的數(shù)據(jù)類型
string number boolean object function
3種對象類型
Object Date Array
2種不含任何值的類型
null undefined
27.使用 constructor 屬性來查看是對象是否為日期 (包含字符串 "Date"):
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
}
28.toString():轉(zhuǎn)為字符串
Number("222"):將字符串轉(zhuǎn)換為數(shù)字
29.js正則表達(dá)式
語法:/pattern/modifiers;
實(shí)例:var patt = /w3cschool/i
實(shí)例解析:/w3cschool/i 是一個(gè)正則表達(dá)式,w3cschool是一個(gè)模式 (用于檢索),i 是一個(gè)修飾符 (搜索不區(qū)分大小寫)。
js中通常用于以下兩個(gè)方法:search() replace()
var str = "Visit W3cSchool!";
var n = str.search(/w3cSchool/i);

    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/microsoft/i,"W3cSchool");
修飾符:i(忽略大小寫) g(全局匹配) m(多行匹配)
正則表達(dá)式模式:
    方括號用于查找某個(gè)范圍內(nèi)的字符:
        [abc]   查找方括號之間的任何字符适刀。
        [0-9]   查找任何從 0 至 9 的數(shù)字秤朗。
        (x|y)   查找任何以 | 分隔的選項(xiàng)。
    元字符是擁有特殊含義的字符
        \d      查找數(shù)字
        \s      查找空白字符笔喉。
        \b      匹配單詞邊界
    test() 方法用于檢測一個(gè)字符串是否匹配某個(gè)模式取视,如果字符串中含有匹配的文本,則返回 true常挚,否則返回 false作谭。
        /e/.test("The best things in life are free!")

30.js中不支持直接使用enter鍵換行,字符串?dāng)嘈行枰褂梅葱备?)
31.表單數(shù)據(jù)
document.forms["myForm"]["fname"].value
32.JSON 語法規(guī)則
數(shù)據(jù)為 鍵/值 對。數(shù)據(jù)由逗號分隔.大括號保存對象,方括號保存數(shù)組
33.鍵/值對包括字段名稱(在雙引號中)奄毡,后面一個(gè)冒號折欠,然后是值:
{"firstName":"John", "lastName":"Doe"}
34.JavaScript 內(nèi)置函數(shù) JSON.parse() 將字符串轉(zhuǎn)換為 JavaScript 對象:var obj = JSON.parse(text);(eval()方法作用類似)
<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
35.JSON.stringify() 方法用于將 JavaScript 值轉(zhuǎn)換為 JSON 字符串。
36.javascript:void(0)
void關(guān)鍵字,指定要計(jì)算一個(gè)表達(dá)式但是不返回值。
37.查找 HTML 元素
通過 id 找到 HTML 元素 document.getElementById("intro")
通過標(biāo)簽名找到 HTML 元素 getElementsByTagName("p")
通過類名找到 HTML 元素 getElementsByClassName("intro")
38.絕對不要在文檔加載完成之后使用 document.write()怨酝。這會(huì)覆蓋該文檔傀缩。
39.改變 HTML 元素的屬性:document.getElementById(id).attribute=新屬性值
40.改變 HTML 元素的樣式:document.getElementById(id).style.property=新樣式
41.隱藏:onclick="document.getElementById('p1').style.visibility='hidden'"
顯示:
onclick="document.getElementById('p1').style.visibility='visible'"
42.onfocus()(與之對應(yīng)的是onblur()失去焦點(diǎn)事件)
名字: <input type="text" onfocus="myFunction(this)">
<script>
function myFunction(x){
x.style.background="yellow";
}
</script>
43.獲取年份
new Date().getFullYear()
獲取月份
new Date().getMonth()(注意:月份從0-11)
獲取幾日
new Date().getDate()
獲取星期幾
new Date().getDay()
44.js math對象
Math.round(2.5) 四舍五入 3
Math.random() 返回0-1之間的隨機(jī)數(shù)
Math.max(1,5,33,555) 返回較大數(shù) 555
Math.min(1,5,33,555) 返回較小數(shù) 1
45.widow(以下屬性可以不用添加window)
widow.location.hostname 主機(jī)域名
location.pathname 返回當(dāng)前頁面的路徑和文件名
location.port 返回 web 主機(jī)的端口 (80 或 443)
location.protocol 返回所使用的 web 協(xié)議(http:// 或 https://)
location.href 屬性返回當(dāng)前頁面的 URL。
46.history.back() - 與在瀏覽器點(diǎn)擊后退按鈕相同
history.forward() - 與在瀏覽器中點(diǎn)擊按鈕向前相同
47.JavaScript 彈窗
三種消息框:警告框农猬、確認(rèn)框赡艰、提示框
警告框 alert("sometext");
確認(rèn)框 當(dāng)你點(diǎn)擊 "確認(rèn)", 確認(rèn)框返回 true, 如果點(diǎn)擊 "取消", 確認(rèn)框返回 false,confirm("提示信息")
提示框 prompt("sometext","defaultvalue");
48.JavaScript 計(jì)時(shí)事件
setInterval() - 間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼斤葱。
語法:setInterval("function",milliseconds);
clearInterval()
setTimeout() - 暫停指定的毫秒數(shù)后執(zhí)行指定的代碼
語法:setTimeout("javascript 函數(shù)",毫秒數(shù));
clearTimeout()
49.JavaScript Cookies
Cookies 用于存儲(chǔ) web 頁面的用戶信息慷垮。
Cookies 的作用就是用于解決 "如何記錄客戶端的用戶信息":
Cookies 以名/值對形式存儲(chǔ) username=John Doe
document.cookie 屬性來創(chuàng)建 、讀取揍堕、及刪除 cookies料身。
document.cookie="username=tom;expires=Thu, 18 Dec 2013 12:00:00 GMT;"(exprires:過期時(shí)間)

創(chuàng)建 cookie 來存儲(chǔ)訪問者名稱
    1).設(shè)置 cookie 值的函數(shù)
    2).獲取 cookie 值的函數(shù)
    3).檢測 cookie 值的函數(shù)
        <head>
        <script>
        function setCookie(cname,cvalue,exdays){
            var d = new Date();
            d.setTime(d.getTime()+(exdays*24*60*60*1000));
            var expires = "expires="+d.toGMTString();
            document.cookie = cname+"="+cvalue+"; "+expires;
        }
        function getCookie(cname){
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name)==0) return c.substring(name.length,c.length);
            }
            return "";
        }
        function checkCookie(){
            var user=getCookie("username");
            if (user!=""){
                alert("Welcome again " + user);
            }
            else {
                user = prompt("Please enter your name:","");
                if (user!="" && user!=null){
                    setCookie("username",user,30);
                }
            }
        }
        </script>
        </head>
            
        <body onload="checkCookie()"></body>

50.引用jQuery
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>

js數(shù)據(jù)類型轉(zhuǎn)換
轉(zhuǎn)String .toString()
轉(zhuǎn)數(shù)字 parseInt() parseFloat()

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市衩茸,隨后出現(xiàn)的幾起案子芹血,更是在濱河造成了極大的恐慌,老刑警劉巖楞慈,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件幔烛,死亡現(xiàn)場離奇詭異,居然都是意外死亡囊蓝,警方通過查閱死者的電腦和手機(jī)饿悬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來聚霜,“玉大人狡恬,你說我怎么就攤上這事⌒睿” “怎么了弟劲?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長夫啊。 經(jīng)常有香客問我函卒,道長辆憔,這世上最難降的妖魔是什么撇眯? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮虱咧,結(jié)果婚禮上熊榛,老公的妹妹穿的比我還像新娘。我一直安慰自己腕巡,他們只是感情好玄坦,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般煎楣。 火紅的嫁衣襯著肌膚如雪豺总。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天择懂,我揣著相機(jī)與錄音喻喳,去河邊找鬼。 笑死困曙,一個(gè)胖子當(dāng)著我的面吹牛表伦,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播慷丽,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了柒莉?” 一聲冷哼從身側(cè)響起碾盟,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎锄俄,沒想到半個(gè)月后赤套,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡珊膜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年容握,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片车柠。...
    茶點(diǎn)故事閱讀 39,722評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡剔氏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出竹祷,到底是詐尸還是另有隱情谈跛,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布塑陵,位于F島的核電站感憾,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏令花。R本人自食惡果不足惜阻桅,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望兼都。 院中可真熱鬧嫂沉,春花似錦、人聲如沸扮碧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蚓土,卻和暖如春宏侍,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蜀漆。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工负芋, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人嗜愈。 一個(gè)月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓旧蛾,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蠕嫁。 傳聞我的和親對象是個(gè)殘疾皇子锨天,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評論 2 353

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