JavaScript进阶篇

原创 2016年08月30日 19:33:18

浏览器对象

    

window对象


JavaScript 计时器




计时器setInterval()


语法:

setInterval(代码,交互时间);

参数说明:

1. 代码:要调用的函数或要执行的代码串。

2. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。

返回值:

一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000)
或
setInterval(clock,1000)



取消计时器clearInterval()



clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法:

clearInterval(id_of_setInterval)

参数说明:
id_of_setInterval:由 setInterval() 返回的 ID 值。





计时器setTimeout()


setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间);

参数说明:

1. 要调用的函数或要执行的代码串。
2. 延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)。



取消计时器clearTimeout()


setTimeout()和clearTimeout()一起使用,停止计时器。

语法:

clearTimeout(id_of_setTimeout)

参数说明:
id_of_setTimeout:
由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。


History 对象


history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。

注意:窗口被打开的那一刻开始记录,每个浏览器窗口、每个标签页乃至每个框架,都有自己的history对象与特定的window对象关联。

语法:

window.history.[属性|方法]

注意:window可以省略。


History 对象属性




History 对象方法




返回前一个浏览的页面

back()方法,加载 history 列表中的前一个 URL。

语法:

window.history.back();

比如,返回前一个浏览的页面,代码如下:

window.history.back();

注意:等同于点击浏览器的倒退按钮。

back()相当于go(-1),代码如下:

window.history.go(-1);

返回下一个浏览的页面

forward()方法,加载 history 列表中的下一个 URL。

如果倒退之后,再想回到倒退之前浏览的页面,则可以使用forward()方法,代码如下:

window.history.forward();

注意:等价点击前进按钮。

forward()相当于go(1),代码如下:

window.history.go(1);

返回浏览历史中的其他页面

go()方法,根据当前所处的页面,加载 history 列表中的某个具体的页面。

语法:

window.history.go(number);

参数:

浏览器中,返回当前页面之前浏览过的第二个历史页面,代码如下:

window.history.go(-2);

注意:和在浏览器中单击两次后退按钮操作一样。

同理,返回当前页面之后浏览过的第三个历史页面,代码如下:

window.history.go(3);


Location对象

location用于获取或设置窗体的URL,并且可以用于解析URL。

语法:

location.[属性|方法]

location对象属性图示:




location 对象属性:




location 对象方法:






Navigator对象

Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。

对象属性:

查看浏览器的名称和版本,代码如下:

<script type="text/javascript">
   var browser=navigator.appName;
   var b_version=navigator.appVersion;
   document.write("Browser name"+browser);
   document.write("<br>");
   document.write("Browser version"+b_version);
</script>




userAgent


返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

语法

navigator.userAgent

几种浏览的user_agent.,像360的兼容模式用的是IE、极速模式用的是chrom的内核。

使用userAgent判断使用的是什么浏览器(假设使用的是IE8浏览器),代码如下:

function validB(){ 
  var u_agent = navigator.userAgent; 
  var B_name="Failed to identify the browser"; 
  if(u_agent.indexOf("Firefox")>-1){ 
      B_name="Firefox"; 
  }else if(u_agent.indexOf("Chrome")>-1){ 
      B_name="Chrome"; 
  }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
      B_name="IE(8-10)";  
  }
    document.write("B_name:"+B_name+"<br>");
    document.write("u_agent:"+u_agent+"<br>"); 
} 



screen对象


screen对象用于获取用户的屏幕信息。

语法:

window.screen.属性

对象属性:




屏幕分辨率的高和宽


window.screen 对象包含有关用户屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
注意:
1.单位以像素计。
2. window.screen 对象在编写时可以不使用 window 这个前缀。
我们来获取屏幕的高和宽,代码如下:

<script type="text/javascript">
  document.write( "屏幕宽度:"+screen.width+"px<br />" );
  document.write( "屏幕高度:"+screen.height+"px<br />" );
</script>


屏幕可用高和宽度


1. screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如任务栏。

2. screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如任务栏。

注意:

不同系统的任务栏默认高度不一样,及任务栏的位置可在屏幕上下左右任何位置,所以有可能可用宽度和高度不一样。

我们来获取屏幕的可用高和宽度,代码如下:

<script type="text/javascript">
document.write("可用宽度:" + screen.availWidth);
document.write("可用高度:" + screen.availHeight);
</script>

注意:根据屏幕的不同显示值不同。




getAttribute()方法



通过元素节点的属性名称获取属性的值。

语法:

elementNode.getAttribute(name)

说明:

1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。

2. name:要想查询的元素节点的属性名字

