本文介绍了JavaScript的基础知识，包括警告窗alert、数据类型与变量定义、报错类型、函数使用、预解析与变量提升、作用域、延时计时器setTimeout和setInterval、控制页面方法、控制台输出、DOM操作如getElementById、点击事件onclick、元素内容操作以及鼠标和表单事件。文章详细阐述了JavaScript在网页交互中的重要功能和常见操作。
文章目录
- 前言
- 1.JS---alert(警告窗)
- 2.JS---常用的六种数据类型与变量定义
- 3.JS---报错类型
- 4.JS---函数的使用
- 5.JS---预解析与变量提升
- 6.JS中的作用域--window
- 7.JS中的延时计时器--setTimeout--setInterval
- 8.JS中的控制和打开浏览器页面--open()--close()
- 9.JS控制台输出方法与常用弹窗--prompt:输入弹窗--confirm:确认弹窗*
- 10.JS中document对象--ECMAScript、DOM、BOM;
- 11.JS操作元素的基本流程--getElementById()
- 12.给予元素点击事件--onclick
- 13.js中括号与逗号的使用
- 14.使用js获取节点（标签）名称--nodeName
- 15.js操作input内容--oniput和onchange
- 16.js选中指定标签类/class类元素--getElementsByTagName()
- 17.js中if-else、for循环、switch使用
- 18.父级元素--子级元素--子集节点的获取--parentNode--children--childNodes
- 19.JS生成元素与尾部插入元素--createElement()--appendChild()
- 20.JS中的鼠标操作
- 21.JS表单失去与获取焦点事件--onfocus--onblur
- 22.JS中可见高度与宽度属性--offset/client
前言
html:网页元素；
css:网页元素的属性介绍；
Javascript：网页元素的功能介绍；
1.JS—alert(警告窗)
两种基本运行方式：内嵌式与外链式；（使用外链式时内嵌式会失效）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
<script type="text/javascript" src='alert.js'>
alert("密码错误")
</script>
</head>
<body>
</body>
</html>
// 外链文件.js
alert("未知错误")
2.JS—常用的六种数据类型与变量定义
变量定义：
<script type="text/javascript">
var alertvalue="网络异常"; /变量定义/
alert(alertvalue);
var alertvalue="正在重新连接"; /变量重新赋值/
alert(alertvalue);
</script>
ecmascript:JS的编译标准；
undefined:没被定义的var 变量；
Boolean:布尔值也就是真假值；（ture or flase)
Object:对象是拥有属性和方法的数据。
（函数也可以作为数据类型----引用类型）
可以使用typeof()来检测数据类型；
<script type="text/javascript">
var alertvalue="正在重新连接";
alert(typeof(alertvalue));
</script>
3.JS—报错类型
JS可以通过浏览器检测自己的错误类型。（浏览器右键–>检查—>控制台(console))
异常错误：错误JS内容之前的代码可以执行，之后的执行不了；
<script type="text/javascript">
var al =99;
var alertvalue="正在重新连接";
alert(typeof(alertvalue));
alert(alertvalu);
alert(typeof(al));
</script>
语法错误：整个JS内容失效；
<script type="text/javascript">
var al =99;
var alertvalue="正在重新连接";
alert(typeof(alertvalue));
%%%ajdffawiefjoisdfjoasidjf
alert(typeof(al));
</script>
4.JS—函数的使用
JS函数类似于方法，我可以封装一个函数，在需要的地方调用；
常见的声明的方式：
function+名字：可以在任意地方调用；
<script type="text/javascript">
leo();
function leo(){
alert(1);
alert(10);
alert(100);
};
</script>
使用var声明只可以在var之后调用；
<script type="text/javascript">
var leo= function () {
alert(1);
alert(10);
alert(100);
};
leo();
</script>
5.JS—预解析与变量提升
JS会对代码进行两次解析，第一次的粗糙解析叫预解析，预解析除了会审查一遍有没有语法错误外，还会进行变量提升；
变量提升：将变量从JS中提升到最上面，先提升var变量（ 不赋值），再以var的形式提升函数的内容；
变量提升是看不见且默认进行的；
源代码：
<script>
best();
var best =5;
function best(){
alert(typeof(1));
};
alert(best);
</script>
预处理：
<script>
/* 预处理部分
var best;
var best=function(){
alert(typeof(1));
};
*/
best();
var best =5;
// 此时的function已经由预处理将其提升了；内容早就被赋值給了best;
function best(){
alert(typeof(1));
};
alert(best);
</script>
源代码：
<script>
alert(best);
var best;
</script>
预处理：
<script>
//var best; 预处理提前变量
alert(best);
var best;
</script>
以上代码输出结果:弹窗显示123(函数内a为全局变量)
以上代码输出结果:一个弹窗显示undefined/ 一个弹窗显示123
函数内a为局部变量。alert(a)内a为全局变量.
以上代码输出结果:函数内未定义变量a所以a为全局变量.
输出：一个窗口显示123/一个窗口显示456
以上代码输出结果:函数定义为fun(a), a为形参且为局部变量，因为没有传参所以第一个窗口显示undefined.另一个窗口因为函数内部为局部变量不影响全局变量a所以显示123.
6.JS中的作用域–window
作用域：作用在一定区域才有效的值，出了这个区域值无效；
常见的作用域：function和script标签;每个作用域都会触发预解析；function内部（局部变量）也会进行预解析 可以在function内部定义全局变量；
JS中最大的全局环境叫window，我们所有的操作都是在window中进行，定义window变量时可以省略window(即定义全局变量)。 全局变量不进行预解析。
<doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ation scope</title>
<script type="text/javascript">
// 预解析 var a;
// 预解析 var a=30;
//预解析 var joyboy=function (){
// var a; 预解析
// alert(typeof(a));
// var a=20;
//alert(typeof(a));
// }
var a=30;
function joyboy(){
alert(typeof(a));
var a=20;
alert(typeof(a));
};
joyboy();
</script>
</head>
<body></body>
</html>
7.JS中的延时计时器–setTimeout–setInterval
setTimeout:window上有个延时定时器方法-setTimeout,时间单位是毫秒；
1000毫秒等于1秒；
clearTime:关闭延时定时器；
setInterval:每间隔固定时间后重复函数内操作；
clearInterval:关闭轮询定时器；
没被延时的内容可以被优先展示；
<script type="text/javascript">
var a='no mercy';
var timer = setInterval(function(){
alert(a);
},1000);
setTimeout(function()
{
a='no love';
},1500);
setTimeout(function()
{
a='no lie';
},2500);
//var timer = setTimeout(function(){
alert('no mercy');
},3000);
// clearTimeout(timer);
// alert('no love');
</script>
8.JS中的控制和打开浏览器页面–open()–close()
open():直接跳转（）中的网址或者文件；
close():可以直接关闭当前浏览器窗口；
直接将网页地址复制到浏览器内是无法被close关闭的；
<script type="text/javascript">
open('http://baidu.com');
// close();
</script>
9.JS控制台输出方法与常用弹窗–prompt:输入弹窗–confirm:确认弹窗*
\n:“转义换行符”；
console.log:控制台输出信息；
console.warn:控制台输出警告信息；
console.error:控制台输出错误提示信息；
prompt:输入弹窗
confirm:确认弹窗
<script type='text/javascript'>
console.log("发现新版本");
console.error("版本太老");
console.warn("猫是最受欢迎的宠物之一，许多人都很欣赏它们可爱的存在。它们有一种独特的与主人交流的方式，最常见的是它们柔和的咕噜声。然而，有些猫会把它们寻求注意力的行为发挥到极致，比如咬你的脚。虽然咬脚有时看起来很可爱，但随着时间的推移，你可能也会有受伤的风险。那么猫咪为什么会咬你的脚，我们又该如何训练它们呢？");
prompt("1+1");
confirm("1+1=2");
</script>
confirm弹窗：
prompt:
10.JS中document对象–ECMAScript、DOM、BOM;
JS由三部分组成，分别是ECMAScript、DOM、BOM;
ECMAScript: JS编写标准；
DOM: document object model 文档对象模型
document object就是☞网页文件里的所有元素即所有html标签
BOM: browser Object Model 浏览器对象模型 对象为浏览器的功能
document.write():向html中写入元素对于输入文本会自动叠加；
document.URl:html网页的地址/网址；
document.domain:域名；
<script type="text/javascript">
// var a='';
// var a1='cash';
// var a2=null;
// var num=0;
// clearInterval(a2);
// a2=setInterval(function(){
// a+=a1[num];
// num++;
// document.title = a;
// },1000);
// setTimeout(function(){
// clearInterval(a2);
// }, a1.length*1000);
// console.log(document.URL); 控制台输出网页网址
// console.log(document.domain); 控制台输出网页域名 本地文件无域名
var str ='
幸好的是，几天之后，各大城市的疫情防控措施陆续解绑、优化，《阿凡达2》赶上了第一波回归影院的人潮。截至发稿前，《阿凡达2》在中国内地的票房超过了10亿人民币，全球票房累计超过了12亿美元。
如何评价这部作品，将会是这几个月里全球观众和影评人时常讨论的问题，直到《阿凡达3》上映依然会被提起。不少看完《阿凡达2》的影评人和影迷都认为，詹姆斯·卡梅隆的电影证明了，大银幕的观影体验是流媒体永远无法提供的。卡梅隆本人却没有那么乐观，他在此前的采访中说：
“这个世界与我当初写这个故事的时候已经完全不同了，疫情和流媒体给电影带来了双重打击。或者，《阿凡达2》将让大家重新找到去电影院的意义，这部电影肯定可以做到这一点。问题是现在有多少人还在乎这件事呢？”最近，卡梅隆导演接受了《新周刊》的专访，他说《阿凡达2》是他拍过的最私人的一部电影。在进入《阿凡达2》之前，让我们先回到13年前的《阿凡达》。';
var num=0;
a = setInterval(function(){
document.write(str[num]); //文档里写入内容，可自动叠加；
num++;
},10);
setTimeout(function(){
clearInterval(a);
},str.length*10);
</script>
11.JS操作元素的基本流程–getElementById()
如果想通过javascript来操作元素，必须先要让元素进行加载，利用window.onload方法可让网页先加载之后再执行Javascript;
可以使用getElementById()来锁定id元素；
操作元素样式格式：document.getElementById().style.样式名= “样式值”;
JS可通过选取DOM元素来控制元素id和class;
选中id: document.getElementById().id
选中class: document.getElementById().className;
+=: 叠加符号；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>getelement</title>
</head>
<style type="text/css">
*{margin:0px;padding:0px;}
#a{width:200px;height:200px;border:solid black 1px;background:red;float:left;margin-right:100px;}
</style>
<script type="text/javascript">
window.onload= function(){
document.getElementById("a1").style.float ='left';
document.getElementById("a1").style.width ='200px';
document.getElementById("a1").style.height ='200px';
document.getElementById("a1").style.backgroundColor='red';
document.getElementById("a1").style.border="black 1px solid";
};
</script>
<body>
<div id=”a“> </div>
<div id=“a1”> </div>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
var b=document.getElementById("a");
b.id='box';
b.style.backgroundColor='yellow';
b.onclick =function(){
this.id="kkk";
this.style.backgroundColor='blue';
console.log(this.id);
};
};
</script>
<script type="text/javascript">
window.onload=function(){
var b=document.getElementById("a");
b.className='box';
b.style.backgroundColor='yellow';
b.onclick =function(){
b.style.backgroundColor='red';
this.className+=' bow';
console.log(this.className);
};
};
</script>
12.给予元素点击事件–onclick
JS选中元素后可以利用onclick属性赋值函数，给预元素点击事件；
利用变量存储选中元素,方便操作；
也可以利用函数的变量提升属性給onclick赋值来产生点击事件；
<script type="text/javascript">
/1//
// window.onload=function(){
// document.getElementById("a1").onclick =function(){
// document.getElementById("a").style.backgroundImage='url(javascript.jfif)';
// document.getElementById("a").style.backgroundSize='cover';
// };
// };
///1
2///
// window.onload= function(){
// var a8=document.getElementById('a');
// var a9=document.getElementById('a1');
// a9.onclick =function(){
// a8.style.backgroundImage='url(javascript.jfif)';
// a8.style.backgroundSize='cover';
// };
// };
2///
3///
// window.onload= function(){
// function joy(){
// document.getElementById("a").style.backgroundImage='url(javascript.jfif)';
// document.getElementById("a").style.backgroundSize='cover';
// };
// document.getElementById("a1").onclick =joy;
// };
3///
</script>
13.js中括号与逗号的使用
逗号和c语言里没什么区别；
[‘’]:相当于.
<script type="text/javascript">
window.onload=function(){
var b=document.getElementById("a"), g = 'style',f ='background';
b[g][f]='red';
function to(g,content){
b['style'][g]=content;
};
b['onclick'] =function(){
console.log(g);
to('backgroundColor','blue');
console.log(g);
};
};
</script>
14.使用js获取节点（标签）名称–nodeName
nodeName:获取大写的节点名称；
注意标签定义不可使用数字和中文；只能用英语；
自定义标签默认行内式；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nodename</title>
</head>
<style type="text/css">
*{margin:0px;padding:0px;}
</style>
<script type="text/javascript">
window.onload=function(){
var div=document.getElementById("div"),span=document.getElementById("span"),k49=document.getElementById("k49");
div['onclick'] =function(){
alert(div.nodeName);
};
span['onclick'] =function(){
alert(this.nodeName);
};
k49['onclick'] =function(){
alert(this.nodeName);
};
};
</script>
<body>
<div id='div'>1 1</div>
<span id='span'>2 2<span>
<k49 id='k49'>3 3</k49>
</body>
</html>
15.js操作input内容–oniput和onchange
JS可以利用input的value属性来操作value内容；
JS常用监听input的value事件有oniput和onchange的两种；
oninput:当value改变就会触发；
onchange:当value改变后当前元素失去焦点时触发；（按下enter触发或者鼠标离开元素位置点击左键）；
input输入和输出数据类型都为字符串类型；
Number(text.value)：将text.value的数据类型从字符串类型转为数字类型；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input</title>
</head>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=function(){
var text=document.getElementById("text"),button=document.getElementById("button"),number=document.getElementById("number"),range=document.getElementById("range"),color=document.getElementById("color");
button.onclick = function(){
console.log(range.value);
console.log(typeof(range.value));
console.log(text.value);
console.log(typeof(text.value));
console.log(color.value);
console.log(typeof(color.value));
console.log(Number(number.value)+10);
console.log(typeof(number.value));
};
};
</script>
<body>
<input type="text" name="" id='text' value='account:' maxlength="16">
<input type="number" name="" id='number' >
<input type="range" name="" id='range' min='1' max='100' >
<input type="button" name="" id='button' value='登录'>
<input type="color" name="" id='color' >
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input</title>
</head>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=function(){
var div=document.getElementById("div"),number=document.getElementById("number");
number.onchange= function(){
div.style.width=div.style.height=number.value+'px';
div.style.backgroundColor='red';
};
// number.oninput= function(){
// div.style.width=div.style.height=number.value+'px';
// div.style.backgroundColor='red';
// };
};
</script>
<body>
<input type="number" value ='' name="" id='number' min="1" max='1000'>
<div id='div'></div>
</body>
</html>
16.js选中指定标签类/class类元素–getElementsByTagName()
getElementsByTagName():选中指定标签类元素后，元素计数顺序为从上到下，从左到右，从零开始计数；使用时要将下标精确到具体某个元素；
getElementsByClassName():同上；
<script type="text/javascript">
window.onload=function(){
// console.log(document.getElementsByTagName('div'));
// document.getElementsByTagName('div')[0].style.background='red';
// document.getElementsByTagName('div')[1].style.background='orange';
// document.getElementsByTagName('div')[2].style.background='yellow';
// document.getElementsByTagName('div')[3].style.background='green';
//改变范围
document.getElementById('div').getElementsByTagName('div')[0].style.background= 'pink';
document.getElementById('div').getElementsByTagName('div')[3].style.background= 'pink';
};
</script>
17.js中if-else、for循环、switch使用
if(){} else if(){} else{};
逻辑判断语句，if可以单独使用,()中条件判断结果会自动转化为布尔值(0为flase,1为ture)；else不可进行条件判断；
for循环和c语言使用几乎一样；
注意：利用for循环給相同类型元素给预触发事件时若利用初始条件的变量名，触发事件时变量名的值为循环结束时的值；
for(初始条件；结束条件；初始条件变化)
{}；
switch:和c语言的switch就是一个玩意；
switch()
{
case 1:
break;
case 2:
break;
case 5:
break;
case 4:
break;
default:
break;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>if else ---for----switch</title>
<style type ="text/css">
div{width:100px;height:100px;background:black;}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
//不利用window.onload 根据从上至下的编译顺序将script下移到所有元素之后；
<script type="text/javascript">
var a=document.getElementsByTagName('div');
for(var i=0;i<a.length;i++)
{
a[i].style.float='left';
};
for(var k=0;k<a.length;k++)
{
if(k%2==0)
{
continue;
}
a[k].style.cssText='width:200px;height:200px;background:red;float:left';
};
</script>
</body>
</html>
<script type="text/javascript">
switch(1)
{
case 1:
alert(1);
break;
case 2:
alert(2);
break;
case 3:
alert(3);
break;
default:
alert('else');
}
</script>
18.父级元素–子级元素–子集节点的获取–parentNode–children–childNodes
parentNode: this.parentNode可以获取当前元素的父级元素；最高级的父级元素是document;
children:this.children可以获取当前元素所有的第一层子集元素；想使用children当前元素必须是非群组状态；
选择之后的子集元素若是群组状态，可使用下标来操纵单个子集元素；
js可以使用childNodes获取当前元素下的所有节点，使用下标找到相应节点；文本节点具有data属性可以进行赋值与获取；多行回车作为一个文本节点；
parentNode：
<body>
<!-- <div>
<div id='A'>
<button id='a1'>click</button>
<div id='a2'></div>
</div>
</div> -->
<script type="text/javascript">
// a1.onclick=function()
// {
// this.parentNode.style.cssText='width:200px;height:200px;background:red';
// this.parentNode.parentNode.style.cssText='width:400px;height:400px;background:black';
// console.log(this.parentNode.parentNode.parentNode.parentNode.parentNode);
// };
</script>
</body>
children:
<body>
<div id='ak'>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div class='joy'></div>
<div class='boy'></div>
<div class='lf'></div>
</div>
</div>
<script type="text/javascript">
// for(var a=0;a<ak.children[1].children.length;a++)
// {
// ak.children[1].children[a].innerHTML=ak.children[1].children[a].className;
// };
</script>
childNodes：
<body>
<div id='l666'>
bilibili
<div>jkjk</div>
i
</div>
<script type="text/javascript">
console.log(l666.childNodes);
l666.childNodes[0].data='libilibi';
</script>
19.JS生成元素与尾部插入元素–createElement()–appendChild()
createElement(）：创造指定元素；
a.appendChild(b) ：在a元素内部第一层元素的尾部插入b元素；
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>creatELement</title>
<style type='text/css'>
#ogskip{width:300px;height:300px;background:yellow;}
</style>
</head>
<body>
<div id='ogskip'></div>
<script type="text/javascript">
var a=document.getElementById('ogskip');
var b=document.createElement('div');
b.id='og';
b.style.cssText='width:200px; height:200px; background:red;';
b.className='skip';
b.innerHTML='ogogogogogogogog';
console.log(a,b);
ogskip.appendChild(b);
</script>
</body>
</html>
20.JS中的鼠标操作
ondblclick:双击事件；
onmouseover:鼠标移入事件；
onmouseout:鼠标移出事件；(onmouseout与onmouseover的权重比hover高);
onmousemove:鼠标移动事件；（只要鼠标在指定范围内移动1px就会触发onmousemove)
onmousedown/onmouseup:鼠标点击事件可以看作是onclick的分解；可以利用return false，来取消事件的默认行为；比如按下鼠标键选中文本时return false使文本无法被鼠标点击选中；
oncontextmenu:操作指定元素右键；可以通过屏蔽右键元素的默认属性来屏蔽掉右键菜单；
<script type="text/javascript">
// a.ondblclick=function(){
// alert('joyboy');
// };
</script>
<script type="text/javascript">
// var c=0;
// a.onmouseover =function(){
// c++;
// if(c==1)
// {
// offset.style.background='red';
// }else if(c==2)
// {
// offset.style.background='yellow';
// }else
// {
// offset.style.background='blue';
// c=0;
// };
// };
</script>
<script type="text/javascript">
// offset.onmouseover =function(){
// offset.style.background='yellow';
// };
// offset.onmouseout =function(){
// this.style.background='red';
// };
// window.onmouseover=function(){
// offset.style.background='blue';
// };
// window.onmouseout=function(){
// offset.style.background='green';
// };
</script>
<script type="text/javascript">
var r=0,g=0,b=0;
offset.onmousemove=function(){
r++;
g++;
b++;
this.style.backgroundColor='rgb('+r+','+g+','+b+')';
};
</script>
<script type="text/javascript">
offset.onmouseup=function()
{
console.log('up');
};
offset1.onmousedown=function()
{
console.log('down');
return false;
};
offset.onclick=function()
{
console.log('click');
};
</script>
<script type="text/javascript">
document.oncontextmenu=function(){
offset1.style.display='block';
offset1.style.left='100px';
offset1.style.top='100px';
return false;
};
</script>
21.JS表单失去与获取焦点事件–onfocus–onblur
获取表单事件：JS可以利用onfocus来设定元素获取焦点；也可以使用focus方法来主动获取焦点；元素也可以添加autofocus属性来获取焦点；整个浏览器内可以获取焦点的元素只可以有一个；
失去表单事件：JS可以利用onblur来设定元素失去焦点；也可以使用blur方法来主动失去焦点；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>onblur</title>
<style type="text/css">
#div{display:none};
</style>
</head>
<body>
<button id='btn'>touch</button>
<input type="text" id='int' name="">
<div id='div'>请不要输入数字1</div>
<script type="text/javascript">
btn.onfocus=function(){
int.focus();
setTimeout(function(){
int.value+= 'j';
},300);
setTimeout(function(){
int.value+= 'o';
},600);
setTimeout(function(){
int.value+= 'y';
},900);
setTimeout(function(){
int.value+= 'b';
},1200);
setTimeout(function(){
int.value+= 'o';
},1500);
setTimeout(function(){
int.value+= '1';
},1800);
};
int.onfocus=function()
{
div.style.display ='block';
};
int.onblur=function(){
if(int.value =='joybo1')
{
div.style.color ='red';
}else
{
div.style.display ='none';
};
};
</script>
</body>
</html>
22.JS中可见高度与宽度属性–offset/client
JS中可以使用offset和client两种属性快速获取元素的可视距离；
offset对应的是width/height+padding+border的值
client对应的是width/height+padding的值
<body>
<button id='btn'>action</button>
<div id='div'></div>
<script type="text/javascript">
var timer=null;
btn.onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
if(div.offsetWidth==200)
{
clearInterval(timer);
return false;
}
div.style.width=div.offsetWidth+1+'px';
},30)
};
</script>
</body>
扫一扫
9420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
