发表于： 2020-02-03 00:05:21
2 1305
今天完成的事
1.继续学习JS的基本知识
学会了创建节点 插入 以及获取输入框的值
<ul id="lits">
<li>sdasd</li>
<li>sdasd</li>
<li>sdasd</li>
<li>sdasd</li>
<li>sdasd</li>
</ul>
<input type="text" id="txt"><input type="button" id="btn" value="插入">
<script>
window.onload = function(){
var BTN = document.getElementById("btn");
BTN.onclick = function(){
var oul = document.getElementById("lits");//ul节点
var otxt = document.getElementById("txt");//输入框节点
var TEXT = document.createTextNode(otxt.value);//将输入框文本生成文本节点
var lt = document.createElement("li");//生成一个li元素
lt.appendChild(TEXT);//将文本节点插入生成的li元素
oul.appendChild(lt);//将li元素插入ul下的末尾
}
}
2.学习如何获取复选框的值 并弹出显示
window.onload = function(){//页面加载完成后运行
var obtn = document.getElementById("btn");//获得按钮的元素节点
var RADIO = document.getElementsByName("radio");//获得多选按钮组成的类数组
var str = "";//声明一个空字符串
obtn.onclick = function(){//获得按钮的点击事件并执行
for(var i=0;i<RADIO.length;i++){//遍历多选按钮的类数组
if(RADIO[i].checked){//假如类数组的元素checked为ture
str += RADIO[i].value;//那么将该元素的value加入之前的字符串
}
}
alert(str);//弹出显示字符串
}
}
3.获取下拉列表的值
<body>
<select id="lits">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="杭州">杭州</option>
<option value="成都">成都</option>
</select>
<input type="button" id="btn" value="获取">
<script>
window.onload = function(){//页面加载完成后运行
var obtn = document.getElementById("btn");//获得按钮的元素节点
var LITS = document.getElementById("lits");//获得下拉列表元素节点
obtn.onclick = function(){//获得按钮点击事件执行
alert(LITS.value);//获得下拉列表的当前value值 并弹出显示
}
}
4.设置HTML属性值
<input type="button" id="btn" value="获取">
<script>
window.onload = function(){//页面加载完成后运行
var obtn = document.getElementById("btn");//获得按钮的元素节点
obtn.onclick = function(){
obtn.value = "已经改变";
}
}
5.通过设置html属性值的方法来替换显示图片
<hr/>
<input type="button" value="修改" id="BTN">
<br/>
<img id="img" src="avatar.png">
<script>
window.onload = function(){//页面加载完成后运行
var obtn = document.getElementById("BTN");//获得按钮的元素节点
var IMG = document.getElementById("img");//获得img标签的元素节点
var flag = true;//声明一个布尔变量flag等于true 使用这个布尔变量来标识两种状态来回切换
obtn.onclick = function(){//点击按钮之后执行
if(flag){//假如布尔变量的当前值为true
IMG.src ="avatar1.png";//将img标签的src值修改为另一个地址
flag = false;//布尔变量当前值修改为false
} else {
IMG.src = "avatar.png";//将img标签的src值修改为另一个地址
flag = true;////布尔变量当前值修改为true
}
}
}
明天的计划
1.学习HTML属性操作（对象方法）
2.学习JavaScript中SetInterval与setTimeout用法
3.完成JS任务1
遇到的问题
1.js中的大小写一定要注意啊
写错了一个不显眼的value 找了好久才找出错误
var TEXT = document.createTextNode(otxt.Value);//将输入框文本生成文本节点
今天的收获
1.js中有些字符串应该是不能换行的
document.body.innerHTML = "<input taye='button' value='按钮'/><input taye='button' value='按钮'/><input taye='button' value='按钮'/>"
上面这样是正常的
document.body.innerHTML = "<input taye='button' value='按钮'/>
<input taye='button' value='按钮'/>
<input taye='button' value='按钮'/>"
而这样换行之后就会报错 不知道是空格符的原因还是什么
返回列表
评论