zoukankan      html  css  js  c++  java

  • DOM进阶、绑定事件的方式、定时器

     DOM(Document Object Model)

    直接查找
	var obj = document.getElementById('i1')


间接查找
	文本内容操作：
		innerText	仅文本
		innerHTML	仅内容
		value		
			input		获取当前标签中的值
			select		获取选中的value值（selectIndex）
			textarea	获取当前标签中的值
		
		搜索框的事例
			
			<input id="i1" type="text" onfocus="Focus();" onblur="Blur();" value="请输入搜索关键字"/>
			// onfocus 鼠标放到上面点击触发，鼠标移走点击其他地方触发
			<script>
				function Focus(){
					var tag = document.getElementById('i1');
					if (tag.value == "请输入搜索关键字"){
						tag.value = '';
					}
				}
				function Blur() {
					var tag = document.getElementById('i1');
					if (tag.value.length == 0){
						tag.value = "请输入搜索关键字";
					}
				}
			</script>
			
			注意：最新版的浏览器不用写上述JS代码，只需写一行<input type="text" placeholder="请输入关键字" />即可搞定
			
			
样式操作：
	className
	classList
		classList.add
		classList.remove
		
	更细粒度的操作	
	obj.style.fontSize = '16px';      
	obj.style.backgroupColor = 'red';
	obj.style.color = 'green';
	# 注意样式的书写规则：如有短横杠的，把原style样式中短横杠去掉，后面第一字母变成大写，如font-size ---> fontSize
	
	
	
属性操作

	obj = document.getElementById('i1')
	
	obj.getAttribute('value') 获取属性
	obj.setAttribute('he','tom') 设置属性   key--value的形式
	obj.removeAttribute('he')
	


创建标签并添加到HTML中

	方式一：字符串的方式

		<input type="button" onclick="AddEle();" value="+"/>
		<div id="i1">
			<input type="text"/>
		</div>
		<script>
			function AddEle() {
				//创建标签
				//将标签添加到id='i1'里面
				var tag = "<p><input type='text'/></p>"
				document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);
			}
		</script>
		
	#注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'，
	这几个参数的意思分别是：在选中的标签 开头之前的位置，开头的之后位置，结束之前的位置，结束之后的位置
	
	
	
	方式二：对象的方式
	
		<input type="button" onclick="AddEle();" value="+"/>
		<div id="i1">
			<input type="text"/>
		</div>
		<script>
			function AddEle() {
				//创建标签
				//将标签添加到id='i1'里面
				var tag = document.createElement('input');
				tag.setAttribute('type', 'text');
				tag.value = '搜索';
				tag.style.fontSize = '16px';
				tag.style.color = 'red';

				var p = document.createElement('p');
				p.appendChild(tag);
				document.getElementById('i1').appendChild(p);
			}
		</script>



提交表单
	任何标签都可以通过DOM提交表单
	document.getElementById('form').submit()

    　　

    其他操作：

    console.log()			输出框
alert					弹出框
var v = confirm(信息)	确认框   v = 'true' or 'false'
	
//URL和刷新	
location.href
location.href = ""		#重定向，跳转
location.href = location.href  ===  location.reload()


//定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器


//定时器，一直执行
var o1 = setInterval(function(){},5000);    # 一直执行，每隔5秒执行一次
clearInterval(ol)							# 清除多次定时器

如何让它只执行一次？
var obj = setInterval(function(){};
	clearInterval(obj);
5000);


//只执行一次
var o2 = setTimeout(function (){}, 5000);  	# 5秒后执行，只执行一次
clearTimeout(o2);   						#清除单次定时器



#定时器应用QQ邮箱删除功能
<div id="i1"></div>
	<input id="i2" type="button" value="删除" onclick="DeleteEle();"/>
<script>
	function DeleteEle() {
		document.getElementById("i1").innerText = "已删除";
		setTimeout(function () {
		document.getElementById("i1").innerText = "";
		}, 5000)
	}
</script>

    　　

    事件

    前奏：如何写出行为，样式，结构相分离的页面？

    前端中的DOM0操作，也是初级程序员最低级的写法。
	<style>								// ----样式
		#test{
			background-color: red;
			 100px;
			height: 50px;
			margin: auto;
		}
	</style>
	</head>
	<body>
		<div id="test" onclick="t1();"></div>   //-----标签
		<script>								// -----JS操作
			function t1() {
				console.log('hello world')
			}
		</script>
	</body>
	
	#这种写法的弊端：当有大量的标签时，此时会出现很多的属性。占用空间，比较乱。



标准的写法：DOM1,做到了行为，样式，结构相分离的页面

	<style>
		#test{
			background-color: red;
			 100px;
			height: 50px;
			margin: auto;
		}
	</style>
	</head>
	<body>
		<div id="test"></div>
		<script>
			var mydiv = document.getElementById("test");
			mydiv.onclick = function () {
				console.log('hello world')
			}
		</script>

    　　

    绑定事件的方式：

    a,	直接标签绑定 onclick="xxx()"

