目录
一、js引入页面
1.外部引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="hello.js"></script><!-- 外部引入 -->
</head>
<body>
<input type="button" name="" value="点击" onclick="alert('hello world')">
</body>
</html>
2.内嵌式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>alert("hello world too");</script>/* 弹框函数内嵌式 */
</head>
<body>
<input type="button" name="" value="点击" onclick="alert('hello world')">
</body>
</html>3.行间式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" name="" value="点击" onclick="alert('hello world')"><!-- 在行间事件设置js，点击会弹出hello world -->
</body>
</html>
二、变量
1.关键字、基本数据类型
定义变量关键字var，js并不注重数据类型的声明。
a.js5种基本数据类型
1.数字
2.string
3.布尔类型
4.undefined 变量声明但是为赋值如：var i; 此时i就是undefine
5.null类型
b.命名规范
第一个字符必须是字母、下划线或者是美元符号$
其他的可以加一个数字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// js单行注释
/*多行注释
两个*/
var iNum = 12;/* 赋值语句 */
var Str = "abc";/* 写完了一个分号表示一句js */
// 定义语句可以连起来
var iNum = 12, Str = "abc";
alert(iNum);/* alert弹窗函数内置函数,对于js语句都需在末尾加;*/
alert(Str);
</script>
</head>
<body>
</body>
</html>c.alert
alert为js的内置函数作用为将alert()括号内的数值以弹框的方式展现出来
2.注释
//单行注释
/*多行注释*/
三、获取元素的方法
1.使用id值获取标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">这个是一个div元素</div><!-- id值就是用于js -->
<script>
document.getElementById("div1").style.color= "red";/* 通过id获取元素,并设置颜色，但是因为浏览器的运行自上而下故设置在下面 */
</script>
</body>
</html>使用document模块里面getElementById()方法getElementById()里面放id值，又因为浏览器自上而下执行故javascrip代码放div下面
2.window.onload
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
// document.getElementById("div1").style.color= "red";/* 将代码加载完了以后再运行此代码 */
// document.getElementById('div1').style.fontSize='30px';/* 必须采用fontSize不可以用font-size */
var oDiv = document.getElementById('div1');/* 将div的引用保存到一个变量，作为一个对象 */
oDiv.style.color = "red";
}
</script>
</head>
<body>
<div id="div1">这个是一个div元素</div><!-- id值就是用于js -->
</body>
</html>首先将div的引用存在一个变量里面作为一个对象，然后所有的改变操作在对象的基础上进行
其次window.οnlοad=function(){内容}当浏览器执行到此时意味着现将其他代码执行完毕再执行{}里面的内容。
四、属性操作
1.以.的方式进行操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oA = document.getElementById('link');
var oDiv2= document.getElementById('div2');
var oId = oA.id;/* 将a标签的id属性读出来并进行赋值 */
alert(oId);
// 写属性
oDiv.style.color = 'red';
oA.href = 'https://www.baidu.com/';
oA.title='百度';
oDiv2.className='box';
}
</script>
<style>
.box2{
font-size: 30px;
color: gold;
}
.box{
font-size: 20px;
color: pink;
}
</style>
</head>
<body>
<div id='div1'>这个是一个div元素</div>
<a href="#" id="link">这个是一个链接</a>
<div class="box2" id="div2">这个是第二个div</div>
</body>
</html>
<!-- html的属性怎么写，就可以通过这个用js来创建或读取（除了class属性）-->a.读
var oId = oA.id;/* 将a标签的id属性读出来并进行赋值 */
b.写
// 写属性
oDiv.style.color = 'red';
oA.href = 'https://www.baidu.com/';
oA.title='百度';
oDiv2.className='box';
c.注意
1.对于font-size类似的有“-”的操作在js里面需要变为fontSize
2.对于标签的class属性值应该变为className 如：oDiv2.className='box';
2.以[]的形式进行操作
适用范围：当属性值被var定义一个变量并赋值给这个变量时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');/* 获取对象 */
var sMystyle = 'color';
var sValue = 'pink';
oDiv.style.sMystyle = sValue;/* 报错将sMystle认为style里面的属性而不是变量 */
oDiv.style[sMystyle] = sValue;/* 属性用变量来代替的话使用来操作 */
}
</script>
</head>
<body>
<div id='div1'>这个是一个div元素</div>
</body>
</html>oDiv.style.sMystyle = sValue;/* 报错将sMystle认为style里面的属性而不是变量 */
oDiv.style[sMystyle] = sValue;/* 属性用变量来代替的话使用来操作 */
3.改变标签内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// 获取元素
window.onload = function(){
var oDiv = document.getElementById('div1');
var sTr = oDiv.innerHTML;/* 读取元素里面的内容 */
oDiv.innerHTML = 'zhz'/* 改写元素里面的内容 */
// 把元素里面的内容改为一个标签
oDiv.innerHTML = "<a href='http://www.baidu.com/' title='百度'>这个是一个来凝结</a>"
}
</script>
</head>
<body>
<!-- #div1= -->
<div id='div1'>这个是一个div</div>
</body>
</html>oDiv.innerHTML = 'zhz'/* 改写元素里面的内容 */
oDiv为标签的引用对象，使用innerHTML进行访问元素里面的内容。
五、函数
1.定义函数的方式
function 函数名(){}
<script>
function fnMyalert(){
alert('http://www.baidu.com/');
}
function fnChange(){
var oDiv=document.getElementById('div1');
oDiv.style.color = 'pink';
oDiv.style.fontSize='30px';
}
</script>2.调用函数
被点击以后调用函数
<div id="div1" onclick="fnMyalert()">这个是一个div元素</div>3.综合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function fnMyalert(){
alert('http://www.baidu.com/');
}
function fnChange(){
var oDiv=document.getElementById('div1');
oDiv.style.color = 'pink';
oDiv.style.fontSize='30px';
}/* 没有写window.ononline因为该部分已经加载完成 */
</script>
</head>
<body>
<!-- 设置点击以后就调用函数 -->
<div id="div1" onclick="fnMyalert()">这个是一个div元素</div>
<input type="button" value="改变div" onclick="fnChange()">
</body>
</html>
<!--
前面的都只是一开始就把值进行了改变
下面使用函数来控制其值改变
-->
<!-- 函数定义
-->
4.提取行间事件（将js代码提取）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var oInput = document.getElementById('input');
//将事件属性和函数进行关联不需要双引号，也不需要小括号，因为小括号为直接执行
oInput.onclick = fnChange;
}
function fnChange(){
var oDiv=document.getElementById('div1');
oDiv.style.color = 'pink';
oDiv.style.fontSize='30px';
}/* 没有写window.onload因为该部分已经加载完成 */
</script>
</head>
<body>
<!-- 设置点击以后就调用函数 -->
<div id="div1">这个是一个div元素</div>
<input type="button" value="改变div" id="input">
</body>
</html>
<!--
前面的都只是一开始就把值进行了改变
下面使用函数来控制其值改变
-->
<!-- 函数定义
-->对象.onclick = 函数名;
5. 匿名函数
当定义一个函数只有一个地方使用了此时就直接使用匿名函数即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var oInput = document.getElementById('input');
// 匿名函数直接把名字去掉改 function fnChange()为function()
oInput.onclick = function(){
var oDiv=document.getElementById('div1');
oDiv.style.color = 'pink';
oDiv.style.fontSize='30px';
};
/*
oInput.onclick = fnChange;
}
function fnChange(){
var oDiv=document.getElementById('div1');
oDiv.style.color = 'pink';
oDiv.style.fontSize='30px';
}
*/
};
</script>
</head>
<body>
<!-- 设置点击以后就调用函数 -->
<div id="div1">这个是一个div元素</div>
<input type="button" value="改变div" id="input">
</body>
</html>
// 匿名函数直接把名字去掉改 function fnChange()为function()
oInput.onclick = function(){
var oDiv=document.getElementById('div1');
oDiv.style.color = 'pink';
oDiv.style.fontSize='30px';
};
6.小应用——网页换肤
两套css样式，点击相应的按钮实现css样式的切换。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/skin01.css" id="link">
<script>
window.onload = function(){
var oBtn01 = document.getElementById('btn01');
var oBon02 = document.getElementById('btn02');
var oLink = document.getElementById('link');
oBtn01.onclick=function(){
oLink.href = 'css/skin01.css';
};
oBon02.onclick = function(){
oLink.href = 'css/skin02.css';
};
};
</script>
</head>
<body>
<input type="button" value="皮肤1" id="btn01">
<input type="button" value="皮肤2" id="btn02">
</body>
</html>
六、总结
使用js可以实现页面和人的互动，接下来每天学一点，争取赶上进度。
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
