文章目录
- JavaScript
- 介绍
- 基础
- 运算符、数据转换
- 控制语句
- if-else语句
- switch语句
- for语句
- while语句
- try语句
- 对象
- String字符串对象
- Array数组对象
- Date
- RegExp正则
- Math
- 声明提前
- BOM对象
- Window对象
- Location对象
- History对象
- DOM对象(DHTML)
- 节点的方法
- 寻找节点对象的方式
- DOM Event(事件)
- 增删改查
- 示例
- 作用域
JavaScript
介绍
JavaScript是一种直译式脚本 语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
ECMA
ECMAscript是基于Netscape javaScript的一种标准脚本语言。它也是一种基于对象的语言,通过DOM可以操作网页上的任何对象。可以增加、删除、移动或者改变对象。使得网页的交互性大大提高。
基础
- 变量
//初始化变量
var a=1, b=2;
var s='wolf';
var f=3.3;
- 注释
/*1.
注释
*/
// 2. 注释
- 常量
- 标识符
- 数据类型
- Number:数字
Null:空对象,占一个对象空间。
String:字符串
Undefined:var a;声明一个变量不赋值
Boolean:布尔类型
object:
array;
运算符、数据转换
- 数据类型转换
Number+ String= String:数字被转换成字符串与字符串拼接
Number+ Boolean= Number+ 1/0:True == 1 /False == 0.
String+ Boolean= String;
parseInt(3.14); --> 3 ;将数字类型转换成整型;取整数部分
parseInt(“3.54m”); --> 3;将字符串前面的数字转换成整型;
parseInt(“n3.14n”); --> 将字符串转换成数字失败时就是NaN,属于Number;
NaN数据在表达式中,结果就一定时False,除了 != ; - 查看数据类型
var n = null;
typeof(n); // 只能判断基础类型
//--> object;
- 运算符
var b = a++; //a += 1
// 先赋值,后运算,--> b==1,a==2;
var b = ++a;
// 先运算,后赋值, --> b==2, a==2;
c = b + '314hello'; //NaN; 在运算中不能将含有非数字的字符串转换成数字;
- 逻辑运算符
&& 与
|| 或
& 按位与
| 按位或
>> 左移
<< 右移
~ not - 赋值运算符
全等于、全不等于(不进行数据转换,直接进行比较):
2 == '2'; --> true;
2 === '2'; --> false;
4 != '4'; --> false;
4 !== '4'; --> true;
- 等性运算符
null == undefined --> true
'NaN' == NaN --> false
4 == NaN --> false
NaN == NaN --> false
NaN != NaN --> true
false == 0 --> true
true == 1 --> true
true == 2 --> false
undefined == 0 --> false
null == 0 --> false
5 == '5' --> true
- 关系运算符
25 < 3; --> false
25 < '3'; --> true
//两边数据类型分别为字符串和数字时,转换成数字比较
- boolean运算符*
- void()
void运算符对任何值返回undefined 。用于避免输出不应该输出的值。
控制语句
if-else语句
<script>
if (bool){
alert()
} else if(bool){
alert()
}else{
alert()
}
</script>
switch语句
var x=1;
switch(x){
case 1:alert(1);brek;
case 2:alert(2);brek;
case 3:alert(3);brek;
case 4:alert(4);brek;
default:alert(5)
}
//直接将x与case后面的数据比较,相同时执行后面的代码,都不相同时执行default,每个case后面加break;
//不用判断条件语句,相比if-else语句效率更高
for语句
// 格式一
var a = [1, 'i', false]
for (var i in a){
console.log(i);
console.log(a[i]);
}
// ---> 结果i为0,1,2
// 通过a[i]索引才能得到a中的值
// 格式二
for (var i=0;i<10;i++){
console.log(i);
}
// js中for循环计算1~100的和
var sum=0;
for (var i=1;i<101;++i){
sum+=i;
}
alert(sum); // 在浏览器中显示弹窗;
for (var i=1;i<7;i++){
document.write('<h'+i+'>h'+i+'</h'+i+'>')
}
obj = {'1':'111'}; //一个对象,取值类似python中的字典
document.write(obj,'=====',typeof(obj), '=====')
for (var i in obj){
document.write(i, '======', obj[i])
}
[object Object]=object=1======111
while语句
// while写1~100的和
var sum=0,i=0;
while(i<101){
sum += i;
i++;
}
document.write(sum)
try语句
try{
// 代码块
}catch (e){
// try代码块报错时,执行catch代码块
// e是一个局部变量,指向报错对象
}finally{
// 在此try代码块中,一定会执行的代码快
}
对象
- 核心(ECMAScript)
- 文档对象模型(DOM:Document object model (整合js,css,html)
- 浏览器对象模型(BOM):Broswer object model(整合js和浏览器)
- 11种内置对象:array、string、date、math、boolean、number、function、global、error、regexp、object
- function
// 方法1
function func1() {
alert(3);
return 0
}
var ret=func1();
alert(ret)
// 方法2,Function中F需要大写
var foo1=new Function('a','b','alert(a+b)');
foo1(1, 2)
属性和方法:
alert(foo1.length);
// 参数的个数
function foo(){
var a=3;
}
foo();
alert(a);
// --> a is not defined;
function foo(){
a=3; // 直接写a=3; a为全局变量
var b=5;
b=6; // 也可能是局部变量的修改,所以尽量使用局部变量;
}
func();
alert(a)
var s='wolf';
s instanceof String // --> true
var n=2;
n instanceof String // --> false
String字符串对象
document.write(s.length) // 字符串长度
document.write(s.bold(),'<br>'); // 返回加粗字符串 <b>s<b>
document.write(s.sup(),'<br>'); // 返回上标格式字符串 <sup>s</sup>
document.write(s.italics(),'<br>'); // 返回不同字体格式
s.toLowerCase(); // 转换为小写
s.toUpperCase(); // 转换为大写
s.charAt(index); // 返回index索引下的字符
s.charCodeAt(index); // 返回index索引下字符的unicode编码
s.indexOf('l'); // 取str在s中的索引
s.lastIndexOf("l"); // 从右往左倒着找索引
s.match('ol'); // 返回包含所有匹配结果的数组,没有匹配返回null,参数为正则表达式或者字符串
s.search('ol'); // 返回匹配字符串的首字符位置索引
s.substring(start, end) // 截取字符串start-end的部分
s.substr(start, length) // 截取字符串start-(start+length)的部分
s.slice(start, end) 截取字符串start-end的部分,end可以为负数:-1为最后一个数.-2为倒数第二个数
s.replace(old, new) // 替换字符串
s.split(",") // 将字符串按,分割
s.concat(s2) // 返回s+s2
Array数组对象
// 创建方法1
var a=[1,2,3];
// 创建方法2
var a1=new Array[1,2,3,4,5]
// 创建方法3
var a2=new Array(5); // 一个数字时代表数组长度,占5个位置,但长度是可变的,都是defined类型
// 初始化数组对象
a2[0]=1;
a2[1]='a2';
a2[2]=true;
a2[3]=3;
a2[4]='wolf';
// 直接创建二维数组
a2[3][0]=1;
a2[3][1]=2;
a2[3][3]=3;
a.length; //对象长度
var s=a.join('-') // 以-连接数组
// python中的join是字符串方法,s='-'.join(['1','2','3'])
js中的join是数组方法:s=(['1','2','3']).join('-')
a.toString(); // 转换成字符串
a.slice(2, 4) // 切片
a. splice(start, deleteCount, value, ...)
// 从start位置删除deletecount个参数,再添加value(可省略)
a.push(value, ...) // 压栈,在数组最后添加value
a.pop() // 弹栈,删除最后一个元素
a.unshift(value,...)// 在数组最开始位置添加value
a.shift() // 删除第一个元素
a.reverse() // 反向
a.sort() // 按ascii码排序
// 按数字大小排序
function foo(a,b){
if (a>b){
return 1;
}else if (a<b){
return -1;
}else{
return 0;
}
}
a.sort(foo) // --->得到按数字大小排序
function foo(a,b){
return a-b
}
Date
//方法1:不指定参数
var d=new Date();
d.toLocaleString( );
//方法2:参数为日期字符串
var d2=new Date("2019/01/01 00:00");
d2.toLocaleString( );
var d3=new Date("01/01/2019 00:00");
d3.toLocaleString( );
//方法3:参数为毫秒数
var d3=new Date(1000); // 在1970/1/1 8:00:00加1000毫秒,8点是因为中国时间为东八区
d3.toLocaleString( );
d3.toUTCString(); // unix发布标准时间
//方法4:参数为年月日小时分钟秒毫秒
var d4=new Date(2019,1,1,00,00,0,100);
alert(d4.toLocaleString( ));
//毫秒不直接显示
getDate() // 获取日
getDay () // 获取星期
getMonth () // 获取月(0-11)
getFullYear () // 获取完整年份
getYear () // 获取年
getHours () // 获取小时
getMinutes () // 获取分钟
getSeconds () // 获取秒
getMilliseconds () // 获取毫秒
getTime () // 返回累计毫秒数(从1970/1/1午夜)
setDate(day_of_month) // 设置日
setMonth (month) // 设置月
setFullYear (year) // 设置年
setHours (hour) // 设置小时
setMinutes (minute) // 设置分钟
setSeconds (second) // 设置秒
setMillliseconds (ms) // 设置毫秒(0-999)
setTime (allms) // 设置累计毫秒(从1970/1/1午夜)
getTimezoneOffset() // 返回本地时间与GMT的时间差,以分钟为单位
toUTCString(); // 返回国际标准时间字符串
toLocalString(); // 返回本地格式时间字符串
Date.parse(x); // 返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x); // 返回累计毫秒数(从1970/1/1午夜到国际时间)
RegExp正则
// 创建方法1
var re_obj=new RegExp('\d','g');//global参数
re_obj.test(str); // 返回一个bool值,匹配成功返回true,失败则返回false
//创建方法2
var re_obj2=/pattern/g;
re_boj2.test(str);
s.match(/pattern/g); // 将所有匹配内容放入一个数组
s.search(/pattern/g); // 得到第一个匹配结果的索引值
s.split(/pattern/g); // 按pattern分割
s.replace(/old,new/g)
Math
内置对象,直接使用
Math.abs(n) // 返回数的绝对值。
Math.exp(n) // 返回 e 的指数。
Math.floor(n) // 对数进行下舍入。
Math.log(n) // 返回数的自然对数(底为e)。
Math.max(n,m) // 返回n和m中的最高值。
Math.min(n,m) // 返回n和m中的最低值。
Math.pow(n,m) // 返回n的m次幂。
Math.random() // 返回 0 ~ 1 之间的随机数。
Math.round(n) // 把数四舍五入为最接近的整数。
Math.sin(n) // 返回数的正弦。
Math.sqrt(n) // 返回数的平方根。
Math.tan(n) // 返回角的正切。
声明提前
<script>
function func1(){
console.log(s);
var s = 'string';
}
func1();
// 在js的预编译中,console.log(s);不会执行,但是找到var s时,会执行一次var s;而不会给s赋值,
// 所以执行func1()会得到undefined;
</script>
BOM对象
与浏览器交互
Window对象
// 直接使用,不需要调用window.alert()
alert() // 显示带有一段消息和一个确认按钮的警告框。
confirm() // 显示带有一段消息以及确认按钮和取消按钮的对话框。并根据选择返回true or false;
prompt(str) // 显示可提示用户输入的对话框。参数可选,确认后返回输入内容
open() // 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() // 关闭浏览器窗口。
setInterval() // 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() // 取消由 setInterval() 设置的 timeout。
setTimeout() // 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() // 取消由 setTimeout() 方法设置的 timeout。
scrollTo() // 把内容滚动到指定的坐标
一个html文档对应一个窗口
控制窗口
Location对象
location.reload(); // 刷新,重载页面
location.href(url); // 跳转网页
History对象
// 前进/后退
history.forward(); // 上一个网页
history.back(); // 下一个网页
history.go(-1); // 参数为-1时,跳转到上一网页,为1时,跳转到下一网页,0时为当前网页
history.length; // 浏览器当前保存的网页数
DOM对象(DHTML)
节点的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
<p>p1</p>
</div>
<script >
// 根据id获取元素
var ele=document.getElementById('div1');
console.log(ele); // [object HTMLDivElement]
console.log(ele.nodeName); // DIV
console.log(ele.nodeType); // 1
console.log(ele.nodeValue); // null
// 子元素
var ele2=ele.firstChild; // div1与div2中间的\t,\b
console.log(ele2); // #text
console.log(ele2.nodeName); // #text
var ele3=ele.lastChild;
console.log(ele3); // #text
console.log(ele3.nodeName); // #text
// 所有子元素
var arr1=ele.childNodes;
console.log(arr1.length); // 5
// 父标签
var ele4=ele.parentElement;
console.log(ele4); // <body>...</body>
console.log(ele4.nodeName); // BODY
// 子标签,加Element时,只找标签中的元素
var ele5=ele.firstElementChild;
console.log(ele5); // <div id='div2'>div2<div>
var ele6=ele.lastElementChild;
console.log(ele6); // <p>p</p>
var ele7=ele.children;
console.log(ele7); // HTMLCollection(2) [div#div2, p, div2: div#div2]
console.log(ele7.length); // 2
for (var i=0;i<ele7.length;i++){
console.log(ele7[i]); // <div id='div2'>div2<div> <p>p</p>
}
// 兄弟标签
var ele8=ele5.nextElementSibling;
console.log(ele8); // <p>p</p>
</script>
</body>
</html>
寻找节点对象的方式
- 全局查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
</head>
<body>
<div id="div1">
<div class="div2" name="ht">div2</div>
<div id="div3">div3</div>
<p>p1</p>
<div class="div2">div4</div>
</div>
<script >
// 根据class查找,因为class不唯一,Elements,结果为一个数组
var ele=document.getElementsByClassName('div2');
console.log(ele); // HTMLCollection(2) [div.div2, div.div2]
// 获取标签中的文本
console.log(ele[0].nextElementSibling.innerHTML); // div3
// 根据tag查找
var tag=document.getElementsByTagName('p');
console.log(tag); // HTMLCollection [p]
console.log(tag[0].innerHTML); // p1
var n=document.getElementsByName('ht');
console.log(n); // NodeList [div.div2]
console.log(n[0].innerText); // div2
</script>
</body>
</html>
- 局部查找
<body>
<div id="div1">
<div class="div2" name="ht">div2</div>
<div id="div3">div3</div>
<p>p1</p>
<div class="div2">div4</div>
</div>
<div id="div4">
<p>p2</p>
</div>
<script >
var div4=document.getElementById('div4');
// 局部查找,
var ele=div4.getElementsByTagName('p');
console.log(ele[0].innerHTML); // p2 // 只找到div4下的p标签
</script>
</body>
DOM Event(事件)
onclick(); // 单击
ondblclick(); // 双击
onfocus(); // 元素获得焦点
onblur(); // 元素失去焦点
onchange() // 域内容改变
onkeydown() // 键盘某个键被按下
onkeypress() // 键盘某个键被按下并松开
onkeyup() // 键盘某个键被松开
onload() // 一张页面或凸显完成加载
onmousedown() // 鼠标按键被按下
onmousemove() // 鼠标移动
onmouseout() // 鼠标从某个元素移开
onmouseover() // 鼠标移动到某个元素上
onselect() // 文本被选中
onsubmit() // u企鹅人按钮被点击
例子:
- 输入框默认有内容,点击输入框后消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
</head>
<body>
<p ondblclick="alert(123)">123</p>
input: <input class='ky' type="text" name="input" value='input' onfocus="func1()" onblur="func2()">
<script >
function func1(){
var ky=document.getElementsByClassName('ky')[0]; // 根据classname获取input对象
ky.value = ''; // 将input的value设置为空
// console.log(111)
}
function func2(){
// console.log(222)
var ky=document.getElementsByClassName('ky')[0];
if (ky.value.trim().length===0){ // 去掉前后空格
ky.value='input';
}
}
</script>
</body>
</html>
- 按下、松开某个键时,触发事件(οnkeydοwn=func(‘event’))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
</head>
<body>
<input type="button" onkeydown="func1(event)" onkeyup='func2(event)' value='press'>
<script >
function func1(e){
if (e.keyCode===13){ // Enter=13;按下enter时触发
console.log(e.keyCode);
}
}
function func2(e){
if (e.keyCode===13){ // 松开Enter时触发
console.log(e.keyCode);
}
}
</script>
</body>
</html>
- 页面加载完成之后触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<script >
function func1(){
var p1=document.getElementById('p1')
alert(p1.nodeName)
}
</script>
</head>
<body onload="func1()"> <!--body加载完之后触发-->
<p id="p1">wolf</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<script >
window.onload=function(){
var p1=document.getElementById('p1');
alert(p1.nodeName);
}
</script>
</head>
<body>
<p id="p1">wolf</p>
</body>
</html>
- 鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<style>
div{
background: #cc3399;
width:100px;
height:100px;
line-height: 100px;
text-align: center;
}
</style>
<script >
function func1(){ // 鼠标按下时触发
console.log('down')
}
function func2(){ // 鼠标松开时触发
console.log('up')
}
function func3(){ // 鼠标覆盖时触发
console.log('over')
}
function func4(){ // 鼠标移开时触发
console.log('out')
}
function func5(){ // 鼠标移动时触发
console.log('move')
}
</script>
</head>
<body>
<div onmousedown="func1()" onmouseup="func2()" onmouseover="func3()" onmouseout="func4()" onmousemove="func5()">wolf</div>
</body>
</html>
- 绑定事件的另外一种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<style>
div{
background: #cc3399;
width:100px;
height:100px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id='div1'>wolf</div>
</body>
</html>
<script >
var div1=document.getElementById('div1');
div1.onclick=function(){ // 通过对象的方法来绑定事件
alert(123);
}
</script>
- 提交数据时触发,只能绑定在form表单上
方法1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<style>
div{
background: #cc3399;
width:100px;
height:100px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<form id="form">
<input type="text" name="name">
<input type="submit" value="提交验证">
</form>
</body>
</html>
<script >
var form1=document.getElementById('form');
form1.onsubmit=function(){
alert('验证失败');
return false; <// return false阻止提交数据;
}
</script>
方法2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<style>
div{
background: #cc3399;
width:100px;
height:100px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<form id="form" onsubmit="return func1();">
<input type="text" name="name">
<input type="submit" value="提交验证">
</form>
</body>
</html>
<script >
function func1(){
alert('验证失败');
return false;
}
</script>
方法3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<style>
div{
background: #cc3399;
width:100px;
height:100px;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<form id="form" onsubmit="return func1(event);">
<input type="text" name="name">
<input type="submit" value="提交验证">
</form>
</body>
</html>
<script >
function func1(event){
alert('验证失败');
event.prevnetDefault(); // 阻止传输数据
}
</script>
- 阻止事件传播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<style>
.div1{
background: #cc3399;
width:100px;
height:100px;
}
.div2{
background: black;
width:50px;
height: 50px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
<script >
var div=document.getElementsByTagName('div');
div[0].onclick=function(){
alert(123);
}
div[1].onclick=function(){
alert(234);
event.stopPropagation() // 阻止事件传播,使点击div2时不会触发div1的点击事件
}
</script>
增删改查
增删改
createElement(name); 创建元素
appendChild();将元素添加到父标签中
removeChild();将元素从父标签中删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<style>
.div1{
background: #cc3399;
/*width:100px;*/
height:50px;
line-height: 50px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">wolf1</div>
<p>wolf2</p>
</div>
<form>
<input type="button" value="添加" onclick="func1();"> <!--点击触发添加方法-->
<input type="button" value="删除" onclick="func2();"> <!--点击触发删除-->
<input type="button" value="大字" onclick="func3();"> <!--点击触发加粗-->
</form>
</body>
</html>
<script >
function func1() {
var div1 = document.getElementsByClassName('div1')[0]; <!--父元素-->
var son = document.createElement('p'); <!--要添加的子元素和标签-->
son.innerHTML="<b>加粗字体</b>"; <!--子元素的文本,能解析标签,如果有标签,按html标签添加-->
// son.innerText='<b>加粗字体</b>'; <!--直接添加字符串,不解析-->
son.style.color='red'; // 设置颜色
son.style.font-size='39px'; // 设置字体大小
son.name='p1'; // 设置name属性
// son.setAttribute('name','p1'); // 设置name属性
son.getAttribute('name'); // 获取name属性
div1.appendChild(son); <!--在父元素中添加子元素-->
}
function func2(){
var div1 = document.getElementsByClassName('div1')[0]; <!--父元素-->
var last_son = div1.lastElementChild; <!--最后一个子元素-->
div1.removeChild(last_son); <!--删除子元素-->
}
function func3(){
var div1=document.getElementsByClassName('div1')[0]; <!--找到div1标签-->
div1.style.fontSize='39px'; <!--设置字体大小-->
}
</script>
改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<style>
.div1{
background: lime;
/*width:100px;*/
height:50px;
line-height: 50px;
}
.bigger{
color: #cc3399;
font-size: 30px;
}
.small{
color: dodgerblue;
font-size: 15px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">wolf1</div>
<p>wolf2</p>
</div>
<form>
<input type="button" value="大号字体" onclick="func('bigger');"> <!--点击触发添加方法-->
<input type="button" value="原字体" onclick="func('small');">
</form>
</body>
</html>
<script >
function func(change) {
var div1 = document.getElementsByClassName('div1')[0]; <!--父元素-->
if (change==='bigger'){
div1.classList.remove('small');
div1.classList.add('bigger');
}else{
div1.classList.remove('bigger');
div1.classList.add('small');
}
}
</script>
查
示例
示例1:点击按钮后出现小窗口操作,原页面变背景,再点击小窗口按钮,回到原网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<style>
/*初始页面*/
.div1{
position:fixed;
width: 100%;
height: 1000px;
background-color: white;
}
/*点击后变背景样式*/
.div1-1{
background-color: darkgray;
}
/*点击后出现的操作页面样式*/
.div2{
display: none;
position: fixed;
top:50%;
left:50%;
background-color: lime;
width: 100px;
height: 100px;
}
/*控制页面显示*/
.div2-1{
display: block;
}
</style>
</head>
<body>
<div class="div1">
<input type="button" class="input1" value="button">
<div class="div2">
<input type="button" class="input2" value="button">
</div>
</div>
</body>
</html>
<script >
var inp1=document.getElementsByClassName('input1')[0];
inp1.onclick=function(){
var div1=document.getElementsByClassName('div1')[0];
div1.classList.add('div1-1');
var div2=document.getElementsByClassName('div2')[0];
div2.classList.add('div2-1');
};
var inp2=document.getElementsByClassName('input2')[0];
inp2.onclick=function(){
var div1=document.getElementsByClassName('div1')[0];
div1.classList.remove('div1-1');
var div2=document.getElementsByClassName('div2')[0];
div2.classList.remove('div2-1');
};
</script>
示例2:二级菜单,第一集选择后显示二级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<style>
</style>
</head>
<body>
<select id="province" onchange="func1(this)">
</select>
<select id="city">
</select>
</body>
</html>
<script >
var sel_pro=document.getElementById('province'); // 一级对象
var sel_cit=document.getElementById('city'); // 二级对象
data = {'重庆': ['渝北','江北'], '湖北':['武汉','襄阳'],'四川':['广安','成都','南充']};
for (var i in data){ // 遍历字典时,i为key
var opt=document.createElement('option'); // 子标签对象
opt.innerHTML=i; // 设置子元素文本
sel_pro.appendChild(opt); // 添加子元素
}
function func1(self){
sel_cit.length=0;
var province=self.options[self.selectedIndex].innerHTML;
for (var i in data[province]){ // 遍历数组时,i为index
var cit=document.createElement('option');
cit.innerHTML=data[province][i];
sel_cit.appendChild(cit);
}
}
</script>
示例3:左右选择框的项目移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wolf</title>
<style>
.div1{
display: inline-block;
margin: 20px;
}
</style>
</head>
<body>
<select id="left" multiple size="10">
<option>篮球</option>
<option>足球</option>
<option>排球</option>
<option>乒乓球</option>
<option>拳击</option>
<option>体操</option>
</select>
<div class="div1">
<input type="button" value="-->" onclick="to_right()"><br>
<input type="button" value="=>" onclick="all_right()"><br>
<input type="button" value="<--" onclick="to_left()"><br>
<input type="button" value="<=" onclick="all_left()">
</div>
<select id="right" multiple size="10">
<option>游泳</option>
<option>击剑</option>
<option>健美</option>
<option>羽毛球</option>
</select>
</body>
<script>
function to_right(){
var sel_left=document.getElementById('left');
var opt_left=sel_left.children;
var sel_right=document.getElementById('right');
for (var i=0;i<opt_left.length;i++){
if (opt_left[i].selected===true){ // 判断是否被选中
opt_left[i].selected=false; // 移动后取消选中
sel_right.appendChild(opt_left[i--]) // 移动选项
}
}
}
</script>
</html>
作用域
- 作用域基本与python一样
- 不同的是js有一个先编译,所有代码会先编译一遍再执行,导致同名函数会被覆盖