JS DOM操作 函数 事件 阻止事件冒泡

一 常用函数

1、字符串函数

 var s="AbcdE,145dfEE,F5";

 s.tolowerCase( )； 　　 //变小写
 s.toupperCase( )；　    //变大写
 s.substr(  ,  )；　   //截取(从索引2开始截取，截取8个字符长度)
 s.split(',')；　　　   　//指定字符分割，返回一个数组。    括号里放一个字符，按照这个字符分割s
 s.length ；  　　　　　 　//长度
 s.indexOf（ ）;     　 　//在字符串中第一次出现的位置，找索引，没有返回 -1.
 s.lastindextOf( );      //从后面找第一个匹配的索引。

2、时间日期函数

 var  d  =  now  Date ( );         //当前时间，获取的是用户电脑系统时间（容易出问题）
 var  d   = now  Date (,,)   // 定义时间，1999年4月2号，定义时月份减一。

//获取
 d.getFullYeat( );      // 取年
 d.getMonth( ）；        // 取月份， 取出来的比实际月份少1.
 d.getDate( );          // 取天
 d.getDay( );           // 取星期几
 d.getHours( );         // 取小时
 d.getMinutes( );       // 取分钟
 d.getSeconds( );       // 取秒

//设置
 d.setFullYear( );       // 设置年份
 d.setMonth( ）；         //设置月份   在设置是时候注意加 1 .
  ...........

3、数学函数

var m=123456.78

  Math.ceil( m);       //取上限
  Math.floor(m );      //取下限
  Math.round( m);      //四舍五入

  Math.random( );     //随机数，0——1之间
 　　
　　  　　var  v  =  Math.random ( );
  　　　　Math.ceil (v* );           //取1——10的随机数

 a. match ( b )    // 判断是否匹配，

        var a = "aaa"
        var b = "aaa"
        if (aa.match(aaa))
        {                  //两字符串进行匹配，如果不匹配返回 null，如果相当返回子符
            alert("相等")
        }
        else
        {                 //只是判断内容是否匹配，不看数据类型。
            alert('不等')
        }

“===” 三个等号表示恒等，内容 类型等都要相等。

二  事件

1、常用事件

  onclick             //鼠标单击触发
  ondbclick           //鼠标双击触发
  onmouseover         //鼠标移入
  onmouseout          //鼠标移出
  onmousemove         //鼠标移动触发     在操作对象上面移动一下鼠标就会触发
  onfocus             //获得焦点时触发   光标移入
  onblur              //失去焦点时触发   光标移出
  onchange            //内容改变时触发（与onblur一样，光标移出后改变）
  onkeydown           //按键按下时触发           下一次按键触发上一次按键结果
  onkeyup             //按键抬起时触发             按键按下，抬起，提起时触发按下时的结果
  onkeypress          //按下并放开任意数字、字母键时触发。系统按钮无法识别。

  window.onload      //整个浏览器加载完全后再触发,需要 HTML 文档渲染完成后执行的程序
                     //如果把 js 写在 head 里面，必须加 onload，一个HTML页面只能有一个 onload，函数如果写在 onload 里面永远无法调用到
  window.onresize   //大小（浏览器）改变时触发

例1、焦点事件

 <input type="text" id="id1" />
 <span id="id2"> </span> 

<script type="text/javascript">
    var a = document.getElementById('id1');
    var b = document.getElementById('id2')

    a.onblur = function () {
        b.innerText = a.value;
    }
    a.onfocus = function () {
        b.innerText = "8位以上数字字母组合"
    }

</script>

例2、浏览器大小变化时触发事件

 <input type="text" id="id1" />
 <span id="id2"></span>

<script type="text/javascript">
    var a = document.getElementById('id1');
    var b = document.getElementById('id2')
    var c = ;
     window.onresize = function () {
       b.innerText = c;                 // b中记录浏览器大小改变时的变化
       c++;
     }

    window.onresize = function () {
        var hei = document.documentElement.clientHeight;
        var wid = document.documentElement.clientWidth;
        b.innerText = "高度" + wid + " 宽带" + hei;
    }                                             //显示客户端浏览器的高宽。
</script>

2、事件冒泡

当元素嵌套的时候，内部元素激发某个事件后，默认情况下外部元素相应的事件也会跟着触发

  阻止冒泡：

window.event ? window.event.cancelBubble = true : e.stopPropagation();