JavaScript基础
-
数组中slice和splice方法的用法
slice()方法
<script type="text/javascript"> var arr=["猪八戒","孙悟空","沙和尚","唐僧","白骨精"] /* slice() 可以用来从数组提取指定的元素 该方法不会改变原数组，而是会将截取到的元素封装到一个新数组中返回 参数： 1.截取开始的位置的索引(包括开始位置) 2.截取结束位置的索引(不包括结束位置) 第二个参数可以省略不写，此时则会截取从开始索引之后的所有元素 - 索引值也可为负值 -1 代表倒数第一个元素 -2 代表倒数第二个元素 */ var newArr=arr.slice(1,4); newArr = arr.slice(3) newArr=arr.slice(1,-2) console.log(newArr); </script>splice()方法
<script type="text/javascript"> /* splice() -用于刪除数组中指定元素 -使用splice()会影响到原数组，会将指定元素从原数组中删除 并将被删除的元素作为返回值返回 -参数： 第一个表示开始位置索引 第二个表示删除的元素数量 第三个参数及以后 可以传递一些的新元素，这些元素将会插入开始位置索引前面 */ var arr=["猪八戒","孙悟空","沙和尚","唐僧","白骨精"]; var newArr=arr.splice(0,2,"牛魔王"); console.log(newArr); </script>小案例
数组去重
<script type="text/javascript"> /* 删去数组中相同的元素 */ //创建一个数组 var arr=[1,2,2,2,2,1,4,3,4,2,5] //遍历数组中的每一个元素 for(var i=0;i<arr.length;i++){ //针对当前选中的元素遍历其后的所有元素 for(var j=i+1;j<arr.length;j++){ //用当前元素与其后元素逐一比较，判断是否相等 if(arr[i] == arr[j]){ //如果相等，则删除其后的元素 arr.splice(j,1); //删除了当前j所在的元素后，后面的元素会自动补位 //如果邻近元素相同则会出错 j--; } } } console.log(arr); </script> **其他方法**其他方法
<script type="text/javascript"> var arr=["孙悟空","猪八戒","沙和尚"]; var arr2=["唐僧","玉兔精","蜘蛛精"]; /* concat()可以连接两个或多个数组，并将新的数组返回 该方法不会对原数组产生影响 */ var newArr=arr.concat(arr2); console.log(newArr); /* join() 该方法将数组转化为一个字符串 该方法不会对原数组产生影响,而是将产生的字符串作为结果返回 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符 如果不指定连接符则默认使用,作为连接符 */ newArr=arr.join("@"); console.log(newArr); //console.log(typeof newArr); /* reverse() 该方法用来反转数组 */ arr.reverse(); console.log(arr); /* sort() 用来对数组元素排序 即使对于数字进行排序，也会使用Unicode编码来排序，可能会出现错误 可以自己指定排序规则 我们可以在sort()中添加一个回调函数，来指定排序规则 回调函数中需要定义两个形参 浏览器将会分别使用数组中的元素作为实参去调用回调函数 使用哪一个元素调用不确定，但是肯定的是数组中的a一定在b前面 浏览器会根据回调函数的返回值来决定元素的顺序 如果返回一个大于0的值，则元素会变换位置 如果返回一个小于0的值，则元素位置不变 如果返回一个0，则认为两个元素相等，不交换位置 */ var arr3=[1,5,2,9,3,6,5]; arr3.sort(function(a,b){ //前面的大 if(a>b){ return 1; }else if(a<b){ return -1; }else{ return 0; } }); console.log(arr3); </script> -
Date()
<script type="text/javascript"> /* Date对象 -在JS中使用Date对象来表示一个时间 */ //创建一个Date对象 //如果直接使用构造函数创建一个Date对象，则会封装当前代码执行的时间 var d= new Date(); //创建一个指定的时间对象 //需要在构造函数中传递一个表示时间的字符串作为参数 var d2 = new Date("12/03/2016 11:10:30"); console.log(d2); /* getDate() 获取当前日期对象是几日 */ var date=d2.getDate(); console.log("date="+date); /* getDay() 获取当前的日期为周几 会返回0-6的值 0表示周日 */ var day=d.getDay(); console.log("day="+day); /* getMonth() 获取当前的日期对象的月份 返回值0-11 0表示一月 以此类推 */ var month = d.getMonth(); console.log("month"+month); /* getTime() -获取当前日期对象的时间戳 */ var time =d.getTime(); console.log(time); </script> -
Math
<script type="text/javascript"> /* Math -Math和其他对象不同，它不是一个构造函数 它属于一个工具类不用创建对象，它里边封装了数字运算相关的方法和属性 */ /* abs()可以用来计算一个数的绝对值 */ console.log(Math.abs(-1)) /* Math.ceil() 可以对一个数进行向上取整，小数位只要有数就自动进1 Math.floor() 可以对一个数进行向下取整 Math.round() 可以对一个数进行四舍五入 */ console.log(Math.ceil(1.1)) console.log(Math.floor(1.1)) console.log(Math.round(1.4)) /* Math.random() 可以用来生成0-1的随机数 */ console.log(Math.random()); </script> -
String字符串方法
<script type="text/javascript"> //创建一个字符串 var str="Hello world"; /* 在底层字符串是以字符数组的形式保存的 ["H","e","l"] */ //length可以用来获取字符串的长度 console.log(str.length); console.log(str[3]); /* charAt() 可以返回字符串中指定位置的字符 */ var result=str.charAt(6); console.log(result); /* charCodeAt() 获取指定位置字符的Unicode编码 */ result=str.charCodeAt(6); console.log(result); /* String.formCharCode() 可以根据字符编码去获取字符 */ result=String.fromCharCode(119); console.log(result); /* concat() 可以用来连接两个或者多个字符串 */ result=str.concat("nihao,zaijian"); console.log(result); /* indexOf() 该方法可以检索一个字符串中是否含有指定内容 如果字符串含有该内容，则会返回其第一出现的索引 如果没有找到，则返回-1 可以指定一个第二个参数，指定开始查找的位置 */ result=str.indexOf("H"); console.log(result); result02=str.indexOf("w",2); console.log(result02); /* lastIndexOf() indexOf()从前往后找 lastIndexOf()从后往前找 也可以指定查找开始位置 */ result=str.lastIndexOf("l",5); console.log(result); /* substring() 可以用来截取一个字符串 参数： 第一个：开始截取位置的索引 包括开始位置 第二个：截取结束的位置索引 不包括 不能传递负数索引 如果错传则按0处理 还能自动调整参数的位置，如果第一个大于第二个，则交换位置 */ result = str.substring(1,2); console.log(result); /* substr() 用来截取字符串 参数： 1.截取开始位置的索引 2.截取长度 */ result=str.substr(2,2); console.log(result); </script> -
正则表达式
<script type="text/javascript"> /* 语法： var 变量=new RegExp("正则表达式","匹配模式"); shiy typeof检查正则对象，会返回object var reg= new RegExp("a"); 这个正则表达式可以来检查一个字符串中是否含有a 在构造函数中可以传递一个匹配模式作为第二个参数 可以使i g i：忽略大小写 g: 全局匹配模式 */ var reg= new RegExp("ab","i"); var str ="abcd"; /* 正则表达式的方法： test() 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则 如果符合规则返回true，否则返回false */ var result=reg.test(str); console.log(result); var str="1a2b3c4d5e6f7"; /* split() 可以将一个字符串拆分为一个数组 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串 */ var result =str.split(/[A-z]/); console.log(result); /* search() 可以搜索字符串中是否含有指定内容 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1 它可以接受一个正则表达式作为参数，然后会根据正则表达式检索字符串 */ str="hello abc hello aec afc"; /* 搜索字符串中是否含有abc,或aec或afc */ result=str.search(/a[bef]c/); console.log(result); /* match() 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来 默认情况下我们的match只会找到第一个符合要求的内容，找到后就停止检索 我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容 可以为一个正则表达式设置多个匹配模式，且顺序无所谓 match()会将匹配的内容封装到一个数组中返回，即使只查询到一个结果 */ str = "1a2a3a4a5a6a7a8a9a"; result=str.match(/[a-z]/ig); console.log(result); </script> -
DOM相关
-
DOM的一个入门小案例
<body> <button id="btn">我是一个按钮</button> <script type="text/javascript"> /* 浏览器已经为我们提供文档节点，对象window属性 可以直接在页面中使用，文档节点代表整个页面 */ //获取到button对象 var btn=document.getElementById("btn"); //修改按钮的文字 btn.innerHTML="I`m Button"; </script> </body> -
事件
就是用户和浏览器之间的交互行为：点击按钮，鼠标移动，关闭窗口，，，，，
<body> <button id="btn">我是一个按钮</button> <script type="text/javascript"> //获取按钮对象 var btn=document.getElementById("btn"); //绑定一个单击事件 btn.onclick=function(){ alert("你点我干嘛！"); } </script> </body> -
获取元素节点
通过document对象调用
- getElementById() 通过id属性获取一个元素节点对象
- getElementsByTagName() 通过标签名获取一组元素节点对象
- getElementsByName() 通过name属性获取一组元素节点对象
- appendChild() 将新的子节点添加到指定节点
- removeChild() 删除子节点 语法：父节点.removeChild(子节点);
- replaceChild() 替换子节点 语法：父节点.replaceChild(新节点，旧节点);
- insertBefore() 在指定的子节点前面插入新的子节点 语法：父节点.insertBefore(新节点，旧节点);
- createAttribute() 创建属性节点
- createElement() 创建元素节点
- createTextNode 创建文本节点
- childNodes -属性 表示当前节点的子节点
- firstChild -属性 表示当前节点的第一个子节点
- lastChild -属性 表示当前节点的最后一个子节点
- parentNode -属性 表示当前节点的父节点
- previousSibling -属性 表示当前节点的前一个兄弟节点
- nextSibling -属性 表示当前节点的后一个兄弟节点
-
图片切换demo
<head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload=function(){ /* 点击按钮切换图片 */ //获取两个按钮 var prev=document.getElementById("prev"); var next=document.getElementById("next"); //要切换图片要修改img的src属性 var img=document.getElementsByTagName("img")[0]; //创建一个数组，用来保存图片的路径 var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]; //创建一个变量，来保存当前正在显示的图片的索引 var index = 0; //分别为两个按钮绑定单击响应函数 prev.onclick=function(){ //切换上一张索引自减 index--; if(index<0){ index=imgArr.length-1; } img.src=imgArr[index]; } next.onclick=function(){ //切换上一张索引自加 index++; if(index>imgArr.length-1){ index=0; } img.src=imgArr[index]; } } </script> </head> <body> <div id="outer"> <img src="img/1.jpg" alt="" /> <button id="prev">上一张</button> <button id="next">下一张</button> </div> </body> -
选择框练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload=function(){ /* 全选按钮，点中按钮全都选中 */ //1.checkedAllBtn var checkedAllBtn=document.getElementById("checkedAllBtn"); checkedAllBtn.onclick=function(){ //获取四个多选框items var items=document.getElementsByName("items"); //全选则需要将checkedAllBox设置为true checkedAllBox.checked=true; //遍历items for(var i=0;i<items.length;i++){ //设置四个多选框全都选中 items[i].checked=true; } } /* 全都不选择 */ //2.checkedNoBtn var checkedNoBtn=document.getElementById("checkedNoBtn"); checkedNoBtn.onclick=function(){ //全不选则需要将checkedAllBox设置为false checkedAllBox.checked=false; //获取四个多选框items var items=document.getElementsByName("items"); //遍历items for(var i=0;i<items.length;i++){ //设置四个多选框全都不选中 items[i].checked=false; } }; /* 反选框 如果为true改为false 如果为false改为true */ //3.checkedRevBtn var checkedRevBtn=document.getElementById("checkedRevBtn"); checkedRevBtn.onclick=function(){ //获取四个多选框items var items=document.getElementsByName("items"); //遍历items for(var i=0;i<items.length;i++){ //判断 若值为true改为false 若为false改为true if(items[i].checked==true){ items[i].checked=false; }else{ items[i].checked=true; } } //将checkedAllBox设置为选中状态 checkedAllBox.checked=true; for(var j=0;j<items.length;j++){ //判断四个多选框是否全选 //只要有一个没选中则不是全选 if(!items[j].checked){ //一旦进入判断，则证明不是全选状态 checkedAllBox.checked=false; } } }; /* 提交按钮 弹出所选内容 */ //4.sendBtn var sendBtn=document.getElementById("sendBtn"); sendBtn.onclick=function(){ var items=document.getElementsByName("items"); for(var i=0;i<items.length;i++){ if(items[i].checked){ alert(items[i].value); } } }; /* 全选/全不选 选中时则全选，取消时则全取消 */ //5.checkedAllBox var checkedAllBox=document.getElementById("checkedAllBox"); checkedAllBox.onclick=function(){ var items=document.getElementsByName("items"); /* if(checkedAllBox.checked){ for(var i=0;i<items.length;i++){ items[i].checked=true; } } else{ for(var i=0;i<items.length;i++){ items[i].checked=false; } } */ for(var i=0;i<items.length;i++){ items[i].checked=checkedAllBox.checked; } }; /* 如果四个多选框选中，则checkedAllBox也应该选中 如果四个多选框不全都选中，则checkedAllBox也应该不选中 */ //6.items var items=document.getElementsByName("items"); //分别为四个多选框绑定点击响应函数 for(var i=0;i<items.length;i++){ items[i].onclick=function(){ //将checkedAllBox设置为选中状态 checkedAllBox.checked=true; for(var j=0;j<items.length;j++){ //判断四个多选框是否全选 //只要有一个没选中则不是全选 if(!items[j].checked){ //一旦进入判断，则证明不是全选状态 checkedAllBox.checked=false; } } } } } //7.type </script> </head> <body> <form method="post" action=""> 你爱好的运动是？ <input type="checkbox" id=checkedAllBox /> 全选/全不选 <br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br /> <input type="button" id="checkedAllBtn" value="全选" /> <input type="button" id="checkedNoBtn" value="全不选" /> <input type="button" id="checkedRevBtn" value="反选" /> <input type="button" id="sendBtn" value="提交" /> </form> </body> </html> -
DOM的增删改
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload=function(){ //1. 创建一个"广州"节点，添加到#city下 myClick("btn01",function(){ //创建广州节点<li>广州</li> //创建li元素节点 /* document.createElement() 可以用于创建一个元素节点对象 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象 并将创建好的对象作为返回值返回 */ var li = document.createElement("li"); /* document.createTextNode() 可以用来创建一个文本对象 需要一个文本内容作为参数，将会根据该内容创建文本节点，将新的节点返回 */ //创建广州文本节点 var textNode=document.createTextNode("广州"); /* 将textNode设置为li的子节点 appendChild() 向一个父节点中添加一个新的子节点 用法：父节点.appendChild(子节点); */ li.appendChild(textNode); //获取id为city的节点 var city=document.getElementById("city"); //将广州添加到city下面 city.appendChild(li); }); //2.将"广州"节点插入到#bj前面 myClick("btn02",function(){ //创建出一个广州节点 var li = document.createElement("li"); var textNode=document.createTextNode("广州"); li.appendChild(textNode); //获取id为bj的节点 var bj =document.getElementById("bj"); //获取city var city=document.getElementById("city"); /* insertBefore() 语法： 父节点.insertBefore(新节点，旧节点); */ city.insertBefore(li,bj); }); //3.使用"广州"节点替换#bj节点 myClick("btn03",function(){ //创建一个广州 var li = document.createElement("li"); textNode=document.createTextNode("广州"); li.appendChild(textNode); //获取id为bj的节点 var bj=document.getElementById("bj"); //获取city var city=document.getElementById("city"); city.replaceChild(li,bj); }); //4.删除#bj节点 myClick("btn04",function(){ //获取id为bj的节点 var bj=document.getElementById("bj"); //获取city var city=document.getElementById("city"); //city.removeChild(bj); //此时为父节点没有id时使用 bj.parentNode.removeChild(bj); }); //5.读取#city内的HTML代码 myClick("btn05",function(){ //获取city var city=document.getElementById("city"); alert(city.innerHTML); }); //6.设置#bj内的HTML代码 myClick("btn06",function(){ //获取id为bj的节点 var bj=document.getElementById("bj"); bj.innerHTML="驻马店"; }); }; function myClick(idStr,fun){ var btn =document.getElementById(idStr); btn.onclick=fun; } </script> </head> <body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市？ </p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>西安</li> <li>郑州</li> </ul> </div> </div> <div id="btnlist"> <div><button id="btn01">创建一个"广州"节点，添加到#city下</button></div> <div><button id="btn02">将"广州"节点插入到#bj前面</button></div> <div><button id="btn03">使用"广州"节点替换#bj节点</button></div> <div><button id="btn04">删除#bj节点</button></div> <div><button id="btn05">读取#city内的HTML代码</button></div> <div><button id="btn06">设置#bj内的HTML代码</button></div> </div> </body> </html>-
操作内联样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 200px; background-color: red; } </style> <script type="text/javascript"> window.onload=function(){ /* 点击按钮以后，修改box1的大小 */ //获取box1 var box1=document.getElementById("box1"); //为按钮绑定单击响应函数 var btn01=document.getElementById("btn01"); btn01.onclick=function(){ //修改box1的宽度 /* 通过JS修改元素的样式： 语法：元素.style.样式名=样式值 注意：如果CSS的样式名中含有-， 这种名称在JS中是不合法的比如background-color 需要将这种样式名修改为驼峰命名法， */ box1.style.width="300px"; box1.style.height="300px"; box1.style.backgroundColor="teal"; } } </script> </head> <body> <button id="btn01">点我一下</button> <div id="box1"></div> </body> </html> -
滚轮事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 200px; background-color: red; } </style> <script type="text/javascript"> window.onload=function(){ /* 当鼠标滚轮向下，box变长 当鼠标滚轮向上滚动时，box变短 */ var box1=document.getElementById("box1"); //为box1绑定滚轮滚动的事件 //onmousewheel鼠标滚轮滚动的事件，会在鼠标滚轮滚动时触发 box1.onmousewheel=function(event){ event=event||window.event; //判断鼠标滚轮滚动的方向 //event.wheelDelta 可以获得鼠标滚轮滚动的方向 //在火狐浏览器中用event.detail来获取滚动的方向 if(event.wheelDelta>0||event.detail<0){ //当鼠标滚轮向上滚动时，box变短 box1.style.height=box1.clientHeight-10+"px"; }else{ //当鼠标滚轮向下，box变长 box1.style.height=box1.clientHeight+10+"px"; } }; } </script> </head> <body> <div id="box1"></div> </body> </html> -
键盘事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload=function(){ /* 键盘事件 onkeydown 按键按下 如果按着不松一直触发 onkeyup 按键松开 键盘事件一般绑定给可以获取焦点的对象或者document */ document.onkeydown=function(){ event=event||window.event; /* 可以通过keyCode来获取按键的编码 通过它可以判断哪个按键被按下 */ console.log(event.keyCode); } document.onkeyup=function(){ } }; </script> <head> <body> </body> </html>
-
-
BOM相关
-
基本信息
BOM
- 浏览器对象模型
- BOM可以使我们通过JS来操作浏览器
- 在BOM中为我们提供了一组对象，用来完成对浏览器的操作
- BOM对象
- window ：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
- Navigator：代表的是当前浏览器的信息，通过该对象来识别不同的浏览器
- Location：代表当前浏览器的地址栏信息
- History：代表浏览器的访问历史记录，可以通过该对象来操作浏览器的历史记录
由于隐私的原因，该对象不能获取具体的历史记录 - Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关信息
-
history问题
- length -属性 可以获取当前访问的链接数量 history.length
- back() -方法 可以用来回退到上一个页面，作用和浏览器的回退按钮一样 history.back()
- forward() -方法 可以用来跳转到下一个页面，作用和浏览器的前进按钮一样 history.forward()
- go() -方法 可以用来跳转到指定的页面，它需要一个整数作为参数 n 表示向前跳n个页面 -n 表示向后跳转n个页面
-
定时器问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload=function(){ //获取count var count=document.getElementById("count"); /* setInterval() -定时调用 -可以将一个函数，每隔一段时间执行一次 -参数： 1.回调函数，该函数会每隔一段时间被调用一次 2.每次调用间隔的时间，单位是毫秒 -返回值 返回一个Number类型的值 用来作为定时器的唯一标识 */ var num=1; var timer = setInterval(function(){ count.innerHTML=num++; if(num==11){ clearInterval(timer); } },1000); //clearInterval()可以用来关闭一个定时器 //方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器 } </script> </head> <body> <h1 id="count"></h1> </body> </html> -
定时器的小案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; left: 0; } </style> <script type="text/javascript"> window.onload=function(){ //获取btn01 var btn01=document.getElementById("btn01"); //获取btn02 var btn02=document.getElementById("btn02"); //获取box1 var box1=document.getElementById("box1"); var timer01; var timer02; //点击向右移动 btn01.onclick=function(){ clearInterval(timer02); clearInterval(timer01); //开启一个定时器,用来执行动画效果 timer01=setInterval(function(){ //获取box1的left值 var oldValue=parseInt(getStyle(box1,"left")); //在旧的基础上增加 var newValue=oldValue+10; if(newValue>800){ newValue=800; } //将新值设置给box1 box1.style.left=newValue+"px"; //达到800像素关闭定时器 if(newValue==800){ clearInterval(timer01); } },30); }; //点击向左移动 btn02.onclick=function(){ clearInterval(timer01); clearInterval(timer02); //开启一个定时器,用来执行动画效果 timer02=setInterval(function(){ //获取box1的left值 var oldValue=parseInt(getStyle(box1,"left")); //在旧的基础上增加 var newValue=oldValue-10; if(newValue<0){ newValue=0; } //将新值设置给box1 box1.style.left=newValue+"px"; //达到800像素关闭定时器 if(newValue==0){ clearInterval(timer02); } },30); }; }; function getStyle(obj,name){ if(window.getComputedStyle){ return getComputedStyle(obj,null)[name]; }else{ return obj.currentStyle[name]; } }; </script> </head> <body> <button id="btn01">点击向右移动</button> <button id="btn02">点击向左移动</button> <div id="box1"></div> </body> </html>
-
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