看看下面的代码,获取h1标签的属性值:

运行结果:

h1标签的ID :alink
h1标签的title :getAttribute()获取标签的属值



setAttribute()方法


setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。

语法:

elementNode.setAttribute(name,value)

说明:

1.name: 要设置的属性名。

2.value: 要设置的属性值。

注意:

1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。

2.类似于getAttribute()方法,setAttribute()方法只能通过元素节点对象调用的函数。



节点属性



在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :

1. nodeName : 节点的名称

2. nodeValue :节点的值

3. nodeType :节点的类型

一、nodeName 属性: 节点的名称,是只读的。

1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性:节点的值

1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:

元素类型    节点类型
  元素          1
  属性          2
  文本          3
  注释          8
  文档          9



访问子结点childNodes



访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。

语法:

elementNode.childNodes

注意:

如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。

我们来看看下面的代码:

运行结果:

IE:

  UL子节点个数:3
  节点类型:1

其它浏览器:

   UL子节点个数:7
   节点类型:3

注意:

1. IE全系列、firefox、chrome、opera、safari兼容问题

2. 节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE是3,其它浏览器是7,如下图所示:

如果把代码改成这样:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

运行结果:(IE和其它浏览器结果是一样的)

  UL子节点个数:3
  节点类型:1



访问子结点的第一和最后项



一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

语法:

node.firstChild

说明:与elementNode.childNodes[0]是同样的效果。 

二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

语法:

node.lastChild

说明:与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。 

注意: 上一节中,我们知道Internet Explorer 会忽略节点之间生成的空白文本节点,而其它浏览器不会。我们可以通过检测节点类型,过滤子节点。 (以后章节讲解)






访问父节点parentNode



获取指定节点的父节点

语法:

elementNode.parentNode

注意:父节点只能有一个。

看看下面的例子,获取 P 节点的父节点,代码如下:

<div id="text">
  <p id="con"> parentNode 获取指点节点的父节点</p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>

运行结果:

parentNode 获取指点节点的父节点
DIV

访问祖节点:

elementNode.parentNode.parentNode

看看下面的代码:

<div id="text">  
  <p>
    parentNode      
    <span id="con"> 获取指点节点的父节点</span>
  </p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.parentNode.nodeName);
</script>

运行结果:

parentNode获取指点节点的父节点
DIV

注意: 浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。





访问兄弟节点



1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。

语法:

nodeObject.nextSibling

说明:如果无此节点,则该属性返回 null。

2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。

语法:

nodeObject.previousSibling  

说明:如果无此节点,则该属性返回 null。

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略

解决问题方法:

判断节点nodeType是否为1, 如是为元素节点,跳过。

运行结果:

LI = javascript
nextsibling: LI = jquery


 



插入节点appendChild()



在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法:

appendChild(newnode)

参数:

newnode:指定追加的节点。

我们来看看,div标签内创建一个新的 P 标签,代码如下:

运行结果:

HTML
JavaScript
This is a new p







插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:

insertBefore(newnode,node);

参数:

newnode: 要插入的新节点。

node: 指定此节点前插入节点。

我们在来看看下面代码,在指定节点前插入节点。

运行结果:

This is a new p
JavaScript
HTML

注意: otest.insertBefore(newnode,node); 也可以改为:  otest.insertBefore(newnode,otest.childNodes[0]); 




删除节点removeChild()



removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。

语法:

nodeObject.removeChild(node)

参数:

node :必需,指定需要删除的节点。

我们来看看下面代码,删除子点。

运行结果:

HTML
删除节点的内容: javascript

注意: 把删除的子节点赋值给 x,这个子节点不在DOM树中,但是还存在内存中,可通过 x 操作。

如果要完全删除对象,给 x 赋 null 值,代码如下:







替换元素节点replaceChild()




replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。 

语法:

node.replaceChild (newnode,oldnew ) 

参数:

newnode : 必需,用于替换 oldnew 的对象。 
oldnew : 必需,被 newnode 替换的对象。

我们来看看下面的代码:

 

效果: 将文档中的 Java 改为 JavaScript。

注意: 

1. 当 oldnode 被替换时,所有与之相关的属性内容都将被移除。 

2. newnode 必须先被建立。 






创建元素节点createElement


createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法:

document.createElement(tagName)

参数:

tagName:字符串值,这个字符串用来指明创建元素的类型。

注意:要与appendChild() 或 insertBefore()方法联合使用,将元素显示在页面中。

我们来创建一个按钮,代码如下:

