注:
- JAVA每行语句后需使用分号。
- JAVA区分大小写。(html不区分)
- 索引从0开始
嵌入JS代码
使用scirpt包裹。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
注释
使用//
表示一行注释
使用/**/
包裹一行注释
p.s.
css使用/**/
表示;
html使用<!---->
表示;
变量
字母、下划线、$、数字(非开头)
var band="beyond",love;
使用CamelCase
驼峰式命名。
数据
undefined 声明变量但不做判断,相当于false
引号包裹默认是字符串。parseInt
取整parseFloat
保留小数
字符串
var words="我是好人"
undefined
words.length
4
words.charAt(0)
"我"
words.charAt(words.length-1)
"人"
words.indexOf('好')
2
words.substring(0,3)
"我是好"
words.replace('我','你')
"你是好人"
words='我,小可爱'
"我,小可爱"
words.split(',')
(2) ["我", "小可爱"]
var ne=words.split(',')
undefined
ne
(2) ["我", "小可爱"]
ne[0]
"我"
ne[1]
"小可爱"
数组
var trackD1=['a','b','c']
trackD1[1]
"b"
trackD1.push('aaa','aaaaaa')
5
trackD1
(5) ["a", "b", "c", "aaa", "aaaaaa"]
trackD1.pop()
"aaaaaa"
trackD1
(4) ["a", "b", "c", "aaa"]
trackD1.shift()
"a"
trackD1
(3) ["b", "c", "aaa"]
delete trackD1[2]
true
trackD1
(3) ["b", "c", empty]
trackD1.splice(2)
[empty]
trackD1
(2) ["b", "c"]
var tr2=['2','22']
undefined
var tr=trackD1.c
undefined
var tr3=trackD1.concat(tr2)
undefined
tr3
(4) ["b", "c","2", "22"]
判断与循环
&&
是||
或===
相等
条件用括号括起来。
if
var weather='sun';
if ((weather === 'sun')&&(tep<=26) ) //判断条件
//执行内容
{
alert('good!');
} else {
alert('bad!')
}
if/else if/if
switch
var weather='下雨';
switch(weather){
case '下雨':
alert('sad');
break;
default:
alert('good');
break;
}
while
var i=0;
while(i<10){
i++;
if (i%2===0){
continue;
}
console.log(i);
}
for
for (var i = 0;
i < 10;
i++) {
console.log(i);
}
函数
格式:
function functionName(parameter1,parameter2……){...}
调用参数时parameter是argument;
函数声明
function alertMessage(){
alert('hello');
}
alertMessage();
看教程的时候,皓说“显示一个‘hello’的提示窗口”,我听成了“显示一个很low的提示窗口”……
英语听力还有救吗?
制定参数:
function alertMessage(message){
alert(message);
}
alertMessage('hellop');
函数表达式
var alertMessage= function(message){
alert(message);
}
alertMessage('hellop');
变量范围
全局变量
var message='yoxi'
var alertMessage= function(message){
alert(message);
}
alertMessage();
局部变量:函数外部不能访问函数内部定义的变量
对象
property 属性
method 方法
创建对象
var de={};
de.formedIn='1983';
de['foundedIn']='香港';
console.log(de);
de.formedIn
创建数组
var beyond={
a: '66',
b: '222',
c: ['wf','asf']
}
console.log(beyond);
方法
beyond.bb=function(){
for (var i = Things.length - 1; i >= 0; i--) {
Things[i]
}
};
DOM
文档对象模型DOM(Document Object Model)
not 语言 is 规范
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
即
document
HTML
HEAD
TITLE
BODY
H1
P
获取元素
document.getElementById('pt')
document.getElementsByTagName('h1')
document.querySelectorAll('')
document.querySelector('')
事件
弹出页面or提示文字
var btn=document.querySelector('.btn');
btn.onclick=function(){
console.log('被点了');
};
btn.onmouseover=function(){
console.log('shui被点了');
};
btn.onmouseout=function(){
console.log('ni被点了');
};
对应的html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="#" class="btn">一个链接</a>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
监听事件
监听事件后有三个参数
false向上传播
true向下捕获
var btn=document.querySelector('.btn');
function showmessage(event){
console.log(event);
}
btn.addEventListener('click',showmessage,false);
事件是向上传递的,执行上面的事件。
从上向下传递,称为事件的捕获。
停止传播
event.stopPropagation();
参考文献: