Question

我正在为一位朋友做一个小项目。我最近在Codecademy上学习了jQuery，这是我第一次将它整合到一个网页中。但是，它不起作用，我不知道为什么。另外，如果有人可以指导我如何使文本框居中等，看起来像下面链接的图像，请告诉我。

screenshot of login form

这是我的index.html：

<!DOCTYPE html>
<html>
    <head>
    <title>DNA Translator</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script> type="text/javascript" src="script.js"</script>
    <script></script>
    </head>
    <body>
        <div id="content">
            <form>
                DNA: <input type="text" name="dna" placeholder="DNA"><br>
                mRNA: <input type="text" name="mrna" placeholder="mRNA"><br>
                tRNA: <input type="text" name="trna" placeholder="tRNA"<br>
                Amino Acids: <input type="text" name="aminoAcids" placeholder="Amino Acids"<br>
            </form>
            <button id="button" type="button">Tanslate</button>
        </div>
    </body>
</html>

这是我的stylesheet.css：

h2 {
    font-family:arial;
}

form {
    display: inline-block;
}

#content {
  margin-top: 200px;
  margin-left: auto;
  margin-right: auto;
}

#button{
    opacity: 0.7;
    display: inline-block;
    height:25px;
    width:300px;
    background-color:#293FE3;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius: 5px;
    text-align:center;
    margin-top:2px;
    /*display: block;*/
    margin: 30px auto;
}

input[type="text"] {
    display:/*block;*/ inline-block;
    height:20px;
    padding:4px 6px;
    margin-bottom:10px;
    font-size:14px;
    line-height:20px;
    color:#555;
    vertical-align:middle;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px
    background-color:#fff;
    border:1px solid #ccc;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition:border linear .2s,box-shadow linear .2s;
    -moz-transition:border linear .2s,box-shadow linear .2s;
    -o-transition:border linear .2s,box-shadow linear .2s;
    transition:border linear .2s,box-shadow linear .2s
}

这是script.js：

$(document).ready(function() {
    $('#button').mouseenter(function() {
        $('#button').fadeTo('slow', 1);
    });
    $('#button').mouseleave(function() {
        $('#button').fadeTo('slow', 0.7);
    });
});

Answer 1

你需要包含jQuery！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

Answer 2

包含jQuery库的链接：

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

确保在调用任何.js文件之前执行此操作。

Answer 3

您过早关闭脚本标记

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

应该是

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

Answer 4

您可以通过CSS执行文本框的中心对齐。如果您想使用jQuery，请下载并包含在您的页面上或直接添加<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>。然后你就可以使用jQuery了。如果您告诉我们，我们可以提出建议。

为什么jQuery不能在我的项目中工作？

4 个答案: