慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

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

0 采集收起来源：访问子节点的第一和最后项
2019-05-23
weixin_慕仙2122268
访问子节点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：
```
elementNode.childNodes
```
注意：
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
查看全部

0 采集收起来源：访问子节点childNodes
2019-05-23
weixin_慕仙2122268

节点属性
在文档对象模型 (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-05-23
weixin_慕仙2122268
setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：
```
elementNode.setAttribute(name,value)
```
说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。
查看全部

0 采集收起来源：setAttribute()方法
2019-05-23
weixin_慕仙2122268
getAttribute()方法
通过元素节点的属性名称获取属性的值。
语法：
```
elementNode.getAttribute(name)
```
说明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字
查看全部

0 采集收起来源：getAttribute()方法
2019-05-23
weixin_慕侠7517353

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流程控制语句</title>
<script type="text/javascript">

//第一步把之前的数据写成一个数组的形式,定义变量为 infos
var fbb=[
['小A','女',21,'大一'],
['小B','男',23,'大三'],
['小C','男',24,'大四'],
['小D','女',21,'大一'],
['小E','女',22,'大四'],
['小F','男',21,'大一'],
['小G','女',22,'大二'],
['小H','女',20,'大三'],
['小I','女',20,'大一'],
['小J','男',20,'大三']
];
var i=0;
var n=0;
document.write("第一次筛选，找出都是大一的信息"+"<br>");
for(var i=0;i<fbb.length;i++){
if(fbb[i][3]=='大一'){
document.write(fbb[i]+"<br>");
}
}
document.write("第二次筛选，找出都是女生的信息"+"<br>");
for(var n=0;n<fbb.length;n++){
if(fbb[n][1]=='女'){
document.write(fbb[n]+"<br>");
}
}

//第一次筛选，找出都是大一的信息

//第二次筛选，找出都是女生的信息

</script>
</head>
<body>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2019-05-23
77阿棱
sort()方法使数组中的元素按照一定的顺序排列。
语法:
```
arrayObject.sort(方法函数)
```
参数说明：
1.如果不指定<方法函数>，则按unicode码顺序排列。
2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。
```
myArray.sort(sortMethod);
```
注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。
查看全部

0 采集收起来源：数组排序sort()
2019-05-23
77阿棱
slice() 方法可从已有的数组中返回选定的元素。
语法
```
arrayObject.slice(start,end)
```
参数说明：
1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
2. 该方法并不会修改数组，而是返回一个子数组。
注意：
1. 可使用负值从数组的尾部选取元素。
2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
3. String.slice() 与 Array.slice() 相似。
查看全部

0 采集收起来源：选定元素slice()
2019-05-23
77阿棱
reverse() 方法用于颠倒数组中元素的顺序。
语法：
```
arrayObject.reverse()
```
注意：该方法会改变原来的数组，而不会创建新的数组。
查看全部

0 采集收起来源：颠倒数组元素顺序reverse()
2019-05-23
77阿棱
join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
语法：
```
arrayObject.join(分隔符)
```
参数说明:
注意：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。
查看全部

0 采集收起来源：指定分隔符连接数组元素join()
2019-05-23
77阿棱
concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
语法
```
arrayObject.concat(array1,array2,...,arrayN)
```
参数说明：
注意: 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
查看全部

0 采集收起来源：数组连接concat()
2019-05-23
77阿棱
数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的
数组定义的方法：
1. 定义了一个空数组:
```
var  数组名= new Array();
```
2. 定义时指定有n个空元素的数组：
```
var 数组名 =new Array(n);
```
3.定义数组的时候，直接初始化数据：
```
var  数组名 = [<元素1>, <元素2>, <元素3>...];
```
数组元素使用：
```
数组名[下标] = 值;
```
注意: 数组的下标用方括号括起来，从0开始。
数组属性：
length 用法：<数组对象>.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。
数组方法：
查看全部

0 采集收起来源： Array 数组对象
2019-05-23
77阿棱
```
random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。
```
语法：
```
Math.random();
```
注意：返回一个大于或等于 0 但小于 1 的符号为正的数字值。
注意:因为是随机数，所以每次运行结果不一样，但是0 ~ 1的数值。
查看全部

0 采集收起来源：随机数 random()
2019-05-23
慕盖茨1034230

<script type="text/JavaScript">
function sum(x,y,z)
{
var sum = x + y +z;
document.write(x+"、"+y+"、"+z+"和:"+sum+"<br/>");
}
sum(5,8,3);
sum(7,1,4);

</script>

声明sum才能得到调用的两个函数的结果，否则只能得到第一个

查看全部

0 采集收起来源：有参数的函数
2019-05-23
慕婉清4016867

编程练习
制作一个表格，显示班级的学生信息。
要求：
1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff
2. 点击添加按钮，能动态在最后添加一行
3. 点击删除按钮，则删除当前行
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">

      window.onload = function(){
          var tr=document.getElementsByTagName("tr");
          for(var i= 0;i<tr.length;i++)
          {
              bgcChange(tr[i]);
          }
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
      }
   function bgcChange(obj)
     {
        obj.onmouseover=function(){
            obj.style.backgroundColor="#f2f2f2";
        }
        obj.onmouseout=function(){
            obj.style.backgroundColor="#fff";
        }
   }

   // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     var num=2;
     function add(){
        num++;
        var tr=document.createElement("tr");
        var xh=document.createElement("td");
        var xm=document.createElement("td");
        xh.innerHTML="xh00"+num;
        xm.innerHTML="第"+num+"学生";
        var del=document.createElement("td");
        del.innerHTML="<a href='javascript:;' onclick='del(this)' >删除</a>";
        var tab=document.getElementById("table");
        tab.appendChild(tr);
        tr.appendChild(xh);
        tr.appendChild(xm);
        tr.appendChild(del);
        var tr = document.getElementsByTagName("tr");
          for(var i= 0;i<tr.length;i++)
          {
              bgcChange(tr[i]);
          }
     }

     /*
        var sNum=prompt('请输入学号','');
        var sName=prompt('请输入姓名','');
        if(sNum!=null&&sNum!=''&&sName!=null&&sName!=''){

            var newtr=document.createElement('tr');
            var newtrS=newtr.innerHTML='<td>'+sNum+'</td>'+'<td>'+sName+'</td>'+'<td><a href="javascript:;" onclick="del(this)">删除</a></td>';
            var oTC=document.getElementById("table").lastChild;
            oTC.appendChild(newtr);

        }else{alert('请重新输入');}
   */

     // 创建删除函数
     function del(obj)
     {
         var tr=obj.parentNode.parentNode;
         tr.parentNode.removeChild(tr);
     }




</script>
</head>
<body>
       <table border="1" width="50%" id="table">
       <tr>
       <th>学号</th>
       <th>姓名</th>
       <th>操作</th>
       </tr>

       <tr>
       <td>xh001</td>
       <td>王小明</td>
       <td><a href="javascript:;" onclick="del(this);">删除</a></td>   
       </tr>

       <tr>
       <td>xh002</td>
       <td>刘小芳</td>
       <td><a href="javascript:;" onclick="del(this);">删除</a></td>   
       </tr>

       </table>
       <input type="button" value="添加一行" onclick="add()" />   
</body>
</html>

查看全部

0 采集收起来源：编程练习
2019-05-23