求JS大佬带飞

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="all-input">
<input type="" name="" id="input1" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
</div>
<button type="button" id="input1-btn">取得input1的元素</button>
<button type="button" id="js-btn">取得第i个元素</button>
<button type="button" id="jq-btn">取得div中的第i个元素</button>

<script type="text/javascript">
document.getElementById('input1-btn').onclick = function()
{
let input1Val = document.getElementById('input1').value;
alert(input1Val);
}
let indexArr = document.getElementsByTagName('input');

document.getElementById('js-btn').onclick = function()
{
for(let i = 0; i <indexArr.length; i++)
{
let content = indexArr[i].value;
alert(content);
}
}
</script>
<script type="text/javascript">
$('#jq-btn').click(function()
{
let indexArr = $('input');
for(let i = 0; i < indexArr.length; i++)
{
alert($(indexArr[i]).val());
}
})
</script>
</body>
</html>

我来送buff

修改一点点，添加了点注释，更能看懂些了叭
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="all-input">
<input type="" name="" id="input1" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
</div>
<button type="button" id="input1-btn">取得input1的元素</button>
<button type="button" id="js-btn">取得第i个元素</button>
<button type="button" id="jq-btn">取得div中的第i个元素</button>

<script type="text/javascript">
document.getElementById('input1-btn').onclick = function()
{
//点击第一个按钮弹出第一个输入框的内容
let input1Val = document.getElementById('input1').value;
alert('第1个输入框的内容为：'+input1Val);
}
let indexArr = document.getElementsByTagName('input');

document.getElementById('js-btn').onclick = function()
{
//点击第二个按钮依次弹出所有输入框的内容(用原生js实现)
for(let i = 0; i <indexArr.length; i++)
{
let content = indexArr[i].value;
alert('第'+(i+1)+'个输入框的内容为：'+ content);
}
}
</script>
<script type="text/javascript">
$('#jq-btn').click(function()
{
//点击第三个按钮,一次弹出所有输入框的内容(用jQuery实现)
let indexArr = $('input');
for(let i = 0; i < indexArr.length; i++)
{
alert('第'+(i+1)+'个输入框的内容为：'+$(indexArr[i]).val());
}
})
</script>
</body>
</html>

我可以问问body里面可以有script的吗我们学到现在没有body里面有script的

script标签可以放到html文档的任何地方。body里面当然也可以。
而且如果你要在script的全局环境下访问body里面的元素，就必须要把script放在body就下面。
因为在全局环境下的代码是在页面加载阶段从上到下一边加载一边执行的，这时处于script下面的页面元素还没有加载完，访问不到。

script标签可以放到html文档的任何地方。body里面当然也可以。
而且如果你要在script的全局环境下访问body里面的元素，就必须要把script放在body就下面。
因为在全局环境下的代码是在页面加载阶段从上到下一边加载一边执行的，这时处于script下面的页面元素还没有加载完，访问不到。

谢啦兄dei 虽然很想打爆你

我是用Hbuilder编辑的随意就可以打得开啊……

不是alert i对应的input的value吗，这直接全输出-_-

解决方案 »