提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
1、DOM宿主对象（环境or浏览器提供的对象）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
宿主对象：浏览器内部或者编译环境自带的对象
DOM(Document Object Model)文档对象模型
注： 1.JS中通过DOM来对HTML文档进行操作。
* 只要理解了DOM就可以随心所欲的操作web页面
*
* 文档D：
* - 文档表示的就是整个的HTML网页文档
* 对象O:
* - 对象表示将网页中的每一个部分都转换为了一个对象
* 模型M:
* - 使用模型来表示对象之间的关系，这样方便我们获取对象
*
*
*
*解释：
* 对象O：就是将网页的每一个结点都转换成了一个对象
* 装换成对象之后，我们就可以使用面向对象的语言或者方式来使用对象
*
* 模型M:体现的是结点与结点之间的关系，有了模型，就可以从结点找到另外的一个结点
* 方便获取对象
*
* 节点Node：节点是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为一个节点
* 比如：HTML标签，属性，文本，注释，整个文档等都是一个节点
* 虽然都是节点：但是实际上他们的具体类型是不同的。
* 比如：
* 标签：标签节点、：p h div
* 属性：属性节点、：id="pid", pid就是
* 文本：文本节点、：<p>哈哈哈哈</p>，哈哈哈哈就是文本节点
* 文档：文档节点 ：整个HTML文件都是文档节点
* 节点的类型不同，属性和方法也都不尽相同。
*
*
*
*
*/
/*那如何找到一个节点(对象)*/
/*
自己的解释：通过找到根元素来找出它下边的子元素
*
*
*
*
*
*/
</script>
</head>
<body>
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
/*
* 浏览器已经为我们提供文档Document节点，对象这个对象是window属性，可以直接用
* 所以我们在页面中可以直接使用，文档节点代表的是整个网页
*
*/
//检查有没有document
//console.log(document);//显示：Object htmldocument
//所以说是可以使用的：那么怎么用？
//获取button对象,获取肯定是通过调用一个方法或者一个属性
var btn = document.getElementById("btn");
//修改也是，肯定是通过调用一个方法或者一个属性来修改
//修改按钮的文字
//btn.innerHTML="i'm button";
/*
总结: 找对象 搞对象
*
* 根据根元素找对象，在根据方法或者属性搞对象
* (找到对象之后，利用方法属性为所欲为)
*/
</script>
</body>
</html>
2、事件的简介
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<script type="text/javascript">
/*
* 事件：
* 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间
* JavaScript与HTML之间的交互是通过事件实现的
* 对于Web应用来说，有下面这些代表性的
* 事件
* ：点击某个元素、
* ：将鼠标移动至某个元素的上方、
* ：按下键盘上某个键等等
* 事件:就是用户和浏览器之间的交互行为
* 比如:点击按钮，鼠标移动，关闭窗口....
*
*
*
*/
</script>-->
</head>
<body>
<!--1.设置事件-->
<!--<button id="btn">我是一个按钮</button>-->
<!--2.处理事件-->
<!--
第一种方式：
onclick="js代码"
我们可以在事件对应的属性中设置一些js代码
这样当事件被触发时，这些代码将会被执行
第一种：这一种写法我们称为叫结构和行为耦合，不方便进行后期维护
<button id="btn" onclick="alert('讨厌~你点我干嘛');">我是一个按钮</button>
-->
<!--第二种方式：
在<script type="text/javascript"></script>里面写
-->
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
//1.找到对象
var btnn = document.getElementById("btn");
//2.搞对象(给btnn对象去添加属性)
//3.绑定一个事件
//像这一种单击事件绑定的函数，我们称为单击响应事件；双击为双击响应事件
btnn.onclick = function(){
alert("你还点什么点~~~~");
};
</script>
<!--
总结:这里为什么btnn和btn都可以实现点击事件
第一种方式：直接在标签当中写入事件(属性)
第二种方式：在script标签当中来建立对象，然后获取对象并且绑定事件(属性)来获取回调函数function(){}
-->
</body>
</html>
3、文档流的加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 浏览器在加载一个页面时，是按照自上向下的顺序加载的
* 读取到一行就运行一行，如果将script标签写到页面的上边
* 在代码执行时，页面还没有加载
*
* 所以JS代码编写到页面下部就是为了，可以在页面加载完毕后再执行js代码
* 规则：
* 先页面代码
* 再写JS
* 按照JS的规范来写
*/
/*方式一：*/
/*1.建立对象:从网页的文档document中使用getElementById获取*/
//获取id为btn的按钮
/*var btn = document.getElementById("btn");
//2.绑定事件获取回调函数
//为按钮绑定一个单击事件
btn.onclick = function(){
alert("哎！我出来了我出来了");
};*/
</script>
</head>
<body>
<!--1.<button id="btn">我是一个按钮</button>不能放在事件实现的后面，会报错为null-->
<!--方式二:-->
<button id="btn">我是一个按钮</button><!--一定要先写前边-->
<script type="text/javascript">
/*1.建立对象:从网页的文档document中使用getElementById获取*/
//获取id为btn的按钮
var btn = document.getElementById("btn");
/*2.绑定事件获取回调函数*/
//为按钮绑定一个单击事件
btn.onclick = function(){
alert("哎！我出来了我出来了");
};
/*
* 方式三：我想实现第一种方式
* 目的就是：先执行页面，再加载js代码实现功能
* 看文档流的加载2：
*
*/
</script>
</body>
</html>
4、文档流的加载2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
浏览器在加载一个页面时，是按照自上向下的顺序加载的
* 读取到一行就运行一行，如果将script标签写到页面的上边
* 在代码执行时，页面还没有加载,页面没有加载DOM对象也没有加载
* 会导致无法获取到DOM对象
*
* 只有两种方法：
* 1.要么直接写在标签元素的下方
* <button></button>
* script
* 2.要么使用onload事件使DOM对象在文档流之后再执行
* window.onload = function(){
* DOM执行对象
* }
* <button></button>
*
*
* 总结：最优的还得是第一种：先加载先执行，
* 因为第二种先加载的是onload里面的DOM使它延后，再执行文档加载，再返回来执行onload的js代码
*
*/
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("哎！你点我干嘛啊！你好~~~");
};
};
</script>
</head>
<body>
<button id="btn">点一下</button>
<!--
第三种方法：想办法实现
首先加载的是网页文档，再去加载js代码
或者先实现网页文档，再实现js代码
所以先实现网页文档再实现js文档也是一个事件
-->
<!--
onload事件会在整个页面加载完成之后才会触发
所以就可以实现该功能
但是：onload绑定什么，
查文档，绑定的是window，onload事件会在整个页面加载完成之后才触发，
所以将js代码放进去，先执行的就是整个页面的文档，onload稍后执行的就是js代码
- 为window绑定一个onload事件
该事件对应的响应函数将会在 页面加载完成 之后才执行,
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
-->
</body>
</html>
5、DOM查询
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
获取元素节点
- 通过document对象调用
1.getElementById()
- 通过id属性获取一个元素节点对象
2.getElementsByTagName()
- 通过 标签名 获取一组元素节点对象
- 一组div、h1元素，同名的元素(返回的是一组)
3.getElementsByName()
- 通过name属性获取一组元素节点对象
- 什么有name属性：就是那些 表 单 项
-->
</head>
<body>
</body>
</html>
6、DOM查询练习
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript">
//为id为btn01的按钮绑定一个单击响应函数
window.onload = function(){
var btn01 = document.getElementById("btn01");//通过document的getElementById找到id="btn01"
//找到绑定的对象btn01带有返回值的，然后再绑定oncick事件
btn01.onclick = function(){
//再次通过document找到id="bj"
var bj = document.getElementById("bj");
//带有返回值的bj使用innerHTML输出网页内容
alert(bj.innerHTML);
};
//查找所有li节点
var btn02 = document.getElementById("btn02");//通过document的getElementById找到li
btn02.onclick = function(){
//再次通过document找到li
var lis = document.getElementsByTagName("li");
//这时候lis成为了一个数组
//alert(lis.length);显示11
//历遍lis[i]出内容
for(var i =0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}
};
//查找name=gender的所有节点
//找到btn03这个id
var btn03 = document.getElementById("btn03");
//绑定点击事件并且接收一个回调函数
btn03.onclick = function(){
//使用getElementsByName找到name="gender"的值 并且返回到inputs中
var inputs = document.getElementsByName("gender");
//alert(inputs.innerHTML);显示类型
//alert(inputs.length);
//循环输出该数
for(var i=0 ; i<inputs.length ; i++){
/* innerHTML用于获取元素内部的HTML代码的
* 对于自结束标签，这个属性没有意义*/
//alert(inputs[i].innerHTML);innerHTML不适合自结束标签
//alert(inputs[i].name);
/*
* 如果需要读取元素节点属性，
* 直接使用 元素.属性名
* 例子：元素.id 元素.name 元素.value
* 注意：class属性不能采用这种方式，
* 读取class属性时需要使用 元素.className
*/
/*但是特别注意的就是:class因为是保留字所以不能在自结束标签中使用，所以使用className替换class*/
//alert(inputs[i].class);使用不了
alert(inputs[i].className);
}
};
//查找#city下所有li节点
//返回#city的所有子节点
//返回#phone的第一个子节点
//返回#bj的父节点
//返回#android的前一个兄弟节点
//读取#username的value属性值
//设置#username的value属性值
//返回#bj的文本值
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input class="hello" type="radio" name="gender" value="male"/>
Male
<input class="hello" type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
7、DOM查询
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript">
/*自己写的：*/
//为id为btn01的按钮绑定一个单击响应函数
window.onload = function(){
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
var bj = document.getElementById("bj");
alert(bj.innerHTML);
};
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//查找所有li节点
var lis = document.getElementsByTagName("li");
for (var i = 0 ; i<lis.length ; i++) {
alert(lis[i].innerHTML);
}
};
//为id为btn03的按钮绑定一个单击响应函数
//查找name=gender的所有节点
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
var inputs = document.getElementsByName("gender");//注意是属性值，不是属性名：name="gender"
for(var i = 0 ; i<inputs.length ; i++){
//alert(inputs[i].name);
alert(inputs[i].className);
}
};
//为id为btn03的按钮绑定一个单击响应函数
//查找#city下所有li节点
//返回#city的所有子节点
//返回#phone的第一个子节点
//返回#bj的父节点
//返回#android的前一个兄弟节点
//读取#username的value属性值
//设置#username的value属性值
//返回#bj的文本值
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input class="hello" type="radio" name="gender" value="male"/>
Male
<input class="hello" type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
<!--window.onload = function(){
//为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//查找#bj节点
var bj = document.getElementById("bj");
//打印bj
//innerHTML 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
};
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//查找所有li节点
//getElementsByTagName()可以根据标签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个，也会封装到数组中返回
var lis = document.getElementsByTagName("li");
//打印lis
//alert(lis.length);
//变量lis
for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}
};
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//查找name=gender的所有节点
var inputs = document.getElementsByName("gender");
//alert(inputs.length);
for(var i=0 ; i<inputs.length ; i++){
/*
* innerHTML用于获取元素内部的HTML代码的
* 对于自结束标签，这个属性没有意义
*/
//alert(inputs[i].innerHTML);
/*
* 如果需要读取元素节点属性，
* 直接使用 元素.属性名
* 例子：元素.id 元素.name 元素.value
* 注意：class属性不能采用这种方式，
* 读取class属性时需要使用 元素.className
*/
alert(inputs[i].className);
}
};
};
-->8、轮播图的实现（图片自己找）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
margin: 50px auto;
width: 450px;
height: 290px;
background: #bfa;
text-align: center;
}
img{
display: block;
width: 400px;
height: 250px;
padding: 8px 23px;
}
</style>
<script type="text/javascript">
/*window.onload = function(){
//获取上一张的id
var perv = document.getElementById("perv");
//获取下一张的id
var next = document.getElementById("next");
//获取图片的src，用来改变图片
var img = document.getElementsByTagName("img")[0];
//将图片保存到数组当中去
var imgArr =["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpeg"];
//改变下标使图片动起来
var index = 0;
//设置perv上一张的点击事件onclick
perv.onclick = function(){
//点击切换图片
//img.src=imgArr[0];
//当图片为第一张的时候，点击的时候跳到最后一张，循环
index--;
if(index < 0){
index=imgArr.length-1;
}
img.src=imgArr[index];
};
//设置next下一张的点击事件onclick
next.onclick = function(){
//切换到下一张是index自增
index++;
//点击切换图片
//img.src=imgArr[1];
//当图片为最后一张的时候，点击的时候跳到第一张，循环
if(index > imgArr.length-1){
index=0;
}
//切换图片就是修改img的src属性
//要修改一个元素的属性元素.属性 = 属性值
img.src=imgArr[index];
};
};*/
/*方式二：*/
window.onload = function(){
//获取上一张的标签
var perv = document.getElementById("perv");
//获取下一张的标签
var next = document.getElementById("next");
//获取图片的img[0]
//这里是一个点
var img = document.getElementsByTagName("img")[0];
//把图片都放进数组当中
//这里也是一个点
var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpeg"];
//设置下标，让让它改变
//这里是一个点
var index = 0;
//设置文字
var title = document.getElementById("title");
//单个设置的时候，不变，一直都是1，需要每点击一次，index改变一次
//这里是一个点
title.innerHTML="总共有"+imgArr.length+"张，这是第"+(index+1)+"张";
//1.上一张的点击事件
perv.onclick = function(){
//获取图片路径
//img.src="img/1.jpg";
//然后使其动起来
//这里是一个点
index--;
//当图片为第一张的时候，点击直接到最后一张
//这里是一个点
if(index < 0)
{
index = imgArr.length-1;
}
//这里是一个点
img.src =imgArr[index];
//单个设置的时候，不变，一直都是1，需要每点击一次，index改变一次
title.innerHTML="总共有"+imgArr.length+"张，这是第"+(index+1)+"张";
};
//2.下一张的点击事件
next.onclick = function(){
//获取图片路径
//img.src="img/1.jpg";
//然后使其动起来
//img.src="img/2.jpg";
//这里是一个点
index++;
//当图片为最后一张的时候，点击直接到第一张
//这里是一个点
if(index > imgArr.length-1)
{
index = 0;
}
//这里是一个点
img.src =imgArr[index];
//单个设置的时候，不变，一直都是1，需要每点击一次，index改变一次
title.innerHTML="总共有"+imgArr.length+"张，这是第"+(index+1)+"张";
};
};
</script>
</head>
<body>
<div id="outer">
<p id="title"></p>
<img src="img/1.jpg"/>
<button id="perv">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
