1.js嵌入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js嵌入方式</title>
<!--嵌入式-->
<script type="text/javascript">
alert('hello,again');
</script>
<!--外联式-->
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
<!--行间事件,不推荐使用-->
<input type="button" name="" value="弹框" onclick="alert('hello')">
</body>
</html>
2.js点击事件实现换肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js换肤</title>
<link id="link1" rel="stylesheet" type="text/css" href="1.css">
<script type="text/javascript">
window.onload=function () {
var box1=document.getElementById("div1");
var box2=document.getElementById("div2");
box1.onclick=aa;
box2.onclick=bb;
}
function aa() {
var oLink=document.getElementById('link1');
oLink.href='2.css';
}
function bb() {
var oLink=document.getElementById('link1');
oLink.href='1.css';
}
</script>
</head>
<body>
<div id="div1" class="box01">
</div>
<div id="div2" class="box02">
</div>
</body>
</html>
3.js中括号操作属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js中括号操作属性</title>
<script type="text/javascript">
window.onload=function () {
var oDiv=document.getElementById('div1');
var attr='color'
oDiv.style[attr]='red';
// innerHtml可以读写元素包括的内容
oDiv.innerHTML='ddddddd';
alert(oDiv.innerHTML);
}
</script>
</head>
<body>
<div id="div1"> </div>
</body>
4.js操作class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作class</title>
<style type="text/css">
.box01{
width: 200px;
height: 200px;
background-color: red;
}
.box02{
width: 300px;
height: 300px;
background-color: gold;
}
</style>
<script type="text/javascript">
window.onload=function () {
var oDiv=document.getElementById('div1');
oDiv.className='box02';
}
</script>
</head>
<body>
<div class="box01" id="div1"></div>
</body>
</html>
5.js操作style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作style属性</title>
<script type="text/javascript">
window.onload=function () {
var oDiv=document.getElementById('div1');
oDiv.style.color='red';
oDiv.style.background='gold';
oDiv.style.fontSize='30px';
}
</script>
</head>
<body>
<div class="div" id="div1">div</div>
</body>
</html>
6.js函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js函数</title>
<script type="text/javascript">
function aa() {
alert("hello");
}
</script>
</head>
<body>
<input type="button" value="弹框" onclick="aa()">
</body>
</html>
7.js函数传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js函数传参</title>
<script type="text/javascript">
window.onload=function () {
var oDiv=document.getElementById("div1");
function changeStyle(sty,val) {
oDiv.style[sty]=val;
}
changeStyle('color','red');
}
</script>
</head>
<body>
<div id="div1">div元素</div>
</body>
</html>
8.js return
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的return语句</title>
<script type="text/javascript">
window.onload=function () {
var input1=document.getElementById('input1');
var input2=document.getElementById('input2');
var button=document.getElementById('btn_add');
button.onclick=pop;
function pop() {
var ll=getResult();
alert(ll);
}
function getResult() {
var num1=input1.value;
var num2=input2.value;
return parseInt(num1)+parseInt(num2);
}
}
</script>
</head>
<body>
<input type="text" name="" id="input1">
<input type="text" name="" id="input2">
<input type="button" name="" value="相加" id="btn_add">
</body>
</html>
9.js数组常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js数组常用方法</title>
<script type="text/javascript">
var aRr=[1,2,3,4];
var sTr=aRr.join('-');//1-2-3-4
var srt=aRr.join("");//1234
aRr.push(5);//尾部添加
// alert(aRr.pop());//尾部删除
aRr.unshift(12);//头部添加
// alert(aRr.shift());//头部删除
// alert(aRr.reverse());//反转数组
// alert(aRr.indexOf(12));//返回元素第一次出现的下标
aRr.splice(2,2,'a','b','c');//参数:No1:从第几个开始;No2:删除几个元素;No3,4,5:在No1后添加的元素
alert(aRr);
</script>
</head>
<body>
</body>
</html>