全部频道

首页 热点资讯 义务教育 高等教育 出国留学 考研考公
您的当前位置：首页正文

正则表达式，window，history，location对象

2024-12-19 来源：化拓教育网

正则表达式

<script type="text/javascript">
<!--
  var reg = /(..)./ ;  //括号表示子匹配，就是对结果进一步匹配
  var s = "abcde" ;

  alert(reg.test(s)) ;  //测试字符串中是否包含正则表达式中所匹配的字符串,返回的是boolean类型的
  alert(reg.exec(s).length) ;  //以数组的形式返回匹配的正则表达式的字符串
  alert(reg.exec(s)[0] + ":" + reg.exec(s)[1]) ;
//-->
</script>

BOM

  • BOM Windows(相当于Java中的Object)
  • clientWidth,clientHeight
<script type="text/javascript">
<!--
window对象的属性：
  1.innerHeight: 返回文档显示区的高度  
  2.innerWidth: 返回文档显示区的宽度   IE不支持
通用写法： window.document.body.clientWidth ;
  3. outerheight  包括了工具栏，菜单栏等的高度
  4. outerwidth   包括滚动条的宽度

function init(){
  var x = window.document.body.clientWidth ;
  var y = window.document.body.clientHeight ;
  alert(x + ":" + y) ;
}
//-->
</script>
  • opener
  • status 属性可设置或返回窗口状态栏中的文本。
例如：在状态栏显示当前时间

<script type="text/javascript">
<!--
  function init(){
  //拿到当前时间
  var d = new Date() ;
  //设置状态栏的文本
  self.status = d.toLocaleString() ;
  setTimeout("init()",1000) ;
}
//-->
</script>
 <body onload = "init()">   
 </body>
  • Windows的三种对话框
三种对话框：
  1. 消息框：alert() ;
  2. 确认框: confirm() :返回Boolean类型的值
<script type="text/javascript">
function disp_confirm()
  {
  var r=confirm("Press a button")
  if (r==true)
    {
    document.write("You pressed OK!")
    }
  else
    {
    document.write("You pressed Cancel!")
    }
  }
</script>
</head>
<body>
  <input type="button" onclick="disp_confirm()"
  value="Display a confirm box" />
</body>

  3. 输入框: prompt(): 返回输入的字符串(了解)

  • close():关闭浏览器窗口

  • Window对象的定时器

1.setTimeout(): 隔一段时间调用某个函数(只调用一次),返回的是一个计时器(理解成一个手表)
clearTimeout() ：销毁由setTimeout()产生的计时器

2.setInterval(): 每隔一段时间调用某个函数(多次调用)
clearInterval(): 销毁由setInterval()产生的计时器

  • window的模态窗体

  • location对象

掌握：
1.href 属性： 是指要连接到其他的URL
  写法一、window.location.href='demo_window对象的close方法.html' ；
  写法二、window.location='demo_window对象的close方法.html' ；

2.reload方法: 刷新
  写法： window.location.reload() ；

history对象

3. history对象
  a.  forward()前进
  b.  back() 后退
  c.  go(n) 正数是前进，负数是后退.

常用事件

onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定 
onmouseover : 鼠标悬停事件
onmouseout : 鼠标移出事件
onclick :鼠标点击事件
onload ,onunload:加载与卸载事件 
onfocus, onblur:聚焦与离焦事件
onkeypress,onkeyup,onkeydown:键盘事件
onsubmit,onreset:提交与重置事件
    选择与改变事件
  • 鼠标的移动事件
<title>Document</title>
  <style type="text/css">
    div{
        width:300px;
        height:300px;
        border:1px solid red;
    }
  </style>
 </head>
<script type="text/javascript">
<!--
    function fun(e){
        var x = e.clientX;
        var y = e.clientY;

        var txt = document.getElementById("txt");
        txt.value = x + ":" + y;
    }
//-->
</script>
MouseMoveEvent.gif
  • 鼠标悬停和移出事件
JS调用CSS两种方法
1.在函数中使用 对象.style.属性 = " "
2.使用选择器

<title>鼠标的悬停及移出事件</title>
<style type="text/css">
.one{
  color:red ;
  border:6px solid green ;
  cursor:hand;
      }
</style>
</head>
<script type="text/javascript">
<!--
  function fun(){
  //拿到p标签对象
  var p = document.getElementById("p") ;
  //定义p的样式
方式1：
  /p.style.color = "red" ;
  p.style.border = "5px dashed green" ;
  p.style.backgroundColor = "red" ;  //注意"-"不能出现
方式2：
  p.className = "one" ; //className
}

  function fun1(){
  //拿到p标签对象
  var p = document.getElementById("p") ;
  p.className = " " ; //或者"none"
}
//-->
</script>
<body>
  <p onmouseover = "fun()" onmouseout= "fun1()" id = "p">你好</p>
</body>
  • onload事件（在整个body加载完之后启动）
加载与卸载事件onload ,onunload
  加载事件(onload) : 在整个页面的元素加载完毕之后发生
  卸载事件(onunload) : 是在页面关闭时发生 
  
注意： onload和onunload事件必须写在body或者图片标签里面
  • 鼠标的点击事件onclick
  • 聚焦离焦事件
onfocus, onblur
  聚焦事件：是在控件获得焦点的时候发生
  离焦事件：是在控件失去焦点的时候发生
  • （重要）提交与重置事件(必须写在表单form中)
onsubmit,onreset
    提交事件： 是在点击提交按钮后发生。(必须写在form表单中)
    重置事件： 是在点重置交按钮后发生。

例1：
<form name="testform" action="jsref_onsubmit.asp"
onsubmit="alert('Hello ' + testform.fname.value +'!')">

What is your name?<br />
  <input type="text" name="fname" />
  <input type="submit" value="Submit" />
</form>

例2：
</head>
    <script type="text/javascript">
    <!--
        function check(form){
            //拿到文本框中的内容
            var txt = form.username.value ; 
            //判断内容
            if(txt == ""){
                document.getElementById("sname").innerHTML = " <font color = red>*  姓名必须填写</font>" ;
                form.username.focus() ;
                return false; 
            }
        
            return true ;
        }
        
        function fun(form){
            alert("重置事件") ;
            return true ;
        }

    //-->
    </script>
 <body>
    <form method="post" action="01-鼠标的单击事件.html" onsubmit = "return check(this)" onreset = "return fun(this)">
        姓名:<input type="text" name="username"><span id = "sname"></span><br>
        <input type="submit" value = "提交">
        <input type="reset" value = "重置">
    </form>
 </body>
  • 键盘事件
onkeypress,onkeyup,onkeydown
  onkeypress: 按下键盘按键并松开
  onkeydown : 按下按键发生
  onkeyup: 松开按键

<!--
    function fun(obj,e){
        obj.value = e.keyCode;
    }
 //-->

<body>
  <input type="text" name="" onkeypress = "fun(this,event)">
 </body>
  • 选择事件，改变事件（掌）
1.onselect: 只能用于输入框. 当选择输入框中的文本时发生

2.onchange: 用于下拉框select和文本框.
  对于下拉框是在选项发生变化的时候发生
  对于文本框是在文本框的内容发生变化并且失去焦点时发生
显示全文