jQuery子窗體如何取得父窗體的元素&兩種查詢元素的方式的區別

方式1：

$("#父窗口元素ID",window.parent.document);
對應javascript版本爲window.parent.document.getElementById("父窗口元素ID");

 

取父窗口的元素方法：$(selector, window.parent.document);
取父窗口的父窗口的元素就能夠用：$(selector, window.parent.parent.document);

相似的，取其它窗口的方法大同小異
$(selector, window.parent.document); // 獲取iframe父窗體元素
$(selector, window.opener.document); // 獲取經過windows.open()打開的父窗體
$(selector, window.dialogArguments.document); // 獲取經過 showModelDialog()打開的父窗體

方式2：

// 獲取到當前目標對象

var  obj = document.getElementById( "theId" );

// 獲取到當前目標對象的直接父級對象元素

var  parentElement = obj.parentElement;

例子：在easyui-dialog中嵌入了iframe

父窗體JSP頁面

<div id="uploadfile-dlg" class="easyui-dialog" closed="true" buttons="#edit-btns-SysFile" modal="true">

<iframe id="iframe" src="" width="98%" height="98%" frameborder="0" ></iframe>

</div>

<div id="version-win" class="easyui-dialog" closed="true" buttons="#edit-btns-SysFile" modal="true">

</div>

<script type="text/javascript">

function addSysFile(){

$("#iframe").attr("src", '<%=request.getContextPath() %>'+"/file/formadd.do"+new Date());

$('#uploadfile-dlg').dialog('open').dialog({

   title: '添加文件',

   width: 500,

   height: 400,

   closed: false,

   cache: false,

   // iframe: true,

   // href: '<%=request.getContextPath() %>'+"/file/formadd.do",

   modal: true

});

}

子窗體JSP頁面

<div id="edit-btns-SysFile" style="text-align:center;">

<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="uploadPdfMethod()">提交</a>

<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" 

onclick="javascript:if (parent){parent.$('#uploadfile-dlg').dialog('close');} if (opener){opener.$('#uploadfile-dlg').dialog('close');}">取消</a>

</div>

NOTE：在提交事件時：

1. javascript : parent.document.getElementById("uploadfile-dlg").dialog('close'); 報錯：「getElementById.dialog is not a function」

2. function cancelMethod() {

      var parentDiv = window.parent.document.getElementById("uploadfile-dlg");

       alert(parentDiv);

   }

說明取到了div，卻沒法關閉窗口，用jquery的$（）卻能夠關閉。因而發現：

jquery中的$("#id")和document.getElementById("id")獲得的效果是不同的經過測試獲得:

 

1. alert($("#id"))獲得的是[object Object]

2. alert(document.getElementById("id"))獲得的是[object HTMLDivElement]

3. alert($("#id")[0])或alert($("#id").get(0))獲得的是[object HTMLDivElement]

 

所以document.getElementById("id")等同於($("#id")[0]或($("#id").get(0)