慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

筋肉男大H

break和continue的区别：
break直接跳出循环体，结束循环
continue跳过本次循环，继续执行

例子：
其中一科不及格则退出可使用break
查出哪科不及格可以使用continue

查看全部

0 采集收起来源：继续循环continue
2019-01-17
大大大大风

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{
padding：0px;
margin:0px;
font 12px normal "microsoft yahei"
}
#card{
margin:20px;
padding:5px;
width:300px;
height:150px;
}
#card ul{
list-style:none;
display:block;
height:30px;
line-height:30px;
border-bottom:2px saddlebrown solid;
}
#card ul li{
margin:0px 3px;
width:60px;
height:28px;
line-height:28px;
float:left;
text-align:center;
background:#fff;
cursor:pointer;
list-style:none;
border:1px solid #aaa;
border-bottom:none;
display:inline-block;

}
#card div{
padding:5px;
height:120px;
line-height:25px;
border:1px solid #336699;
border-top:none;

}

#card ul li.on{
border-top:2px solid saddlebrown;
border-bottom:3px solid #fff;

}
.hide{
display:none;
}
</style>
<script type="text/javascript">

// JS实现选项卡切换
window.onload=function(){
var card=document.getElementById("card");
var ul=card.getElementsByTagName("ul")[0];
var lis=card.getElementsByTagName("li");
//alert(lis.innerHTML);
var divs=card.getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].onclick=function(){
for(var n=0;n<lis.length;n++){
lis[n].className="";
divs[n].className="hide";
}
this.className="on";
//alert(this.index);
divs[this.index].className="";
}

}
}

</script>

</head>
<body>

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

</body>
</html>

查看全部

0 采集收起来源：编程挑战
2019-01-17
attack204

双引号中不能嵌套双引号，只能写单引号！
https://paste.ubuntu.com/p/c95GPBDSyh/

查看全部

0 采集收起来源：编程练习
2019-01-16
大大大大风

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<style type="text/css">
.overcolor{
background-color:#f2f2f2;
}
.outcolor{
background-color:#fff;
}
</style>
<script type="text/javascript">

window.onload = function(){

// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
var trs=document.getElementsByTagName("tr");
for(var i=0 ;i<trs.length;i++){
trs[i].setAttribute("onmouseover","mouseOver(this)");
trs[i].setAttribute("onmouseout","mouseOut(this)");
}
}
function mouseOver(element){

//alert(tr1);
//tr1.setAttribute("class","overcolor");
element.className="overcolor";
//tr1.style.backgroundColor="#f2f2f2";
}
function mouseOut(element){
element.className="outcolor";
}

// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function addRow(){
var table=document.getElementById("table");
var newRow =document.createElement("tr");
var newColumn1=document.createElement("td");
var newColumn2=document.createElement("td");
var newColumn3=document.createElement("td");
var newDelButton=document.createElement("a");
newDelButton.href="javascript:;"
newDelButton.innerHTML="删除";
newDelButton.setAttribute("onclick","deleteRow(this)");
newColumn3.appendChild(newDelButton);
newRow.appendChild(newColumn1);
newRow.appendChild(newColumn2);
newRow.appendChild(newColumn3);
table.appendChild(newRow);
}

// 创建删除函数
function deleteRow(element){
var tr=element.parentNode.parentNode;
//alert(tr.parentNode.innerHTML);
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="deleteRow(this)">删除</a></td> 
</tr>

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

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

查看全部

0 采集收起来源：编程练习
2019-01-16
筋肉男大H

数组精简写法
var myarr=new Array（x，x，x）
或者
var myarr=[x,x,x]

查看全部

0 采集收起来源：谁是团里成员（数组赋值）
2019-01-16
丶小阿狸

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<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");
for(i = 0;i < hobby.length;i++)
{
if(hobby[i].type == "checkbox")
{
hobby[i].checked = true;

}
}
// 任务1

}
function clearall(){
var hobby = document.getElementsByName("hobby");
for(var i=0;i<hobby.length;i++)
{
hobby[i].checked = false;
}
// 任务2

}

