分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jQuery：在DOM之外选择和操作html元素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

据我所知，只有已经加载到DOM中的对象才能使用选择器进行操作。这在下面的示例中说明，当点击按钮时，它的点击处理程序未成功尝试选择要加载的页面中的元素，然后更改它的HTML。我猜想，因为在链接页面加载到DOM之前触发点击处理程序，选择器不会影响元素。

我的问题是，是否有任何方法来实例化一个外部的html块，然后在将其插入DOM之前对其进行操作。

script_1.js：

$(document).ready(function () {
    $("#TESTButton").click(function () {
        $("#externalPageDiv").html("Hello world");
    });
});

外部页面html：

<head>
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script src="script_1.js"></script>
</head>

<body>
    <div data-role="page" id="externalPage" data-add-BACk-btn="true">
        <div data-role="content" id="externalPageContent">
            <div id="externalPageDiv"></div>external page</div>
    </div>
</body>

主页Html：

<head>
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script src="script_1.js"></script>
</head>

<body>
    <div data-role="page" id="internalPage_1" data-add-BACk-btn="true">
        <div data-role="content" id="internalPageContent_1">
            <a href="externalPage.html" id="TESTButton" data-role="button" rel="external">Page Change</a>
        </div>
    </div>
    <div data-role="page" id="mainPage" data-add-BACk-btn="true">
        <div data-role="content" id="mainPageContent">Main Page</div>
    </div>
</body>

解决方法

我正在纠正我的错误评论。是的，你可以这样做，但阅读jQuery文档，据说代码被插入到DOM http://api.jquery.com/jQuery/#jQuery2中。所以即使是下面的代码似乎也没有在DOM中插入任何东西，它确实被插入了。

尝试这个：

var codeToProcess = "<div>" +
                    "    <div id='myDiv1'>a</div>" +
                    "    <div id='myDiv2'>b</div>" +
                    "    <div id='myDiv3'>c</div>" +
                    "</div>";

var $toProcess = $( codeToProcess );
$toProcess.find( "div" ).addClass( "processed" );

// getTing by id before insertion
alert( $toProcess.find( "#myDiv1" ).html() );
alert( $( "#myDiv1" ).html() ); // this will return null,since the divs
                                // were not yet added to the document

$toProcess.appendTo( "#container" );
// or $( "#container" ).html( $toProcess );

// getTing by id after insertion
alert( $( "#myDiv2" ).html() );