JavaScript——DOM

最新推荐文章于 2022-08-03 15:40:21 发布

北辰0518

最新推荐文章于 2022-08-03 15:40:21 发布

阅读量120

点赞数

本文链接：https://blog.csdn.net/beichen0518/article/details/79793642

版权

Table

table不适合进行页面布局

"""
Table要比其它html标记占更多的字节。
(延迟下载时间，占用服务器更多的流量资源。)
Tablle会阻挡浏览器渲染引擎的渲染顺序。
(会延迟页面的生成速度，让用户等待更久的时间。)
Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。
(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)
在某些浏览器中Table里的文字的拷贝会出现问题。
(这会让用户不悦。)
Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%)
(这会限制你页面设计的自由性。)
一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。
(先花时间学一些CSS知识，会省去你以后大量的时间。)
table对于页面布局来说，从语义上看是不正确的。
(它描述的是表现，而不是内容。)
table代码会让阅读者抓狂。
(不但无法利用CSS，而且会你不知所云)
table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。
转载于html5tricks
"""

HTML中利用列表做目录，以及做能关闭的固定位置的广告

需要注意的问题，以及学到的方法:

列表中可以嵌套列表。
灵活运用height的auto。
‘ > ’表示直接的儿子。
为了使js和标签不再耦合,可以在js中设置onclick。
在js中改层叠样式表一定要用驼峰命名法,不能用backgroundcolor。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.menu li {
				list-style: none;
			}
			/*直接的儿子*/
			.menu>li {
				width: 120px;
				height: 35px;
				background-color: #6495ED;
				color: white;
				text-align: center;
				line-height: 35px;
				border-bottom: 1px solid lightgray;
				overflow: hidden;
			}
			.menu>li:hover {
				height: auto;
			}
			.menu li ul li {
				width: 120px;
				height: 35px;
				background-color: #B0E0E6;
				color: white;
				line-height: 35px;
				text-align: center;
				border-bottom: 1px solid lightgray;
			}
			#adv {
				width: 200px;
				height: 200px;
				background-color: blue;
				position: fixed;
				top: 100px;
				right: 50px;
			}
			#closeBtn {
				float: right;
				border: none;
			}
		</style>
	</head>
	<body>
		<div id="adv">
			<button id="closeBtn">关闭</button>
		</div>
		<ul class="menu">
			<li>
				Menu 1
				<ul>
					<li>Menu 1-1</li>
					<li>Menu 1-2</li>
					<li>Menu 1-3</li>
					<li>Menu 1-4</li>
				</ul>
			</li>
			<li>
				Menu2
				<ul>
					<li>Menu 2-1</li>
					<li>Menu 2-2</li>

				</ul>
			</li>
			<li>
				Menu3
				<ul>
					<li>Menu 3-1</li>
					<li>Menu 3-2</li>
					<li>Menu 3-3</li>
	
				</ul>
			</li>
			<li>
				Menu4
				<ul>
					<li>Menu 4-1</li>
					<li>Menu 4-2</li>
					<li>Menu 4-3</li>
					<li>Menu 4-4</li>
				</ul>
			</li>
			<li>
				Menu5
				<ul>
					<li>Menu 5-1</li>
					<li>Menu 5-2</li>
					<li>Menu 5-3</li>
				</ul>
			</li>
		</ul>
		<script>
			var closeBtn = document.getElementById('closeBtn');
//			为了使js和标签不再耦合,可以在js中设置onclick
			var counter = 0;
			closeBtn.onclick = function() {
				
					counter = counter += 1;			
					if (counter == 3) {
						document.getElementById('adv');
//						在js中改层叠样式表一定要用驼峰命名法,不能用backgroundcolor
//						adv.style.backgroundColor='red';
					 	adv.style.display = 'none';
					 	
					}else {
						
						window.open('http://www.baidu.com');
					}
			}
		</script>
	</body>
	
</html>

面向对象

动态语言
可以随时加和删属性

var hotel = {
				name: 'Hello酒店',
				roomsLeft: 99
			}
			window.alert(hotel.name);
			window.alert(hotel.roomsLeft);
