beforeCreate：在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化

created：在实例创建之后调用。此时已完成数据观测、事件方法，但尚未开始DOM编译，即未挂载到document中

beforeMount：在mounted之前运行。[2.0中的新钩子]

mounted：在编译结束时调用。此时所有指令已生效，数据变化已能触发DOM更新，但不保证$el已插入文档。

beforeUpdate:在实例挂载之后，再次更新实例（例如更新data）时会调用该方法，此时尚未更新DOM结构。[2.0中的新钩子]

updated:在实例挂载之后，再次更新实例并更新完DOM结构后调用。[2.0中的新钩子]

beforeDestroy:在开始销毁实例时调用，此刻实例仍然有效。

destroyed:在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁。

activated：需要配合动态组件keep-live属性使用。在动态组件初始化渲染的过程中调用该方法。[2.0中的新钩子]

deactivated：需要配合动态组件keep-live属性使用。在动态组件移出的过程中调用该方法。[2.0中的新钩子]

<!--滚动条到达底部时自动跳转到第二页-->
<script language="javascript">
     $(document).ready(function (){
       var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
       var nScrollTop = 0;   //滚动到的当前位置
       var nDivHight = $(".page").height();
       $(".page").scroll(function(){
         nScrollHight = $(this)[0].scrollHeight;
         nScrollTop = $(this)[0].scrollTop;
　　　　　var paddingBottom = parseInt( $(this).css('padding-bottom') ),paddingTop = parseInt( $(this).css('padding-top') );
         if(nScrollTop + paddingBottom + paddingTop + nDivHight >= nScrollHight)
           alert("滚动条到底部了");
         });
     });
</script>

源代码如下：

var second = 0;
window.setInterval(function () {
    second ++;
}, 1000);
var tjArr = localStorage.getItem("jsArr") ? localStorage.getItem("jsArr") : '[{}]';
$.cookie('tjRefer', getReferrer() ,{expires:1,path:'/'});
window.onbeforeunload = function() {
    if($.cookie('tjRefer') == ''){
        var tjT = eval('(' + localStorage.getItem("jsArr") + ')');
        if(tjT){
            tjT[tjT.length-1].time += second;
            var jsArr= JSON.stringify(tjT);
            localStorage.setItem("jsArr", jsArr);
        }
    } else {
        var tjArr = localStorage.getItem("jsArr") ? localStorage.getItem("jsArr") : '[{}]';
        var dataArr = {
            'url' : location.href,
            'time' : second,
            'refer' : getReferrer(),
            'timeIn' : Date.parse(new Date()),
            'timeOut' : Date.parse(new Date()) + (second * 1000)
        };
        tjArr = eval('(' + tjArr + ')');
        tjArr.push(dataArr);
        tjArr= JSON.stringify(tjArr);
        localStorage.setItem("jsArr", tjArr);
    }
};
function getReferrer() {
    var referrer = '';
    try {
        referrer = window.top.document.referrer;
    } catch(e) {
        if(window.parent) {
            try {
                referrer = window.parent.document.referrer;
            } catch(e2) {
                referrer = '';
            }
        }
    }
    if(referrer === '') {
        referrer = document.referrer;
    }
    return referrer;
}

跳转页面主要使用window的两个对象方法，setInterval()和setTimeout()

setInterval(code,millisec)

定义和用法
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法
setInterval(code,millisec[,"lang"])

参数 描述
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

setTimeout(code,millisec)

语法
setTimeout(code,millisec)

参数 描述
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。

setInterval实例

<p id="page_div">将在5秒后自动跳转到首页</p>
 
<script language="javascript">
    var num = 4; //倒计时的秒数
    var URL = "index.html";
    var id = window.setInterval('doUpdate()', 1000); 
    function doUpdate() {
        document.getElementById('page_div').innerHTML = '将在'+num+'秒后自动跳转到首页' ;
        if(num == 0) {
            window.clearInterval(id);
            window.location = URL; 
        }
        num --;
    }
