第七周
这一周主要学习运用js做网页特效
第一天:
1. 节点 ,网页是有很多的节点组成的 。
元素节点 指的是 : 标签 li span ,节点类型是1
文本节点,2 属性节点 ,3
注释,8文档,9
父子兄弟节点:parentNodenextSibling
孩子 childNodes nodeType == 1 来判断 是否是 元素节点
children只得到元素节点
获取节点属性 getAttribute(“title”)
设置节点属性 setAttribute (“class”,”one”)
删除节点属性 removeAttribute(“title”);
2. 日期函数 Date();
声明: var date = new Date();
使用: 获取日期和时间
getDate() 获取日 1-31
getDay () 获取星期 0-6
getMonth () 获取月 0-11
getFullYear () 获取完整年份(浏览器都支持)
getHours () 获取小时 0-23
getMinutes () 获取分钟 0-59
getSeconds () 获取秒 0-59
getMilliseconds () 获取当前的毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)
3. 定时器
定时器 不需要人工操作 按照一定的时间进行某种动作。
setInterval(“函数”,间隔时间 ) 每隔 n秒去执行一次函数 ,有周期性。
setTimeout在执行一次代码之后,延迟一段时间再执行,没有周期性。
4.案例
时钟,倒计时,分时提醒,日历
第二天
1. 按钮不可用 disabled = “disabled” || true;
2.setInterval(“函数”,间隔时间 ) 每隔 n秒去执行一次函数 ,有周期性。
setTimeout在执行一次代码之后,延迟一段时间再执行,没有周期性。
3.递归调用 : 函数自己调用自己 函数递归调用 arguments.callee 返回的是 正在执行的函数 本身
4. 逻辑运算符 与 && 或 || 非 ! ! > && > ||
a&&b,如果a为假,则返回a,如果a为真则返回b。
a||b,如果a为真则返回a,如果a为假则返回b。
5.转换为 字符型
var num = 12345;
num+ “”
String(num);
num.toString(); 10进制
num.toString(2) 二进制
6.根据字符位置返回字符
charAt(索引号)获取相应位置的字符
charCodeAt获取相应位置的字符
第三天
1.offset家族
offset 自己的 偏移
offsetWidth 得到自己的宽度
offsetHeight
构成 : width + padding + border
div width 200 border 3px padding-right: 15px
div offsetWidth = 200 + 6 + 15 = 221
div.offsetLeft
得到距离 这个 div 最近的 带有定位的 父 盒子 左边距离
offsetParent 返回自己的父亲元素 (带有定位的)
parentNode 这个返回亲父亲 不管父亲是否带有定位
style.top offsetTop 的区别
offsetTop 只读 只可以得到结果 但是不能赋值
style.top 能得到 (行内式 ) 但是可以给值
style.top 得到的是 25px
offsetTop 得到的是 25
2.event对象,事件对象
3.鼠标事件
onmouseover onmouseout onclick
onmousemove当鼠标移动的时候 就是说,鼠标移动一像素就会执行的事件
div.onmousemove = function() { 语句 }
当鼠标再div 身上移动的时候,就会执行。
补充网址编码的认识。
4.缓动公式,通俗理解就是一个过渡过程。
5.重点案例
小米手机和轮播图
第四天
1.HTML基本访问方法window-documentdocument.titledocument.headdocument.bodydocument.documentElement(约等于document.html)
2. scrollTop被卷去的头部,隐藏在屏幕上方的距离
scrollLeft左边划出区的部分
scrollTo(x,y)去往页面的x和y坐标的位置window.scrollTo(x,y)
4.JSONjs对象表示法数据传输
JSON指的是JavaScript对象表示法(JavaScriptObjectNotation)
JSON是轻量级的文本数据交换格式
JSON独立于语言*
JSON具有自我描述性,更易理解
var json = {}对象var arr = [] ;数组varnum;变量
var json = { width: “100px” ,height: 100 }
第五天
1.3个window事件
重新加载事件unload,屏幕滚动事件on scroll,窗口改变事件onrpsize
window.onscroll = fucntion() { fun (); }
fun() function() {iffss }
2.简单冒泡机制
事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。
顺序
E 6.0:
div -> body -> html -> document
其他浏览器:
div -> body -> html -> document -> window不是所有的事件都能冒泡。以下事件不冒泡:blur、focus、load、unload
3.获取用户选择的内容
4.动画原理,封装动画函数