js对象

来源：互联网发布：淘宝怎么搜潮流的衣服编辑：程序博客网时间：2024/06/05 18:12

01.window对象常用属性和方法

属性：History，location和document

方法：

prompt( ) 显示可提示用户输入的对话框

alert( ) 显示带有一个提示信息和一个确定按钮的警示框

confirm( ) 显示一个带有提示信息、确定和取消按钮的对话框

close( ) 关闭浏览器窗口

open(“链接到的目标地址”,‘百度’,”width=300px,height=300px” )打开一个新的浏览器窗口，加载给定 URL 所指定的文档

setTimeout( ) 在指定的毫秒数后调用函数或计算表达式

setInterval( ) 按照指定的周期（以毫秒计）来调用函数或表达式

02.history常用属性和方法

方法：

back() 加载 history 对象列表中的前一个URL

forward() 加载 history 对象列表中的下一个URL

go() 加载 history 对象列表中的某个具体URL

实现页面的前进和后退

History.go(1)

History.go(-1)

Historygo(0)

03.location对象常用属性和方法

属性：

host 设置或返回主机名和当前URL的端口号

hostname 设置或返回当前URL的主机名

href 设置或返回完整的URL,定向到某个页面<a href></a>

方法：

reload() 重新加载当前文档

replace(url) 用新的文档替换当前文档

04.document对象常用属性和方法

属性：

referrer 返回载入当前文档的文档的URL

URL 返回当前文档的URL

方法：

getElementById() 返回对拥有指定id的第一个对象的引用

getElementsByName() 返回带有指定名称的对象的集合

getElementsByTagName() 返回带有指定标签名的对象的集合

write() 向文档写文本、HTML表达式或JavaScript代码

Document.write(‘’);

//由于write方法会冲掉页面上所有的设置，所以它的应用场景只有一个，就是

当这句话写onload中，和其他标签一起显示的时候，使用，其他情况不适用。

05.js内置对象

Array，String，Math和Date

Array：用于在单独的变量名中存储一系列的值。

String：用于支持对字符串的处理。

Math：用于执行常用的数学任务，它包含了若干个数字常量和函数。

常用方法：

ceil() 对数进行上舍入 Math.ceil(25.5);返回26

Math.ceil(-25.5);返回-25

floor() 对数进行下舍入 Math.floor(25.5);返回25

Math.floor(-25.5);返回-26

round() 把数四舍五入为最接近的数 Math.round(25.5);返回26

Math.round(-25.5);返回-26

random() 返回0~1之间的随机数 Math.random();例如：0.6273608814137365

Date：用于操作日期和时间。

常用方法：

getDate() 返回 Date 对象的一个月中的每一天，其值介于1～31之间

getDay() 返回 Date 对象的星期中的每一天，其值介于0～6之间

getHours() 返回 Date 对象的小时数，其值介于0～23之间

getMinutes() 返回 Date 对象的分钟数，其值介于0～59之间

getSeconds() 返回 Date 对象的秒数，其值介于0～59之间

getMonth() 返回 Date 对象的月份，其值介于0～11之间

getFullYear() 返回 Date 对象的年份，其值为4位数

getTime() 返回自某一时刻（1970年1月1日）以来的毫秒数

06.定时函数

setTimeout(方法,1000):指定多长时间后执行某个操作，只执行一次。

setInterval(方法，1000)每隔多长时间执行一次，如果定时器不停止，将会一直执行下去。

如何取消定时器

clearTimeout()

clearInterval()

使用window对象可以实现弹出窗口，关闭当前窗口，弹出页面消息框等效果。

使用Date对象可以获得当前系统的日期，时间。

使用定时函数与Date（）对象的相关属性和方法可以轻松地实现浏览器中”后退“，”前进“和“刷新”按钮的功能。

document对象的getElementById（）方法用于访问唯一的元素。

document对象的getElementsByName（）方法用于访问相同name属性的一组元素。

document对象的getElementsByTagName( )方法用于访问相同标签的一组元素。

01.全选和反选案例

window.onload = function() {

};

function check() {

var mychild = document.getElementsByName("product");

for (var item in mychild) {

mychild[item].checked = document.getElementById("all").checked;

}

}*/

function check() {

//把所有参与选择的checkbox使用相同的name

var eles = document.getElementsByName("product");

var i = 0;

// 如果是全选状态，则取消所有的选择

if(isSelectAll() == true) {

for( i = 0; i < eles.length; i++) {

eles[i].checked = false;

}

//document.getElementById("all").checked = false;

} else {

// 否则选中每一个checkbox

for( i = 0; i < eles.length; i++) {

eles[i].checked = true;

}

03.背景图自动切换

window.onload = function() {

setInterval(mypic, 1000);

};

var num = 1;

function mypic() {

if (num<5) {

var obj = document.getElementById("myimg");

num++;

obj.src = "images/" + num +".jpg";

} else {

num = 1;

var obj = document.getElementById("myimg");

obj.src = "images/" + num +".jpg";

}

</script>

</head>

<body>

</body>

数字倒计时效果

<title>10s倒计时效果</title>

//1.1 取出div中的变量值

window.onload = function() {

var t1;

//1.4 给开始按钮注册事件

//锁定开始按钮对象

var btnStart = document.getElementById("btnStart");

//结束按钮对象

var btnStop = document.getElementById("btnStop");

btnStop.onclick = function() {

clearInterval(t1);

};

btnStart.onclick = function() {

//1.5

t1=setInterval(step, 1000);

};

function step() {

//1.2 锁定div对象

var dom = document.getElementById("msg");

//1.3 innerText,innerHTML value

var num = dom.innerText;

//1.6 对num进行--操作

if (num>0) {

num--;

}

//1.7 将运算过的num重新赋值给div的innerText

dom.innerText = num;

}

</script>

</head>

<body>

</body>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>

<script type="text/javascript">

window.onload=function(){
var rows=document.getElementsByTagName("tr");
for(var i=0;i<rows.length;i++){
if(i%2==0){
//rows[i].style.cssText="background:pink;font-size:32";
rows[i].style.backgroundColor="pink";
}
}

};

</script>

</head>

<body>
<table>
<tr>
<td>第一行第一列 </td>
<td>第一行第二列 </td>
</tr>
<tr>
<td>第二行第一列 </td>
<td>第二行第二列 </td>
</tr>
<tr>
<td>第三行第一列 </td>
<td>第三行第二列 </td>
</tr>
<tr>
<td>第四行第一列 </td>
<td>第四行第二列 </td>
</tr>


</table>
</body>
</html>

0 0