==getTag方法(选取dom元素)和each方法(for循环的封装)==
<!--调用getTag(tag,results)方法-->
<!--1.tag是一个标签名;-->
<!--2.results是一个容器,储存元素,传参时代表一个dom元素伪数组,不传就是默认为空-->
<!--注:此方法只适合标签-->
//-----------------------------------------
function getTag(tag,results){
results = results || [];
<!--results是一个数组,同事也是一个对象,其__proto__属性中有push方法。。。-->
results.push.apply(results,document.getElementsByTagName(tag));
return results
}
//对数组或者dom对象遍历的目的就是改查;
<!-------------------------------------------->
arr = [2, 4, 8, 4];
var sum=0;
//求和
for (var i = 0; i < arr.length; i++) {
sum += arr[i]
}
console.log(sum)//18
//求最大值
var max = arr[0];
for (var i = 0; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i]
}
}
console.log(max)//8
//求最小值
var min = arr[0];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < min) {
min = arr[i]
}
}
console.log(min)//2
//查找
for (var i = 0; i < arr.length; i++) {
if (arr[i] === 4) {
console.log(i)//2
break
}
}
// 封装for循环
//分析:for循环的外层都一样就是循环体不一样,
//所以封装的思路是将循环体作为函数的参数传进去
//由于在调用each函数时无法访问循环体中的i和对应的值,所以将其作为参数传进去
function each(arr,fn){
for (var i = 0; i < arr.length; i++) {
fn(i,arr)
}
}
//求和
each(arr,function(a,b){
var sum =0;
sum+=b[a]
})
console.log(sum)//18
//求最大值
var max =0;
each(arr,function(a,b){
if(b[a]>max){
max =b[a]
}
})
console.log(max)//8
//求最小值
var min =arr[0];
each(arr,function(a,b){
if(b[a]<min){
max =b[a];
}
})
console.log(min)//2
//对于查询
//问题在于,调用each方法时,查询到后,还是会继续循环查找,
//不能中断循环,查找的结果会是最后一个
//所以需要想办法将信息传递个循环体
function each(arr,fn){
for (var i = 0; i < arr.length; i++)
//if(fn(i,arr)==="xx"){
if(fn(i,arr)===false){
break;
}
}
}
var index =-1;
each(arr,function(a,b){
if(b[a]===4){
console.log(this);//window
index =a;
//return "xx";//由于“xx”是个字符串,万一数组的内容就是“xx”会出问题,
return false
}
})
console.log(index)//1
//再来看看this指向
//可以考虑将this指向当前被遍历的对象
//所以代码更改
function each(arr,fn){
for (var i = 0; i < arr.length; i++) {
if(fn.call(arr,i,arr)===false){//利用call改变this指向;
break;
}
}
}
var index =-1;
each(arr,function(a,b){
console.log(this);//arr
if(b[a]===4){
index =a;
return false;
}
})
console.log(index)
<!------------------------------------------->
<div>122454</div>
<div>aaaaaa</div>
<p>我是一个兵</p>
<p>AAAAA</p>
<script>
function each(arr,fn){
for (var i = 0; i < arr.length; i++) {
if(fn.call(arr[i],i,arr)===false){
break;
}
}
}
function getTag(tag,results){
results = results || [];
results.push.apply(results,document.getElementsByTagName(tag));
return results
}
var elem = getTag("div");
elem = getTag("p",elem);
each(elem,function(a,b){
console.log(a,b);//打印的结果是索引和对应的值;
this.style.backgroundColor = "pink";
})
//结果是对应的标签背景都变成了粉红色
</script>