1.js对事件的响应
<button type="button" onclick="alert('你好')">点击</button>
2.改变html元素内容
<script>
function test(){
alert('你好');
document.getElementById("p").innerHTML="changed"
}
</script>
<p id="p">test</p>
<button type="button" onclick="test()">点击</button>
3.x=document.getElementById("some id")//查找html页面元素
x.innerHTML="wdada"//改变内容
4.匹配字符串
.match("abcd")
5.改变样式
x.style.color="#ff0000";
6.获取输入框的值,验证用户输入
.value
document.getElementById("test").value
7.判断是否为数字
isNaN(x)方法,true表示不是数字,false表示是数字
8.<script></script>标签表示js脚本,html脚本别虚位于此标签之间,脚本可被放置于<body>或<head>中,通常放在<head>中方便管理
9.引用外部js文件,文件以.js结尾(外部脚本不能包含 <script> 标签)
<script src="xxx.js"></script>
10.js输出
js木有打印或输出的函数
但可通过以下方式输出数据
window.alert()/alert()弹出警告框
document.write() 方法将内容写到 HTML 文档中
innerHTML 写入到 HTML 元素
console.log() 写入到浏览器的控制台
11.document.write()直接输出,无需id
innerHTML用于改变元素值
12.通过js获取当前时间
Date()方法
13.如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
14.js通过//进行单行注释,通过/* 内容 */进行多行注释
15.js数据类型
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）
16.数组定义形式
一般形式
var arr = new Array();
arr[0] = "a";
document.write(arr[0]);
以键值对形式
var arr = {a:"a",b:"b"};
document.write(arr.a);
17.通常认为 js对象是键值对的容器,键值对通常写法为 name : value (键与值以冒号分割)。
18.如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量
19.修改自身内容用this
<button onclick="this.innerHTML=Date()">现在时间</button>
20.常用html事件
鼠标事件
onclick ondbclick onmouseover onmouseout onmouseup(鼠标按键松开)
键盘事件
onkeydown onkeypress onkeyup
表单事件
onblur(元素失去焦点) onchange(表单元素内容改变时)
onfocus(元素获取焦点时) oninput(元素获取用户输入时)
onreset(表单重置时) onsearch(用户向搜索域输入文本时)
onselect(用户选取文本时) onsubmit(表单提交时)
21.反斜杠:转义字符,将特殊字符转换为字符串字符
22.=== 为绝对相等，即数据类型与值都必须相等
23.字符串方法
charAt() 返回指定索引位置的字符
concat() 连接两个或多个字符串，返回连接后的字符串
indexOf()返回字符串中检索指定字符第一次出现的位置
lastIndexOf()返回字符串中检索指定字符最后一次出现的位置
match() 找到一个或多个正则表达式的匹配
replace()替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
split() 把字符串分割为子字符串数组
toString() toLowerCase() toUpperCase() trim() valueOf()
24.break 语句用于跳出循环
continue 用于跳过循环中的一个循环
25.typeof 操作符:检测变量的数据类型
26.js中的5种不同的数据类型
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():转为字符串
Number("222"):将字符串转换为数字
29.js正则表达式
语法:/pattern/modifiers;
实例:var patt = /w3cschool/i
实例解析:/w3cschool/i 是一个正则表达式,w3cschool是一个模式 (用于检索),i 是一个修饰符 (搜索不区分大小写)。
js中通常用于以下两个方法: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(多行匹配)
正则表达式模式:
方括号用于查找某个范围内的字符：
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。
元字符是拥有特殊含义的字符
\d 查找数字
\s 查找空白字符。
\b 匹配单词边界
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
/e/.test("The best things in life are free!")
30.js中不支持直接使用enter键换行,字符串断行需要使用反斜杠()
31.表单数据
document.forms["myForm"]["fname"].value
32.JSON 语法规则
数据为 键/值 对。数据由逗号分隔.大括号保存对象,方括号保存数组
33.键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：
{"firstName":"John", "lastName":"Doe"}
34.JavaScript 内置函数 JSON.parse() 将字符串转换为 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 值转换为 JSON 字符串。
36.javascript:void(0)
void关键字,指定要计算一个表达式但是不返回值。
37.查找 HTML 元素
通过 id 找到 HTML 元素 document.getElementById("intro")
通过标签名找到 HTML 元素 getElementsByTagName("p")
通过类名找到 HTML 元素 getElementsByClassName("intro")
38.绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。
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()(与之对应的是onblur()失去焦点事件)
名字: <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之间的随机数
Math.max(1,5,33,555) 返回较大数 555
Math.min(1,5,33,555) 返回较小数 1
45.widow(以下属性可以不用添加window)
widow.location.hostname 主机域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href 属性返回当前页面的 URL。
46.history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
47.JavaScript 弹窗
三种消息框：警告框、确认框、提示框
警告框 alert("sometext");
确认框 当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false,confirm("提示信息")
提示框 prompt("sometext","defaultvalue");
48.JavaScript 计时事件
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
语法:setInterval("function",milliseconds);
clearInterval()
setTimeout() - 暂停指定的毫秒数后执行指定的代码
语法:setTimeout("javascript 函数",毫秒数);
clearTimeout()
49.JavaScript Cookies
Cookies 用于存储 web 页面的用户信息。
Cookies 的作用就是用于解决 "如何记录客户端的用户信息":
Cookies 以名/值对形式存储 username=John Doe
document.cookie 属性来创建 、读取、及删除 cookies。
document.cookie="username=tom;expires=Thu, 18 Dec 2013 12:00:00 GMT;"(exprires:过期时间)
创建 cookie 来存储访问者名称
1).设置 cookie 值的函数
2).获取 cookie 值的函数
3).检测 cookie 值的函数
<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数据类型转换
转String .toString()
转数字 parseInt() parseFloat()
