JS学习-8.6日

最新推荐文章于 2022-12-12 03:23:04 发布

Echo_wwl

最新推荐文章于 2022-12-12 03:23:04 发布

阅读量138

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/weixin_43538709/article/details/107832320

版权

JS学习-8.6日学习内容

下拉菜单案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.menu{
					background-color: antiquewhite;
					 display: none; 
				}
		</style>
	</head>
	<body>
		<div class="box">		
		 <li class="li1">博客
		        <ul>
		            <li><a href="">博客评论</a></li>
		            <li><a href="">未读提醒</a></li>
		        </ul>
		 </li>
			<script>
				var li=document.querySelector('.li1');
				var ul=document.querySelector('ul');
				li.onmouseover=function(){
					ul.style.display='block';
					console.log('焦点');
					}
				li.onmouseout=function(){
					ul.style.display='none';
					console.log('焦点');
					}	
			</script>
		</div>
	</body>
</html>

排他思想

如果有同一组元素,我们想要某一个元素实现某种样式 ,需要用到循环的排他思想算法:
1.所有元素全部清除样式(干掉其他人)
2.给当前元素设置样式(留下我自己)
3.注意顺序不能颠倒,首先干掉其他人,再设置自己
点击按钮变成粉色案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<button>按钮</button>
		<script>
			var btns=document.getElementsByTagName('button');
			for(var i=0;i<btns.length;i++){
				btns[i].onclick=function(){
					for(var i=0;i<btns.length;i++){
						btns[i].style.backgroundColor='';
					}
						this.style.backgroundColor='pink';
				}
			}
		</script>
	</body>
</html>

换肤案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background: url(icon/background_1.jpg);
			}
			ul{
				float: left;
			}
			li{
				float: left;
				list-style-type: none;
			}
			img{
			 	width: 300px;
				height: 200px; 			
			}
		</style>
	</head>
	<body>
		<ul class="baidu">
			<li ><img src="icon/background_1.jpg"/></li>
			<li ><img src="icon/background_2.jpg"/></li>
			<li ><img src="icon/background_3.jpg"/></li>
			<li ><img src="icon/background_4.jpg"/></li>
		</ul>
		<script>
			var img=document.querySelector('.baidu').querySelectorAll('img');
			for(var i=0;i<img.length;i++){
				img[i].onclick=function(){
					console.log(this.src);
					document.body.style.backgroundImage='url('+this.src+')';
				}
			}
		</script>
	</body>
</html>

全选按钮案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" id="j_cbAll"  /></th>
					<th>商品</th>
					<th>价钱</th>
				</tr>
			</thead>
			<tbody id="j_tb">
				<tr>
					<td><input type="checkbox"  /></td>
					<td>iPhone</td>
					<td>8000</td>
				</tr>
				<tr>
					<td><input type="checkbox"  /></td>
					<td>ipod</td>
					<td>2000</td>
				</tr>
				<tr>
					<td><input type="checkbox"  /></td>
					<td>HUAWEI</td>
					<td>6000</td>
				</tr>
			</tbody>
		</table>
		<script>			
			var j_cbAll=document.getElementById('j_cbAll');
			var j_cbs=document.getElementById('j_tb').querySelectorAll('input');
			j_cbAll.onclick=function(){		//给全选按钮设置点击事件，如果被选中则改变其他的按钮的checked值	
					for(var i=0;i<j_cbs.length;i++)
						j_cbs[i].checked=this.checked;				
			}
			for(var i=0;i<j_cbs.length;i++){
				j_cbs[i].onclick=function(){
					var flag=true;//控制全选按钮是否选中
					for(var i=0;i<j_cbs.length;i++){//每次点击复选框都要坚持其他小按钮是否被选中
						if(!j_cbs[i].checked)
							flag=false;
							break;
				}
				j_cbAll.checked=flag;
			}			
			}
		</script>
	</body>
</html>

获取自定义属性值

自定义属性用index表示

//element.getAttribute('属性');
<div id="demo" index="1"></div>
<script>
	var div=document.querySelector('div');
	console.log(div. getAttribute('index'));
</script>

●element.属性:获取内置属性值(元素本身自带的属性)。
●element .getAttribute(‘属性’ ):主要获得自定义的属性( 标准)我们程序员自定义的属性。

设置移除自定义属性

//设置属性element.setAttribute('属性','值');
//移除属性element.removeAttribute('属性');

