JavaScript进阶学习-webAPI（总结）
2024-05-18 18:11:13
webAPI
DOM
概念
JS分三个部分：
ECMAScript标准：js的基本语法
DOM：Document object model —文档对象模型—操作页面的元素
BOM: Browser object model —>浏览器对象模型—操作的是浏览器
DOM文档对象模型
文档
把一个HTML文件看成一个文档，由于万物皆对象，所以把这个文档看成是一个对象
XML
文件也可以看成是一个文档，侧重于存储数据
HTML
展示信息，展示数据的；文件看成是一个文档，那么这个文档看成是一个对象，文档中的所有的标签都可以看成是一个对象
页面中的每个标签，都是一个元素（element），每个元素都可以看成是一个对象
案例体验
//点击操作：---->事件：就是一件事，有触发和响应，事件源
// 按钮被点击，弹出对话框
// 按钮--->事件源
// 点击---->事件名字
// 被点了--->触发了
// 弹框了--->相应
//HTML代码，点击按钮弹出对话框，对话框：alert()===>js的代码
// html代码嵌入了js的代码，不方便后期的修改和维护
input type="button" value="显示效果" onclik="alert('wo beidianle')"
//最终的效果：应该把JS代码和html分离
function f1() {// 函数中可以写很多的代码alert("这是一个弹窗")
}
input type="button" value="显示效果" onclick="f1()"// 开始分离html 和js
input type="button" value="开始分离" id="btn"
function f2() {alert("开始分离html和js代码")；
}
//html标签中的id属性中存储的值是唯一的
//id属性就像是人的身份证号码一样，不能重复，页面中的唯一标识
// 从文档中找到ID值为BTN的这个标签元素// 最终版<input type="button" value="最终版" id="btn1">var btnobj1=document.getelementbyid("btn1")
btnobj1.onclick=function () {alert("哦,这真是太好了")
};
// 或者document.getelementbyid("btn1")onclick=function () {alert("哦,这真是太好了")
};
// 先有按钮，才能获取，获取之后才能注册事件// 根据id属性的值从文档中获取这个元素
点击按钮显示图片案例
input type="button" value="显示图片" id="btn"
img src="" alt="" id="im"
// 根据id获取按钮
var btnobj=document.getelementbyid("btn")
// 为按钮注册点击事件，添加事件处理函数
btnobj.onclick=function () {// 根据id获取图片的标签，设置图片的src属性值var imobj=document.getelemtnbyid("im")imobj.src="imgages../../"// 设置图片的大小imobj.width="300";imobj.height="400";
};
点击按钮修改P标签文本内容
凡是成对的标签，中间的文本内容，设置的时候都使用innertext这个属性的方式
input type="button" value="设置p的内容" id="btn"
<p id=p1>哈哈哈哈哈</p>
document.getelementbyid("btn").onclick=function(){// 根据id获取p标签，设置内容document.getelementbyid("p1").innertext="这是一个P"
}
点击按钮修改a标签的地址和热点文字
input type=button value="显示效果" id="btn"
<a id="ak" herf="baidu">asdasd</a>
document.getelementbyid("btn").onclick = function () {// 根据id获取超链接，设置href属性var aobj = document.getelementbyid("ak")aobj.href = "asdasdasdad";aobj.innertext = "传智博客"
}；
点击按钮修改多个p标签的文字
input type="button" value="设置p的内容" id="btn"
<div id="da1">
<p>哈哈哈哈哈</p>
<p>哈哈哈哈哈</p>
<p>哈哈哈哈哈</p>
<p>哈哈哈哈哈</p>
</div>
<div id="da2">
<p>aaaaaaaa</p>
<p>aaaaaaaa</p>
<p>aaaaaaaa</p>
<p>aaaaaaaa</p>
</div>
document.getelementbyid("btn").onclick=function(){// 根据id获取p标签，设置内容
var podjs=document.getelementbyid("dv1").getelementsbytagname("p");// 循环遍历这个数组for(var i=0;i<pobjs.length;i++) {// 每个p便签，设置问题pobjs[i].innertext="我们都是p"}
}；
案例点击按钮修改图片的alt和title
input type="button" value="显示效果" id="btn"
img src=".././/.//." alt="aa" title="sss"document.getelementbyid("btn").onclick = function() {// 返回的是一个伪数组var imgobjs = document.getelementbytagname("img");imgobjs[0].alt = "改了"；imgobjs[0].title = "aaaa";
};
案例点击按钮修改多个文本框的值
input type="button" value="修改文本框的值" id="btn"
input type="text" value=""
input type="text" value=""
input type="text" value=""
input type="text" value=""
input type="text" value=""
//script
document.getelementbyid("btn").onclick=function () {//获取所有的文本框var inputs=document.getelementbytagname("input");for(var i=0;i<inputs.length;i++){//判断这个元素是不是按钮if(inputs[i].type!="button") {inputs[i].value="aaaaaaavav"}}
};
点击每个图片弹出对话框
img src="../../../" alt="" id="im1"
img src="../../../" alt="" id="im2"
img src="../../../" alt="" id="im3"
document.getlementbyid("im1").onclick=function() {alert("被点击了")
}；
document.getlementbyid("im2").onclick=function() {alert("被点击了")
}；
document.getlementbyid("im3").onclick=function() {alert("被点击了")
}；
// 根据标签标签的名字获取图片标签，分别注册点击事件
var ingobjs=document.getelementsbytagname("img");
for(var i=0 ;i<imgobjs.length;i++) {imgobjs[i].onclick=function () {alert("被点了")};
}
点击按钮修改按钮的属性
input type="button" value="按钮" id="btn"
var btnobj = document.getelementbyid("btn");
btnobj.onclik = function() {// 修改按钮属性this.value = "我是按钮，谁咬我，我咬谁"；this.type = "text";this.id = "btn2";
}
###在某个事件中，自己的时间中的this就是当前的这个元素对象
点击图片修改自身宽高
img src="../../" ali="" id="im"
var imgobj = document.getelementbyid ("im");
imgobj.onclick = function() {this.width = "200";this.height = "300";
};
排他功能
input type="button" value="没怀孕"
input type="button" value="没怀孕"
input type="button" value="没怀孕"
input type="button" value="没怀孕"
input type="button" value="没怀孕"
// 获取所有的按钮，分别注册点击事件
var btnobjs = document.getelementsbytagname("input");
// 循环遍历所有的按钮
for (var i=0;i < btnobjs.length;i++) {// 为每个按钮都要注册点击事件btnobjs[i].onclick= function(){// 把所有的按钮的value值设置为默认的值：没怀孕for (var j=0; j<btnobjs.length;j++) {btnobjs[j].value = "没怀孕" }this.value = "怀孕了"； }；
}
// for循环是在页面加载的时候，执行完毕了
// 事件是在出发的时候，执行的点击按钮修改图片
input type="button" value = "显示大图" id="btn"
img sec="../../" alt="" id="im"
//
function my$(id) {return document.getelementbyid(id);
}
my$('btn').onclick=function () {my$("im").src="../../";
};
点击按钮修改性别
input type="button" valur="修改性别" id="btn1"
input type="radio" value="1" name="sex1" 男
input type="radio" value="2" name="sex2" id="rad1" 女
input type="radio" value="3" name="sex3" 保密
//规律：在表单标签中，如果属性和值只有一个，并且值是这个属性本身，那么，那么在写js代码，Dom操作的时候，这个属性值，是布尔类型就可以了。
function(id) {return document.getelementbyid(id);
}
my$("btn1").onclick = function() {my$("rad1").checked = true;
};input type="button" value="选择兴趣" id="btn2"
input type="checkbox" value="1" name="xingqu" 吃饭
input type="checkbox" value="2" name="xingqu" 睡觉
input type="checkbox" value="3" name="xingqu" 打豆豆
input type="checkbox" value="4" name="xingqu" 打篮球
input type="checkbox" value="5" name="xingqu" 打足球
input type="checkbox" value="6" name="xingqu" 打铅球
// 方法同上
点击按钮选择菜单
input type="button" value="点菜" id="btn"
select name="" id="ss"
option value="1" aa /potion
option value="2" bb /potion
option value="3" cc /potion
option value="4" id="op1" dd /potion
/select
my$("btn").onclick = function() {// 点击选择my$("op1").selected=true;
}
// 多行文本
// disabled 这个属性是禁用的
// readonly 只读
// html属性中属性和值是自己的，并且只有一个，其实，可以只写这个属性，不用赋值点击按钮设置div的宽和高
input type="button" value="设置样式" id="btn"
div id="dv" style="width=200px" /div
// 凡是css中这个属性是多个单词的写法，在js代码dom操作的时候 把-干掉,后面的单词首字母大写即可
function my$(id) {return getelementbyid(id).onclick
}
my$(dv).onclick = function() {my$(dv).style.width="300px";my$(dv).style.height="300px";my$(dv).style.backgroundColor="pink";}点击按钮设置div隐藏
div {width:300px;height：300px;bgc:pink;
}
div id="dv" /div
input type="button" vluce="隐藏" id="btn"
// 根据id获取按钮，注册点击事件，添加事件处理函数
my$("btn").onclick = function () {my$("dv").style.display="none";
}// 根据id获取按钮,注册点击事件，添加事件处理函数
my$("btn").onclick= function() {// 判断当前点击的按钮的Value值if (this.value=="隐藏"){my$(:dv).style.display="none"; //隐藏this.values="显示"}else if(this.value=="显示") {may$("dv").style.display="block"; // 隐藏this.value="隐藏"}
}
在JS代码中DOM操作的时候，设置元素的类样式，不用class关键字，应该使用，classname
网页的开关灯
input type="button" value="关灯" id="btn"
my$("btn").onclick=function () {//获取body标签document.body.classname= document.body.classname!="cls"?"cls":"";
}
复习总结
DOM树：把html页面或者xml文件看成一个文档，文档就是一个对象，这个文档中所有的标签都是元素，元素也可是看成是对象，标签（元素，对象）有很多，还有嵌套的关系，组成的这中层次结构，可以模拟成树形结构图，简称：树状图，就是DOM树
获取元素
2种方式：
根据id从整个文档中获取元素—返回的是一个元素对象
Document.getelementbyid(“id属性的值”)
根据标签的名字获取元素—返回的元素对象组成的伪数组
document.getielementbytagname(“标签的名字”)
操作基本标签的属性
Src,title,alt,href,id属性
操作表单标签的属性
Name,value,type，checked,selected,disabled,readonly
元素样式的操作
对象.style.属性=值；
对象.className=值；
为元素添加事件的操作
事件：就是一件事，有事件源，触发和响应
this关键字—如果是在当前的元素的时间中使用this，那么this就是当前的对象
内置对象：系统自带的对象
自定义对象：自己写的独享
浏览器对象：
DOM
DOM对象：通过DOM方式获取的元素得到的对象
元素：element:页面中的标签
节点;Node:页面中所有的内容，标签，属性，文本
根元素：html标签
页面中的顶级对象——document
第二部分
案例–重点
元素的样式的操作的案例
阻止超链接跳转、大小图的切换、美图相册、元素样式操作的相关案例：查缺补漏：操作基本标签和表单标签的小案例
innertext和textcontent
innertext和innerhtml的区别
兼容代码
自定义属性
节点操作
点击按钮禁用文本框
input type="button" value="禁用文本框" id="btn"
input type="text" value="文本框" id="txt"
// 先根据id获取按钮，为按钮注册点击事件，添加事件处理函数
document.getelementbyid("btn").onclick=function() {// 根据id获取文本框，设置disabled属性document.getelementbyid("txt").disabled=true;
};
阻止超链接跳转
// 阻止超链接的默认的跳转:return false
a herf="../../" id="ak"百度
document.getelementbyid("ak").onclick=function() {alert:"aaa"return false;
} 美女相册
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">body {font-family: "Helvetica", "Arial", serif;color: #333;background-color: #ccc;margin: 1em 10%;}h1 {color: #333;background-color: transparent;}a {color: #c60;background-color: transparent;font-weight: bold;text-decoration: none;}ul {padding: 0;}li {float: left;padding: 1em;list-style: none;}#imagegallery {list-style: none;}#imagegallery li {margin: 0px 20px 20px 0px;padding: 0px;display: inline;}#imagegallery li a img {border: 0;}</style>
</head>
<body><h2>美女画廊
</h2><ul id="imagegallery"><li><a href="images/1.jpg" title="美女A"><img src="data:images/1-small.jpg" width="100" alt="美女1"/></a></li><li><a href="images/2.jpg" title="美女B"><img src="data:images/2-small.jpg" width="100" alt="美女2"/></a></li><li><a href="images/3.jpg" title="美女C"><img src="data:images/3-small.jpg" width="100" alt="美女3"/></a></li><li><a href="images/4.jpg" title="美女D"><img src="data:images/4-small.jpg" width="100" alt="美女4"/></a></li>
</ul><div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="data:images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>
<script src="common.js"></script>
<script>//点击a标签,把a标签中的href的属性值给id为image的src属性//把a的title属性的值给id为des的p标签赋值//从ul中标签获取获取所有的a标签var aObjs=my$("imagegallery").getElementsByTagName("a");//循环遍历所有的a标签for(var i=0;i<aObjs.length;i++){//为每个a标签注册点击事件aObjs[i].onclick=function () {//为id为image的标签的src赋值my$("image").src=this.href;//为p标签赋值my$("des").innerText=this.title;//阻止超链接默认的跳转return false;};}
</script>
</body>
</html>
隔行变色
<input type="button" value="隔行变色" id="btn"/>
<ul id="uu"><li>红旗</li><li>五菱宏光</li><li>奔驰</li><li>兰博基尼</li><li>哈弗</li><li>奥拓</li><li>奥迪</li><li>悍马</li>
</ul><script src="common.js"></script>
<script>//奇红偶黄//点击按钮// my$("btn").οnclick=function () {// //获取所有的li标签// var list=my$("uu").getElementsByTagName("li");// for(var i=0;i<list.length;i++){// if(i%2==0){// //偶数// list[i].style.backgroundColor="red";// }else{// //奇数// list[i].style.backgroundColor="yellow";// }// }// };my$("btn").onclick = function () {//获取所有的li标签var list = my$("uu").getElementsByTagName("li");for (var i = 0; i < list.length; i++) {list[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";}};
高亮显示
<ul><li>金士百</li><li>雪花</li><li>百威</li><li>燕京</li><li>青岛</li><li>崂山</li><li>珠江</li><li>华丹</li>
</ul>
<script src="common.js"></script>
<script>//鼠标进入和鼠标离开两个事件//获取所有的li标签var list = document.getElementsByTagName("li");for (var i = 0; i < list.length; i++) {//为li注册鼠标进入事件list[i].onmouseover = function () {this.style.backgroundColor = "yellow";};//为li注册鼠标离开事件list[i].onmouseout = function () {//恢复到这个标签默认的颜色this.style.backgroundColor = "";};}
二维码的显示和隐藏
<style>.nodeSmall {width: 50px;height: 50px;background: url(images/bgs.png) no-repeat -159px -51px;position: fixed;right: 10px;top: 40%;}.erweima {position: absolute;top: 0;left: -150px;}.nodeSmall a {display: block;width: 50px;height: 50px;}.hide {display: none;}.show {display: block;}</style></head>
<body>
<div class="nodeSmall" id="node_small"><a href="#"></a><!--锚定--><div class="erweima hide" id="er"><img src="data:images/456.png" alt=""/></div>
</div>
<script src="common.js"></script>
<script>//获取鼠标要进入的a标签//先获取最外面的divvar aObj=my$("node_small").getElementsByTagName("a")[0];//为a注册鼠标进入aObj.onmouseover=function () {my$("er").className="erweima show";};//为a注册鼠标离开aObj.onmouseout=function () {my$("er").className="erweima hide";};
</script>
单独获取name
<body>
<input type="button" value="显示效果" id="btn"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name2"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name3"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name1"/><br/><script src="common.js"></script>
<script>//点击按钮,改变所有name属性值为name1的文本框中的value属性值my$("btn").onclick=function () {//通过name属性值获取元素-------表单的标签var inputs=document.getElementsByName("name1");for(var i=0;i<inputs.length;i++){inputs[i].value="我很好";}};
</script>
根据类标签获取元素
div {width: 200px;height: 50px;background-color: green;margin-top: 10px;}.cls {background-color: yellow;}</style>
</head>
<body>
<p>这是一个p</p>
<p class="cls">这是另一个p</p>
<span class="cls">这是第一个span</span><br/>
<span>这是第二个span</span><br/>
<div class="cls">这是第一个div</div>
<div>这是第二个div</div>
<input type="button" value="显示效果" id="btn"/><br/>
<script src="common.js"></script>
<script>//点击按钮设置应用cls类样式的标签的背景颜色为红色//getElementsByClassName();------>h5的my$("btn").onclick = function () {//根据类样式的名字来获取元素var objs = document.getElementsByClassName("cls");for (var i = 0; i < objs.length; i++) {//设置每个元素的背景颜色objs[i].style.backgroundColor = "red";}};
</script>
</body>
总结获取元素的方式
根据id属性的值获取元素,返回来的是一个元素对象
* document.getElementById(“id属性的值”);
* 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByTagName(“标签名字”);
* 下面的几个,有的浏览器不支持
* 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByName(“name属性的值”)
* 根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.getElementsByClassName(“类样式的名字”)
* 根据选择器获取元素,返回来的是一个元素对象
* document.querySelector(“选择器的名字”);
* 根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
* document.querySelectorAll(“选择器的名字”)
DIV高亮显示
<style>*{margin: 0;padding: 0;}div{width: 200px;height: 150px;background-color: green;float: left;margin-left: 10px;border: 2px solid green;}</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script src="common.js"></script>
<script>//获取所有的//divvar dvObjs=document.getElementsByTagName("div");for(var i=0;i<dvObjs.length;i++){//为每个div添加鼠标进入的事件dvObjs[i].onmouseover=function () {this.style.border="2px solid red";};//为每个div添加鼠标离开的事件dvObjs[i].onmouseout=function () {this.style.border="";};}
</script>
</body>
案例模拟搜索框
<style>input {color: gray;}</style>
</head>
<body>
<input type="text" value="请输入搜索内容" id="txt"/>
<script src="common.js"></script>
<script>//获取文本框//注册获取焦点的事件my$("txt").onfocus = function () {//判断文本框的内容是不是默认的内容if (this.value == "请输入搜索内容") {this.value = "";//清空文本框this.style.color = "black";}};//注册失去焦点的事件my$("txt").onblur = function () {// if (this.value == "") {// this.value = "请输入搜索内容";
// this.style.color = "gray";
// }if (this.value.length == 0) {this.value = "请输入搜索内容";this.style.color = "gray";}};</script>
</body>
设置获取密码框的长度
<input type="text" value="" id="txt"/>
<script src="common.js"></script>
<script>//获取文本框my$("txt").onblur=function () {//判断密码的长度if(this.value.length>=6&&this.value.length<=10){this.style.backgroundColor="red";}else{this.style.backgroundColor="green";}};
</script>
封装innertext和textcontent
<style>div {width: 200px;height: 150px;border: 2px solid red;}</style>
</head>
<body><input type="button" value="设置值" id="btn"/>
<div id="dv">哦,太神奇了</div><script src="common.js"></script>
<script>//设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持//设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持//如果这个属性在浏览器中不支持,那么这个属性的类型是undefined//判断这个属性的类型 是不是undefined,就知道浏览器是否支持//兼容代码//设置任意的标签中间的任意文本内容function setInnerText(element,text) {//判断浏览器是否支持这个属性if(typeof element.textContent =="undefined"){//不支持element.innerText=text;}else{//支持这个属性element.textContent=text;}}//获取任意标签中间的文本内容function getInnerText(element) {if(typeof element.textContent=="undefined"){return element.innerText;}else{return element.textContent;}}//测试my$("btn").onclick=function () {//console.log(getInnerText(my$("dv")));setInnerText(my$("dv"),"哈哈,我又变帅了");};//点击按钮设置div中的文本内容//my$("btn").onclick = function () {//设置标签中间的文本内容,应该使用textContent属性//my$("dv").textContent="this is div标签";//my$("dv").innerText = "啊,这是div";//获取标签中间的文本内容//console.log(my$("dv").innerText);//console.log(my$("dv").textContent);
// };</script>
</body>
innertext和innerhtml的区别
<style>div{width: 300px;height: 200px;border: 2px dotted red;}</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="显示效果获取" id="btn2"/>
<div id="dv">这是div
<p>这是一个p</p>
</div>
<script src="common.js"></script>
<script>//总结:如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的//总结:innerHTML是可以设置文本内容//总结:innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的//总结:想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML//获取的时候://innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.---获取不到标签的,文本可以获取//innerHTML才是真正的获取标签中间的所有内容my$("btn").onclick=function () {//my$("dv").innerText="哈哈";//设置文本//my$("dv").innerText="<p>这是一个p</p>";//设置html标签的代码//my$("dv").innerHTML="哈哈";//my$("dv").innerHTML="<p>这是一个p</p>";//设置Html标签的};//获取my$("btn2").onclick=function () {//可以获取标签中的文本内容//console.log(my$("dv").innerText);console.log(my$("dv").innerHTML);};//结论://如果想要(获取)标签及内容,使用innerHTML//如果想要设置标签,使用innerHTML//想要设置文本,用innerText,或者innerHTML,或者textContent
</script>
</body>
自定义属性引入
<style>ul{list-style-type: none;cursor: pointer;}</style>
</head>
<body>
<ul id="uu"><li score="10">助教的数学成绩</li><li score="20">班主任的成绩</li><li score="30">小苏的成绩</li><li score="40">小杰老师成绩</li><li score="50">乔峰成绩</li>
</ul>
<script src="common.js"></script>
<script>//html标签中有没有什么自带的属性可以存储成绩的----没有//本身html标签没有这个属性,自己(程序员)添加的,----自定义属性---为了存储一些数据//在html标签中添加的自定义属性,如果想要获取这个属性的值,需要使用getAttribute("自定义属性的名字")才能获取这个属性的值//获取所有的li标签var list=document.getElementsByTagName("li");for(var i=0;i<list.length;i++){list[i].onclick=function () {//alert(this.score);//不能//可以alert(this.getAttribute("score"));};}
</script>
</body>
设置和获取自定义属性
<style>ul{list-style-type: none;cursor: pointer;}</style>
</head>
<body>
<ul id="uu"><li>助教的数学成绩</li><li>班主任的成绩</li><li>小苏的成绩</li><li>小杰老师成绩</li><li>乔峰成绩</li>
</ul>
<script src="common.js"></script>
<script>//总结:设置自定义属性:setAttribute("属性的名字","属性的值");//获取自定义属性的值:getAttribute("属性的名字")//获取所有的li标签,然后为每个标签中动态的添加自定义属性和值//点击的时候获取该标签的自定义属性的值//根据id获取ul标签,并且或者该标签中所有的livar list=my$("uu").getElementsByTagName("li");//循环遍历for(var i=0;i<list.length;i++){//先为每个li添加自定义属性//list[i].score=(i+1)*10;//此方式,自定义属性在DOM对象上,不在标签中list[i].setAttribute("score",(i+1)*10);//点击每个li标签,显示对应的自定义属性值list[i].onclick=function(){alert(this.getAttribute("score"));};}
</script>
移除自定义属性
<style>div{width: 200px;height: 100px;background-color: yellow;}.cls{background-color: green;}</style>
</head>
<body>
<input type="button" value="移除自定义属性" id="btn"/>
<div id="dv" score="10" class="cls"></div>
<script src="common.js"></script>
<script>//移除自定义属性:removeAttribute("属性的名字")//点击按钮移除元素的自定义属性my$("btn").onclick=function () {//my$("dv").removeAttribute("score");//移除元素的类样式//值没有了,但是属性还是有的//my$("dv").className="";//也可以移除元素的自带的属性my$("dv").removeAttribute("class");};</script>
使用js完成Tab切换
<style>* {margin: 0;padding: 0;}ul {list-style-type: none;}.box {width: 400px;height: 300px;border: 1px solid #ccc;margin: 100px auto;overflow: hidden;}.hd {height: 45px;}.hd span {display: inline-block;width: 90px;background-color: pink;line-height: 45px;text-align: center;cursor: pointer;}.hd span.current {background-color: purple;}.bd li {height: 255px;background-color: purple;display: none;}.bd li.current {display: block;}</style></head>
<body>
<div class="box" id="box"><div class="hd"><span class="current">体育</span><span>娱乐</span><span>新闻</span><span>综合</span></div><div class="bd"><ul><li class="current">我是体育模块</li><li>我是娱乐模块</li><li>我是新闻模块</li><li>我是综合模块</li></ul></div>
</div>
<script src="common.js"></script>
<script>//获取最外面的divvar box=my$("box");//获取的是里面的第一个divvar hd=box.getElementsByTagName("div")[0];//获取的是里面的第二个divvar bd=box.getElementsByTagName("div")[1];//获取所有的li标签var list=bd.getElementsByTagName("li");//=================================//获取所有的span标签var spans=hd.getElementsByTagName("span");//循环遍历的方式,添加点击事件for(var i=0;i<spans.length;i++){//在点击之前就把索引保存在span标签中spans[i].setAttribute("index",i);//================================spans[i].onclick=function () {//第一件事,所有的span的类样式全部移除for(var j=0;j<spans.length;j++){spans[j].removeAttribute("class");}//第二件事,当前被点击的span应用类样式this.className="current";//span被点击的时候获取存储的索引值//alert(this.getAttribute("index"));var num=this.getAttribute("index");//==============================//获取所有的li标签,每个li标签先全部隐藏for(var k=0;k<list.length;k++){list[k].removeAttribute("class");}//当前被点击的span对应的li标签显示list[num].className="current";};}</script>
总结
<script>/*** 完成随机点名项目====晚上再说** 阻止超链接默认的跳转事件: return false;* 获取元素的方式* 根据id获取元素* document.getElementById("id属性的值");* 根据标签名字获取元素* document.getElementsByTagName("标签的名字");*** 有的浏览器不支持, IE低版本的浏览器不支持,IE8以下的* 根据name属性的值获取元素* document.getElementsByName("name属性的值");* 根据类样式的名字获取元素* document.getElementsByClassName("类样式的名字");* 根据选择器获取元素* document.querySelector("选择器");返回一个对象* 根绝选择器获取元素* document.querySelectorAll("选择器");返回数组,多个元素组成的** 设置元素的样式的方式* 对象.style.属性=值;* 对象.className=值;*** innerText和textContent的兼容问题* 目前的浏览器都支持innerText,应该是属于ie的标准* textContent本身是火狐支持,IE8不支持** innerText和innerHTML的区别* 都可以设置标签的文本内容,如果要设置标签及内容推荐使用innerHTML* 如果要获取标签中的文本,innerText,也可以使用innerHTML* 如果想要获取的是有标签,也有文本---innerHTML** 自定义属性的操作* 自定义属性:标签原本没有这个属性,为了存储数据,程序员自己添加的属性* 自定义属性无法直接通过DOM对象的方式获取或者设置* 对象.getAttribute("自定义属性名字");获取自定义属性的值* 对象.setAttribute("属性名字","值");设置自定义属性及值* 移除自定义属性* 对象.removeAttribute("属性的名字");*************** *///设置任意元素的中间的文本内容function setInnnerText(element,text) {if(typeof element.textContent=="undefined"){element.innerText=text;}else{element.textContent=text;}}//获取任意元素的中间的文本内容function getInnerText(element) {if(typeof element.textContent=="undefined"){return element.innerText;}else{return element.textContent;}}</script>
</head>
<body><p sayHi="您好" id="p1">这是一个p</p>
<script>//自定义属性不能直接通过DOM对象的方式来直接获取该属性的值console.log(document.getElementById("p1").id);
</script><!--<script src="common.js"></script>-->
<script>// document.getElementById("btn").onclick = function () {// this.value = "哈哈";
// };</script>
第三部分
节点—任意一个标签中的元素获取都非常方便
页面中所有的内容（标签，属性，文本），Node
根元素：HTML标签
节点的相关属性：（可以使用标签—元素.出来，可以使用属性节点.出来，文本节点.点出来）
Nodetype:节点的类型1—>标签 ，2—>属性，3—>文本
nodeName:节点的名字：标签节点—大写的的标签名字，属性节点—>小写的属性名字，文本节点——>#text
nodeValue:节点的值:标签节点——null，属性节点—属性值，文本节点-文本内容
获取相关节点
<body>
<div id="dv">哦哦<span>这是div中的第一个span标签</span><p>这是div中的第二个元素,第一个p标签</p><ul id="uu"><li>乔峰</li><li>鹿茸</li><li id="three">段誉</li><li>卡卡西</li><li>雏田</li></ul>
</div><script src="common.js"></script>
<script>//div
// var dvObj=document.getElementById("dv");
// //获取里面的每个子节点
// for(var i=0;i<dvObj.childNodes.length;i++){// var node=dvObj.childNodes[i];
// //nodeType--->节点的类型:1---标签,2---属性,3---文本
// //nodeName--->节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本
// //nodeValue-->节点的值:标签---null,属性--属性的值,文本--文本内容
// console.log(node.nodeType+"====="+node.nodeName+"===="+node.nodeValue);
// }//div
// var dvObj=document.getElementById("dv");
// //获取的是属性的节点
// var node=dvObj.getAttributeNode("id");
// console.log(node.nodeType+"----"+node.nodeName+"===="+node.nodeValue);//div
// var dvObj=document.getElementById("dv");
// //子节点
// console.log(dvObj.childNodes);//7个子节点
// //子元素
// console.log(dvObj.children);</script>
获取相关节点-12行代码
<body>
<div id="dv">哦哦<span>这是div中的第一个span标签</span><p>这是div中的第二个元素,第一个p标签</p><ul id="uu"><li>乔峰</li><li>鹿茸</li><li id="three">段誉</li><li>卡卡西</li><li>雏田</li></ul>
</div>
<script src="common.js"></script>
<script>//12行代码:都是获取节点和元素的//ulvar ulObj=document.getElementById("uu");//父级节点console.log(ulObj.parentNode);//父级元素console.log(ulObj.parentElement);//子节点console.log(ulObj.childNodes);//子元素console.log(ulObj.children);console.log("==============================================");//第一个子节点console.log(ulObj.firstChild);//------------------------IE8中是第一个子元素//第一个子元素console.log(ulObj.firstElementChild);//-----------------IE8中不支持//最后一个子节点console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素//最后一个子元素console.log(ulObj.lastElementChild);//-----------------IE8中不支持//某个元素的前一个兄弟节点console.log(my$("three").previousSibling);//某个元素的前一个兄弟元素console.log(my$("three").previousElementSibling);//某个元素的后一个兄弟节点console.log(my$("three").nextSibling);//某个元素的后一个兄弟元素console.log(my$("three").nextElementSibling);//总结:凡是获取节点的代码在谷歌和火狐得到的都是 相关的节点//凡是获取元素的代码在谷歌和火狐得到的都是 相关的元素//从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持// var ulObj=document.getElementById("uu");
//
//
// console.log("==============================================");
// //第一个子节点
// console.log(ulObj.firstChild.innerText);//------------------------IE8中是第一个子元素
// //第一个子元素
// console.log(ulObj.firstElementChild);//-----------------IE8中不支持
// //最后一个子节点
// console.log(ulObj.lastChild.innerText);//------------------------IE8中是第一个子元素
// //最后一个子元素
// console.log(ulObj.lastElementChild);//-----------------IE8中不支持
// //某个元素的前一个兄弟节点
// console.log(my$("three").previousSibling.innerText);
// //某个元素的前一个兄弟元素
// console.log(my$("three").previousElementSibling);
// //某个元素的后一个兄弟节点
// console.log(my$("three").nextSibling.innerText);
// //某个元素的后一个兄弟元素
// console.log(my$("three").nextElementSibling);
//
</script>
</body>
点击按钮使DIV中的所有P标签变色
<style>div {width: 300px;height: 450px;border: 1px solid red;}</style>
</head>
<body>
<input type="button" value="变色" id="btn"/>
<div id="dv"><span>这是span</span><p>这是p</p><span>这是span</span><p>这是p</p><span>这是span</span><p>这是p</p><span>这是span</span><a href="http://www.baidu.com">百度</a>
</div>
<script src="common.js"></script>
<script>my$("btn").onclick = function () {//先获取divvar dvObj = my$("dv");//获取里面所有的子节点var nodes = dvObj.childNodes;//循环遍历所有的子节点for (var i = 0; i < nodes.length; i++) {//判断这个子节点是不是p标签if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {nodes[i].style.backgroundColor = "red";}}};//点击按钮,设置p变色---节点的方式做
</script>
</body>
节点操作实现隔行变色
<input type="button" value="变色" id="btn"/>
<ul id="uu"><li>爆炒助教</li><li>油炸班主任</li><li>清蒸小苏</li><li>红烧班长</li><li>红烧肉</li><li>糖醋排骨</li><li>凉拌秋葵</li><li>鱼香胡萝卜丝</li>
</ul>
<script src="common.js"></script>
<script>//隔行变色--limy$("btn").onclick = function () {var count=0;//记录有多少个li//获取ul中所有的子节点var nodes = my$("uu").childNodes;for (var i = 0; i < nodes.length; i++) {//判断这个节点是不是li标签if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {nodes[i].style.backgroundColor=count%2==0?"red":"yellow";count++;//8个//nodes[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";}}};</script>
封装节点的兼容代码
<ul id="uu"><li>第一个</li><li>第二个</li><li>第三个</li><li>第四个</li><li>第五个</li>
</ul>
<script src="common.js"></script>
<script>//第一个节点和第一个元素的获取的代码在IE8中可能不支持//element.firstChild--->谷歌和火狐获取的是第一个子几点//element.firstChile--->IE8获取的是第一个子元素//element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持//获取任意一个父级元素的第一个子级元素function getFirstElementChild(element) {if(element.firstElementChild){//true--->支持return element.firstElementChild;}else{var node=element.firstChild;//第一个节点while (node&&node.nodeType!=1){node=node.nextSibling;}return node;}}//获取任意一个父级元素的最后一个子级元素function getLastElementChild(element) {if(element.lastElementChild){//true--->支持return element.lastElementChild;}else{var node=element.lastChild;//第一个节点while (node&&node.nodeType!=1){node=node.previousSibling;}return node;}}console.log(getFirstElementChild(my$("uu")).innerText);console.log(getLastElementChild(my$("uu")).innerText);//最后一个节点和最后一个元素的获取的代码在IE8中可能不支持//前一个节点和前一个元素的获取的代码在IE8中可能不支持//后一个节点和后一个元素的获取的代码在IE8中可能不支持//学习节点操作还是为了操作元素</script>
</body>
使用节点操作切换背景图片
<style>* {margin: 0px;padding: 0px;}body {background-image: url("images/1.jpg");}#mask {background-color: rgba(255, 255, 255, 0.3);height: 200px;text-align: center;}#mask img {width: 200px;margin-top: 35px;cursor: pointer;}</style></head>
<body id="bd">
<div id="mask"><img src="data:images/1.jpg" alt=""><img src="data:images/2.jpg" alt=""><img src="data:images/3.jpg" alt="">
</div>
<script src="common.js"></script>
<script>var imgObjs=my$("mask").children;//获取的所有的子元素//循环遍历所有img,注册点击事件for(var i=0;i<imgObjs.length;i++){imgObjs[i].onclick=function () {document.body.style.backgroundImage="url("+this.src+")";};}
</script></body>
全选与全不选使用节点的实现
<style>* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 300px;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}</style>
</head>
<body>
<div class="wrap"><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>红烧肉</td><td>田老师</td></tr><tr><td><input type="checkbox"/></td><td>西红柿鸡蛋</td><td>田老师</td></tr><tr><td><input type="checkbox"/></td><td>油炸榴莲</td><td>田老师</td></tr><tr><td><input type="checkbox"/></td><td>清蒸助教</td><td>田老师</td></tr></tbody></table>
</div>
<script src="common.js"></script>
<script>//获取全选的这个复选框var ckAll = my$("j_cbAll");//获取tbody中所有的小复选框var cks = my$("j_tb").getElementsByTagName("input");//点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态ckAll.onclick = function () {//console.log(this.checked);for (var i = 0; i < cks.length; i++) {cks[i].checked = this.checked;}};//获取tbody中所有的复选框,分别注册点击事件for(var i=0;i<cks.length;i++){cks[i].onclick=function () {var flag=true;//默认都被选中了//判断是否所有的复选框都选中for(var j=0;j<cks.length;j++){if(!cks[j].checked){//没选中就进来了flag=false;break;}}//全选的这个复选框的状态就是flag这个变量的值ckAll.checked=flag;};}</script>
</body>
元素的创建
* 元素创建-----为了提高用户的体验* 元素创建的三种方式:* 1. document.write("标签的代码及内容");* 2. 对象.innerHTML="标签及代码";* 3. document.createElement("标签的名字");//document.write("标签代码及内容");my$("btn").onclick=function () {document.write("<p>这是一个p</p>");};// document.write("<p>这是一个p</p>");//document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉//第二种方式创建元素: 对象.innerHTML="标签代码及内容";my$("btn").onclick=function () {my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";};//第三种方式创建元素//创建元素//document.createElement("标签名字");对象//把元素追加到父级元素中//点击按钮,在div中创建一个pmy$("btn").onclick = function () {//创建元素的var pObj = document.createElement("p");setInnnerText(pObj, "这是一个p");//把创建后的子元素追加到父级元素中my$("dv").appendChild(pObj);};点击按钮动态创建表格
var arr=[{name:"百度",href:"http://www.baidu.com"},{name:"谷歌",href:"http://www.google.com"},{name:"优酷",href:"http://www.youku.com"},{name:"土豆",href:"http://www.tudou.com"},{name:"快播",href:"http://www.kuaibo.com"},{name:"爱奇艺",href:"http://www.aiqiyi.com"}];//点击按钮创建表格my$("btn").onclick=function () {//创建table加入到div中var tableObj=document.createElement("table");tableObj.border="1";tableObj.cellPadding="0";tableObj.cellSpacing="0";my$("dv").appendChild(tableObj);//创建行,把行加入到table中for(var i=0;i<arr.length;i++){var dt=arr[i];//每个对象var trObj=document.createElement("tr");tableObj.appendChild(trObj);//创建第一个列,然后加入到行中var td1=document.createElement("td");td1.innerText=dt.name;trObj.appendChild(td1);//创建第二个列var td2=document.createElement("td");td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";trObj.appendChild(td2);}};元素相关方法
<style>div{width: 200px;height: 200px;border: 1px solid red;}</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="干掉第一个子元素" id="btn2"/>
<input type="button" value="干掉所有子元素" id="btn3"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>var i=0;my$("btn").onclick=function () {i++;var obj= document.createElement("input");obj.type="button";obj.value="按钮"+i;//my$("dv").appendChild(obj);//追加子元素//把新的子元素插入到第一个子元素的前面my$("dv").insertBefore(obj,my$("dv").firstElementChild);//my$("dv").replaceChild();---自己玩};my$("btn2").onclick=function () {//移除父级元素中第一个子级元素my$("dv").removeChild(my$("dv").firstElementChild);};my$("btn3").onclick=function () {//点击按钮删除div中所有的子级元素//判断父级元素中有没有第一个子元素while(my$("dv").firstElementChild){my$("dv").removeChild(my$("dv").firstElementChild);}};
</script>
</body>
创建一个元素
<style>div{width: 200px;height: 200px;border: 1px solid red;}</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>//有则删除,无则创建//先判断有没有,有就删除,然后再创建
// my$("btn").οnclick=function () {// //判断,div中有没有这个按钮,有就删除
// //判断这个按钮的子元素是否存在
// if(my$("btn2")){//如果为true就有
// my$("dv").removeChild(my$("btn2"));
// }
// var obj=document.createElement("input");
// obj.type="button";
// obj.value="按钮";
// obj.id="btn2";
// my$("dv").appendChild(obj);
// };my$("btn").onclick=function () {//判断,div中有没有这个按钮,有就删除//判断这个按钮的子元素是否存在if(!my$("btn2")){//如果为true就有var obj=document.createElement("input");obj.type="button";obj.value="按钮";obj.id="btn2";my$("dv").appendChild(obj);}};</script>
</body>
为元素绑定事件
//为元素绑定事件(DOM):一种,但是不兼容,有两种//1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持//2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持//为按钮绑定点击事件//参数1:事件的类型---事件的名字,没有on//参数2:事件处理函数---函数(命名函数,匿名函数)//参数3:布尔类型,目前就写false-----没有为什么,不解释,明天说//为同一个元素绑定多个相同的事件--
// my$("btn").addEventListener("click",function () {// console.log("小苏猥琐啊");
// },false);
// my$("btn").addEventListener("click",function () {// console.log("小苏龌龊啊");
// },false);
// my$("btn").addEventListener("click",function () {// console.log("小苏邪恶啊");
// },false);
// my$("btn").addEventListener("click",function () {// console.log("小苏下流啊");
// },false);//参数1:事件类型---事件名字，有on//参数2:事件处理函数---函数(命名函数,匿名函数)// my$("btn").attachEvent("onclick",function () {// console.log("小杨好帅哦1");
// });
//
// my$("btn").attachEvent("onclick",function () {// console.log("小杨好帅哦2");
// });
//
// my$("btn").attachEvent("onclick",function () {// console.log("小杨好帅哦3");
// });</script>
</body>
为元素绑定事件兼容代码
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数function addEventListener(element,type,fn) {//判断浏览器是否支持这个方法if(element.addEventListener){element.addEventListener(type,fn,false);}else if(element.attachEvent){element.attachEvent("on"+type,fn);}else{element["on"+type]=fn;}}addEventListener(my$("btn"),"click",function () {console.log("哦1");});addEventListener(my$("btn"),"click",function () {console.log("哦2");});addEventListener(my$("btn"),"click",function () {console.log("哦3");});// my$("btn")["on"+"click"]=function () {//
// };// function Person(name) {// this.name=name;
// this.sayHi=function () {// console.log("您好啊");
// };
// }// var per=new Person("小明");
// if(per.sayHii){//判断这个对象中有没有这个方法
// per.sayHii();
// }else{// console.log("没有这个方法");
// }</script>
</body>
复习总结
<script>/*** 节点:* 节点:页面中所有的内容都是节点(标签,属性,文本:文字,空格,换行)* 文档：document---页面中的顶级对象* 元素:页面中所有的标签, 标签---元素--对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)* 节点的属性:作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素* 节点的类型:1标签节点,2属性节点,3文本节点* nodeType:节点的类型,1---标签节点,2----属性节点,3---文本节点* nodeName:标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---#text* nodeValue:标签---null,属性---属性的值,文本---文本内容* if(node.nodeType==1&&node.nodeName=="P")** 获取节点及元素的代码(下面呢)**** 元素的创建* 三种元素创建的方式* 1. document.write("标签代码及内容"); 如果在页面加载完毕后创建元素.页面中的内容会被干掉* 2. 父级对象.innerHTML="标签代码及内容";* 3. document.createElement("标签名字");得到的是一个对象,* 父级元素.appendChild(子级元素对象);* 父级元素.inerstBefore(新的子级对象,参照的子级对象);* 移除子元素* 父级元素.removeChild(要干掉的子级元素对象);** 事件的绑定:为同一个元素绑定多个相同的事件* 三种方式:* 1. 对象.on事件名字=事件处理函数 如果是多个相同事件注册用这种方式,最后一个执行,之前的被覆盖了* my$("btn").οnclick=function(){};* 2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);* my$("btn").addEventListener("click",function(){},false);* 3. 对象.attachEvent("有on的事件名字",事件处理函数);* my$("btn").attachEvent("onclick",function(){});** *///为任意的一个元素,绑定任意的一个事件function addEventListener(element,type,fn) {if(element.addEventListener){element.addEventListener(type,fn,false);}else if(element.attachEvent){element.attachEvent("on"+type,fn);}else{element["on"+type]=fn;}}
// my$("btn")["on"+"click"]=function(){};
//
// var obj={// name:"张三",
// sayHi:function () {//
// }
//
// };//获取当前节点的父级节点console.log(my$("uu").parentNode);//获取当前节点的父级元素console.log(my$("uu").parentElement);//获取当前节点的子级节点console.log(my$("uu").childNodes);//获取当前节点的子级元素console.log(my$("uu").children);//获取当前节点的第一个子级节点console.log(my$("uu").firstChild);//获取当前节点的第一个子级元素console.log(my$("uu").firstElementChild);//获取当前节点的最后一个子级节点console.log(my$("uu").lastChild);//获取当前节点的最后一个子级元素console.log(my$("uu").lastElementChild);//获取当前节点的前一个兄弟节点console.log(my$("uu").previousSibling);//获取当前节点的前一个兄弟元素console.log(my$("uu").previousElementSibling);//获取当前节点的后一个兄弟节点console.log(my$("uu").nextSibling);//获取当前节点的后一个兄弟元素console.log(my$("uu").nextElementSibling);// document.write("<p>这是一个p</p>")//// document.body.innerHTML="<p>这是一个p</p>";</script>
</head>
<body><script src="common.js"></script>
<script>// var pObj=document.createElement("p");// 父级元素.appendChild(pObj);</script>
</body>
第四部分
绑定事件的区别
总结绑定事件的区别:* addEventListener();* attachEvent()** 相同点: 都可以为元素绑定事件* 不同点:* 1.方法名不一样* 2.参数个数不一样addEventListener三个参数,attachEvent两个参数* 3.addEventListener 谷歌,火狐,IE11支持,IE8不支持* attachEvent 谷歌火狐不支持,IE11不支持,IE8支持* 4.this不同,addEventListener 中的this是当前绑定事件的对象* attachEvent中的this是window* 5.addEventListener中事件的类型(事件的名字)没有on* attachEvent中的事件的类型(事件的名字)有on** 现在遇到的逆境,都是以后成长的阶梯********** *///为按钮绑定多个点击事件// my$("btn").addEventListener("click",function () {// console.log(this);
// },false);// my$("btn").attachEvent("onclick",function () {// console.log(this);
// });
解绑事件
//1 对象.on事件名字=事件处理函数----绑定事件
// my$("btn").οnclick=function () {// console.log("我猥琐");
// };
// my$("btn2").οnclick=function () {// //1.解绑事件
// my$("btn").οnclick=null;
// };// function f1() {// console.log("第一个");
// }
// function f2() {// console.log("第二个");
// }
// my$("btn").addEventListener("click",f1,false);
// my$("btn").addEventListener("click",f2,false);
//
// //点击第二个按钮把第一个按钮的第一个点击事件解绑
// my$("btn2").οnclick=function () {// //解绑事件的时候,需要在绑定事件的时候,使用命名函数
// my$("btn").removeEventListener("click",f1,false);
// };function f1() {console.log("第一个");}function f2() {console.log("第二个");}my$("btn").attachEvent("onclick",f1);my$("btn").attachEvent("onclick",f2);my$("btn2").onclick=function () {my$("btn").detachEvent("onclick",f1);};//解绑事件:/** 注意:用什么方式绑定事件,就应该用对应的方式解绑事件* 1.解绑事件* 对象.on事件名字=事件处理函数--->绑定事件* 对象.on事件名字=null;* 2.解绑事件* 对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件* 对象.removeEventListener("没有on的事件类型",函数名字,false);* 3.解绑事件* 对象.attachEvent("on事件类型",命名函数);---绑定事件* 对象.detachEvent("on事件类型",函数名字);*** */
</script>冒泡事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><style>#dv1{width: 300px;height: 200px;background-color: red;}#dv2{width: 250px;height: 150px;background-color: green;}#dv3{width: 200px;height: 100px;background-color: blue;}</style><script>//事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.</script>
</head>
<body>
<div id="dv1"><div id="dv2"><div id="dv3"></div></div>
</div>
<script src="common.js"></script>
<script>//事件冒泡,阻止事件冒泡,//如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持// e.stopPropagation(); 谷歌和火狐支持,my$("dv1").onclick=function () {console.log(this.id);};my$("dv2").onclick=function () {console.log(this.id);//window.event.cancelBubble=true;};//事件处理参数对象my$("dv3").onclick=function (e) {console.log(this.id);//阻止事件冒泡//e.stopPropagation();console.log(e);};
// document.body.οnclick=function () {// console.log("颤抖吧,你们这些愚蠢的标签");
// };
</script>
</body>
百度搜索
<style>#box {width: 450px;margin: 200px auto;}#txt {width: 350px;}#pop {width: 350px;border: 1px solid red;}#pop ul {margin: 10px;padding: 0px;width: 200px;list-style-type: none;}#pop ul li {}</style>
</head>
<body><div id="box"><input type="text" id="txt" value=""><input type="button" value="搜索" id="btn"></div><script src="common.js"></script>
<script>var keyWords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "传智播客是一个培训机构", "传说在传智有个很帅很纯洁的小杨", "苹果好吃", "苹果此次召回还是没有中国"];//获取文本框注册键盘抬起事件my$("txt").onkeyup = function () {//每一次的键盘抬起都判断页面中有没有这个divif(my$("dv")){//删除一次my$("box").removeChild(my$("dv"));}//获取文本框输入的内容var text = this.value;//临时数组--空数组------->存放对应上的数据var tempArr = [];//把文本框输入的内容和数组中的每个数据对比for (var i = 0; i < keyWords.length; i++) {//是否是最开始出现的if (keyWords[i].indexOf(text) == 0) {tempArr.push(keyWords[i]);//追加}}//如果文本框是空的,临时数组是空的,不用创建divif (this.value.length == 0 || tempArr.length == 0) {//如果页面中有这个div,删除这个divif (my$("dv")) {my$("box").removeChild(my$("dv"));}return;}//创建div,把div加入id为box的div中var dvObj = document.createElement("div");my$("box").appendChild(dvObj);dvObj.id = "dv";dvObj.style.width = "350px";//dvObj.style.height="100px";//肯定是不需要的------dvObj.style.border = "1px solid green";//循环遍历临时数组,创建对应的p标签for (var i = 0; i < tempArr.length; i++) {//创建p标签var pObj = document.createElement("p");//把p加到div中dvObj.appendChild(pObj);setInnerText(pObj, tempArr[i]);pObj.style.margin = 0;pObj.style.padding = 0;pObj.style.cursor = "pointer";pObj.style.marginTop = "5px";pObj.style.marginLeft = "5px";//鼠标进入pObj.onmouseover = function () {this.style.backgroundColor = "yellow";};//鼠标离开pObj.onmouseout = function () {this.style.backgroundColor = "";};}};
</script>
BOM
<style>body{height: 2000px;}</style><script>/** JavaScript分三个部分:* 1. ECMAScript标准---基本语法* 2. DOM--->Document Object Model 文档对象模型,操作页面元素的* 3. BOM--->Browser Object Model 浏览器对象模型,操作浏览器的** 浏览器中有个顶级对象:window----皇上* 页面中顶级对象:document-----总管太监* 页面中所有的内容都是属于浏览器的,页面中的内容也都是window的** 变量是window的*** */// var num=100;
// console.log(window.num);// function f1() {// console.log("小苏我也从了");
// }
// window.f1();//因为页面中的所有内容都是window的,window是可以省略的.//window.document.write("哈哈");// var name="您好";
// console.log(window.name);// console.log(top);
// console.log(window);</script>
</head>
location对象
//对象中的属性和方法//location对象//console.log(window.location);// //地址栏上#及后面的内容
// console.log(window.location.hash);
// //主机名及端口号
// console.log(window.location.host);
// //主机名
// console.log(window.location.hostname);
// //文件的路径---相对路径
// console.log(window.location.pathname);
// //端口号
// console.log(window.location.port);
// //协议
// console.log(window.location.protocol);
// //搜索的内容
// console.log(window.location.search);onload=function () {document.getElementById("btn").onclick=function () {//设置跳转的页面的地址//location.href="http://www.jd.com";//属性----------------->必须记住//location.assign("http://www.jd.com");//方法//location.reload();//重新加载--刷新//location.replace("http://www.jd.com");//没有历史记录};};</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>history对象
<input type="button" value="跳过去" id="btn1"/>
<input type="button" value="前进" id="btn2"/>
<script src="common.js"></script>
<script>//跳转的my$("btn1").onclick = function () {window.location.href = "15test.html";};//前进my$("btn2").onclick = function () {window.history.forward();};
</script>
test
<input type="button" value="后退" id="btn"/>
<script src="common.js"></script>
<script>//后退my$("btn").onclick = function () {window.history.back();};
</script>
###navigator对象
<script>通过userAgent可以判断用户浏览器的类型console.log(window.navigator.userAgent);//通过platform可以判断浏览器所在的系统平台类型.//console.log(window.navigator.platform);</script>
定时器
<script>//BOM中有两个定时器---计时器</script>
</head>
<body>
<input type="button" value="停止" id="btn"/>
<script>//定时器//参数1:函数//参数2:时间---毫秒---1000毫秒--1秒//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....//返回值就是定时器的id值var timeId = setInterval(function () {alert("hello");//断言}, 1000);document.getElementById("btn").onclick = function () {//点击按钮,停止定时器//参数:要清理的定时的id的值window.clearInterval(timeId);};
</script>
摇摆案例
<style>img {width: 200px;height: 200px;}div {position: absolute;}</style>
</head>
<body>
<input type="button" value="摇起来" id="btn1"/>
<input type="button" value="停止" id="btn2"/>
<div id="dv"><img src="data:images/heihei.jpg" alt=""/><img src="data:images/lyml.jpg" alt=""/>
</div>
<script src="common.js"></script>
<script>//点击按钮摇起来var timeId="";my$("btn1").onclick = function () {timeId= setInterval(function () {//随机数var x = parseInt(Math.random() * 100 + 1);var y = parseInt(Math.random() * 100 + 1);//设置元素的left和top属性值my$("dv").style.left = x + "px";my$("dv").style.top = y + "px";}, 10);};my$("btn2").onclick=function () {clearInterval(timeId);};
</script>
</body>
案例闪烁
<style>div{width: 600px;height: 600px;border:2px solid yellow;background-color: black;position: relative;}span{font-size: 30px;color: yellow;position: absolute;}</style>
</head>
<body>
<input type="button" value="亮起来" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>my$("btn").onclick=function () {setInterval(function () {my$("dv").innerHTML="<span>★</span>";var x = parseInt(Math.random() * 600 + 1);var y = parseInt(Math.random() * 600 + 1);my$("dv").firstElementChild.style.left=x+"px";my$("dv").firstElementChild.style.top=y+"px";},5);};
</script>
</body>
案例美女时钟
<body>
<img src="" alt="" id="im" />
<script src="common.js"></script>
<script>function f1() {//获取当前时间var dt = new Date();//获取小时var hour = dt.getHours();//获取秒var second = dt.getSeconds();hour = hour < 10 ? "0" + hour : hour;second = second < 10 ? "0" + second : second;my$("im").src="meimei/"+hour+"_"+second+".jpg";}f1();//页面加载完毕后,过了1秒才执行函数的代码setInterval(f1,1000);</script></body>
总结复习
<script>/* 为元素绑定事件的三种方式:* 1.对象.on事件类型=事件处理函数;* 2.IE8不支持* 对象.addEventListener("没有on的事件类型",事件处理函数,false);* 3.谷歌和火狐不支持* 对象.attachEvent("有on的事件类型",事件处理函数);** 为元素解绑事件的三种方式:* 1.* 对象.on事件类型=null;* 2.* 对象.removeEventListener("没有on的事件类型",事件处理函数名字,false);* 3.* 对象.detachEvent("有on的事件类型",事件处理函数);** 事件冒泡:元素A中有元素B,都有相同的事件,里面的元素的事件触发了,外面元素的事件也会触发.可以是多个元素嵌套** 阻止事件冒泡:* 两种* 1.* e.stopPropagation(); e---事件参数对象,谷歌和火狐都支持,IE8不支持* IE8和谷歌支持* window.event.cancelBubble=true;** window.event就是事件参数对象----e是一样的** BOM:Browser Object Model 浏览器对象模型---操作浏览器* 历史记录的后退和前进 history: back()后退 forward()前进* 地址栏上的地址的操作 location href属性跳转页面, assgin()跳转页面 reload()刷新 replace()方法替换地址栏上的地址的,没有历史记录的* 获取系统和浏览器的信息的 navigator userAgent属性---获取系统,浏览器的信息的*** 地址栏上#及后面的内容* console.log(window.location.hash);* 主机名及端口号* console.log(window.location.host);* 主机名* console.log(window.location.hostname);* 文件的路径---相对路径* console.log(window.location.pathname);* 端口号* console.log(window.location.port);* 协议* console.log(window.location.protocol);* 搜索的内容* console.log(window.location.search);* 定时器:* 该定时器会返回自己的id值* var timeId=window.setInterval(函数,时间);* 执行过程:页面加载完毕后,过了一段时间执行函数,反复的,除非清理定时器* window.clearInterval(定时器的id值);清理定时器*/</script>
</head>
<body>
<div id="dv"></div><script>document.getElementById("dv").onclick=function () {console.log("div被点击了");};document.body.onclick=function () {console.log("body被点击了");};document.onclick=function () {console.log("document被点击了");};
</script></body>
第五部分
一次性定时器
//常用的,反复的执行
// window.setInterval(function () {// alert("哈哈");
// },1000);//window.clearInterval(定时器id);//清理定时器//另一个定时器-------一次性的定时/** 参数1:函数* 参数2:时间---1000毫秒---1秒* 返回值:该定时器的id*** */// window.setTimeout(函数,时间);//页面加载后window.onload=function () {//一次性的定时器var timeId=window.setTimeout(function () {alert("您好");},1000);//点击这个按钮,停止这个一次性的定时器document.getElementById("btn").onclick=function () {clearTimeout(timeId);};};</script>
</head>
<body>
<input type="button" value="停下" id="btn"/>
<script></script>
</body>
协议按钮禁用
<body>
<textarea name="texta" id="" cols="30" rows="10">这个世界就是这么疯狂,你不同意,我就让你注册,秦始皇,打钱
</textarea>
<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled" />
<script src="common.js"></script>
<script>var time=5;var timeId= setInterval(function () {time--;my$("btn").value="请仔细阅读协议("+time+")";if(time<=0){//停止定时器就可以clearInterval(timeId);//按钮可以被点击了my$("btn").disabled=false;my$("btn").value="同意";}},1000);
</script>
</body>
点击按钮使DIV透明化
<style>div{width: 300px;height: 200px;background-color: hotpink;}</style>
</head>
<body><div id="dv"></div>
<input type="button" value="渐变" id="btn"/>
<script src="common.js"></script>
<script>my$("btn").onclick=function () {var opacity=10;//按钮的点击事件var timeId=setInterval(function () {//透明化了opacity--;if(opacity<=0){clearInterval(timeId);//清理定时器}//设置div的透明度my$("dv").style.opacity=opacity/10;},200);};
</script>
</body>
设置DIV的宽度
<style>* {margin: 0;padding: 0;}div {width: 200px;height: 150px;background-color: red;border-radius: 100px;}</style>
</head>
<body>
<input type="button" value="变宽" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>my$("btn").onclick = function () {var width = 200;var timeId = setInterval(function () {width+=10;if(width==800){clearInterval(timeId);}my$("dv").style.width=width+"px";}, 20);};
</script>
封装动画函数
<style>* {margin: 0;padding: 0;}input {margin-top: 20px;}div {margin-top: 30px;width: 200px;height: 100px;background-color: green;position: absolute;}</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>//div要移动,要脱离文档流---position:absolute//如果样式的代码是在style的标签中设置,外面是获取不到//如果样式的代码是在style的属性设置,外面是可以获取//获取div的当前位置//console.log(my$("dv").offsetLeft);//点击第一个按钮移动到400pxmy$("btn1").onclick = function () {animate(my$("dv"), 400);};//点击第二个按钮移动到800pxmy$("btn2").onclick = function () {animate(my$("dv"), 800);};//动画函数---任意一个元素移动到指定的目标位置function animate(element, target) {//先清理定时器clearInterval(element.timeId);//一会要清理定时器(只产生一个定时器)element.timeId = setInterval(function () {//获取div的当前的位置var current = element.offsetLeft;//数字类型,没有px//div每次移动多少像素---步数var step = 10;step = current < target ? step : -step;//每次移动后的距离current += step;//判断当前移动后的位置是否到达目标位置if (Math.abs(target - current) > Math.abs(s tep)) {element.style.left = current + "px";} else {//清理定时器clearInterval( element.timeId );element.style.left = target + "px";}}, 20);}
</script>
</body>
###电商的简单轮播
<style>* {margin: 0;padding: 0}ul {list-style: none}img {vertical-align: top}.box {width: 730px;height: 454px;margin: 100px auto;padding: 5px;border: 1px solid #ccc;}.inner {width: 730px;height: 454px;background-color: pink;overflow: hidden;position: relative;}.inner ul {width: 1000%;position: absolute;top: 0;left: 0;}.inner li {float: left;}.square {position: absolute;right: 10px;bottom: 10px;}.square span {display: inline-block;width: 16px;height: 16px;background-color: #fff;text-align: center;line-height: 16px;cursor: pointer;}.square span.current {background-color: orangered;color: #fff;}</style>
</head>
<body>
<div class="box" id="box"><div class="inner"><!--相框--><ul><li><a href="#"><img src="data:images/1.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/2.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/3.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/4.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/5.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/6.jpg" alt=""/></a></li></ul><div class="square"><span class="current">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div></div>
</div>
<script src="common.js"></script>
<script>//获取最外面的divvar box=my$("box");//获取相框var inner=box.children[0];//获取相框的宽度var imgWidth=inner.offsetWidth;//获取ulvar ulObj=inner.children[0];//获取所有的span标签var spanObjs=inner.children[1].children;//循环遍历所有的span标签,注册鼠标进入的事件for(var i=0;i<spanObjs.length;i++){//循环的时候把索引值保存在每个span的自定义属性中spanObjs[i].setAttribute("index",i);//注册鼠标进入事件spanObjs[i].onmouseover=function () {//先干掉所有的span的背景颜色for(var j=0;j<spanObjs.length;j++){//移除了每个span的类样式spanObjs[j].removeAttribute("class");}//设置当前的span的背景颜色this.className="current";//移动ul(每个图片的宽*鼠标放在这个按钮的索引值)//获取当前鼠标进入的span的索引var index=this.getAttribute("index");animate(ulObj,-index*imgWidth);};}//设置任意的一个元素,移动到指定的目标位置function animate(element, target) {clearInterval(element.timeId);//定时器的id值存储到对象的一个属性中element.timeId = setInterval(function () {//获取元素的当前的位置,数字类型var current = element.offsetLeft;//每次移动的距离var step = 10;step = current < target ? step : -step;//当前移动到位置current += step;if (Math.abs(current - target) > Math.abs(step)) {element.style.left = current + "px";} else {//清理定时器clearInterval(element.timeId);//直接到达目标element.style.left = target + "px";}}, 20);}
</script>
</body>
电商轮播图之左右焦点
<style>body, ul, ol, li, img {margin: 0;padding: 0;list-style: none;}#box {width: 520px;height: 280px;padding: 5px;position: relative;border: 1px solid #ccc;margin: 100px auto 0;}.ad {width: 520px;height: 280px;/*overflow: hidden;*/position: relative;}#box img {width: 520px;}.ad ol {position: absolute;right: 10px;bottom: 10px;}.ad ol li {width: 20px;height: 20px;line-height: 20px;border: 1px solid #ccc;text-align: center;background: #fff;float: left;margin-right: 10px;cursor: pointer;_display: inline;}.ad ol li.current {background: yellow;}.ad ul li {float: left;}.ad ul {position: absolute;top: 0;width: 2940px;}.ad ul li.current {display: block;}#focusD {display: none;}#focusD span {width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #000;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #fff;opacity: 0.3;border: 1px solid #fff;}#focusD #right {right: 5px;left: auto;}</style>
</head>
<body>
<div id="box" class="all"><div class="ad"><ul id="imgs"><li><img src="data:images/01.jpg"/></li><li><img src="data:images/02.jpg"/></li><li><img src="data:images/03.jpg"/></li><li><img src="data:images/04.jpg"/></li><li><img src="data:images/05.jpg"/></li></ul></div><!--相框--><div id="focusD"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="common.js"></script>
<script>//获取最外面的divvar box = my$("box");//获取相框var ad = box.children[0];//获取相框的宽度var imgWidth = ad.offsetWidth;//获取ulvar ulObj = ad.children[0];//获取左右焦点的divvar focusD = my$("focusD");//显示和隐藏左右焦点的div----为box注册事件box.onmouseover = function () {focusD.style.display = "block";};box.onmouseout = function () {focusD.style.display = "none";};//点击右边按钮var index=0;my$("right").onclick = function () {if(index<ulObj.children.length-1){index++;animate(ulObj,-index*imgWidth);}};//点击左边按钮my$("left").onclick = function () {if(index>0){index--;animate(ulObj,-index*imgWidth);}};//设置任意的一个元素,移动到指定的目标位置function animate(element, target) {clearInterval(element.timeId);//定时器的id值存储到对象的一个属性中element.timeId = setInterval(function () {//获取元素的当前的位置,数字类型var current = element.offsetLeft;//每次移动的距离var step = 10;step = current < target ? step : -step;//当前移动到位置current += step;if (Math.abs(current - target) > Math.abs(step)) {element.style.left = current + "px";} else {//清理定时器clearInterval(element.timeId);//直接到达目标element.style.left = target + "px";}}, 20);}</script></body>
电商之无缝轮播图
<style>* {margin: 0;padding: 0;}ul {list-style: none;}img {vertical-align: top;}/*取消图片底部3像素距离*/.box {width: 300px;height: 200px;margin: 100px auto;background-color: pink;border: 1px solid red;position: relative;overflow: hidden;}.box ul li {float: left;}.box ul {width: 1500px;position: absolute;left: 0;top: 0;}</style>
</head>
<body>
<div class="box" id="screen"><ul><li><img src="data:imagess/01.jpg" alt=""/></li><li><img src="data:imagess/02.jpg" alt=""/></li><li><img src="data:imagess/03.jpg" alt=""/></li><li><img src="data:imagess/04.jpg" alt=""/></li><li><img src="data:imagess/01.jpg" alt=""/></li></ul>
</div>
<script src="common.js"></script>
<script>var current = 0;//只声明了一次function f1() {var ulObj = my$("screen").children[0];current -= 10;if (current < -1200) {ulObj.style.left = 0 + "px";current = 0;} else {ulObj.style.left = current + "px";}}var timeId=setInterval(f1, 20);my$("screen").onmouseover=function () {//停止clearInterval(timeId);};my$("screen").onmouseout=function () {//继续timeId=setInterval(f1, 20);};</script></body>
电商完整轮播图—难理解需重复梳理逻辑
<style type="text/css">* {padding: 0;margin: 0;list-style: none;border: 0;}.all {width: 500px;height: 200px;padding: 7px;border: 1px solid #ccc;margin: 100px auto;position: relative;}.screen {width: 500px;height: 200px;overflow: hidden;position: relative;}.screen li {width: 500px;height: 200px;overflow: hidden;float: left;}.screen ul {position: absolute;left: 0;top: 0px;width: 3000px;}.all ol {position: absolute;right: 10px;bottom: 10px;line-height: 20px;text-align: center;}.all ol li {float: left;width: 20px;height: 20px;background: #fff;border: 1px solid #ccc;margin-left: 10px;cursor: pointer;}.all ol li.current {background: #DB192A;}#arr {display: none;}#arr span {width: 40px;height: 40px;position: absolute;left: 5px;top: 50%;margin-top: -20px;background: #000;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑体';font-size: 30px;color: #fff;opacity: 0.3;border: 1px solid #fff;}#arr #right {right: 5px;left: auto;}</style>
</head>
<body>
<div class="all" id='box'><div class="screen"><!--相框--><ul><li><img src="data:images/1.jpg" width="500" height="200"/></li><li><img src="data:images/2.jpg" width="500" height="200"/></li><li><img src="data:images/3.jpg" width="500" height="200"/></li><li><img src="data:images/4.jpg" width="500" height="200"/></li><li><img src="data:images/5.jpg" width="500" height="200"/></li></ul><ol></ol></div><div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="common.js"></script>
<script>//获取最外面的divvar box = my$("box");//获取相框var screen = box.children[0];//获取相框的宽度var imgWidth = screen.offsetWidth;//获取ulvar ulObj = screen.children[0];//获取ul中的所有的livar list = ulObj.children;//获取olvar olObj = screen.children[1];//焦点的divvar arr = my$("arr");var pic = 0;//全局变量//创建小按钮----根据ul中的li个数for (var i = 0; i < list.length; i++) {//创建li标签,加入到ol中var liObj = document.createElement("li");olObj.appendChild(liObj);liObj.innerHTML = (i + 1);//在每个ol中的li标签上添加一个自定义属性,存储索引值liObj.setAttribute("index", i);//注册鼠标进入事件liObj.onmouseover = function () {//先干掉所有的ol中的li的背景颜色for (var j = 0; j < olObj.children.length; j++) {olObj.children[j].removeAttribute("class");}//设置当前鼠标进来的li的背景颜色this.className = "current";//获取鼠标进入的li的当前索引值pic = this.getAttribute("index");//移动ulanimate(ulObj, -pic * imgWidth);};}//设置ol中第一个li有背景颜色olObj.children[0].className = "current";//克隆一个ul中第一个li,加入到ul中的最后=====克隆ulObj.appendChild(ulObj.children[0].cloneNode(true));//自动播放var timeId= setInterval(clickHandle,1000);//鼠标进入到box的div显示左右焦点的divbox.onmouseover = function () {arr.style.display = "block";//鼠标进入废掉之前的定时器clearInterval(timeId);};//鼠标离开到box的div隐藏左右焦点的divbox.onmouseout = function () {arr.style.display = "none";//鼠标离开自动播放timeId= setInterval(clickHandle,1000);};//右边按钮my$("right").onclick =clickHandle;function clickHandle() {//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,//所以,如果用户再次点击按钮,用户应该看到第二个图片if (pic == list.length - 1) {//如何从第6个图,跳转到第一个图pic = 0;//先设置pic=0ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置}pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,if (pic == list.length - 1) {//第五个按钮颜色干掉olObj.children[olObj.children.length - 1].className = "";//第一个按钮颜色设置上olObj.children[0].className = "current";} else {//干掉所有的小按钮的背景颜色for (var i = 0; i < olObj.children.length; i++) {olObj.children[i].removeAttribute("class");}olObj.children[pic].className = "current";}};//左边按钮my$("left").onclick = function () {if (pic == 0) {pic = 5;ulObj.style.left = -pic * imgWidth + "px";}pic--;animate(ulObj, -pic * imgWidth);//设置小按钮的颜色---所有的小按钮干掉颜色for (var i = 0; i < olObj.children.length; i++) {olObj.children[i].removeAttribute("class");}//当前的pic索引对应的按钮设置颜色olObj.children[pic].className = "current";};//设置任意的一个元素,移动到指定的目标位置function animate(element, target) {clearInterval(element.timeId);//定时器的id值存储到对象的一个属性中element.timeId = setInterval(function () {//获取元素的当前的位置,数字类型var current = element.offsetLeft;//每次移动的距离var step = 10;step = current < target ? step : -step;//当前移动到位置current += step;if (Math.abs(current - target) > Math.abs(step)) {element.style.left = current + "px";} else {//清理定时器clearInterval(element.timeId);//直接到达目标element.style.left = target + "px";}}, 10);}
</script>
<script>// var num=0;// function f1(){//// num=1000; // }// f1();// console.log(num);
</script>
</body>
offset系列
<style>*{margin: 0;padding: 0;}input{top: 250px;position: absolute;}#dv1{width: 200px;height: 150px;background-color: red;position: absolute;left: 100px;top: 30px;}#dv2{width: 100px;height: 50px;background-color: green;}</style><script>//三个大的系列:/** 三组属性* 1. offset系列中的属性*** */</script>
</head>
<body>
<div id="dv1"><div id="dv2"></div>
</div>
<input type="button" value="显示效果" id="btn"/>
<script src="common.js"></script>
<script>//红色div的宽和高my$("btn").onclick=function () {//在style标签中设置的样式属性获取不到//style属性中设置的样式属性是可以获取到的//获取元素的样式,下面的方式废了//console.log(my$("dv1").style.width);//console.log(my$("dv1").style.height);//以后获取元素的宽和高,应该使用offset系列来获取/*** offsetWidth:获取元素的宽* offsetHeight:获取元素的高* offsetLeft:获取元素距离左边位置的值* offsetTop:获取元素距离上面位置的值** */console.log(my$("dv1").offsetWidth);console.log(my$("dv1").offsetHeight);console.log(my$("dv1").offsetLeft);console.log(my$("dv1").offsetTop);};
</script>
</body>
offset系列具体的值
<style>*{margin: 0;padding: 0;}input{top: 250px;position: absolute;}#dv1{width: 200px;height: 150px;background-color: red;/*父级元素*/position: relative;margin-left: 10px;padding-left: 10px;left: 100px;}#dv2{width: 100px;height: 50px;background-color: green;position: absolute;left: 10px;margin-left: 100px;}</style><script>//三个大的系列:/** 三组属性* 1. offset系列中的属性*** */</script>
</head>
<body>
<div id="dv1"><div id="dv2"></div>
</div>
<input type="button" value="显示效果" id="btn"/>
<script src="common.js"></script>
<script>my$("btn").onclick=function () {//没有脱离文档流:/*** offsetLeft:父级元素margin+父级元素padding+父级元素的border+自己的margin*** 脱离文档流了* 主要是自己的left和自己的margin* *///子级元素的console.log(my$("dv2").offsetLeft);};
</script>
</body>
document直接获取元素
<style>img{position: absolute;}</style>
</head>
<body>
<img src="data:images/tianshi.gif" alt="" id="im">
<script src="common.js"></script>
<script>//鼠标在页面中移动,图片跟着鼠标移动document.onmousemove=function (e) {//鼠标的移动的横纵坐标//可视区域的横坐标//可视区域的纵坐标my$("im").style.left=e.clientX+"px";my$("im").style.top=e.clientY+"px";};
</script>
</body>
图片和鼠标跟随
<style>img{position: absolute;}</style>
</head>
<body>
<img src="data:images/tianshi.gif" alt="" id="im">
<script src="common.js"></script>
<script>//鼠标在页面中移动,图片跟着鼠标移动document.onmousemove=function (e) {//鼠标的移动的横纵坐标//可视区域的横坐标//可视区域的纵坐标my$("im").style.left=e.clientX+"px";my$("im").style.top=e.clientY+"px";};
</script>
复习总结
<script>/*** 轮播图自己的说的要一遍的，写思路* 定时器:两个* setInterval(函数,时间);//定时器,隔一段时间就执行一次函数的代码*clearInterval(定时器的id);*setTimeout(函数,时间);//定时器,只执行一次函数的代码-----一次性的定时器*clearTimeout(定时器的id);//* 动画函数:** offset系列:获取元素的相关的样式属性的值* offsetWidth:获取元素的宽* offsetHeight:获取元素的高* offsetLeft:获取元素距离左边位置的值* offsetTop:获取元素距离上面位置的值*** 完整轮播图:* 1. 根据ul中li个数(图片的个数)动态的创建li,并且加入到ol中,作为小按钮来使用* 为每个ol中的li添加鼠标进入的事件,(添加事件之前,先把索引保存在每个li的自定义属性中),鼠标进入li的时候做排他功能(背景颜色),移动图片(图片整体移动,移动的ul,每次移动的是一个图片的宽度,图片的宽度就是向宽的宽度),调用的是动画函数,移动ul,移动的是索引值*图片的宽度,并且把索引值存储在一个全局变量中,pic* 2. 创建li之后,1---设置ol中第一个li有默认的背景颜色,2---把ul中的第一个li克隆一下(无缝连接的效果)追加到ul中所有的li的最后面(无缝效果:页面中的第一个图片和最后一个图片是同一个图片)** 3.左右焦点的div显示和隐藏* 4.为左右按钮注册点击事件* 每一次点击右边的按钮,先判断pic的值是不是ul中li的length-1(pic的值最大是5),此时设置pic的值为0,同时设置ul距离左边的left值为0(初始值),此时pic立刻加1,移动ul,用户看到的就是第二个图片* 设置小按钮的背景颜色* 左边按钮,需要判断pic值是不是0,如果是0此时pic=5,ul的left为5*图片的宽,立刻pic-1,然后ul移动一张图片,此时用户看到了第五个图片** 5.自动播放在页面加载的时候,启动一个定时器,里面调用的就是右边按钮的点击事件的处理函数*** BOM中顶级对象:Window* DOM中顶级对象:Document* jQuery中顶级对象:$--jQuery**** */</script>
第六部分webApi学习总结回顾
复习总结
<script>/*** 复习:** 三大系列:** offset系列:* (父级元素margin+父级元素padding+父级元素border+自己的margin)* offsetLeft:元素距离左边位置的值* offsetTop:元素距离上面位置的值* offsetWidth:获取元素的宽度(有边框)* offsetHeight:获取元素的高度(有边框)** scroll系列:卷曲* scrollLeft:元素向左卷曲出去的距离* scrollTop:元素向上卷曲出去的距离* scrollWidth:元素中内容的实际的宽度,如果没有内容,或者内容很少,元素的宽度* scrollHeight:元素中内容的实际的高度,如果没有内容,或者内容很少,元素的高度*** client系列:* clientWidth:可视区域的宽度,没有边框* clientHeight:可视区域的高度,没有边框* clientLeft:左边框的宽度* clientTop:上边框的宽度* clientX:可视区域的横坐标* clientY:可视区域的纵坐标** 动画函数:-----------------在于会调用* 匀速动画:重点内容----* 变速动画(缓动动画)---第一个版本写出来---jQuery中就有动画函数,直接使用** 如何缓动的?* (目标-当前)/10* 增加的回调函数,增加了透明度和层级** 旋转木马案例-----** 图片跟着鼠标飞******** *///获取的是元素计算后的样式属性的值function getStyle(element,attr) {return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;}//为缓动动画函数服务的</script>
关于封装图片随鼠标移动js库
<script>//图片跟着鼠标飞,可以在任何的浏览器中实现//window.event和事件参数对象e的兼容//clientX和clientY单独的使用的兼容代码//scrollLeft和scrollTop的兼容代码//pageX,pageY和clientX+scrollLeft 和clientY+scrollTop//把代码封装在一个函数//把代码放在一个对象中var evt={//window.event和事件参数对象e的兼容getEvent:function (evt) {return window.event||evt;},//可视区域的横坐标的兼容代码getClientX:function (evt) {return this.getEvent(evt).clientX;},//可视区域的纵坐标的兼容代码getClientY:function (evt) {return this.getEvent(evt).clientY;},//页面向左卷曲出去的横坐标getScrollLeft:function () {return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;},//页面向上卷曲出去的纵坐标getScrollTop:function () {return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;},//相对于页面的横坐标(pageX或者是clientX+scrollLeft)getPageX:function (evt) {return this.getEvent(evt).pageX? this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();},//相对于页面的纵坐标(pageY或者是clientY+scrollTop)getPageY:function (evt) {return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();}};//最终的代码document.onmousemove=function (e) {my$("im").style.left=evt.getPageX(e)+"px";my$("im").style.top=evt.getPageY(e)+"px";};// var obj={// sayHi:function () {// console.log("考尼奇瓦");
// this.eat();//this就是obj这个对象
// },
// eat:function () {// console.log("饭以ok,下来密西吧");
// }
//
// };
// //调用sayHi方法的同时,调用eat方法,是否可以在一个方法中调用另一个方法?
// //在对象的方法中调用另一个方法如何调用?
//
// obj.sayHi();</script>
拖拽对话框
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.login-header {width: 100%;text-align: center;height: 30px;font-size: 24px;line-height: 30px;}ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {padding: 0px;margin: 0px;}.login {width: 512px;position: absolute;border: #ebebeb solid 1px;height: 280px;left: 50%;right: 50%;background: #ffffff;box-shadow: 0px 0px 20px #ddd;z-index: 9999;margin-left: -250px;margin-top: 140px;display: none;}.login-title {width: 100%;margin: 10px 0px 0px 0px;text-align: center;line-height: 40px;height: 40px;font-size: 18px;position: relative;cursor: move;-moz-user-select: none; /*火狐*/-webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; /*IE10*/-khtml-user-select: none; /*早期浏览器*/user-select: none;}.login-input-content {margin-top: 20px;}.login-button {width: 50%;margin: 30px auto 0px auto;line-height: 40px;font-size: 14px;border: #ebebeb 1px solid;text-align: center;}.login-bg {width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;background: #000000;filter: alpha(opacity=30);-moz-opacity: 0.3;-khtml-opacity: 0.3;opacity: 0.3;display: none;}a {text-decoration: none;color: #000000;}.login-button a {display: block;}.login-input input.list-input {float: left;line-height: 35px;height: 35px;width: 350px;border: #ebebeb 1px solid;text-indent: 5px;}.login-input {overflow: hidden;margin: 0px 0px 20px 0px;}.login-input label {float: left;width: 90px;padding-right: 10px;text-align: right;line-height: 35px;height: 35px;font-size: 14px;}.login-title span {position: absolute;font-size: 12px;right: -20px;top: -30px;background: #ffffff;border: #ebebeb solid 1px;width: 40px;height: 40px;border-radius: 20px;}</style>
</head>
<body>
<div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div>
<div id="login" class="login"><div id="title" class="login-title">登录会员<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span></div><div class="login-input-content"><div class="login-input"><label>用户名：</label><input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input"></div><div class="login-input"><label>登录密码：</label><input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input"></div></div><div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div><!--登录框-->
<div id="bg" class="login-bg"></div><!--遮挡层-->
<script src="common.js"></script><script>//获取超链接,注册点击事件,显示登录框和遮挡层my$("link").onclick = function () {my$("login").style.display = "block";my$("bg").style.display = "block";};//获取关闭,注册点击事件,隐藏登录框和遮挡层my$("closeBtn").onclick = function () {my$("login").style.display = "none";my$("bg").style.display = "none";};//按下鼠标,移动鼠标,移动登录框my$("title").onmousedown = function (e) {//获取此时的可视区域的横坐标-此时登录框距离左侧页面的横坐标var spaceX = e.clientX - my$("login").offsetLeft;var spaceY = e.clientY - my$("login").offsetTop;//移动的事件document.onmousemove = function (e) {//新的可视区域的横坐标-spaceX====>新的值--->登录框的left属性var x = e.clientX - spaceX+250;var y = e.clientY - spaceY-140;my$("login").style.left = x + "px";my$("login").style.top = y + "px";}};document.onmouseup=function () {document.onmousemove=null;//当鼠标抬起的时候,把鼠标移动事件干掉};</script>
<script>//点击超链接弹出登录框,点击页面的任何位置都可以关闭登录框// my$("link").οnclick=function (e) {// my$("login").style.display="block";// //return false;// //e.preventDefault();// //上面的两个是阻止默认事件的// //下面的两个是阻止事件冒泡的// //window.event.cancelBubble=true;// e.stopPropagation();// };// document.οnclick=function () {// my$("login").style.display="none";// console.log("隐藏了");// };
</script></body>
</html>
放大镜案例
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>哈哈</title><style>* {margin: 0;padding: 0;}.box {width: 350px;height: 350px;margin: 100px;border: 1px solid #ccc;position: relative;}.big {width: 400px;height: 400px;position: absolute;top: 0;left: 360px;border: 1px solid #ccc;overflow: hidden;display: none;}.mask {width: 175px;height: 175px;background: rgba(255, 255, 0, 0.4);position: absolute;top: 0px;left: 0px;cursor: move;display: none;}.small {position: relative;}</style>
</head>
<body>
<div class="box" id="box"><div class="small"><!--小层--><img src="data:images/small.png" width="350" alt=""/><div class="mask"></div><!--遮挡层--></div><!--小图--><div class="big"><!--大层--><img src="data:images/big.jpg" width="800" alt=""/><!--大图--></div><!--大图-->
</div>
<!--导入外部的js文件-->
<script src="common.js"></script>
<script>//获取需要的元素var box = my$("box");//获取小图的divvar small = box.children[0];//遮挡层var mask = small.children[1];//获取大图的divvar big = box.children[1];//获取大图var bigImg = big.children[0];//鼠标进入显示遮挡层和大图的divbox.onmouseover = function () {mask.style.display = "block";big.style.display = "block";};//鼠标离开隐藏遮挡层和大图的divbox.onmouseout = function () {mask.style.display = "none";big.style.display = "none";};//鼠标的移动事件---鼠标是在小层上移动small.onmousemove = function (e) {//鼠标此时的可视区域的横坐标和纵坐标//主要是设置鼠标在遮挡层的中间显示var x = e.clientX - mask.offsetWidth / 2;var y = e.clientY - mask.offsetHeight / 2;//主要是margin的100px的问题x = x - 100;y = y - 100;//横坐标的最小值x = x < 0 ? 0 : x;//纵坐标的最小值y = y < 0 ? 0 : y;//横坐标的最大值x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;//纵坐标的最大值y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;//为遮挡层的left和top赋值mask.style.left = x + "px";mask.style.top = y + "px";//遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离//大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离//大图的横向的最大移动距离var maxX = bigImg.offsetWidth - big.offsetWidth;//大图的纵向的最大移动距离//var maxY = bigImg.offsetHeight - big.offsetHeight;//大图的横向移动的坐标var bigImgMoveX = x * maxX / (small.offsetWidth - mask.offsetWidth);//大图的纵向移动的坐标var bigImgMoveY = y * maxX / (small.offsetWidth - mask.offsetWidth);//设置图片移动bigImg.style.marginLeft = -bigImgMoveX + "px";bigImg.style.marginTop = -bigImgMoveY + "px";};
</script></body>
</html>设置盒子滚动条
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 500px;border: 1px solid red;margin: 100px;position: relative;overflow: hidden;}.content {padding: 5px 18px 5px 5px;position: absolute;top: 0;left: 0;}.scroll {width: 18px;height: 100%;position: absolute;top: 0;right: 0;background-color: #eee;}.bar {height: 100px;width: 100%;position: absolute;top: 0;left: 0;background-color: red;border-radius: 10px;cursor: pointer;}</style>
</head>
<body>
<div class="box" id="box"><div class="content" id="content">床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头床前明月光啊，明月光，疑是地上霜啊，举头嘿嘿</div><!--文字内容--><div id="scroll" class="scroll"><!--装滚动条的层--><div class="bar" id="bar"></div><!--滚动条--></div>
</div>
<script src="common.js"></script>
<script>//获取需要的元素//最外面的divvar box = my$("box");//文字divvar content = my$("content");//装滚动条的div---容器var scroll = my$("scroll");//滚动条var bar = my$("bar");//设置滚动条的高度//滚动条的高/装滚动条的div的高=box的高/文字div的高//滚动条的高=装滚动条的div的高*box的高/文字div的高var height = scroll.offsetHeight * box.offsetHeight / content.offsetHeight;bar.style.height = height + "px";//移动滚动条bar.onmousedown = function (e) {var spaceY = e.clientY - bar.offsetTop;document.onmousemove = function (e) {//移动事件var y = e.clientY - spaceY;y=y<0?0:y;//最小值y=y>scroll.offsetHeight-bar.offsetHeight?scroll.offsetHeight-bar.offsetHeight:y;bar.style.top = y + "px";//设置鼠标移动的时候,文字不被选中window.getSelection? window.getSelection().removeAllRanges():document.selection.empty();//滚动条的移动距离/文字div的移动距离=滚动条最大的移动距离/文字div的最大移动距离//文字div的移动距离=滚动条的移动距离*文字div的最大移动距离/滚动条最大的移动距离var moveY=y*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);//设置文字div的移动距离content.style.marginTop=-moveY+"px";};};document.onmouseup=function () {//鼠标抬起的时候,把移动事件干掉document.onmousemove=null;};</script></body>
</html>
元素显隐方式的不同
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><style>div{width: 300px;height: 200px;border:1px solid red;}</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>哈哈
<script src="common.js"></script>
<script>document.getElementById("btn").onclick=function () {//隐藏div//不占位//my$("dv").style.display="none";//占位//my$("dv").style.visibility="hidden";//占位//my$("dv").style.opacity=0;//占位//my$("dv").style.height="0px";//my$("dv").style.border="0px solid red";};
</script>
</body>
</html>
tab切换效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#list li {list-style-type: none;width: 80px;height: 30px;line-height: 30px;background-color: beige;text-align: center;float: left;margin-left: 5px;}#list li.current {background-color: burlywood;}#list li a {text-decoration: none;}</style></head>
<body>
<div id="menu"><ul id="list"><li class="current"><a href="http://www.baidu.com">首页</a></li><li><a href="javascript:void(0)">播客</a></li><li><a href="javascript:void(0)">博客</a></li><li><a href="javascript:void(0)">相册</a></li><li><a href="javascript:void(0)">关于</a></li><li><a href="javascript:void(0)">帮助</a></li></ul>
</div>
<script src="common.js"></script>
<script>//获取所有的li标签,var liObjs=my$("list").getElementsByTagName("li");//循环遍历,找到每个li中的a,注册点击事件for(var i=0;i<liObjs.length;i++){//每个li中的avar aObj=getFirstElement(liObjs[i]);aObj.onclick=function () {//第一件事:把这个a所在的li的所有的兄弟元素的类样式全部移除for(var j=0;j<liObjs.length;j++){liObjs[j].removeAttribute("class");}//第二件事://当前点击的a的父级元素li(点击的这个a所在的父级元素li),设置背景颜色this.parentNode.className="current";return false;//阻止超链接跳转};}
</script></body>
</html>
大量字符串拼接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title></head>
<body>
<input type="button" value="拼接吧" id="btn"/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<script src="common.js"></script>
<script>// var str="abcef";// console.log(str[2]);// str[2]="H";// console.log(str);//字符串特性:不可变性//点击按钮实现拼接// document.getElementById("btn").οnclick=function () {// var str="";// //获取所有的文本框// var inputs=document.getElementsByTagName("input");// //每个文本框的value属性值// for(var i=0;i<inputs.length-1;i++){// if(inputs[i].type!="button"){// str+=inputs[i].value+"|";// }// }// console.log(str+inputs[inputs.length-1].value);// };//推荐使用数组的方式拼接大量的字符串document.getElementById("btn").onclick = function () {var str = [];//获取所有的文本框var inputs = document.getElementsByTagName("input");//每个文本框的value属性值for (var i = 0; i < inputs.length; i++) {if (inputs[i].type != "button") {str.push(inputs[i].value);}}console.log(str.join("|"));//字符串};
</script></body>
</html>
评论无刷新案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title>
</head>
<body>
<table id="tb" border="1"><tbody id="tbd"><tr><td>猪猪:</td><td>我喜欢吃肉</td></tr></tbody>
</table>
<div>昵称:<input type="text" value="" id="userName"/><br/><textarea name="" id="tt" cols="30" rows="10"></textarea><br/><input type="button" value="评论一下" id="btn"/><br/>
</div>
<script src="common.js"></script>
<script>//获取按钮,注册点击事件document.getElementById("btn").onclick = function () {//获取昵称的元素var userName = my$("userName");//获取评论的元素var tt = my$("tt");//创建行var tr = document.createElement("tr");//行加到tbody中my$("tbd").appendChild(tr);//创建列var td1 = document.createElement("td");tr.appendChild(td1);td1.innerHTML = userName.value;//创建列var td2 = document.createElement("td");tr.appendChild(td2);td2.innerHTML = tt.value;//清空userName.value = "";tt.value = "";};var arr=[20,10,40,50,30];for(var i=0;i<arr.length-1;i++){for(var j=0;j<arr.length-1-i;j++){if(arr[j]<arr[j+1]){var temp=arr[j];arr[j]=arr[j+1];arr[j+1]=temp;}//end if}// end for}//end forfor(var i=0;i<arr.length;i++){console.log(arr[i]);}
</script></body>
</html>
JavaScript进阶学习-webAPI（总结）相关推荐
- JavaScript进阶学习（二）—— 基于原型链继承的js工具库的实现方法
文章来源:小青年原创 发布时间:2016-07-03 关键词:JavaScript,原型链,jQuery类库 转载需标注本文原始地址: http://zhaomenghuan.github.io... ...
- 【总结整理】javascript进阶学习（慕课网）
数组 数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值. 二维数组 二维数组 一维数组,我们看成一组盒子,每个盒子只能放一个内容. 一维数组的表示: ...
- 【JavaScript进阶学习】NodeJs语言的介绍及基本使用
NodeJs语言的介绍 NodeJs服务器语言,后端语言,采用了ECMAScript的语法,用来在服务器中开启服务,操作文件,处理路径,处理请求,发送数据等服务功能. NodeJs的解析器:V8引擎 ...
- JavaScript进阶学习（Web APIs）
一.DOM 1.获取元素 (一)根据ID获取,getElementById('id') (二)根据标签名获取,getElementsByTagName('li'); 返回一个伪数组,若无元素,返回一个 ...
- javascript进阶学习笔记笔记
基础知识: 1) 函数的声明方式:普通的声明方式: function myFun(m,n){ alert(m+n);} 使用变量初始化函数: Var myFun =function (m,n){ al ...
- 【JavaScript进阶学习】ajax
ajax ajax是前后端交互的重要手段,ajax:异步的js和服务端的数据.前端用来异步获取服务端数据,无刷新加载新数据(不阻塞浏览器其他任务的情况下获取到新数据) ajax并不是一个技术,多种技术 ...
- 【JavaScript进阶学习】jQuery的介绍
一.jQuery的介绍 框架:对原生语言或一些常见的操作进行修改后,形成自身的语法特色.并对一些常规操作,提供便携性的使用,或快速实现某种某类某个完整项目的实现 库:用来完善或补全当前项目或框架的某些 ...
- JavaScript 进阶篇的学习~
---恢复内容开始--- 让你认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面, ...
- 前端学习笔记——JavaScript进阶
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.JavaScript 面向对象 1. 面向对象编程介绍 1.1 两大编程思想 1.2 面向过程编程 1.3 面向对 ...
最新文章
- hdu 2544 最短路 （dijkstra）
- 年轻人应该谨记的十点
- 如何手工抓取dump文件及分析
- Golang入门第一天-工具准备
- 荣耀30 Pro+价格曝光：顶配真的高攀不起！
- jQuery Mobile中头部栏header的data-*选项
- install4j Enterprise Edition序列号
- jenkins+ansible+gitlab
- SQL Prompt 破解教程
- VMware——VMware Tools的介绍及安装方法
- We're sorry but ***** doesn't work properly without JavaScript enabled. Please enable it to continue
- vcpkg:If you are sure you want to rebuild the above packages, run the command with the --recurse opt
- 面经-毕马威南京-实习-算法-20191216
- LeetCode 1429. First Unique Number
- 基于CANdelaStudio制作CDD流程概述
- 项目文档模板_用于启动项目文档的模板
- VUE中fetch结合支付宝API验证银行卡号
- html图片在wps中不显示文字大小,WPS文字插入图片显示不全怎么办 WPS文字插入图片显示不完整的解决方法...
- Springboot 整合activiti及使用案例
- python修改图片,Python之修改图片像素值的方法