javascript 1_JS入门基础_js一孓:-CSDN博客

本文介绍了JavaScript的基础入门知识，包括JS的实现步骤、元素获取方法、事件处理及常见操作技巧。详细讲解了如何使用getElementById和getElementsByTagName获取元素，以及如何通过事件如onclick等进行交互控制。并通过一个实例演示了如何通过JS改变元素的样式。

摘要由CSDN通过智能技术生成

javascript 1_JS入门基础

写JS的步骤：

先实现布局
想出实现原理
了解JS语法

希望把某个元素移除的实现：

display: none; 显示为无
visibility: hidden; 隐藏
width \ height
透明度
left \top
拿与背景色相同的div盖住该元素
利用margin值 ……

获取元素

getElementById() ——静态方法，前面只能跟document
document.body、document.title 页面中只有一个的元素
getElementsByTagName() ——动态方法，前面可以跟document也可以跟其他元素，返回的是一个类似数组的元素的集合
- 有类似数组的length
- 有类似数组的应用方式，比如ali[0]
- 在用TagName的时候，必须要加上中括号[]
- 所谓的动态方法，是指通过js动态添加的元素，getElementsByTagName()也可以找到，但是document.getElementById是找不到的

事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件

onclick
onmouseover
onmousedown
onmouseout
onmouseup
onmousemove ……

如何添加事件
元素.事件

函数
函数可以理解为命令，做一些事情，如:
function abc() { //肯定不会主动执行！ … }

直接调用：abc();
事件调用：元素.事件 = 函数名 (oDiv.onclick = abc;)
……
function(){} 匿名函数
元素.事件 = function(){}

测试

alert(1); 带确定按钮的警告框；alert(‘ok’); ‘ok’ 字符串
初学者：最好保持随时写，随时测试的习惯

变量

var li = document.getElementById(‘lis’);
var num = 123;
var name = ‘leo’;

课后练习：点击换色

<html>
<head>
<style>
*{padding:0;margin:0;}
body{padding:50px 0 0 50px;}
#oset{margin-left:50px;border-radius:5px;padding:10px；15px;background:red;border:0px;margin-bottom:20px;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.box{border:2px solid black;bakground:#fff;width:80px;height:80px;}
#check{position:fixed;top:0;left:0;background:rgba(0,0,0,0.5);width:100%;height:100%;text-align:center;display:none;}
.check_box{padding:20px 15px;top:50%;left:50%;background:#fff;position:absolute;transform:translate(-50%,-50%);}
.row span{line-height:40px;text-align:center;width:80px;display:inline-block;margin-left:10px;}
#yellow_btn{background:yellow;}
#green_btn{background:green;}
#blue_btn{background:blue;}
.row button{width:80px;line-height:30px;}
.row button:first-child{margin-right:30px;}
</style>
</head>
<body>
		<div class='text'>请为下面的div选择样式：<input id='oset' type='button' value='点击设置' class='clearfix'/></div>
	    <div id='obox' class='box'></div>
		<div id="check">
			<div class="check_box">
				<div class='row'>
					<span>选择颜色：</span><span id="yellow_btn">黄色</span><span id="green_btn">绿色</span><span id="blue_btn">蓝色</span>
				</div>
				<div class="row">
					<span>选择宽度：</span><span id="width100">100px</span><span id="width200">200px</span><span id="width300">300px</span>
				</div>
				<div class="row">
					<span>选择高度：</span><span id="height100">100px</span><span id="height200">200px</span><span id="height300">300px</span>
				</div>
				<div class="row">
					<button id="box_reset">重置</button> <button id="close">确定</button>
				</div>
			</div>
		</div>
	</body>
	<script>
	var obox = document.getElementById('obox');
	var check = document.getElementById('check');
	var oset = document.getElementById('oset');
	var yellow_btn = document.getElementById('yellow_btn');
	var green_btn = document.getElementById('green_btn');
	var blue_btn = document.getElementById('blue_btn');
	var width100 = document.getElementById('width100');
	var width200 = document.getElementById('width200');
	var width300 = document.getElementById('width300');
	var height100 = document.getElementById('height100');
	var height200 = document.getElementById('height200');
	var height300 = document.getElementById('height300');
	var box_reset = document.getElementById('box_reset');
	var close = document.getElementById('close');
		
	oset.onclick = function (){
		check.style.display = 'block';
	}
	
	close.onclick = function(){
		check.style.display = 'none';
	}
	
	box_reset.onclick = function(){
		obox.style.background = 'white';
		obox.style.height = '80px';
		obox.style.width = '80px';
	}
	
	yellow_btn.onclick = function(){
		obox.style.background = 'yellow';
	}
	
	green_btn.onclick = function(){
		obox.style.background = 'green';
	}
	
	blue_btn.onclick = function(){
		obox.style.background = 'blue';
	}
	
	width100.onclick = function(){
		obox.style.width = '100px';
	}
	
	width200.onclick = function(){
		obox.style.width = '200px';
	}
	
	width300.onclick = function(){
		obox.style.width = '300px';
	}
	
	height100.onclick = function(){
		obox.style.height = '100px';
	}
	
	height200.onclick = function(){
		obox.style.height = '200px';
	}
	
	height300.onclick = function(){
		obox.style.height = '300px';
	}
	
	</script>
</html>