慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

拾梦者sdj
插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:
```
appendChild(newnode)
```
参数:
newnode：指定追加的节点。
我们来看看，div标签内创建一个新的 P 标签，代码如下:
运行结果:
```
HTML JavaScript This is a new p
```
查看全部

0 采集收起来源：插入节点appendChild()
2019-02-25
拾梦者sdj
访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：
```
nodeObject.nextSibling
```
说明：如果无此节点，则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：
```
nodeObject.previousSibling
```
说明：如果无此节点，则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如是为元素节点，跳过。
运行结果:
```
LI = javascript nextsibling: LI = jquery
```
查看全部

1 采集收起来源：访问兄弟节点
2019-02-25

拾梦者sdj

访问父节点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等浏览器标签之间的空白也算是一个文本节点。

查看全部

0 采集收起来源：访问父节点parentNode

2019-02-25

拾梦者sdj
访问子节点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
```
node.firstChild
```
说明：与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
```
node.lastChild
```
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
注意: 上一节中，我们知道Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。 (以后章节讲解)
查看全部

0 采集收起来源：访问子节点的第一和最后项
2019-02-25

是屎想者啊

<script type="text/javascript">
    var myarr=new Array();  //先声明一维 
    for(var i=0;i<3;i++){   //一维长度为3   
    myarr[i]=new Array();  //再声明二维    
    for(var j=0;j<6;j++){   //二维长度为6   
    myarr[i][j]=i*j;   // 赋值，每个数组元素的值为i*j   
    document.write("myarr["+i+"]["+j+"]的值:" + myarr[i][j]+"<br>");   
    }
  }
</script>

问：myarr[i] 这里为什么用i

答：将myarr中的一个元素赋值为一个数组；

如，开始是 var myarr = new Array();

这时候只是将myarr定义为一个数组；

里面的内容是空的；

这个时候可以进行将里面的元素进行赋值操作

如myarr[0] = 1;

myarr[1] = "hello world!";

所以这里的 myarr[i] = new Array(); 也是同理的赋值操作。

查看全部

0 采集收起来源：二维数组

2019-02-25

拾梦者sdj
访问子节点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
```
查看全部

0 采集收起来源：访问子节点childNodes
2019-02-25
拾梦者sdj

节点属性
在文档对象模型 (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

查看全部

0 采集收起来源：节点属性
2019-02-25
该你走运气

什么是事件
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。
主要事件表:

查看全部

0 采集收起来源：什么是事件
2019-02-25
拾梦者sdj
setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：
```
elementNode.setAttribute(name,value)
```
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。
查看全部

0 采集收起来源：setAttribute()方法
2019-02-25
拾梦者sdj
getAttribute()方法
通过元素节点的属性名称获取属性的值。
语法：
```
elementNode.getAttribute(name)
```
说明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点.（需注意)
2. name：要想查询的元素节点的属性名字
看看下面的代码，获取h1标签的属性值：
运行结果:
h1标签的ID ：alink
h1标签的title ：getAttribute()获取标签的属值
查看全部

0 采集收起来源：getAttribute()方法
2019-02-25
慕粉4310960

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

查看全部

0 采集收起来源：节点属性
2019-02-25

四代火影来了

<!DOCTYPE  HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>

<script type="text/javascript">

  //通过javascript的日期对象来得到当前的日期，并输出。
  var date1 = new Date();
  var date2 = ["日","一","二","三","四","五"];
  document.write(date1+"<br>");
  document.write(date1.getFullYear()+"年"+date1.getMonth()+"月"+date1.getDate()+"日"+" "+"星期"+date2[date1.getDay()]+"<br>");

  //成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
  var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
  var scoreArr = scoreStr.split(";");
  //document.write(scoreArr);
 
  //从数组中将成绩撮出来，然后求和取整，并输出。
  var score = new Array();
  var sum=0;
  var avg=0;
  for(i=0;i<scoreArr.length;i++)
  {
      sum+=parseInt(scoreArr[i].slice(3,5));
  }
  avg = sum/scoreArr.length;
  document.write(sum + "<br>");
  document.write("保留整数: " + Math.round(avg));
</script>
</head>
<body>
</body>
</html>
1.获取当前日期：年，月，日，星期*
2.用分隔符(split)分割数组
3.for循环和Math.round().(就近取整）

查看全部

0 采集收起来源：编程练习

2019-02-25

qq_慕数据8341535
网页卷去的距离与偏移量
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。
查看全部

0 采集收起来源：网页卷去的距离与偏移量
2019-02-24

qq_慕数据8341535

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

浏览器兼容性

查看全部

0 采集收起来源：网页尺寸scrollHeight

2019-02-24

qq_慕数据8341535

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

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

查看全部

0 采集收起来源：浏览器窗口可视区域大小

2019-02-24

首页上一页 452 453 454 455 456 457 458 下一页尾页

0/150

提交

取消

开始学习

课程须知: 你需要具备HTML、css基础知识，建议同学们也可以想学习下js入门篇，快速认识js，熟悉js基本语法，更加快速入手进阶篇！

老师告诉你能学到什么？: 通过JavaScript学习，掌握基本语法，制作简单交互式页面

JavaScript进阶篇

插入节点appendChild()

访问兄弟节点

访问父节点parentNode

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

访问子节点childNodes

节点属性

什么是事件

setAttribute()方法

getAttribute()方法

网页卷去的距离与偏移量