pythonweb day12

程序员文章站 2022-06-13 12:37:30

...

1. 获取或设置属性节点的值

2. 操作元素样式

1. 获取或设置属性节点的值

操作标签属性

getAttribute(attrName)
作用：获取指定属性的值
attrName : 属性名
setAttribute(attrName,value)
作用：设置属性和对应的值
attrName : 属性名
value ：属性值
removeAttribute(attrName)
作用：移除指定属性
attrName : 属性名
可以使用点语法访问元素节点的属性
元素节点.属性名
et :
h1.id
input.value

练习：

创建超链接，链接地址为百度

创建按钮，点击时修改超链接的链接地址
改为 http://www.tmooc.cn

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	.redText{
		color : red;
	}
  </style>
 </head>
 <body>
	<h1>JS操作标签属性</h1>
	<button onclick="getAttr()">获取属性</button>
	<button onclick="setAttr()">设置属性</button>
	<button onclick="removeAttr()">删除属性</button>

	<a href="http://www.baidu.com">百度</a>
	<button onclick="changeLink()">TMOOC</button>
 </body>
 <script>
	//1. 获取元素节点
	var h1 = document.getElementsByTagName('h1')[0];
	//2. 实现函数
	function getAttr(){
		//console.log(h1.getAttribute('class'));
		console.log(h1.className);
	}
	function setAttr(){
		// <h1 class="redText"></h1>

		//h1.setAttribute('class','redText');
		h1.className = "redText";
	}
	function removeAttr(){
		//h1.removeAttribute('class');
		h1.className = null;
	}

	function changeLink(){
		//获取元素节点，并修改链接地址
		var aLink = document.getElementsByTagName('a')[0];
		aLink.href = "http://www.tmooc.cn";
		//target = "_blank"
		aLink.target = "_blank";
		aLink.innerText = "TMOOC";
	}
 </script>
</html>

2. 操作元素样式

setAttribute()
可以设置元素 class / id 的属性值，对应选择器
针对类选择器的样式，可以为元素属性className赋值
元素.className = "";

使用内联方式添加样式
<h1 style="color:red;"></h1>
元素.style.css属性名
元素.style.css属性名 = "";
注意：
如果CSS属性名中有连接符 - ，在JS中访问时一律
改成驼峰标识：
font-size 在JS中使用 fontSize
background-color backgroundColor

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	#redBack{
		background:red;
	}
	.greenText{
		color : green;
		text-align : center;
	}
  </style>
 </head>
 <body>
	<h1>动态修改元素样式</h1>
	<div>div</div>
 </body>
 <script>
	//1.获取元素节点
	var h1 = document.getElementsByTagName('h1')[0];
	var div = document.getElementsByTagName('div')[0];

	//2. 设置元素样式
	h1.setAttribute('id','redBack');
	h1.className = "greenText";

	//添加行内样式
	div.style.background = "pink";
	div.style.width = "200px";
	div.style.height = "200px";
	
 </script>
</html>

练习：
1. 创建div 按钮输入框
2. 验证输入用户名是否在6 - 18 位之间，
在6-18位之间的视为通过，在div中显示绿色的
文本"用户名合法"
如果不合法，div中显示红色文本“用户名不合法”

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
	用户名 ：<input type="text" name="uname">
	<button onclick="validateName()">验证</button>
	<div></div>
 </body>
 <script>
	//1. 获取元素节点
	var input = document.getElementsByTagName('input')[0];
	var div = document.getElementsByTagName('div')[0];
	//2. 验证操作
	function validateName(){
		if(input.value.length >= 6 && input.value.length <= 18){
			//合法
			div.innerText = "用户名合法";
			div.style.color = "green";
		}else{
			div.innerText = "用户名不合法";
			div.style.color = "red";
		}
	}
 </script>
</html>

3. 读取节点信息

节点类型
属性：nodeType
值：
1 表示元素节点
2 表示属性节点
3 表示文本节点
8 表示注释节点
9 表示文档节点
获取节点名称
属性：nodeName
取值情况：
元素节点&属性节点返回元素名或者属性名
文本节点                       返回 #text
注释节点                       返回 #comment
文档节点                       返回 #document

4. 节点对象的层次属性

parentNode
表示获取当前节点的父节点
childNodes
表示获取当前节点下所有的子节点，返回子节点数组
注意：文本节点和属性节点都会作为当前元素节点的
子节点, 换行和空格都会作为空的文本节点计算在内
children
返回当前节点的所有子节点数组
注意：只返回子元素节点，不包含文本节点和属性节点
nextSibling
表示下一个兄弟节点
et :
<h1></h1>
文本
<div></div>

