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()