为了账号安全，请及时绑定邮箱和手机立即绑定
课程 \ JavaScript进阶篇

JavaScript进阶篇

代码 113 问答 0
按时间 按章节
3-6 了解成员数量(数组属性length)
<!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 language="javascript">
var mynum=new Array(65,90,88,98);
document.write("数组的长度是:"+ mynum.length );
</script>
</head>
<body>
</body>
</html>
2018-02-08 查看完整代码
3-5 呼叫团里成员(使用数组元素)
<!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 language="javascript">
var myarr=new Array();
myarr[0]="小红";
myarr[1]="好好学习！"
myarr[2]="小亮";
myarr[3]="小川";
document.write("第二人的姓名是:"+ myarr[1] );
</script>
</head>
<body>
</body>
</html>
2018-02-08 查看完整代码
3-4 团里添加新成员（向数组增加一个新元素）
<!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 language="javascript">
var myarray=new Array();
myarray[0]=88;
myarray[1]=90;
myarray[2]=68;
myarray[3]=99;
document.write("数组第一个值是:"+myarray[0]+"<br>");
document.write("数组第二个值是:"+myarray[1]+"<br>");
document.write("数组第三个值是:"+myarray[2]+"<br>");

</script>
</head>
<body>
</body>
</html>
2018-02-08 查看完整代码
3-3 谁是团里成员（数组赋值）
<!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 language="javascript">
var myarr=new Array(3);
myarr[0]=3;
myarr[1]=34;
myarr[2]=568;
document.write("数组第一个值是:"+myarr[0]+"<br>");
document.write("数组第二个值是:"+myarr[1]+"<br>");
document.write("数组第三个值是:"+myarr[2]+"<br>");
</script>
</head>
<body>
</body>
</html>
2018-02-08 查看完整代码
3-2 组团，并给团取个名（如何创建数组）
<!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 myarr=new Array(23,56,78,7,3,5,89,3,2);

document.write("数组的第一个值："+myarr[0]);
</script>
</head>
<body>
</body>
</html>
2018-02-08 查看完整代码
3-1 一起组团（什么是数组）
<!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 myarr=new Array(); //定义数组
myarr[0]=80;
myarr[1]=60;
myarr[2]=99;
document.write("第一个人的成绩是:"+myarr[0]);
document.write("第二个人的成绩是:"+myarr[1]);
document.write("第三个人的成绩是:"+myarr[2]);
</script>
</head>
<body>
</html>
2018-02-08 查看完整代码
2-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 numa,numb,jq1;
numa=5;
numb=2;
jq1=numa + 30 >10 && numb * 3<20;
jq2=((numa + 30) / (7-numb)) * 3
document.write("jq1的值是:"+jq1+"<br>");
document.write("jq2的值是:"+jq2);
</script>
</head>
<body>
</body>
</html>
2018-02-08 查看完整代码
2-5 表达出你的想法(表达式)
<!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 msum=10;
var pencil=5;
var num1=msum-pencil;
var hsum=6;
var num2=pencil+hsum;

document.write("小明还剩:"+num1+"元"+"<br>");
document.write("小红花:"+num2+"元买个铅笔盒");
</script>
</head>
<body>
</body>
</html>
2018-02-08 查看完整代码
2-4 多样化的我(变量赋值）
<!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=10;
var num2="JS";
document.write("num1的值是:"+num1+"<br>");
document.write("num2的值是:"+num2);
</script>
</head>
<body>
</html>
2018-02-08 查看完整代码
2-3 确定你的存在(变量声明)
<!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 mya;
mya=5;
alert("mya的值是:"+mya);
</script>
</head>
<body>
</body>
</html>
2018-02-08 查看完整代码
2-2 给变量取个名字(变量命名)
<!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 h="myname";
</script>
</head>
<body>
</body>
</html>
2018-02-08 查看完整代码
2-1 什么是变量
2018-02-08 查看完整代码
1-2 编程练习
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>
<!--引入外部文件的方式-->
<script type="text/javascript" src="script.js">
//多行注释
/*我是多行注释！
我需要隐藏，
否则会报错哦！*/

//在页面中显示文字


//页面中弹出提示框


//单行注释
//我是单行注释，我也要隐藏起来！

</script>
</head>
<body>
<from>
<input type="button" onClick="fly()" value="准备"/>
</from>
</body>
</html>
2018-02-08 查看完整代码
1-1 让你认识JS
<!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>
function jinjie(){
if(confirm("是否学习JS进阶篇")) {
document.write("好的，那开始吧！")
}
else{
document.write("你同学都年薪百万了，你还在玩？")
}
}
</script>

</head>

<body>

<from>
<input type="button" onClick="jinjie()" value="学习使我快乐"/>
</from>
</body>
</html>
2018-02-08 查看完整代码
9-22 编程练习
<!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]);
}
}


