JavaScript进阶篇_学习笔记

首页免费课 JavaScript进阶篇笔记

JavaScript进阶篇

                
                慕课官方号
            页面重构设计

                    查看讲师更多课程 
                    慕课官方号讲师的其他课程
                
帝堵抢车位动画制作
初级·36954
免费课程
                                
JavaScript入门篇 
入门·739830
免费课程
                                
                难度入门
            
                时长 8小时55分
            
                学习人数
            
综合评分9.47
                            2557人评价
                        查看评价
                                9.7
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.3
                                逻辑清晰

最热最新

Confused_wz

var attime;
function clock(){
var time=new Date();
attime=time.toTimeString().substr(0,8);
document.getElementById("clock").value = attime;
}
setInterval(clock,100);

查看全部

0 采集收起来源：计时器setInterval()
2020-07-30
慕用8339455

注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

我猜只能适用于整数！！

查看全部

0 采集收起来源：数组排序sort()
2020-07-30
Confused_wz

function count(){
var sum = 0;
//获取第一个输入框的值
var num1 = parseInt(document.getElementById("txt1").value);
//获取第二个输入框的值
var num2 = parseInt(document.getElementById("txt2").value);
//获取选择框的值
var operator = document.getElementById("select").value;
//获取通过下拉框来选择的值来改变加减乘除的运算法则
switch(operator){
case "+": sum = num1+num2; break;
case "-": sum = num1-num2; break;
case "*": sum = num1*num2; break;
case "/": sum = num1/num2; break;
}
//设置结果输入框的值
document.getElementById("fruit").value = sum;
}

查看全部

0 采集收起来源：编程练习
2020-07-30
喂你啊

<!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");
// 任务1
for(var i=0;i<hobby.length;i++){
if(hobby[i].name=="hobby"){
hobby[i].checked=true;
}
}
}
function clearall(){
var hobby = document.getElementsByName("hobby");

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

function checkone(){
var j=document.getElementById("wb").value;
var hobby=document.getElementsByName("hobby");
var hobbyid=document.getElementById("hobby"+j);
if(hobbyid){
for(var i=0;i<hobby.length;i++){
if(hobby[i].id=="hobby"+j){
hobby[i].checked=true;
}
else{
hobby[i].checked=false;
}
}
}
else{
alert("请输入1-6的序号！")
}
// 任务3

}

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

查看全部

1 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName
2020-07-30
Confused_wz

//通过javascript的日期对象来得到当前的日期，并输出。
var date = new Date();
var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.write(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+week[date.getDay()]);
//成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
var scoreArr = scoreStr.split(";");
//从数组中将成绩撮出来，然后求和取整，并输出。
var sum = 0;
for(var i=0; i<scoreArr.length; i++){
sum += parseInt(scoreArr[i].split(":")[1]);
}
document.write("--班级总分为："+Math.floor(sum/scoreArr.length));

查看全部

0 采集收起来源：编程练习
2020-07-30
吃可爱长大的6385480

arr[15]=34，为数组增加了第15个元素赋值是34，而数组的下缀索引号是从0开始的，所以0-15，数组的长度是16。

查看全部

0 采集收起来源：了解成员数量(数组属性length)
2020-07-29
weixin_慕先生5373785

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<script type="text/javascript">
//法一
document.write("///******法一******///"+"<br />");
document.write(document.body.scrollWidth+"<br />");
document.write(document.body.scrollHeight);

//法二
var w=document.documentElement.scrollWidth;
var h=document.documentElement.scrollHeight;
document.write("<br>"+"///******法二******///"+"<br>"+"宽为："+w+"<br>"+"高为："+h);
</script>
</body>
</html>

查看全部

0 采集收起来源：网页尺寸scrollHeight
2020-07-29
weixin_慕先生5373785

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

.message{
width:200px;
height:100px;
background-color:#CCC;}

</style>
</head>
<body>
<script type="text/javascript">

var element = document.createElement("p");
element.className = "message";
var textNode = document.createTextNode("I love JavaScript!");
element.appendChild(textNode);
document.body.appendChild(element);

</script>

</body>
</html>

查看全部

0 采集收起来源：创建文本节点createTextNode
2020-07-29
weixin_慕先生5373785

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
var body= document.body;
//创建链接
function createa(url,text)
{
var a = document.createElement("a");
a.href = url;
a.innerHTML = text;
a.style.color = "red";
body.appendChild(a);
}
// 调用函数创建链接
createa("http://www.imooc.com/","慕课网");
</script>
</body>
</html>

查看全部

0 采集收起来源：创建元素节点createElement
2020-07-29
weixin_慕先生5373785

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

<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>

<script type="text/javascript">

var otest = document.getElementById("test");
var x=document.createElement("li");
x.innerHTML="PHP";
otest.insertBefore(x,otest.childNodes[1]);




</script>

</body>
</html>

查看全部

0 采集收起来源：插入节点insertBefore()
2020-07-29
weixin_慕先生5373785

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

<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>

<script type="text/javascript">

var otest = document.getElementById("test");
var newnode= document.createElement("li");
newnode.innerHTML="PHP";
otest.appendChild(newnode);

</script>

</body>
</html>

查看全部

0 采集收起来源：插入节点appendChild()
2020-07-29
weixin_慕先生5373785

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="con">
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write(x.firstChild.nodeName+"<br/>");
document.write(x.lastChild.nodeName+"<br>");

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

查看全部

0 采集收起来源：访问子节点的第一和最后项
2020-07-29
weixin_慕先生5373785

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div>
javascript
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementsByTagName("div")[0].childNodes;
for(var i=0;i<x.length;i++){
document.write("第"+(i+1)+"个节点的值是："+x[i].nodeValue+"<br />");
document.write("第"+(i+1)+"个节点的名称是："+x[i].nodeName+"<br />");
document.write("第"+(i+1)+"个节点的属性是："+x[i].nodeType+"<br />");
document.write("<br />");
}

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

查看全部

0 采集收起来源：访问子节点childNodes
2020-07-29
weixin_慕先生5373785

<!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 lists = document.getElementsByTagName("li");
for(var i=0;i<lists.length;i++)
{
document.write("第"+i+"个节点的名称是"+lists[i].nodeName+"<br />");
document.write("第"+i+"个节点的值是"+lists[i].nodeValue+"<br />");
document.write("第"+i+"个节点的类型是"+lists[i].nodeType+"<br />");
document.write("<br />");
}
</script>
</body>
</html>

查看全部

0 采集收起来源：节点属性
2020-07-29
weixin_慕先生5373785

<!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>
<h7>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h7>
<script type="text/javascript">
var Lists=document.getElementsByTagName("li");
for (var i=0; i<Lists.length;i++)
{
var text=Lists[i].getAttribute("title")
document.write(text +"<br>");
if(text=="")
{
Lists[i].setAttribute("title","WEB前端技术")
document.write(Lists[i].getAttribute("title")+"<br>");
}
}
</script>
</body>
</html>

查看全部

0 采集收起来源：setAttribute()方法
2020-07-29

首页上一页 108 109 110 111 112 113 114 下一页尾页

0/150

提交

取消

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

JavaScript进阶篇