JavaScript基础
一、变量
1.1
声明变量用var关键字后接变量名等于值
var number = 'perhaps';
1.2
变量名命名规范
只能使用数字、字母、下划线、美元符$
不能使用关键字、保留字
不能以数字开头
大小写敏感
1.3
同时赋值多个变量
var name = 'perhaps' , age = 18 , addr = 'shanghai'
二、运算符
2.1
算数运算符
加:+
减:-
乘:*
除:/
余数:%
2.2
赋值运算符
值等于:==
横等(值和类型都相等):===
不等:!=
横不等:!==
2.3
关系运算符
大于:>
大于等于:>=
小于:<
小于等于:<=
2.4
逻辑运算符
与:&&
或:||
非:!
2.5
加强运算符
自身加1:++
自身减1:--
自身加等于:+=
自身减等于:-=
自身余等于:%=
自身除等于:/=
三、数据类型
1、数字类型
3.1.1
整数
int()
转换成整数:parseInt()
3.1.2
浮点数
float()
转换成浮点数:paserFloat()
2、字符串类型
3.2.1
字符串:一对单引号或者一对双引号括起来的的数据
字符串是不可变数据类型
var number = 'perhaps';
3.2.2
字符串常用的方法
获取字符串的长度:str.length()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var s = 'PerHaps';
console.log(s.length);
</script>
</body>
</html>
以下省略标签
3.2.3
获取字符串下标为n的字符:str.charAt(n)
<script type="text/javascript">
var s = 'PerHaps';
console.log(s.charAt(3));
</script>
3.2.4
获取下标为n的字符编码:str.charCodeAt(n)
<script type="text/javascript">
var s = 'PerHaps';
console.log(s.charCodeAt(3));
</script>
3.2.5
字符串拼接:str.concat(字符串)
<script type="text/javascript">
var s = 'PerHaps';
console.log(s.concat(' hello world'));
</script>
3.2.6
查找字符第一个第一次出现的位置,如果没找到返回-1:str.lastIndexOf(字符串)
<script type="text/javascript">
var s = 'PerHaps';
console.log(s.lastIndexOf('Haps'));
</script>
3.2.7
替换字符串(注意字符串是不可变数据类型,不会改变原字符串):str.replace(old_str,nwe_str)
<script type="text/javascript">
var s = 'PerHaps';
console.log(s.replace('PerHaps','LanAn'));
</script>
3.2.8
截取字符串:str.substr(start,end)
<script type="text/javascript">
var s = 'PerHaps';
console.log(s.substr(3,5));
</script>
3.2.9
切割字符串:str.split(‘按字符切割返回数组类型’)
<script type="text/javascript">
var s = 'PerHaps';
console.log(s.split('r'));
</script>
3.2.10
将字符串转换为小写:str.toLocaleLowerCase()
<script type="text/javascript">
var s = 'PerHaps';
// 将字符串转换为大写toLocaleUpperCase()
console.log(s.toLocaleLowerCase());
</script>
3、数组类型
3.3.1
可变数据类型
一对中括号括起来的数据
var arr = [1, 2, 3, 6, 5, 4]
数组的方法
3.3.2
索引数组
索引数组中第i个元素:arr[i]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 索引下标为2的元素
console.log(arr[2]);
</script>
</body>
</html>
3.3.3
获取数组的长度:arr.length
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr = [1, 2, 5, 3, 6, 5, 7, 8];
// 获取数组的长度
console.log(arr.length);
</script>
</body>
</html>
3.3.4
以下将省略标签
在数组中添加元素:splice()
// 增
/*
在第0个位置
替换0个,也就是不替换
增加两个元素
*/
arr.splice(0,0,8,9);
console.log(arr);
3.3.5
修改元素:splice()
// 改
/*
将数组中的第0个元素,替换一次,替换后的元素
*/
arr.splice(0,1,8);
console.log(arr);
3.3.6
删除数组中的元素:splice()
// 删
/*
将数组的第0个元素
不替换
删除一次
*/
arr.splice(0,1);
console.log(arr);
3.3.7
向数组末尾追加元素:push()
// 在数组末尾追加一个元素4
arr.push(4);
console.log(arr);
3.3.8
将两个数组合成一个数组:concat()
/* concat不改变原数组,
合并两个数组生成一个新的数组*/
new_arr = arr.concat([99, 88, 77]);
console.log(new_arr);
3.3.9
向数组最前面加入一个元素:shift()
// 向数组最前面添加一个元素
arr.shift(99);
console.log(arr);
3.3.10
向数组最前面加入多个元素:unshift()
// 向数组最前面添加多个元素
arr.unshift(33,44,55);
console.log(arr);
3.3.11
删除数组末端的元素:pop()
// 删除数组末端的一个元素
arr.pop();
console.log(arr);
3.3.12
遍历数组
var arr = [1, 4, 2, 3 ,55]
for (var i = 0; i<arr.length;i++){
console.log(arr[i])
}
4、其他类型
3.4.1
null
:空类
Nna
:非数字
boolean
:布尔类型
undefind
:没定义
四、分支语句
4.1
三种输出方式:
弹框:alert
(‘hello world’)
文档界面:document.write
(‘helloworld’)
控制台:console.log
(‘hello’)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 弹框
alert('hello world');
// 文档界面
document.write('helloworld');
// 控制台
console.log('hello');
</script>
</head>
<body>
<!-- 企业开发者,建议写在body后面 -->
<script type="text/javascript">
/*
这就是多行注释
*/
</script>
<script src="jsss" type="text/javascript" charset="UTF-8">
</script>
</body>
</html>
4.2
公式:
if (条件){
语句
}
4.3
公式:
if (条件){
语句
}
else{
语句
}
4.4
公式:
if (条件){
语句
}
else if(条件){
语句
}
else{
语句
}
4.5
公式:
常用于已知的,不需要范围。
swith(变量){
case 变量值:
语句
break
case 变量值:
语句
break
case 变量值:
语句
break
default:
语句
}
实例:
<script type="text/javascript">
var grade='D';
switch(grade){
case 'A':
console.log('80-100');
break
case 'B':
console.log('70-79');
break
case 'C':
console.log('60-69');
break
case 'D':
console.log('<60');
break
default:
console.log('erro');
}
</script>
4.6
三目运算符:?
// 三目运算符
var res=10<5?'真的':'假的';
console.log(res);
五、Math方法
5.1
返回0-1之间的随机数:Math.random()
四舍五入:Math.round()
返回最大值:Math.max()
返回最小值:Math.min()
向上取整:Math.ceil()
向下取整:Math.floor()
x的y次方:Math.pow(x,y)
开平方:Math.sqrt()
六、for循环
6.1
for (表达式1;表达式2;表达式三){
语句
}
表达式1,表示初始值
表达式2,表示条件
表达式3,表示出口
实例
<script type="text/javascript">
for(var a=1;a<5;a++){
console.log('hellow world');
}
</script>
6.2
for循环嵌套
打印三角形到文档界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
for (var i = 1;i<10;i++){
for (var j = 1;j<i;j++){
document.write('o');
}
document.write('<br />');
}
</script>
</body>
</html>
6.3
打印九九乘法表到文档界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
for (var i = 1;i<10;i++){
for (var j = 1;j<i+1;j++){
document.write(j+'*'+i+'='+i*j+' ' );
}
document.write('<br />');
}
</script>
</body>
</html>
6.4
打印三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
for(var i=0;i<6;i++){
for(var j=0;j<i;j++){
document.write('a');
}
document.write('<br />');
}
</script>
</body>
</html>
6.5
冒泡排序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr = [1, 2, 4, 6, 5, 3, 7, 8];
/*循环趟数,长度减一是因为两两比较,
所以比较的次数只有length-1次*/
for (var i = 0; i<arr.length-1; i++){
for (var j=0; j<arr.length-1-i; j++){
/*相邻的两个元素作比较
如果前一个元素大于后一个元素就交换位置
这是升序排序
如果要降序排序则将>改成<*/
if(arr[j]>arr[j+1]){
var t = arr[j];
arr[j] = arr[j+1];
arr[j+1] = t;
}
}
}
document.write(arr)
</script>
</body>
</html>
七、while循环
7.1
公式
while (条件){
语句
}
实例
<script type="text/javascript">
var a=7;
while(a<100)
{
console.log(a);
a+=7;
}
</script>
<script type="text/javascript">
var b = 0;
while(b<100){
if(b%7===0){
console.log(b);
}
b++;
}
</script>
八、函数
8.1
函数公式:
function声明函数 函数名(){}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function fun(){
console.log('hello world')
}
fun()
</script>
</body>
</html>
九、对象
9.1
对象:object,引用类型,引用对象的实例,也就是实例化
创建对象的方式有多种方法
这里选择选择两种中的其中一种
创建对象:
第一种使用new运算符创建
var object = new Object()
;
object.‘name’ = ‘zhangsan’;
object.‘age’ = 18;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var obj = new Object();
obj.name = 'zhangsan';
obj.age = 18;
console.log(obj);
</script>
</body>
</html>
第二种
var object = {
‘name’ = ‘zhangsan’,
‘age’ = 18,
};
其他方式略;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var obj2 = {
'name':'zhangsan',
'age':19,
//这是对象的方法
'run':function(){
console.log('pao?');
}
}
console.log(obj2);
//调用对象的方法
obj2.run()
</script>
</body>
</html>
十、日期
10.1
Date
调用对象的方法,创建实例。
var d = new Date()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var d = new Date();
// Thu Aug 06 2020 20:05:46 GMT+0800 (中国标准时间)
console.log(d);
// Thu Aug 06 2020
console.log(d.toDateString());
// 20:06:16 GMT+0800 (中国标准时间)
console.log(d.toTimeString());
// 2020/8/6
console.log(d.toLocaleDateString());
// 下午8:07:25
console.log(d.toLocaleTimeString());
// Thu, 06 Aug 2020 12:07:51 GMT
console.log(d.toUTCString());
</script>
</body>
</html>
10.2
定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// var start = 10
// var tmid = setInterval(function(){
// if (start>0){
// console.log(start)
// start--
// }else{
// clearTimeout(tmid)
// }
// },1000)
// var start = 10
// var tmid = setInterval(function(){
// start--
// console.log(start)
// },1000)
var c=10
// 设置变量保存定时器函数返回的id,用于终止定时器
var tmid = setInterval(function(){
// 自减
c--
// 当定时器到0时终止定时器
if ( c === 0){
clearInterval(tmid)
}
// 选择33个随机数,自上而下随机选择,
// 将选到的值给到select
var select = Math.ceil(Math.random()*33)
console.log(select)
},500)
</script>
</body>
</html>
十一、Dom文档
11.1
dom文档对象模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container">
<h2 id="title">hha</h2>
<h3 id="aa">嘻嘻</h3>
<h4 class="cc">我们挨打游戏</h4>
<h4 class="cc">我们都是渣渣</h4>
</div>
<script type="text/javascript">
// 获取标签id
var h2 = document.getElementById('title')
// 修改内容
h2.innerText = '我会dom操作'
// 获取标签id
var h3 = document.getElementById('aa')
// 修改内容
h3.innerText = '不爱'
// 获取标签id
var h4s = document.getElementsByTagName('h4')
// 修改内容
for (var i = 0 ;i<h4s.length;i++){
h4s[i].innerText = '爱'
}
</script>
</body>
</html>
节点获取的三种方式
document.getElementById()
:获取节点id
document.getElementsByTagName()
:获取节点标签,返回元组
document.getElementsByClassName()
:获取相同值的class的节点,返回列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="a">
<p class="m"></p>
<div id="b"></div>
<p class="m"></p>
</div>
<script type="text/javascript">
var a = document.getElementsByClassName('m')
console.log(a)
var b = document.getElementsByTagName('p')
console.log(b)
var c = document.getElementById('a')
console.log(c)
</script>
</body>
</html>
增删改
创建一个元素节点:createElement()
添加一个新子节点到节点的末尾:appendChild()
在当前节点前插入一个新的节点:insertBefore()
将新节点替换成旧节点:repalceChild()
移除节点:removeChild()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="a">
<p id="start"></p>
<div id="b"></div>
<p id="end"></p>
</div>
<script type="text/javascript">
var b = document.getElementById('b')
// 创建标签
var p = document.createElement('p')
// 给元素设置内容
p.innerHTML = '今晚加班'
// 在b中住家p
b.appendChild(p)
// 创建h2标签
var h2 = document.createElement('h2')
h2.innerHTML = '好好复习'
// 通过操作父节点,将h2插入到b之前
b.parentNode.insertBefore(h2,b)
// 替换
// b.parentNode.replaceChild(h2,b)
// 删除
b.parentNode.removeChild(b)
</script>
</body>
</html>
十二、project
12.1
进度条
首先给一个标签创建文本框,在创建一个包含的标签属性
然后获取相应的id,用计时器实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a{
width: 400px;
height: 50px;
border: 1px solid #00BFFF;
}
#b{
height: 50px;
background-color: #FF1493;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
</div>
</div>
<script type="text/javascript">
// 获取标签id
var b = document.getElementById('b');
// 设置起点
var start = 0;
// 计时器
var timeid = setInterval(function(){
// 宽度增加
b.style.width = start + 'px';
// 停止的条件
if (start===400){
clearInterval(timeid);
}
/*每次加10,放在这里控制与外边框宽度相等
如果放在前面判停止的条件要加10个像素的宽度*/
start+=10
},1000)
</script>
</body>
</html>
12.2
换皮肤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a{
height: 500px;
border: 1px solid #FF1493;
/* background-repeat: no-repeat; */
}
#b{
height: 300px;
width: 300px;
border: 1px solid #00BFFF;
position: relative;
left: 300px;
top: 100px;
background-repeat: no-repeat;
background-position: center;
}
.select1{
background-image: url(./img/bg1.gif);
}
.select2{
background-image: url(img/2.jpg);
}
.select3{
background-color: #00BFFF;
}
.select4{
background-color: #FF1493;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<button onclick="pi1()">皮肤一</button>
<button onclick="pi2()">皮肤二</button>
</div>
<script type="text/javascript">
function pi1(){
var a = document.getElementById('a');
a.className = 'select1';
var b = document.getElementById('b');
b.className = 'select2';
console.log('换了');
}
function pi2(){
var a = document.getElementById('a');
a.className = 'select3';
var b = document.getElementById('b');
b.className = 'select4';
console.log('换了');
}
</script>
</div>
</body>
</html>
12.3
隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
width: 700px;
height: 50px;
border: 1px solid salmon;
}
.select1{
background-color: #00BFFF;
}
.select2{
background-color: #FF1493;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
var list = document.getElementsByTagName('li')
for (var i = 0 ;i<list.length;i++){
if(i%2===0){
list[i].className = 'select1';
}
else{
list[i].className = 'select2';
}
}
</script>
</body>
</html>
12.4
图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/1.jpg" onclick="one()">;
<img src="img/2.jpg" onclick="two()">;
<img src="img/3.jpg" onclick="three()">;
<hr >;
<img src="img/bg2.jpg" id="qie">;
<script type="text/javascript">
function one(){
var qie = document.getElementById('qie');
qie.src = "img/1.jpg";
}
function two(){
var qie = document.getElementById('qie')
qie.src = "img/2.jpg";
}
function three(){
var qie = document.getElementById('qie');
qie.src = "img/3.jpg";
}
</script>
</body>
</html>
十三、事件
13.1
事件:产生然后得到处理操作。
事件的模式:内联模式、脚本模式
事件的分类:鼠标事件、键盘事件、HTML事件。
13.2
鼠标事件
onmouseover:鼠标移入到某个元素内都会触发
onmouseout:鼠标移出某个元素时都会触发
onmouseenter:鼠标只在移入本元素时调用一次
onmouseleave:鼠标只在移出本元素时触发一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="images3/big_1.jpg" >;
<img src="images3/big_10.jpg" >;
<img src="images3/big_2.jpg" >;
<script type="text/javascript">;
var imgs = document.getElementsByTagName('img')
for (var i = 0 ;i<imgs.length-1;i++){
imgs.index = i;
onmouseover = function(){
console.log('comein');
}
}
</script>
</body>
</html>
13.2
键盘事件
onkeydown:按下了键盘上的某个键
keypress:按下了键盘上的字符键
keycode:按下了键盘上的ACll编码键,返回编码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="images3/big_1.jpg" >
<img src="images3/big_10.jpg" >
<img src="images3/big_2.jpg" >
<script type="text/javascript">
// 三者同时存在只能生效最后一个
// onkeydown = function(event){
// console.log(event.shiftKey)
// }
// onkeydown = function(event){
// console.log(event.ctrlKey)
// }
// onkeydown = function(event){
// console.log(event.altKey)
// }
onkeydown = function(event){
console.log(event.keyCode);
console.log(event);
console.log(event.layerX);
console.log(event.layerY);
}
// 返回字符
onkeypress = function(event){
var letter = String.fromCharCode(event.keyCode);
console.log(letter);
}
</script>
</body>
</html>
13.3
HTML事件
windows.onload:当页面完全加载后触发
select:当用户选择文本框的中的内容时触发
scroll:当用户滚动带滚动条的元素时触发
change:当文本框(input)或(textarea)内容改变且失去焦点后触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.select{
width: 100px;
height: 100px;
border: 1px solid #FF0000;
}
</style>
<script type="text/javascript">
window.onload = function(){
console.log('加载完成了');
}
</script>
</head>
<body>
</body>
</html>
13.4
事件流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a{
width: 300px;
height: 300px;
border: 1px solid #FF0000;
}
#b{
width: 150px;
height: 150px;
border: 1px solid #FF0000;
}
#c{
width: 75px;
height: 75px;
border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<div id="c">
</div>
</div>
</div>
<script type="text/javascript">
// 事件流,从外向内,从内向外
// evt.stopPropagation()停止或者切断
var a = document.getElementById('a');
var b = document.getElementById('b');
var c = document.getElementById('c');
a.onmousedown = function(evt){
console.log('a');
evt.stopPropagation();
}
b.onmousedown = function(evt){
console.log('b');
evt.stopPropagation();
}
c.onmousedown = function(evt){
console.log('c');
evt.stopPropagation();
}
</script>
</body>
</html>