location,window,html的使用

最新推荐文章于 2022-07-06 23:14:59 发布

N_ou25

最新推荐文章于 2022-07-06 23:14:59 发布

阅读量1.4k

点赞数

分类专栏： JS 前端文章标签： location window htm

本文链接：https://blog.csdn.net/n_ou25/article/details/46726671

版权

JS 前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1 window 对象

一、 window的属性

name: 窗口的名称，由打开它的链接(<atarget=””>)或框架页(<frame name=””>)或某一个窗口调用的open()方法

status: 窗口下面的状态栏所显示的内容。通过对window.status赋值，可以改变状态栏的显示

opener: window.opener 返回打开本窗口的对象。如果这个窗口不是由其他窗口打开的，会返回undefined.

self: 指窗口本身，例如最常用的window.self.close()和window.close()是一样的，关闭窗口

parent: 返回窗口所属的父窗口

top: 返回占据整个浏览器窗口的最顶端的框架页对象

二、 window的方法

open(): 打开一个新窗口，方法内含有一些参数这里不细说。方法内的第一个参数：url，就是要打开的窗口的链接，第二个参数name，就是窗口名称比较常用，其他的不细说。

close(): 关闭已打开的窗口

blur(): 焦点从窗口移走时触发

focus(): 窗口获得焦点时触发，

scrollTo: scrollTo(x,y) 使窗口从左上角开始数，移动到坐标为x,y的位置

scrollBy(): scrollBy(x,y),使窗口从现在位置开始数，向右移动x像素，向下移动y像素，如果是负数，那么向相反的方向移动

resizeTo(): resizeTo(w,h)，使窗口移动到宽度为w,高度为h的大小

resizeBy(): resizeBy(w,h)，使窗口宽度增大w,高度增大h

alert(): 不必细说，弹出一个含有“确定”按钮的窗口，这个时候script会暂停运行，直到点击“确定”按钮

confirm(): 弹出含有“确定”和“取消”的窗口，点击“确定”返回true,点击“取消”返回false

prompt(): 返回带有输入框以及“确定”和“取消”的按钮的一个窗口。

三、 window的事件

onload(): 窗口文档全部下载完毕时触发，一般写在body标签中，全部下载完意味着html文件、图片、控件都要下载完毕

onunload: 当用户推出文档(关闭窗口或到另一个页面去)时触发，同onload()一样，要写到body标签内。

onresize : 当窗口被调整大小的时候被触发

onblur: 窗口失去焦点的时候触发

onfocus: 窗口得到焦点的时候触发

onerror: 当窗口内发生错误的时候触发

window.οnerrοr= ignoreError;

functionignoreError(){

returnture;

}

2 location

location 地址对象
它描述的是某一个窗口对象所打开的地址。要表示当前窗口的地址，只需要使用“location”就行了；若要表示某一个窗口的地址，就使用“<窗口对象>.location”。先前写了一片用window.location.href实现刷新另个框架页面.

通常情况下，一个 URL
会有下面的格式：协议//主机:端口/路径名称#哈希标识?搜索条件

例如：http://www.ijavascript.cn/jiaocheng/index.html#topic1?x=7&y=2 这些部分是满足下列需求的：