// 创建删除函数
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>
2017-11-24 查看完整代码
9-11 访问兄弟节点
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nextSibling</title>
</head>
<body>
<ul id="u1">
<li id="a">javascript</li>
<li id="b">jquery</li>
<li id="c">html</li>
</ul>
<ul id="u2">
<li id="d">css3</li>
<li id="e">php</li>
<li id="f">java</li>
</ul>
<script type="text/javascript">
function get_nextSibling(n){
var x=n.nextSibling;
while (x && x.nodeType!=1){
x=x.nextSibling;
}
return x;
}

var x=document.getElementsByTagName("li")[0];
document.write(x.nodeName);
document.write(" = ");
document.write(x.innerHTML);

var y=get_nextSibling(x);

if(y!=null){
document.write("<br />nextsibling: ");
document.write(y.nodeName);
document.write(" = ");
document.write(y.innerHTML);
}else{
document.write("<br>已经是最后一个节点");
}





function get_previousSibling(n)
{
var z=n.previousSibling;
while (z&&z.nodeType!=1)
{
z=z.previousSibling;
}
return z;
}
var z=document.getElementsByTagName("li")[4];
document.write(z.nodeName+" = "+z.innerHTML);
var d=get_previousSibling(z);
if(d!=null)
{
document.write("<br />previoussibling:"+d.nodeName+" = "+d.innerHTML);
}
else {
document.write("<br />这是第一个节点，前面没有节点了。");
}

</script>
</body>
</html>
2017-11-23 查看完整代码
9-7 节点属性
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var node=document.getElementsByTagName("li");
for(var i=0;i<node.length;i++){
document.write("li["+(i+1)+"]:"+"<br/>"+"节点名:"+node[i].nodeName+"<br/>");
document.write("节点值:"+node[i].nodeValue+"<br/>");
document.write("节点类型:"+node[i].nodeType+"<br/><br/>");
}
</script>
</body>
</html>
2017-11-23 查看完整代码
8-17 编程练习
<!DOCTYPE html>
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>
<!--先编写好网页布局-->
<h1>操作成功</h1>
<span id="second" >5</span>
<span >秒后回到主页</span>
<a href="javascript:back();">返回</a>



<script type="text/javascript">
var num=document.getElementById("second").innerHTML;
//获取显示秒数的元素，通过定时器来更改秒数。

function count()
{
num--;
document.getElementById("second").innerHTML=num;
if(num==0)
{
location.assign("www.imooc.com");
}
}
setInterval("count()",1000);
//通过window的location和history对象来控制网页的跳转。
function back()
{
window.history.back();
}

</script>
</body>
</html>
2017-11-22 查看完整代码
8-16 屏幕可用高和宽度
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏幕分辨率的高和宽</title>
</head>
<body>
<script type="text/javascript">
document.write("可用宽度："+screen.availWidth+"<br />" );
document.write("可用高度："+screen.availHeight );
</script>
</body>
</html>
2017-11-22 查看完整代码
8-15 屏幕分辨率的高和宽
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏幕分辨率的高和宽</title>
</head>
<body>
<script type="text/javascript">
document.write( "屏幕宽度："+screen.width+"px<br>");
document.write( "屏幕高度："+screen.height+"px");
</script>
</body>
</html>
2017-11-22 查看完整代码
首页上一页123456下一页尾页
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号