一个简单的JS脚本
一个效果:鼠标移入div背景颜色变成红色,鼠标移出,背景颜色变回白色
事件相应函数:
onmouseover
鼠标移入
onmouseout
鼠标移出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#tim{
width:200px;
height:200px;
border: 1px solid black;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="tim" onmouseover="tim.style.background='red'" onmouseout="tim.style.background='white'"></div>
</body>
</html>
获取标签元素
函数 | 解释 |
---|---|
document.getElementById('ID名') | 返回这个id的元素 |
document.getElementByTagName('标签名') | 返回所有这个标签名的元素的集合,0索引 |
document.getElementByClassName('class名') | 返回所有这个class的元素的集合,0索引 |
document.querySelector('css任意选择器') | 返回第一个 |
document.querySelectorAll('css任意选择器') | 返回符合的所有 |
document.documentElement | 获取HTML元素 |
document.body | 获取body元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#tim{
width:200px;
height:200px;
border: 1px solid black;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="tim" class="content"></div>
<script type="text/javascript">
//返回这个id的元素
document.getElementById('tim').style.background = 'red'
//返回所有这个标签名的元素的集合,0号索引
document.getElementsByTagName('div')[0].style.background = 'black'
//返回所有这个class的元素的集合,0索引
document.getElementsByClassName('content')[0].style.background = 'yellow'
// 返回第一个
document.querySelector('#tim').style.background = 'black'
document.querySelector('.content').style.background = 'black'
document.querySelector('div').style.background = 'black'
//返回符合的所有
document.querySelectorAll('div')[0].style.background = 'red'
</script>
</body>
</html>
JS编写的最佳位置
一般情况下,JS是些在页面的任何位置,需要script
标签包着,但是别写在html标签外
最常见的是写在 head
和 body
内部
写在 head
标签内需要写上 window.onload
包着,要不然会报错,因为执行 js 时页面标签还没加载
window.onload
的作用是当页面加载完成后自动触发该事件- 一个页面应该只有一个
window.onload
事件,因为若写多个的话会覆盖只执行最后一个
js 理应写在 body
结束标签之前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#tim{
width:200px;
height:200px;
border: 1px solid black;
margin: 0 auto;
}
</style>
<script type="text/javascript" >
window.onload = function(){
document.getElementsByTagName('div')[0].style.background = 'green'
alert(1) //弹出一个弹窗
}
</script>
</head>
<body>
<div id="tim" class="content"></div>
</body>
</html>
引入外部 js 文件
js_code_location.js
window.onload=function(){
document.getElementsByTagName('div')[0].style.background = 'green'
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#tim{
width:200px;
height:200px;
border: 1px solid black;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="js_code_location.js"></script>
</head>
<body>
<div id="tim" class="content"></div>
</body>
</html>
或者
document.getElementsByTagName('div')[0].style.background = 'green'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#tim{
width:200px;
height:200px;
border: 1px solid black;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="tim" class="content"></div>
<script type="text/javascript" src="js_code_location.js"></script>
</body>
</html>
JS 输出及调试方法
函数 | 解释 |
---|---|
alert('输出内容') | 弹窗型输出 |
console.log('输出内容') | 浏览器调试窗口输出 |
innerHTML 和 innerText | 1. 给获取的元素一些内容 2. document.getElementById(‘id名’).innerHTML = ‘内容’ 3. 区别:InnerHTML 对标签进行转义,InnerText 不转义 |
document.write('输出内容') | 输出内容会清空原有的html再生成一个新的 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="tim1"></div>
<div id="tim2"></div>
<div id="rewrite">重写</div>
<script type="text/javascript">
//alert('我是弹窗内容')
console.log('我是在浏览器调试窗口输出的内容')
document.getElementById('tim1').innerHTML = '<p>我是tim1盒子的内容,我被注入进来了</p>'
document.getElementById('tim2').innerText = '<p>我是tim2盒子的内容,我被注入进来了</p>'
document.getElementById('rewrite').onclick=function(){
document.write('我的新的html了,原来的已经被我替代了')
}
</script>
</body>
</html>
演示JS常见事件
函数 | 解释 |
---|---|
onclick | 鼠标点击事件 |
onmouseover | 鼠标被移到某些元素之上 |
onmouseout | 鼠标从某元素上面移开 |
onchange | 元素值改变,一般用在表单元素上 |
onkeydown | 用户按下键盘按键 |
onfocus | 元素获取焦点 |
onblur | 元素失去焦点 |
window.onload | 元素加载完成 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#tim{
width:300px;
height:300px;
background: green;
margin:0 auto;
}
</style>
</head>
<body>
<div id="tim"></div>
<input type="" name="" id="test_input">
<script type="text/javascript">
document.getElementById('tim').onclick = function(){
//函数里面写我们要做的事情
alert("我是被点击了")
}
document.getElementById('tim').onmouseover = function () {
console.log('鼠标移入我的范围内')
}
document.getElementById('tim').onmouseout = function(){
console.log('鼠标移出了....')
}
document.getElementById('test_input').onchange = function(){
console.log(document.getElementById('test_input').value)
}
document.getElementById('test_input').onkeydown = function(){
console.log('按动键盘')
}
document.getElementById('test_input').onfocus = function(){
console.log('我获取到焦点了')
}
document.getElementById('test_input').onblur = function(){
console.log('我失去焦点了')
}
</script>
</body>
</html>
操作DIV的任意样式
通过三个按钮,改变 div 样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#tim{
width:100px;
height:100px;
background: green;
margin:0 auto;
}
</style>
</head>
<body>
<button id="taller">增高</button>
<button id="longer">增长</button>
<button id="changebackground">改变背景颜色</button>
<div id="tim"></div>
<script type="text/javascript">
//文档加载完成之后对其操作
window.onload = function(){
//给增高按钮添加事件
document.getElementById('taller').onclick = function () {
document.getElementById('tim').style.height = '300px'
}
//给增长按钮添加事件
document.getElementById('longer').onclick = function () {
document.getElementById('tim').style.width = '300px'
}
//给改变颜色按钮添加事件
document.getElementById('changebackground').onclick = function () {
document.getElementById('tim').style.background = 'red'
}
}
</script>
</body>
</html>
操作后
JS的数据类型
基础数据类型
- 字符串 string
- 数字(整型浮点型) number
- 布尔 boolean
- null 空对象
- undefined 未定义
复杂数据类型
- 数组 Array
- 对象 Object
检查数据类型的两种方法
typeof
Object.prototype.toString.call('数据')
// 鉴别复杂数据类型、引用数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
console.info('字符串 ' + typeof('string'))
console.info('数字 ' + typeof(100))
console.info('布尔值 ' + typeof(true))
console.info('空对象 ' + typeof(null))
console.info('未定义 ' + typeof(undefined))
console.info('对象 ' + typeof({}))
console.info('数据 ' + typeof([]))
console.info(Object.prototype.toString.call({}))
console.info(Object.prototype.toString.call([]))
</script>
</body>
</html>
JS 变量
用 var
声明一个变量
变量的限制:
- 变量的首字母必须由字母(a-zA-Z)或下划线(_)或美元符($)开头,不能是数字
- 后面的可以是字母(a-zA-Z)或下划线(_)或美元符($)或者是数字,并且是区分大小写的
- 区分大小写的意思是
var name
和var Name
是定义两个不同的变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#tim{
width:100px;
height:100px;
background: green;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="tim"></div>
<script type="text/javascript">
// 定义变量
var a = 'miko'
console.log('我是 ' + a)
var oDiv = document.getElementById('tim')
oDiv.style.height = '300px'
</script>
</body>
</html>
JS 数据类型转换
显式转换(强制内容转换):
- Number()
- parseInt()
- parseFloat()
- String()
- toString()
- Boolean()
隐式转换
- 操作符或者语句进行运算时
- if while 比较里面也会进行隐式转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var a= '123'
//强制类型转换
console.info(a,"类型 " + typeof(a))
console.info(Number(a) + "用number进行类型转换 " + typeof(Number(a)))
var b = 'abc'
console.info(b,"类型 " + typeof(b))
console.info(b,Number(b) + " 用number进行类型转换 " + typeof(Number(b)))
// NaN 是 Not a number 的缩写,意思是 不是一个数字
var c = '3.141592657'
console.info(c,"parseInt转换后",parseInt(c))
console.info(c,"parseFloat转换后",parseFloat(c))
var c = '3.141592657abc'
console.info(c,"parseInt转换后",parseInt(c))
console.info(c,"parseFloat转换后",parseFloat(c))
var c = 3
console.info(c,"parseFloat转换后",parseFloat(c))
var d = 123456
console.info(d,"String转换",String(d))
console.info(d,"toString转换",d.toString())
console.info(d,Boolean(d))
var f = 0
console.info(f,Boolean(f))
// 隐式转换
var sum
sum = 1+2
console.info('sum = ' + sum)
// 数字与字符串相加,发生类型转换,会变成字符串之间的拼接
var sum
sum = 1+'2'
console.info('sum = ' + sum,'数字与字符串相加')
// 判断,数字会转换为字符串
if(12=='345'){
console.info('判断成立,输出')
}
if(12=='12'){
console.info('12=“12”判断成立,输出')
}
</script>
</body>
</html>
JS数组类型和对象
数组创建
直接创建
var arr = []
创建空数组var arr1 = [1,2]
创建有内容的数据
利用构造函数创建数组
3. var arr1 = new Array()
创建空数组
4. var arr2 = new Array(10)
创建一个长度为10的数组
5. var arr3 = new Array(5,4,3,2,1)
创建数组并初始化
对象创建
直接创建
var obj = {}
创建空对象var obj1 = {a:1,b:2}
创建有内容的对象
利用构造函数创建
var obj = new Object()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
//创建数组
var arr = []
console.log(arr)
var arr1 = [1,2,3]
console.log(arr1)
console.log(arr1.length)
console.log(arr1[0])
//创建对象
var obj = {}
console.log(obj)
var obj1 = {a:1,b:2}
console.log(obj1)
console.log(obj1.a)
</script>
</body>
</html>