js的extend和fn.extend使用

$.fn.extend扩展的是一个jQuery对象函数,$.extend扩展的是一个jQuery全局函数

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="../../resources/js/jquery-2.0.0.js"></script>

<script type="text/javascript" src="../../resources/customjs/regexp.js"></script>

</head>

<body>

<input id="time" type="button" name="time" value="输入日期" /><br/>

<input id="addData" name="" type="button" value="添加数据"/>

</body>

<script type="text/javascript">

$("#time").click(function(){

    var inputDate = prompt("请输入日期:");

    var flag = Validate.validateDate(inputDate);

    console.log(flag);

});



$("#addData").click(function(){

    //$.fn.extend jQuery对象函数

    $(this).inputDataToHtml();    

    }

);

//jQuery全局函数

$.inputDataAsTitle();



</script>

</html>

regexp.js

var Validate = {

    //验证格式为yyyy-MM-dd的日期

    validateDate : function(inputDate){

        var r = inputDate.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); 

        if(r==null) 

            return false; 

        var d= new Date(r[1], r[3]-1, r[4]); 

        return  (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);

    }

}



$.fn.extend({

    inputDataToHtml : function(){

        var data = prompt("请输入数据:");

        if($("#list").length==0&&$("#list ol").length==0){

            $(this).after("<div id='list'></div>");

            $("#list").append("<ol></ol>");

        }

        $("#list ol").append("<li>"+data+"</li>");

    }

})



$.extend({

    inputDataAsTitle : function(){

        var data = prompt("请输入标题:");

        $("body").append("<h1>标题为 : <font color='green'>"+data+"</font><h1>");

    }

});

你可能感兴趣的:(extend)