js基本知识3

Posted 2020-10-19 Carina

 1. 函数  function    
   函数的声明    函数的  调用    函数的传参  
 2. 函数返回值  
   Return    返回结果     返回给函数   
   Id 函数 
     function $id(id) { return document.getElementById(id);}
3.  获得焦点  onfocus       onblur  失去焦点
4.  this  这个 自己的     指向的是  事件调用者
5.   Innerhtml  属于盒子的内容     表单的内容 value 
6.   表单自动获得焦点   focus()    选择表单内容   select();
7.   For(var i = 0; i<100;i++) {  }   遍历   
8.   For(;;){ }     死循环  
9.   GetElementById()  id元素  一个     
10. getElementsByTagName()  很多个
1.2    判断用户输入事件
  正常浏览器  :    oninput  
  Ie 678  支持的  ： onpropertychange   
1.3    数组 array
数组是做什么用的？
var  num = 10;  变量可以用来存储东西 。
一个变量里面只能一个值。
我们130人，想把我们每个人的人名存储，要用变量需要 130变量。
这个时候可以考虑  数组 。  组合 
数组：  就是一个大变量， 它里面可以存储很多的值。
1.3.1    声明数组
  var arr = [1,3,5,7,9];
  var arr = new Array(1,3,5);
1.3.2    使用数组
 使用的方法:    数组名[索引值];               函数名(); 
 索引号是从0开始的。   0 1 2 3 4 5 ...
var textArr = ["刘备","诸葛亮","赵云","关羽"];
console.log(textArr[3])
1.3.3     数组的长度
 数组名.length;    
1.3.4     遍历数组
  想到了for  遍历 数组
  getElementsByTagName()  得到一个伪数组  
1.3.5      案例 隔行变色
  <script>
    window.onload = function(){
        var lis = document.getElementsByTagName("li");  // 得到所有的li
        //alert(lis.length);
        for(var i = 0; i<lis.length; i++)
        {
            if(i%2 == 0)  // 只有偶数能被2整除
            {
                lis[i].style.backgroundColor = "#eee";
            }
            //鼠标经过li 的时候， 当前的底色变亮
            lis[i].onmouseover = function(){
                this.className = "current";
            }
            lis[i].onmouseout = function(){
                this.className = "";
            }
        }
    }
</script>
1.3.6    求平均值
<script>
var arr = [10,20,30,34,67];
    function avg(array){  // 封装求平均值函数
        var len = array.length;  // 数组的长度
        var sum = 0;
        for(var i=0; i<len; i++)
        {
            sum += array[i];   //     sum = sum +array[i];
        }
        return sum / len;
    }
    //a*=3   a= a*3
    console.log(avg(arr));
</script>
字符相连
 +  
 数值相加  字符相连  
 1+1 = 2;
 “你好” + “吗”     “你好吗”
 “你好” + 2      “你好2”

  “0” + 10          “010”
   10 - “2”        8
  所有的input  取过来的值  是  字符型。
三元运算符  三目运算符
  一元：  a++  b++    +a  -a 
  二元:   a+b   a>=b 
  三元:   表达式 ? 结果1 : 结果2    等价于    if  else 
   如果表达式结果为真 ， 则返回 结果1  
   如果表达式结果为假，  则返回结果2 
   if(3>5) {alert(“11”)} else { alert(22)}      == 
   3>5 ? alert(11) : alert(22)
  the king is always luck  
   王老吉
1.4     排他思想
 排他思想:
    首先干掉所有人，   剩下我自己
  <script>
    window.onload = function(){
        var btns = document.getElementsByTagName("button");
        for(var i=0;i<btns.length;i++)
        {
            btns[i].onclick = function(){
                //清除所有人的 类名   只能用 for 遍历
                for(var j=0;j<btns.length;j++)
                {
                    btns[j].className = "";
                }
                //就剩下自己 就是一个 而且是点击那个
                this.className = "damao";
            }
        }
    }
</script>
1.5    变量 和属性 
变量
   是独立存在的 自由自在的
   miss    小姐 女士
属性和方法
   属于某个对象的 属性和 方法
    mrs   
var index = 10;  //变量  谁都可以使用
var arr = [];   // 数组
arr.index = 20;    // 自定义属性  他只能在arr 才能使用
alert(arr.index);