javascript例子教程20220614整理.pdf

在JavaScript编程中，有多种方法可以操作HTML元素，包括修改元素的class属性、执行页面重定向以及实现窗口间的通信。以下是对这些知识点的详细解释： 1. 修改HTML元素的class属性： 在JavaScript中，要修改HTML元素的class，我们需要使用`className`属性，而不是直接写`class`，因为`class`是JavaScript的保留字。例如，在提供的实例中，有两个函数`over()`和`out()`，它们分别用于当鼠标进入和离开指定元素时改变元素的class。通过`getElementById`方法获取ID为`testPara`的段落元素，然后将`className`设置为不同的值，如`"testOver"`或`"testNormal"`，从而应用不同的CSS样式。 2. JavaScript页面重定向： 页面重定向可以通过两种方式实现：直接修改`location.href`或使用`location.replace`方法。 - `location.href`赋值：当你想让页面跳转到新的URL时，可以直接给`location.href`赋值，如`location.href = "http://www.cainiao8.com/"`。这种方式下，用户可以通过浏览器的后退按钮返回之前的页面。 - `location.replace`：这个方法不仅重定向页面，还会替换当前的历史记录条目，因此用户无法通过后退按钮返回原始页面。例如：`location.replace("http://www.cainiao8.com/")`。 3. JavaScript弹出窗口及窗口间的通信： 使用`window.open`方法可以打开一个新的浏览器窗口。在提供的例子中，`test()`函数创建了一个宽300像素、高300像素的新窗口，其URL为`04_popup_test.html`。这个新窗口与父窗口之间可以通过JavaScript进行通信，例如通过`window.opener`属性访问父窗口的对象，或者使用`window.postMessage`方法在窗口间传递消息。 4. 使用JavaScript对象作为关联数组： 在HTML中，经常需要处理用户的选择，例如改变元素的样式。在这个例子中，有一个`select`元素，用户可以选择不同的背景色。当用户选择一个选项时，JavaScript函数会被调用，通过`getElementById`获取`selectColor`元素，然后读取选中的`option`的`value`属性来获取颜色值。这个颜色值可以存储在一个JavaScript对象中，以便作为关联数组使用，这样可以根据用户的选择动态地改变元素的样式。 通过这些示例，我们可以看到JavaScript在网页交互中的强大功能，它能够实时响应用户的操作，改变页面内容和外观，甚至与其他页面或窗口进行通信。熟练掌握这些技巧对于开发动态、交互性强的Web应用程序至关重要。