//			删属性
			delete hotel.roomsLeft;
//			加属性
			hotel.status = '正在营业';
			window.alert(hotel.name);
			window.alert(hotel.roomsLeft);
			window.alert(hotel.status);

处理字符串

charAt()截取对应索引的字节。
length 字符串的长度
concat()字符串的连接,注意js中字符串是不可变的，所以要有一个变量去接收它
slice()按索引切片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#welcome {
				background-color:blue ;
				color: yellow;
				font: 72px/72px arial, "微软雅黑";
			}
		</style>
	</head>
	<body>
		<h1 id="welcome">欢迎来到成都千峰1801班..........................</h1>
		<script>
			var welcome = document.getElementById('welcome');
			window.setInterval(function() {
				//substring(1)表示从索引1到结束
				welcome.textContent = welcome.textContent.substring(1) +
					welcome.textContent.charAt(0);
			}, 500)
			
			var str = "hello,world!";
			//取字符
			console.log(str.charAt(0));
		    //length表示字符长度
			console.log(str.charAt(str.length - 1));
			//字符串连接,注意js中字符串是不可变的,所以要重新赋值
			str = str.concat('goodbye');
			console.log(str);
			//切片
			str.slice(3, 10);
			console.log(str);
		</script>
	</body>
</html>

DOM

DOM 元素对象

用js实现添加和删除列表元素

实现了一个按钮可以添加文本框的元素，一个按钮可以删除元素
用到一种新的添加元素的方法，document.createElement()，appendChild()，insertBefore()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>我喜欢的水果</h1>
		<hr />
		<ul id="fruitList">
			<li>苹果</li>
			<li>香蕉</li>
			<li>葡萄</li>
		</ul>
		<input type="text" id="fruitName" />
		<input type="button" value="添加" id="addButton"/>
		<input type="button" value="删除" id="delButton"/>
		<script>
			//因为getElementById(id)这个方法很常用,可以建立一个函数代替它
			function $(id) {
				return document.getElementById(id);
			}
			var addButton = $('addButton');
			addButton.onclick = function() {
				var inputText = $('fruitName');
				var fruitList = $('fruitList');
				if (inputText.value.trim().length > 0) {					
					/*fruitList.innerHTML += '<li>' + inputText.value + '</ li>';
					inputText.value = '';*/
				//这种方式虽然效率要低一些，但是如果要追加一些操作会更方便
					var li = document.createElement('li');
					li.textContent = inputText.value;
					//在后面加
					//fruitList.appendChild(li);
					//在指定元素前面加
					fruitList.insertBefore(li, fruitList.children[0])
					inputText.value = '';
				};
			}
				var delButton = $('delButton');
				delButton.onclick = function() {
				var fruitItems = fruitList.children;
				if (fruitItems.length > 0) {
					fruitList.removeChild(fruitItems[fruitItems.length - 1]);
				};
			};
		</script>
	</body>
</html>

