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应用时非常有用。