慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

慕莱坞5514146

Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。

查看全部

0 采集收起来源：多种选择（Switch语句)

2018-04-12

爱学习的小若若

节点属性
在文档对象模型 (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 采集收起来源：节点属性
2018-04-12
慕莱坞5514146

向数组增加一个新元素：使用一个新索引并赋值

查看全部

0 采集收起来源：团里添加新成员（向数组增加一个新元素）
2018-04-12
慕莱坞5514146

操作符之间的优先级（高到低）：算术比较逻辑 “=”赋值

查看全部

0 采集收起来源：保持先后顺序(操作符优先级）
2018-04-12
古先森

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>变量赋值</title>
<script type="text/javascript">

var num1=12;
var num2=32
document.write("num1的值是:"+num1);
document.write("num2的值是:"+num2);
document.write(num1+num2);
</script>
</head>
<body>
</html>

查看全部

0 采集收起来源：多样化的我(变量赋值）
2018-04-11
路上的小白

创建数组语法
var myarray= new Array();
我们创建数组的同时，还可以为数组指定长度，长度可以任意指定
var myarray= new Array(5);
注意：创建的新数组是空数组，没有值，如输出，则显示undefined。创建的数组，指定了长度，但仍可以将元素储存在规定长度以外。

查看全部

0 采集收起来源：组团，并给团取个名（如何创建数组）
2018-04-11
路上的小白

比较操作符
两个操作数通过比较操作符进行比较，得到值为真（true）和假(false)。

查看全部

0 采集收起来源：较量较量(比较操作符)
2018-04-11

慕神7088389

这次练习再次证明了编程是不断学习与进步的过程～～～

<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:void (0);" onclick="del(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

    <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:void (0);" onclick="del(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>

</table>
<input type="button" value="添加一行"  onclick='add()'/>   <!--在添加按钮上添加点击事件  -->
</body>

<script type="text/javascript">

    // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
    window.onload = function(){
        var atr=document.getElementsByTagName('tr');
        for(var i=0;i<atr.length;i++){         //for循环为每行表格添加bgColor函数
            bgColor(atr[i]);
        }
    };
    function bgColor(trColor){          //bgColor函数为每行表格添加鼠标移入移出事件
        trColor.onmouseover=function () {
            trColor.style.backgroundColor='#f2f2f2'; //并立即执行对应的背景颜色变化函数
        };
        trColor.onmouseout=function () {
            trColor.style.backgroundColor='#fff';
        }
    }

    // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
    function add(){
        var tab=document.getElementById('table');
        var newtr=document.createElement('tr');

        var newtd0=document.createElement('td');
        newtd0.innerHTML='xh003';

        var newtd1=document.createElement('td');
        newtd1.innerHTML='eva';

        var newtd2=document.createElement('td');
        var newtd2a=document.createElement('a');
        newtd2a.setAttribute('href','javascript:void(0);');  //为新tr第三列添加删除链接
        newtd2a.setAttribute('onclick','del(this)');
        newtd2a.innerHTML='删除';

        newtd2.appendChild(newtd2a);
        newtr.appendChild(newtd0);
        newtr.appendChild(newtd1);
        newtr.appendChild(newtd2);

        var afterTr=tab.appendChild(newtr);   //将新添加的tr返回给afterTr
        bgColor(afterTr);      //afterTr带入到bgColor函数，使其也拥有背景颜色变化
    }

    // 创建删除函数
    function del(obj){                //通过this传递到obj，obj指的就是a标签本身
        var parent=obj.parentNode.parentNode.parentNode;  //指table
        var del=obj.parentNode.parentNode;       //指a标签父级的父级tr
        parent.removeChild(del);
    }
</script>

查看全部

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

2018-04-11

慕神7088389

大家多看看这个教案的图。
要理解一点，底部的浅灰色文本和窗口内的深灰色文本实际上同一个文本，这里展示的是垂直与横向滚动条的滚动对文本内容产生的位置影响。然后再看scrollLeft,offsetTop这些相对于窗口的距离属性就容易理解了。

查看全部

0 采集收起来源：网页卷去的距离与偏移量
2018-04-11
慕神7088389

offsetHeight = clientHeight + 滚动条 + 边框。
offsetWidth同理。

查看全部

0 采集收起来源：网页尺寸offsetHeight
2018-04-11

慕神7088389

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

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;
document.write(w+'<br />'+h);

查看全部

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

2018-04-11

慕神7088389

几种不同方法：

// var w=document.body.clientWidth;   兼容性不太好
// var h=document.body.clientHeight;

// var w=window.innerWidth;       主流浏览器兼容支持
// var h=window.innerHeight;

var w= document.documentElement.clientWidth //兼容性最好方案
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;
document.write(w+'<br />'+h);

查看全部

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

2018-04-11

慕神7088389

var newp=document.createElement('p');
newp.className='message';
var newtext=document.createTextNode('I love JavaScript!');
newp.appendChild(newtext);
document.body.appendChild(newp);

DOM中获取body，可以直接

document.body

查看全部

0 采集收起来源：创建文本节点createTextNode

2018-04-11

慕神7088389

var main = document.body;
//创建链接
function createa(url,text){
    var linka=document.createElement('a');
    linka.setAttribute('href',url);
    linka.innerHTML=text;
    linka.style.color='red';
    main.appendChild(linka);
}
// 调用函数创建链接
createa('http://www.imooc.com','慕课网');

查看全部

0 采集收起来源：创建元素节点createElement

2018-04-11

慕神7088389

      function replaceMessage(){
        var newnode=document.createElement('i');
    //  newnode.innerHTML='JavaScript'; 这样简单点，不用像教学案例再去添加文本节点
        var newnodeText=document.createTextNode('JavaScript');
      newnode.appendChild(newnodeText); 
        var oldone=document.getElementById('oldnode');
        oldone.parentNode.replaceChild(newnode,oldone);
		   
       }

另一种：

      function replaceMessage(){
        var oldone=document.getElementById('oldnode');
        var inner=oldone.innerHTML;
        var newnode=document.createElement('i');
        oldone.parentNode.replaceChild(newnode,oldone);
		 newnode.innerHTML=inner;  
       }

查看全部

0 采集收起来源：替换元素节点replaceChild()

2018-04-11

首页上一页 843 844 845 846 847 848 849 下一页尾页

0/150

提交

取消

开始学习

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

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

JavaScript进阶篇

节点属性