注意：nextElementSibling
表示下一个元素兄弟节点
previousSibling
表示上一个兄弟节点

注意：previousElementSibling
表示上一个元素兄弟节点

attributes
获取当前元素节点对象的所有属性节点集合
<input type="" value="" maxlength="">

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
	<div>
		<h1 style="text-align:center;color:red;">节点的层次属性</h1>
		div中的普通文本
		<p>p元素中的文本</p>

	</div>
	<script>
		//1. 获取元素节点
		var div = document.getElementsByTagName('div')[0];
		var h1 = document.getElementsByTagName('h1')[0];
		var p = document.getElementsByTagName('p')[0];

		//2. 获取元素的父节点对象
		console.log(div.parentNode);
		console.log(h1.parentNode);

		//3. 获取子节点数组
		console.log(div.childNodes);
		console.log(div.children);
		
		for(var i = 0;i < div.childNodes.length; i ++){
			//console.log(div.childNodes[i]); //获取子节点

			console.log(div.childNodes[i].nodeType,div.childNodes[i].nodeName);
		}
		//4. 兄弟节点
		//获取h1的下一个兄弟节点
		console.log(h1.nextSibling);
		console.log(h1.nextElementSibling);//下一个元素兄弟节点

		console.log(p.previousSibling);
		console.log(p.previousElementSibling);

		//5. 属性节点的操作
		console.log(h1.attributes);
		//获取属性节点
		console.log(h1.attributes[0].nodeType,h1.attributes[0].nodeName);



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

练习：
pythonweb day12

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
	<button onclick="minus()">-</button>
	<input type="text" name="uinput">
	<button onclick="add()">+</button>
 </body>
 <script>
	//1. 获取元素节点
	var input = document.getElementsByTagName('input')[0];
	//2. + -
	function minus(){
		console.log(input.value, typeof input.value);
		//字符串类型与number类型做数学运算，首先把字符串转换为number（自动）
		// input.value -= 1;		
		if(input.value > 1){
			input.value --;
		}
	}
	function add(){
		//input.value += 1;
		input.value ++;
	}
 </script>
</html>

DOM节点操作

1. 增加节点

创建元素节点和文本节点
语法：
元素节点 : var div = document.createElement('div');
文本节点 : var text = document.createTextNode('');

注意：
属性节点可以通过元素节点的点语法直接访问和设置
练习：
使用JS创建div元素节点，
设置div的id为container
设置div的文本为“动态创建的div”
控制台输出div
添加节点
DOM中对节点的插入删除追加操作，都由父元素执行
1. 在父元素中动态追加子节点
  语法：
  父节点.appendChild(子节点);
  et :
  var div = document.createElement('div');
  //将div追加到body中
  document.body.appendChild(div);
  div.parentNode.append(div);
  
  注意：文本节点也是元素的子节点
  et :
  var text = document.createTextNode('hello');
  //追加到div中显示
  div.appendChild(text);
2. 在文档的指定位置插入节点
  语法：
  parentNode.insertBefore(newElem,oldElem);
  将newElem节点插入到oldElem节点之前
  et:
  var h1 = document.createElement('h1');
  //将h1插入在div之前
  document.body.insertBefore(h1,div);

删除节点

如果是删除body的子元素
document.body.removeChild(elem);

如果元素层级结构较多，就需要通过父节点parentNode
执行删除操作
parentNode.removeChild(elem);

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
	<button onclick="removeElem()">删除div</button>
  <script>
	var div = document.createElement('div');
	div.id = "container";
	div.innerText = "动态创建的div";
	console.log(div);

	//添加到文档中
	document.body.appendChild(div);
	var h1 = document.createElement('h1');
	//创建文本节点
	var text = document.createTextNode('星期五');
	//为节点添加文本内容
	h1.appendChild(text);

	//添加到文档中
	div.parentNode.appendChild(h1);
	
	//div之前插入h1
	div.parentNode.insertBefore(h1,div);

	//删除节点
	function removeElem(){
		document.body.removeChild(div);
		//div.parentNode.removeChild(div);
	}



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

作业：

上方包含三个输入框，一个添加按钮
下方为商品信息展示区域，点击添加之后
将商品信息显示在当前区域，同时显示操作按钮

