js:location对象、document对象、Date对象、document.getElementXXX对象

history 有关客户访问过的 URL 信息

location 有关当前的URL信息

location的属性:

属性 描述
closed 返回窗口是否已被关闭。
defaultStatus 设置或返回窗口状态栏中的默认文本。
document 对 Document 对象的只读引用。请参阅 Document 对象
history 对 History 对象的只读引用。请参数 History 对象
innerheight 返回窗口的文档显示区的高度。
innerwidth 返回窗口的文档显示区的宽度。
length 设置或返回窗口中的框架数量。
location 用于窗口或框架的 Location 对象。请参阅 Location 对象
name 设置或返回窗口的名称。
Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象
opener 返回对创建此窗口的窗口的引用。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部宽度。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent 返回父窗口。
Screen 对 Screen 对象的只读引用。请参数 Screen 对象
self 返回对当前窗口的引用。等价于 Window 属性。
status 设置窗口状态栏的文本。
top 返回最顶层的先辈窗口。
window window 属性等价于 self 属性,它包含了对窗口自身的引用。
  • screenLeft
  • screenTop
  • screenX
  • screenY
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持 screenX 和 screenY。

location的方法:

alert() 显示带有一段消息和一个确认按钮的警告框。
blur() 把键盘焦点从顶层窗口移开。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
close() 关闭浏览器窗口。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup() 创建一个 pop-up 窗口。
focus() 把键盘焦点给予一个窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
prompt() 显示可提示用户输入的对话框。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。

其中要详细讲解方法:

prompt()和confirm()和alert()

这三种方法,很像都是跳出一个对话框来与客户交流提示,不过之间的差别也很大

alert()方法:只弹出一个警示框,不能输入,只能做提示的作用

prompt()方法:调用时需要给两个参数,第一个为弹出对话框的提示内容,第二个为输入框的默认内容,我们可以用一个空的双引号来代替,就会显示没有默认值的输入框,让用户输入,输入的语句或内容,将以string的形式返回给我们

comfirm()给一个确认和取消的内容提示框,如我们删除内容时,会弹出一个是否删除的提示框,有两种选择,是和否,假如我们选择是,将返回一个true值,选否的话就会返回一个false值,参数只用给提示的信息

confirm("'是'还是'否'")

有关open方法的使用:

标准的open方法:

window.open(想要跳转到的页面的URL , 给新打开的窗口对象命名 ,有关新窗口对象的features(特征),是否添加到新的浏览记录(false)或者替换这条浏览信息记录(true))

一共4个参数,第三个features如不赋值,那么就会按照标准窗口打开

features有很多的值,具体可以参w3c schoolde http://www.w3school.com.cn/jsref/met_win_open.asp 去查看,这里列举4个常用的值:top left width height 这四个定义了窗口的大小和距离xy轴的位置


有关document的各种属性

Document 对象集合

集合 描述
all[] 提供对文档中所有 HTML 元素的访问。
anchors[] 返回对文档中所有 Anchor 对象的引用。
applets 返回对文档中所有 Applet 对象的引用。
forms[] 返回对文档中所有 Form 对象引用。
images[] 返回对文档中所有 Image 对象引用。
links[] 返回对文档中所有 Area 和 Link 对象引用。

Document 对象属性

属性 描述
body

提供对 <body> 元素的直接访问。

对于定义了框架集的文档,该属性引用最外层的 <frameset>。

cookie 设置或返回与当前文档有关的所有 cookie。
domain 返回当前文档的域名。
lastModified 返回文档被最后修改的日期和时间。
referrer 返回载入当前文档的文档的 URL。
title 返回当前文档的标题。
URL 返回当前文档的 URL。

Document 对象方法

方法 描述
close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据。
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
open() 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

今天有关document学习了几个方法和属性

document.getElemetnById();

可以根据元素的ID获取到该元素的对象,元素对象的valueinnerHTML等两个属性有所不同

value是写在元素标签中的内容

而innerHTML的内容是包含在标签中间的文本信息,

document.getElementsByname()

看到中间的s了没有?这代表的是返回的不是一个对象,而是一个对象的集合所有的同名的元素都将被返回到一个集合中,可以通过下标获取到具体的对象,并对其进行改

