当前位置:首页 > 编程教程 > jQuery技术文章 > JQueryiframe页面操作父页面中的元素与方法(实例讲解)

实例分析JQueryiframe页面操作父页面中的元素与方法

  • 发布时间:
  • 作者:码农之家
  • 点击:168

这篇文章主要知识点是关于JQuery、父元素、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery实战从入门到精通
  • 类型:jQuery大小:189.1 MB格式:PDF作者:未来科技
立即下载

JQueryiframe页面操作父页面中的元素与方法(实例讲解)

1)在iframe中查找父页面元素的方法:
$('#id', window.parent.document)

2)在iframe中调用父页面中定义的方法和变量:
parent.method
parent.value

3)实例

1.父页面

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IframeDemo._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script language="javascript" type="text/javascript">
        var hello = 'hello';
        function getHelloWorld() {
            alert('hello world');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="default" >default.aspx</div>
    <iframe id="iframeid" src="IFrame.aspx" ></iframe>
    </div>
    </form>
</body>
</html>

2.子页面
 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IFrame.aspx.cs" Inherits="IframeDemo.IFrame" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function() {
            //在iframe中查找父页面元素
            alert($('#default', window.parent.document).html());
            //在iframe中调用父页面中定义的方法
            parent.getHelloWorld();
            //在iframe中调用父页面中定义的变量
            alert(parent.hello);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="iframe">
        IFrame.aspx
    </div>
    </form>
</body>
</html>

 

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.205336

jQuery获取父元素及父节点的方法小结

本文实例总结了jQuery获取父元素及父节点的方法。分享给大家供大家参考,具体如下: jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子, ul class="parent1"lia href="#" id="item1"jquery获取父节点/a/li lia href="#"jquery获取父元素/a/li /ul 我们的目的是通过 id 为 item1 的便签a取到 class 为 parent1 的ul元素,有以下几种方法: 1、parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。 你可以使用可选的表达式来筛选。 代码如下 $('#item1').parent().parent('.parent1'); 2、:parent 匹配含有子元素或者文本的元素 代码如下 $('li:parent'); 3、parents([expr]) 取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。 代码如下 $('#items').parents('.pa……

网友NO.958443

jquery层级选择器(匹配父元素下的子元素实现代码)

实例如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml" head title层级 /title meta http-equiv="Content-Type" content="text/html;charset=UTF-8" / script type="text/javascript" src="jquery-1.7.1.min.js"/script script type="text/javascript" /* ancetor descendant:匹配祖先元素下的后代元素 parentchild:匹配父元素下的子元素 prev+next:匹配前一个元素后的下一个元素,必须是挨着的 prev~siblings:匹配前一个元素后的所有平辈元素 */ window.onload=function(){ $('#btnOk').click(function(){ //匹配父元素下的子元素 $('#indexdiv').html('php'); }); }; /script /head body div id='index' divdiv1/div form divdiv2/div !--为index下div的孙子辈元素-- divdiv3/div!--为index下div的孙子辈元素-- /form divdiv4/div divdiv5/div /div divyang/div !--该元素不是在id=index下的div中,不是其后代元素;是兄弟……

网友NO.638203

jquery查找父元素、子元素(个人经验总结)

使用js或者jquery查找父元素、子元素经常遇到。可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents() parent() 向下查找子元素 用到的方法:find() children() js用的是 children[] 属性 html代码 !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" titlejquery查找父元素子元素/title /head body div class="div1" id="div1" name="mydiv" p段落1 查找父元素/p table id="table1" tbody id="tbody1" tr td id="mytd1"11closest()向上查找最近的元素(返回零个或一个元素的 jQuery 对象)/td /tr tr id="mytr2" td id="mytd2"21parent()方法/td /tr tr td id="mytd3"31parent("选择器")方法/td /tr /tbody /table /div hr div id="div2" name="mydiv" p段落2 查找子元素/p table id="table2" tbody tr td id="se……

网友NO.386770

jQuery获取父元素节点、子元素节点及兄弟元素节点的方法

本文实例讲述了jQuery获取父元素节点、子元素节点及兄弟元素节点的方法。分享给大家供大家参考,具体如下: 先来看这段html代码,整个取节点(父、子、兄弟等)的方法都是围绕这段代码来的: ul class="par" li id="firstli" h3 class="title"条目一/h3 ul class="par" li id="dwtedx"第一项/li li第二项/li /ul /li/ul JQUERY 父节点的获取: jquery获取父元素方法比较多、比如parent()、parents()、closest()、find,first-child这些都能帮你实现查找父节点、子节点、兄弟节点 如我们利用parent()来获取父节点 $("#dwtedx").parent().parent();//取得id为firstli的li节点$("#dwtedx").parent().parent(".par");//取得最上面的ul节点$("#dwtedx").parent(".par");//取得向上第一层的ul节点 以上是通过parent的方式来获取父节点的、大家可以根据自己项目需要来选择方法哈 下面、我们主要来讲一下 parents() 和 closest() 两个方法的区别……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com