JS动态创建节点并显示（商品信息展示）

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	table{
		width: 600px;
		border: 1px solid black;
		border-collapse: collapse;
	}
	th,td{
		border: 1px solid black;
		text-align:center;
	}
  </style>
 </head>
 <body>
	<p>
		<input type="text" name="gname" placeholder="商品名称">
		<input type="text" name="gprice" placeholder="商品价格">
		<input type="text" name="gcount" placeholder="商品数量">
		<button onclick="addGoods()">添加</button>
	</p>
	<table>
		<thead>
			<tr>
				<th>商品名称</th>
				<th>商品价格</th>
				<th>商品数量</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			
		</tbody>
	</table>
 </body>
 <script>
	function addGoods(){
		//1. 获取元素节点
		var gname = document.getElementsByTagName('input')[0].value;
		var gprice = document.getElementsByTagName('input')[1].value;
		var gcount = document.getElementsByTagName('input')[2].value;
		
		var tbody = document.getElementsByTagName('tbody')[0];
		
		//2. 创建行
		var tr = document.createElement('tr');

		//3. 创建四个单元格并且赋值
		var tdName = document.createElement('td');
		tdName.innerHTML = gname;
		var tdPrice = document.createElement('td');
		tdPrice.innerHTML = gprice;
		var tdCount = document.createElement('td');
		tdCount.innerHTML = gcount;
		var tdOper = document.createElement('td');
		//操作按钮
		var btnUpdate = document.createElement('button');
		var btnDelete = document.createElement('button');
		btnUpdate.innerHTML = "修改";
		btnDelete.innerHTML = "删除";
		//单元格中添加按钮
		tdOper.appendChild(btnUpdate);
		tdOper.appendChild(btnDelete);

		//4. 向网页中添加元素
		tr.appendChild(tdName);
		tr.appendChild(tdPrice);
		tr.appendChild(tdCount);
		tr.appendChild(tdOper);

		tbody.appendChild(tr);


	}
 </script>
</html>

用jQuery写可以点击

2. 事件

事件：由用户行为激发的操作
事件处理函数(都以on为前缀)
1. 鼠标事件
  onclick 鼠标单击事件
  ondbclick 鼠标双击事件
  onmouseover 鼠标移入元素时触发
  onmouseout 鼠标移出元素时触发
  onmousemove 鼠标在元素内移动时触发
```
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	p{
		width:200px;
		height:200px;
		background:red;
	}
  </style>

 </head>
 <body>
	<p>事件处理函数</p>
 </body>
 <script>
	var p = document.getElementsByTagName('p')[0];
	p.onmouseover = function(){
		console.log("鼠标移入");
	};
	p.onmouseout = function (){
		console.log("鼠标移出");
	};
	p.onmousemove = function (){
		console.log("鼠标在元素内移动");
	};
 </script>
</html>
```
2. onload 事件
  文档或元素加载完毕之后触发
3. 状态改变事件
  常用于表单控件
  onfocus   元素获取焦点时触发
  onblur   元素失去焦点时触发
  onchange 元素内容发生改变时触发，在元素失去焦点之后才触发
  oninput   元素的value值发生变化时触发，实时监听输入
  onsubmit   当表单被提交时触发
4. 键盘事件
  onkeydown 键位被按下时触发
  onkeypress 键位被按下时触发
  onkeyup 键位抬起时触发
事件的绑定方式
1. 内联方式：在标签中绑定事件函数
  <button onclick="执行函数()"></button>
2. 在JS中动态绑定事件处理函数
  语法：
  元素节点.事件函数名 = function (){};
  et :
  div.onclick = function () {
  执行函数
  };
3. W3C标准事件监听函数
  elem.addEventListener('click',fun);
  elem.removeEventListener();
4. this关键字
  this表示触发当前事件的元素节点对象，
  用在事件函数内部
  div.onclick = function (){
  console.log(this); //div
  };
  练习：
  1. 创建div标签
  2. JS中获取div
  3. 为div添加点击事件，实现点击时出现对话框
```
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
	<div>点击</div>
	<script>
		var div = document.getElementsByTagName('div')[0];
		div.onclick = function(){
			alert(this);
		};
	</script>
 </body>
</html>
```

3. 事件行为

onload事件
常用于为body绑定load事件，表示等待body内容加载完毕，再执行事件函数
et :
<body onload = "fun();"></body>
//JS动态绑定
window.onload = function () {
//等待文档加载完毕之后再执行
};

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	function fn(){
		var div = document.getElementsByTagName('div')[0];
		console.log(div);
	}
	
	window.onload = function () {
		var h1 = document.getElementsByTagName('h1')[0];
		console.log(h1);
	};
  </script>
 </head>
 <!-- <body onload="fn();"> -->
 <body>
	<div>div</div>
	<h1>大标题</h1>
 </body>
</html>