document.getElementsByTagname()

这个方法会把所有同类型的元素返回到一个集合数组中,也是通过下标可以获取到并加以修改

document.referer

可返回载入当前文档的文档的 URL,假如有一个网页通过链接来到兑奖页面,兑奖页面使用document.referer()方法返回该访问文件的网页URL假如跟中奖页面的不一样,就说明有人直接复制粘贴过来的,那么就不符合打开网页的要求,


同时document可以认为是在HTML之外的一个标签,他包含了HTML,同时它也是窗口属性

Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。


date时间属性的使用

如何制作一个动态的时钟

首先,获取现在的时间属性,var date= new Date()

然后通过获得的当前时间的对象date,可以获取具体的YYYY MM  dd hh mm ss等方法

Date 对象方法

方法 描述
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getYear() 已废弃。 请使用 getFullYear() 方法代替。
parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear() 设置 Date 对象中的年份(四位数字)。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setTime() setTime() 方法以毫秒设置 Date 对象。
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear() 根据世界时设置 Date 对象中的年份(四位数字)。
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds() setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
setYear() 已废弃。请使用 setFullYear() 方法代替。
toDateString() 把 Date 对象的日期部分转换为字符串。
toGMTString() 已废弃。请使用 toUTCString() 方法代替。
toISOString() 使用 ISO 标准返回字符串的日期格式。
toJSON() 以 JSON 数据格式返回日期字符串。
toLocaleDateString() 根据本地时间格式,把 Date 对象的日期部分转换为字符串。
toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分转换为字符串。
toLocaleString() 据本地时间格式,把 Date 对象转换为字符串。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toUTCString() 根据世界时,把 Date 对象转换为字符串。
UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf() 返回 Date 对象的原始值。


代码示例:

document.referer
--------------------------------------------------------------------------------
<!--给input id名和value,通过id获取value的内容-->
用户名<input type="text" id="name" value="jinqinawnag"/>
密码<input type="password" id="paw" value="123455">
<input type="submit" onclick="show()"/>
<!--点击按钮触发事件-->
<script>
    function show(){
        var obj = document.getElementById("name");
        alert("用户名:"+obj.value)
        var obj = document.getElementById("paw");
        alert("密码:"+obj.value)
    }
</script>
--------------------------------------------------------------------------------
<!--修改div里面的值-->
<div id="only">第一个div</div>
<input type="button" onclick="get()" value="点击">


<script>
    function get() {
        /*获取值*/
        alert(document.getElementById("only").innerHTML)
        var obj = document.getElementById("only")
        /*更改值*/
        obj.innerHTML = "第二个div"
        alert(obj.innerHTML)
    }
</script>
--------------------------------------------------------------------------------
<!--获取所有input标签对象,返回一个集合-->
<div>
    <input type="text" value="春"/>
    <input type="text" value="夏"/>
    <input type="text" value="秋"/>
    <input type="text" value="冬"/>
    <input type="button" value="input内容">
    <input type="button" value="四季名称">
    <input type="button" value="清空页面内容">
    <P id="replace"></P>
</div>
<input type="button"value="点我" onclick="show()">
<script>
    function show() {
        var str = "";
        var list = document.getElementsByTagName("input")
        for (var i = 0; i < list.length; i++) {
            str += list[i].value
        }
        alert(str)
    }
</script>
--------------------------------------------------------------------------------
/*通过名字来获取集合*/
<div>
    <input type="text" value="春"name="jin"/>
    <input type="text" value="夏"name="jin"/>
    <input type="text" value="秋"name="jin"/>
    <input type="text" value="冬"name="jin"/>
    <input type="button" value="input内容">
    <input type="button" value="四季名称">
    <input type="button" value="清空页面内容">
    <P id="replace"></P>
</div>
 /*通过名字来获取集合*/
 var list = document.getElementsByName("jin")


---------------------------------------------------------------------------------
<!--显示当时时间-->
<div id="lock"></div>
<script>
    function show(){
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        document.getElementById("lock").innerHTML=h+":"+m+":"+s
    }
    show();

</script> 

--------------------------------------------------------------------------------

猜你喜欢

转载自blog.csdn.net/golden_soft/article/details/80495024