发表于: 2018-05-27 23:07:43

1 579


今天完成的事情:

                       制作小课堂。

                        学习了解js操作表单,

                        js页面跳转


明天计划的事情:继续学习任务2所需知识


遇到的问题:暂无


收获:


一、常规的JS页面跳转代码
1、在原来的窗体中直接跳转用
<script type="text/javascript">
  window.location.href="你所要跳转的页面";
  </script>
2、在新窗体中打开页面用:
<script type="text/javascript">
  window.open('你所要跳转的页面');
  </script>
3、JS页面跳转参数的注解
<SCRIPT LANGUAGE="javascript">
  <!--
  window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
  //写成一行
  -->
  </SCRIPT>
参数解释:
<SCRIPT LANGUAGE="javascript"> js脚本开始;
  window.open 弹出新窗口的命令;
  'page.html' 弹出窗口的文件名;
  'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空'代替;
  height=100 窗口高度;
  width=500 窗口宽度;
  top=0 窗口距离屏幕上方的象素值;
  left=0 窗口距离屏幕左侧的象素值。


二、跳转指定页面的JS代码
第1种:
<script language="javascript" type="text/javascript">
  window.location.href="login.jsp?backurl="+window.location.href;
  </script>
第2种:
<script language="javascript">
  alert("返回");
  window.history.back(-1); 
  </script>
第3种:
<script language="javascript">
  window.navigate("top.jsp"); 
  </script>
第4种:
<script language="JavaScript"> 
  self.location=’top.htm’; 
  </script>
第5种:
<script language="javascript"> 
  alert("非法访问!"); 
  top.location=’xx.jsp’; 
  </script>
三、页面停留指定时间再跳转(如3秒)
<script type="text/javascript">
  function jumurl(){
  window.location.href = 'http://www.mahaixiang.cn/';
  }
  setTimeout(jumurl,3000);
  </script>



用JavaScript操作表单和操作DOM是类似的,因为表单本身也是DOM树。

不过表单的输入框、下拉框等可以接收用户输入,所以用JavaScript来操作表单,可以获得用户输入的内容,或者对一个输入框设置新的内容。

HTML表单的输入控件主要有以下几种:

  • 文本框,对应的<input type="text">,用于输入文本;

  • 口令框,对应的<input type="password">,用于输入口令;

  • 单选框,对应的<input type="radio">,用于选择一项;

  • 复选框,对应的<input type="checkbox">,用于选择多项;

  • 下拉框,对应的<select>,用于选择一项;

  • 隐藏文本,对应的<input type="hidden">,用户不可见,但表单提交时会把隐藏文本发送到服务器。


获取值

如果我们获得了一个<input>节点的引用,就可以直接调用value获得对应的用户输入值:

// <input type="text" id="email">var input = document.getElementById('email');
input.value; // '用户输入的值'

这种方式可以应用于textpasswordhidden以及select。但是,对于单选框和复选框,value属性返回的永远是HTML预设的值,而我们需要获得的实际是用户是否“勾上了”选项,所以应该用checked判断:

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false

设置值

设置值和获取值类似,对于textpasswordhidden以及select,直接设置value就可以:

// <input type="text" id="email">var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新

对于单选框和复选框,设置checkedtruefalse即可。



返回列表 返回列表
评论

    分享到