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)