正则表达式
<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和文本框.
对于下拉框是在选项发生变化的时候发生
对于文本框是在文本框的内容发生变化并且失去焦点时发生
网友评论