您的位置：首页 > Web前端 > JavaScript

JS基础之事件简介

2018-03-06 22:12 429 查看

JS基础

第一部分

innerHTML与innerText的区别:
innerHTML会解析里面的标签,比如"<p>福</p>",innerHTML会识别p标签
对于innerText来说,p标签和福字没什么区别,会一同打印出来
可以通过:console.log(first.innerHTML)来打印引号中的内容,加以区分


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#first{
border:1px red solid;
width:200px;
height:200px;
background-color:blue;
margin:50px auto 50px;
}
</style>
</head>
<body>
<div id="first"></div>
</body>
<script>
var first = document.getElementById('first');
first.style.backgroundColor="yellow";
document.getElementById('first').style.backgroundColor = "blue";
first.innerHTML = "<P>福</P>"
first.style.transform = "rotate(45deg)";
console.log(first.innerHTML);
console.log(first.innerText
4000
);
</script>
</html>


结果截图





将first.innerHTML = "<P>福</P>"换成first.innerText = "<P>福</P>"


结果截图



第二部分

通过类名获取一组元素
var uNames = document.getElementsByClassName("uName");
uNames是所有类名为uName的集合(先当数组来使用)
uNames[0].value = "我是一个输入框";
获取并修改输入框的值使用value
console.log(uNames[0].value);

通过标签名获取
var buttom = document.getElementsByTagName("input")[1];


第三部分

事件的使用
运行说明:点击bottom按钮,text文本框里的值会加1,first矩形会逐渐增大


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#first{
border:1px red solid;
width:200px;
height:200px;
background-color:blue;
margin:50px auto 50px;
}
</style>
</head>
<body>
<div id="first"></div>
<input type="text" class="uName" />
<input type="button" value="点我啊" />
</body>
<script>
var first = document.getElementById("first");
first.style.backgroundColor="yellow";
document.getElementById('first').style.backgroundColor = "blue";
var a = 1;
var uName = document.getElementsByTagName("input")[0];
var botton = document.getElementsByTagName("input")[1];
botton.onclick = function(){
uName.value = a++;
first.style.transition = "1s";
first.style.width = 10*a + "px";
first.style.height= 5 * a + "px";

}
</script>
</html>


结果截图



第四部分

建立两个text窗体一个botton按钮,左边窗体输入一个数字,右边窗体输出是奇数还是偶数


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<input type = "text" />
<input type = "button" value = "计算"/>
<input type = "text">
</body>
<script type="text/javascript">
var text1 = document.getElementsByTagName("input")[0];
var botton = document.getElementsByTagName("input")[1];
var text2 = document.getElementsByTagName("input")[2];

botton.onclick = function(){
var num = text1.value;
if(num % 2 == 0){
text2.value = num + "是偶数";
}else if(num % 2 != 0){
text2.value = num + "是奇数";
}else{
text2.value = "请确认"
}
}
</script>
</html>


结果截图





第五部分

模仿百度一栏中的<我的关注 推荐 导航 体育 小说>这一行的实现原理,
要求每当鼠标点击时就变色,其余的保持同色如图:




实现代码1:初步实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type = "text/css">
.item{
background-color:red;
width:100px;
height:20px;
float:left;
margin-top:200px;
margin-left:100px;
text-align:center;
}
.item:hover{
background-color:yellow;
}
</style>
</head>
<body>
<div class="item">我的关注</div>
<div class="item">推荐</div>
<div class="item">导航体育</div>
<div class="item">体育</div>
<div class="item">小说</div>
</body>
<script >
items = document.getElementsByClassName("item");
items[0].onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].style.backgroundColor = "red";
}
this.style.backgroundColor = "blue";
}
items[1].onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].style.backgroundColor = "red";
}
this.style.backgroundColor = "blue";
}
items[2].onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].style.backgroundColor = "red";
}
this.style.backgroundColor = "blue";
}
items[3].onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].style.backgroundColor = "red";
}
this.style.backgroundColor = "blue";
}
items[4].onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].style.backgroundColor = "red";
}
this.style.backgroundColor = "blue";
}
</script>
</html>


实现代码:初步优化

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type = "text/css">
.item{
background-color:red;
width:100px;
height:20px;
float:left;
margin-top:200px;
margin-left:100px;
text-align:center;
}
.item:hover{
background-color:yellow;
}
</style>
</head>
<body>
<div class="item">我的关注</div>
<div class="item">推荐</div>
<div class="item">导航体育</div>
<div class="item">体育</div>
<div class="item">小说</div>
</body>
<script >
items = document.getElementsByClassName("item");
for(var j = 0; j < items.length; j++){
items[j].onclick = function(){
for(var i = 0; i < items.length; i++){
items[i].style.backgroundColor = "red";
}
this.style.backgroundColor = "blue";
}
}
</script>
</html>


实现代码:再次优化

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type = "text/css">
.item{
background-color:red;
width:100px;
height:20px;
float:left;
margin-top:200px;
margin-left:100px;
text-align:center;
}
.item:hover{
background-color:yellow;
}
</style>
</head>
<body>
<div class="item">我的关注</div>
<div class="item">推荐</div>
<div class="item">导航体育</div>
<div class="item">体育</div>
<div class="item">小说</div>
</body>
<script >
items = document.getElementsByClassName("item");
var last = items[0];
for(var j = 0; j < items.length; j++){
items[j].onclick = function(){
this.style.backgroundColor = "blue";
last.style.backgroundColor = "red";
last = this;
}
}
</script>
</html>


结果截图



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JS 事件 innerText innerHTML 获取元素
相关文章推荐
新的分享
章节导航