<script type="text/javascript">
   var body = document.body; 
   var input = document.createElement("input");  
   input.type = "button";  
   input.value = "创建一个按钮";  
   body.appendChild(input);  
 </script>  

效果:在HTML文档中,创建一个按钮。

我们也可以使用setAttribute来设置属性,代码如下:

<script type="text/javascript">  
   var body= document.body;             
   var btn = document.createElement("input");  
   btn.setAttribute("type", "text");  
   btn.setAttribute("name", "q");  
   btn.setAttribute("value", "使用setAttribute");  
   btn.setAttribute("onclick", "javascript:alert('This is a text!');");       
   body.appendChild(btn);  
</script>  

效果:在HTML文档中,创建一个文本框,使用setAttribute设置属性值。 当点击这个文本框时,会弹出对话框“This is a text!”。









创建文本节点createTextNode



createTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。

语法:

document.createTextNode(data)

参数:

data : 字符串值,可规定此节点的文本。

我们来创建一个<div>元素并向其中添加一条消息,代码如下:

运行结果:

 






浏览器窗口可视区域大小



获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:

一、对于IE9+、Chrome、Firefox、Opera 以及 Safari:

•  window.innerHeight - 浏览器窗口的内部高度

•  window.innerWidth - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5:

•  document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。

•  document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

或者

Document对象的body属性对应HTML文档的<body>标签

•  document.body.clientHeight

•  document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案:

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;







网页尺寸scrollHeight


scrollHeight和scrollWidth,获取网页内容高度和宽度。

一、针对IE、Opera:

scrollHeight 是网页内容实际高度,可以小于 clientHeight。

二、针对NS、FF:

scrollHeight 是网页内容高度,不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时,scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

注意:区分大小写

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。







网页尺寸offsetHeight


offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变)。

一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;





网页卷去的距离与偏移量


我们先来看看下面的图:

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ,即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ,即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

注意:

1. 区分大小写

2. offsetParent:布局中设置postion属性(Relative、Absolute、fixed)的父容器,从最近的父节点开始,一层层向上找,直到HTML的body。











版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

【Web前端】慕课网—JavaScript进阶篇8-17编程练习

前言本人也是刚学,在这里知识给完全没有头绪的同学一些思路,写的不好请多多指教。第一步:编写页面布局之标题: 可以看到练习里面是一个黑色粗体的“操作成功”,所以这里用标签,很简单,完成第一步。操作成功...
  • gyjyywc
  • gyjyywc
  • 2016年11月20日 12:59
  • 456

JavaScript进阶篇笔记(一)

1. JavaScript基础 1.1 JavaScript能做什么? 增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等) 实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等 ...

7月30日--javascript进阶篇后续

1.替换元素节点 replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。  语法: node.replaceChild (newnode,oldnew )  参数: ...

7月28日--JavaScript进阶篇

1.变量 定义以及命名规则和java类似 声明变量:var 变量名,变量名2……; 注意:变量也可以不声明,直接使用,但为了规范,需要先声明,后使用。​ var num1 = 123;       /...

【Web前端】慕课网—JavaScript进阶篇10-1编程挑战

前言慕课网链接 任务大体上已经实现了,切换内容那部分还可以优化一下,本人对于节点方面还很模糊,由于困了……还有强迫症,目前先这样写着,实现效果的说。如果有对于这部分有好的建议或者意见,欢迎留言,谢谢大...
  • gyjyywc
  • gyjyywc
  • 2016年11月22日 01:44
  • 528

JavaScript -- 进阶篇

一、JS基础语法 1.1:什么是变量?什么是变量?从字面上看,变量是可变的量;从编程角度讲,变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服、玩具、水...

JavaScript学习笔记-进阶篇

这周学习的JavaScript。 课程名:JavaScript进阶篇 课程地址:慕课网 http://www.imooc.com/learn/10 整理笔记如下: 时间:2015年01月06日...

7月29日--javascript进阶篇4

1.认识DOM 在javascript基础(7.25)中已经简单的介绍过元素节点,文本节点,属性节点 节点属性: nodeName    返回一个字符串,其内容是给定节点的名字 nodeTyp...

《JavaScript程序设计》课堂交流区问题汇总(进阶篇)

本课程为网易云课堂 - - 前端开发工程师 - - 《JavaScript程序设计》 《JavaScript程序设计》课堂交流区问题汇总...

JavaScript进阶篇之一

JS基础知识 声明变量 var : 找盒子的动作 变量可以不声明,直接使用(不建议) 表达式 一个表达式可以包含常数或变量 表达式是一个运算后的值,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript进阶篇
举报原因:
原因补充:

(最多只允许输入30个字)