Ben*_*rce 21 html jquery dom jquery-selectors
据我所知,只有加载到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>
dav*_*tto 16
我纠正了错误的评论.是的,你可以做这样的事情,但是阅读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() );
jsFiddle:http://jsfiddle.net/davidbuzatto/me7T3/
编辑:
要从外部文件插入代码,可以使用load函数.您可以在此处看到一个示例:http://jsfiddle.net/davidbuzatto/zuFsc/请注意,在此示例中,我使用echo服务os jsFiddle来模拟外部文件.看看这里如何在Java中将视图文件输出为ajax响应？在这里http://api.jquery.com/load/
您可以使用javascript手动创建未插入DOM层次结构的DOM元素,并且可以在将它们插入DOM之前根据需要对其进行操作.
但是,如果您在解析HTML页面之前尝试操作由页面HTML创建的DOM元素,则无法执行此操作.DOM元素在那时不存在,因此除非您按照第一段中的描述手动创建它们,否则无需操作.
一些操作仅在插入DOM hieararchy如DOM元素工作document.getElementById(),但其它方法也可以在一块DOM中不是在主层次结构例如可以使用item.getElementsByClassName()其中item在DOM层次是DOM元素不.
在jQuery中,默认上下文是文档,因此一个简单的选择器操作就像$(".foo")只搜索DOM文档层次结构中的DOM元素一样.但是,如果您传递特定的上下文,$(".foo", item)那么jQuery选择器将搜索该上下文,而不是主文档.