Java对象描述

1.js组成: ECMAScript :基本语法
BOM 浏览器对象模型—>window对象(window窗口、location地址、history历史、event事件、document文档、定时器)
DOM 文档对象模型—document对象

2.window对象:代表浏览器所开启的视窗,是Javascript中的默认对象，调用其属性或方法时可以省略”window” 这个前缀，直接调用。alert(“hi”)
1.属性:
1.本地/地址location.href=“index.jsp”;location.reload();刷新
2.history.go(-1)–>后退back() go(1)前进 go(0)刷新
2.方法:
1.js的三种弹框
1)alert("");警告框
2)confirm();确认款返回值:点击确认按钮返回true,点击取消按钮返回false
3)prompt(“提示信息”,“默认信息”)提示输入框返回值:是输入的内容
2.window.open(“one.jsp”, “_blank”,“width=500”); 打开窗口:打开one.jsp页面,并且是在新窗口宽500
open参数status：浏览器状态栏信息
window.close();关闭
3.定时器:
a=setInterval(“shizhong()”, 1000);//间隔1000毫秒调用shizhong() 调用多次
clearInterval(a);//停止间隔调用
a=setTimeout(“shizhong()”, 3000)//3000毫秒之后调用shizhong() 调用一次
clearTimeout(a);//停止调用
setTimeout：在载入后延迟指定时间后,去执行某程序（只执行一次）
setInterval：从载入后,每隔指定的时间就执行一次某程序
setTimeout可以使用递归的方式达到setInterval的效果

3.document对象:文档对象包括当前浏览器窗口或框架区域中的所有内容，包含标题栏和表单、图片、链接等HTML页面可访问元素，但不包含浏览器的菜单栏、工具栏和状态栏。
方法:
document.getElementById("");//根据id获取一个元素
document.getElementsByName(""); //根据name获取多个元素
document.getElementsByTagName("");//根据标签名称获取多个元素
var a=document.getElementById(“b”).innerHTML; //将id为b的标签的里面的html内容赋值给a变量仅限于双标签
var a=document.getElementById(“b”).innerText;//将id为b的标签的里面的文本内容赋值给a变量仅限于双标签
var a=document.getElementById(“b”).value;//将id为b的标签的的value值赋值给a变量仅限于有value属性的标签

document.getElementById("b").innerHTML="<p id='p'> This is my JSP page. <br></p>";
//将""里内容写入id为b的标签的里面  仅限于双标签

案例1: 全选 全不选 反选

<script type="text/javascript">
	function qx(){
		var cks=document.getElementsByName("ck");
		for ( var i in cks) {
			cks[i].checked=true;
		}
	}
	function qbx(){
		var cks=document.getElementsByName("ck");
		for ( var i in cks) {
			cks[i].checked=false;
		}
	}
	function fx(){
		var cks=document.getElementsByName("ck");
		for ( var i in cks) {
			if(cks[i].checked==true){
				cks[i].checked=false;
			}
			else{
				cks[i].checked=true;
			}
		}
	}
	</script>
  <body>
    <input type="checkbox"  name="ck" >HTML<br>
    <input type="checkbox"  name="ck" >C语言<br>
    <input type="checkbox"  name="ck" >Java<br>
    <input type="checkbox"  name="ck" >Java Script<br>
    <input type="button" value="全选" onclick="qx()">
    <input type="button" value="全不选" onclick="qbx()">
    <input type="button" value="反选" onclick="fx()">
  </body>

案例2: 动态时钟周期性定时器

<script type="text/javascript">
	var aa;
	function b(){
		var t=new Date();
		var d=t.toLocaleString();
		document.getElementById("p1").innerHTML=d;
	}
	function a(){
		aa=window.setInterval("b()", 1000);
	}
	function c(){	
		window.clearInterval(aa);
	}

</script>
   <body>
    <input type="button" value="开始" onclick="a();">
    <input type="button" value="结束" onclick="c();">
    <p id="p1"></p>
  </body>

案例3: 计算器

<script type="text/javascript">
	function add(){
		var a=document.getElementById("a").value;
		var b=document.getElementById("b").value;
		var c=Number(a)+Number(b);
		document.getElementById("c").value=c;
	}
	function jian(){
		var a=document.getElementById("a").value;
		var b=document.getElementById("b").value;
		var c=Number(a)-Number(b);
		document.getElementById("c").value=c;
	}
	function cheng(){
		var a=document.getElementById("a").value;
		var b=document.getElementById("b").value;
		var c=Number(a)*Number(b);
		document.getElementById("c").value=c;
	}
	function chu(){
		var a=document.getElementById("a").value;
		var b=document.getElementById("b").value;
		var c=Number(a)/Number(b);
		document.getElementById("c").value=c;
	}
</script> 
  <body>
   第一个数:<input type="text" id="a"><br>
   第二个数:<input type="text" id="b"><br>
   <input type="button" value="加" onclick="add()">
    <input type="button" value="减" onclick="jian()">
    <input type="button" value="乘" onclick="cheng()">
    <input type="button" value="除" onclick="chu()"><br>
   运算结果:<input type="text" id="c"><br> 
  </body>

猜你喜欢