求南征北战 生来倔强mp3的生来倔强百度云，必采纳，谢谢
点击联系发帖人
时间：2017-10-06 13:08
Node是一个接口，中文叫节点，很多类型的DOM元素都是继承于它，都共享着相同的基本属性和方法。常见的Node有 element，text，attribute，comment，document 等（所以要注意 节点 和 元素 的区别，元素属于节点的一种）。
Node有一个属性 nodeType 表示Node的类型，它是一个整数，其数值分别表示相应的Node类型，具体如下：{
ELEMENT_NODE: 1, // 元素节点
ATTRIBUTE_NODE: 2, // 属性节点
TEXT_NODE: 3, // 文本节点
DATA_SECTION_NODE: 4,
ENTITY_REFERENCE_NODE: 5,
ENTITY_NODE: 6,
PROCESSING_INSTRUCTION_NODE: 7,
COMMENT_NODE: 8, // 注释节点
DOCUMENT_NODE: 9, // 文档
DOCUMENT_TYPE_NODE: 10,
DOCUMENT_FRAGMENT_NODE: 11, // 文档碎片
NOTATION_NODE: 12,
DOCUMENT_POSITION_DISCONNECTED: 1,
DOCUMENT_POSITION_PRECEDING: 2,
DOCUMENT_POSITION_FOLLOWING: 4,
DOCUMENT_POSITION_CONTAINS: 8,
DOCUMENT_POSITION_CONTAINED_BY: 16,
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32
NodeList 对象是一个节点的集合，一般由 Node.childNodes 、 document.getElementsByName 和 document.querySelectorAll 返回的。
不过需要注意， Node.childNodes 、 document.getElementsByName 返回的 NodeList 的结果是实时的（此时跟HTMLCollection比较类似），而 document.querySelectorAll 返回的结果是固定的，这一点比较特殊。
举例如下：var childNodes = document.body.childN
console.log(childNodes.length); // 如果假设结果是“2”
document.body.appendChild(document.createElement('div'));
console.log(childNodes.length); // 此时的输出是“3”
HTMLCollection是一个特殊的NodeList，表示包含了若干元素（元素顺序为文档流中的顺序）的通用集合，它是实时更新的，当其所包含的元素发生改变时，它会自动更新。另外，它是一个伪数组，如果想像数组一样操作它们需要像 Array.prototype.slice.call(nodeList, 2) 这样调用。
document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；
document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；
document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。
document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。
document.querySelector ：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。
document.querySelectorAll ：返回一个 NodeList ，IE8+(含）。
document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；
节点创建API主要包括 createElement 、 createTextNode 、 cloneNode 和 createDocumentFragment 四个方法。
创建元素：var elem = document.createElement(&div&);
elem.id = 'test';
elem.style = 'color: red';
elem.innerHTML = '我是新创建的节点';
document.body.appendChild(elem);
通过 createElement 创建的元素并不属于 document 对象，它只是创建出来，并未添加到html文档中，要调用 appendChild 或 insertBefore 等方法将其添加到HTML文档中。
创建文本节点：var node = document.createTextNode(&我是文本节点&);
document.body.appendChild(node);
克隆一个节点： node.cloneNode(true/false) ，它接收一个bool参数，用来表示是否复制子元素。var from = document.getElementById(&test&);
var clone = from.cloneNode(true);
clone.id = &test2&;
document.body.appendChild(clone);
克隆节点并不会克隆事件，除非事件是用 &div onclick=&test()&&&/div& 这种方式绑定的，用 addEventListener 和 node.onclick= 方式绑定的都不会复制。
本方法用来创建一个 DocumentFragment ，也就是文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，大量操作DOM时用它可以大大提升性能。
假设现有一题目，要求给ul添加10000个li，我们先用最简单的拼接字符串的方式来实现：&ul id=&ul&&&/ul&
(function()
var start = Date.now();
var str = '';
for(var i=0; i&10000; i++)
str += '&li&第'+i+'个子节点&/li&';
document.getElementById('ul').innerHTML =
console.log('耗时：'+(Date.now()-start)+'毫秒'); // 44毫秒
再换逐个append的方式，不用说，这种方式效率肯定低：&ul id=&ul&&&/ul&
(function()
var start = Date.now();
var str = '',
var ul = document.getElementById('ul');
for(var i=0; i&10000; i++)
li = document.createElement('li');
li.textContent = '第'+i+'个子节点';
ul.appendChild(li);
console.log('耗时：'+(Date.now()-start)+'毫秒'); // 82毫秒
最后再试试文档碎片的方法，可以预见的是，这种方式肯定比第二种好很多，但是应该没有第一种快：&ul id=&ul&&&/ul&
(function()
var start = Date.now();
var str = '',
var ul = document.getElementById('ul');
var fragment = document.createDocumentFragment();
for(var i=0; i&10000; i++)
li = document.createElement('li');
li.textContent = '第'+i+'个子节点';
fragment.appendChild(li);
ul.appendChild(fragment);
console.log('耗时：'+(Date.now()-start)+'毫秒'); // 63毫秒
节点修改API都具有下面这几个特点：
不管是新增还是替换节点，如果其原本就在页面上，那么原来位置的节点将被移除；修改之后节点本身绑定的事件不会消失；
这个其实前面已经多次用到了，语法就是：
parent.appendChild(child);
它会将child追加到parent的子节点的最后面。另外，如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到新的位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，且其事件会保留。
将某个节点插入到另外一个节点的前面，语法：parentNode.insertBefore(newNode, refNode);
这个API个人觉得设置的非常不合理，因为插入节点只需要知道newNode和refNode就可以了，parentNode是多余的，所以jQuery封装的API就比较好：newNode.insertBefore(refNode); // 如 $(&p&).insertBefore(&#foo&);
所以切记不要把这个原生API和jQuery的API使用方法搞混了！为了加深理解，这里写一个简单的例子：&div id=&parent&&
我是父节点
&div id=&child&&
我是旧的子节点
&input type=&button& id=&insertNode& value=&插入节点& /&
var parent = document.getElementById(&parent&);
var child = document.getElementById(&child&);
document.getElementById(&insertNode&).addEventListener('click', function()
var newNode = document.createElement(&div&);
newNode.textContent = &我是新节点&;
parent.insertBefore(newNode, child);
}, false);
关于第二个参数：
refNode是必传的，如果不传该参数会报错；如果refNode是undefined或null，则insertBefore会将节点添加到末尾；
removeChild用于删除指定的子节点并返回子节点，语法：var deletedChild = parent.removeChild(node);
deletedChild指向被删除节点的引用，它仍然存在于内存中，可以对其进行下一步操作。另外，如果被删除的节点不是其子节点，则将会报错。一般删除节点都是这么删的：function removeNode(node)
if(node.parentNode) node.parentNode.removeChild(node);
replaceChild用于将一个节点替换另一个节点，语法：parent.replaceChild(newChild, oldChild);
DOM中的节点相互之间存在着各种各样的关系，如父子关系，兄弟关系等。
parentNode ：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment；parentElement ：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null；
children ：返回一个实时的 HTMLCollection ，子节点都是Element，IE9以下浏览器不支持；childNodes ：返回一个实时的 NodeList ，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；firstChild ：返回第一个子节点，不存在返回null，与之相对应的还有一个 firstElementChild ；lastChild ：返回最后一个子节点，不存在返回null，与之相对应的还有一个 lastElementChild ；
previousSibling ：节点的前一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。nextSibling ：节点的后一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。previousElementSibling ：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。nextElementSibling ：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持。
给元素设置属性：element.setAttribute(name, value);
其中name是特性名，value是特性值。如果元素不包含该特性，则会创建该特性并赋值。
getAttribute返回指定的特性名相应的特性值，如果不存在，则返回null：var value = element.getAttribute(&id&);
通过 element.sytle.xxx 只能获取到内联样式，借助 window.getComputedStyle 可以获取应用到元素上的所有样式，IE8或更低版本不支持此方法。var style = window.getComputedStyle(element[, pseudoElt]);
getBoundingClientRect 用来返回元素的大小以及相对于浏览器可视窗口的位置，用法如下：var clientRect = element.getBoundingClientRect();
clientRect是一个 DOMRect 对象，包含width、height、left、top、right、bottom，它是相对于窗口顶部而不是文档顶部，滚动页面时它们的值是会发生变化的。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：457136次
积分：10662
积分：10662
排名：第1224名
原创：575篇
转载：219篇
评论：94条
文章：10篇
阅读：18459
(65)(48)(47)(22)(12)(22)(53)(48)(56)(57)(219)(102)(7)(1)(13)(22)您好，游客
>> JS获取节点的兄弟,父级,子级元素的方法/如何获取父元素下的第一个子元素
JS获取节点的兄弟,父级,子级元素的方法/如何获取父元素下的第一个子元素
浏览次数3218
JS获取节点的兄弟,父级,子级元素的方法
本篇文章主要是对JS获取节点的兄弟,父级,子级元素的方法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。
JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素
复制代码&&&&代码如下:
&div id="test"&
&div&&/div&
&div&&/div&
原生的JS获取ID为test的元素下的子元素。可以用：
var a = docuemnt.getElementById("test").getElementsByTagName("div");
这样是没有问题的
此时a.length=2；
但是如果我们换另一种方法
var b =document.getElementById("test").childN
此时b.length 在IE浏览器中没问题，其依旧等于2，但是在FF浏览器中则会使4，是因为FF把换行也当做一个元素了。
所以，在此，我们就要做处理了，需遍历这些元素，把元素类型为空格而且是文本都删除。
复制代码&&&&代码如下:
function del_ff(elem){
var elem_child = elem.childN
for(var i=0; i&elem_child.i++){
if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)
上述函数遍历子元素，当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。
nodeNames可以得到一个节点的节点类型，/\s/是非空字符在JS里的正则表达式。前面加！,则表示是空字符
test() 方法用于检测一个字符串是否匹配某个模式.语法是： RegExpObject.test(string)
如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
nodeValue表示得到这个节点里的值。
removeChild则是删除元素的子元素。
之后，在调用子，父，兄，这些属性之前，调用上面的函数把空格清理一下就可以了
复制代码&&&&代码如下:
&div id="test"&
&div&&/div&
&div&&/div&
function dom() {
var s= document.getElementById("test");
del_ff(s);
//清理空格
var chils= s.childN
//得到s的全部子节点
var par=s.parentN
//得到s的父节点
var ns=s.nextS
//获得s的下一个兄弟节点
var ps=s.previousS
//得到s的上一个兄弟节点
var fc=s.firstC
//获得s的第一个子节点
var lc=s.lastC
//获得s的最后一个子节点}
下面介绍JQUERY的父，子，兄弟节点查找方法
jQuery.parent(expr)
找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个
jQuery对象返回，children()则只会返回节点
jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll()，返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll()，返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点，不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如
$("p"),find("span"),是从&p&元素开始找&span&,等同于$("p span")
学习来源：http://www.jb51.net/article/45372.htm
js如何获取父元素下的第一个子元素
当加载列表时，默认希望选中第一条。top_menu 为ul的ID
通过 $("#top_menu li:first") 就可以获取到 ul下第一个li标签。然后就可以利用
例如 修改属性：$("#top_menu li:first").attr("class","select");
触发事件：$("#top_menu li:first").click();
如果想获取li下的 a标签，如下：
$("#top_menu li:first a")
也可以 修改属性：$("#top_menu li:first a").attr("","");
触发事件：$("#top_menu li:first a").click();
&ul class="nav white" id="top_menu" name="top_menu"&
&!-- 一级菜单 --&
&s:iterator value="list" status="st"&
&li&&a onclick=""&&s:property value="menuName" /&&/a&&/li&
&/s:iterator&
学习来源：.cn/s/blog_67b9ad8d0100xmx3.html
上篇文章：
下篇文章：
需要登录才能发表评论！
才能发表评论
日期： 评论：5 浏览：8134
日期： 评论：5 浏览：2814
日期： 评论：4 浏览：2156
日期： 评论：3 浏览：2945
日期： 评论：3 浏览：2301
日期： 评论：2 浏览：14951.元素.firstChild : 只读属性，第一个子节点
标准下：会包含文本类型的子节点。
非标准下：只包含元素类型子节点。
元素.firstElementChild : 只读属性，第一个元素子节点，等价于元素.children[0]
标准和非标准下都是获取第一个元素子节点。
2.元素.lastChild : 只读属性，最后一个子节点
元素.lastElementChild : 只读属性，最后一个元素子节点
3.元素.nextSibling: 只读属性，下一个兄弟节点
元素.nextElementSibling: 只读属性，下一个兄弟元素节点
4.元素.previousSibling: 只读属性，上一个兄弟节点
元素.previousElementSibling: 只读属性，上一个兄弟元素节点
兼容写法：
&!DOCTYPE html&
&title&元素兼容&/title&
&ul id="ul1"&
&li&111111&/li&
&li&222222&/li&
&li&333333&/li&
&li&444444&/li&
&script type="text/javascript"&
var oUl = document.getElementById('ul1');
var oFirst = oUl.firstElementChild || oUl.firstC
var oLast = oUl.lastElementChild
|| oUl.lastC
var oNext = oFirst.nextElementSibling || oFirst.nextS
var oPrev = oLast.previousElementSibling || oLast.previousS
oFirst.style.backgroundColor = 'red';
oLast.style.backgroundColor = 'blue';
oNext.style.backgroundColor = 'pink';
oPrev.style.backgroundColor = 'brown';
阅读(...) 评论()JavaScript 进阶篇的学习~ - DiscretＯrz - 博客园
随笔 - 15, 文章 - 0, 评论 - 1, 引用 - 0
---恢复内容开始---
你知道吗，Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构)，知道了CSS样式(也称为表示)，会使用HTML+CSS创建一个漂亮的页面，但这还不够，它只是静态页面而已。我们还需使用JavaScript增加行为，为网页添加动态效果。准备好，让JavaScript带你进入新境界吧!
JavaScript能做什么？
1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)
2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)
JS进阶篇学习什么？
在JavaScript入门篇中，我们学习了如何插入JS、输出内容及简单的DOM操作，JavaScript进阶篇让您进一步的了解JS的变量、数组、函数、语法、对象、事件、DOM操作，制作简单的网页动态效果。
什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服、玩具、水果...等。
我们为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。
我们赶快给变量取个好名字吧!变量名字可以任意取，只不过取名字要遵循一些规则:
1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下:
//开头不能用数字
%sum //开头不能用除(_ $)外特殊符号,如(%
sum+num //开头中间不能使用除(_ $)外特殊符号，如(%
2.变量名区分大小写，如:A与a是两个不同变量。
3.不允许使用JavaScript关键字和保留字做变量名。
我们要使用盒子装东西,是不是先要找到盒子,那在编程中，这个过程叫声明变量,找盒子的动作，如何表示：
声明变量语法: var 变量名;
var就相当于找盒子的动作，在JavaScript中是关键字（即保留字），这个关键字的作用是声明变量，并为"变量"准备位置(即内存）。
//声明一个变量mynum
当然，我们可以一次找一个盒子，也可以一次找多个盒子，所以Var还可以一次声明多个变量，变量之间用","逗号隔开。
var num1,mun2 ; //声明一个变量num1
注意:变量也可以不声明，直接使用，但为了规范，需要先声明，后使用。
我们可以把变量看做一个盒子,盒子用来存放物品,那如何在变量中存储内容呢?
我们使用"="号给变量存储内容,看下面的语句:
var mynum = 5 ; //声明变量mynum并赋值。
这个语句怎么读呢？ 给变量mynum赋值，值为5。我们也可以这样写:
//声明变量mynum
mynum = 5 ; //给变量mynum赋值
注:这里&"="号的作用是给变量赋值，不是等于号。
盒子可以装衣服、玩具、水果...等。其实，变量是无所不能的容器，你可以把任何东西存储在变量里，如数值、字符串、布尔值等，例如：
var num1 = 123;
// 123是数值
var num2 = "一二三";
//"一二三"是字符串
//布尔值true（真），false(假)
其中，num1变量存储的内容是数值；num2变量存储的内容是字符串，字符串需要用一对引号""括起来，num3变量存储的内容是布尔值(true、false)。
表达式与数学中的定义相似，表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。
我们先看看下面的JavaScript语句：
生活中“再见”表达方法很多，如:英语(goodbye）、网络语（88）、肢体语（挥挥手）等。在JavaScript表达式无处不在，所以一定要知道可以表达哪些内容，看看下面几种情况:
注意:串表达式中mychar是变量
注意:数值表达式中num是变量
注意:布尔表达式中num是变量
操作符是用于在JavaScript中指定一定动作的符号。
（1）操作符
看下面这段JavaScript代码。
sum = numa +
其中的"="和"+"都是操作符。
JavaScript中还有很多这样的操作符，例如，算术操作符(+、-、*、/等)，比较操作符(&、&、&=、&=等)，逻辑操作符(&&、||、！)。
注意: “=” 操作符是赋值，不是等于。
(2)&"+"操作符
算术运算符主要用来完成类似加减乘除的工作，在JavaScript中，“+”不只代表加法，还可以连接两个字符串，例如：
mystring = "Java" + "Script"; // mystring的值“JavaScript”这个字符串
我们先来做道数学题，数学考试成绩中，小明考了90分，小红考了95分，问谁考的分数高?
答: 因为“95 & 90”，所以小红考试成绩高。
其中大于号"&" 就是比较操作符，小红考试成绩和小明考试成绩就是操作数，并且是两个操作数。
也就是说两个操作数通过比较操作符进行比较，得到值为真（true）和假(false)。
在JavaScript中，这样的比较操作符有很多，这些操作符的含义如下:&
看看下面例子:
var a = 5;//定义a变量，赋值为5
var b = 9; //定义b变量，赋值为9
document.write (a&b); //a小于b的值吗? 结果是真(true)
document.write (a&=b); //a大于或等于b的值吗? 结果是假(false)
document.write (a!=b); //a不等于b的值吗? 结果是真(true)
document.write (a==b); //a等于b的值吗? 结果是假(false)
数学里面的“a&b”，在JavaScript中还表示为a&b；数学中的“b大于a，b小于c”是“a&b&c”，那么在JavaScript中可以用&&表示，如下：
b&a && b&c
//“&&”是并且的意思, 读法"b大于a"并且" b小于c "
好比我们参加高考时,在进入考场前,必须出示准考证和身份证,两者缺一不可，否则不能参加考试，表示如下:
if(有准考证 &&有身份证)
进行考场考试
&“&&”是逻辑与操作符，只有“&&”两边值同时满足(同时为真)，整个表达式值才为真。
逻辑与操作符值表:
注意:&如果A为假，A && B为假，不会在执行B; 反之，如果A为真，要由 B 的值来决定&A && B 的值。
"||"逻辑或操作符，相当于生活中的“或者”，当两个条件中有任一个条件满足，“逻辑或”的运算结果就为“真”。
例如：本周我们计划出游,可是周一至周五工作,所以周六或者周日哪天去都可以。即两天中只要有一天有空，就可以出游了。
c=b&a ||a&b;
//b&a是true，a&b是false，c是true
逻辑或操作符值表:
注意:&如果A为真，A ||&B为真，不会在执行B; 反之，如果A为假，要由 B 的值来决定&A || B 的值。
"!"是逻辑非操作符，也就是"不是"的意思,非真即假，非假即真。好比小华今天买了一个杯子，小明说:"杯子是白色的"，小亮说:“杯子是红色的”，小华说："小明说的不是真话，小亮说的不是假话"。猜猜小华买的什么颜色的杯子，答案：红色杯子。
逻辑非操作符值表:
看看下面代码，变量c的值是什么:
// b&a值是true,! (b&a）值是false
// b&a值是false, ! (b&a）值是true
我们都知道，除法、乘法等操作符的优先级比加法和减法高，例如：
var numa=3;
var numb=6
jq= numa + 30 / 2 - numb * 3;
// 结果为0
如果我们要改变运算顺序，需添加括号的方法来改变优先级:
var numa=3;
var numb=6
jq= ((numa + 30) / (2 - numb)) * 3; //结果是-24.75
操作符之间的优先级（高到低）:
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
如果同级的运算是按从左到右次序进行,多层括号由里向外。
var numa=3;
var numb=6;
jq= numa + 30 &10 && numb * 3&2;
//结果为false
我们知道变量用来存储数据，一个变量只能存储一个内容。假设你想存储10个人的姓名或者存储20个人的数学成绩，就需要10个或20个变量来存储，如果需要存储更多数据，那就会变的更麻烦。我们用数组解决问题，一个数组变量可以存放多个数据。好比一个团，团里有很多人，如下我们使用数组存储5个学生成绩。
数组是一个值的集合，每个值都有一个索引号，从0开始，每个索引都有一个相应的值，根据需要添加更多数值。
使用数组之前首先要创建，而且需要把数组本身赋至一个变量。好比我们出游，要组团，并给团定个名字“云南之旅”。
创建数组语法：
var myarray=new Array();
&&& & & &&&我们创建数组的同时，还可以为数组指定长度，长度可任意指定。
var myarray= new Array(8); //创建数组，存储8个数据。
注意：1.创建的新数组是空数组，没有值，如输出，则显示undefined。2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。
数组创建好，接下来我们为数组赋值。我们把数组看似旅游团的大巴车，大巴车里有很多位置，每个位置都有一个号码，顾客要坐在哪个位置呢？&
第一步：组个大巴车
第二步：按票对号入座
大巴车的1号座位是张三
大巴车的2号座位是李四
数组的表达方式：
第一步：创建数组var myarr=new Array();
第二步：给数组赋值
myarr[1]=" 张三";
myarr[2]=" 李四";
下面创建一个数组，用于存储5个人的数学成绩。
var myarray=new Array(); //创建一个新的空数组
myarray[0]=66; //存储第1个人的成绩
myarray[1]=80; //存储第2个人的成绩
myarray[2]=90; //存储第3个人的成绩
myarray[3]=77; //存储第4个人的成绩
myarray[4]=59; //存储第5个人的成绩
注意：数组每个值有一个索引号，从0开始。
我们还可以用简单的方法创建上面的数组和赋值：
第一种方法：
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
第二种方法：
var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
注意：数组存储的数据可以是任何类型（数字、字符、布尔值等）
上一节中，我们使用myarray变量存储了5个人的成绩，现在多出一个人的成绩，如何存储呢？&
只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素。
myarray[5]=88; //使用一个新索引，为数组增加一个新元素
如果我们想知道数组的大小，只需引用数组的一个属性length。Length属性表示数组的长度，即数组中元素的个数。
myarray. //获得数组myarray的长度
注意：因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。如数组的长度是5，数组的上下限分别是0和4。
var arr=[55,32,5,90,60,98,76,54];//包含8个数值的数组arr
document.write(arr.length); //显示数组长度8
document.write(arr[7]); //显示第8个元素的值54
同时，JavaScript数组的length属性是可变的，这一点需要特别注意。
arr.length=10; //增大数组的长度
document.write(arr.length); //数组长度已经变为10
数组随元素的增加，长度也会改变，如下:
var arr=[98,76,54,56,76]; // 包含5个数值的数组
document.write(arr.length); //显示数组的长度5
arr[15]=34;
//增加元素，使用索引为15,赋值为34
alert(arr.length); //显示数组的长度16
一维数组，我们看成一组盒子，每个盒子只能放一个内容。
一维数组的表示: myarray[ ]
二维数组，我们看成一组盒子，不过每个盒子里还可以放多个盒子。
二维数组的表示: myarray[ ][ ]
注意:&二维数组的两个维度的索引值也是从0开始，两个维度的最后一个索引值为长度-1。&
1. 二维数组的定义方法一
var myarr=new Array();
//先声明一维
for(var i=0;i&2;i++){
//一维长度为2
myarr[i]=new Array();
//再声明二维
for(var j=0;j&3;j++){
//二维长度为3
myarr[i][j]=i+j;
// 赋值，每个数组元素的值为i+j
注意:&关于for 循环语句，请看第四章4-5 。
将上面二维数组，用表格的方式表示:
2.&二维数组的定义方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
myarr[0][1]=5;&//将5的值传入到数组中，覆盖原有值。
说明:&myarr[0][1] ,0&表示表的行，1表示表的列。
if语句是基于条件成立才执行相应代码时使用的语句。
{ 条件成立时执行代码}
注意：if小写，大写字母（IF）会出错！
假设你应聘web前端技术开发岗位，如果你会HTML技术，你面试成功，欢迎加入公司。代码表示如下:
&script type="text/javascript"&
var mycarrer = "HTML";
if (mycarrer == "HTML")
document.write("你面试成功，欢迎加入公司。");
要在多组语句中选择一组来执行，使用if..else嵌套语句。
{ 条件1成立时执行的代码}
{ 条件2成立时执行的代码}
{ 条件n成立时执行的代码}
{ 条件1、2至n不成立时执行的代码}
假设数学考试，小明考了86分，给他做个评价，60分以下的不及格，60(包含60分)-75分为良好，75(包含75分)-85分为很好，85(包含85分)-100优秀。
代码表示如下:
当有很多种选项的时候，switch比if else使用更方便。
switch(表达式)
执行代码块 1
执行代码块 2
执行代码块 n
与 case值1 、 case值2...case值n 不同时执行的代码
Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。
假设评价学生的考试成绩，10分满分制，我们按照每一分一个等级将成绩分等，并根据成绩的等级做出不同的评价。
评语: 及格，加油!
注意:记得在case所执行的语句后添加上一个break语句。否则就直接继续执行下面的case中的语句，看以下代码:
评语: 继续努力!
评语: 及格，加油!
评语: 凑合，奋进
评语: 很棒，很棒
评语: 高手，大牛
在上面的代码中，没有break停止语句，如果成绩是4分，则case 5后面的语句将会得到执行，同样，case6、7-10后面的语句都会得到执行。
很多事情不只是做一次，要重复做。如打印10份试卷，每次打印一份，重复这个动作，直到打印完成。这些事情，我们使用循环语句来完成，循环语句，就是重复执行一段代码。
for语句结构：
for(初始化变量;循环条件;循环迭代)
假如，一个盒子里有6个球，我们每次取一个，重复从盒中取出球，直到球取完为止。
&script type="text/javascript"&
var num=1;
for (num=1;num&=6;num++)& //初始化值；循环条件；循环后条件值更新
document.write("取出第"+num+"个球&br /&");
和for循环有相同功能的还有while循环, while循环重复执行一段代码，直到某个条件不再满足。
while语句结构：
while(判断条件)
使用while循环，完成从盒子里取球的动作，每次取一个，共6个球。
&script type="text/javascript"&
var num=0;
//初始化值
while (num&=6)
//条件判断
document.write("取出第"+num+"个球&br /&");
num=num+1;
//条件值更新
do while结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。
do...while语句结构：
&&& 循环语句
while(判断条件)
我们试着输出5个数字。
&script type="text/javascript"&
&& num= 1;
&&&& document.write("数值为:" +& num+"&br /&");
&&&& num++; //更新条件
&& while (num&=5)
为什么呢?我们来看下执行思路：
在while、for、do...while、while循环中使用break语句退出当前循环，直接执行后面的代码。
格式如下：
for(初始条件;判断条件;循环后条件值更新)
if(特殊情况)
当遇到特殊情况的时候，循环就会立即结束。看看下面的例子，输出10个数，如果数值为5，就停止输出。
注:当num=5的时候循环就会结束，不会输出后面循环的内容。
continue的作用是仅仅跳过本次循环，而整个循环体继续执行。
语句结构：
for(初始条件;判断条件;循环后条件值更新)
if(特殊情况)
上面的循环中，当特殊情况发生的时候，本次循环将被跳过，而后续的循环则不会受到影响。好比输出10个数字，如果数字为5就不输出了。
注:上面的代码中，num=5的那次循环将被跳过
函数的作用，可以写一次代码，然后反复地重用这个代码。
如:我们要完成多组数和的功能。
sum = 3+2;
alert(sum);
alert(sum);
//不停重复两行代码
如果要实现8组数的和，就需要16行代码，实现的越多，代码行也就越多。所以我们可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省去重复输入大量代码的麻烦。
使用函数完成:
function add2(a,b){
alert(sum);
只需写一次就可以
add2(3,2);
add2(7,8);
//只需调用函数就可以
如何定义一个函数呢？看看下面的格式：
function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。
我们完成对两个数求和并显示结果的功能。并给函数起个有意义的名字：“add2”，代码如下：
&script type="text/javascript"&
function add2(){
sum = 3 + 2;
alert(sum);
思考:上一节函数中，通过"document.write"把结果输出来，如果想对函数的结果进行处理怎么办呢？
我们只要把"document.write(sum)"这行改成如下代码：
function add2(x,y)
return //返回函数值,return后面的值叫做返回值。
还可以通过变量存储调用函数的返回值，代码如下:
result = add2(3,4);//语句执行后,result变量中的值为7.
注意:函数中参数和返回值不只是数字，还可以是字符串等其它类型。&
JavaScript&创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。
主要事件表:
鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
当把鼠标移动到"登录"按钮上，然后再移开时，触发onmouseout事件，调用函数message()，代码如下:
当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
如下代码, 当将光标移到文本框内时，即焦点在文本框内，触发onfocus 事件，并调用函数message()。
运行结果：
通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。
如下代码,当用户将文本框内的文字改变后，弹出对话框“您改变了文本内容！”。
运行结果：
事件会在页面加载完成后，立即发生，同时执行被调用的程序。注意：1.&加载页面时，触发onload事件，事件写在&body&标签内。
& & & 2. 此节的加载页面，可理解为打开一个新页面时。如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。
运行结果：
当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。
注意：不同浏览器对onunload事件支持不同。
如下代码,当退出页面时，弹出对话框“您确定离开该网页吗？”。
运行结果：（IE浏览器）
---恢复内容结束---
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value；
&!DOCTYPE html&&html& &head&
&title& 事件&/title&
&script type="text/javascript"&
function count(){
//获取第一个输入框的值
var mychar1=document.getElementById("txt1").value; //获取第二个输入框的值
var mychar2=document.getElementById("txt2"). //获取选择框的值
var mychar3=document.getElementById("select").
var result=""; //获取通过下拉框来选择的值来改变加减乘除的运算法则
swith(mychar){
result=parseFloat(mychar1)+parseFloat(mychar2);
result=parseFloat(mychar1)*parseFloat(mychar2);
result=parseFloat(mychar1)/parseFloat(mychar2);
result=parseFloat(mychar1)-parseFloat(mychar2);
//设置结果输入框的值
document.getElementById("fruit").value=
&input type='text' id='txt1' /&
&select id='select'&
&option value='+'&+&/option&
&option value="-"&-&/option&
&option value="*"&*&/option&
&option value="/"&/&/option&
&input type='text' id='txt2' /&
&input type='button' value=' = ' /& &!--通过 = 按钮来调用创建的函数，得到结果--&
&input type='text' id='fruit' /&
JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。
对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；
JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：
var objectName =new Array();//使用new关键字定义对象
var objectName =[];
访问对象属性的语法:
objectName.propertyName
如使用 Array 对象的 length 属性来获得数组的长度：
var myarray=new Array(6);//定义数组对象
var myl=myarray.//访问数组长度length属性
以上代码执行后，myl的值将是：6
访问对象的方法：
objectName.methodName()
如使用string 对象的 toUpperCase() 方法来将文本转换为大写：
var mystr="Hello world!";//创建一个字符串
var request=mystr.toUpperCase(); //使用字符串对象方法
以上代码执行后，request的值是：HELLO WORLD!
日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。
定义一个时间对象&:
var Udate=new Date();
注意:使用关键字new，Date()的首字母必须大写。&
使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)。
如果要自定义初始值，可以用以下方法：
var d = new Date();
var d = new Date('Oct 1, 2012'); //日
我们最好使用下面介绍的“方法”来严格定义时间。
访问方法语法：“&日期对象&.&方法&”
Date对象中处理时间和日期的常用方法：
get/setFullYear()&返回/设置年份，用四位数表示。
var mydate=new Date();//当前时间日
document.write(mydate+"&br&");//输出当前时间
document.write(mydate.getFullYear()+"&br&");//输出当前年份
mydate.setFullYear(81); //设置年份
document.write(mydate+"&br&"); //输出年份被设定为 0081年。
注意:不同浏览器， mydate.setFullYear(81)结果不同，年份被设定为 0081或81两种情况。
Thu Mar 06 :47 GMT+0800
Thu Mar 06 :47 GMT+0800
1.结果格式依次为：星期、月、日、年、时、分、秒、时区。(火狐浏览器)
2. 不同浏览器，时间格式有差异。
getDay()&返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成，代码如下:
&script type="text/javascript"&
var mydate=new Date();//定义日期对象
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值
var mynum=mydate.getDay();//返回值存储在变量mynum中
document.write(mydate.getDay());//输出getDay()获取值
document.write("今天是："+ weekday[mynum]);//输出星期几
注意：以上代码是在日，星期五运行。
今天是：星期五
get/setTime()&返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。
如果将目前日期对象的时间推迟1小时，代码如下:
&script type="text/javascript"&
var mydate=new Date();
document.write("当前时间："+mydate+"&br&");
mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
document.write("推迟一小时时间：" + mydate);
当前时间：Thu Mar 6 11:46:27 UTC+
推迟一小时时间：Thu Mar 6 12:46:27 UTC+
注意:1. 一小时 60 分，一分 60 秒，一秒 1000 毫秒
&& &&&2. 时间推迟 1 小时,就是: “x.setTime(x.getTime() + 60 * 60 * 1000);”
harAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
stringObject.charAt(index)
参数说明：
注意：1.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。
2.如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。
如:在字符串 "I love JavaScript!" 中，返回位置2的字符：
&script type="text/javascript"&
var mystr="I love JavaScript!"
document.write(mystr.charAt(2));
注意：一个空格也算一个字符。
以上代码的运行结果：
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
stringObject.indexOf(substring, startpos)
参数说明：
1.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。
2.可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。
3.如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
注意：1.indexOf() 方法区分大小写。
2.如果要检索的字符串值没有出现，则该方法返回 -1。
例如: 对 "I love JavaScript!" 字符串内进行不同的检索：
&script type="text/javascript"&
var str="I love JavaScript!"
document.write(str.indexOf("I") + "&br /&");
document.write(str.indexOf("v") + "&br /&");
document.write(str.indexOf("v",8));
以上代码的输出：
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
stringObject.substring(starPos,stopPos)&
1. 返回的内容是从&start开始(包含start位置的字符)到&stop-1 处的所有字符，其长度为&stop&减start。
2. 如果参数&start&与&stop&相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
3. 如果&start&比&stop&大，那么该方法在提取子串之前会先交换这两个参数。
使用 substring() 从字符串中提取字符串，代码如下：
&script type="text/javascript"&
& var mystr="I love JavaScript";
& document.write(mystr.substring(7));
& document.write(mystr.substring(2,6));
JavaScript
substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。
stringObject.substr(startPos,length)
注意：如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
如果startPos为负数且绝对值大于字符串长度，startPos为0。
使用 substr() 从字符串中提取一些字符，代码如下：
&script type="text/javascript"&
var mystr="I love JavaScript!";
document.write(mystr.substr(7));
document.write(mystr.substr(2,4));
Math对象，提供对数据的数学计算。
使用 Math 的属性和方法，代码如下：
&script type="text/javascript"&
var mypi=Math.PI;
var myabs=Math.abs(-15);
document.write(mypi);
document.write(myabs);
注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。
Math 对象属性
Math 对象方法
运行结果：
JavaScript!
ceil() 方法可对一个数进行向上取整。
Math.ceil(x)
注意：它返回的是大于或等于x，并且与x最接近的整数。
我们将把 ceil() 方法运用到不同的数字上，代码如下：
&script type="text/javascript"&
document.write(Math.ceil(0.8) + "&br /&")
document.write(Math.ceil(6.3) + "&br /&")
document.write(Math.ceil(5) + "&br /&")
document.write(Math.ceil(3.5) + "&br /&")
document.write(Math.ceil(-5.1) + "&br /&")
document.write(Math.ceil(-5.9))
运行结果：
floor() 方法可对一个数进行向下取整。
Math.floor(x)
参数说明：
注意：返回的是小于或等于x，并且与 x 最接近的整数。
我们将在不同的数字上使用 floor() 方法，代码如下:
&script type="text/javascript"&
document.write(Math.floor(0.8)+ "&br&")
document.write(Math.floor(6.3)+ "&br&")
document.write(Math.floor(5)+ "&br&")
document.write(Math.floor(3.5)+ "&br&")
document.write(Math.floor(-5.1)+ "&br&")
document.write(Math.floor(-5.9))
运行结果：
round() 方法可把一个数字四舍五入为最接近的整数。
Math.round(x)
参数说明：
1. 返回与 x 最接近的整数。
2. 对于 0.5，该方法将进行上舍入。(5.5 将舍入为 6)
3.&如果&x 与两侧整数同等接近，则结果接近 +∞方向的数字值 。(如&-5.5 将舍入为 -5; -5.52&将舍入为 -6),如下图:
把不同的数舍入为最接近的整数,代码如下：
&script type="text/javascript"&
document.write(Math.round(1.6)+ "&br&");
document.write(Math.round(2.5)+ "&br&");
document.write(Math.round(0.49)+ "&br&");
document.write(Math.round(-6.4)+ "&br&");
document.write(Math.round(-6.6));
运行结果：
random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。
Math.random();
注意：返回一个大于或等于 0 但小于 1 的符号为正的数字值。
我们取得介于 0 到 1 之间的一个随机数，代码如下：
&script type="text/javascript"&
document.write(Math.random());
运行结果：
注意:因为是随机数，所以每次运行结果不一样，但是0 ~ 1的数值。
获得0 ~ 10之间的随机数，代码如下:
&script type="text/javascript"&
document.write((Math.random())*10);
运行结果：
数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的
数组定义的方法：
1. 定义了一个空数组:
var& 数组名= new Array();
2. 定义时指定有n个空元素的数组：
var 数组名 =new Array(n);
3.定义数组的时候，直接初始化数据：
var &数组名 = [&元素1&, &元素2&, &元素3&...];
我们定义myArray数组，并赋值，代码如下：
var myArray = [2, 8, 6];
说明：定义了一个数组 myArray，里边的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。
数组元素使用：
数组名[下标] = 值;
注意: 数组的下标用方括号括起来，从0开始。
数组属性：
length 用法：&数组对象&.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。
数组方法：
concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
arrayObject.concat(array1,array2,...,arrayN)
参数说明：
注意:&&该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
我们创建一个数组，将把 concat() 中的参数连接到数组 myarr 中，代码如下：
&script type="text/javascript"&
& var mya = new Array(3);
& mya[0] = "1";
& mya[1] = "2";
& mya[2] = "3";
& document.write(mya.concat(4,5)+"&br&");
& document.write(mya);
运行结果：
我们创建了三个数组，然后使用 concat() 把它们连接起来，代码如下：
&script type="text/javascript"&
var mya1= new Array("hello!")
&&var mya2= new Array("I","love");
&&var mya3= new Array("JavaScript","!");
&&var mya4=mya1.concat(mya2,mya3);
&&document.write(mya4);
运行结果：
hello!,I,love,JavaScript,!
join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
arrayObject.join(分隔符)
注意：返回一个字符串，该字符串把数组中的各个元素串起来，用&分隔符&置于元素与元素之间。这个方法不影响数组原本的内容。 我们使用join（）方法，将数组的所有元素放入一个字符串中，代码如下：
&script type="text/javascript"&
var myarr = new Array(3);
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join());
运行结果：
I,love,JavaScript
我们将使用分隔符来分隔数组中的元素，代码如下：
&script type="text/javascript"&
var myarr = new Array(3)
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join("."));
运行结果：
I.love.JavaScript
reverse() 方法用于颠倒数组中元素的顺序。
arrayObject.reverse()
注意：该方法会改变原来的数组，而不会创建新的数组。
定义数组myarr并赋值，然后颠倒其元素的顺序：
&script type="text/javascript"&
var myarr = new Array(3)
myarr[0] = "1"
myarr[1] = "2"
myarr[2] = "3"
document.write(myarr + "&br /&")
document.write(myarr.reverse())
运行结果：
slice() 方法可从已有的数组中返回选定的元素。
arrayObject.slice(start,end)
参数说明：
1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
2. 该方法并不会修改数组，而是返回一个子数组。
1. 可使用负值从数组的尾部选取元素。
2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
3. String.slice() 与 Array.slice() 相似。
我们将创建一个新数组，然后从其中选取的元素，代码如下：
&script type="text/javascript"&
var myarr = new Array(1,2,3,4,5,6);
document.write(myarr + "&br&");
document.write(myarr.slice(2,4) + "&br&");
document.write(myarr);
运行结果：
1,2,3,4,5,6
1,2,3,4,5,6
sort()方法使数组中的元素按照一定的顺序排列。
arrayObject.sort(方法函数)
参数说明：
1.如果不指定&方法函数&，则按unicode码顺序排列。
2.如果指定&方法函数&，则按&方法函数&所指定的排序方法排序。
myArray.sort(sortMethod);
注意:&该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：&
& 若返回值&=-1，则表示 A 在排序后的序列中出现在 B 之前。& 若返回值&-1 && &1，则表示 A 和 B 具有相同的排序顺序。& 若返回值&=1，则表示 A 在排序后的序列中出现在 B 之后。
1.使用sort()将数组进行排序，代码如下：
&script type="text/javascript"&
var myarr1 = new Array("Hello","John","love","JavaScript");
var myarr2 = new Array("80","16","50","6","100","1");
document.write(myarr1.sort()+"&br&");
document.write(myarr2.sort());
运行结果：
Hello,JavaScript,John,love
1,100,16,50,6,80
注意:上面的代码没有按照数值的大小对数字进行排序。
2.如要实现这一点，就必须使用一个排序函数，代码如下：
&script type="text/javascript"&
function sortNum(a,b) {
return a -
//升序，如降序，把“a - b”该成“b - a”
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr + "&br&");
document.write(myarr.sort(sortNum));
运行结果：
80,16,50,6,100,1
1,6,16,50,80,100
在执行时,从载入页面后每隔指定的时间执行代码。
setInterval(代码,交互时间);
参数说明：
1. 代码：要调用的函数或要执行的代码串。
2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。
调用函数格式(假设有一个clock()函数):
setInterval("clock()",1000)
setInterval(clock,1000)
我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&计时器&/title&
&script type="text/javascript"&
var int=setInterval(clock, 100)
function clock(){
var time=new Date();
document.getElementById("clock").value =
&input type="text" id="clock" size="50"
clearInterval() 方法可取消由 setInterval() 设置的交互时间。
clearInterval(id_of_setInterval)
参数说明:id_of_setInterval：由 setInterval() 返回的 ID 值。
每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&计时器&/title&
&script type="text/javascript"&
function clock(){
var time=new Date();
document.getElementById("clock").value =
// 每隔100毫秒调用clock函数，并将返回值赋值给i
var i=setInterval("clock()",100);
&input type="text" id="clock" size="50"
&input type="button" value="Stop" onclick="clearInterval(i)"
补充右边编辑器第12行，使用setInterval()计时器，显示动态时间。
补充右边编辑器第18行，点击Stop按钮后，取消计时器。
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
setTimeout(代码,延迟时间);
参数说明：
1. 要调用的函数或要执行的代码串。2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
当我们打开网页3秒后，在弹出一个提示框，代码如下:
&!DOCTYPE HTML&
&script type="text/javascript"&
setTimeout("alert('Hello!')", 3000 );
当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。
&!DOCTYPE HTML&
&script type="text/javascript"&
function tinfo(){
var t=setTimeout("alert('Hello!')",5000);
&input type="button" value="start" onClick="tinfo()"&
要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。
&!DOCTYPE HTML&
&script type="text/javascript"&
var num=0;
function numCount(){
document.getElementById('txt').value=
num=num+1;
setTimeout("numCount()",1000);
&input type="text" id="txt" /&
&input type="button" value="Start" onClick="numCount()" /&
setTimeout()和clearTimeout()一起使用，停止计时器。
clearTimeout(id_of_setTimeout)
参数说明:id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 "Stop" 按钮来停止这个计数器：
&!DOCTYPE HTML&
&script type="text/javascript"&
var num=0,i;
function timedCount(){
& & document.getElementById('txt').value=
& & num=num+1;
& & i=setTimeout(timedCount,1000);
setTimeout(timedCount,1000);
& function stopCount(){
clearTimeout(i);
&input type="text" id="txt"&
&input type="button" value="Stop" onClick="stopCount()"&
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
window.history.[属性|方法]
注意：window可以省略。
History 对象属性
History 对象方法
使用length属性，当前窗口的浏览历史总长度，代码如下：
&script type="text/javascript"&
var HL = window.history.
document.write(HL);
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用于获取或设置窗体的URL，并且可以用于解析URL。
location.[属性|方法]
location对象属性图示:
location 对象属性：
location 对象方法:
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
查看浏览器的名称和版本，代码如下:
&script type="text/javascript"&
var browser=navigator.appN
var b_version=navigator.appV
document.write("Browser name"+browser);
document.write("&br&");
document.write("Browser version"+b_version);
返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.userAgent
几种浏览的user_agent.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。
使用userAgent判断使用的是什么浏览器(假设使用的是IE8浏览器),代码如下:
function validB(){
var u_agent = navigator.userA
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对象用于获取用户的屏幕信息。
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. 如果打开该页面后，如果不做任何操作则5秒后自动跳转到一个新的地址，如慕课网主页。
2. 如果点击“返回”按钮则返回前一个页面。
&!DOCTYPE html&&html& &head&
&title&浏览器对象&/title&
&meta http-equiv="Content-Type" content="text/ charset=gkb"/&
&/head& &body&
&!--先编写好网页布局--&
&h1&操作成功&/h1& &p&&b id="second" &5&/b&
秒后回到主页&a href="javascript:goback();"&返回&/p&
&script type="text/javascript"&
//获取显示秒数的元素，通过定时器来更改秒数。 var sec=document.getElementById("second"); var i =5; var timer=setInterval(function(){
sec.innerHTML =
window.location.href = "/"
//通过window的location和history对象来控制网页的跳转。
function back(){
window.history.go(-1);
} &/script& &/body&&/html&
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM&将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
先来看看下面代码:
将HTML代码分解为DOM节点层次图:
HTML文档可以说由节点构成的集合，DOM节点有:
1.&元素节点：上图中&html&、&body&、&p&等都是元素节点，即标签。
2.&文本节点:向用户展示的内容，如&li&...&/li&中的JavaScript、DOM、CSS等文本。
3.&属性节点:元素属性，如&a&标签的链接属性href=""。
遍历节点树:
以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。
注意:前两个是document方法。
返回带有指定名称的节点对象的集合。
document.getElementsByName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过&id 属性。
1.&因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2.&和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
看看下面的代码:
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
document.getElementsByTagName(Tagname)
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
看看下面代码，通过getElementsByTagName()获取节点。
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3.&TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。
把上面的例子转换到HTML中，如下:
&input type="checkbox" name="hobby" id="hobby1"&
input标签就像人的类别。
name属性就像人的姓名。
id属性就像人的身份证。
方法总结如下:
注意：方法区分大小写
通过下面的例子(6个name="hobby"的复选项，两个按钮)来区分三种方法的不同:
&input type="checkbox" name="hobby" id="hobby1"&
&input type="checkbox" name="hobby" id="hobby2"&
&input type="checkbox" name="hobby" id="hobby3"&
&input type="checkbox" name="hobby" id="hobby4"&
&input type="checkbox" name="hobby" id="hobby5"&
&input type="checkbox" name="hobby" id="hobby6"&
&input type="button" value = "全选" id="button1"&
&input type="button" value = "全不选" id="button1"&
1. document.getElementsByTagName("input")，结果为获取所有标签为input的元素，共8个。
2.&document.getElementsByName("hobby")，结果为获取属性name="hobby"的元素，共6个。
3.&document.getElementById("hobby6")，结果为获取属性id="hobby6"的元素，只有一个，"跑步"这个复选项。
通过元素节点的属性名称获取属性的值。
elementNode.getAttribute(name)
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字
看看下面的代码，获取h1标签的属性值：
h1标签的ID ：alinkh1标签的title ：getAttribute()获取标签的属值
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 永远是 #text4.&文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是&undefined 或 null2. 文本节点的 nodeValue 是文本自身3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性:&节点的类型，是只读的。以下常用的几种结点类型:
元素类型&& &节点类型& 元素 & & & & &1& 属性 & & & & &2& 文本 & & & & &3& 注释 & & & & &8& 文档 & & & & &9
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
elementNode.childNodes
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
我们来看看下面的代码:
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 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。&(以后章节讲解)
获取指定节点的父节点
elementNode.parentNode
注意:父节点只能有一个。
看看下面的例子,获取 P 节点的父节点，代码如下:
&div id="text"&
&p id="con"& parentNode 获取指点节点的父节点&/p&
&script type="text/javascript"&
& var mynode= document.getElementById("con");
& document.write(mynode.parentNode.nodeName);
parentNode 获取指点节点的父节点
访问祖节点:
elementNode.parentNode.parentNode
看看下面的代码:
&div id="text"& &
& & parentNode & & &
& & &span id="con"& 获取指点节点的父节点&/span&
&script type="text/javascript"&
& var mynode= document.getElementById("con");
& document.write(mynode.parentNode.parentNode.nodeName);
parentNode获取指点节点的父节点
注意: 浏览器兼容问题，chrome、firefox等浏览器标签之间的空白也算是一个文本节点。
试一试，通过获取的mylist节点，使用访问父节点parentNode，将"HTML/CSS"课程内容输出。
补充第30行代码，将"HTML/CSS"课程内容输出。
&!DOCTYPE HTML&&html&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8"&&title&无标题文档&/title&&/head&&body&&ul id="con"&&li id="lesson1"&javascript
&li id="tcon"& 基础语法&/li&
&li&流程控制语句&/li&
&li&函数&/li&
&li&事件&/li&
&li&DOM&/li&
&/ul&&/li&&li id="lesson2"&das&/li&&li id="lesson3"&dadf&/li&&li id="lesson4"&HTML/CSS
&li&文字&/li&
&li&段落&/li&
&li&表单&/li&
&li&表格&/li&
&/ul& &/li&&/ul&
type="text/javascript"&
var mylist = document.getElementById("tcon");
document.write(mylist.parentNode.parentNode.parentNode.lastChild.innerHTML);&/script&
&/body&&/html&
1.&nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
nodeObject.previousSibling
说明：如果无此节点，则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如是为元素节点，跳过。
LI = javascript
nextsibling: LI = jquery
在指定节点的最后一个子节点列表之后添加一个新的子节点。
appendChild(newnode)
newnode：指定追加的节点。
我们来看看，div标签内创建一个新的 P 标签，代码如下:
JavaScript
This is a new p
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
insertBefore(newnode,node);
newnode: 要插入的新节点。
node: 指定此节点前插入节点。
我们在来看看下面代码，在指定节点前插入节点。
This is a new p
JavaScript
注意:&otest.insertBefore(newnode,node); 也可以改为:&&otest.insertBefore(newnode,otest.childNodes[0]);&
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
nodeObject.removeChild(node)
node ：必需，指定需要删除的节点。
我们来看看下面代码，删除子点。
删除节点的内容: javascript
注意:&把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。
如果要完全删除对象，给 x 赋 null&值，代码如下:
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。&
node.replaceChild (newnode,oldnew )
newnode : 必需，用于替换 oldnew 的对象。&oldnew : 必需，被 newnode 替换的对象。
我们来看看下面的代码:
效果: 将文档中的 Java 改为 JavaScript。
1.&当 oldnode 被替换时，所有与之相关的属性内容都将被移除。&
2. newnode 必须先被建立。&
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
document.createElement(tagName)
tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
我们来创建一个按钮，代码如下：
&script type="text/javascript"&
var body = document.
var input = document.createElement("input");
input.type = "button";
input.value = "创建一个按钮";
body.appendChild(input);
效果：在HTML文档中，创建一个按钮。
我们也可以使用setAttribute来设置属性，代码如下：
&script type="text/javascript"&
var body= document.
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);
效果：在HTML文档中，创建一个文本框，使用setAttribute设置属性值。 当点击这个文本框时，会弹出对话框“This is a text!”。
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
document.createTextNode(data)
data :&字符串值，可规定此节点的文本。
我们来创建一个&div&元素并向其中添加一条消息，代码如下：
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：
o& window.innerHeight - 浏览器窗口的内部高度
o& window.innerWidth - 浏览器窗口的内部宽度
二、对于 Internet Explorer 8、7、6、5：
o& document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
o& document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
Document对象的body属性对应HTML文档的&body&标签
o& document.body.clientHeight
o& document.body.clientWidth
在不同浏览器都实用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientW
var h= document.documentElement.clientHeight
|| document.body.clientH
scrollHeight和scrollWidth，获取网页内容高度和宽度。
一、针对IE、Opera:
scrollHeight 是网页内容实际高度，可以小于 clientHeight。
二、针对NS、FF:
scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。
三、浏览器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollW
var h=document.documentElement.scrollHeight
|| document.body.scrollH
注意:区分大小写
scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetW
var h= document.documentElement.offsetHeight
|| document.body.offsetH
我们先来看看下面的图：
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离&，即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离&，即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由&offsetParent&属性指定的父坐标的计算左侧位置&。
offsetTop:获取指定对象相对于版面或由&offsetParent&属性指定的父坐标的计算顶端位置 。
1. 区分大小写
2.&offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。
&!DOCTYPE HTML&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8"&&script type="text/javascript"&
function req(){
var div = document.getElementById("div1");
document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离
document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离
document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离
document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离
}&/script&&/head&&body style="border:10px solid #padding:0px 0margin:5px 10px"&
&div style="width:60%;border-right:1float:"&
&div style="float:"&
&div id="div1" style="border:5height:300width:200overflow:auto"&
&div style="height:500width:400px"&请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。&/div&
&input type="button" value="点击我!" onclick="req()" style="border: 1height: 25"/&
&div style="width:30%;float:"&
&ul style="list-style-type: line-height:30"&结果：
&li&offsetTop : &span id="li1"&&/span&&/li&
&li&offsetLeft : &span id="li2"&&/span&&/li&
&li& scrollTop : &span id="li3"&&/span&&/li&
&li&scrollLeft : &span id="li4"&&/span&&/li&
&div style="clear:"&&/div&
&/body&&/html&
现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。
& & 275万购昌平邻铁三居 总价20万买一居& & 200万内购五环三居 140万安家东三环& & 北京首现零首付楼盘 53万购东5环50平& & 京楼盘直降5000 中信府 公园楼王现房
& &&&40平出租屋大改造 美少女的混搭小窝& & &经典清新简欧爱家 90平老房焕发新生& & &新中式的酷色温情 66平撞色活泼家居& & &瓷砖就像选好老婆 卫生间烟道的设计
& & &通州豪华3居260万 二环稀缺2居250w甩& & &西3环通透2居290万 130万2居限量抢购& & &黄城根小学学区仅260万 121平70万抛!& & &独家别墅280万 苏州桥2居优惠价248万&& &
大家先思考和分析实现思路，然后在动手实现
一、HTML页面布局
选项卡标题使用ul..li
选项卡内容使用div
二、CSS样式制作
整个选项卡的样式设置
选项卡标题的样式设置
选项卡内容的样式设置
一开始只显示一个选项卡内容，其它选项卡内容隐藏。
三、JS实现选项卡切换
获取选项卡标题和选项卡内容
选项卡内容多个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配
通过改变DOM的css类名称,当前点击的选项卡显示，其它隐藏。
&!DOCTYPE html&&html&&head lang="en"&
&meta charset="UTF-8"&
&title&实践题 - 选项卡&/title&
&style type="text/css"&
*{padding:0margin: 0font:12px normal "microsoft yahei";}
#tabs {width:290padding:5height:150margin:20}
#tabs ul{list-style:display:height:30line-height:30border-bottom:2}
#tabs ul li{background:#cursor:float:list-style:height:28line-height:28margin:0px 3border:1px solid #border-bottom:display:inline-width:60text-align:}
#tabs ul li.on{border-top:2border-bottom: 2px solid #}
#tabs div{height:120line-height: 25border:1px solid #336699;border-top:padding:5}
.hide{display:}
&script type="text/javascript"&
window.onload = function(){
var oTab = document.getElementById("tabs");
var oUl = oTab.getElementsByTagName("ul")[0];
var oLis = oUl.getElementsByTagName("li");
var oDivs= oTab.getElementsByTagName("div");
for(var i= 0,len = oLis.i&i++){
oLis[i].index =
oLis[i].onclick = function() {
for(var n= 0;n&n++){
oLis[n].className = "";
oDivs[n].className = "hide";
this.className = "on";
oDivs[this.index].className = "";
&/head&&body&&div id="tabs"&
&li class="on"&房产&/li&
&li&家居&/li&
&li&二手房&/li&
275万购昌平邻铁三居 总价20万买一居&br&
200万内购五环三居 140万安家东三环&br&
北京首现零首付楼盘 53万购东5环50平&br&
京楼盘直降5000 中信府 公园楼王现房&br&
&div class="hide"&
40平出租屋大改造 美少女的混搭小窝&br&
经典清新简欧爱家 90平老房焕发新生&br&
新中式的酷色温情 66平撞色活泼家居&br&
瓷砖就像选好老婆 卫生间烟道的设计&br&
&div class="hide"&
通州豪华3居260万 二环稀缺2居250w甩&br&
西3环通透2居290万 130万2居限量抢购&br&
黄城根小学学区仅260万 121平70万抛!&br&
独家别墅280万 苏州桥2居优惠价248万&br&
&/div&&/div&
&/body&&/html&}
Node有一个属性 nodeType 表示Node的类型，它是一个整数，其数值分别表示相应的Node类型，具体如下：{
ELEMENT_NODE: 1, // 元素节点
ATTRIBUTE_NODE: 2, // 属性节点
TEXT_NODE: 3, // 文本节点
DATA_SECTION_NODE: 4,
ENTITY_REFERENCE_NODE: 5,
ENTITY_NODE: 6,
PROCESSING_INSTRUCTION_NODE: 7,
COMMENT_NODE: 8, // 注释节点
DOCUMENT_NODE: 9, // 文档
DOCUMENT_TYPE_NODE: 10,
DOCUMENT_FRAGMENT_NODE: 11, // 文档碎片
NOTATION_NODE: 12,
DOCUMENT_POSITION_DISCONNECTED: 1,
DOCUMENT_POSITION_PRECEDING: 2,
DOCUMENT_POSITION_FOLLOWING: 4,
DOCUMENT_POSITION_CONTAINS: 8,
DOCUMENT_POSITION_CONTAINED_BY: 16,
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32
NodeList 对象是一个节点的集合，一般由 Node.childNodes 、 document.getElementsByName 和 document.querySelectorAll 返回的。
不过需要注意， Node.childNodes 、 document.getElementsByName 返回的 NodeList 的结果是实时的（此时跟HTMLCollection比较类似），而 document.querySelectorAll 返回的结果是固定的，这一点比较特殊。
举例如下：var childNodes = document.body.childN
console.log(childNodes.length); // 如果假设结果是“2”
document.body.appendChild(document.createElement('div'));
console.log(childNodes.length); // 此时的输出是“3”
HTMLCollection是一个特殊的NodeList，表示包含了若干元素（元素顺序为文档流中的顺序）的通用集合，它是实时更新的，当其所包含的元素发生改变时，它会自动更新。另外，它是一个伪数组，如果想像数组一样操作它们需要像 Array.prototype.slice.call(nodeList, 2) 这样调用。
document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；
document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；
document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。
document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。
document.querySelector ：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。
document.querySelectorAll ：返回一个 NodeList ，IE8+(含）。
document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；
节点创建API主要包括 createElement 、 createTextNode 、 cloneNode 和 createDocumentFragment 四个方法。
创建元素：var elem = document.createElement(&div&);
elem.id = 'test';
elem.style = 'color: red';
elem.innerHTML = '我是新创建的节点';
document.body.appendChild(elem);
通过 createElement 创建的元素并不属于 document 对象，它只是创建出来，并未添加到html文档中，要调用 appendChild 或 insertBefore 等方法将其添加到HTML文档中。
创建文本节点：var node = document.createTextNode(&我是文本节点&);
document.body.appendChild(node);
克隆一个节点： node.cloneNode(true/false) ，它接收一个bool参数，用来表示是否复制子元素。var from = document.getElementById(&test&);
var clone = from.cloneNode(true);
clone.id = &test2&;
document.body.appendChild(clone);
克隆节点并不会克隆事件，除非事件是用 &div onclick=&test()&&&/div& 这种方式绑定的，用 addEventListener 和 node.onclick= 方式绑定的都不会复制。
本方法用来创建一个 DocumentFragment ，也就是文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，大量操作DOM时用它可以大大提升性能。
假设现有一题目，要求给ul添加10000个li，我们先用最简单的拼接字符串的方式来实现：&ul id=&ul&&&/ul&
(function()
var start = Date.now();
var str = '';
for(var i=0; i&10000; i++)
str += '&li&第'+i+'个子节点&/li&';
document.getElementById('ul').innerHTML =
console.log('耗时：'+(Date.now()-start)+'毫秒'); // 44毫秒
再换逐个append的方式，不用说，这种方式效率肯定低：&ul id=&ul&&&/ul&
(function()
var start = Date.now();
var str = '',
var ul = document.getElementById('ul');
for(var i=0; i&10000; i++)
li = document.createElement('li');
li.textContent = '第'+i+'个子节点';
ul.appendChild(li);
console.log('耗时：'+(Date.now()-start)+'毫秒'); // 82毫秒
最后再试试文档碎片的方法，可以预见的是，这种方式肯定比第二种好很多，但是应该没有第一种快：&ul id=&ul&&&/ul&
(function()
var start = Date.now();
var str = '',
var ul = document.getElementById('ul');
var fragment = document.createDocumentFragment();
for(var i=0; i&10000; i++)
li = document.createElement('li');
li.textContent = '第'+i+'个子节点';
fragment.appendChild(li);
ul.appendChild(fragment);
console.log('耗时：'+(Date.now()-start)+'毫秒'); // 63毫秒
节点修改API都具有下面这几个特点：
不管是新增还是替换节点，如果其原本就在页面上，那么原来位置的节点将被移除；修改之后节点本身绑定的事件不会消失；
这个其实前面已经多次用到了，语法就是：
parent.appendChild(child);
它会将child追加到parent的子节点的最后面。另外，如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到新的位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，且其事件会保留。
将某个节点插入到另外一个节点的前面，语法：parentNode.insertBefore(newNode, refNode);
这个API个人觉得设置的非常不合理，因为插入节点只需要知道newNode和refNode就可以了，parentNode是多余的，所以jQuery封装的API就比较好：newNode.insertBefore(refNode); // 如 $(&p&).insertBefore(&#foo&);
所以切记不要把这个原生API和jQuery的API使用方法搞混了！为了加深理解，这里写一个简单的例子：&div id=&parent&&
我是父节点
&div id=&child&&
我是旧的子节点
&input type=&button& id=&insertNode& value=&插入节点& /&
var parent = document.getElementById(&parent&);
var child = document.getElementById(&child&);
document.getElementById(&insertNode&).addEventListener('click', function()
var newNode = document.createElement(&div&);
newNode.textContent = &我是新节点&;
parent.insertBefore(newNode, child);
}, false);
关于第二个参数：
refNode是必传的，如果不传该参数会报错；如果refNode是undefined或null，则insertBefore会将节点添加到末尾；
removeChild用于删除指定的子节点并返回子节点，语法：var deletedChild = parent.removeChild(node);
deletedChild指向被删除节点的引用，它仍然存在于内存中，可以对其进行下一步操作。另外，如果被删除的节点不是其子节点，则将会报错。一般删除节点都是这么删的：function removeNode(node)
if(node.parentNode) node.parentNode.removeChild(node);
replaceChild用于将一个节点替换另一个节点，语法：parent.replaceChild(newChild, oldChild);
DOM中的节点相互之间存在着各种各样的关系，如父子关系，兄弟关系等。
parentNode ：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment；parentElement ：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null；
children ：返回一个实时的 HTMLCollection ，子节点都是Element，IE9以下浏览器不支持；childNodes ：返回一个实时的 NodeList ，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；firstChild ：返回第一个子节点，不存在返回null，与之相对应的还有一个 firstElementChild ；lastChild ：返回最后一个子节点，不存在返回null，与之相对应的还有一个 lastElementChild ；
previousSibling ：节点的前一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。nextSibling ：节点的后一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。previousElementSibling ：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。nextElementSibling ：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持。
给元素设置属性：element.setAttribute(name, value);
其中name是特性名，value是特性值。如果元素不包含该特性，则会创建该特性并赋值。
getAttribute返回指定的特性名相应的特性值，如果不存在，则返回null：var value = element.getAttribute(&id&);
通过 element.sytle.xxx 只能获取到内联样式，借助 window.getComputedStyle 可以获取应用到元素上的所有样式，IE8或更低版本不支持此方法。var style = window.getComputedStyle(element[, pseudoElt]);
getBoundingClientRect 用来返回元素的大小以及相对于浏览器可视窗口的位置，用法如下：var clientRect = element.getBoundingClientRect();
clientRect是一个 DOMRect 对象，包含width、height、left、top、right、bottom，它是相对于窗口顶部而不是文档顶部，滚动页面时它们的值是会发生变化的。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：457136次
积分：10662
积分：10662
排名：第1224名
原创：575篇
转载：219篇
评论：94条
文章：10篇
阅读：18459
(65)(48)(47)(22)(12)(22)(53)(48)(56)(57)(219)(102)(7)(1)(13)(22)您好，游客
>> JS获取节点的兄弟,父级,子级元素的方法/如何获取父元素下的第一个子元素
JS获取节点的兄弟,父级,子级元素的方法/如何获取父元素下的第一个子元素
浏览次数3218
JS获取节点的兄弟,父级,子级元素的方法
本篇文章主要是对JS获取节点的兄弟,父级,子级元素的方法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。
JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素
复制代码&&&&代码如下:
&div id="test"&
&div&&/div&
&div&&/div&
原生的JS获取ID为test的元素下的子元素。可以用：
var a = docuemnt.getElementById("test").getElementsByTagName("div");
这样是没有问题的
此时a.length=2；
但是如果我们换另一种方法
var b =document.getElementById("test").childN
此时b.length 在IE浏览器中没问题，其依旧等于2，但是在FF浏览器中则会使4，是因为FF把换行也当做一个元素了。
所以，在此，我们就要做处理了，需遍历这些元素，把元素类型为空格而且是文本都删除。
复制代码&&&&代码如下:
function del_ff(elem){
var elem_child = elem.childN
for(var i=0; i&elem_child.i++){
if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)
上述函数遍历子元素，当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。
nodeNames可以得到一个节点的节点类型，/\s/是非空字符在JS里的正则表达式。前面加！,则表示是空字符
test() 方法用于检测一个字符串是否匹配某个模式.语法是： RegExpObject.test(string)
如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
nodeValue表示得到这个节点里的值。
removeChild则是删除元素的子元素。
之后，在调用子，父，兄，这些属性之前，调用上面的函数把空格清理一下就可以了
复制代码&&&&代码如下:
&div id="test"&
&div&&/div&
&div&&/div&
function dom() {
var s= document.getElementById("test");
del_ff(s);
//清理空格
var chils= s.childN
//得到s的全部子节点
var par=s.parentN
//得到s的父节点
var ns=s.nextS
//获得s的下一个兄弟节点
var ps=s.previousS
//得到s的上一个兄弟节点
var fc=s.firstC
//获得s的第一个子节点
var lc=s.lastC
//获得s的最后一个子节点}
下面介绍JQUERY的父，子，兄弟节点查找方法
jQuery.parent(expr)
找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个
jQuery对象返回，children()则只会返回节点
jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll()，返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll()，返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点，不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如
$("p"),find("span"),是从&p&元素开始找&span&,等同于$("p span")
学习来源：http://www.jb51.net/article/45372.htm
js如何获取父元素下的第一个子元素
当加载列表时，默认希望选中第一条。top_menu 为ul的ID
通过 $("#top_menu li:first") 就可以获取到 ul下第一个li标签。然后就可以利用
例如 修改属性：$("#top_menu li:first").attr("class","select");
触发事件：$("#top_menu li:first").click();
如果想获取li下的 a标签，如下：
$("#top_menu li:first a")
也可以 修改属性：$("#top_menu li:first a").attr("","");
触发事件：$("#top_menu li:first a").click();
&ul class="nav white" id="top_menu" name="top_menu"&
&!-- 一级菜单 --&
&s:iterator value="list" status="st"&
&li&&a onclick=""&&s:property value="menuName" /&&/a&&/li&
&/s:iterator&
学习来源：.cn/s/blog_67b9ad8d0100xmx3.html
上篇文章：
下篇文章：
需要登录才能发表评论！
才能发表评论
日期： 评论：5 浏览：8134
日期： 评论：5 浏览：2814
日期： 评论：4 浏览：2156
日期： 评论：3 浏览：2945
日期： 评论：3 浏览：2301
日期： 评论：2 浏览：14951.元素.firstChild : 只读属性，第一个子节点
标准下：会包含文本类型的子节点。
非标准下：只包含元素类型子节点。
元素.firstElementChild : 只读属性，第一个元素子节点，等价于元素.children[0]
标准和非标准下都是获取第一个元素子节点。
2.元素.lastChild : 只读属性，最后一个子节点
元素.lastElementChild : 只读属性，最后一个元素子节点
3.元素.nextSibling: 只读属性，下一个兄弟节点
元素.nextElementSibling: 只读属性，下一个兄弟元素节点
4.元素.previousSibling: 只读属性，上一个兄弟节点
元素.previousElementSibling: 只读属性，上一个兄弟元素节点
兼容写法：
&!DOCTYPE html&
&title&元素兼容&/title&
&ul id="ul1"&
&li&111111&/li&
&li&222222&/li&
&li&333333&/li&
&li&444444&/li&
&script type="text/javascript"&
var oUl = document.getElementById('ul1');
var oFirst = oUl.firstElementChild || oUl.firstC
var oLast = oUl.lastElementChild
|| oUl.lastC
var oNext = oFirst.nextElementSibling || oFirst.nextS
var oPrev = oLast.previousElementSibling || oLast.previousS
oFirst.style.backgroundColor = 'red';
oLast.style.backgroundColor = 'blue';
oNext.style.backgroundColor = 'pink';
oPrev.style.backgroundColor = 'brown';
阅读(...) 评论()JavaScript 进阶篇的学习~ - DiscretＯrz - 博客园
随笔 - 15, 文章 - 0, 评论 - 1, 引用 - 0
---恢复内容开始---
你知道吗，Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构)，知道了CSS样式(也称为表示)，会使用HTML+CSS创建一个漂亮的页面，但这还不够，它只是静态页面而已。我们还需使用JavaScript增加行为，为网页添加动态效果。准备好，让JavaScript带你进入新境界吧!
JavaScript能做什么？
1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)
2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)
JS进阶篇学习什么？
在JavaScript入门篇中，我们学习了如何插入JS、输出内容及简单的DOM操作，JavaScript进阶篇让您进一步的了解JS的变量、数组、函数、语法、对象、事件、DOM操作，制作简单的网页动态效果。
什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服、玩具、水果...等。
我们为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。
我们赶快给变量取个好名字吧!变量名字可以任意取，只不过取名字要遵循一些规则:
1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下:
//开头不能用数字
%sum //开头不能用除(_ $)外特殊符号,如(%
sum+num //开头中间不能使用除(_ $)外特殊符号，如(%
2.变量名区分大小写，如:A与a是两个不同变量。
3.不允许使用JavaScript关键字和保留字做变量名。
我们要使用盒子装东西,是不是先要找到盒子,那在编程中，这个过程叫声明变量,找盒子的动作，如何表示：
声明变量语法: var 变量名;
var就相当于找盒子的动作，在JavaScript中是关键字（即保留字），这个关键字的作用是声明变量，并为"变量"准备位置(即内存）。
//声明一个变量mynum
当然，我们可以一次找一个盒子，也可以一次找多个盒子，所以Var还可以一次声明多个变量，变量之间用","逗号隔开。
var num1,mun2 ; //声明一个变量num1
注意:变量也可以不声明，直接使用，但为了规范，需要先声明，后使用。
我们可以把变量看做一个盒子,盒子用来存放物品,那如何在变量中存储内容呢?
我们使用"="号给变量存储内容,看下面的语句:
var mynum = 5 ; //声明变量mynum并赋值。
这个语句怎么读呢？ 给变量mynum赋值，值为5。我们也可以这样写:
//声明变量mynum
mynum = 5 ; //给变量mynum赋值
注:这里&"="号的作用是给变量赋值，不是等于号。
盒子可以装衣服、玩具、水果...等。其实，变量是无所不能的容器，你可以把任何东西存储在变量里，如数值、字符串、布尔值等，例如：
var num1 = 123;
// 123是数值
var num2 = "一二三";
//"一二三"是字符串
//布尔值true（真），false(假)
其中，num1变量存储的内容是数值；num2变量存储的内容是字符串，字符串需要用一对引号""括起来，num3变量存储的内容是布尔值(true、false)。
表达式与数学中的定义相似，表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。
我们先看看下面的JavaScript语句：
生活中“再见”表达方法很多，如:英语(goodbye）、网络语（88）、肢体语（挥挥手）等。在JavaScript表达式无处不在，所以一定要知道可以表达哪些内容，看看下面几种情况:
注意:串表达式中mychar是变量
注意:数值表达式中num是变量
注意:布尔表达式中num是变量
操作符是用于在JavaScript中指定一定动作的符号。
（1）操作符
看下面这段JavaScript代码。
sum = numa +
其中的"="和"+"都是操作符。
JavaScript中还有很多这样的操作符，例如，算术操作符(+、-、*、/等)，比较操作符(&、&、&=、&=等)，逻辑操作符(&&、||、！)。
注意: “=” 操作符是赋值，不是等于。
(2)&"+"操作符
算术运算符主要用来完成类似加减乘除的工作，在JavaScript中，“+”不只代表加法，还可以连接两个字符串，例如：
mystring = "Java" + "Script"; // mystring的值“JavaScript”这个字符串
我们先来做道数学题，数学考试成绩中，小明考了90分，小红考了95分，问谁考的分数高?
答: 因为“95 & 90”，所以小红考试成绩高。
其中大于号"&" 就是比较操作符，小红考试成绩和小明考试成绩就是操作数，并且是两个操作数。
也就是说两个操作数通过比较操作符进行比较，得到值为真（true）和假(false)。
在JavaScript中，这样的比较操作符有很多，这些操作符的含义如下:&
看看下面例子:
var a = 5;//定义a变量，赋值为5
var b = 9; //定义b变量，赋值为9
document.write (a&b); //a小于b的值吗? 结果是真(true)
document.write (a&=b); //a大于或等于b的值吗? 结果是假(false)
document.write (a!=b); //a不等于b的值吗? 结果是真(true)
document.write (a==b); //a等于b的值吗? 结果是假(false)
数学里面的“a&b”，在JavaScript中还表示为a&b；数学中的“b大于a，b小于c”是“a&b&c”，那么在JavaScript中可以用&&表示，如下：
b&a && b&c
//“&&”是并且的意思, 读法"b大于a"并且" b小于c "
好比我们参加高考时,在进入考场前,必须出示准考证和身份证,两者缺一不可，否则不能参加考试，表示如下:
if(有准考证 &&有身份证)
进行考场考试
&“&&”是逻辑与操作符，只有“&&”两边值同时满足(同时为真)，整个表达式值才为真。
逻辑与操作符值表:
注意:&如果A为假，A && B为假，不会在执行B; 反之，如果A为真，要由 B 的值来决定&A && B 的值。
"||"逻辑或操作符，相当于生活中的“或者”，当两个条件中有任一个条件满足，“逻辑或”的运算结果就为“真”。
例如：本周我们计划出游,可是周一至周五工作,所以周六或者周日哪天去都可以。即两天中只要有一天有空，就可以出游了。
c=b&a ||a&b;
//b&a是true，a&b是false，c是true
逻辑或操作符值表:
注意:&如果A为真，A ||&B为真，不会在执行B; 反之，如果A为假，要由 B 的值来决定&A || B 的值。
"!"是逻辑非操作符，也就是"不是"的意思,非真即假，非假即真。好比小华今天买了一个杯子，小明说:"杯子是白色的"，小亮说:“杯子是红色的”，小华说："小明说的不是真话，小亮说的不是假话"。猜猜小华买的什么颜色的杯子，答案：红色杯子。
逻辑非操作符值表:
看看下面代码，变量c的值是什么:
// b&a值是true,! (b&a）值是false
// b&a值是false, ! (b&a）值是true
我们都知道，除法、乘法等操作符的优先级比加法和减法高，例如：
var numa=3;
var numb=6
jq= numa + 30 / 2 - numb * 3;
// 结果为0
如果我们要改变运算顺序，需添加括号的方法来改变优先级:
var numa=3;
var numb=6
jq= ((numa + 30) / (2 - numb)) * 3; //结果是-24.75
操作符之间的优先级（高到低）:
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
如果同级的运算是按从左到右次序进行,多层括号由里向外。
var numa=3;
var numb=6;
jq= numa + 30 &10 && numb * 3&2;
//结果为false
我们知道变量用来存储数据，一个变量只能存储一个内容。假设你想存储10个人的姓名或者存储20个人的数学成绩，就需要10个或20个变量来存储，如果需要存储更多数据，那就会变的更麻烦。我们用数组解决问题，一个数组变量可以存放多个数据。好比一个团，团里有很多人，如下我们使用数组存储5个学生成绩。
数组是一个值的集合，每个值都有一个索引号，从0开始，每个索引都有一个相应的值，根据需要添加更多数值。
使用数组之前首先要创建，而且需要把数组本身赋至一个变量。好比我们出游，要组团，并给团定个名字“云南之旅”。
创建数组语法：
var myarray=new Array();
&&& & & &&&我们创建数组的同时，还可以为数组指定长度，长度可任意指定。
var myarray= new Array(8); //创建数组，存储8个数据。
注意：1.创建的新数组是空数组，没有值，如输出，则显示undefined。2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。
数组创建好，接下来我们为数组赋值。我们把数组看似旅游团的大巴车，大巴车里有很多位置，每个位置都有一个号码，顾客要坐在哪个位置呢？&
第一步：组个大巴车
第二步：按票对号入座
大巴车的1号座位是张三
大巴车的2号座位是李四
数组的表达方式：
第一步：创建数组var myarr=new Array();
第二步：给数组赋值
myarr[1]=" 张三";
myarr[2]=" 李四";
下面创建一个数组，用于存储5个人的数学成绩。
var myarray=new Array(); //创建一个新的空数组
myarray[0]=66; //存储第1个人的成绩
myarray[1]=80; //存储第2个人的成绩
myarray[2]=90; //存储第3个人的成绩
myarray[3]=77; //存储第4个人的成绩
myarray[4]=59; //存储第5个人的成绩
注意：数组每个值有一个索引号，从0开始。
我们还可以用简单的方法创建上面的数组和赋值：
第一种方法：
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
第二种方法：
var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
注意：数组存储的数据可以是任何类型（数字、字符、布尔值等）
上一节中，我们使用myarray变量存储了5个人的成绩，现在多出一个人的成绩，如何存储呢？&
只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素。
myarray[5]=88; //使用一个新索引，为数组增加一个新元素
如果我们想知道数组的大小，只需引用数组的一个属性length。Length属性表示数组的长度，即数组中元素的个数。
myarray. //获得数组myarray的长度
注意：因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。如数组的长度是5，数组的上下限分别是0和4。
var arr=[55,32,5,90,60,98,76,54];//包含8个数值的数组arr
document.write(arr.length); //显示数组长度8
document.write(arr[7]); //显示第8个元素的值54
同时，JavaScript数组的length属性是可变的，这一点需要特别注意。
arr.length=10; //增大数组的长度
document.write(arr.length); //数组长度已经变为10
数组随元素的增加，长度也会改变，如下:
var arr=[98,76,54,56,76]; // 包含5个数值的数组
document.write(arr.length); //显示数组的长度5
arr[15]=34;
//增加元素，使用索引为15,赋值为34
alert(arr.length); //显示数组的长度16
一维数组，我们看成一组盒子，每个盒子只能放一个内容。
一维数组的表示: myarray[ ]
二维数组，我们看成一组盒子，不过每个盒子里还可以放多个盒子。
二维数组的表示: myarray[ ][ ]
注意:&二维数组的两个维度的索引值也是从0开始，两个维度的最后一个索引值为长度-1。&
1. 二维数组的定义方法一
var myarr=new Array();
//先声明一维
for(var i=0;i&2;i++){
//一维长度为2
myarr[i]=new Array();
//再声明二维
for(var j=0;j&3;j++){
//二维长度为3
myarr[i][j]=i+j;
// 赋值，每个数组元素的值为i+j
注意:&关于for 循环语句，请看第四章4-5 。
将上面二维数组，用表格的方式表示:
2.&二维数组的定义方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
myarr[0][1]=5;&//将5的值传入到数组中，覆盖原有值。
说明:&myarr[0][1] ,0&表示表的行，1表示表的列。
if语句是基于条件成立才执行相应代码时使用的语句。
{ 条件成立时执行代码}
注意：if小写，大写字母（IF）会出错！
假设你应聘web前端技术开发岗位，如果你会HTML技术，你面试成功，欢迎加入公司。代码表示如下:
&script type="text/javascript"&
var mycarrer = "HTML";
if (mycarrer == "HTML")
document.write("你面试成功，欢迎加入公司。");
要在多组语句中选择一组来执行，使用if..else嵌套语句。
{ 条件1成立时执行的代码}
{ 条件2成立时执行的代码}
{ 条件n成立时执行的代码}
{ 条件1、2至n不成立时执行的代码}
假设数学考试，小明考了86分，给他做个评价，60分以下的不及格，60(包含60分)-75分为良好，75(包含75分)-85分为很好，85(包含85分)-100优秀。
代码表示如下:
当有很多种选项的时候，switch比if else使用更方便。
switch(表达式)
执行代码块 1
执行代码块 2
执行代码块 n
与 case值1 、 case值2...case值n 不同时执行的代码
Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。
假设评价学生的考试成绩，10分满分制，我们按照每一分一个等级将成绩分等，并根据成绩的等级做出不同的评价。
评语: 及格，加油!
注意:记得在case所执行的语句后添加上一个break语句。否则就直接继续执行下面的case中的语句，看以下代码:
评语: 继续努力!
评语: 及格，加油!
评语: 凑合，奋进
评语: 很棒，很棒
评语: 高手，大牛
在上面的代码中，没有break停止语句，如果成绩是4分，则case 5后面的语句将会得到执行，同样，case6、7-10后面的语句都会得到执行。
很多事情不只是做一次，要重复做。如打印10份试卷，每次打印一份，重复这个动作，直到打印完成。这些事情，我们使用循环语句来完成，循环语句，就是重复执行一段代码。
for语句结构：
for(初始化变量;循环条件;循环迭代)
假如，一个盒子里有6个球，我们每次取一个，重复从盒中取出球，直到球取完为止。
&script type="text/javascript"&
var num=1;
for (num=1;num&=6;num++)& //初始化值；循环条件；循环后条件值更新
document.write("取出第"+num+"个球&br /&");
和for循环有相同功能的还有while循环, while循环重复执行一段代码，直到某个条件不再满足。
while语句结构：
while(判断条件)
使用while循环，完成从盒子里取球的动作，每次取一个，共6个球。
&script type="text/javascript"&
var num=0;
//初始化值
while (num&=6)
//条件判断
document.write("取出第"+num+"个球&br /&");
num=num+1;
//条件值更新
do while结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。
do...while语句结构：
&&& 循环语句
while(判断条件)
我们试着输出5个数字。
&script type="text/javascript"&
&& num= 1;
&&&& document.write("数值为:" +& num+"&br /&");
&&&& num++; //更新条件
&& while (num&=5)
为什么呢?我们来看下执行思路：
在while、for、do...while、while循环中使用break语句退出当前循环，直接执行后面的代码。
格式如下：
for(初始条件;判断条件;循环后条件值更新)
if(特殊情况)
当遇到特殊情况的时候，循环就会立即结束。看看下面的例子，输出10个数，如果数值为5，就停止输出。
注:当num=5的时候循环就会结束，不会输出后面循环的内容。
continue的作用是仅仅跳过本次循环，而整个循环体继续执行。
语句结构：
for(初始条件;判断条件;循环后条件值更新)
if(特殊情况)
上面的循环中，当特殊情况发生的时候，本次循环将被跳过，而后续的循环则不会受到影响。好比输出10个数字，如果数字为5就不输出了。
注:上面的代码中，num=5的那次循环将被跳过
函数的作用，可以写一次代码，然后反复地重用这个代码。
如:我们要完成多组数和的功能。
sum = 3+2;
alert(sum);
alert(sum);
//不停重复两行代码
如果要实现8组数的和，就需要16行代码，实现的越多，代码行也就越多。所以我们可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省去重复输入大量代码的麻烦。
使用函数完成:
function add2(a,b){
alert(sum);
只需写一次就可以
add2(3,2);
add2(7,8);
//只需调用函数就可以
如何定义一个函数呢？看看下面的格式：
function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。
我们完成对两个数求和并显示结果的功能。并给函数起个有意义的名字：“add2”，代码如下：
&script type="text/javascript"&
function add2(){
sum = 3 + 2;
alert(sum);
思考:上一节函数中，通过"document.write"把结果输出来，如果想对函数的结果进行处理怎么办呢？
我们只要把"document.write(sum)"这行改成如下代码：
function add2(x,y)
return //返回函数值,return后面的值叫做返回值。
还可以通过变量存储调用函数的返回值，代码如下:
result = add2(3,4);//语句执行后,result变量中的值为7.
注意:函数中参数和返回值不只是数字，还可以是字符串等其它类型。&
JavaScript&创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。
主要事件表:
鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
当把鼠标移动到"登录"按钮上，然后再移开时，触发onmouseout事件，调用函数message()，代码如下:
当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
如下代码, 当将光标移到文本框内时，即焦点在文本框内，触发onfocus 事件，并调用函数message()。
运行结果：
通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。
如下代码,当用户将文本框内的文字改变后，弹出对话框“您改变了文本内容！”。
运行结果：
事件会在页面加载完成后，立即发生，同时执行被调用的程序。注意：1.&加载页面时，触发onload事件，事件写在&body&标签内。
& & & 2. 此节的加载页面，可理解为打开一个新页面时。如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。
运行结果：
当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。
注意：不同浏览器对onunload事件支持不同。
如下代码,当退出页面时，弹出对话框“您确定离开该网页吗？”。
运行结果：（IE浏览器）
---恢复内容结束---
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value；
&!DOCTYPE html&&html& &head&
&title& 事件&/title&
&script type="text/javascript"&
function count(){
//获取第一个输入框的值
var mychar1=document.getElementById("txt1").value; //获取第二个输入框的值
var mychar2=document.getElementById("txt2"). //获取选择框的值
var mychar3=document.getElementById("select").
var result=""; //获取通过下拉框来选择的值来改变加减乘除的运算法则
swith(mychar){
result=parseFloat(mychar1)+parseFloat(mychar2);
result=parseFloat(mychar1)*parseFloat(mychar2);
result=parseFloat(mychar1)/parseFloat(mychar2);
result=parseFloat(mychar1)-parseFloat(mychar2);
//设置结果输入框的值
document.getElementById("fruit").value=
&input type='text' id='txt1' /&
&select id='select'&
&option value='+'&+&/option&
&option value="-"&-&/option&
&option value="*"&*&/option&
&option value="/"&/&/option&
&input type='text' id='txt2' /&
&input type='button' value=' = ' /& &!--通过 = 按钮来调用创建的函数，得到结果--&
&input type='text' id='fruit' /&
JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。
对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；
JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：
var objectName =new Array();//使用new关键字定义对象
var objectName =[];
访问对象属性的语法:
objectName.propertyName
如使用 Array 对象的 length 属性来获得数组的长度：
var myarray=new Array(6);//定义数组对象
var myl=myarray.//访问数组长度length属性
以上代码执行后，myl的值将是：6
访问对象的方法：
objectName.methodName()
如使用string 对象的 toUpperCase() 方法来将文本转换为大写：
var mystr="Hello world!";//创建一个字符串
var request=mystr.toUpperCase(); //使用字符串对象方法
以上代码执行后，request的值是：HELLO WORLD!
日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。
定义一个时间对象&:
var Udate=new Date();
注意:使用关键字new，Date()的首字母必须大写。&
使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)。
如果要自定义初始值，可以用以下方法：
var d = new Date();
var d = new Date('Oct 1, 2012'); //日
我们最好使用下面介绍的“方法”来严格定义时间。
访问方法语法：“&日期对象&.&方法&”
Date对象中处理时间和日期的常用方法：
get/setFullYear()&返回/设置年份，用四位数表示。
var mydate=new Date();//当前时间日
document.write(mydate+"&br&");//输出当前时间
document.write(mydate.getFullYear()+"&br&");//输出当前年份
mydate.setFullYear(81); //设置年份
document.write(mydate+"&br&"); //输出年份被设定为 0081年。
注意:不同浏览器， mydate.setFullYear(81)结果不同，年份被设定为 0081或81两种情况。
Thu Mar 06 :47 GMT+0800
Thu Mar 06 :47 GMT+0800
1.结果格式依次为：星期、月、日、年、时、分、秒、时区。(火狐浏览器)
2. 不同浏览器，时间格式有差异。
getDay()&返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成，代码如下:
&script type="text/javascript"&
var mydate=new Date();//定义日期对象
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值
var mynum=mydate.getDay();//返回值存储在变量mynum中
document.write(mydate.getDay());//输出getDay()获取值
document.write("今天是："+ weekday[mynum]);//输出星期几
注意：以上代码是在日，星期五运行。
今天是：星期五
get/setTime()&返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。
如果将目前日期对象的时间推迟1小时，代码如下:
&script type="text/javascript"&
var mydate=new Date();
document.write("当前时间："+mydate+"&br&");
mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
document.write("推迟一小时时间：" + mydate);
当前时间：Thu Mar 6 11:46:27 UTC+
推迟一小时时间：Thu Mar 6 12:46:27 UTC+
注意:1. 一小时 60 分，一分 60 秒，一秒 1000 毫秒
&& &&&2. 时间推迟 1 小时,就是: “x.setTime(x.getTime() + 60 * 60 * 1000);”
harAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
stringObject.charAt(index)
参数说明：
注意：1.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。
2.如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。
如:在字符串 "I love JavaScript!" 中，返回位置2的字符：
&script type="text/javascript"&
var mystr="I love JavaScript!"
document.write(mystr.charAt(2));
注意：一个空格也算一个字符。
以上代码的运行结果：
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
stringObject.indexOf(substring, startpos)
参数说明：
1.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。
2.可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。
3.如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
注意：1.indexOf() 方法区分大小写。
2.如果要检索的字符串值没有出现，则该方法返回 -1。
例如: 对 "I love JavaScript!" 字符串内进行不同的检索：
&script type="text/javascript"&
var str="I love JavaScript!"
document.write(str.indexOf("I") + "&br /&");
document.write(str.indexOf("v") + "&br /&");
document.write(str.indexOf("v",8));
以上代码的输出：
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
stringObject.substring(starPos,stopPos)&
1. 返回的内容是从&start开始(包含start位置的字符)到&stop-1 处的所有字符，其长度为&stop&减start。
2. 如果参数&start&与&stop&相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
3. 如果&start&比&stop&大，那么该方法在提取子串之前会先交换这两个参数。
使用 substring() 从字符串中提取字符串，代码如下：
&script type="text/javascript"&
& var mystr="I love JavaScript";
& document.write(mystr.substring(7));
& document.write(mystr.substring(2,6));
JavaScript
substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。
stringObject.substr(startPos,length)
注意：如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
如果startPos为负数且绝对值大于字符串长度，startPos为0。
使用 substr() 从字符串中提取一些字符，代码如下：
&script type="text/javascript"&
var mystr="I love JavaScript!";
document.write(mystr.substr(7));
document.write(mystr.substr(2,4));
Math对象，提供对数据的数学计算。
使用 Math 的属性和方法，代码如下：
&script type="text/javascript"&
var mypi=Math.PI;
var myabs=Math.abs(-15);
document.write(mypi);
document.write(myabs);
注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。
Math 对象属性
Math 对象方法
运行结果：
JavaScript!
ceil() 方法可对一个数进行向上取整。
Math.ceil(x)
注意：它返回的是大于或等于x，并且与x最接近的整数。
我们将把 ceil() 方法运用到不同的数字上，代码如下：
&script type="text/javascript"&
document.write(Math.ceil(0.8) + "&br /&")
document.write(Math.ceil(6.3) + "&br /&")
document.write(Math.ceil(5) + "&br /&")
document.write(Math.ceil(3.5) + "&br /&")
document.write(Math.ceil(-5.1) + "&br /&")
document.write(Math.ceil(-5.9))
运行结果：
floor() 方法可对一个数进行向下取整。
Math.floor(x)
参数说明：
注意：返回的是小于或等于x，并且与 x 最接近的整数。
我们将在不同的数字上使用 floor() 方法，代码如下:
&script type="text/javascript"&
document.write(Math.floor(0.8)+ "&br&")
document.write(Math.floor(6.3)+ "&br&")
document.write(Math.floor(5)+ "&br&")
document.write(Math.floor(3.5)+ "&br&")
document.write(Math.floor(-5.1)+ "&br&")
document.write(Math.floor(-5.9))
运行结果：
round() 方法可把一个数字四舍五入为最接近的整数。
Math.round(x)
参数说明：
1. 返回与 x 最接近的整数。
2. 对于 0.5，该方法将进行上舍入。(5.5 将舍入为 6)
3.&如果&x 与两侧整数同等接近，则结果接近 +∞方向的数字值 。(如&-5.5 将舍入为 -5; -5.52&将舍入为 -6),如下图:
把不同的数舍入为最接近的整数,代码如下：
&script type="text/javascript"&
document.write(Math.round(1.6)+ "&br&");
document.write(Math.round(2.5)+ "&br&");
document.write(Math.round(0.49)+ "&br&");
document.write(Math.round(-6.4)+ "&br&");
document.write(Math.round(-6.6));
运行结果：
random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。
Math.random();
注意：返回一个大于或等于 0 但小于 1 的符号为正的数字值。
我们取得介于 0 到 1 之间的一个随机数，代码如下：
&script type="text/javascript"&
document.write(Math.random());
运行结果：
注意:因为是随机数，所以每次运行结果不一样，但是0 ~ 1的数值。
获得0 ~ 10之间的随机数，代码如下:
&script type="text/javascript"&
document.write((Math.random())*10);
运行结果：
数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的
数组定义的方法：
1. 定义了一个空数组:
var& 数组名= new Array();
2. 定义时指定有n个空元素的数组：
var 数组名 =new Array(n);
3.定义数组的时候，直接初始化数据：
var &数组名 = [&元素1&, &元素2&, &元素3&...];
我们定义myArray数组，并赋值，代码如下：
var myArray = [2, 8, 6];
说明：定义了一个数组 myArray，里边的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。
数组元素使用：
数组名[下标] = 值;
注意: 数组的下标用方括号括起来，从0开始。
数组属性：
length 用法：&数组对象&.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。
数组方法：
concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
arrayObject.concat(array1,array2,...,arrayN)
参数说明：
注意:&&该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
我们创建一个数组，将把 concat() 中的参数连接到数组 myarr 中，代码如下：
&script type="text/javascript"&
& var mya = new Array(3);
& mya[0] = "1";
& mya[1] = "2";
& mya[2] = "3";
& document.write(mya.concat(4,5)+"&br&");
& document.write(mya);
运行结果：
我们创建了三个数组，然后使用 concat() 把它们连接起来，代码如下：
&script type="text/javascript"&
var mya1= new Array("hello!")
&&var mya2= new Array("I","love");
&&var mya3= new Array("JavaScript","!");
&&var mya4=mya1.concat(mya2,mya3);
&&document.write(mya4);
运行结果：
hello!,I,love,JavaScript,!
join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
arrayObject.join(分隔符)
注意：返回一个字符串，该字符串把数组中的各个元素串起来，用&分隔符&置于元素与元素之间。这个方法不影响数组原本的内容。 我们使用join（）方法，将数组的所有元素放入一个字符串中，代码如下：
&script type="text/javascript"&
var myarr = new Array(3);
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join());
运行结果：
I,love,JavaScript
我们将使用分隔符来分隔数组中的元素，代码如下：
&script type="text/javascript"&
var myarr = new Array(3)
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join("."));
运行结果：
I.love.JavaScript
reverse() 方法用于颠倒数组中元素的顺序。
arrayObject.reverse()
注意：该方法会改变原来的数组，而不会创建新的数组。
定义数组myarr并赋值，然后颠倒其元素的顺序：
&script type="text/javascript"&
var myarr = new Array(3)
myarr[0] = "1"
myarr[1] = "2"
myarr[2] = "3"
document.write(myarr + "&br /&")
document.write(myarr.reverse())
运行结果：
slice() 方法可从已有的数组中返回选定的元素。
arrayObject.slice(start,end)
参数说明：
1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
2. 该方法并不会修改数组，而是返回一个子数组。
1. 可使用负值从数组的尾部选取元素。
2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
3. String.slice() 与 Array.slice() 相似。
我们将创建一个新数组，然后从其中选取的元素，代码如下：
&script type="text/javascript"&
var myarr = new Array(1,2,3,4,5,6);
document.write(myarr + "&br&");
document.write(myarr.slice(2,4) + "&br&");
document.write(myarr);
运行结果：
1,2,3,4,5,6
1,2,3,4,5,6
sort()方法使数组中的元素按照一定的顺序排列。
arrayObject.sort(方法函数)
参数说明：
1.如果不指定&方法函数&，则按unicode码顺序排列。
2.如果指定&方法函数&，则按&方法函数&所指定的排序方法排序。
myArray.sort(sortMethod);
注意:&该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：&
& 若返回值&=-1，则表示 A 在排序后的序列中出现在 B 之前。& 若返回值&-1 && &1，则表示 A 和 B 具有相同的排序顺序。& 若返回值&=1，则表示 A 在排序后的序列中出现在 B 之后。
1.使用sort()将数组进行排序，代码如下：
&script type="text/javascript"&
var myarr1 = new Array("Hello","John","love","JavaScript");
var myarr2 = new Array("80","16","50","6","100","1");
document.write(myarr1.sort()+"&br&");
document.write(myarr2.sort());
运行结果：
Hello,JavaScript,John,love
1,100,16,50,6,80
注意:上面的代码没有按照数值的大小对数字进行排序。
2.如要实现这一点，就必须使用一个排序函数，代码如下：
&script type="text/javascript"&
function sortNum(a,b) {
return a -
//升序，如降序，把“a - b”该成“b - a”
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr + "&br&");
document.write(myarr.sort(sortNum));
运行结果：
80,16,50,6,100,1
1,6,16,50,80,100
在执行时,从载入页面后每隔指定的时间执行代码。
setInterval(代码,交互时间);
参数说明：
1. 代码：要调用的函数或要执行的代码串。
2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。
调用函数格式(假设有一个clock()函数):
setInterval("clock()",1000)
setInterval(clock,1000)
我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&计时器&/title&
&script type="text/javascript"&
var int=setInterval(clock, 100)
function clock(){
var time=new Date();
document.getElementById("clock").value =
&input type="text" id="clock" size="50"
clearInterval() 方法可取消由 setInterval() 设置的交互时间。
clearInterval(id_of_setInterval)
参数说明:id_of_setInterval：由 setInterval() 返回的 ID 值。
每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&计时器&/title&
&script type="text/javascript"&
function clock(){
var time=new Date();
document.getElementById("clock").value =
// 每隔100毫秒调用clock函数，并将返回值赋值给i
var i=setInterval("clock()",100);
&input type="text" id="clock" size="50"
&input type="button" value="Stop" onclick="clearInterval(i)"
补充右边编辑器第12行，使用setInterval()计时器，显示动态时间。
补充右边编辑器第18行，点击Stop按钮后，取消计时器。
setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
setTimeout(代码,延迟时间);
参数说明：
1. 要调用的函数或要执行的代码串。2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
当我们打开网页3秒后，在弹出一个提示框，代码如下:
&!DOCTYPE HTML&
&script type="text/javascript"&
setTimeout("alert('Hello!')", 3000 );
当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。
&!DOCTYPE HTML&
&script type="text/javascript"&
function tinfo(){
var t=setTimeout("alert('Hello!')",5000);
&input type="button" value="start" onClick="tinfo()"&
要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。
&!DOCTYPE HTML&
&script type="text/javascript"&
var num=0;
function numCount(){
document.getElementById('txt').value=
num=num+1;
setTimeout("numCount()",1000);
&input type="text" id="txt" /&
&input type="button" value="Start" onClick="numCount()" /&
setTimeout()和clearTimeout()一起使用，停止计时器。
clearTimeout(id_of_setTimeout)
参数说明:id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 "Stop" 按钮来停止这个计数器：
&!DOCTYPE HTML&
&script type="text/javascript"&
var num=0,i;
function timedCount(){
& & document.getElementById('txt').value=
& & num=num+1;
& & i=setTimeout(timedCount,1000);
setTimeout(timedCount,1000);
& function stopCount(){
clearTimeout(i);
&input type="text" id="txt"&
&input type="button" value="Stop" onClick="stopCount()"&
history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
window.history.[属性|方法]
注意：window可以省略。
History 对象属性
History 对象方法
使用length属性，当前窗口的浏览历史总长度，代码如下：
&script type="text/javascript"&
var HL = window.history.
document.write(HL);
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用于获取或设置窗体的URL，并且可以用于解析URL。
location.[属性|方法]
location对象属性图示:
location 对象属性：
location 对象方法:
Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
查看浏览器的名称和版本，代码如下:
&script type="text/javascript"&
var browser=navigator.appN
var b_version=navigator.appV
document.write("Browser name"+browser);
document.write("&br&");
document.write("Browser version"+b_version);
返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.userAgent
几种浏览的user_agent.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。
使用userAgent判断使用的是什么浏览器(假设使用的是IE8浏览器),代码如下:
function validB(){
var u_agent = navigator.userA
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对象用于获取用户的屏幕信息。
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. 如果打开该页面后，如果不做任何操作则5秒后自动跳转到一个新的地址，如慕课网主页。
2. 如果点击“返回”按钮则返回前一个页面。
&!DOCTYPE html&&html& &head&
&title&浏览器对象&/title&
&meta http-equiv="Content-Type" content="text/ charset=gkb"/&
&/head& &body&
&!--先编写好网页布局--&
&h1&操作成功&/h1& &p&&b id="second" &5&/b&
秒后回到主页&a href="javascript:goback();"&返回&/p&
&script type="text/javascript"&
//获取显示秒数的元素，通过定时器来更改秒数。 var sec=document.getElementById("second"); var i =5; var timer=setInterval(function(){
sec.innerHTML =
window.location.href = "/"
//通过window的location和history对象来控制网页的跳转。
function back(){
window.history.go(-1);
} &/script& &/body&&/html&
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM&将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
先来看看下面代码:
将HTML代码分解为DOM节点层次图:
HTML文档可以说由节点构成的集合，DOM节点有:
1.&元素节点：上图中&html&、&body&、&p&等都是元素节点，即标签。
2.&文本节点:向用户展示的内容，如&li&...&/li&中的JavaScript、DOM、CSS等文本。
3.&属性节点:元素属性，如&a&标签的链接属性href=""。
遍历节点树:
以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。
注意:前两个是document方法。
返回带有指定名称的节点对象的集合。
document.getElementsByName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过&id 属性。
1.&因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2.&和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
看看下面的代码:
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
document.getElementsByTagName(Tagname)
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
看看下面代码，通过getElementsByTagName()获取节点。
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3.&TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。
把上面的例子转换到HTML中，如下:
&input type="checkbox" name="hobby" id="hobby1"&
input标签就像人的类别。
name属性就像人的姓名。
id属性就像人的身份证。
方法总结如下:
注意：方法区分大小写
通过下面的例子(6个name="hobby"的复选项，两个按钮)来区分三种方法的不同:
&input type="checkbox" name="hobby" id="hobby1"&
&input type="checkbox" name="hobby" id="hobby2"&
&input type="checkbox" name="hobby" id="hobby3"&
&input type="checkbox" name="hobby" id="hobby4"&
&input type="checkbox" name="hobby" id="hobby5"&
&input type="checkbox" name="hobby" id="hobby6"&
&input type="button" value = "全选" id="button1"&
&input type="button" value = "全不选" id="button1"&
1. document.getElementsByTagName("input")，结果为获取所有标签为input的元素，共8个。
2.&document.getElementsByName("hobby")，结果为获取属性name="hobby"的元素，共6个。
3.&document.getElementById("hobby6")，结果为获取属性id="hobby6"的元素，只有一个，"跑步"这个复选项。
通过元素节点的属性名称获取属性的值。
elementNode.getAttribute(name)
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字
看看下面的代码，获取h1标签的属性值：
h1标签的ID ：alinkh1标签的title ：getAttribute()获取标签的属值
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 永远是 #text4.&文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是&undefined 或 null2. 文本节点的 nodeValue 是文本自身3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性:&节点的类型，是只读的。以下常用的几种结点类型:
元素类型&& &节点类型& 元素 & & & & &1& 属性 & & & & &2& 文本 & & & & &3& 注释 & & & & &8& 文档 & & & & &9
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
elementNode.childNodes
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
我们来看看下面的代码:
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 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。&(以后章节讲解)
获取指定节点的父节点
elementNode.parentNode
注意:父节点只能有一个。
看看下面的例子,获取 P 节点的父节点，代码如下:
&div id="text"&
&p id="con"& parentNode 获取指点节点的父节点&/p&
&script type="text/javascript"&
& var mynode= document.getElementById("con");
& document.write(mynode.parentNode.nodeName);
parentNode 获取指点节点的父节点
访问祖节点:
elementNode.parentNode.parentNode
看看下面的代码:
&div id="text"& &
& & parentNode & & &
& & &span id="con"& 获取指点节点的父节点&/span&
&script type="text/javascript"&
& var mynode= document.getElementById("con");
& document.write(mynode.parentNode.parentNode.nodeName);
parentNode获取指点节点的父节点
注意: 浏览器兼容问题，chrome、firefox等浏览器标签之间的空白也算是一个文本节点。
试一试，通过获取的mylist节点，使用访问父节点parentNode，将"HTML/CSS"课程内容输出。
补充第30行代码，将"HTML/CSS"课程内容输出。
&!DOCTYPE HTML&&html&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8"&&title&无标题文档&/title&&/head&&body&&ul id="con"&&li id="lesson1"&javascript
&li id="tcon"& 基础语法&/li&
&li&流程控制语句&/li&
&li&函数&/li&
&li&事件&/li&
&li&DOM&/li&
&/ul&&/li&&li id="lesson2"&das&/li&&li id="lesson3"&dadf&/li&&li id="lesson4"&HTML/CSS
&li&文字&/li&
&li&段落&/li&
&li&表单&/li&
&li&表格&/li&
&/ul& &/li&&/ul&
type="text/javascript"&
var mylist = document.getElementById("tcon");
document.write(mylist.parentNode.parentNode.parentNode.lastChild.innerHTML);&/script&
&/body&&/html&
1.&nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
nodeObject.previousSibling
说明：如果无此节点，则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如是为元素节点，跳过。
LI = javascript
nextsibling: LI = jquery
在指定节点的最后一个子节点列表之后添加一个新的子节点。
appendChild(newnode)
newnode：指定追加的节点。
我们来看看，div标签内创建一个新的 P 标签，代码如下:
JavaScript
This is a new p
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
insertBefore(newnode,node);
newnode: 要插入的新节点。
node: 指定此节点前插入节点。
我们在来看看下面代码，在指定节点前插入节点。
This is a new p
JavaScript
注意:&otest.insertBefore(newnode,node); 也可以改为:&&otest.insertBefore(newnode,otest.childNodes[0]);&
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
nodeObject.removeChild(node)
node ：必需，指定需要删除的节点。
我们来看看下面代码，删除子点。
删除节点的内容: javascript
注意:&把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。
如果要完全删除对象，给 x 赋 null&值，代码如下:
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。&
node.replaceChild (newnode,oldnew )
newnode : 必需，用于替换 oldnew 的对象。&oldnew : 必需，被 newnode 替换的对象。
我们来看看下面的代码:
效果: 将文档中的 Java 改为 JavaScript。
1.&当 oldnode 被替换时，所有与之相关的属性内容都将被移除。&
2. newnode 必须先被建立。&
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
document.createElement(tagName)
tagName：字符串值，这个字符串用来指明创建元素的类型。
注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
我们来创建一个按钮，代码如下：
&script type="text/javascript"&
var body = document.
var input = document.createElement("input");
input.type = "button";
input.value = "创建一个按钮";
body.appendChild(input);
效果：在HTML文档中，创建一个按钮。
我们也可以使用setAttribute来设置属性，代码如下：
&script type="text/javascript"&
var body= document.
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);
效果：在HTML文档中，创建一个文本框，使用setAttribute设置属性值。 当点击这个文本框时，会弹出对话框“This is a text!”。
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
document.createTextNode(data)
data :&字符串值，可规定此节点的文本。
我们来创建一个&div&元素并向其中添加一条消息，代码如下：
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：
o& window.innerHeight - 浏览器窗口的内部高度
o& window.innerWidth - 浏览器窗口的内部宽度
二、对于 Internet Explorer 8、7、6、5：
o& document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
o& document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
Document对象的body属性对应HTML文档的&body&标签
o& document.body.clientHeight
o& document.body.clientWidth
在不同浏览器都实用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientW
var h= document.documentElement.clientHeight
|| document.body.clientH
scrollHeight和scrollWidth，获取网页内容高度和宽度。
一、针对IE、Opera:
scrollHeight 是网页内容实际高度，可以小于 clientHeight。
二、针对NS、FF:
scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。
三、浏览器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollW
var h=document.documentElement.scrollHeight
|| document.body.scrollH
注意:区分大小写
scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetW
var h= document.documentElement.offsetHeight
|| document.body.offsetH
我们先来看看下面的图：
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离&，即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离&，即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由&offsetParent&属性指定的父坐标的计算左侧位置&。
offsetTop:获取指定对象相对于版面或由&offsetParent&属性指定的父坐标的计算顶端位置 。
1. 区分大小写
2.&offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。
&!DOCTYPE HTML&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8"&&script type="text/javascript"&
function req(){
var div = document.getElementById("div1");
document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离
document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离
document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离
document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离
}&/script&&/head&&body style="border:10px solid #padding:0px 0margin:5px 10px"&
&div style="width:60%;border-right:1float:"&
&div style="float:"&
&div id="div1" style="border:5height:300width:200overflow:auto"&
&div style="height:500width:400px"&请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。&/div&
&input type="button" value="点击我!" onclick="req()" style="border: 1height: 25"/&
&div style="width:30%;float:"&
&ul style="list-style-type: line-height:30"&结果：
&li&offsetTop : &span id="li1"&&/span&&/li&
&li&offsetLeft : &span id="li2"&&/span&&/li&
&li& scrollTop : &span id="li3"&&/span&&/li&
&li&scrollLeft : &span id="li4"&&/span&&/li&
&div style="clear:"&&/div&
&/body&&/html&
现在利用之前我们学过的JavaScript知识，实现选项卡切换的效果。
& & 275万购昌平邻铁三居 总价20万买一居& & 200万内购五环三居 140万安家东三环& & 北京首现零首付楼盘 53万购东5环50平& & 京楼盘直降5000 中信府 公园楼王现房
& &&&40平出租屋大改造 美少女的混搭小窝& & &经典清新简欧爱家 90平老房焕发新生& & &新中式的酷色温情 66平撞色活泼家居& & &瓷砖就像选好老婆 卫生间烟道的设计
& & &通州豪华3居260万 二环稀缺2居250w甩& & &西3环通透2居290万 130万2居限量抢购& & &黄城根小学学区仅260万 121平70万抛!& & &独家别墅280万 苏州桥2居优惠价248万&& &
大家先思考和分析实现思路，然后在动手实现
一、HTML页面布局
选项卡标题使用ul..li
选项卡内容使用div
二、CSS样式制作
整个选项卡的样式设置
选项卡标题的样式设置
选项卡内容的样式设置
一开始只显示一个选项卡内容，其它选项卡内容隐藏。
三、JS实现选项卡切换
获取选项卡标题和选项卡内容
选项卡内容多个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配
通过改变DOM的css类名称,当前点击的选项卡显示，其它隐藏。
&!DOCTYPE html&&html&&head lang="en"&
&meta charset="UTF-8"&
&title&实践题 - 选项卡&/title&
&style type="text/css"&
*{padding:0margin: 0font:12px normal "microsoft yahei";}
#tabs {width:290padding:5height:150margin:20}
#tabs ul{list-style:display:height:30line-height:30border-bottom:2}
#tabs ul li{background:#cursor:float:list-style:height:28line-height:28margin:0px 3border:1px solid #border-bottom:display:inline-width:60text-align:}
#tabs ul li.on{border-top:2border-bottom: 2px solid #}
#tabs div{height:120line-height: 25border:1px solid #336699;border-top:padding:5}
.hide{display:}
&script type="text/javascript"&
window.onload = function(){
var oTab = document.getElementById("tabs");
var oUl = oTab.getElementsByTagName("ul")[0];
var oLis = oUl.getElementsByTagName("li");
var oDivs= oTab.getElementsByTagName("div");
for(var i= 0,len = oLis.i&i++){
oLis[i].index =
oLis[i].onclick = function() {
for(var n= 0;n&n++){
oLis[n].className = "";
oDivs[n].className = "hide";
this.className = "on";
oDivs[this.index].className = "";
&/head&&body&&div id="tabs"&
&li class="on"&房产&/li&
&li&家居&/li&
&li&二手房&/li&
275万购昌平邻铁三居 总价20万买一居&br&
200万内购五环三居 140万安家东三环&br&
北京首现零首付楼盘 53万购东5环50平&br&
京楼盘直降5000 中信府 公园楼王现房&br&
&div class="hide"&
40平出租屋大改造 美少女的混搭小窝&br&
经典清新简欧爱家 90平老房焕发新生&br&
新中式的酷色温情 66平撞色活泼家居&br&
瓷砖就像选好老婆 卫生间烟道的设计&br&
&div class="hide"&
通州豪华3居260万 二环稀缺2居250w甩&br&
西3环通透2居290万 130万2居限量抢购&br&
黄城根小学学区仅260万 121平70万抛!&br&
独家别墅280万 苏州桥2居优惠价248万&br&
&/div&&/div&
&/body&&/html&}
我要回帖
更多关于 南征北战生来倔强视频 的文章
更多推荐
- ·朗逸1.6手动挡价格手动舒适版1.6好吗？
- ·instax富士拍立得mini25使用教程相机怎么照完不出相纸？
- ·格力空调怎么定时关机云佳空调能不能同时设置定时开机关机？
- ·Pazuzu灵异事件与电影《驱魔电影原型人》
- ·这三位全部演员名字分别叫什么名子？
- ·求《约吧大明星第一季网盘二季》百度云不要钱的，不要压缩包的，谢谢
- ·谁有仙剑云之凡网盘资源的百度云资源
- ·蝶秀app怎么登不上去了
- ·很好奇一个问题，魅族pro7问题的METAL怎么没发现有WI
- ·绝地求生吧显示这个是什么意思？老是退出
- ·华为sla-tl10华为平面指纹解锁手机锁
- ·有什么软件可以让手机华为荣耀导航栏恢复像荣耀手机的华为荣耀导航栏恢复一样？
- ·商务电脑推荐笔记本推荐
- ·没黄钻怎么删空间描述弄全屏空间
- ·腾讯大王卡欠费后果之后充上话费后咋开不了流量了
- ·ZCT系列大型重载hiwin滚珠丝杠样本的价格怎么样？
- ·谁百度云有s60v3软件的主题。
- ·长虹长虹4k电视质量怎么样好不好
- ·我的孤岛求生之大逃杀大逃杀怎么打开之后就动不了了？难道是我的配置不行？我问过人了配置可以啊，
- ·求南征北战 生来倔强mp3的生来倔强百度云，必采纳，谢谢
- ·QQ怎么查银行卡的开户行。。
- ·小米一体手机可以换电池吗电池一体的，充不进电，老显示0的电
- ·华为P8和红米5A红米5Anote5A那个好
- ·微信附近人别人看不到我，我微信朋友圈能看到动态点进去看不到别人，重新申请号码之后又好使了。原微信号依旧不好使，请问什么原因
- ·今天好像是清理内存还是啥来着好想就这样样了怎么办
- ·有没有电脑师傅APP收徒弟，或者做APP的师傅APP收徒弟
- ·电脑主机插u盘被关掉了屏幕可以关掉，主机却关不掉，这是为什么？急急急！在线等！
- ·苹果怎么恢复剪错的视频手机视频剪错了怎么返回
- ·CaIIRec.me
- ·关于一个微信支付限额怎么解除的问题
- ·恢复微信到手机桌面桌面个微信桌面上
- ·请问这两款同样是五千块最值得入手的几款手机，选择那款？
- ·求这张图原图，去码软件
- ·听说宾兔兔定制鞋服定制不错，有网上定制渠道吗？
- ·西北军军建军大业百度云盘资源分享，谢谢
