在看数组的方法之前先看复习下字符串的方法!
字符串的方法:
清除字符串前后空格
str.charAt(index);
str.indexOf(char)
str.slice(start,end)
str.substring(start,end)
str.substr(start.length)
str.toUpperCase()
str.toLowerCase()
str.trim();
如何来学习一个方法:
1. 这个方法操作哪一类数据
2. 这个方法的作用是什么
3. 传入指定类型的参数, 传入正确的参数
4. 方法的返回值,返回值的类型
返回值很大程度上是受参数的影响
5. 是否影响原数据
赋值
赋址 -- 引用,通过地址引用某一个对象
栈
堆
数组方法
1. 向数组后面追加元素
push([arg1,arg2....]) 改变原数组
2. 向数组前面插入元素
unshift([arg1,arg2....]) 改变原数组
3. 删除数组的最后一项
pop() 改变原数组
4. 删除数组的第一项
shift() 改变原数组
5. 指定的位置删除 指定的个数
splice(startIndex[,length]) 不指定删除的个数,默认删除到最后
startIndex 的范围在 0- length-1 之间
会改变原数组
6. 指定插入的位置以及替换元素
指定插入的位置:splice(startIndex,0[, 插入的内容,插入的内容,插入的内容,....)
替换元素: splice(startIndex,length,[, 替换的内容,替换的内容....)
7. 截取指定开始位置和结束位置的值
slice(start[,end]) 不包含结束位置
接收负数参数(同字符串的方法)
不改变原数组
8. 通过连接符把数组转换成字符串
join(连接符)
9. 把两个数组进行合并
concat(数组, 数组, 数组, 数组, 数组, 任意值,任意值,任意值)
如果传入的是数组,会把数组的每一项放到新数组中,如果是任意值,直接放在新数组中
不改变原数组
10. 循环数组的方法
forEach(回调函数)
forEach(function (每一项, 下标){
for 循环语句
// 相当于 for 的循环体
})
写起来麻烦
可以选择起始和结束
forEach 方法
写起来简洁
不可以选择起始和结束
html 代码效果预览
妙味课堂是一支独具特色的 IT 培训团队,妙味反对传统 IT 教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!<br />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title > 查询替换 </title>
<style>
body{
margin: 0;
background: rgba(160, 160, 221, 0.5);
}
.box{
width: 700px;
height: 300px;
margin: 50px auto;
background-color: rgba(241, 183, 183, 0.3);
padding: 10px;
border-radius: 20px;
}
.box .box-left{
float: left;
width: 480px;
height: 280px;
/* background: url(img/bodybfi.png) no-repeat; */
background-size: 100%;
background-color: rgba(236, 217, 236, 0.5);
overflow: auto;
text-indent: 2em;
border-radius: 5px;
color: rgb(33, 115, 126);
}
.box .box-right{
float: right;
width: 200px;
height: 300px;
font: 60px/90px "微软雅黑";
color: #ffffff;
text-align: center;
}
.box .box-right .right-btn{
height: 90px;
background-color: pink;
margin-bottom: 5px;
cursor: pointer;
border-radius: 50px;
}
.box .box-right .right-box{
height: 200px;
display: none;
}
.box .box-right .right-box div{
cursor: pointer;
height: 90px;
margin-bottom: 5px;
border-radius: 50px;
background-color: slategray;
}
.b-box{
display: none;
width: 700px;
padding-left: 100px;
height: 150px;
margin: 10px auto;
background-color: rgba(52, 52, 231, 0.2);
border-radius: 75px;
}
.b-box .box-top{
height: 100px;
}
.b-box .box-top div{
float: left;
width: 50px;
height: 50px;
border-radius: 25px;
margin: 20px 50px;
background-color: slategray;
color: #ffffff;
text-align: center;
font: 20px/50px "微软雅黑";
cursor: pointer;
}
.b-box .box-bottom{
height: 50px;
}
.b-box .box-bottom .bottom-inp{
width: 500px;
height: 50px;
float: left;
}
.b-box .box-bottom .bottom-inp input{
width: 180px;
height: 30px;
margin-top: 7px;
vertical-align: top;
}
.b-box .box-bottom .bottom-inp .inp-query,
.b-box .box-bottom .bottom-inp .inp-subs{
height: 50px;
}
.b-box .box-bottom .bottom-inp .inp-subs{
display: none;
}
.b-box .box-bottom .bottom-go{
width: 100px;
height: 50px;
display: inline-block;
font: 30px/50px "微软雅黑";
border-radius: 25px;
text-align: center;
background-color: slategray;
cursor: pointer;
color: #fff;
}
span{
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<section class="box">
<div class="box-left">
2013 年底,妙味课堂最新推出 "远程培训" 服务,受到很多朋友们的喜爱与追捧,我们必将更加努力的帮助远程学习的朋友实现技术提升......
</div>
<div class="box-right">
<div class="right-btn"> 展开 </div>
<div class="right-box">
<div class="right-query btn-query"> 查找 </div>
<div class="right-subs btn-subs"> 替换 </div>
</div>
</div>
</section>
<section class="b-box">
<div class="box-top">
<div class="btn-query"> 查找 </div>
<div class="btn-subs"> 替换 </div>
<div class="shut">X</div>
</div>
<div class="box-bottom">
<div class="bottom-inp">
<div class="inp-query">
<input type="text" id="Tquery">
<div class="bottom-go"> 查找 </div>
</div>
<div class="inp-subs">
<input type="text" id="Bquery">
<input type="text" id="Bsubs">
<div class="bottom-go"> 查找 </div>
</div>
</div>
</div>
</section>
<!-- <span></span> -->
<script>
// 获取元素
var bigBtn = document.querySelector('.right-btn');
var textArea = document.querySelector('.box-left');
var rightBox = document.querySelector('.right-box');
var bBox = document.querySelector('.b-box');
var shut = document.querySelector('.b-box .box-top .shut');
var btnQuery = document.querySelectorAll('.btn-query');
var btnSubs = document.querySelectorAll('.btn-subs');
var inpQuery = document.querySelector('.b-box .box-bottom .bottom-inp .inp-query');
var QueryText = document.querySelector('.inp-query .bottom-go');
var inpSubs = document.querySelector('.b-box .box-bottom .bottom-inp .inp-subs');
var subsText = document.querySelector('.inp-subs .bottom-go');
// 判断变量
var z = 0;
// 点击展开按钮的时候把需要的元素显示
bigBtn.onclick = function(){
if(z === 0){
disnow(bBox,rightBox,'block','block');
z = 1;
}else {
disnow(bBox,rightBox,'none','none');
z = 0;
}
}
shut.onclick = function(){
disnow(bBox,rightBox,'none','none');
z = 0;
}
// 显示底下的不一样的 input
for(var i = 0; i < btnSubs.length; i++){
btnQuery[i].onclick = function(){
disnow(inpQuery,inpSubs,'block','none');
}
btnSubs[i].onclick = function(){
disnow(inpQuery,inpSubs,'none','block');
subsText.innerHTML = '替换';
}
}
// 获取到 textArea 的 innerHTML 给到一个变量
var text2 = textArea.innerHTML;
QueryText.onclick = function(){
// 确保 input 里面有内容
if(Tquery.value === ''){
alert('请输入内容');
return;
}
// 判断有没有要查找的内容
if(text2.indexOf(Tquery.value) === -1){
alert('没找到');
return;
}
// 把里面的内容用输入的 value 分割成数组
var nowtext = text2.split(Tquery.value);
// 把数组用输入的内容包个 span 用 join 方法拼接回去
textArea.innerHTML = nowtext.join('<span>'+ Tquery.value +'</span>');
// 把 input 清空
Tquery.value = '';
}
subsText.onclick = function(){
// 确保 input 里面有内容
if(Bquery.value === ''|| Bsubs.value ===''){
alert('请输入内容');
return;
}
// 判断有没有要查找的内容
if(text2.indexOf(Bquery.value) === -1){
alert('没找到');
return;
}
// 跟上面一样切成数组
var nowtext = text2.split(Bquery.value);
// 在点击回查找时要用到换好的内容
text2 = nowtext.join(Bsubs.value);
// 把替换的内容给到 textArea 里面
textArea.innerHTML = nowtext.join('<span>'+ Bsubs.value +'</span>');
//input 清空
Bquery.value = '';
Bsubs.value = '';
}
// 封装的显示函数
function disnow(el1,el2,now,now2){
el1.style.display = now;
el2.style.display = now2;
}
</script>
</body>
</html>
来源: http://www.qdfuns.com/notes/48009/27d5486062567e459f8f500602174b5c.html