<div id="demo" index="1" class="d"></div>
<script>
	var div=document.querySelector('div');
	div. setAttribute('index',2);
	div. setAttribute('class',"di");//class特殊这里面写的就是class，不是className。
	div. removeAttribute('index');
</script>

●element.属性：设置内置属性值
●element .setAttribute(‘属性’);主要设置自定义的属性 ( 标准)
Tab栏切换案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.item{
			 display: none; 
			position: absolute;
			top: 15%;
			left: 5%;
			}
			li{
				float: left;
				list-style-type: none;
				padding:10px;
				margin:5px;
			}
			.li_click{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
		<div class="tab">
			<div class="tab_list">
				<ul>
					<li>商品介绍</li>
					<li>规格与保障</li>
					<li>商品评价</li>
					<li>手机社区</li>
					<li>售后服务</li>
				</ul>
			</div>
		</div>
		<div class="tab_con">
			<div class="item" style="display: block;">
				商品介绍模块
			</div>
			<div class="item">
				规格与保障模块
			</div>
			<div class="item">
				商品评价模块
			</div>
			<div class="item">
				手机社区模块
			</div>
			<div class="item">
				售后服务模块
			</div>
		</div>
		</div>
		<script>
			var lis=document.querySelector('.tab_list').querySelector('ul').querySelectorAll('li');
			var divs=document.querySelector('.tab_con').querySelectorAll('div');
			for(var i=0;i<lis.length;i++){
				lis[i].setAttribute('index',i);
				lis[i].onclick=function(){
					for(var i=0;i<lis.length;i++){
						lis[i].className='';
					}
					this.className='li_click';
					var index=this.getAttribute('index');
					
					for(var i=0;i<divs.length;i++){
						divs[i].style.display='none';
					}
						divs[index].style.display='block';
				}
			}
		</script>
	</body>
</html>

H5自定义属性

自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute ( ‘属性’)获取。但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。所以H5新增了自定义属性用来区分。

1.设置H5自定义属性

H5规定自定义属性data开头做为属性名并且赋值。
比如<div data-index= "1" > </div>
或者使用JS设置，element.setAttribute( 'data index' ,2);

2.获取H5自定义属性

1.兼容性获取element.getAttribute( 'data-index' );
2. H5新增element.dataset.index或者element.dataset[ 'index' ]（慎用，IE11以上才支持）
如：

div . dataset. index;
div . dataset['index'];
div . dataset.listflame;
div . dataset['listName'];

如果自定义属性里面有多个-链接的单词，我们获取时采取驼峰命名法。且只能后去data-开头的。

节点操作

网页中的所有内容都是节点(标签、属性、文本、注释等) , 在DOM中,节点使用node来表示。HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改,也可以创建或删除。
在这里插入图片描述

节点概述

一般地 ,节点至少拥有nodeType (节点类型)、nodeName (节点名称)和nodeValue (节点值)这三个基本属性。

●元素节点nodeType为1
●属性节点nodeType为2
●文本节点nodeType为3 (文本节点包含文字、空格、换行等)
实际打开发中主要是操作元素节点

节点层级

父节点 parentNode

<div class= "box">
	<span class=" erweima">x</span>
</div>
<script>
var erweima = document . querySelector( ' . erweima' );
//得到的是离元素最近的父级节点(亲爸爸)，找不到父节点则返回null。 
console.1og(erweima.parentNode);
</script>

2.①子节点 parentNode.childNodes (标准)

parentNode . childNodes返回包含指定节点的子节点的集合,该集合为即时更新的集合。
注意:返回值里面包含了所有的子节点,包括元索节点,文本节点等。
如果只想要获得里面的元素节点,则需要专门处理。所以我们一般不提倡使用childNodes

var ul = document. querySelector('ul') ;
for(var i = 0; i < ul. childNodes . length; i++) {
if (ul . chi ldNodes[i] .nodeType = 1) {
// ul.chi ldNodes[i]是元素节点
console. log (ul . childNodes[i]) ;
	 }
}

② parentNode. children (非标准)

parentNode. children是一个只读属性,返回所有的子元素节点。它只返回子元素节点,余节点不返回(重点掌握)。
虽然children是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用

3.获取首尾子节点
①firstChild第一个子节点，不管是文本节点还是元素节点
②firstElementChild返回第一个子元素节点，但是有兼容性问题，需要IE9以上才支持。
③实际开发写法，既没有兼容性问题又能返回第一个子元素

<ol>
	<li>我是li1</li>
	<li>我是li2</li>
	<li>我是li3</li>
	<li>我是li4</li>
</ol>
<script>
	ol.children[0];
	ol.children[ol.children.length-1];
</script>

4.兄弟节点
①nextSibling：返回当前元素的下一个兄弟节点,找不到则返回null，同样,也是包含所有的节点。
②previousSibling返回当前元素上一个兄弟节点,找不到则返回null。同样,也是包含所有的节点。
③nextElementSibling：得到下一个兄弟元素节点。
④previousElementSibling：得到上一个兄弟元素节点。
其中③④两种方法用兼容性。IE9以上才支持。
封装兼容性的函数：

function getNextElementSibling (element) {
var el = element;
while (el = el. nextSibling) {
	if (el. nodeType == == 1) {
		return el ;
}
	return null;

创建节点

document.createElement('tagName ')

document. createElement()方法创建由tagName 指定的HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。

添加节点

①

node.appendChild (child)

node . appendchild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。

②

node . insertBefore(child,指定元素)

node . insertBefore ()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。

简易留言板效果案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			li{
				background-color: #FAEBD7;
				padding:10px;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<textarea name="" id=""></textarea>
		<button>发布</button>
		<ul>
		</ul>
		<script>
			
			var btn=document.querySelector('button');
			var text=document.querySelector('textarea');
			var ul=document.querySelector('ul');		
			btn.onclick=function(){
				if(text.value==''){
						alert("您没有输入内容");
						return false;	
				}
				else{
				var li=document.createElement('li');
				li.innerHTML=text.value+"<a href='javascript:;'>删除</a>";
				//填加载末尾
				//ul.appendChild(li);
				//添加再首部	
				ul.insertBefore(li,ul.children[0]);
				var as=document.querySelectorAll('a');
				for(var i=0;i<as.length;i++){
					as[i].onclick=function(){
						ul.removeChild(this.parentNode);
						console.log('sda');
					}
				}
				}
			}
		</script>
	</body>
</html>

删除节点

node.removeChild (child)

node. removechild()方法从DOM中删除一个子节点 ,返回删除的节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>删除</button>
		<ul>
			<li>熊大</li>
			<li>熊二</li>
			<li>光头强</li>
		</ul>
		<script>
			var ul=document.querySelector('ul');
			var btn=document.querySelector('button');
			btn.onclick=function(){
				if(ul.children.length==0){
					this.disabled=true;
				}
				else
					ul.removeChild(ul.children[0]);
			}
		</script>
	</body>
</html>

复制节点

node.cloneNode ()

node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点。
注意：如果括号参数为空或者为false ,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。为true深拷贝复制标签复制里面的内容。

动态生成表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>姓名</th>
					<th>科目</th>
					<th>分数</th>
					<th>操作</th>
				</tr>
			</thead>
		<tbody>		
		</tbody>
		</table>
		<script>
			var datas=[{
				name:'Baobao',
				subject:'空间分析',
				score:100
			},{
				name:'Baobao',
				subject:'GIS',
				score:100
			},{
				name:'Chouzhu',
				subject:'JS',
				score:100
			},{
				name:'Chouzhu',
				subject:'java',
				score:100
			}];
			//往tbody里面创建行
			var tbody=document.querySelector('tbody');
			for(var i=0;i<datas.length;i++){
				//创建tr
				var tr=document.createElement('tr');
				tbody.appendChild(tr);
				//创建td
				for (var k in datas[i]){
					var td=document.createElement('td');
					//填充内容
					td.innerHTML=datas[i][k];
					tr.appendChild(td);
				}
				//创建有删除字样的单元格
				var td=document.createElement('td');
				td.innerHTML='<a href="javascript:;">删除</a>';
				tr.appendChild(td);
			}
			var as=document.querySelectorAll('a');
			for(var i=0;i<as.length;i++){
				as[i].onclick=function(){
					tbody.removeChild (this.parentNode.parentNode);
				}
			}
		</script>
	</body>
</html>

Echo_wwl

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习-8.6日

JS学习-8.6日学习内容下拉菜单案例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .menu{ background-color: antiquewhite; display: none; } </style> </head>
复制链接

扫一扫