Javascript 转换为Jquery

今天早上我正试着做最简单的事情，但我的大脑无法工作。。在过去的几周里，我一直在学习基本的javascript和Jquery。我有一段javascript代码，我想将其转换为jquery，我希望我的javascript不引人注目

代码片段是

<p>
    This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a>
</p>
<div id="light" class="white_content">
    This is the lightbox content. 
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
</div>
<div id="fade" class="black_overlay"></div>

这是主要内容。要显示灯箱，请单击

这是lightbox内容。

---

我正在努力使这个灯箱更有效率，但似乎无法解决如何转换今天。。任何帮助都感谢来自

javascript:void（0）的行为返回false

复制code>

document.getElementById（'light'）

可以重新编写为

$（“#light”）

您需要将类或ID添加到链接中，以便将它们作为目标

$(document).ready(function(){
    $("a").click(function() { // replace this selector as appropriate
        // do stuff here - lookup css in the JQuery docs
        return false; // prevents the link's default action - see also e.preventDefault() in the docs
    });
});

---

javascript的行为：void（0）返回false

复制code>

document.getElementById（'light'）

可以重新编写为

$（“#light”）

您需要将类或ID添加到链接中，以便将它们作为目标

$(document).ready(function(){
    $("a").click(function() { // replace this selector as appropriate
        // do stuff here - lookup css in the JQuery docs
        return false; // prevents the link's default action - see also e.preventDefault() in the docs
    });
});

将您的HTML更改为：

<p>This is the main content. To display a lightbox click
   <a href="#" id="a_show">here</a></p>

<div id="light" class="white_content">This is the lightbox content.
<a href="#" id="a_close">Close</a></div>
<div id="fade" class="black_overlay"></div> 

或者您可以使用

fadeIn

/

fadeOut

jQuery方法，以获得更好的视觉效果-如果您想要即时效果，请使用

show（）

/

hide（）

：

$(document).ready(function() {
  $("#a_show").click(function(e) {
      e.preventDefault(); // Prevent's the click from firing - like JavaScript:void(0)
      $("#light").fadeIn();
      $("#fade").fadeIn();
  });

  $("#a_close").click(function(e) {
      e.preventDefault(); // Prevent's the click from firing - like JavaScript:void(0)
      $("#light").fadeOut();
      $("#fade").fadeOut();
  });
});

第一个示例是like for like，可用于通过jQuery更改其他CSS属性-但是，如果要显示/隐藏或淡出元素，请使用第二个示例中的原生jQuery方法。

将HTML更改为：

<p>This is the main content. To display a lightbox click
   <a href="#" id="a_show">here</a></p>

<div id="light" class="white_content">This is the lightbox content.
<a href="#" id="a_close">Close</a></div>
<div id="fade" class="black_overlay"></div> 

或者您可以使用

fadeIn

/

fadeOut

jQuery方法，以获得更好的视觉效果-如果您想要即时效果，请使用

show（）

/

hide（）

：

$(document).ready(function() {
  $("#a_show").click(function(e) {
      e.preventDefault(); // Prevent's the click from firing - like JavaScript:void(0)
      $("#light").fadeIn();
      $("#fade").fadeIn();
  });

  $("#a_close").click(function(e) {
      e.preventDefault(); // Prevent's the click from firing - like JavaScript:void(0)
      $("#light").fadeOut();
      $("#fade").fadeOut();
  });
});

---

第一个示例是like for like，可以用于通过jQuery更改其他CSS属性-但是，如果要显示/隐藏或淡入淡出元素，请使用第二个示例中的本机jQuery方法。

而不是javascript

style.display='none'，'block'

jQuery用户

hide（），show（）

方法

$(document).ready(function(){
    $("a").click(function() { 

$("#fade").hide();
$("#light").show();

        return false;
    });
});

---

但要理解所有这些，您应该首先开始学习，

而不是javascript

style.display='none'，'block'

jquery用户

Hide（），show（）方法

$(document).ready(function(){
    $("a").click(function() { 

$("#fade").hide();
$("#light").show();

        return false;
    });
});

但是要理解所有这些，您应该首先开始学习，
假设您在第一个标签上有一个id=“show”，在第二个标签上有一个id=“hide”

$("#show").click(function(e){
    e.preventDefault()
    $("#light, #fade").show()
})
$("#hide").click(function(e){
   e.preventDefault()
   $("#light, #fade").hide()
})

