js基本知识6

1.2 ???复习 ??1. 节点 ???????网页是有很多的节点组成的 ?。 ????元素节点 ??指的是 ： ?标签 ????li ?span ???????文本节点 ?????属性节点 ??????父子兄弟 ???父 ???parentNode ???????nextSibling ??????孩子 ???childNodes ???????nodeType == 1 ?来判断 是否是 元素节点 ??<ul> ?????<li> ??最喜欢用的 ?children ???只得到 ??元素节点 ?????1.获取节点属性 ???getAttribute（“title”） ?2.设置节点属性 ???setAttribute (“class”,”one”) ?3.删除节点属性 ???removeAttribute(“title”)； ?4. 日期函数 ??Date(); ?????声明: ?var ?date = new Date(); ???????使用: ?得到现在的年分 ???date.getFullYear(); ?????????????月份: ?date.getMonth(); ?????????????日子; ?date.getDate(); ???????????????星期： ?date.getDay(); ????5. 定时器 ??????定时器 ?不需要人工操作 ??按照一定的时间进行某种动作。 ????setInterval(“函数”,间隔时间 ) ??每隔 n秒去执行一次函数 1.3 ?????时钟案例分两步进行的。 第一步： ?要得到现在的 时 分 秒 ??但是这里面有一个小玄机 。 ???比如现在是 9点整 ?????时针指向 9 是没错的 ??但是如果现在是 9点半 ??时针应该指向的是 9到10 之间 才对所以，我们不但要得到现在的小时 ，还要得到 已经过去了多少分 ms = date.getMilliseconds(); // 现在的毫秒数s = date.getSeconds() + ms / 1000; ?// ?得到秒 1.3 sm = date.getMinutes() + s / 60; ?// ?得到的是分数 ?45.6分钟h = date.getHours() % 12 + m / 60 ; ?旋转角度原理 ??秒针 ????一秒 走多少度呢 ？ ???一圈 ?360 ° ????一共有 60 秒 ??????每秒 ?6 °分针 ????一圈 ?360 ???一圈走 60次 ??每次 ?6° ?每分钟 6°时针 ????一圈 360 ?????一共 12 个 表盘没有24小时 ???每个小时 走 ??30° 完整代码：1 ??<script>2 ???var hour = document.getElementById("hour");3 ???var minute = document.getElementById("minute");4 ???var second = document.getElementById("second");5 ?????// 开始定时器6 ????var s = 0,m = 0, h = 0, ms = 0;7 ?????setInterval(function() {8 ???????????// 内容就可以了9 ?????????var date = new Date(); ?// 得到最新的时间10 ?????????ms = date.getMilliseconds(); // 现在的毫秒数11 ?????????s = date.getSeconds() + ms / 1000; ?// ?得到秒 1.3 s12 ?????????m = date.getMinutes() + s / 60; ?// ?得到的是分数 ?45.6分钟13 ?????????h = date.getHours() % 12 + m / 60 ;14 ?????????// console.log(h);15 ?????????// 旋转角度16 ????????// 一圈 ?360 ° ????一共有 60 秒 ??????每秒 ?6 ° ??现在是 s秒17 ?????????second.style.WebkitTransform = "rotate("+ s*6 +"deg)";18 ??????????????????????// ?变化 ???????????旋转 ???deg ?度19 ?????????minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";20 ?????????hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";21 ?????????second.style.MozTransform = "rotate("+ s*6 +"deg)";22 ??????????????????????// ?变化 ???????????旋转 ???deg ?度23 ?????????minute.style.MozTransform = "rotate("+ m*6 +"deg)";24 ?????????hour.style.MozTransform = "rotate("+ h*30 +"deg)";25 ?26 ?????},30);27 ?</script>1.4 ????按钮不可用button ?不可以用 ??????disabled ?不可用的意思btn.disabled = “disabled” ????|| ??btn.disabled = true; ????灰色的注意：1. 因为 button是个双标签 ?所以要更改他的值， 使用 innerHTML 的，不是value。2. 关闭定时器 ??clearInterval(定时器名称); ???定时器不再进行1.5 ?????this ?????this 指向的是 事件的调用者 ，或者是函数的使用者。 ????var ?btn.onclick = function() { ?this} ?一般情况下，我们喜欢 var that = this;var that = this; ?// 把 btn 对象 给 that ?var _this = this1.6 ???????定时器之 ?setTimeout() ?????时间去哪儿了 ??类似于定时炸弹 。。 setTimeout(“函数”, 时间 ) ????setInterval(fn,5000); ?????每隔 5秒钟，就去执行函数fn一次 setTimeout(fn,5000); ????5秒钟之后，去执行 fn 函数， 只执行一次1.6.1 ???深层次的看待定时器区别setInterval是排队执行的假如 间隔时间是1秒， 而执行的程序的时间是2秒 ???上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒. 1.7 ???5秒钟自动跳转页面JS 页面跳转: window.location.href = ”http://www.itcast.cn” ; ????BOM ??函数自己调用自己的过程 我们称之为 ： 递归调用 ??????自残 ?但是这样用，一定要加一个退出 if 的条件，不然成为死循环了。目的就是为了，模拟使用 settimeout 来实现setinterval 的效果。<script> ???var demo = document.getElementById("demo"); ???var count = 5; ???var speed = 1000; ???setTimeout(goIndexPage,speed); ?// ?1秒钟之后去执行 ?goIndexPage这个函数 ???function goIndexPage() { ???????count--; ???????demo.innerHTML = "<a href=‘http://www.baidu.com‘>本页面将在第"+count+"秒钟之后跳转页面</a>"; ???????if(count <= 0) ???????{ ???????????// 如果 count 小于 0 就到了时间了 ??我们应该跳转页面 ????????????window.location.href = "http://www.baidu.com"; ???????} ???????else ???????{ ???????????setTimeout(goIndexPage,speed); ?// ?递归调用 ?自己调用自己 ???????} ???} ?????辞海 ???10万字 ?????2500 汉字 ?1000次常用汉字 ??1.7.1 ????arguments 对象 function fn(a,b,c) { ?console.log(a+b+c); alert(arguments.length;)} fn(1,3,4,6); ?????arguments.length; ?返回的是 ?实参的个数。 ????????但是这个对象有讲究，他只在正在使用的函数内使用。 ?????arguments.callee; ????????返回的是正在执行的函数。 也是在函数体内使用。 在使用函数递归调用时推荐使用arguments.callee代替函数名本身。 ?????function fn() { ?console.log(arguments.callee); } ???????这个callee 就是 ： ??function fn() { ?console.log(arguments.callee); } 1.8 ????运算符一元操作符 ++， -- + - ??????+5 ??-6逻操作符 ! && ||基本运算符 +, -, *, /, %关系操作符 >, <, >=, <=, ===, ==, !=, !== = 赋值 ???== 判断 ???=== 全等 ????条件操作符 （三元运算符） ?? :赋值运算符 +=, -=, *=, /=, %= ??a+=5 ???a= a + 5 ????逗号运算符 , ??var ?a=0,b=0; ?1.8.1 ???运算符顺序 ???1 ?() 2 ?!、-、++、-- ???(-10) ?负号 ?正号3 *、/、% 4 +、- ????????10-55 <、<=、<、>= ???6 ==、!=、===、!==、 ?7 && 8 || 9?: 10 =、+=、-=、*=、/=、%= ????赋值 1+2*3 1.8.2 ???几个面试题 1. ?a&&b ??结果是什么？ ??如果a 为假 ，则返回 a ???如果a 为真 ，则返回 b var aa ?= ??0&&1;alert(aa) ???// 0 var bb = ?1&&0;alert(bb); ?//0 ?var cc = ?1&&10;alert(cc); ?// 102. a||b ????如果 a 为假 ??则返回b ????如果 a 为真 ??则返回a ?console.log(0||1); ??1console.log(1||0); ??1console.log(1||5); ??1console.log(5||1); ??5var a = 1 && 2 && 3;console.log(a); ??3var b = 0 && 1 && 2;console.log(b); ?0var c = 1 && 0 ?&& 2;console.log(c); ?0%= ??a+=3 ?a = a % 3;1.9 ???字符串对象常用方法我们工作中经常进行字符串操作。 1.9.1 ???转换为字符串 1. + “” ??????2+ “” ?= ?“2” ???2+”ab” ??= ?“2ab” ?2. String() ???转换为字符串 ?3. toString（基数） ?; ???基数就是进制 ??var txt = 10; txt.toString(2) ??????二进制 ?????10101.9.2 ???获取字符位置方法 ??charAt，获取相应位置字符（参数： 字符位置） ???charCodeAt获取相应位置字符unicode编码（参数： 字符位置） ??var txt = “abcedf”; ???????比如， ?txt.charAt(4); ???索引号一定是从0开始 ???返回的结果是 d ??我们根据我们输入的 位数 返回相应的 字符 。 ??unicode编码 ?是我们字符的字符的唯一表示 。