前端的一些东西

手机校验：var phoneNumReg = /^1[34578]\d{9}$/;  

alert("") 向浏览器弹出一个提示框
   document.write("")  向body中添加一个内容
   console.log("")     向控制台输出一个内容
   <button onclick="alert('讨厌  死鬼  你点我干嘛')">点我一下</button>    js代码可以写在标签的属性中
   将一个字面量转成String 类型的方式
       a.调用toString（）方法       null 和 undefined调用toString()方法会报错 
       b.调用String（）函数           例：var a = 123；  var b = String（a）   String（） 函数实际上是将null 和 undefined等值 转换成 “null”“undefined”
    将一个字面量转成一个Number类型的方式
        a.调用Number()函数   
            *如果是纯数字的字符串，会将其直接转换成数字
            *如果字符串中含有非数字的字符串，会将其转化为NaN(not a number)\
            *如果字符串是一个空串或者全是空格，会将其转化成0
            *Boolean类型转数字  true 转成1   false转成0
            * null 会转换0 
            * undefined会转换成NaN
        b.调用
              parseInt() 将字符串转换为int        只能将一个以数字开头的字符串中未出现非数字的字符前面的数字转化成数字    
              parseFloat 将字符串转换成浮点数
              parseInt 和 parseFloat 对于非String类型的数据  它会先转换成String  在对其进行操作
   将一个数据转换成boolean类型
        a.调用Boolean（）函数
            * 将一个数字转成boolean 除了0和NaN是false 其他全部是true
            * 将一个字符串转成boolean 除了空串是false 其他都为true
            * 将null和undefined 转成boolean  值为false   

运算符
   $$ 逻辑与运算 
      * 当第一个值为true时，必然返回第二个值
      * 当第一个值为false时，必然返回第一个值
   || 或运算
      * 当第一值为false时，必然返回第二个值
      * 当第一值个为true时，必然返回第一个值   
            
1.了解jqery
   *是什么： what
      *一个js函数库：write less ，do more
      *封装简化DOM操作（crud）/ajax
   *为什么用它：why？
      *强大选择器：方便快速查找DOM元素
      *隐式遍历（迭代）：一次操作多个元素
      *读写合一：读数据和写数据使用同一个函数，读的时候不传值，写的时候传值就行
      *事件处理
      *链式调用
      *DOM操作（cud）
      *样式操作
   *如何使用： How？
      *引入jquery库
        *本地引入和CDN远程引入，本地引入一般用于测试，生产最好是远程引入
        *测试版本（测试版）和生产版本(压缩版)
      *使用jquery
        *使用jQuery函数：$/jquery
        *使用jQuery对象：$xxx(执行$()得到的)
2.jquery的2把利器
   *jQuery函数：$/jquery
      *jQuery向外暴露的就是jQuery函数，可以直接使用
      *当成一般函数使用：$(param)
         *param是function：相当于window.onload = funcion（文档加载完毕之后的监听）
         *param是选择器字符串：查找所有匹配的DOM元素，返回包含所有DOM元素的jQuery对象
         *param是DOM元素：将dom元素对象包装为jQuery对象返回 $(this)
         *param 是标签字符串：创建标签dom元素对象并包装成jQuery对象返回
      *当成对象使用：$.xxx
         *each(obj/attr,function(key,value(){}))
         *trim(str)
      *当成对象使用: $.xxx
   *jquery对象
      *包含所有匹配的n个DOM元素的伪数组对象，
      * 执行$()返回的就是jQuery对象
      *基本行为：
        *length/size():得到dom元素的个数
        *[index]:得到指定下标对应的dom元素
        *each（function（index，domEle）（））：遍历所有的dom元素
        *index（）：得到当前dom元素在所有兄弟中的下标
