1.基本概念:
- JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言。与java无关。
- 组成部分:
- ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等…)
- BOM:浏览器对象模型
- DOM:文档对象模型
- 作用:
- 修改html页面的内容
- 修改html的样式
- 完成表单的验证
- 注意:
- js可以在页面上直接写,也可以单独出去
- js的文件的后缀名 .js
2.js和html整合
- 方式1:在页面上直接写
将js代码放在
<script></script>标签中,一般放在head标签中
- 方式2:独立的js文件
- 通过script标签的src属性导入
案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--方式一-->
<script type="text/javascript">
<!--对话框-->
alert("哈哈");
</script>
<!--方式二-->
<script type="text/javascript" src="../js/1.js" ></script>
</head>
<body>
</body>
</html>
1.js文件代码,在js文件夹下
alert("hehhe");
3.js中的变量声明
- var 变量名=初始化值;
- var 变量名; 变量名=初始化值;
4.js的数据类型:
- 原始类型:(5种)
Null
String
Number
Boolean
Undefined
通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于那种原始类型
typeof 变量|值;
若变量为null,使用typeof弹出的值 object
使用typeof的返回值
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
- 引用类型
5. js事件驱动函数
5.1 函数定义格式
- 方式1:
function 函数名(参数){
函数体;
}
- 方式2:
var 函数名=function(参数){
函数体;
}
注意:
- 函数不用声明返回值类型
- 参数不需要加类型
- 函数调用的时候
- 函数名(参数)
在方法中(function()) this指代的是当前的元素(当前dom对象)
注意:
在方法中(function()) this指代的是当前的元素(当前dom对象)
5.2 js事件和函数的绑定:
- 方式1:
通过标签的事件属性
<xxx onclick="函数名(参数)"></xxx>
- 方式2:
给元素派发事件
document.getElementById("id值").onclick=function(参数){....}
document.getElementById("id值").onclick=函数名
注意:
内存中应该存在该元素才可以派发事件
a.将方式2的js代码放在html页面的最下面
b.在页面加载成功之后在运行方式2的js代码 onload事件.
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function btn_in(){
alert("点击事件");
}
function init(){
//alert("页面加载成功");
document.getElementById("btn_2").onclick=btn2cli;
}
var btn2cli=function(){
alert("哈哈哈");
}
</script>
</head>
<body onload="init()">
<input type="button" value="点我" onclick="btn_in()"/>
<input type="button" value="点我试试" id="btn_2"/>
</body>
</html>
5.3 js中的事件
常见的事件
- 单击: onclick
- 表单提交: onsubmit 加在form表单上的 οnsubmit=”return 函数名()” 注意函数返回值为boolean类型
- 页面加载: onload
- 焦点事件:
- onfocus
- onblur
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function getFocus(){
var user=document.getElementById("username");
document.getElementById("spanid").innerHTML=user.value;
}
function loseFocus(){
var user=document.getElementById("username");
alert(user.value);
}
</script>
</head>
<body>
用户名:<input id="username" name="username" value="请输入你的名字"
onfocus="getFocus()" onblur="loseFocus()"/><br />
<span id="spanid"></span>
</body>
</html>
表单事件:
- onsubmit
- onchange 改变
鼠标事件
- ondblclick:双击
- onmousedown:按下
- onmouserup:弹起
- onmousemove:移动
- onmouserover:悬停
- onmouserout:移出
- 键盘事件
- onkeydown:按下
- onkeyup:弹起
- onkeypress:按住
注意:event.preventDefault(),阻止默认事件的发生,可以防止超链接的跳转(不是所有的浏览器适用)
5.4 获取元素及属性
- 获取元素
<!--通过y元素的id获取元素-->
var obj=documnet.getElementById("id值");
document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)返回一个数组
document.getElementsByClassName():需要给元素添加class属性
document.getElementsByName():需要给元素添加name属性
示例代码(隔行换色)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
onload=function(){
var arr = document.getElementsByTagName("tr");
// alert(arr.length);
for(var i=1;i<arr.length;i++){
if(i%2==0){
arr[i].style.backgroundColor="yellowgreen";
}else{
arr[i].style.backgroundColor="goldenrod";
}
}
}
</script>
</head>
<table id="tab1" border="1" width="800" align="center" >
<tr style="background-color: #999999;">
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
- 获取元素的标签体中的内容
var ht=document.getElementById("id值").innerHTML;
- 设置元素的标签体
document.getElementById("id值").innerHTML="ssss";
- 获取元素的value属性
var val=document.getElementById("id值").value;
- 设置元素的value属性
document.getElementById("id值").value="sdfsdf";
- appendChild(dom对象):在一个元素下添加孩子
<!--获取id为 left元素下的所有option的元素-->
var arr = document.getElementById("left").options;
document.getElementById("toRight3").onclick=function(){
//获取左边所有的option
// var arr = document.getElementsByTagName("option");
var arr = document.getElementById("left").options;
for(var i=0;i<arr.length;){
document.getElementById("right").appendChild(arr[i]);
}
}
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function btn(){
var obj=document.getElementById("btn");
alert(obj.value);
var div = document.getElementById("div0");
alert(div.innerHTML);
}
</script>
</head>
<body>
<input id="btn" value="确定" type="button" onclick="btn()" />
<div id="div0">hahaha</div>
</body>
</html>
6. bom中对象的操作
6.1 定时器
var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期执行
var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数
清除定时器:
clearInterval(id);
claerTimeout(id);
示例代码1(动态的输出文字)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var i = 0;
var s="哈呵嘻";
var body;
function init(){
body=document.getElementById("body");
setInterval(show,200);//定时器
}
function show(){
i++;
var ss = s.substring(0,i);
body.innerHTML=ss;//写入内容
if(i == s.length){
i=0;
}
}
</script>
</head>
<body onload="init()" id="body">
</body>
</html>
示例代码2(轮播图)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var i = 1;
function init(){
setInterval(changeImage,3000);
}
function changeImage(){
var img = document.getElementById("img");
i++;
img.src="../img/"+ i +".jpg"
if(i >= 3){
i=0;
}
}
</script>
</head>
<body onload="init()">
<img id="img" src="../img/1.jpg" width="100%"/>
</body>
</html>
示例代码3(广告的弹出和隐藏)
<script>
var i=1;
var count=1;
var timer;
function init(){
timer = setInterval(showAd,4000);//广告
setInterval(changeImage,3000);
}
//展示广告
function showAd(){
count++;
if(count>=4){
clearInterval(timer);//取消定时器
}
var div = document.getElementById("div2")
div.style.display="block";//显示
setTimeout(hideAd,2000);
}
//隐藏广告
function hideAd(){
var div = document.getElementById("div2")
div.style.display="none";//显示
}
function changeImage(){
//获取图片元素
var img = document.getElementById("lb");
i++;
img.src="../img/" + i +".jpg";
if(i >= 3){
i=0;
}
}
</script>
6.2 操作css属性
document.getElementById("id").style.属性="值"
属性:就是css中属性 css属性有"-" 例如:backgroud-color
若有"-" 只需要将"-"删除,后面第一个字母变大写即可
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function btn(){
var obj = document.getElementById("div0");
obj.style.backgroundColor="blue";
obj.style.border="1px solid red";
obj.style.width="100px"
obj.style.height="100px"
}
</script>
</head>
<body>
<input type="button" value="将div加上样式" onclick="btn()"/>
<div id="div0"></div>
</body>
</html>
6.3 bom(浏览器对象模型)
所有的浏览器都有5个对象
6.3.1 window:窗口
- 常用的属性:
window.onload 等价于 onload
window.setInterval() 等价于 setInterval()
通过window可以获取其他的四个对象
window.location 等价域 location
window.history 等价于 history
- 常用的方法
- 消息框
alert("...."):警告框
confirm("你确定要删除吗?"):确定框 返回值:boolean
prompt("请输入您的姓名"):输入框 返回值:你输入的内容
消息框示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
alert("heheh");
var flag = confirm("lalala");
alert(flag);
var res=prompt("请输入你的姓名:");
alert(res);
</script>
</head>
<body>
</body>
</html>
- 打开和关闭
- open(url):打开
- close():关闭
打开和关闭示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="打开" onclick="openA()" />
</body>
<script>
function openA(){
open("a.html");
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
我是A页面
<input type="button" value="关闭" onclick="closeA()" />
</body>
<script>
function closeA(){
close();
}
</script>
</html>
6.3.2 location:定位信息 (地址栏)
常用属性:
- href:获取或者设置当前页面的url(定位信息)
- location.href; 获取url
- location.href=”…”;设置url 相当于 a标签
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//获取url
// var u = location.href;
// alert(u);
function setUrl(){
location.href="../window/a.html"
}
</script>
</head>
<body>
<input type="button" value="设置url" onclick="setUrl()" />
</body>
</html>
6.3.3 history:历史
常用的方法:
- back();后退
- forward():向前
- go(int)
- go(-1) 相当于 back()
- go(1) 相当于 forward()
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function forw(){
history.go(1);
}
</script>
</head>
<body>
哈哈页面<br />
<a href="b.html">b页面</a>
<input type="button" value="前进" onclick="forw()" />
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function goBack(){
history.go(-1);
}
</script>
</head>
<body>
呵呵页面<br />
<input type="button" value="后退" onclick="goBack()" />
</body>
</html>