//源码----start
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>IFE JavaScript Task 01</title> | |
</head> | |
<body> | |
<label>请输入北京今天空气质量:<input id="aqi-input" class="add" type="text" value="aa" /></label> | |
<button id="button">确认填写</button> | |
<div>您输入的值是:<span id="aqi-display">尚无录入</span></div> | |
<script type="text/javascript"> | |
(function() { | |
/* | |
在注释下方写下代码 | |
给按钮button绑定一个点击事件 | |
在事件处理函数中 | |
获取aqi-input输入的值,并显示在aqi-display中 | |
*/ | |
var _event = document.getElementById('button'); | |
// var _input =document.getElementById('aqi-input'); | |
var _input=document.querySelector('#aqi-input'); | |
//querySelector选择器js原生的有类似于和jQuery的$一样强大的选择绑定选择器的功能。document.querySelector("p")//取第一个P标签dom,document.querySelector(".app")//取第一个class为app的dom | |
console.log(_input); | |
_event.addEventListener('click',function(){ | |
debugger | |
console.log(_input); | |
//_input.getAttribute('value')//得到的值都是aa他是dom属性值,属性值不可变,HTML值 | |
//次一点的实现 innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器(现在也适应chrome浏览器) | |
// document.getElementById('aqi-display').innerText=_input.value; | |
document.getElementById('aqi-display').innerHTML=_input.value; | |
}) | |
})(); | |
</script> | |
</body> | |
</html> |
//源码----end
总结:
本人的一个百度的课程题目,实现的是输入数据显示在其他地方。这里涉及的知识有。 1、事件监听。addEventListener('click',function(){}) 2、js获取都dom元素,document.getElementById('aa')//获取id为aa的dom document.getElementsByClassName('bb');//获取.class为bb的dom document.getElementsByTagName('p');//获取p标签; 3.使用querySelector,querySelector选择器js原生的有类似于和jQuery的$一样强大的选择绑定选择器的功能。 document.querySelector("p")//取第一个P标签dom, document.querySelector(".app")//取第一个class为app的dom document.querySelector("#apps")//取id为apps的dom 4.// var _input =document.getElementById('aqi-input'); var _input=document.querySelector('#aqi-input'); _input.getAttribute('value')//得到的值都是aa他是dom属性值,属性值不可变;_input.value取到的是HTML值,是可变的。 5.innerHTML和innerText的区别 innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器(现在也适应chrome浏览器) 6、可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签 正则去标签方法 var content = document.getElementById("p1"); alert(content.innerHTML.replace(/& lt;.+?>/gim,'')); 7、使用outerHTML和outerText 与innerHTML 、innerText一一对应,outerHTML 是element DOM接口的 outerHTML属性, 获取描述包括其后代的元素的序列化HTML片段。它可以用从给定字符串解析的节点设置为替换元素。使用outerHTML替换掉HTML元素,被替换的元素不显示但是仍然在内存中。 8.label 和input的妙用, input的id和label的for设置为同样的值可以使点击label里的内容触发input的事件,使用label与input可以实现类似原生的自动方格密码输入。
本人的本篇博客的github链接地址:https://github.com/Mrliu1/newife/tree/master/blogOne
欢迎大家交流,斧正!