函数的分装

最新推荐文章于 2022-07-16 17:42:55 发布

原创最新推荐文章于 2022-07-16 17:42:55 发布 · 1.5k 阅读

本内容遵循CC 4.0 BY-SA版权协议

1相关知识点：string1.indexOf(string2)；获取string2在string1中的索引值。当string2在string1中找不到时，值为-1

<script>
  var str="abcdefghijklmno"
  var ostr=str.indexOf('fg');
  alert(ostr);**//5**
</script>

首先新建一个html文件，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <ul>
     <li class="txt"><i>hello</i></li>
     <li class="txt"><i>hello</i></li>
     <li class="tst"><i>hello</i></li>
     <li class="tst"><i>hello</i></li>
   </ul>
</body>
</html>

函数思路：找出ul li中className为txt的li元素并弹出有多少？
1. 首先获取ul和li的dom节点；
var oUl=document.getElementsByTagName(‘ul’)[0];
2. 获取ul li 中的className；
var aLi=oUl.getElementsByTagName(‘‘)；
aLi[i].className；
3.判断li元素className是否含有txt
aLi[i].className.indexOf(‘txt’)!=-1
4新建一个数组将含有txt className的li元素添加到里面；
5. 弹出新数组的个数

未分装前的函数


     window.onload=function(){
       var oUl=document.getElementsByTagName('ul')[0];
       var aLi=oUl.getElementsByTagName('*');
       var results=new Array();
       for (var i = 0; i <aLi.length; i++) {
        if (aLi[i].className.indexOf('txt')!=-1) {
           results[results.length]=aLi[i];
        }
       }
       alert(results.length);
     }

函数分装思路
首先函数分装的目的是为了函数多次利用；
1. 首先可以把ul作为一个变量，这样函数的利用就不会只局限于有序列表中了；
2. 其次className 可以作为变量。
3. 这样就可以把两个形参确定

    function clsName(node,className){    
    }

      var results=new Array();
      var oUl=document.getElementsByTagName('ul')[0];
      function clsName(node,clsName){
       var ali=node.getElementsByTagName('*')
       for (var i =0; i< ali.length; i++){
         if (ali[i].className.indexOf(clsName)!=-1) {
            results[results.length]=ali[i];
          }
        }
        alert(results.length);
     }
          clsName(oUl,'tst');
    }