标签:$() device 匿名 nts charset view 绑定 counter length
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="div1">
<p>0000</p>
<p>1111</p>
<p>2222</p>
<p>3333</p>
<p>4444</p>
</div>
<script>
var oDiv = document.getElementById("div1");
var oPs = oDiv.getElementsByTagName("p");
for (i = 0; i < oPs.length; i++) {
(function (i){
oPs[i].onclick = function () {
console.log(i);
}
})(i);
}
</script>
</body>
上面的也可以改造成这样的;(也是闭包的应用)
for (i = 0; i < oPs.length; i++) {
oPs[i].onclick = function (i) {
return function(){console.log(i);}
}(i)
}
如果我们把代码改成这样:
for (i = 0; i < oPs.length; i++) {
oPs[i].onclick = function () {
console.log(i);
}
}
则点击每个标签的结果都是 5
。
‘use strict‘;
function create_counter(initial) {
var x = initial || 0;
return {
inc: function () {
x += 1;
return x;
}
}
}
var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3
JQuery
的全局调用(function () {
var jQuery = function () {
console.log("核心代码");
};
window.jQuery = window.$ = jQuery;
})();
jQuery(); // 核心代码
$(); // 核心代码
实例:
把多参数的函数变成单参数的函数。例如,要计算 ${x^y}$ 可以用Math.pow(x, y)
函数,不过考虑到经常计算x2或x3,我们可以利用闭包创建新的函数pow2
和pow3
:
‘use strict‘;
function make_pow(n) {
return function (x) {
return Math.pow(x, n);
}
}
// 创建两个新函数:
var pow2 = make_pow(2);
var pow3 = make_pow(3);
console.log(pow2(5)); // 25
console.log(pow3(7)); // 343
实例:动画 用setTimeout
实现把p
相对上一个p
向右移动100px;1秒中只实现一个p
的移动;
setTimeout
本身是同步的代码,但是setTimeout
里面的函数是异步的代码;setTimeout
告诉浏览器隔多少秒执行里面的函数;这个函数是脱离执行顺序的;属于异步代码;
var oDiv = document.getElementById("div1");
var oPs = oDiv.getElementsByTagName("p");
for (i = 0; i < oPs.length; i++) {
(function(i){
setTimeout(function(){
oPs[i].style.left=100*i+"px";
},i*1000)
})(i);
}
refers:
标签:$() device 匿名 nts charset view 绑定 counter length
原文地址:https://www.cnblogs.com/jiaweixie/p/13149587.html