b,	现获取Dom对象，然后进行绑定
	document.getElementById('xxx').onclick
	document.getElementById('xxx').onfocus



this,当前触发事件的标签   *****

a，第一种绑定方式
<input type='button' onclick='ClickOn(this)'/>
function ClickOn(self){
		// self代指当前点击的标签，接收this（这里的self也可写成其他任意字符）
	xxx
}


b，第二种绑定方式（优先选择第二种）
	<input id='i1' type='button'/>
	document.getElementById('i1').onclick = function(){
		// this 代指当前点击的标签
	}



第二种绑定方式例子:	为什么下面要用this而不用myTrs[i](作用域的原因)

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			.pg-test{
				 300px;
			}
			table, table td{ border:1px solid #000 }
		</style>
	</head>
	<body>
		<table class="pg-test">
			<tr><td>1</td><td>2</td><td>3</td></tr>
			<tr><td>1</td><td>2</td><td>3</td></tr>
			<tr><td>1</td><td>2</td><td>3</td></tr>
			<tr><td>1</td><td>2</td><td>3</td></tr>
		</table>
		<script>
			var myTrs = document.getElementsByClassName("pg-test");
			var len = myTrs.length;
			for(var i=0;i<len;i++){
				myTrs[i].onmouseover = function () {
					this.style.backgroundColor = 'red';
				}
				myTrs[i].onmouseout = function () {
					this.style.backgroundColor = '';
				}
			}
		</script>
	</body>
	</html>	


补充：

第三种绑定的情况：一次绑定多个事件（工作当中用的比较少）
	<!DOCTYPE html>
		<html lang="en">
		<head>
			<meta charset="UTF-8">
			<title>Title</title>
			<style>
				#test{
					 300px;
					height: 500px;
					background: #7a43b6;
					color: #fff;
				}
			</style>
		</head>
		<body>
			<div id="test">你好</div>
		</body>
			<script>
				var mydiv = document.getElementById('test');
				mydiv.addEventListener('click', function(){console.log('aaa')}, false);
				mydiv.addEventListener('click', function(){console.log('bbb')}, false);
				//true 代表的是：捕获模型(从上向下一级级执行html-->..>body->外层div>内层div)
				//false或者不填代表的是：默认是冒泡模型(和上面相反)
			</script>
		</html>
	
	#注意true和false的区别可以通过下一个例子体现出来
	
	<!DOCTYPE html>
		<html lang="en">
		<head>
			<meta charset="UTF-8">
			<title>Title</title>
			<style>
				#main{
					 500px;
					height: 400px;
					background: teal;
				}
				#content{
					 200px;
					height: 100px;
					background: springgreen;
				}
			</style>
		</head>
		<body>
			<div id="main">
				<div id="content">
				</div>
			</div>
			<script>
				var mymain = document.getElementById('main');
				var mycontent = document.getElementById('content');
				// mymain.addEventListener('click',function () {console.log('main')},false);
				// mycontent.addEventListener('click',function () {console.log('content')},false)
				mymain.addEventListener('click',function () {console.log('main')},true);
				mycontent.addEventListener('click',function () {console.log('content')},true)

			</script>
		</body>
		</html>

    　　

    JavaScript词法分析：（JS核心）

    <script>
	function t1(age) {       
		console.log(age);    
		var age = 27;         
		console.log(age);   
		function age() {};
		console.log(age);   
	}                        
	t1(3)                    
</script>
//输出结果

function age() {}
27
27


active object ====> AO
1,形式参数
2,局部变量
3,函数声明表达式

1，形式参数
	AO age = undefined
	AO age = 3
	
2, 局部变量  (这属于词法分析阶段，不做任何改变)
	AO age = undefined
	
3,函数声明表达式（优先级最高,覆盖之前的变量）
	AO age = function()


下面开始执行：
开始从活动对象（active object）去找
第一个console.log(age) ----> function()
第二个console.log(age) ---->27
函数未被执行
第三个console.log(age) ---->27

    　　
  • 相关阅读:
    【调侃】IOC前世今生
    经典 makefile 教程
    Win7  CMD大全
    关于验证码识别3
    关于验证码识别2
    关于验证码识别 1
    DirectUI的初步分析-转
    winform软件版本检测自动升级开发流程(转)
    如何让在panel里的子窗体随panel的大小改变而变化？（转）
    C#如何控制panel加载的字窗体中控件的位置随着显示器分辨率大小而改变
  • 原文地址：https://www.cnblogs.com/yang-ning/p/7002043.html
Copyright © 2011-2022 走看看