首页技术文章正文

web前端开发培训之超强的JS总结（一）

更新时间:2016年10月12日14时45分来源:乐鱼播客前端与移动开发学院浏览次数:

1.    清除视窗或frame中的内容
document.clear();
document.close();  document.open();  document.write(“”);
2.    在不同文件之间穿梭
document.back();  document.forward();
history.go(-1);  history.go(1);

3.    输入框
var the_url = prompt("What's the URL?","");
         if（the_url==””||the_url==null）{
               the_url=”www.google.com”;
}
   注：利用the_url==null可以判断选取的是取消按钮

4.    确定框
<script language="javascript">
         function delete_confirm(qyyb_no,inspect_time,company_name){
         <!—点击确定按钮-- >
         if(confirm("确定要删除该企业月报吗？"))
         {
   location.href='<%=request.getContextPath()%>/webcontroller?functionId=2015&inspect_time='+inspect_time+'&company_name='+company_name+'&qyyb_no='+qyyb_no;
               alert('企业月报删除成功！');
               window.close();
}
<!—点击取消按钮-- >
         else{
            }
      }
      </script>

5. 内置变量top，该变量永远指分割窗口最高层次的浏览器窗口。如果你计划从分割窗口的最高层次开始执行命令，你就可以用top变量。
<a href="#"  onClick="top.target_frame.document.writeln('Monkey do!<br>');">Monkey see</a>
执行该语句时，JavaScript从窗口等级的最高层开始，该层中包含着分割窗口的窗框，从中发现名叫target_frame的分割窗口，由于该分割窗口是也一个窗口，所它具有窗口的文件（document）属性。JavaScript找到其document属性，并调用writeln()方法。其执行结果是在文件中写出"Monkey do!" 。writeln()是文件（document）对象的方法，所以我们必须写document.writeln()

6. 窗口有一个属性叫做document，它用于引用到窗口中实际的HTML文件。该document
属性本身就是一个对象。在谈到图象掉换（image swap）的时候，我们见到过这样的例子。你可以用下列语句作图象掉换:
<a href="#">交换</a>
上述语句的意思是说：找到window的document属性，找到the_image的src属性并将其设置为图象button_d.gif。这样写是因为窗口（windows）是对象，窗口内的文件（documents）是对象，而文件（document）内的图象（images）页是对象。
看起来似乎很复杂，但它的结构很清楚。JavaScript的文件对象�？椋―ocument Object Model）描述了对象之间的等级关系。

7. Windows特性： window.open()中的第三个参数是你想要你的窗口表现的一组特性。如果你不完全确定你的参数，则以用户浏览器的缺省值替代。
然而，如果你指定了一些特性参数，则窗口将以参数设定值规定的出现。特性参数是以一组逗号分隔的序列出现的。
例如，如果你是这么写的：
window.open("some_url","window_name","location,menubar");
你将得到一个规定了URL，窗口名及菜单条（文件，编辑条等等）的窗口。注意别在字符串中加入任何空格，这将使得有些浏览器出错。

看一下另一个例子：
window.open("some_url","window_name","location,height=100,width=100");
这将打开一个高宽各为100像素的窗口。再次请注意别在字符串中加空格。
这里是一组可以在字符串中引用的特性参数：
menubar （菜单条）
这是个在大多数软件应用中都引用的函数行。一般包括有文件，编辑及其他一些条目。
status（状态条）
这是位于你的窗口下部的信息条。当你的鼠标移到一个链接上时，链接的URL就在这个状态条上出现。你可以将状态条上显示的内容搬到一个滚动的marquee 中去。我不打算为你做这个示例，如果你想知道怎样做，自己设法解决！
scrollbars （滚动条）
当需要时允许滚动条出现。
resizable （重调）
当重调参数被列出，窗口将可被重调。注意它的拼法，我就经常搞错。
width （宽度）
以像素点表达的窗口宽。
height（高度）
以像素点表达的窗口高。
toolbar （工具条）
Home button, among others.
浏览器工具条，包括后退，前进钮，停止钮，以及HOME钮等等。
location （定位区）
你可以键入URL 的浏览器文本区。
directories （指示区）
如Netscape浏览器中所在的"What's new," "What's cool,"等等。

8、showModalDialog和showModelessDialog
Javascript有许多内建的方法来产生对话框，如：window.alert(), window.confirm(),window.prompt().等。然而IE提供更多的方法支持对话框。如：
　　showModalDialog() (IE 4+ 支持)
　　showModelessDialog() (IE 5+ 支持)

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open()打开的窗口的所有属性。

