-2

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

登录表单截图

这是我的 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);
    });
});
4

4 回答 4

6

你需要包括 jQuery！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
于 2013-08-08T17:55:48.130 回答
3

包括指向 jQuery 库的链接：

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

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

于 2013-08-08T17:56:21.363 回答
1

你关闭你的脚本标签太早了

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

应该

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

于 2013-08-08T18:00:59.073 回答
0

文本框的这种居中对齐可以通过 css 来完成。如果您想使用 jQuery，请下载并包含在您的页面中或直接添加<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>. 然后你就可以使用jQuery了。如果您让我们知道您想做什么，那么我们可以提出一些建议。

于 2013-08-08T18:01:45.983 回答