Date对象
创建Date对象
//方法1：不指定参数var date_obj = new Date();alert(date_obj.toLocaleString())//方法2：参数为日期字符串var date_obj2 = new Date("/01/21 15:14");var date_obj3 = new Date(" 01 21 15:14");alert(date_obj2.toLocaleString());alert(date_obj3.toLocaleString());//方法3：参数为毫秒数var date_obj4 = new Date(5000);alert(date_obj4.toLocaleString());alert(date_obj4.toUTCString());
Date对象的方法—获取日期和时间
var date_obj = new Date();console.log(date_obj.getFullYear()); // 获取完整年份console.log(date_obj.getMonth());// 获取月（0-11）console.log(date_obj.getDate());// 获取日console.log(date_obj.getDay()); // 获取星期console.log(date_obj.getHours());// 获取小时console.log(date_obj.getMinutes()); // 获取分钟console.log(date_obj.getSeconds()); // 获取秒console.log(date_obj.getMilliseconds()); // 获取毫秒
显示当前时间
function getTime(){var date_obj = new Date();var year = date_obj.getFullYear();var month = date_obj.getMonth();var day = date_obj.getDate();var hour = date_obj.getHours();var minute = date_obj.getMinutes();var seconds = date_obj.getSeconds();var week = date_obj.getDay();return year+"年"+f2(month)+"月"+f(day)+"日"+" "+hour+": "+minute+": "+seconds+" "+num_week(week);}alert(getTime())function num_week(n){week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];return week[n]}function f(num){if (num<10){return "0"+num;}return num;}function f2(num){return num+1;}
RegExp对象
// 方式一：var re_obj = new RegExp("\d+", "g");alert(re_obj.test("asdf324lsdk"));// 方式二：var re_obj2 = /\d+/g;alert(re_obj2.test("asdf324lsdk"));// match 取出所有匹配的内容放到数组里；search 取出第一个结果的索引值。var s = "hello545sg455";alert(s.match(/\d+/g));alert(s.search(/\d+/g));// split 取出第一个结果的索引值；replace 取出第一个结果的索引值。var s = "hello545sg455";alert(s.split(/\d+/g));alert(s.replace(/\d+/g, "*"));
Math对象
该对象中的属性方法和数学有关。
// 获得随机数 0~1 不包括1alert(Math.random());// 四舍五入alert(Math.round(2.3));// 返回 2 的 4 次幂。alert(Math.pow(2,4));
Window 对象
// 显示带有一段消息以及确认按钮和取消按钮的对话框。var ret=confirm("内容是否保存");alert(ret);// 显示可提示用户输入的对话框。var ret=prompt("hello");alert(ret);
setInterval()： 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()：取消由 setInterval() 设置的 timeout。
clearTimeout()：取消由 setTimeout() 方法设置的 timeout。
setTimeout()： 在指定的毫秒数后调用函数或计算表达式。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><input type="text" id="clock" style="width: 249px"><input type="button" value="begin" onclick="begin_click()"><input type="button" value="End" onclick="End()"><input type="button" value="timeout" onclick="f1()"><script>function Timeout(){alert(123);}function f1(){var ID=setTimeout(Timeout, 1000);clearTimeout(ID);}function begin(){var stime = getTime();var ret=document.getElementById("clock");ret.value=stime;}var ID;function begin_click(){if (ID==undefined){begin();ID = setInterval(begin, 1000);}}function End(){clearInterval(ID);ID=undefined;}function getTime(){var date_obj = new Date();var year = date_obj.getFullYear();var month = date_obj.getMonth();var day = date_obj.getDate();var hour = date_obj.getHours();var minute = date_obj.getMinutes();var seconds = date_obj.getSeconds();var week = date_obj.getDay();return year+"年"+f2(month)+"月"+f(day)+"日"+" "+hour+": "+minute+": "+seconds+" "+num_week(week);}function num_week(n){week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];return week[n]}function f(num){if (num<10){return "0"+num;}return num;}function f2(num){return num+1;}</script></body></html>
History 对象
back()// 加载 history 列表中的前一个 URL。forward() // 加载 history 列表中的下一个 URL。go() // 加载 history 列表中的某个具体页面。
history_1.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><input type="button" value="前进" onclick="func1();"><a href="histroy_2.html">lesson2</a><script>func1(){history.forward();//history.go(1);}</script></body></html>
history_2.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><input type="button" value="后退" onclick="func2();"><script>function func2(){history.back();//history.go(-1);}</script></body></html>
Location 对象
reload() // 重新加载当前文档。href //设置或返回完整的 URL。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><input type="button" value="重载" onclick="location.reload();"><input type="button" value="百度" onclick="location.href=''"></body></html>
DOM 节点
节点(自身)属性:
attributes // 节点（元素）的属性节点nodeType // 节点类型。以数字值返回指定节点的节点类型。如节点是元素节点，则返回 1；如节点是属性节点，则返回 2。nodeValue // 节点值nodeName // 节点名称innerHTML // 节点（元素）的文本值
导航属性:
parentNode // 节点（元素）的父节点 (推荐)firstChild // 节点下第一个子元素lastChild // 节点下最后一个子元素childNodes // 节点（元素）的子节点
推荐导航属性：
parentElement // 父节点标签元素children // 所有子标签firstElementChild // 第一个子标签元素lastElementChild // 最后一个子标签元素nextElementtSibling// 下一个兄弟标签元素previousElementSibling // 上一个兄弟标签元素
通过 Id 定位 HTML 元素
<div id="div1"><div>hello div</div><p>hello p</p></div><script>var ele = document.getElementById("div1");console.log(ele.nodeName);console.log(ele.nodeType);console.log(ele.nodeValue);</script>
<div id="div1"><div>hello div</div><p>hello p</p></div><script>var ele = document.getElementById("div1");var ele3 = ele.parentNode;alert(ele3.nodeName);</script>
<div id="div1"><div>hello div</div><p>hello p</p></div><script>var ele = document.getElementById("div1");var ele_son = ele.firstElementChild;var ele_son2 = ele.lastElementChild;alert(ele_son.nodeName);alert(ele_son2.nodeName);</script>
<div id="div1"><div>hello div</div><p>hello p</p></div><script>var ele = document.getElementById("div1").firstElementChild;var sib = ele.nextElementSibling;alert(ele);alert(sib.nodeName);</script>
通过 ClassName 定位 HTML 元素
<div id="div1"> hello<div class="div2">hello 2</div><div class="div3">hello 3</div></div><script>var ele = document.getElementsByClassName("div2")[0];var ele2 = ele.nextElementSibling;alert(ele2.nodeName);</script>
通过 tag 定位 HTML 元素
<div id="div1"> hello<div class="div2">hello 2</div><div class="div3">hello 3</div><p>hello p</p></div><script>var tag = document.getElementsByTagName("p");alert(tag[0].innerHTML);</script>
局部定位 HTML 元素
1.局部查找可以通过 getElementsByClassName() 和 getElementsByTagName() 方法
2.局部查找不可以通过getElementsByName() 和 getElementById() 方法
<div id="div1"> hello<div class="div2">hello 2</div><div class="div3" name="klvchen">hello 3<p>hello inner</p></div><p>hello p</p></div><script>var ele = document.getElementsByClassName("div3")[0];var ele2 = ele.getElementsByTagName("p")[0];alert(ele2.innerHTML);</script>