“协议”是 URL 的起始部分，直到包含到第一个冒号。
“主机”描述了主机和域名，或者一个网络主机的 IP 地址。
“端口”描述了服务器用于通讯的通讯端口。
路径名称描述了 URL 的路径方面的信息。
“哈希标识”描述了 URL 中的锚名称，包括哈希掩码(#)。此属性只应用于 HTTP 的 URL。
“搜索条件”描述了该 URL 中的任何查询信息，包括问号。此属性只应用于 HTTP 的
URL。“搜索条件”字符串包含变量和值的配对；每对之间由一个“&”连接。

属性概览

protocol 返回地址的协议，取值为 'http:','https:','file:' 等等。
hostname 返回地址的主机名，例如，一个“http://www.microsoft.com/china/”的地址，location.hostname == 'www.microsoft.com'。
port 返回地址的端口号，一般 http 的端口号是 '80'。
host 返回主机名和端口号，如：'www.a.com:8080'。
pathname 返回路径名，如“http://www.a.com/b/c.html”，location.pathname == 'b/c.html'。
hash 返回“#”以及以后的内容，如“http://www.a.com/b/c.html#chapter4”，location.hash == '#chapter4'；如果地址里没有“#”，则返回空字符串。
search 返回“?”以及以后的内容，如“http://www.a.com/b/c.asp?selection=3&jumpto=4”，location.search ==
'?selection=3&jumpto=4'；如果地址里没有“?”，则返回空字符串。
href
返回以上全部内容，也就是说，返回整个地址。在浏览器的地址栏上怎么显示它就怎么返回。如果想一个窗口对象打开某地址，可以使用“location.href =
'...'”，也可以直接用“location = '...'”来达到此目的。

方法概览

reload() 相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。
replace() 打开一个 URL，并取代历史对象中当前位置的地址。用这个方法打开一个 URL
后，按下浏览器的“后退”键将不能返回到刚才的页面。

对URL中的参数进行提取

<span style="font-size:12px;">                             </span><span style="font-size:14px;">       var vars={},hash
				var q = document.URL.split('=')[1];
				if(q != undefined){
				     q = q.split('&');
				     for(var i = 0; i < q.length; i++){
				         hash = q[i].split('=');
		                         vars.push(hash[1]);
				         vars[hash[0]] = hash[1];</span>

<span style="font-size:14px;">                                 }</span>

3 jquery修改/追加/删除html网页中的内容示例

本文章来介绍利用jquery中的html()来动态替换修改html标签中的内容的实例，有需要了解的同学不防进入参考，jquery html相当于js innerHTML方法哦，具体如下。

$(selector).html(content)
html() 函数改变所匹配的 HTML 元素的内容（innerHTML）。

代码如下	复制代码
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").html("Eiege.com——jquery专栏"); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">请点击这里</button> </body> </html>

append() 函数向所匹配的 HTML 元素内部追加内容。

代码如下	复制代码
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").append(" <b>Eiege.com</b>."); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">请点击这里</button> </body> </html>

$(selector).prepend(content)
prepend() 函数向所匹配的 HTML 元素内部预置（Prepend）内容。

代码如下	复制代码
$("p").prepend(www.hzhuti.com);

$(selector).after(content)
after() 函数在所有匹配的元素之后插入 HTML 内容。

代码如下

复制代码

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").after(" Eiege.com");
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">请点击这里</button>
</body>

</html>

些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

方法描述
addClass() 向匹配的元素添加指定的类名。
after() 在匹配的元素之后插入内容。
append() 向匹配的元素内部追加内容。
appendTo() 向匹配的元素内部追加内容。
attr() 设置或返回匹配元素的属性和值。
before() 在每个匹配的元素之前插入内容。
clone() 创建匹配元素集合的副本。
detach() 从 DOM 中移除匹配元素集合。
empty() 删除匹配的元素集合中所有的子节点。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。
prepend() 向每个匹配的元素内部前置内容。
prependTo() 向每个匹配的元素内部前置内容。
remove() 移除所有匹配的元素。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
replaceAll() 用匹配的元素替换所有匹配到的元素。
replaceWith() 用新内容替换匹配的元素。
text() 设置或返回匹配元素的内容。
toggleClass() 从匹配的元素中添加或删除一个类。
unwrap() 移除并替换指定元素的父元素。
val() 设置或返回匹配元素的值。
wrap() 把匹配的元素用指定的内容或元素包裹起来。
wrapAll() 把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

N_ou25

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
location,window,html的使用

1 window 对象一、 window的属性name: 窗口的名称，由打开它的链接()或框架页(<frame name=””>)或某一个窗口调用的open()方法status: 窗口下面的状态栏所显示的内容。通过对window.status赋值，可以改变状态栏的显示opener: window.opener 返回打开本窗口的对象。如果这个窗口不是由其他窗口打开的，会返
复制链接

扫一扫