Question

我对jQuery相对较新，并且很难从外部js文件中获取jQuery datepicker。

最初我将脚本创建为一个函数，但相信通过这样做我限制了范围，并且在函数外部无法访问它。我也尝试将其定义为函数（并命名函数），然后使用$(document).ready调用它。无论如何，我无法让它发挥作用。

我的外部js脚本名为scripts.js，其内容如下：

$( "#from" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 2,
    showOn: "both",
    buttonImageOnly: true,
    buttonImage: "images/calendar.gif",
    dateFormat: "mm/dd/yy",
    altField: "#forminp1",
    altFormat: "yyddmm",
    onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
    }
});
$( "#to" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 2,
    showOn: "both",
    buttonImageOnly: true,
    buttonImage: "images/calendar.gif",
    dateFormat: "mm/dd/yy",
    altField: "#forminp2",
    altFormat: "yyddmm",
    onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
    },
});

HTML是：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Datepicker - Select a Date Range</title>
    <link rel="stylesheet" href="css/jquery-ui-1.10.4.custom.css" type="text/css">
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-ui-1.10.4.custom.js"></script>
    <script src="js/scripts.js"></script>

</head>
<body>
    <label for="from">From</label>
    <input type="text" id="from" name="from">
    <label for="to">to</label>
    <input type="text" id="to" name="to">
    <p></p>
     <input type="text" id="forminp1" size="30">&nbsp;<input type="text" id="forminp2" size="30">
</body>
</html>

如何将jQuery代码保持在外部，但在页面加载时能够正常运行？

Answer 1

将整个文件包装在jQuery document.ready函数中，如this。

jQuery文档就绪

基础知识是您需要在页面加载时运行的所有内容

$( document ).ready(function(){ ... });

或快捷方式

$( function(){ ... });

有关详细信息，请参阅docs。

页面底部的脚本

您也可以将<script src="..."></script>放在页面底部，</body>标记的正上方。

这通常被认为是最好的做法。

从外部文件调用jQuery datepicker

1 个答案:

jQuery文档就绪

页面底部的脚本