这段与上一段相比增加了一个a标签，实现了可以指定删除某个元素。
在a标签中加上href=“javascript:void(0)” 是为了不让a标签执行默认方法（刷新页面）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>我喜欢的水果</h1>
		<hr />
		<ul id="fruitList">
			<li>
				苹果
				<!--void(0)表示什么都不干-->
				<a href="javascript:void(0)">删除</a>
			</li>
			<li>
				香蕉
				<a href="javascript:void(0)">删除</a>
			</li>
			<li>
				葡萄
				<a href="javascript:void(0)">删除</a>
			</li>
		</ul>
		<input type="text" id="fruitName" />
		<input type="button" value="添加" id="addButton"/>
	<!--	<input type="button" value="删除" id="delButton"/>-->
		<script>
			//因为getElementById(id)这个方法很常用,可以建立一个函数代替它
			function $(id) {
				return document.getElementById(id);
			}
			var addButton = $('addButton');
			addButton.onclick = function() {
				var inputText = $('fruitName');
				var fruitList = $('fruitList');
				if (inputText.value.trim().length > 0) {					
					/*fruitList.innerHTML += '<li>' + inputText.value + '</ li>';
					inputText.value = '';*/
				//这种方式虽然效率要低一些，但是如果要追加一些操作会更方便
					var li = document.createElement('li');
					var a = document.createElement('a');
					a.href = 'javascript:void(0)';
					a.textContent = '删除';
					a.onclick = removeItem;
					li.textContent = inputText.value + ' ';
					li.appendChild(a);
					//在后面加
					//fruitList.appendChild(li);
					//在指定元素前面加
					fruitList.insertBefore(li, fruitList.children[0])
					inputText.value = '';
				};
			};
				//用类似层叠样式表选择器的方法拿到元素
				var aList =document.querySelectorAll('#fruitList li a');
				for (var i = 0; i < aList.length; i += 1) {
					//evt表示事件本身
					aList[i].onclick = removeItem;
				};
				function removeItem(evt) {
					/*evt.preventDefault(); 阻止默认行为，因为这个方法不能兼容低版本的IE，所以目前的网站
						都是在a标签的href="javascript:void(0)"这两种效果是一样的*/
						//解决浏览器兼容问题最好用的方法 表示如果evt不为空，就取前面的，否则取后面的。
						evt = evt || window.event;
						//拿到引发事件对象的爸爸
						var li = evt.target.parentNode;
						$('fruitList').removeChild(li);
				};
				/*var delButton = $('delButton');
				delButton.onclick = function() {
				var fruitItems = fruitList.children;
				if (fruitItems.length > 0) {
					fruitList.removeChild(fruitItems[fruitItems.length - 1]);
				};
			};*/
		</script>
	</body>
</html>

下面的这种方法可以实现一个事件产生多个结果
而且这种方法也不会和标签耦合，非常推荐使用的一种方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="okButton">ok</button>
		<script>
			function foo() {
				alert('fuck');
			}
			var btn = document.getElementById('okButton');
			function handleEvent(elem, en, callback) {
				if (elem.addEventListener) {
				elem.addEventListener(en, callback)
				}else {
				elem.attachEvent('on' + en, callback)
				}
			}
			handleEvent(btn, 'click', foo);
			
		</script>
	</body>
</html>




```HTML
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<ul id="fruitList">
			我喜欢的水果
			<li>
				苹果
				<a href="javascript:void(0)">删除</a>
			</li>
			<li>
				香蕉
				<a href="javascript:void(0)">删除</a>
			</li>
			<li>
				橘子
				<a href="javascript:void(0)">删除</a>
			</li>
		</ul>
		<input type="text" id="fruitText"/>
		<input type="button" value="添加" id="addButton"/>
		<script>
			function $(id) {
				return document.getElementById(id);
			};
			function handleEvent (elem, en, callback) {
				if (elem.addEventListener) {
					elem.addEventListener(en, callback);
				}else {
					elem.attachEvent('on' + en, callback);
				}
			}
			var fruitList = $('fruitList');
			var fruitText = $('fruitText');
			var abt = $('addButton');
			handleEvent (abt, 'click', function() {
				if (fruitText.value.trim().length > 0) {
					var fruit = document.createElement('li');
					var a = document.createElement('a');
					fruit.textContent = fruitText.value + ' ';
					fruitList.appendChild(fruit);
					fruit.appendChild(a);
					a.textContent = '删除';
					a.href = 'javascript:void(0)';
					handleEvent(a, 'click', removeLi);
					fruitText.value = '';
				}
			});
			var aList = document.querySelectorAll('#fruitList li a');
			for (var i = 0; i < aList.length; i += 1) {
				handleEvent(aList[i], 'click', removeLi);
			}
			function removeLi(evt) {
				evt = evt || window.event;
				var li = evt.target.parentNode;
				fruitList.removeChild(li);
			}			
		</script>
	</body>
</html>

北辰0518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——DOM

上周回顾Tabletable不适合进行页面布局"""Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)Tablle会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间。)Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)在某些浏...
复制链接

扫一扫