慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

加油阿升

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

//第一步把之前的数据写成一个数组的形式,定义变量为 infos
var infos=[
["小A","女","21","大一"],
["小B","男","23","大三"],
["小C","男","24","大四"],
["小D","女","21","大一"],
["小E","女","22","大四"],
["小F","男","21","大一"],
["小G","女","22","大二"],
["小H","女","20","大三"],
["小I","女","20","大一"],
["小J","男","20","大三"],
]

//第一次筛选，找出都是大一的信息
document.write("第一次筛选，找出都是大一的信息"+"<br/>");
var a=0;
var sx1=new Array();
for (var i=0;i<infos.length;i++){
for (var j=0;j<infos[i].length;j++){
if (infos[i][j]=="大一"){
sx1[a]=infos[i];
document.write(sx1[a]+"<br/>");
a++;
}
}
}
document.write(sx1.length+"<br/>");

//第二次筛选，找出都是女生的信息
document.write("第二次筛选，找出都是女生的信息"+"<br/>");
var b=0;
var sx2=new Array();
for(var m = 0; m<sx1.length;m++){
for(var n=0;n<sx1[m].length;n++){
if(sx1[m][n] == "女"){
sx2[b]=sx1[m];
document.write(sx2[b]+"<br/>");
}
}
}
</script>
</head>
<body>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2019-09-14
好昵称都被占用了

”javascript:”是另外一种嵌套js代码在网页中的方法。跟通过标签嵌套js代码差不多。如点击下面链接会会执行”javascript:”后面的内容。
<a href="javascript:;" onclick="deleteRow(this)">删除</a>

查看全部

0 采集收起来源：编程练习
2019-09-11
征服宇宙的大super

区别getElementByID,getElementsByName,getElementsByTagName
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。

查看全部

0 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName
2019-09-11
征服宇宙的大super

文档对象模型DOM：定义访问和处理HTML文档的标准方法。
HTML文档可以说由节点构成的集合，DOM节点有:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

查看全部

0 采集收起来源：认识DOM
2019-09-11
好昵称都被占用了

Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会

查看全部

0 采集收起来源：访问子节点的第一和最后项
2019-09-11
好昵称都被占用了

和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。可以用for来遍历出所有的节点。
for (var i=0; i< jd.length;i++){ }；

查看全部

0 采集收起来源：getElementsByTagName()方法
2019-09-11
好昵称都被占用了

类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

查看全部

0 采集收起来源：setAttribute()方法
2019-09-11
残夜_
一维数组，我们看成一组盒子，每个盒子只能放一个内容。
```
一维数组的表示: 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]]
3. 赋值
myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。
说明: myarr[0][1] ,0 表示表的行，1表示表的列。
查看全部

0 采集收起来源：二维数组
2019-09-11
残夜_
```
myarray.length; //获得数组myarray的长度
```
查看全部

0 采集收起来源：了解成员数量(数组属性length)
2019-09-11
幕布斯617278
考虑到代码的维护和可扩展性, 所以不宜在html里把数据写死,应该在script里,根据数据动态添加结构
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */

ul,
li {
list-style: none;
padding: 0;
margin: 0;
}

.container {
position: relative;
margin: 50px 100px;
width: 360px;
text-align: center;
}

.titles {
display: flex;
justify-content: space-between;
/* background-color: green; */
margin: 0 auto;
width: 98%;
}

.title {
flex: 1;
padding: 10px 0;
border: 1px solid #ccc;
border-bottom: none;
cursor: pointer;
}

.title-active {
z-index: 99;
border-top: 2px solid #B34D61;
background-color: #fff;
}

.news {
position: absolute;
top: 40px;
padding: 10px 0;
line-height: 2em;
width: 358px;
border: 1px solid #448CBB;
border-top: 2px solid #B34D61;
/* background-color: gold; */
visibility: hidden;
}

.news-active {
visibility: visible;
}
</style>

</head>

<body>

<div class="container">

</div>

<script>
window.onload = function () {
/*---------数据整理-----------*/
let contentArr = [{
title: "房产",
news: ["275万购昌平邻铁三居总价20万买一居", "200万内购五环三居 140万安家东三环", "北京首现零首付楼盘 53万购东5环50平", "京楼盘直降5000 中信府公园楼王现房"]
}, {
title: "家居",
news: ["40平出租屋大改造美少女的混搭小窝", "经典清新简欧爱家 90平老房焕发新生", "新中式的酷色温情 66平撞色活泼家居", "瓷砖就像选好老婆卫生间烟道的设计"]
}, {
title: "二手房",
news: ["通州豪华3居260万二环稀缺2居250w甩", "西3环通透2居290万 130万2居限量抢购", "黄城根小学学区仅260万 121平70万抛!",
"独家别墅280万苏州桥2居优惠价248万"
]
}]

/*---------渲染页面-----------*/
let container = document.getElementsByClassName("container")[0] //获取切换卡容器
// console.log(container)

let count = contentArr.length //获取数据:选项卡个数

let titleStr = '<ul class="titles ">' //储存选项卡标题
let contentStr = "" //储存选项卡内容

for (let i = 0; i < count; i++) {
titleStr += '<li class="title" data-index="' + i + '">' + contentArr[i].title + '</li>'

contentStr += '<ul class="news" data-indexmap="' + i + '">'
for (let j = 0; j < 4; j++) {
contentStr += '<li class="newslist">' + contentArr[i].news[j] + '</li>'
}
contentStr += '</ul>'
}
titleStr += '</ul>'

// console.log(titleStr)
// console.log(contentStr)

container.innerHTML = titleStr + contentStr

/*---------实现选项卡切换-----------*/
// 获取选项卡元素, 默认选中第一项选项卡
let titleBox = document.getElementsByClassName("titles")[0] //获取选项卡标题容器
let titleLis = titleBox.getElementsByTagName("li")
titleLis[0].className = "title title-active" //默认选中第一个选项卡

let contentBoxArr = document.getElementsByClassName("news") //获取选项卡对应内容容器
contentBoxArr[0].className = "news news-active" //默认选中第一个选项卡

// 定义方法:切换选项卡
function changeTab(event) {
// console.log(event);
// console.log(event.target);
// console.log(event.target.dataset.index);

let curID = event.target.dataset.index //当前点击项的index(自主设置,同数组下标值)

for (let k = 0; k < contentArr.length; k++) { //先保证所有选项卡恢复原样
titleLis[k].className = "title"
contentBoxArr[k].className = "news"
}
titleLis[curID].className = "title title-active" //再使选中选项卡为激活状态
contentBoxArr[curID].className = "news news-active"
}

titleBox.addEventListener("click", changeTab) //给选项卡标题容器增加 "点击" 事件监听

}
</script>

</body>

</html>
查看全部

0 采集收起来源：编程挑战
2019-09-10
幕布斯617278

<!DOCTYPE html>
<html>

<head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    /*通过类名不同来改变背景色*/
    .mouseoverbg {
      background-color: #f2f2f2;
    }

    .mouseoutbg {
      background-color: #fff;
    }

    /* 为了美观 , 去除单元格间隙*/
    table {
      border-collapse: collapse;
    }
  </style>

</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="deleteData(event)">删除</a></td>
      
    </tr>

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

  <label for="studentID">学号: </label>
  <input type="text" name="studentID" placeholder="请输入新增学生学号" id="addID">
  <br />

  <label for="studentName">姓名: </label>
  <input type="text" name="studentName" placeholder="请输入新增学生姓名" id="addName">
  <br />

  <input type="button" value="添加一行" onclick="addData()" />
  

  <script type="text/javascript">
    window.onload = function () {
      changeBG()
    }

    // 鼠标移动改变背景,可以通过给table绑定事件监听,每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
    function changeBG() {
      var table = document.getElementById("table");
      //事件监听: onmouseover, 事件代理
      table.addEventListener("mouseover", listenMouse);
      //事件监听: onmouseout, 事件代理
      table.addEventListener("mouseout", listenMouse);
    }

    function listenMouse(event) {
      // console.log(event);
      // console.log(event.type); // mouseover 或者是 mouseout
      // console.log("我" + event.type + "了" + event.target.nodeName + "我的老爸是:" + event.target.parentNode.nodeName);

      //获取鼠标事件当前对象
      var curNode = event.target;
      var curNodeName = curNode.nodeName.toLowerCase(); //event获取的nodeName通常为全大写

      //根据当前对象不同, 改变相应行背景颜色
      switch (curNodeName) {
        case "td":
        case "th":
          curNode.parentNode.className = event.type + "bg" //添加类名: mouseoverbg 或者 mouseoutbg
          break;
        case "a":
          curNode.parentNode.parentNode.className = event.type + "bg" //添加类名: mouseoverbg 或者 mouseoutbg
          break;
        case "table":
          break;
      }
    }

    // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
    function addData() {
      //分别获取输入框的学生信息值(完善了一些html结构,详见本案例html)
      var addID = document.getElementById("addID").value;
      var addName = document.getElementById("addName").value;

      // 学生信息填写完成后, 添加新数据
      if (addID && addName) {
        // 创建新行
        var addtr = document.createElement("tr");
        addtr.innerHTML = '<td>' + addID + '</td><td>' + addName +
          '</td><td><a href="javascript:;" onclick="deleteData(event)">删除</a></td>';

        // 将新行添加入table尾部
        table.childNodes[1].appendChild(addtr);

      } else {
        alert("请输入完整的信息!")
      }
    }

    // 创建删除函数
    function deleteData(event) {
      // console.log(event.target)  //对应a标签
      var curTR = event.target.parentNode.parentNode;
      curTR.parentNode.removeChild(curTR);
    }
  </script>
</body>

</html>

查看全部

0 采集收起来源：编程练习
2019-09-10
ShinnU

数组方法：

查看全部

0 采集收起来源： Array 数组对象
2019-09-10
幕布斯617278
一、网页尺寸offsetHeight
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
```
var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;
```
查看全部

0 采集收起来源：网页尺寸offsetHeight
2019-09-10

幕布斯617278

浏览器窗口可视区域大小

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

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

查看全部

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

2019-09-10

幕布斯617278

<!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"); //伪数组            // console.log(hobby)            // 任务1 :当点击"全选"按钮时，将选中所有的复选项            Array.prototype.forEach.call(hobby, (item => {                if (item.type == "checkbox") {                    item.checked = true;                }            }))        }        function clearall() {            var hobby = document.getElementsByName("hobby"); //伪数组            // 任务2 :当点击"全不选"按钮时，将取消所有选中的复选项               Array.prototype.forEach.call(hobby, (item => {                if (item.type == "checkbox") {                    item.checked = false;                }            }))        }        function checkone() {            var j = document.getElementById("wb").value;            var hobby = document.getElementsByName("hobby");            //console.log(hobby)            // 任务3: 在文本框中输入输入1-6数值，当点击"确定"按钮时，根据输入的数值，通过id选中相应的复选项            if (j >= 1 && j <= 6) {                hobby[j - 1].checked = true;            }        }    </script></body></html>

查看全部

0 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName

2019-09-10

首页上一页 279 280 281 282 283 284 285 下一页尾页

0/150

提交

取消

开始学习

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

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