现在，这不是像您的示例那样的内联脚本，所以您需要将其放置在标记或外部脚本文件中，然后使用标记将其拉入

学习jquery时，我可以推荐视频
让我们假设您在第一个标签上有一个id=“show”，在第二个标签上有一个id=“hide”

$("#show").click(function(e){
    e.preventDefault()
    $("#light, #fade").show()
})
$("#hide").click(function(e){
   e.preventDefault()
   $("#light, #fade").hide()
})

现在，这不是像您的示例那样的内联脚本，所以您需要将其放置在标记或外部脚本文件中，然后使用标记将其拉入

在学习jquery时，我可以推荐视频
Hmmm。似乎有几个比我强

以下是我对其价值的回答：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#a1").click(function() {
            $('#light').show();
            $('#fade').show();
        });
        $("#close").click(function() {
            $('#light').hide();
            $('#fade').hide();
        });
    });
    </script>
</head>
<body>
    <p>This is the main content. To display a lightbox click <a id="a1" href="#">here</a></p>
    <div id="light" class="white_content" style="display:none">This is the lightbox content. 
    <a id="close" href = "#">Close</a>
    </div>
    <div id="fade" class="black_overlay"></div>
</body>
</html>


测验
$（文档）.ready（函数（）{
$（“#a1”）。单击（函数（）{
$（'#light'）.show（）；
$（'#淡入'）.show（）；
});
$（“#关闭”）。单击（函数（）{
$（'#light'）.hide（）；
$（“#淡入”）.hide（）；
});
});
这是主要内容。要显示灯箱，请单击

这是lightbox内容。

如果你想创造一个灯箱，为什么要重新发明轮子？如果你搜索一下，你会发现一些预构建的jQuery插件

嗯，似乎有几个人比我抢先一步

以下是我对其价值的回答：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#a1").click(function() {
            $('#light').show();
            $('#fade').show();
        });
        $("#close").click(function() {
            $('#light').hide();
            $('#fade').hide();
        });
    });
    </script>
</head>
<body>
    <p>This is the main content. To display a lightbox click <a id="a1" href="#">here</a></p>
    <div id="light" class="white_content" style="display:none">This is the lightbox content. 
    <a id="close" href = "#">Close</a>
    </div>
    <div id="fade" class="black_overlay"></div>
</body>
</html>


测验
$（文档）.ready（函数（）{
$（“#a1”）。单击（函数（）{
$（'#light'）.show（）；
$（'#淡入'）.show（）；
});
$（“#关闭”）。单击（函数（）{
$（'#light'）.hide（）；
$（“#淡入”）.hide（）；
});
});
这是主要内容。要显示灯箱，请单击

这是lightbox内容。

如果你想创造一个灯箱，为什么要重新发明轮子？如果你搜索一下，你会发现一些预构建的jQuery插件

没什么，我不知道从哪里开始，只是一些正确方向的指针将有助于为文本块“here”使用一个span，然后指定一个类或id（我认为id可能是合适的）。使用jQuery将单击事件处理程序分配给它。可能对“关闭”文本也可以这样做。感谢所有回答的人，非常有用。没有什么，我不知道从哪里开始，只是一些正确方向的指针将有助于为文本块“此处”使用一个跨距，然后指定一个类或id（我认为id可能合适）。使用jQuery将单击事件处理程序分配给它。对于“关闭”文本可能也可以这样做。感谢所有回答过的人，非常有帮助，或者只是jQuery的
e.preventDefault（）
方法-您需要将
e
（或您希望的任何名称）传递到
点击
$（“奶酪”）。点击（函数（e）{…东西…；e.preventDefault（）}
-如果你要使用jQuery，你可以使用全部！或者只是jQuery的
e.preventDefault（）
方法-你需要将
e
（或者你想要的任何名称）传递到
点击
，比如：
$（“奶酪”）。点击（函数（e）{…东西…；e.preventDefault（）}
-如果你打算使用jQuery，你也可以全部使用！没问题-如果你知道一些JavaScript和CSS，那么你在jQuery中的状态非常好。选择器是真正的把戏-
$（“element.class\id”）
。我希望，您能看到上面的内容，是我们将点击绑定到元素id，
#a#u show
或
#a#u close
，然后我们可以执行jQu