Javascript考试题目选择题_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Javascript考试题目选择题
上传于|0|0|暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩21页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢JS常见问题之为什么点击弹出的i总是最后一个
字体：[ ] 类型：转载 时间：
最近有很多朋友问我，为什么点击弹出的i总是最后一个，于是抽时间写了这篇文章，特此分享到脚本之家平台，供大家参考
在前端群里看见过很多人问过这个问题，今晚又有人问了这个问题，所以写篇文章整理一下。首先看一下代码,点击li之后弹出当前li所对应的索引值。于是很多人刷刷刷写出了下面的代码。
var aLi = document.getElementsByTagName('li');
for(var i = 0; i & aLi. i++){
aLi[i].onclick = function(){
& 但是结果不尽人意，为了简单，我们约定一下页面中有2个li。点击li之后弹出的都是2。
& 我们首先来分析一下为什么结果是1.我们可以简单的将循环分成两部。
i = 0时,aLi[0].onclick = function(){alert(i)}
i = 1时,aLi[1].onclick = function(){alert(i)}
i = 2时，不满足条件跳出循环.
&在执行click的函数的时候，会有一个作用域链，这个作用域链是一个对象列表，这组对象定义了代码作用域中的变量。（ 关于变量对象的内容想更详细了解的可以查看变量对象。）当我们alert(i)的时候，会去从内到外的去寻找变量i。这个时候这个函数的作用域链上有两个对象，这时循环已经结束了，i此时的值为2.所以点击任何一个li，弹出的都是2，而不是我们想要的索引值。重点在于弹出的是变量i，变量i，变量i。重要的事情说三遍。
&那么问题来了，我们要如何解决这个问题呢。我们需要做的就是在每次给aLi[i]绑定事件的时候，将这个时候i的值保存在内部的作用域中。解决方案如下。
var aLi = document.getElementsByTagName('li');
for (var i = 0; i & aLi. i++) {
(function(i){
aLi[i].onclick = function () {
这里涉及到一个块级作用域的概念。在es6出来前，函数是作为创建块级作用域的主要手段。这里我们通过在aLi[i].onclick外面套上一层函数，将i作为参数，我们重新分析一下结果。
(function(i){
aLi[0].onclick = function(){
(function(i){
aLi[1].onclick = function(){
i = 2时，不满足条件跳出循环.
由于多了一层自执行函数的包裹，当我们点击li时，会有三层的作用域，从内带外分别是：click函数内部的变量对象，自执行函数的变量对象和最外层的window对象。查找到第二层的时候，找到了i，自执行函数的i等于传入的参数值，相对应的存下了当时i的值，所以就弹出了相应的索引值。
下面再给大家分享一个js常见的问题，实现点击li能够弹出当前li索引与innerHTML的函数
点击其中一项需要alert出如下结果：
按照我们平常的想法，代码应该是这样写的：
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){
for(var i = 0, len = list. i & i++){
list[i].onclick = function(){
alert(i + "----" + this.innerHTML);
但是不巧的是产生的结果是这样的：&
索引index为什么总是4呢，这是js中没有块级作用域导致的。这里有三种解决思路
1. 使用闭包
&script type="text/javascript"&
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){
for(var i = 0, len = list. i & i++){
var that = list[i];
list[i].onclick = (function(k){
var info = that.innerHTML;
return function(){
alert(k + "----" + info);
2.使用ES6中的新特性let来声明变量
用let来声明的变量将具有块级作用域，很明显可以达到要求，不过需要注意的是得加个'use strict'（使用严格模式）才会生效
&script type="text/javascript"&
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){'use strict'
for(let i = 0, len = list. i & i++){
list[i].onclick = function(){
alert(i + "----" + this.innerHTML);
3.引入jquery,使用其中的on或delegate进行事件绑定（它们都有事件代理的特性）
&script type="text/javascript" src="jquery-1.8.2.min.js"&&/script&
&script type="text/javascript"&
$("ul").delegate("li", "click", function(){
var index = $(this).index();
var info = $(this).html();
alert(index + "----" + info);
&script type="text/javascript"&
$("ul").on("click", "li", function(){
var index = $(this).index();
var info = $(this).html();
alert(index + "----" + info);
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具如何理解i=i++和i=++i_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
如何理解i=i++和i=++i
上传于|0|0|文档简介
&&如何理解i=i++和i=++i
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢JavaScript
for(i = 0; i&1; ++i){
barcode = getElementById('barcode');
barcode.onchange = function(){alert(i);};
代码执行，for循环了1遍alert弹出0 ，触发事件，alert弹出 1
首先推测是for循环里 i++的问题。后来在网上查找答案
http://bbs.csdn.net/topics/
发现不是i++的原因，转载如下：
for中其实不管是i++或++i都是在for循环体全部执行完毕后才执行，如：for(int&i&=&0;i&&&10;&i++){
System.out.println(i);
等同于for(int&i&=&0;i&&&10;&){
System.out.println(i);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&i++;
而for(int&i&=&0;i&&&10;&++i){
System.out.println(i);
同样和for(int&i&=&0;i&&&10;&){
System.out.println(i);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&++i;
}是一个意思，
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：14544次
排名：千里之外
原创：38篇
转载：47篇
(17)(13)(2)(7)(8)(9)(10)(21)(1)2038人阅读
web前端研究（38）
在javascript中，我们常常搞不懂i++与++i的区别，今天我们就来简单说一下。
i++的例子:
console.log(i);
var a=i++;
console.log(i);
console.log(a);
++i的例子：
console.log(i);
var a=++i;
console.log(i);
console.log(a);
我们通过两个例子，可以看出其中不同，当使用i++赋值给a后，a的值为1，而使用++i赋值给a后，a的值为2，而两例中i最终都为2
* 使用i++时，i先将自身的值赋值给变量a，然后再自增1
* 使用++i时，i先将自身的值自增1,再将自增后的值赋值给变量a
运算符优先级
我们知道，++作为后置递增时，优先级为16，而作为前置递增时，优先级为15
=作为赋值运算符时，优先级为3
所以，++会优先于=而执行
++运算符前置与后置的区别
我们看看MDN上对该运算符的说明：
If used postfix, with operator after operand (for example, x++), then it returns the value before incrementing.
If used prefix with operator before operand (for example, ++x), then it returns the value after incrementing.
简单翻译：
如果该运算符作为后置操作符，则返回它递增之前的值；
如果该运算符作为前置操作符，则返回它递增之后的值
所以，我们就知道， ++运算符会返回一个值，如果前置，则返回操作对象递增之后的值，如果后置，则返回操作对象递增之前的值。
当var a = i++时，实际上做了如下操作
而var a = ++i时，实际上做了如下操作
设i=1，a = (i++)+(i++)+(++i)
那么a的值是？
我们可以将该运算简化为：
b=function(){
c=function(){
d=function(){
var a = b + c +d;
a=1+2+4=7;
所以当i=1，a = (i++)+(i++)+(++i)=1+2+4=7
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：71155次
积分：1274
积分：1274
排名：千里之外
原创：60篇
评论：10条
(1)(1)(2)(2)(2)(15)(2)(3)(19)(10)(13)