3.选择器
   *是什么？
     *有特定语法规则（css选择器）的字符串
     *用来查找某个或某些DOM元素：$(selector)
   *分类
     *基本
       * #id  
       * tagName/*
       * .class
       * selector1,selector2,selector3:并集
       * selector1selector2selector3：交集
     *层次
       *找子孙后代，兄弟元素
       *selector1>selector2:子元素
       *selector1 selector2：后代元素
     *过滤
       * 在原有匹配元素中筛选出其中一些
       * ：first
       * ：last
       * ：eq（index）
       * ：not（selector）不是这个的其他元素
       * ：lt
       * ：gt连续几个
       * ：odd
       * ：even
       * ：hidden
       * ：visible
       * ：[attrName]
       * : [attrName=value]
     *表单
       * ：input
       * ：text
       * ：checkbox
       * ：redio 
       * : checked 选中的
4.属性
    *操作标签的属性，标签体文本，
    *attr（name）/ attr(name,value):读写非布尔值的标签属性
    *prop（name）/ prop(name,value):读写布尔值的标签属性
    *removeAttr（name）/removeProp(name):删除属性
    *addClass（className）：添加class
    *removeClass（classValue）：移除指定class
    *val（）/val(value):读写标签的value
    *html（）/html(htmlString):对写标签体文本
5.CSS模块
    *style样式
      *css(styleName):根据样式名得到对应的值
      *css（styleName，value）：设置一个样式
      *css（{多个样式对}）：设置多个样式
    *位置坐标
      *offset();读/写当前元素坐标（原点是页面左上角）
      *position();读当前元素坐标（原点在父元素左上角）
      *scrollTop（）/scrollLeft();读、写元素、页面的滚动条坐标
    *尺寸
      *width()/height（）：width/height
      *innerWidth()/innerHeight();width+padding
      *outerWidth()/outerHeight();width+padding+border
6.筛选模块
      *过滤
        *在jquery对象内部的元素中找出部分匹配的元素，并封装成新的jquery对象返回
        *first（）
        *last（）
        *eq（index）
        *filter（selector）
        *not（selector）
        *has（selector）
      *查找
        *查找jquery对象内部的元素的子孙、兄弟、父母元素，并封装成新的jquery对象
        *children（selector）：子元素
        *find（selector）：后代元素
        *preAll（selector）：前面的所有兄弟
        *siblings（selector）：所有兄弟
        *parent（）：父元素
7.文档处理模块
      *增加
        *append（）、appendTo（）插入后部
        *preppend（）、preppendTo 插入前部
        *before（）插入前面
        *after（）插入后面
      *删除
        *remove（）：将自己和内部的孩子都删除
        *empty（）：掏空
      *更新
        *repalcewith（）
8.事件模块
      *绑定事件
        *eventName（function（）{}）
        *on（‘eventName’，function（）{}）
        *常用事件
           *click，mousenter/mouseleave mouseover/mouseout fouce/blur
           *hover(function(){},function(){}) 
      *解绑事件
           *off('eventName')
      *事件委托
         *将子元素的事件委托给父元素处理
            *事件监听绑定在父元素上，但事件发生在子元素上
            *事件回冒泡到父元素
            *但最终调用的是事件回调函数的是子元素，event，target
          *好处：
            *新增的元素没有事件监听
            *减少监听的数量
          *编码
            *delegate（selector，‘eventName’，function（）{}）  回调函数中的this是子元素
            *undelegate（‘eventName’，）
      *事件坐标
          *event.offsetX 原点当前元素左上角
          *event.clientX  原点是窗口左上角
          *event.pageX  原点是页面左上角
   
      *事件相关
          *停止事件冒泡
          *阻止事件的默认行为：event.preventDedault（）

例子：

$('input').bind('click',function(e){
    $('div').show();
    e.stopPropagation();
   });
   $('html').bind('click',function(){
    $('div').hide()
   });

blockUI的使用：

function returnInvoice(no,id){
    $('#backInvoiceNo').val(no);
    $('#backInvoiceId').val(id);
    console.log(no);
    console.log(id);
    var winH = $(window).height();
    var winW = $(window).width();
    var left = (winW -300) / 2;
    var top = (winH ) / 2 + 30;

    $.blockUI({
        message:$('#backInvoice'),
        css:{
            border:'none',
            width: '380px',
            top:top,
            left:left
        }
    });
}