html前端学习十二:循环注册事件函数

最新推荐文章于 2023-04-03 17:27:35 发布

myt2000

最新推荐文章于 2023-04-03 17:27:35 发布

阅读量298

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/myt2000/article/details/103661057

版权

html 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

循环注册事件

熟悉掌握this
可以任意定义属性

	<ul id="list">
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
		<li>555</li>
	</ul>
    
<script>
	var ul = document.getElementById("list");
	var lis = ul.getElementsByTagName("li");
	for(var i=0;i<lis.length;i++){
		lis[i].countindex = i;
		lis[i].onclick = function(){
			alert(this.innerHTML+"当前索引位置"+this.countindex);
		} 
	}
</script>

循环控制

break
中断循环、终止循环、结束循环、跳出循环

<script>
	
	for(var i=0;i<10;i++){
		if (i==5) {
			break;
		}
		console.log(i);
	}
	
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e3V7Xi3Z-1577067491103)(http://img1.ph.126.net/q6XwNMpko2F9_eZ0y_TYww==/3864088480384161964.png)]

continue
跳出当前一次循环，到循环尾

<script>
	
	for(var i=0;i<10;i++){
		if (i==5) {
			continue;//跳出当前一次循环，到循环尾
		}
		console.log(i);
	}
	
</script>

结果中没有5
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z2VbEPau-1577067491104)(http://img2.ph.126.net/uDvnBSAmWelk4Qi5nA2p5w==/2176364520026884940.png)]

函数

函数的定义function

<script>
	function fn(){
		alert(123);
	}
	fn();
	
</script>

匿名函数

匿名函数不能单独出现
匿名函数的两种执行方式

    //即使函数（立马执行的函数）
	(function() {
		alert(1111);
	})();
	
	
	
	(function() {
		alert(999);
	}())

不标准的即时函数

//不标准的即时函数
	!function(){
		alert(1);
	}();
	+function(){
		alert(2);
	}();
	-function(){
		alert(3);
	}();
	~function(){
		alert(4);
	}();

函数特性

匿名函数不能单独出现；
函数默认返回undefined;

return 可以返回确定的值

	function sum(){
		return 1+1;
	}
	alert(sum());

函数传参

固定参数

	function add(addstart,addend){
			return addstart+addend;
	}
	alert(add(100,300));

不定长参数
arguments表示传进去的不定长参数

	 function sum(){
	 	var result = 0;
	 	for(var i=0;i<arguments.length;i++){
	 		result += arguments[i];
	 	}
	 	return result;
	 }
	 alert(sum(1,3,4,2,55,33,66));

函数封装

将id名字封装起来，直接取参数

<body>
    <div id="box"></div>
    <div id="parent"></div>
    <div id="box1"></div>
<script>
	var box = $("box");
	var parent = $("parent");
	var box1 =$("box1");
	function $(idName){
		if (idName && (typeof idName).tolowerCase() =="string") {}
		return document.getElementById(idName);
	}
	alert()
	
</script>

函数作用域

作用域：
全局变量
局部变量

执行顺序：

定义：var function
执行

	fn();
	alert(a);
	var a =1;
	function fn() {
		a = 666;
		var b =2;
	}

所弹出结果为666
定义: a=1 function fn()
执行：a=666 b=2
最后a=1

结论：
子作用域可以访问父作用域，反之不可逆，父作用域不可覆盖子作用域

	var a = 1;
	var b =2;
	function fn(){
		alert(a);
		a =3 ;

	}
	fn();
	alert(a);

弹出 1 和3

javascript的bug

没有定义c,但是并不会报错

	var a = 1;
	var b =2;
	function fn(){
		c =3 ;

	}
	fn();
	alert(c);

使用严格模式，这样会报c undefined

	var a = 1;
	var b =2;
	function fn(){
		'use strict'  //使用严格模式，会报错
		c =3 ;

	}
	fn();
	alert(c);

myt2000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html前端学习十二:循环注册事件函数

循环注册事件熟悉掌握this可以任意定义属性 <ul id="list"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul> ...
复制链接

扫一扫