Question

所以我试图把我的jquery放在一个保存为script.js的js文件夹中，然后在我的html中调用该文件。所以我试着在我的css之前调用它，在我的css之后，甚至就在我的结束之上，但我的jquery没有运行。有人能说出我的问题吗？这是我试图在index.php

中调用我的script.js的方法

<!DOCTYPE HTML>
<html>
<head>
<?php include '/php/db.php'; ?>
<link rel="stylesheet" href="style.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

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

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Paprika" rel="stylesheet">



<title>YFC</title>
</head>

<body>


    <div id = "container" method="post">
        <div class="signup">
            <h1>Sign up</h1>
            <form action="/action_page.php">
              <input class="pop" type="text" name="Sname" placeholder="Fill in your name!"><br><br><br>

              <input class="pop" type="password" name="Slastname" placeholder="Fill in your last name!"><br><br><br>

              <input class="pop" type="text" name="Susername" placeholder="Fill in your username!"><br><br><br>

              <input class="pop" type="password" name="Spassword" placeholder="Fill in your password!"><br><br><br>

              <input class="pop" type="password" name="SRpassword" placeholder="Repeat your password!"><br><br><br>
              <input class="sbutton" type="submit" value="Submit">
            </form>
        </div>

        <div class="signin">
            <h1>Log in</h1>
            <form action="/action_page.php" method="post">
              <input class="pop" type="text" name="Lusername" placeholder="Fill in your username!"> <br><br><br>
              <input class="pop" type="password" name="Lpassword" placeholder="Fill in your username!"> <br><br><br>
              <input class="lbutton" type="submit" value="Log in">

            </form>
        </div>

    </div>

</body>
</html>

这是我的jquery代码

$('.pop').mouseenter(function(){
    $(this).css('width',300);
});

$('.pop').mouseleave(fucntion(){
     $(this).css('width',280)                

});

Answer 1

当DOM可供使用时，您需要运行JS代码。现在你正试图在它们存在之前使用.pop元素。

要在jQuery中执行此操作，您可以使用document.ready事件处理程序：

$(function() {
  $('.pop').mouseenter(function() {
    $(this).css('width', 300);
  }).mouseleave(function() {
     $(this).css('width', 280)                
  });
});

但是，这里有几点需要注意，可以提高代码的质量。首先，您不应该在JS代码中放置CSS规则。而是创建类，然后使用任何jQuery类修订方法（addClass()，removeClass()，toggleClass()）根据需要添加/删除它。

此外，您可以使用hover()在mouseenter和mouseleave事件下运行代码。如果你将它与toggleClass()结合起来，你只需要提供一个处理函数：

$(function() {
  $('.pop').hover(function() {
    $(this).toggleClass('hover');              
  });
});

.pop { width: 280px; }
.pop.hover { width: 300px; }

更进一步，你根本不需要使用JS代码。您可以使用CSS的:hover选择器在鼠标悬停时修改元素，如下所示：

.pop { 
  width: 280px; 
  border: 1px solid #C00;
  margin: 2px;
}
.pop:hover { width: 300px; }

<div class="pop">Pop</div>
<div class="pop">Pop</div>
<div class="pop">Pop</div>

Jquery在我的html

1 个答案: