慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

宝慕林5979030

注意使用while循环过滤非元素节点。

查看全部

0 采集收起来源：访问兄弟节点
2018-09-25
宝慕林5979030

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript
<ul>
<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
<ul>
<li>文字</li>
<li>段落</li>
<li>表单</li>
<li>表格</li>
</ul>
</li></ul>
<script type="text/javascript">
var mylist = document.getElementById("tcon");
var x = tcon.parentNode.parentNode.parentNode.lastChild;
document.write(x.firstChild.nodeValue);
document.write(x.childNodes[0].nodeValue);
</script>

</body>
</html>

查看全部

0 采集收起来源：访问父节点parentNode
2018-09-25
慕前端6531350

在网页中插入JS代码:
<script type="text/javascript"></script>
对话框内容: alert("...");

查看全部

0 采集收起来源：让你认识JS
2018-09-25
影飞镰
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
```
stringObject.substring(startPos,stopPos)
```
startPos 必需非负整数，开始位置
stopPos 可选非负整数结束位置
查看全部

0 采集收起来源：提取字符串substring()
2018-09-25
总有民女想推朕

一、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-09-24
总有民女想推朕

第25行，title是属性名，WEB前端技术是属性值，不能弄混了

查看全部

0 采集收起来源：setAttribute()方法
2018-09-24
总有民女想推朕

第20行的con[i]的[i]不能忘了

查看全部

0 采集收起来源：getAttribute()方法
2018-09-24
总有民女想推朕

elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
即var elementNode=document.getElementById()等

查看全部

0 采集收起来源：getAttribute()方法
2018-09-24
总有民女想推朕

以后看一看

查看全部

0 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName
2018-09-24
总有民女想推朕

getElementsByName
getElementById
下面一个少了个s

查看全部

0 采集收起来源：getElementsByName()方法
2018-09-24
qq_Mathilda_ftuwIT

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
      window.onload = function(){
          var arr=document.getElementsByTagName("tr");
          for(var i = 0 ; i < arr.length ; i++){
                 arr[i].onmouseover=function(){
                     this.style.backgroundColor="#f2f2f2";
                 }
                 arr[i].onmouseout=function(){
                     this.style.backgroundColor="white";
                 }
          }
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
   }//onload函数只在界面加载的时候执行一次，所以要在添加按钮的添加的行里面再再写一次才能那个新添加的行才有换颜色的效果
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     function add(){
        var xh = prompt("请输入学号");
        var xm = prompt("请输入姓名")
        var parentno = document.getElementById("table");
        var newnode = document.createElement("tr");
        newnode.style.width="100%";
        newnode.style.height="25px";
        var newson = document.createElement("td");
        var newson1 = document.createElement("td");
        var newson2 = document.createElement("td");
        newson.innerHTML=xh;
        newson1.innerHTML=xm;
        newson2.innerHTML="<a href='javascript:;' onclick='remove(this)'>删除</a>";
//       这几行是添加三个td内容行
        newnode.appendChild(newson);
        newnode.appendChild(newson1);
        newnode.appendChild(newson2);
        //这一句是添加tr那一行
        parentno.appendChild(newnode);
        var arr=document.getElementsByTagName("tr");
          for(var i = 0 ; i < arr.length ; i++){
                 arr[i].onmouseover=function(){
                     this.style.backgroundColor="#f2f2f2";
                 }
                 arr[i].onmouseout=function(){
                     this.style.backgroundColor="white";
                 }
          }
     }
     // 创建删除函数
       function remove(x){
           var parent = x.parentNode.parentNode.parentNode;
           parent.removeChild(x.parentNode.parentNode);
       }
</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="remove(this)">删除</a></td>   
           </tr>
           <tr>
               <td>xh002</td>
               <td>刘小芳</td>
               <td><a href="javascript:;" onclick="remove(this)">删除</a></td>   
           </tr>
       </table>
       <input type="button" value="添加一行" onclick="add()" />   
</body>
</html>

查看全部

0 采集收起来源：编程练习
2018-09-24
宝慕林5979030

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<p id="intro">我的课程</p>
<ul>
<li title="JS">JavaScript</li>
<li title="JQ">JQuery</li>
<li title="">HTML/CSS</li>
<li title="JAVA">JAVA</li>
<li title="">PHP</li>
</ul>
<h3>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h3>
<script type="text/javascript">
var Lists=document.getElementsByTagName("li");
for (var i=0; i<Lists.length;i++)
{
var text = Lists[i].getAttribute("title");
if(text==""){
var txt = Lists[i].innerHTML;
Lists[i].setAttribute("title",txt);
}
document.write(Lists[i].getAttribute("title")+"<br>");
}
</script>
</body>
</html>

查看全部

0 采集收起来源：setAttribute()方法
2018-09-24
宝慕林5979030

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute()</title>
</head>
<body>
<p id="intro">课程列表</p>
<ul>
<li title="第1个li">HTML</li>
<li>CSS</li>
<li title="第3个li">JavaScript</li>
<li title="第4个li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length; i++){
var text = con[i].getAttribute("title");
if(text!=null)
{
document.write(text+"<br>");
}
}
</script>
</body>
</html>

查看全部

0 采集收起来源：getAttribute()方法
2018-09-24
影飞镰
split()方法为字符串分割为字符串数组,并返回数组
```
stringObject.split(separator,limit)
```
```
separator 必需从该参数指定的地方分割stringObject
```
可为空
limit 可选参数分割次数
查看全部

0 采集收起来源：字符串分割split()
2018-09-24
宝慕林5979030

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<form>
请选择你爱好:<br>
<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"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
// 任务1
for (let i=0; i<hobby.length; i++){
if(hobby[i].type == "checkbox"){
hobby[i].checked = true;
}
}
}
function clearall(){
var hobby = document.getElementsByName("hobby");
// 任务2
for (let i=0; i<hobby.length; i++){
hobby[i].checked = false;
}
}

function checkone(){
var j=document.getElementById("wb").value;
// 任务3
switch (j) {
case "1":
document.getElementById("hobby1").checked = true;
break;
case "2":
document.getElementById("hobby2").checked = true;
break;
case "3":
document.getElementById("hobby3").checked = true;
break;
case "4":
document.getElementById("hobby4").checked = true;
break;
case "5":
document.getElementById("hobby5").checked = true;
break;
case "6" :
document.getElementById("hobby61").checked = true;
break;
default:
alert("请输入1-6");
break;
}
}

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

查看全部

0 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName
2018-09-24

首页上一页 601 602 603 604 605 606 607 下一页尾页

0/150

提交

取消

开始学习

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

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