JavaScrip基础（二）
一、ECMAScript对象
1、对象的概念和分类
object对象：ECMAScript 中的所有对象都由这个对象继承而来；Object 对象中的所有属性和方法都会出现在其他对象中
11种内置对象：Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object
简介：在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是通过对象实现的
2、String对象
大小写转换 toLowerCase() 字符串小写
toUpperCase() 字符串大写
获取指定字符串 charAt(index) 指定位置字符串
charCodeAt(index) 指定位置字符Unicode编码
查询字符串 indexOf(findstr,index) 正向索引位置
lastIndexOf(findstr) 反向索引位置
match(regexp) 匹配的字符串
search(regexp) 字符串首字符索引
截取字符串 substr(start,length) 从索引位置start开始长为length的字符串
substring(start,end) 返回start开始end结束的字符串
slice(start,end) 同substring，但是end可以为负数
替换字符串 replace(findstr,tostr) 替换fingstr为tostr
分割字符串 split(bystr) 有bystr将字符串分割成字符串组
连接字符串 concat(string) 增加string后的字符串
<script> var p = "abcdef"; /*字体属性*/ document.write(p.fontsize(20)); // 字体加大 document.write(p.bold(20)); // 字体加粗 document.write(p.sup(2)); // abcdef /*大小写转换*/ document.write(p.toUpperCase()); //ABCDEF document.write(p.toLowerCase()); //abcdef /*获取指定字符串*/ document.write(p.charAt(2)); // c document.write(p.charCodeAt(2)); // 99 /*查询字符串*/ document.write(p.indexOf("c")); // 2 document.write(p.lastIndexOf("f")); //5 document.write(p.match("m")); // null document.write(p.search("c")); // 2 /*截取子字符串*/ document.write("substr:"+p.substr(2,4)) // cdef document.write("sbustring:"+p.substring(2,4)) // cd document.write("slice:"+p.slice(2,-3)) // cd /*替换子字符串*/ document.write(p.replace("c","EEE")); // abEEEdef /*分割字符串*/ document.write(p.split("b")); // a,cdef /*拼接字符串*/ document.write(p.concat("LLLLL")); // abcdefLLLLL </script>
3、Array对象
1.创建数组
var arr = [123,"sad",true]; //数组创建第一种方式 console.log(arr) arr2 = new Array(); // 数组创建第二种方式 arr2[4] = "第五个元素"; arr2[7] = "第8个元素"; console.log(arr2) // (8) [empty × 4, "第五个元素", empty × 2, "第8个元素"]
创建二维数组和length属性
arr1 = new Array(10); for(var i=0;i<arr1.length;i++){ arr1[i] = new Array(4); } arr1[0][0] = "星期一"; arr1[0][1] = "星期三"; arr1[3][1] = "星期1"; arr1[3][0] = "星期2"; arr1[8][1] = "星期2"; arr1[8][2] = "星期3"; console.log(arr1);
2、Array对象方法
连接数组方式：join、noncat和toString
书写格式
x.join(bystr)
x代表数组对象
bystr作为连接数组中元素的字符串
返回连接后的字符串
与字符串的split功能刚好相反
连接数组-concat方法
x.concat(value,...)
var arr = [123,"星期一","hello",true,"world"]; var par = arr.join("*"); //以bastr作为链接符，链接成的字符串 document.write(par); var par1 = arr.concat("这是什么？？？"); // 在数组后添加内容 document.write(par1); var par2 = arr.toString(); document.write(par2) //返回以逗号（，）为连接的字符串组
数组排序，reverse和sort方法
/* 数组排序，reverse和sort方法 */
// document.write(arr.reverse()); //world,true,hello,星期一,123 返回反向数组
// document.write(arr.sort()); //123,hello,true,world,星期一 返回排序后的数组
数组切片slice和删除数组元素splice
x.slice(start, end)x代表数组对象start表示开始位置索引
end是结束位置下一数组元素索引编号 第一个数组元素索引为0 tart、end可为负数，-1代表最后一个数组元素 end省略则相当于从start位置截取以后所有数组元素
x. splice(start, deleteCount, value, ...)
x代表数组对象 splice的主要用途是对数组指定位置进行删除和插入 start表示开始位置索引 deleteCount删除数组元素的个数 value表示在删除位置插入的数组元素 value参数可以省略
/* 删除数组 slice和splice方法 */
// arr = ["h","e","l","l","o","J","a","v","a","s","c","r","i","p","t"]
// document.write(arr.slice(3,9)); //l,o,J,a,v,a 截取3-9位置
// document.write(arr.slice(3)); //l,o,J,a,v,a,s,c,r,i,p,t 从3位置开始截取
// document.write(arr.slice(3,-4)); // l,o,J,a,v,a,s,c 也可以倒着截取
// document.write(arr.splice(1,4)); // e,l,l,o
// arr.splice(1,4);
// document.write(arr); // h,J,a,v,a,s,c,r,i,p,t
// arr.splice(1,4,"haha");
// document.write(arr) // h,haha,J,a,v,a,s,c,r,i,p,t
数组进出栈：先进后出：push（进）pop（出）和 先进先出：shift（进） 和unshift（出）。
/* 数组进出栈操作 */
/* 先进后出 */
// var arr = [1,2,3];
// arr.push(4,5,6); //数组最后添加
// document.write(arr); // 1,2,3,4,5,6
// arr.push(7,8);
// document.write(arr); // 1,2,3,4,5,6,7,8
// arr.pop(); // 数组最后删除
// document.write(arr); // 1,2,3,4,5,6,7
/* 先进先出 */
// var arr = [1,2,3,4];
// arr.unshift(5,6); // 数组前添加
// console.log(arr); // [5, 6, 1, 2, 3, 4]
// arr.unshift(7,8);
// console.log(arr) // [7,8, 5, 6, 1, 2, 3, 4]
// arr.shift(arr);
// console.log(arr) // [8, 5, 6, 1, 2, 3, 4]
总结：JS特性
js中的数组特性1: js中的数组可以装任意类型,没有任何限制. js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.
3、Date对象
Date对象的创建方式
// var d = new Date(); // document.write(d.toLocaleString()); // 2019/8/5 下午2:50:37 // var d2 = new Date(2020,9,23,23,30,56,800); // document.write(d2.toLocaleString()); // 2019/8/5 下午2:52:212020/10/23 下午11:30:56 // var d3 = new Date(300000); // document.write(d3.toLocaleString()); // 1970/1/1 上午8:05:00 // var d4 = new Date("2008/8/8 23:59"); // document.write(d4) // Fri Aug 08 2008 23:59:00 GMT+0800 (中国标准时间)
Date对象获取日期和时间
获取日期和时间 getDate() 获取日 getDay () 获取星期 getMonth () 获取月（0-11） getFullYear () 获取完整年份 getYear () 获取年 getHours () 获取小时 getMinutes () 获取分钟 getSeconds () 获取秒 getMilliseconds () 获取毫秒 getTime () 返回累计毫秒数(从1970/1/1午夜)
实例：
function getCurrentDate() { var d = new Date(); var year = d.getFullYear(); var month = d.getMonth()+1; var day = d.getDate(); var hour = d.getHours(); var min = d.getMinutes(); var sec = d.getSeconds(); var week = d.getDay(); return year+"年"+changemonth(month)+"月"+day+"日"+hour+"时"+min+"分钟"+sec+'秒'+" "+changeweek(week); } document.write(getCurrentDate()); console.log(getCurrentDate().toLocaleString()); // 改变月的格式 function changemonth(num) { if (num<10){ return "0"+num; }else { return num; } } // 改变星期的格式 function changeweek(week) { var arr = ["","星期一","星期二","星期三","星期四","星期五","星期六","星期日",] return arr[week] }
Date对象设置日期和时间
//设置日期和时间 //setDate(day_of_month) 设置日 //setMonth (month) 设置月 //setFullYear (year) 设置年 //setHours (hour) 设置小时 //setMinutes (minute) 设置分钟 //setSeconds (second) 设置秒 //setMillliseconds (ms) 设置毫秒(0-999) //setTime (allms) 设置累计毫秒(从1970/1/1午夜) var x=new Date(); x.setFullYear (1997); //设置年1997 x.setMonth(7); //设置月7 x.setDate(1); //设置日1 x.setHours(5); //设置小时5 x.setMinutes(12); //设置分钟12 x.setSeconds(54); //设置秒54 x.setMilliseconds(230); //设置毫秒230 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日5点12分54秒 x.setTime(870409430000); //设置累计毫秒数 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日12点23分50秒
Date对象日期和时间的转换
日期和时间的转换: getTimezoneOffset():8个时区×15度×4分/度=480; 返回本地时间与GMT的时间差，以分钟为单位 toUTCString() 返回国际标准时间字符串 toLocalString() 返回本地格式时间字符串 Date.parse(x) 返回累计毫秒数(从1970/1/1午夜到本地时间) Date.UTC(x) 返回累计毫秒数(从1970/1/1午夜到国际时间)
4、RegExp对象
要求：用户名 首字母必须是英文, 除了第一位其他只能是英文数字和_ . 长度最短不能少于6位 最长不能超过1
//在表单验证时使用该对象验证用户填入的字符串是否符合规则.
//创建正则对象方式1 参数1 正则表达式 参数2 验证模式 g global / i 忽略大小写. //参数2一般填写g就可以，也有“gi”.
//----------------------------创建方式1------------------------- var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g"); // //验证字符串 var str = "bc123"; alert(reg1.test(str));// true //----------------------------创建方式2 /填写正则表达式/匹配模式;----------------------------- var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g; alert(reg2.test(str));// true //-------------------------------正则对象的方法------------------- //test方法 ==> 测试一个字符串是否复合 正则规则. 返回值是true 和false. //-------------------------String 中与正则结合的4个方法macth search split replace------------------.
// var str = "hello world"; //alert(str.match(/o/g));
//查找字符串中 复合正则的 内容.
//alert(str.search(/h/g));
// 0 查找字符串中符合正则表达式的内容位置
//alert(str.split(/o/g));
// 按照正则表达式对字符串进行切割. 返回数组;
alert(str.replace(/o/g, "s"));
// hells wsrld 对字符串按照正则进行替换.
5、Math对象
//Math对象 //该对象中的属性方法 和数学有关. //Math是内置对象 , 与Global的不同之处是, 在调用时 需要打出 "Math."前缀. //属性学习: //alert(Math.PI); //方法学习: //alert(Math.random()); // 获得随机数 0~1 不包括1. //alert(Math.round(1.5)); // 四舍五入 //练习：获取1-100的随机整数，包括1和100 //var num=Math.random(); //num=num*10; //num=Math.round(num); // alert(num) //============max min========================= /* alert(Math.max(1,2));// 2 alert(Math.min(1,2));// 1 */ //-------------pow-------------------------------- alert(Math.pow(2,4));// pow 计算参数1 的参数2 次方. abs(x) 返回数的绝对值。 exp(x) 返回 e 的指数。 floor(x)对数进行下舍入。 log(x) 返回数的自然对数（底为e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。
二、BOM对象
1、window对象
- 所有浏览器都支持 window 对象。
- 概念上讲.一个html文档对应一个window对象.
- 功能上讲: 控制浏览器窗口的.
- 使用上讲: window对象不需要创建对象,直接使用即可.
window对象方法
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。<body>
<input type="button" onclick="fun_window()" value="按钮"> </body> <script> function fun_window() { // alert("alert参数") // 触发弹出一个提示框 // var result = confirm("confirm参数"); // 弹出提示框，并且可以返回boolean值 // var result = prompt("请输入："); // 弹出提示框，可以输入值 // alert(result); //open("https://fusion.design/"); // 打开一个页面 open('','','width=2000,height=1000,');
//参数1 什么都不填 就是打开一个新窗口.参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.
close(); // 关闭当前窗口
} </script>
<input id="ID1" type="text" onclick="begin()"> <button onclick="end()">停止</button> <script> function showTime(){ var nowd2=new Date().toLocaleString(); var temp=document.getElementById("ID1"); temp.value=nowd2; } var clock; function begin(){ if (clock==undefined){ showTime(); clock=setInterval(showTime,1000); } } function end(){ clearInterval(clock); } </script>
var ID = setTimeout(abc,2000); // 只调用一次对应函数. clearTimeout(ID); function abc(){ alert('aaa'); }
2、History对象
History 对象方法
-
back() 加载 history 列表中的前一个 URL。
-
forward() 加载 history 列表中的下一个 URL。
-
go() 加载 history 列表中的某个具体页面。刷新。
<body>
<a href="####.html">a标签</a>
<input type="button" value="back" class="button1">
<input type="button" value="forward" class="button2">
<input type="button" value="go" class="button3">
</body>
<script>
var ele = document.getElementsByClassName("button1")[0];
ele.onclick = function() {
history.back();
};
var ele1 = document.getElementsByClassName("button2")[0];
ele1.onclick = function() {
history.forward();
};
var ele2 = document.getElementsByClassName("button3")[0];
ele2.onclick = function() {
history.go();
};
</script>
<a href="rrr.html">click</a> <button onclick=" history.forward()">>>></button> <button onclick="history.back()">back</button> <button onclick="history.go()">back</button>
3、Location 对象
Location对象方法
- location.assign(URL) 加载URL页面到新的窗口
- location.reload() 重新加载
- location.replace(newURL) 加载一个新的页面，覆盖之前的页面
注意：
window.location.assign(url) ： 加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。
window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的
window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的
<body>
<input type="button" onclick="doc()" value="Location">
</body>
<script>
// function doc() {
// location.assign("https://fusion.design/");
// }
// function doc() {
// location.replace("https://fusion.design/");
// }
function doc() {
location.reload("https://fusion.design/");
}
</script>
4、DOM对象
DOM节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
推荐导航属性：
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
页面查找：
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
- 通过使用 getElementsByName() 方法
局部查找：
<div id="div1"> <div class="div2">i am div2</div> <div name="yuan">i am div2</div> <div id="div3">i am div2</div> <p>hello p</p> </div> <script> var div1=document.getElementById("div1"); ////支持; // var ele= div1.getElementsByTagName("p"); // alert(ele.length); ////支持 // var ele2=div1.getElementsByClassName("div2"); // alert(ele2.length); ////不支持 // var ele3=div1.getElementById("div3"); // alert(ele3.length); ////不支持 // var ele4=div1.getElementsByName("yuan"); // alert(ele4.length) </script>
例子HTML DOM Event(事件)
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 //练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。
<body onload="checkCookies()"> <script> function checkCookies(){ if (navigator.cookieEnabled==true){ alert("Cookies 可用") } else{ alert("Cookies 不可用") } } </script> <p>弹窗-提示浏览器 cookie 是否可用。</p> </body> onload 属性开发中 只给 body元素加. 这个属性的触发 标志着 页面内容被加载完成. 应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div> <script> function mOver(){ innerHTML="Thank You" } function mOut(){ innerHTML="Mouse Over Me" } </script>
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.
增删改查
增：
createElement(name)创建元素appendChild();将元素添加
删：
获得要删除的元素获得它的父元素使用removeChild()方法删除
改：
第一种方式: 使用上面增和删结合完成修改
第二种方式: 1.使用setAttribute();方法修改属性 2.使用innerHTML属性修改元素的内容
查：使用元素定位
<script type="text/javascript"> function addNode() { // 1.获得位置 var ele = document.getElementById("div"); // 2.创建标签 var eleAdd = document.createElement("a"); // 3.添加标签属性 eleAdd.setAttribute("href","https://fusion-design.alibaba-inc.com/"); // 4.为标签添加内容 eleAdd.innerHTML = "Fusion"; // 5。将eleAdd标签添加到ele中 ele.appendChild(eleAdd); } function delNode() { //1。获取元素的位置 var ele = document.getElementById("playing"); //2。获取其父级元素 var eleDel = ele.parentNode; //3。将元素ele走eleDel中删除 eleDel.removeChild(ele); } function updateNode() { // 1。获取元素的位置 var ele = document.getElementById("divs"); // 2。添加新的元素 var img = document.createElement("img"); // 3。添加新的元素属性 img.setAttribute("src","2.png"); // 4。获取其父元素位置 var parent = ele.parentNode; // 5。将元素替换 parent.replaceChild(img,ele); } function copyNode() { // 1。获得其元素位置 var ele = document.getElementsByClassName("hobby")[0]; // 2。设置复制元素 true为复制全部元素 false为复制自己 var ele_copy = ele.cloneNode(true); // 3。获取其父级元素 var parent = ele.parentNode; // 4。将复制的元素ele_copy,添加到parent下 parent.appendChild(ele_copy); } // 添加class属性 function funCss() { // 1.获取元素位置 var ele = document.getElementById("div_css"); // 2。添加元素属性 var ele_Css = document.createAttribute("class"); // 3。添加元素值 ele_Css.value = "css_demo"; // 4。将元素属性ele_Css,添加到ele位置 ele.setAttributeNode(ele_Css); } </script> <style> .css_demo{ color:red; } </style>
基本方法总结：
- 改变 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML ，innerText。
- 改变 HTML 属性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
- 创建新的 HTML 元素
createElement(name)
- 删除已有的 HTML 元素
elementNode.removeChild(node)
- 关于class的操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