window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

当我们用showModelessDialog()打开窗口时，不必用window.close()去关闭它，当以非模态方式［IE5］打开时，打开对话框的窗口仍可以进行其他的操作，即对话框不总是最上面的焦点，当打开它的窗口ＵＲＬ改变时，它自动关闭。而模态［ＩＥ４］方式的对话框始终有焦点（焦点不可移走，直到它关闭）。模态对话框和打开它的窗口相联系，因此我们打开另外的窗口时，他们的链接关系依然保存，并且隐藏在活动窗口的下面。

使用方法如下：
vReturnValue = window.showModalDialog(sURL [, vArguments][, sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments][, sFeatures])

参数说明：
sURL
必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
  dialogHeight 对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
　　dialogWidth: 对话框宽度。
　　dialogLeft: 距离桌面左的距离。
　　dialogTop: 离桌面上的距离。
　　center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
　　help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
　　resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
　　status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
  scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。
  还有几个属性是用在HTA中的，在一般的网页中一般不使用。
  dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
  edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。
  unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

传入参数：
要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：
test1.htm
====================
<script>
  var mxh1 = new Array("mxh","net_lover","孟子E章")
  var mxh2 = window.open("about:blank","window_mxh")
  // 向对话框传递数组
  window.showModalDialog("test2.htm",mxh1)
  // 向对话框传递window对象
  window.showModalDialog("test3.htm",mxh2)
</script>
test2.htm
====================
<script>
  var a = window.dialogArguments
  alert("您传递的参数为：" + a)
</script>
test3.htm
====================
<script>
  var a = window.dialogArguments
  alert("您传递的参数为window对象，名称：" + a.name)
</script>
可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：
test4.htm
===================
<script>
  var a = window.showModalDialog("test5.htm")
  for(i=0;i<a.length;i++) alert(a)
</script>
test5.htm
===================
<script>
function sendTo()
{
  var a=new Array("a","b")
  window.returnValue = a
  window.close()
}
</script>
<body>
<form>
  <input value="返回" type=button>
</form>

常见问题：
1，如何在模态对话框中进行提交而不新开窗口？
如果你的浏览器是IE5.5+,可以在对话框中使用带name属性的iframe，提交时可以制定target为该iframe的name。对于IE4+，你可以用高度为0的frame来作：例子，
test6.htm
===================
<script>
  window.showModalDialog("test7.htm")
</script>
test7.htm
===================
if(window.location.search) alert(window.location.search)
<frameset rows="0,*">
  <frame src="about:blank">
  <frame src="test8.htm">
</frameset>
test8.htm
===================
<form target="_self" method="get">
<input name=txt value="test">
<input type=submit>
</form>
<script>
if(window.location.search) alert(window.location.search)
</script>
2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗？
答案是不能。但在frame里是可以的。

showModalDialog和showModelessDialog的异同
  同：两者弹出的窗体不能刷新
  异：前者是模态窗口，始终获得焦点；后者是非模态窗口，只不过弹出一个页面，还可以操作父窗口。
关闭showModalDialog和showModelessDialog弹出的窗口
<INPUT type="button" value="ButtonClick">
怎样才让在showModalDialog和showModelessDialog的弹出新窗口里操作button,不弹出新窗口？
在<head>和</head>之间加<base target="_self">
showModalDialog的返回值
参照例子：
t1.html:
<script language="javascript">
function showpage()
{
alert(showModalDialog("t2.html"));
}
</script>
<input type="button" value="getval">
t2.html
<HTML>
<HEAD>
<Script language="javascript">
<
function SetVal()
{
  returnValue="abc";
  close();
}
//-->
</Script>
</HEAD>
<BODY>
<input type="button" value="Btn1">
</BODY>
</HTML>
window.showModalDialog ("dic_functionlist.jsp?dicid="+id,window,'dialogheight:300pt; dialogwidth:340pt; dialogtop:120pt; dialogleft:240pt;scrollbars:no;resizable:no;location:no;status:no');

9.内置变量是parent，指的是包含当前分割窗口的母窗口。如果在一个窗口内有分割窗口，而在其中的一个分割窗口中又包含着分割窗口，则第2层的分割窗口可以用parent变量引用包含它的母分割窗口。

10.    复选框是否选中
var is_checked =
window.document.the_form.the_checkbox.checked;
if (is_checked == true)
{
alert("Yup, it's checked!");
} else {
alert("Nope, it's not checked.");
}

