前端篇—javascript

最新推荐文章于 2023-07-04 16:42:50 发布
最新推荐文章于 2023-07-04 16:42:50 发布
阅读量175 收藏
点赞数
分类专栏： HTML JavaScript 文章标签： html js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42016382/article/details/101139383
版权

文章目录

JavaScript

介绍

    JavaScript是一种直译式脚本 语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
    在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

ECMA

    ECMAscript是基于Netscape javaScript的一种标准脚本语言。它也是一种基于对象的语言，通过DOM可以操作网页上的任何对象。可以增加、删除、移动或者改变对象。使得网页的交互性大大提高。

基础

  1. 变量
//初始化变量
var a=1, b=2;
var s='wolf';
var f=3.3;
  1. 注释
/*1.
注释
*/

// 2. 注释
  1. 常量
  2. 标识符
  3. 数据类型
  4. Number:数字
    Null:空对象，占一个对象空间。
    String:字符串
    Undefined:var a;声明一个变量不赋值
    Boolean：布尔类型
    object:
    array;

运算符、数据转换

  1. 数据类型转换
    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，除了 != ；

  2. 查看数据类型

var n = null;
typeof(n);		// 只能判断基础类型
 	//--> object;
  1. 运算符
var b = a++; 	//a += 1
// 先赋值，后运算，--> b==1,a==2;
var b = ++a;
// 先运算，后赋值, --> b==2, a==2;
c = b + '314hello';  //NaN; 在运算中不能将含有非数字的字符串转换成数字；

  1. 逻辑运算符
    && 与
    || 或
    & 按位与
    | 按位或
    >> 左移
    << 右移
    ~ not

  2. 赋值运算符

    全等于、全不等于（不进行数据转换，直接进行比较）:

	2 == '2'; 		-->		true;
	2 === '2'; 		-->		false;
	4 != '4';		-->		false;
	4 !== '4'; 		-->		true;
  1. 等性运算符
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
  1. 关系运算符
25 < 3;			-->		false
25 < '3';		-->		true

//两边数据类型分别为字符串和数字时，转换成数字比较
  1. boolean运算符*
  2. 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
  1. 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>

寻找节点对象的方式

  1. 全局查找
<!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>
  1. 局部查找
<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企鹅人按钮被点击

例子：

  1. 输入框默认有内容，点击输入框后消失
<!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>
  1. 按下、松开某个键时，触发事件(ο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>
  1. 页面加载完成之后触发
<!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>
  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>
    <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>
  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>
	<div id='div1'>wolf</div>
</body>
</html>
<script >
    var div1=document.getElementById('div1');
    div1.onclick=function(){			// 通过对象的方法来绑定事件
		alert(123);
	}
</script>
  1. 提交数据时触发，只能绑定在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>
  1. 阻止事件传播
<!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>

作用域

  1. 作用域基本与python一样
  2. 不同的是js有一个先编译，所有代码会先编译一遍再执行，导致同名函数会被覆盖
wolf67
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2024高频前端面试题 JavaScript
03-16
这篇文章为面试者提供了关于JavaScript常考面试题的详细解析。文章内容包括JavaScript基础概念、语法和概念、DOM操作、高级特性以及常见面试题及解答。文章旨在帮助面试者更好地准备JavaScript相关的面试，提高对...
前端常用JavaScript特效合集
09-17
1500个前端常用JavaScript特效合集，很全。
js字符串转数组中的split()方法
weixin_40003755的博客
02-01 1万+
split() 方法用于把一个字符串分割成字符串数组
JavaScript中split（）方法详解
m0_63853518的博客
07-04 1763
howmany参数：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。2,语法：stringObject.split(separator,howmany)separator参数：必需填（分隔符每个元素以什么地方分割）。1，定义：split() 方法用于把一个字符串分割成字符串数组。，从该参数指定的地方分割 stringObject。
JavaScript split()方法
热门推荐
weixin_46411355的博客
02-27 1万+
JavaScript split()方法 一、定义和用法 二、语法 三、参数值 四、返回值 五、更多实例 5.1 省略分割参数 5.2 使用limit参数 5.3 使用一个字符作为分割符
JS的split函数用法
wenweijing的专栏
04-25 156
1. 2.function spli(){ 3. datastr="2,2,3,5,6,6"; 4. var str= new Array(); 5. 6. str=datastr.split(","); 7. for (i=0;i
JavaScript split() 方法详解
qq_45104282的博客
11-24 8416
JavaScript split() 方法详解 胎级教学
前端面试题JS篇.pdf
最新发布
08-02
前端面试题JS篇.pdf
Web前端JavaScript基础学习笔记
07-25
这个学习笔记是我基于B站视频Mosh的JavaScript基础篇学习记录的一些笔记和代码。 内容不多，也就作为一个大家学习的参考。 免费的笔记，如果你喜欢，请和大家分享这个资源，谢谢。 视频链接：...
网站前端性能优化之javascript和css篇
09-22
之前看过Yahoo团队写的一篇关于网站性能优化的文章，文章是2010年左右写的，虽然有点老，但是很多方面还是很有借鉴意义的。关于css的性能优化，他提到了如下几点
js的split用法
我一直在努力
08-12 676
js 代码 &lt;script language="javascript"&gt;    function spli(){             datastr="2,2,3,5,6,6";         var str= new Array();         str=datastr.split(",");         ...
Javascript中删除数组元素
weixin_34409357的博客
05-28 2174
转载至程式先锋技术维客[url]http://www.javabiz.cn/blog/javabiz/[/url]var arr=[’a',’b',’c'];若要删除其中的’b',有两种方法：1.delete方法:delete arr[1]这种方式数组长度不变,此时arr[1]变为undefined了,但是也有好处原来数组的索引也保...
js中split用法
xu393768908的专栏
06-05 475
function spli(){              datastr="2,2,3,5,6,6";                 var str= new Array();          //直接用  a = datastr.split(",")(0)          str=datastr.split(",");            for (i=0;i     {
JS的split用法1
清水雨潭
07-10 754
"javascript">    function spli(){             datastr="2,2,3,5,6,6";         var str= new Array();         str=datastr.split(",");           for (i=0;i
split一些简单的分隔（js）
{竹子}
05-03 809
分隔“.” ：直接写就写，如下：“123.123”split(".");
JS的split用法
08-25 407
JS的split用法2009-03-26 09:41&lt;script language="javascript"&gt;    function spli(){              datastr="2,2,3,5,6,6";         var str= new Array();          str=datastr.split(",");           for (i=0...
js中split的一点注意事项
liuhai的博客
02-07 2169
在实际项目中遇到一个问题，在js脚本中需要用 split来分割一个字符串，获取分割的第一个 var prefix = id.split("_",1)然后赋给一个变量prefix ，此时有一个全局变量tempPrefix ，来判断prefix和tempPrefix是否相等，这时候要注意必须把分割后的内容做如下操作才能用==来判断，不然判断不通过var prefix = id.split("_
js中的split方法
yyanglirong的博客
05-09 3656
split用于分割字符串，他的返回值为一个数组 在后面加上一个索引，就可以返回该索引位置的数据
写一篇前端js的经验案例
06-08
好的，下面是一篇前端 JavaScript 的经验案例。 在开发一个电商网站的过程中，我遇到了一个问题：如何实现商品分类的联动效果。具体来说，就是当用户选择了某个大的商品分类后，下面的小分类会自动更新并显示只属于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值