jQuery子页面操作父页面元素及交互实现
"这篇文章主要介绍了如何在jQuery中实现子页面获取和操作父页面的元素,以及子页面向父页面添加元素的功能。通过JavaScript的window.opener对象和对话框插件artDialog,我们可以实现跨页面的交互。" 在网页开发中,有时我们需要在子页面中操作父页面的元素,例如获取或修改父页面的某些内容。jQuery提供了便利的方法来实现这样的功能,特别是在配合使用对话框插件如artDialog时。在这个例子中,我们看到一个子页面通过window.opener对象访问并操作父页面的元素。 首先,代码中的`artDialog/window.opener.document.getElementById("date").innerHTML;`这一行,是子页面获取父页面元素的方式。`window.opener`是一个全局对象,它引用了创建当前窗口(或弹出对话框)的窗口。通过这个对象,我们可以访问到父窗口的DOM,并获取其指定ID的元素内容。在这里,它获取了父页面中ID为"date"的元素的innerHTML。 接下来,子页面向父页面添加元素的过程如下: 1. 首先,子页面通过`split(',')`将从父页面获取的日期字符串分解成数组。 2. 然后,遍历数组,使用`$("#addDate").append()`向子页面的特定元素(ID为"addDate"的元素)添加新的列表项,每个列表项包含日期值和一个删除按钮(class为"x"的a标签)。 3. 当用户点击确认添加按钮(ID为"confirmAdd"的元素)时,会触发一个事件处理函数。在这个函数中,代码首先获取所有新添加的日期列表项,然后进行唯一性检查,防止重复添加相同的日期。如果发现重复,弹出警告对话框并停止执行。 4. 如果日期没有重复,将所有选定的日期组合成一个字符串,并移除最后一个逗号。接着,通过`parentWin.addDate(dateStr);`调用父页面的一个函数(名为`addDate`),将这些日期传递给父页面。 5. 最后,关闭当前的artDialog对话框。 在父页面,有一个名为`addDate`的函数,它接收从子页面传递过来的日期字符串,并将其设置到父页面ID为"date"的元素的innerHTML,实现了子页面向父页面添加元素的效果。 这个示例展示了如何利用jQuery和JavaScript的特性实现跨页面交互,尤其是在使用对话框插件时,可以有效地在打开的子页面和父页面之间共享数据和操作。这在开发复杂、多层交互的Web应用时非常有用。
var offDays = artDialog/window.opener.document.getElementById("date").innerHTML;
var offDay = new Array();
offDay = offDays.split(',');
for(var i=0;i<offDay.length;i++){
if(offDays != null && offDays != ""){
$("#addDate").append('<li><span>'+offDay[i]+'</span><a class="x" href="#"></a></li>');
}
}
//向父页面添加元素
$("#confirmAdd").click(function(){
var date = $("#addDate li");
var dateStr="";
for(var i=0;i<date.size();i++){
for(var j=0;j<i;j++){
if(date.eq(i).children().eq(0).text()==date.eq(j).children().eq(0).text()){
art.dialog.alert("不能重复选择日期!");
return false;
}
}
dateStr+=date.eq(i).children().eq(0).html()+",";
}
//去掉最后一个逗号
if(dateStr!=null&&dateStr!=""&&dateStr.length>0){
dateStr = dateStr.substring(0,dateStr.length-1);
}
var parentWin=artDialog.opener;
parentWin.addDate(dateStr);
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 13
- 资源: 7
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展