</script>

setTimeout实例

<p id="page_div">将在5秒后自动跳转到首页</p>
 
<script language="javascript">
    var num = 4; //倒计时的秒数
    var URL = "index.html";
    window.setTimeout("doUpdate()", 1000);
    function doUpdate(){
        if(num != 0){
            document.getElementById('page_div').innerHTML = '将在'+num+'秒后自动跳转到首页' ;
            num --;
            window.setTimeout("doUpdate()", 1000);
        }else{
            num = 4;
            window.location = URL; 
        }
    }
</script>

获取select

获取select 选中的 text :

$("#ddlregtype").find("option:selected").text();

获取select选中的 value:

$("#ddlregtype ").val();

获取select选中的索引:

$("#ddlregtype ").get(0).selectedindex;

设置select

设置select 选中的索引：

$("#ddlregtype ").get(0).selectedindex=index;//index为索引值

设置select 选中的value：

$("#ddlregtype ").attr("value","normal“);
$("#ddlregtype ").val("normal");
$("#ddlregtype ").get(0).value = value;

设置select 选中的text:

var count = $("#ddlregtype option").length;
for (var i = 0; i < count; i++) {
    if ($("#ddlregtype ").get(0).options[i].text == text) {
        $("#ddlregtype ").get(0).options[i].selected = true;
        break;
    }
}
$("#select_id option[text='jquery']").attr("selected", true);

设置select option项:

$("#select_id").append("<option value='value'>text</option>"); //添加一项option
$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option
$("#select_id option:last").remove(); //删除索引值最大的option
$("#select_id option[index='0']").remove(); //删除索引值为0的option
$("#select_id option[value='3']").remove(); //删除值为3的option
$("#select_id option[text='4']").remove(); //删除text值为4的option

清空 select:

$("#ddlregtype ").empty();

工作需要，要获得两个表单中的值。如图：

如何获得从左边选择框添加到右边选择框中的值？我想了想用网页特效可以获得，这里用了比较流行的jquery。
js代码如下：

//获取所有属性值 var item = $("#select1").val();
$(function() {
    $('#select1').each( //获得select1的所有值
        function() {
            $('button').click(function() {
                alert($('#select2').val()); //获得select2中的select1值
            });
        });
})

值得注意的是，不能直接写成

$(function() {
    $('#select2').each( //获得select1的所有值，因为前面讲选项从左边添加到右边，jquery其实并没有真正将值从左边传到右边。
        function() {
            $('button').click(function() {
                alert($(this).val()); //获得select2中的select1值
            });
        });
})

html：

<div class="centent">
    <select multiple="multiple" id="select1" name="dd" style="width:100px;height:160px;">
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
        <option value="4">选项4</option>
        <option value="5">选项5</option>
        <option value="6">选项6</option>
        <option value="7">选项7</option>
    </select>
    <div>
        <span id="add">选中添加到右边&gt;&gt;</span>
        <span id="add_all">全部添加到右边&gt;&gt;</span>
    </div>            
</div>

<div class="centent">
    <select multiple="multiple" id="select2" name="sel" style="width: 100px;height:160px;">
    </select>
    <div>
        <span id="remove">&lt;&lt;选中删除到左边</span>
        <span id="remove_all">&lt;&lt;全部删除到左边</span>
    </div>            
</div>

使用JQuery，Ajax调用动态填充Select的option选项

//绑定ClassLevel1单击事件
$("#ClassLevel1").change(function() {
    var id = $("#ClassLevel1").val();
    var level2 = $("#ClassLevel2");
    level2.empty();
    $("#ClassLevel3").hide();
    $.ajax({
        url: "./askCommon.ashx?action=getclasslevel&pid=" + id,
        data: {
            "type": "ajax"
        },
        datatype: "json",
        type: "get",
        success: function(data) {
            var json = eval_r(data);
            for (var ind in json) {
                level2.append($("<option value='" + json[ind].id + "'>" + json[ind].typename + "</option>"));
            }

        }
    });
})

W3C最新规定，当checkbox未选中，post不会将值提交到服务器，这就出现了一个变量未初始化的问题，看网上有很多朋友增加隐藏表单的方式解决，如果有多个checkbox的话，会增加很大的代码量。

**我找到一个简单的解决办法：
1、通过jquery将value为1的自动设置为checked选中状态
2、提交时执行getCheckBoxVal函数，遍历所有checkbox，将已经选中的，将值设置为1
3、将未选中的选项value设置0，把checkbox选项设置为checked，保持选中状态，保证提交到服务器。**

此方法同样适用于radio组件。

<script>
    $(document).ready(function() {
            $("#configform").find("input:checkbox[value='1']").prop('checked',true);
    })
    
    
    function getCheckBoxVal(){ //提交前执行，将选中的checkbox的value设置为1，将未选中的checkbox也设置为checked，将值设置为0             
        $("#configform").find('input:checkbox').each(function() { //遍历所有复选框             
            if ($(this).prop('checked') == true) {             
                $(this).val('1');                     
            }
            else{
                $(this).prop('checked',true);
                $(this).val('0');
            }             
        });
    
    }
</script>

如何调用switchery开关按钮

1.导入switchery.css文件

<link rel="stylesheet" type="text/css" 
href="${pageContext.request.contextPath}/switchery/switchery.css">

2.导入switchery.js文件

<script type="text/javascript" src="${pageContext.request.contextPath }/switchery/switchery.js"></script>

3.html代码

<div class="form-group">
    <label for="inputEmail3" class="col-sm-3 control-label" id="serIsCan">是否可用</label>
                    
    <div class="switch"> 
        <input type="checkbox" class="js-switch" checked="">
        <span id="enable_status"></span>
    </div>
</div>

4.初始化switchery

var elem = document.querySelector('.js-switch');
 
//size 设置禁用可用按钮的大小、secondaryColor：设置右边的颜色为红色
var switchery = new Switchery(elem,{size:"large",secondaryColor:"red"});

常见的其它使用方法

设置switchery的禁用、可用样式

/**
 * 设置“禁用/可用”的按钮样式
 * @param switchElement
 * @param checkedBool
 */
function setSwitchery(switchElement, checkedBool) {
        if ((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
            switchElement.setPosition(true);
            switchElement.handleOnchange(true);
        }
    }

当“禁用/可用”按钮发生改变时,获取当前状态

elem.onchange = function() {
//获取按钮的选中状态
isChecked = elem.checked;                                
};

设置按钮的可用、禁用状态

//禁用
switchery.disable();
 
//可用
switchery.enable();

toastr是一个基于Jquery简单、漂亮的消息提示插件，使用简单、方便，可以根据设置的超时时间自动消失。

1、使用很简单，首选引入toastr的js、css文件

<script src="/res/toastr/toastr.min.js"></script>
<link rel="stylesheet" href="/res/toastr/toastr.min.css">

2、效果

3、集成使用

//常规消息提示，默认背景为浅蓝色  
toastr.info("你有新消息了!");  

//成功消息提示，默认背景为浅绿色 
toastr.success("你有新消息了!");  

//警告消息提示，默认背景为橘黄色 
toastr.warning("你有新消息了!");  

//错误消息提示，默认背景为浅红色 
toastr.error("你有新消息了!");  

//带标题的消息框
toastr.success("你有新消息了!","消息提示");  

//另一种调用方法
toastr["info"]("你有新消息了!","消息提示");

4、自定义用法
通过设置自定义参数，可达到不同的效果

自定义参数：
javascript

toastr.options = {  
        closeButton: false,  
        debug: false,  
        progressBar: true,  
        positionClass: "toast-bottom-center",  
        onclick: null,  
        showDuration: "300",  
        hideDuration: "1000",  
        timeOut: "2000",  
        extendedTimeOut: "1000",  
        showEasing: "swing",  
        hideEasing: "linear",  
        showMethod: "fadeIn",  
        hideMethod: "fadeOut"  
    };  

参数说明：
closeButton：false，是否显示关闭按钮（提示框右上角关闭按钮）；
debug：false，是否为调试；
progressBar：false，是否显示进度条（设置关闭的超时时间进度条）；
positionClass，消息框在页面显示的位置

toast-top-left  顶端左边
toast-top-right    顶端右边
toast-top-center  顶端中间
toast-top-full-width 顶端，宽度铺满整个屏幕
toast-botton-right  
toast-bottom-left
toast-bottom-center
toast-bottom-full-width

onclick，点击消息框自定义事件
showDuration: “300”，显示动作时间
hideDuration: “1000”，隐藏动作时间
timeOut: “2000”，自动关闭超时时间
extendedTimeOut: “1000”
showEasing: “swing”,
hideEasing: “linear”,
showMethod: “fadeIn” 显示的方式，和jquery相同
hideMethod: “fadeOut” 隐藏的方式，和jquery相同

文章来源：https://blog.csdn.net/cyh1111/article/details/53141037

第一，JS延迟加载

代码如下:
程序代码
<script language="JavaScript" src="" id="my"></script>
<script>
setTimeout("document.getElementById('my').src='include/php100.php'; ",3000);//延时3秒
</script>

第二,JS最后加载

在需要插入JS的地方插入以下代码:

程序代码
<SPAN id=L4EVER>LOADING...</SPAN>

当然,那个LOADING…你可以换成自己喜欢的小图片.看起来很有AJAX效果呢.

然后在页面最底端插入:

程序代码
<SPAN class=spanclass id=AD_L4EVER>
你的JS代码在这里!</SPAN>
<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML="";</script>

第三,JS最后加载

想要显示广告的位置
<div id="guangg1"></div>

想要显示的广告内容
<div id="ggad1" style="display:none"><script language="javascript"

src="/frontpage/include/php100.js"></script></div>

判断要显示的广告位置是否存在
<script>
function chkdiv(divid){
var chkid=document.getElementById(divid);
if(chkid != null)
{return true; }
else
{return false; }
} 最后就是显示广告了
if (chkdiv('guangg1')) {
document.getElementById('guangg1').innerHTML= document.getElementById('ggad1').innerHTML;
document.getElementById('ggad1').innerHTML="";
}
</script>

<script type="text/javascript">   
//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外 
function banBackSpace(e){         var ev = e || window.event;//获取event对象       
 var obj = ev.target || ev.srcElement;//获取事件源             
  var t = obj.type || obj.getAttribute('type');//获取事件源类型            
   //获取作为判断条件的事件类型    
    var vReadOnly = obj.getAttribute('readonly');     
 var vEnabled = obj.getAttribute('enabled');    
  //处理null值情况    
   vReadOnly = (vReadOnly == null) ? false : vReadOnly;    
    vEnabled = (vEnabled == null) ? true : vEnabled;        
       //当敲Backspace键时，事件源类型为密码或单行、多行文本的，    
     //并且readonly属性为true或enabled属性为false的，则退格键失效    
      var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea")                   && (vReadOnly==true || vEnabled!=true))?true:false;   
          //当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效    
        var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea")                  ?true:false;            
            //判断   
           if(flag2){          return false;      }      if(flag1){             return false;         }     }   
         //禁止后退键 作用于Firefox、Opera
          document.onkeypress=banBackSpace;
        //禁止后退键  作用于IE、Chrome
         document.onkeydown=banBackSpace;
   
//禁止用F5键     
function document.onkeydown()     
{     
    if(event.keyCode==116)     
    {     
        event.keyCode   =   0;     
        event.cancelBubble   =   true;     
        return false;     
    }     
}        </script>