1. 定时器的使用
1. 定时器:用以指定在一段特定的时间后执行某段程序。
1.1.倒计定时器:timename=setTimeout("function();",delaytime); // 只执行一次
1.2.循环定时器:timename=setInterval("function();",delaytime); // 无线循环倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。
1.3. clearInterval(对象): 清除已设置的setInterval对象
2. (1.) offset这个单词本身是--偏移,补偿,位移的意思。 o f f s e t W i d t h和offsetHight (检测盒子自身宽高+padding+border)这两个属性,他们绑定在了所有的节点元素上。获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高。
offset宽/高 = 盒子自身的宽/高 + padding +border;
offsetWidth = width+padding+border;
offsetHeight = Height+padding+border;
2.(2) offsetLeft和offsetTop(检测距离父盒子有定位的左/上面的距离)返回距离上级盒子(带有定位)左边s的位置如果父级都没有定位则以body为准offsetLeft 从父亲的padding 开始算,父亲的border 不算。在父盒子有定位的情况下,offsetLeft ==style.left(去掉px)。
无缝滚动实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<title></title>
<style>
* {margin: 0;padding: 0;}
#div1 {width: 472px;height: 71px;margin: 100px auto;
position: relative;background: red;overflow: hidden;}
#div1 ul {
position: absolute;
left: 0;
top: 0;
}
#div1 ul li {
float: left;
width: 108px;
height: 71px;
list-style: none;
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
// var oUl = oDiv.getElementsByTagName('ul')[0]; // 如果通过标签名获取元素,就要在标签后面增加[0]
var oUl = document.getElementById('ul'); // 如果通过标Id获取元素和标签,就不用在后面增加[0];
var aLi = oUl.getElementsByTagName('li');
var oBtn1= document.getElementById('btn1');
var oBtn2= document.getElementById('btn2');
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; // 复制多一份图片
// console.log(oUl0.innerHTML)
oUl.style.width = aLi[0].offsetWidth *aLi.length + 'px'; // aLi[0].offsetWidth *aLi.length 这是图片的宽度乘以图片个数
//console.log(oUl.style.width )
var speed=-2; // 定义一个数,正负号代表方向,数值代表转速的快慢
function move() { // 创建函数
oBtn1.onclick=function(){ // 往左边滚动
speed=-2;
}
oBtn2.onclick=function(){ // 往右边滚动
speed=2;
}
if(oUl.offsetLeft < -oUl.offsetWidth / 2) { // 判断当经过超过图片长度1/2后,就重新滚动
oUl.style.left ='0px'; // 当他向左滚动完后重新清零再次滚动
}
else if(oUl.offsetLeft > 0) { // 判断当经过大于0 ,向右滚动,这时候的长度全部图片的宽度,(-)表示在左超出的一半
oUl.style.left = -oUl.offsetWidth / 2+ 'px';
}
oUl.style.left = oUl.offsetLeft +speed+ 'px';
// console.log(oUl.style.left);
}
setInterval(move, 30); // 开启定时器, move表示自定义的函数名,后面是时间值
}
</script>
</head>
<body>
<input type="button" id="btn1" value="左" />
<input type="button" id="btn2" value="右" />
<div id="div1">
<ul id="ul">
<li><img src="img/1_r2_c2.jpg" /></li>
<li><img src="img/1_r2_c3.jpg" /></li>
<li><img src="img/pic.jpg" /></li>
<li><img src="img/1_r2_c3.jpg" /></li>
</ul>
</div>
</body>
</html>
3.什么是DOM?
文档对象模型。赋予js操作节点的能力。当网页被加载时,浏览器会创建页面的文档对象模型(Document ObjectModel)。
3.1. 节点分为两种:文本节点和元素节点
获取子节点:childNodes nodeType 和 children
获取子节点例子:
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById('ul');
var aLi=oUl.getElementsByTagName('li');// 通过id名获取标签
for(var i=0;aLi.length;i++){ // 设置循环
console.log(oUl.children.length); //检验ul里面里的标签个数
}
}
</script>
</head>
<body>
<ul id="ul">
<li></li>
<li></li>
<li></li>
</ul>
</body>
3.2. 获取父节点:parentNode
例:点击删除,隐藏li
获取子节点例子:
<script type="text/javascript">
window.onload = function() {
var oList = document.getElementById('list');
var aLi = oList.getElementsByTagName('li');
var aA = oList.getElementsByTagName('a');
// chlidren 父节点,子节点
//console.log(oList.children.lengtht);
//nodeType==3 -> 文本节点
//nodeType==1 -> 元素节点
for(var i = 0; i < aLi.length; i++) {
aA[i].onclick = function() {
this.parentNode.style.display = 'none'; //this.parentNode 指当前标签里面的父节点
}
}
}
</script>
</head>
<body>
<ul id="list">
<li>社会<a href="javascript:;">删除</a></li>
</ul>
</body>
3.3.首尾子节点,有兼容性问题
firstElementChild //一般拿来判断兼容的问题
firstChild // 首节点 只在IE下面兼容
firstElementChild // 在非IE下面兼容
lastChild 、 // 尾节点
lastElementChild
3.4.兄弟节点 ,有兼容性问题
nextSibling、// 本身节点的下一个节点 只在IE下面兼容
nextElementSibling
previousSibling、
reviousElementSibling // 本身节点的上一个节点
3.4. DOM方式操作元素属性:
获取:getAttribute(名称)
设置:setAttribute(名称, 值)
删除:removeAttribute(名称)
3.5. DOM的增删改查:
例子:
<body>
<ul id="ul">
<li id="apple">1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script type="text/javascript">
var oUl=document.getElementById('ul');
var oAp=document.getElementById('apple');
var oXi=document.createElement('li');// 创建节点
oXi.innerHTML='4'; //插入内容
oUl.appendChild(oXi); //插入节点
var oYt=document.createElement('li'); // 创建节点
oYt.innerHTML='0'; //插入内容
oUl.insertBefore(oYt,oAp) //在第一个节点前面插入节点
</script>
4.面向对象:
4. 1.什么是面向对象:对象是一个整体,对外提供一些操作。
2. 什么是面向对象:使用对象时,只关注对象提供的功能,不关注其内部细节比如JQuery 面向对象是一种通用思想,并非只有编程中能用,任何事情都可以用。
4.2、js中的面向对象
面向对象编程(OOP)的特点
抽象:抓住核心问题
封装:不考虑内部实现,只考虑功能使用
继承:从已有对象上,继承出新的对象
多重继承
多态
对象的组成:
方法——函数:过程、动态的
属性——变量:状态、静态的
4.3、写一个面向对象程序
为对象添加方法和属性
this详解,事件处理中this的本质
windowthis——函数属于谁
不能在系统对象中随意附加方法、属性,否则会覆盖已有方法、属性 object对象
4.4.工厂方式:用构造函数创建一个类。
4.5.6、原型——prototype
什么是原型:原型是class,修改他可以影响一类元素
在已有对象中加入自己的属性、方法
原型修改对已有对象的影响为Array添加sum方法
给对象添加方法,类似于行间样式
给原型添加方法,类似于class
原型的小缺陷
无法限制覆盖