function checkone()
{
var j=document.getElementById("wb").value;
var hobby = document.getElementById("hobby"+j);
hobby.checked = true;

}

// 任务3



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

查看全部

0 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName
2019-01-16
All_Good

算术操作符比较操作符逻辑操作符 "="赋值符号

查看全部

0 采集收起来源：保持先后顺序(操作符优先级）
2019-01-16
All_Good

*/%
// from left to right

查看全部

0 采集收起来源：编程练习
2019-01-16
All_Good

除法、乘法等操作符的优先级比加法和减法高

查看全部

0 采集收起来源：保持先后顺序(操作符优先级）
2019-01-16
All_Good

'<br>'换行

查看全部

0 采集收起来源：表达出你的想法(表达式)
2019-01-16
All_Good

注意:变量也可以不声明，直接使用，但为了规范，需要先声明，后使用。

查看全部

0 采集收起来源：确定你的存在(变量声明)
2019-01-16

All_Good

注意:1. JS是区分大小写的，如：classname和ClassName是不一样的。同时注意方法、属性、变量等的大小写吆。

2. JS中的字符、符号等一定要在英文状态下输入吆。

查看全部

0 采集收起来源：让你认识JS

2019-01-16

莫问归途何往
在给元素注册事件时比如:
<a href="javascript:;" onclick="del(this)" >删除</a>
可以给del()内添加this,然后就可以通过this获取这个元素
在下面这段代码中: 是用this指向为当前鼠标移入的那个tr,如果将this替换为trs[i]则不行.
trs[i].onmouseover = function() {
this.style.backgroundColor = '#f2f2f2'
}
trs[i].onmouseout = function() {
this.style.backgroundColor = ''
}
为什么要求的步骤和代码实现的步骤不同?
1. 创建删除函数
2. 编写一个函数,动态在表格的最后一行添加子节点
3. 鼠标移动到不同行上是背景色更改,移开时则恢复原色
查看全部

0 采集收起来源：编程练习
2019-01-15
慕雪4950640
区别getElementByID,getElementsByName,getElementsByTagName
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。
把上面的例子转换到HTML中，如下:
```
<input type="checkbox" name="hobby" id="hobby1">  音乐
```
input标签就像人的类别。
name属性就像人的姓名。
id属性就像人的身份证。
方法总结如下:
注意：方法区分大小写
通过下面的例子(6个name="hobby"的复选项，两个按钮)来区分三种方法的不同:
```
  <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">  跑步    <input type="button" value = "全选" id="button1">   <input type="button" value = "全不选" id="button1">
```
1. document.getElementsByTagName("input")，结果为获取所有标签为input的元素，共8个。
2. document.getElementsByName("hobby")，结果为获取属性name="hobby"的元素，共6个。
3. document.getElementById("hobby6")，结果为获取属性id="hobby6"的元素，只有一个，"跑步"这个复选项。

任务
1.在第27行处补充完整，实现当点击"全选"按钮时，将选中所有的复选项。
```
提示:document.getElementsByTagName("input")获取的是所有input标签，包括复选项和按钮，所以要判断是否是复选项，如是选中。
```
2.在第33行处补充完整，实现当点击"全不选"按钮时，将取消所有选中的复选项。
3.在第40行处补充完整，在文本框中输入输入1-6数值，当点击"确定"按钮时，根据输入的数值，通过id选中相应的复选项。
- ?不会了怎么办
- <!DOCTYPE HTML>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <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");
  for(i = 0;i < hobby.length;i++){
  if(hobby[i].type == "checkbox"){
  hobby[i].checked = true; }
    }
  }
  function clearall(){
  var hobby = document.getElementsByName("hobby");
  for(i = 0;i < hobby.length;i++){
  hobby[i].checked = false;}
  }
  function checkone(){
  var j=document.getElementById("wb").value;
     var hobby = document.getElementById("hobby"+j);
     hobby.checked = true; }
  </script>
  </body>
  </html>
查看全部

0 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName
2019-01-15

首页上一页 475 476 477 478 479 480 481 下一页尾页

0/150

提交

取消

开始学习

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

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

JavaScript进阶篇

区别getElementByID,getElementsByName,getElementsByTagName

任务