JavaScript技巧：确认对话框、页面事件与DOM操作

需积分: 10 195 浏览量更新于2024-09-09 收藏 182KB DOCX 举报

"这篇资料主要总结了JavaScript在网页交互中的几个关键应用，包括弹出确认对话框、监听浏览器关闭事件、设置文字滚动效果、调整元素位置、为元素赋值、页面加载时初始化样式以及刷新页面的方法。" 在JavaScript中，我们可以利用`onclick`事件和`confirm()`函数来实现JSP中点击链接弹出确认对话框的功能。当用户点击链接时，会弹出一个带有“确定”和“取消”选项的对话框。如果用户点击“确定”，则通过`location.href`跳转到指定的JSP处理页面；如果点击“取消”，则通过`return false`阻止默认的链接行为，使用户留在当前页面。示例代码如下： ```html <a href="#" onclick="javascript:if(confirm('是否继续?')) location.href='要到的页面路径'; else return false;">点击链接</a> ``` 接着，我们关注的是如何使用JavaScript监听浏览器关闭事件。`window.onbeforeunload`事件可以在用户尝试离开页面时触发，通常用于提示用户确认是否真的要离开。以下是一个简单的例子： ```html <script type="text/javascript"> window.onbeforeunload = function() { return "the page will be closed, confirm to close?"; } </script> ``` 这段代码会在用户尝试关闭窗口时显示一个提示消息。对于设置字体浮动的效果，可以使用`<marquee>`标签配合其属性来实现。例如，`scrollAmount`控制滚动速度，`direction`决定滚动方向。以下是一个简单的例子： ```html <marquee style="width:200px;" onmouseover="this.stop()" onmouseout="this.start()" scrollAmount=1 direction="up" height="99%">欢迎您进入……</marquee> ``` 要设置元素距离顶部的高度，可以通过CSS的`position`、`top`属性实现，如下所示： ```html <div align="center" style="position: relative; top: 80px; width: 90px; border: 0; cellspacing: 0; cellpadding: 0;"> 您查询的信息不存在。 </div> ``` 给某个元素赋值，可以使用`getElementById`获取元素并修改其`innerHTML`属性： ```html <div id="dv"></div> <script> document.getElementById("dv").innerHTML = '由于您查询的结果数量过多，请您输入完整的信息重新查询'; </script> ``` 当跳转到新的页面并希望初始化某些样式时，可以在`body`标签的`onload`事件中设置： ```html <body onload="fn.onload()"> <script> function fn.onload() { document.body.style.backgroundRepeat = "repeat-x"; document.body.style.backgroundImage = "none"; } </script> </body> ``` 刷新当前页面，可以使用`window.location.href`重新赋值，如下所示： ```javascript var url = '<%=path%>/ent/entAction!query.dhtml'; window.location.href = url; ``` 若要实现条件语句判断后不执行后续语句，可以使用`return`语句提前终止函数执行： ```javascript if (condition) { // do something return; // 阻止执行下面的语句 } // 下面的语句将不会执行 ``` 最后，刷新父页面可以使用`window.parent.location.reload()`，但请注意，这需要在iframe或被嵌套的页面中使用，因为`window.parent`引用了父级窗口。这些是JavaScript在网页交互中的一些基本操作，它们在创建动态和响应式的用户体验中起着至关重要的作用。

1.JSP 中点击链接弹出确定取消选择对话框，点确定跳入到 JSP 处理页面,点取消留在当前页面？怎么写？

<a href="#" onclick="javascript:if conrm('是否继续?') locaon.href='要到的页面路径' else return

false;">

2. JS 监听关闭浏览器事件

关键字: js 监听关闭浏览器事件

只监控(×)

funcon window.onbeforeunload()

{

event.returnValue = "the page will be closed, comrm to close?";

}</script>

3.设置字体浮动

<marquee style="width:200px;" onmouseover=this.stop() onmouseout=this.start() scrollAmount=1

direcon=up height="99%">欢迎您进入……</marquee>

scrollAmount:代表速度

4.设置据顶部高度

<div align="center" style="position:relative; top:80px;" width="90"

border="0" cellspacing="0" cellpadding="0">

您查询的信息不存在...................

</div>

5.给某个元素赋值

document.getElementById("dv").innerHTML = '由于您查询的结果数量过多，请您

输入完整的信息重新查询';

6.当跳到另一个页面时，初始化这个页面的某些样式

function fnonload() {

// document.body.style.backgroundRepeat="repeat-x"

document.body.style.backgroundImage="none";｝北京图片设为空

7.刷新当前页面

var url = '<%=path %>/ent/entAction!query.dhtml';

window.location.href=url;

下载后可阅读完整内容，剩余3页未读，立即下载

zxt_go

粉丝: 0
资源: 2

JavaScript技巧：确认对话框、页面事件与DOM操作

js常用知识总结经典javascript知识总结，经典javascript知识总结

jslinux总结帖

JavaScript学习总结

JS总结

js例子总结

js学习总结

js基础总结

Node.js单元测试、集成测试、基准测试以及代码覆盖率测试方面总结

JS_SumUp:javascript 的日常总结

Sea.JS知识总结

最新资源