onsubmit事件
只有在表单提交时才触发
注意：该事件需要一个Boolean返回值来通知表单是否要提交，返回true表示表单可以提交，返回false表示阻止表单提交，常用于验证表单是否可以提交

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	window.onload = function (){
		//1. 获取元素节点
		var form = document.getElementsByTagName('form')[0];
		var uname = document.getElementsByTagName('input')[0];
		var upwd =  document.getElementsByTagName('input')[1];
		var span =  document.getElementsByTagName('span')[0];

		//2. onsubmit
		form.onsubmit = function (){
			//在提交按钮被点击时自动触发，验证表单
			if(uname.value == ''){
				//表单无法提交
				//alert('用户名不能为空');
				span.innerText="用户名不能为空";
				return false;
			}
			// 表单可以提交
			return true;
		};

		//3. 获取焦点与失去焦点
		uname.onfocus = function (){
			//console.log("获取焦点");
		};
		uname.onblur = function (){
			//验证输入是否合法
			if(this.value.length >= 6 && this.value.length <= 18){
				span.innerText = "用户名合法";
			}else{
				span.innerText = "用户名不合法";
			}
			//console.log("失去焦点",uname.value);
		};

		//文本框内容发生改变时触发
		uname.onchange = function (){
			//1. 内容发生变化并且元素失去焦点时触发
			//console.log(this.value);
		};
		//只要输入框中内容发生变化（增加、删除），都会触发
		uname.oninput = function (){
			console.log(this.value);
		};
	
	};
  </script>
 </head>
 <body>
	<form action="login" method="post">
		<p>
			用户名称 ：<input type="text" name="uname">
			<span></span>
		</p>
		<p>
			用户密码 ：<input type="password" name="upwd">
		</p>
		<input type="submit" value="提交">
	</form>
 </body>
</html>

4. 事件对象

事件对象 event
伴随事件触发产生，包含了当前事件所有的信息
获取事件对象
由于事件对象伴随事件触发自动产生，浏览器会自动将其作为参数传递给事件处理函数，所以我们需要在事件处理函数出接收参数，就可以获取事件对象
et:
function sum (a,b){
return a + b;
}
sum(10,20);
div.onclick = function (evt) {
console.log(evt);
};

事件对象的常用操作
不同的事件对应不同的事件对象，其所包含的信息也不同

获取事件源
触发事件的节点对象
evt.target;

鼠标事件对象包含的属性

offsetX,offsetY
获取鼠标在元素上的坐标点（以元素左上角为原点）
clientX,clientY
获取鼠标在网页中的坐标点

screenX,screenY
获取鼠标在屏幕中的坐标点

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	div{
		width: 200px;
		height:200px;
		background : red;
	}
  </style>
  <script>
	window.onload = function (){
		//1. 获取元素
		var div = document.getElementsByTagName('div')[0];
		//2. 添加鼠标事件
		div.onmouseover = function (evt){
			//接收事件对象并输出
			console.log(evt);
			//鼠标坐标信息
			console.log(evt.offsetX,evt.offsetY);
			console.log(evt.clientX,evt.clientY);
			console.log(evt.screenX,evt.screenY);
		};
		div.onmousemove = function (event){
			//输出事件源
			//console.log(event.target);
			

		};
	};

  </script>
 </head>
 <body>
	<div></div>
 </body>
</html>

键盘事件对象包含的信息
键盘事件：onkeypress onkeydown onkeyup

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	window.onkeypress = function (){
		console.log("keypress");
	};
	onkeydown = function (){
		console.log("keydown");
	};
	onkeyup = function(){
		console.log("keyup");
	};
  </script>
 </head>
 <body>
  
 </body>
</html>

keypress 事件
只有在输入字符（键盘输入）时才触发
事件对象的属性：
1. which 属性
  获取当前按下字符的ASC码
2. key
  获取当前键位表示的字符

keydown

which
获取当前键位的键码
值区分按键，不区分大小写
注意：键盘事件的监听顺序 keydown keypress keyup

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
	window.onload = function(){
		//获取元素添加监听
		var input = document.getElementsByTagName('input')[0];
		input.onkeypress = function (evt){
			//console.log(evt.target);
			console.log(evt.which,evt.key);
		};
		input.onkeydown = function (evt){
			console.log(evt.which);
		};

	};
  </script>
 </head>
 <body>
	<input type="text" name="uname">
 </body>
</html>

pythonweb day12

1. 获取或设置属性节点的值

2. 操作元素样式

3. 读取节点信息

4. 节点对象的层次属性

DOM节点操作

1. 增加节点

2. 事件

3. 事件行为

4. 事件对象

PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上

Java笔记（day12）

Java之路---Day12(多态)

PythonWeb框架Django搭建过程

【脚本语言系列】关于PythonWeb访问ftplib，你需要知道的事

【JQuery学习笔记day12】HTML 表单

java自学 day12

pythonweb django的学习

day12—jQuery ui引入及初体验

IO（输入、输出）数据流（Java小白进阶day12）