28.Java与JavaWeb(五)【Java学习笔记Hatter】

汇小鱼 · 2018-07-02 阅读6972

Java与JavaWeb(五).png

1.JS的bom对象

浏览器对象模型

对象

①navigator:获取浏览器的信息(appName浏览器名称)

②screen:获取显示屏幕信息

③location:请求的url地址


href属性:

获取到请求的url地址:document.write(location.href);

设置url地址(页面上安置一个按钮,按钮上绑定一个事件,当我点击这个按钮,就可以跳转到另外一个页面)


<input type="button" value="跳转" onclick="href1()"/>

鼠标点击事件onclick="JS的方法";


例:

<body>

<input type="button" value="跳转" onclick="href1()"/>

<script type="text/javascript">


function href1(){

location.href="hello.html";

}


document.write("<hr/>");

document.write(location.href);


</script>

</body>

</html>


④history:请求的url历史记录

到访问的上一个页面:history.back();

到访问的下一个页面:history.forward();


⑤window

窗口对象

顶层对象(所有的bom对象都是在window里面操作的)


方法:

①window.alert();页面弹出一个框,显示内容。简写alert();

②confirm :确认框


var flag=window.confirm("是否删除?");

if(flag==true){

alert("删除成功");

}else{

alert("删除失败");

}


③prompt():输入对话框

window.prompt("在框上显示的内容","输入框里面的默认值");


④open():打开一个新的窗口

open("打开新窗口的url地址","","窗口特征,如窗口宽高");


例:

<body>

<input type="button" value="open" onclick="open1()"/>

<script type="text/javascript">


function open1(){

window.open("hello.html","","width=200,height=100");


</script>

</body>


⑤close();关闭窗口(浏览器的兼容性比较差)

⑥做定时器

setInterval("js代码",毫秒数)1秒=1000毫秒


按照指定的周期,来调用函数

setInterval("alert('213');",3000);

setTimeout("js代码",毫秒数);

只会执行一次


⑥clearInterval();清除掉setInterval设置的定时器

clearTimeOut::清除setTimeout设置的定时器


例:<body>

<input type="button" value="interval" onclick="clear1()"/>

<input type="button" value="timeout" onclick="clear2()"/>


<script type="text/javascript">

var id1=setInterval ("alert('123')",3000);

var id2=setTimeout("alert('123')",4000);


function clear1(){

clearInterval(id1);

}


function clear2(){

clearTimeOut(id2);

}


</script>

</body>


2.JS的dom对象

文档对象模型

可以使用js里面的dom里面提供的对象,使用这些对象的属性与方法,对标记型文档进行操作


解析过程:

根据html的层级结构,在内存中分配一个树形结构,需要把html中的每部分封装成对象,

document对象:整个文档

element对象:标签对象

属性对象

文本对象

Node节点对象:这个对象是这些对象的父对象,若在对象里面找不到想要的方法,这个时候Node对象里面去查找



dom解析html过程.png



DHTML:是很多技术的简称:html,css,Dom,JavaScript


3.document对象:表示整个的文档,每个载入浏览器的HTML文档都会成为document对象

①write():向页面输出变量(值);向页面输出HTML代码

②getElementById();:通过id得到标签


例:

<input type="text" id="nameid" value="a"/>

<script type="text/javascript">


//使用getElementById得到input标签

var input1=document.getElementById("nameid");//传递的参数是标签里面的id的值


//得到input里面的value值

alert(input1.value);


//向input里面设置一个值value

input1.value="adas";


</script>

</body>


getElementsByName():返回带有指定名称的对象集合(数组),通过标签的name的属性值得到标签。(若标签只有一个,就不需要遍历,直接通过数组下标获得值:

var inputs=document.getElementsByName("name1")[0];)


例:

<input type="text" name="name1" value="a"/>

<input type="text" name="name1" value="b"/>

<input type="text" name="name1" value="c"/>

<input type="text" name="name1" value="d"/>


<script type="text/javascript">


//使用getElementsByName得到input标签

var inputs=document.getElementsByName("name1");


//遍历数组

for(var i=;i<inputs.length;i++){

var input1=inputs[i];

alert(input1.value);

}


</script>

</body>

getElementsByTagName("标签名称"):返回带有指定标签的对象集合(数组)

(若标签只有一个,就不需要遍历,直接通过数组下标获得值:

var inputs=document.getElementsByTagName("input")[0];)


例:

<input type="text" name="name1" value="a"/>

<input type="text" name="name1" value="b"/>

<input type="text" name="name1" value="c"/>

<input type="text" name="name1" value="d"/>


<script type="text/javascript">


var inputs1=document.getElementsByTagName("input");

for(var i=;i<inputs1.length;i++){

var input1=inputs1[i];

alert(input1.value);


</script>

</body>


案例:windows弹窗

步骤:

1.创建一个页面

(1)有两个输入项与一个按钮

(2)按钮上面有一个事件:弹出一个新窗口open();


2.创建弹出页面

(1)表格(每一行都有一个按钮和编号和姓名)

(2)按钮上有一个事件,把当前的编号和姓名,赋值到第一个页面相应的位置


代码:

<html>

<head>

<title>windos弹窗</title>

<style type="text/css">

</style>

</head>


<body>

编号:<input type="text" id="numid"/><br/>

姓名:<input type="text" id="nameid" /><br/>


<input type="button" value="选择" onclick="open1()"/>

<script type="text/javascript">


//实现弹出方法

function open1(){

window.open("user.html","","width=300,hight=500")

}


</script>

</body>

</html>



弹出页面:

<html>

<head>

<title>弹出页面</title>

<style type="text/css">

</style>

</head>


<body><table width="200" border="1">

<tr>

<td>操作</td>

<td>编号</td>

<td>姓名</td>

</tr>


<tr>

<td><input type="button" value="选择" onclick="s1('01','小名');"/></td>

<td>001</td>

<td>小名</td>

</tr>


<tr>

<td><input type="button" value="选择" onclick="s1('02','晓明');"/></td>

<td>002</td>

<td>晓明</td>

</tr>


<tr>

<td><input type="button" value="选择" onclick="s1('03','小明');"/></td>

<td>003</td>

<td>小明</td>

</tr>


</table>

<script type="text/javascript">


function s1 (num1,name1){


//把num1与name1赋值到windows里面去

//跨页面操作opener:得到创建这个窗口的窗口,得到windows页面

var pwin=window.opener;

pwin.document.getElementById("numid").value=num1;

pwin.document.getElementById("nameid").value=name1;


//关闭窗口

window.close();

}

</script>

</body>

</html>


JavaJ2EE技术交流群.png

Hatter JavaScript JS的dom对象 javaweb windows弹窗案例 JS的bom对象 JS的document对象 Java
| 0
分享到:

相关文章

前面笔试通过收到他们通知下午到他们公司进行面试,下午面试的总共有5、6个人,然后一个总监带我们参观了...

2019-03-03.浏览 1251
不理想

首先, 个人进行了网申,投递简历后第二天收到短信说让第二天下午2:00去他们公司进行面试;第二天中午...

2019-03-12.浏览 1494
面试好算顺利

先是笔试,时间很早。宿舍都没开门,他们就要早早进行笔试。我去晚了10分钟,因为没起来。可是还是允许笔...

2019-03-14.浏览 1459
0 条评论