伪数组
function add() {// arguments伪数组 ?跟数组有相同的索引和相同的length ,而方法不同// arguments 实参// body...console.log(arguments);// arguments.push(7);// console.log(arguments);console.log(new Array());};add(5,6);</script>dom操作
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>#active{background-color: red;width: 100px;height: 100px;}</style></head><body><div id="active"></div><script>//DOM ?Document Object Model ?文档对象模型console.log(window)//文档console.dir(document);// htmlconsole.log(document.documentElement)// bodyconsole.log(document.body)// 三步走 ?1.获取事件对象 2.事件 3.驱动程序 执行的操作// 1.获取的DOM的三种方式var oDiv = document.getElementById(‘active‘);// console.log(oDiv);// console.dir(oDiv);var isRed = true;// 2. 事件名oDiv.onclick = function() {if(isRed){//3.执行的操作 ?要干什么oDiv.style.backgroundColor = ‘green‘;isRed = false;oDiv.style.width = ‘200px‘;oDiv.style.display = ‘none‘;}else{oDiv.style.backgroundColor = ‘red‘;isRed = true;}};// alert(2);</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>#active{background-color: red;width: 100px;height: 100px;}</style></head><body><div id="active"></div><script>//DOM ?Document Object Model ?文档对象模型console.log(window)//文档console.dir(document);// htmlconsole.log(document.documentElement)// bodyconsole.log(document.body)// 三步走 ?1.获取事件对象 2.事件 3.驱动程序 执行的操作// 1.获取的DOM的三种方式var oDiv = document.getElementById(‘active‘);// console.log(oDiv);// console.dir(oDiv);var isRed = true;// 2. 事件名oDiv.onclick = function() {if(isRed){//3.执行的操作 ?要干什么oDiv.style.backgroundColor = ‘green‘;isRed = false;oDiv.style.width = ‘200px‘;oDiv.style.display = ‘none‘;}else{oDiv.style.backgroundColor = ‘red‘;isRed = true;}};// alert(2);</script></body></html>程序的接口
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><div id="box"></div><script>//入口函数// 当窗口加载完成之后 才调用次方法 ?回调函数// 窗口加载 1.文档 2.图片再加载// 1.覆盖现象 ?2 必须等待着图片加载完成才调用次回调函数window.onload = function() {console.log(document.getElementById(‘box‘));// dom操作};window.onload = function() {console.log(2);// dom操作};</script></body></html>dom的增删改查
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="box"><!-- <p>alex</p> --></div><ul id="box2"><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul><button id="btn">追加</button><button id="del">删除</button><script>window.onload = function() {var oDiv = document.getElementById(‘box‘);var oBtn = document.getElementById(‘btn‘);var oDel = document.getElementById(‘del‘);var oUl = document.getElementById(‘box2‘);console.log(oUl.children);var lis = oUl.children;for(var i = 0; i< lis.length; i++){lis[i].onclick = function(){for(var j = 0; j < lis.length; j++){console.log(this);this.style.color = ‘black‘;}console.log(this)this.style.color = ‘red‘;}}// 创建DOMvar oP = document.createElement(‘p‘);oBtn.onclick = function(){// 追加oDiv.appendChild(oP);// 修改DOM的属性oP.id = ‘p1‘;oP.className = ‘p1‘;oP.style.color = ‘green‘;oP.innerText = ‘alex‘};oDel.onclick = function(){// 删除oDiv.removeChild(oP);}};</script></body></html>排他思想
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????*{ ???????????????padding: 0; ???????????????margin: 0; ???????????} ???????????ul{ ???????????????list-style: none; ???????????} ???????????#tab{ ???????????????width: 480px; ???????????????margin: 20px auto; ???????????????border: 1px solid red; ???????????} ???????????ul{ ???????????????width: 100%; ???????????????overflow: hidden; ???????????} ???????????ul li{ ???????????????float: left; ???????????????width: 160px; ???????????????height: 60px; ???????????????line-height: 60px; ???????????????text-align: center; ???????????????background-color: #cccccc; ???????????} ???????????????????????ul li a{ ???????????????text-decoration: none; ???????????????color:black; ???????????} ???????????li.active{ ???????????????background-color: red; ???????????} ???????????p{ ???????????????display: none; ???????????????height: 200px; ???????????????text-align: center; ???????????????line-height: 200px; ???????????????background-color: red; ???????????} ???????????p.active{ ???????????????display: block; ???????????????????????????} ???????????????????</style> ???</head> ???<body> ???????<div id="tab"> ???????????<ul> ???????????????<li class="active"> ???????????????????<a href="#">首页</a> ???????????????</li> ???????????????<li> ???????????????????<a href="#">新闻</a> ???????????????</li> ???????????????<li> ???????????????????<a href="#">图片</a> ???????????????</li> ???????????????????</ul> ???????????<p class="active">首页内容</p> ???????????<p>新闻内容</p> ???????????<p>图片内容</p> ???????????????????????????????</div> ???</body> ???<script type="text/javascript"> ???????// console.log(a); ???????{ ???????????// let a = 1; ???????} ???????// console.log(a); ???????// for (var i = 0; i < 10; i++) { ???????// ??// ... ???????// } ???????// console.log(i); ???????var a = []; ???????for (let i = 0; i < 10; i++) { ?????????a[i] = function () { ???????????console.log(i); ?????????}; ???????} ???????a[5](); // 10 ???????window.onload = function(){ ???????????// //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类); ???????????????????//思路：1.点亮上面的盒子。 ??2.利用索引值显示下面的盒子。 ???????????var tabli = document.getElementsByTagName(‘li‘); ???????????var tabContent = document.getElementsByTagName(‘p‘) ????????????????????for(let i= 0; i < tabli.length; i++){ ???????????????// 绑定索引值（新增一个自定义属性：index属性） ???????????????// tabli[i].index ?= i; ??????????????????????????????tabli[i].onclick = function(){ ???????????????????????????????????????// 1.点亮上面的盒子。 ??2.利用索引值显示下面的盒子。(排他思想) ???????????????????for(var j = 0; j < tabli.length; j++){ ???????????????????????// tabli[j].className = ‘‘; ???????????????????????// tabContent[j].className = ‘‘; ???????????????????????console.log(this); ???????????????????????tabli[j].className = ‘‘; ???????????????????????tabContent[j].className = ‘‘; ???????????????????} ???????????????????????this.className = ‘active‘ ????????????????????????????????????tabContent[i].className = ‘active‘;//【重要代码】 ???????????????} ???????} ???????} ???????????</script></html>模态框
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<style type="text/css"> ???????????*{ ???????????????padding: 0; ???????????????margin: 0; ???????????} ???????????ul{ ???????????????list-style: none; ???????????} ???????????#tab{ ???????????????width: 480px; ???????????????margin: 20px auto; ???????????????border: 1px solid red; ???????????} ???????????ul{ ???????????????width: 100%; ???????????????overflow: hidden; ???????????} ???????????ul li{ ???????????????float: left; ???????????????width: 160px; ???????????????height: 60px; ???????????????line-height: 60px; ???????????????text-align: center; ???????????????background-color: #cccccc; ???????????} ???????????????????????ul li a{ ???????????????text-decoration: none; ???????????????color:black; ???????????} ???????????li.active{ ???????????????background-color: red; ???????????} ???????????p{ ???????????????display: none; ???????????????height: 200px; ???????????????text-align: center; ???????????????line-height: 200px; ???????????????background-color: red; ???????????} ???????????p.active{ ???????????????display: block; ???????????????????????????} ???????????????????</style> ???</head> ???<body> ???????<div id="tab"> ???????????<ul> ???????????????<li class="active"> ???????????????????<a href="#">首页</a> ???????????????</li> ???????????????<li> ???????????????????<a href="#">新闻</a> ???????????????</li> ???????????????<li> ???????????????????<a href="#">图片</a> ???????????????</li> ???????????????????</ul> ???????????<p class="active">首页内容</p> ???????????<p>新闻内容</p> ???????????<p>图片内容</p> ???????????????????????????????</div> ???</body> ???<script type="text/javascript"> ???????// console.log(a); ???????{ ???????????// let a = 1; ???????} ???????// console.log(a); ???????// for (var i = 0; i < 10; i++) { ???????// ??// ... ???????// } ???????// console.log(i); ???????var a = []; ???????for (let i = 0; i < 10; i++) { ?????????a[i] = function () { ???????????console.log(i); ?????????}; ???????} ???????a[5](); // 10 ???????window.onload = function(){ ???????????// //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类); ???????????????????//思路：1.点亮上面的盒子。 ??2.利用索引值显示下面的盒子。 ???????????var tabli = document.getElementsByTagName(‘li‘); ???????????var tabContent = document.getElementsByTagName(‘p‘) ????????????????????for(let i= 0; i < tabli.length; i++){ ???????????????// 绑定索引值（新增一个自定义属性：index属性） ???????????????// tabli[i].index ?= i; ??????????????????????????????tabli[i].onclick = function(){ ???????????????????????????????????????// 1.点亮上面的盒子。 ??2.利用索引值显示下面的盒子。(排他思想) ???????????????????for(var j = 0; j < tabli.length; j++){ ???????????????????????// tabli[j].className = ‘‘; ???????????????????????// tabContent[j].className = ‘‘; ???????????????????????console.log(this); ???????????????????????tabli[j].className = ‘‘; ???????????????????????tabContent[j].className = ‘‘; ???????????????????} ???????????????????????this.className = ‘active‘ ????????????????????????????????????tabContent[i].className = ‘active‘;//【重要代码】 ???????????????} ???????} ???????} ???????????</script></html>
前端 js
原文地址：https://www.cnblogs.com/lnrick/p/9484597.html