11. 复选框实例1
<form name="form_1">
<input type="checkbox" name="check_1">Checkbox 1
</form>
<a href="#"
onClick=
"window.document.form_1.check_1.checked=true;
return false;">
Click to check Checkbox 1</a>
<a href="#"box-sizing: border-box; color: rgb(51, 51, 51); font-family: arial, verdana, 'Microsoft YaHei', Tahoma, Simsun, sans-serif; line-height: 25.2px;">return false;">
Click to uncheck Checkbox 1</a>
<a href="#"
onClick="alert(window.document.form_1.check_1.checked);
return false;">
Click to see the value of Checkbox 1</a>
注意我在链接中始终加入了return false，以防止浏览器刷新页面又回到原来的内容。
复选框的事件处理器是onClick。当某人点击复选框时，onClick事件处理器即发挥作用。

12. 复选框实例2
<form name="form_2">
<input type="checkbox" name ="check_1"
onClick="switchLight();">The Light Switch
</form>
当某人点击复选框时，onClick处理器被激活并执行函数switchLight()，以下为函数switchLight() 的编码（它置于网页首部中）:
function switchLight()
{
var the_box = window.document.form_2.check_1;
var the_switch = "";
if (the_box.checked == false) {
alert("Hey! Turn that back on!");
document.bgColor='black';
} else {
alert("Thanks!");
document.bgColor='white';
}
}

13. 单选框实例
表单编码如下
<form name="form_1">
<input type="radio" name ="radio">Light off
<input type="radio" name ="radio" checked>Light on
</form>
当第一个单选框被选中时，函数offButton() 被调用。函数如下：
function offButton()
{
var the_box = window.document.form_1.radio[0];
if (the_box.checked == true)
{
window.document.form_1.radio[1].checked = false;
document.bgColor='black';
alert("Hey! Turn that back on!");
}
}
这个例子很象前面的复选框例子，主要的区别在于该行：
window.document.form_1.radio[1].checked = false;
该行指令指示JavaScript在该按钮被点击时关闭另外一个按钮。由于另外一个按钮的函数同这个很相似：
function onButton()
{
var the_box = window.document.form_1.radio[1];
if (the_box.checked == true)
{
window.document.form_1.radio[0].checked = false;
document.bgColor='white';
alert("Thanks!");
}
}

14. 下列选单
<select name="pulldown_1" size=1>
<option>probiscus
<option>spider
<option>lemur
<option>chimp
</select>
注意这个选单的名称是pulldown_1，但各个选项没有名称。所以要调用其中的各个选项则有点困难。
幸好数组可以帮助我们调用其中的选项。如果你想改变该下列选单中的第2个选项，你可以这样做：
window.document.form_1.pulldown_1.options[1].text = 'new_text';
   这是因为选单的元素有一个选项属性，而该属性是选单所有选项的集合而成的数组。

除了选项属性，选单还有一项属性叫做selectedIndex。大笔一个选项被选择后，selectedIndex属性将变成被选项的数组索引号（序列号）。选择第2个列表选单中的一个选项，然后检查索引号。记住数组中的第1个选项的索引号是0。
<a href="#"box-sizing: border-box; color: rgb(51, 51, 51); font-family: arial, verdana, 'Microsoft YaHei', Tahoma, Simsun, sans-serif; line-height: 25.2px;">window.document.form_1.list_1.selectedIndex);
return false;">check the index.</a>
表单的名称是form_1，列表选单的名称是list_1。selectedIndex属性值为
window.document.form_1.list_1.selectedIndex。你还可
以将selectedIndex设置如下：
window.document.form_1.list_1.selectedIndex = 1;
并高亮度显示第2个选项。一旦你得到被选项的索引号，你就可以发现其内容：
var the_select = window.document.form_1.list_1;
var the_index = the_select.selectedIndex;
var the_selected = the_select.options[the_index].text;

15. 获取select组件的被选中的值
function getselected(){
var sel = document.form1.select;
return sel.options[sel.selectedIndex].text;
}

文章转载于：前端网

本文版权归乐鱼播客web前端开发培训学院所有，欢迎转载，转载请注明作者出处，谢谢！
作者：乐鱼播客web前端开发培训学院
首发：http://www.itcast.cn/web/

上一篇：web前端开发培训之谈一谈循环的性能提升 下一篇：web前端开发培训之如何应对面试官问你职业规划问题