Javascript 如何使用JQuery从另一个文档中的H1交换H1元素_Javascript_Jquery_Html

Javascript 如何使用JQuery从另一个文档中的H1交换H1元素

javascript jquery html

Javascript 如何使用JQuery从另一个文档中的H1交换H1元素,javascript,jquery,html,Javascript,Jquery,Html,请容忍我，因为我是学生。我的导师让我们观看了5个YouTube视频，现在希望我们使用JQuery而不是标准JavaScript进行编程。我要做的就是将一个元素与另一个文件中的元素交换以下是我的HTML代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Testing JQuery</title> <script s

请容忍我，因为我是学生。我的导师让我们观看了5个YouTube视频，现在希望我们使用JQuery而不是标准JavaScript进行编程。我要做的就是将一个元素与另一个文件中的元素交换

以下是我的HTML代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Testing JQuery</title>
    <script src="jquery-1.7.2.min.js"></script>
  </head>
  <body>
    <h1 id="header">Testing JQuery</h1>
    <p id ="dummy">Lorem Ipsum </p>
    <script src="changes.js"></script>
    <form name="input" action="changes.js">
    <input type="button" value="Change the Header">
    </form>
  </body>
</html>

第三个文件名为greeting.html，它只包含以下内容：

<h1 id="ajax">Hello from jQuery with AJAX</h1>

来自jQuery和AJAX的Hello

若要替换元素，

load（）

将无法工作，因为它会在旧的H1中加载新的H1，它不会替换它，因此您必须使用

$。获取并自己执行：
$(document).ready(function() {
    $('input').on('click', function() {
        $.get({
             url : 'greeting.html'
        }).done(function(data) {
             var h1 = $('<div />').append(data).find('h1#ajax');
             $('#header').replaceWith(h1);
        });
       return false;
    });
}); 

$（文档）.ready（函数（）{
$（'input'）。在（'click'，function（）上{
美元({
url:'greeting.html'
}).完成（功能（数据）{
var h1=$（''）.append（data.find（'h1#ajax'）；
$（“#标题”）。替换为（h1）；
});
返回false；
});
}); 

这就是你所需要的。扔掉所有其他的东西。
你不需要声明url
，也不需要返回false。
你能描述一下你遇到的问题吗？你试过运行这个吗？因为$（'#header'）.load（greeting.html+'#ajaxh1'）
是非法语法。@KevinB-是的，我注意到了，我喝醉了，很困惑，抱歉。只需从该函数中删除+
和h1，它就可以正常工作了。不过，您需要在其周围加引号，目前文件名周围没有引号。如果您注意到表单元素中的操作声明，他希望在调用脚本时单击输入来完成此操作。谢谢Andreas！那很有效！我知道这是我的语法错误，但我找不到！
$(document).ready(function() {
    $('input').on('click', function() {
        $.get({
             url : 'greeting.html'
        }).done(function(data) {
             var h1 = $('<div />').append(data).find('h1#ajax');
             $('#header').replaceWith(h1);
        });
       return false;
    });
}); 

$('#header').load( 'greeting.html #ajax' );