如何使JQuery工作？

Question

嗨:)我一直在玩javascript，现在想查看JQuery。 我仍然需要学习很多东西，所以请保持亲切:)我从网络上获取了一个代码，现在我试图使其正常工作。 Jsfiddle可以工作，只是不想在我的服务器上工作。 这是代码：

<!DOCTYPE html> 

<html lang="en"> 

<head>
<meta charset="UTF-8">

<script type="text/javascript" src="http://localhost/play/jquery-2.1.1.min.js"></script>

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>

<script type="text/javascript" language="javascript">
function getNum(element, attrPrefix) {
    //set prefix, get number
    var prefix = attrPrefix;
    var num = element.attr("id").substring((prefix.length));
    return num;
}

$(":checkbox").change(function() {
    var num = getNum($(this), "checkbox_");
    if ($(this).is(":checked")) {
        $("#color_" + num).val($(this).val());
    } else {
        $("#color_" + num).val("");
    }
});

</script>

</head>

<body>

<p>Input boxes are populated with value of checkbox when checkbox is checked.</p>

<p><input type="checkbox" id="checkbox_01" name="checkbox" value="red was checked" />red 01<br />
    <input type="checkbox" id="checkbox_02" name="checkbox_02" value="green was checked" />green 02<br />
    <input type="checkbox" id="checkbox_03" name="checkbox_03" value="blue was checked" />blue 03</p>

<table>
    <tr>
        <td>color 01<input type="text" id="color_01" name="color_01" /></td>
    </tr>
    <tr>
        <td>color 02<input type="text" id="color_02" name="color_02" /></td>
    </tr>
    <tr>
        <td>color 03<input type="text" id="color_03" name="color_03" /></td>
    </tr>
</table>


<body>
</html>

无论我将src更改为什么，它都不想使JQuery变得麻烦。 我将min文件直接复制到名为play的wamp prjtect目录中。 我用了：

<script type="text/javascript" src="http://localhost/play/jquery-2.1.1.min.js"></script>

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>

请让我知道我可以做些什么！ 在此先感谢:)注意：我是网络开发人员的初学者;）

Answer 1

将您的代码包装在DOM ready处理程序中。 然后删除任何一个jquery参考文件，否则使用jquery CDN库。

<script src="http://code.jquery.com/jquery-latest.min.js"/>

码：

$(document).ready(function(){
function getNum(element, attrPrefix) {
    //set prefix, get number
    var prefix = attrPrefix;
    var num = element.attr("id").substring((prefix.length));
    return num;
}
$(":checkbox").change(function() {
    var num = getNum($(this), "checkbox_");
    if ($(this).is(":checked")) {
        $("#color_" + num).val($(this).val());
    } else {
        $("#color_" + num).val("");
    }
});
});

演示：

http://jsfiddle.net/9fLXL/

Answer 2

请尝试将您的js / jquery代码包装在

$( document ).ready(function() {
    //your code here
});

要么

$(function() {
    //your code here
});

如何使JQuery工作？

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-07-26 16:51:33

解决方案2
0 2014-07-26 16:59:45

如何使JQuery工作？

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-07-26 16:51:33

解决方案2 0 2014-07-26 16:59:45

解决方案1
0 已采纳 2014-07-26 16:51:33

解决方案2
0 2014-07-26 16:59:45