标签：... false 首页 log 方式 padding meta model color
伪数组
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);
// html
console.log(document.documentElement)
// body
console.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);
// html
console.log(document.documentElement)
// body
console.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‘;
}
}
// 创建DOM
var 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>
标签：... false 首页 log 方式 padding meta model color
原文地址：https://www.cnblogs.com/lnrick/p/9484597.html
