JavaScript进阶篇_学习笔记

首页免费课 JavaScript进阶篇笔记

JavaScript进阶篇

                
                慕课官方号
            页面重构设计

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

最热最新

慕圣9192337

<!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();">
<input type="button" value="反选" onclick="reverse()";>
<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(var 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.getElementsByName("hobby")
for(var i=0;i<hobby.length;i++){
if(hobby[i].id=="hobby"+j){hobby[i].checked=true;
document.getElementById("wb").value=""
}
}
// 任务3

}
function reverse(){
var hobby=document.getElementsByName("hobby")
for(var i=0;i<hobby.length;i++){
if(hobby[i].checked==true){hobby[i].checked=false}
else{hobby[i].checked=true}
}
}
</script>
</body>
</html>

查看全部

0 采集收起来源：区别getElementByID,getElementsByName,getElementsByTagName
2021-07-26
慕圣9192337

<!DOCTYPE html>
<html>
<head>
<title>浏览器对象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>

<h1 id="test">操作成功</h1>
<p ><span id="count">5</span>秒后返回主页 <a href="" id="history" onclick="backpage()">返回</a></p>

<script type="text/javascript">

//获取显示秒数的元素，通过定时器来更改秒数。

var num=document.getElementById("count");

var count = num.innerHTML;

function countdown(){
if(count>0){
count=count-1
num.innerHTML=count
setTimeout(countdown,1000)
}
else{
window.open("http://www.baidu.com")
}
}
setTimeout(countdown,1000)

//通过window的location和history对象来控制网页的跳转。
function backpage(){
window.history.back()
}

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

查看全部

0 采集收起来源：编程练习
2021-07-25
慕圣9192337

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全带,准备启航</title>

<script type="text/javascript">

//通过javascript的日期对象来得到当前的日期，并输出。

var mydate=new Date();
var myyear=mydate.getFullYear();
var mymonth=mydate.getMonth()+1;
var myweek=mydate.getDay();
var myday=mydate.getDate();

var week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

//成绩是一长窜的字符串不好处理，找规律后分割放到数组里更好操作哦
var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
var scoreArray = scoreStr.split(";");
var scoresum=0;
//从数组中将成绩撮出来，然后求和取整，并输出。
for(var i=0;i<scoreArray.length;++i){
scoresum = scoresum+parseInt(scoreArray[i].slice(-2));
}
//2、计算出该班级的平均分（保留整数）。
var avgscore = Math.round(scoresum/scoreArray.length);
//按照格式输出
document.write(myyear+"年"+mymonth+"月"+myday+"日 "+week[myweek]+"--班级平均分为:"+avgscore)
</script>
</head>
<body>
</body>
</html>

查看全部

0 采集收起来源：编程练习
2021-07-25
慕圣9192337

<!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,'大三']];

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

//第二次筛选，找出都是女生的信息

for(i=0;i<infos2.length;i++){
if(infos2[i][1]=="女"){
document.write(infos2[i]+"<br>")
}
}

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

查看全部

0 采集收起来源：编程练习
2021-07-24
爱德华关尔尔

【操作符】
1、算术操作符（+、-、*、/、++、-- 等等）
++是自加一，--是自减一
例：
mynum = 10;
mynum++; //mynum的值变为11
mynum--; //mynum的值又变回10
2、比较操作符（<、>、>=、<=、==、！= 等等）
==是等于
！=是不等于
3、逻辑操作符（&、&、||、！）
4、注意：“=”操作符是赋值，不是等于
5、算术运算符主要用来完成类似加减乘除的工作，在JavaScript中，“+”不只代表加法，还可以连接两个字符串

查看全部

0 采集收起来源：我还有其它用途( +号操作符）
2021-07-07
爱德华关尔尔

【表达式】
1、编写串表达式，值为字串符
2、编写数值表达式，值为数值
3、布尔表达式，布尔值true或false的表达式

查看全部

0 采集收起来源：表达出你的想法(表达式)
2021-07-08
爱德华关尔尔

【源文件】
<script src=""></script>

查看全部

0 采集收起来源：编程练习
2021-07-07
fishatom

<!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++)
          {
              changebg(tr[i]);
          }
      }
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
     function changebg(x){
         x.onmouseover=function(){
             x.style.backgroundColor="#f2f2f2";}
         x.onmouseout=function(){
             x.style.backgroundColor="#fff";
         }
     }

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
     function addChild(){
         var element1=document.getElementById('table');
         var newtr=document.createElement('tr');
         var newtd1=document.createElement('td');
         var newtd2=document.createElement('td');
         var newdl=document.createElement('td')
         newtd1.innerHTML='num';
         newtd2.innerHTML='student';
         newdl.innerHTML='<a href="javascript:;" onclick="del(this)" >删除</a>';
         element1.appendChild(newtr);
         newtr.appendChild(newtd1);
         newtr.appendChild(newtd2);
         newtr.appendChild(newdl);
     }


     // 创建删除函数
     function del(x){
         var removetr=x.parentNode.parentNode;//get 父节点 tr
         removetr.parentNode.removeChild(removetr); //get 祖节点后，删除父节点
     }

</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="addChild()" />   
</body>
</html>

查看全部

0 采集收起来源：编程练习
2021-07-04
fishatom

<!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 text1=document.createTextNode('I love JavaScript!');
element.appendChild(text1);
document.body.appendChild(element);

</script>

</body>
</html>

查看全部

0 采集收起来源：创建文本节点createTextNode
2021-07-04
慕雪0336920

二维数组是什么？

查看全部

0 采集收起来源：二维数组
2021-06-28
fishatom

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
var main = document.body;
//创建链接
function createa(url,text)
{
    var body=document.body;
    var linkx=document.createElement('a');
    linkx.setAttribute('href',url);
    linkx.innerHTML=text;
    main.appendChild(linkx);

}
// 调用函数创建链接
createa('http://www.imooc.com','慕课网');

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

查看全部

0 采集收起来源：创建元素节点createElement
2021-06-27
fishatom

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

<div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
<a href="javascript:replaceMessage()"> 将加粗改为斜体</a>

    <script type="text/javascript">
      function replaceMessage(){
          var oldnode=document.getElementById('oldnode');
          var newnode=document.createElement("i");
          newnode.innerHTML='THIS IS LI';
          oldnode.parentNode.replaceChild(newnode,oldnode);
       }
</script>

</body>
</html>

查看全部

0 采集收起来源：替换元素节点replaceChild()
2021-06-27
fishatom

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

<body>
<div id="content">
<h1>html</h1>
<h1>php</h1>
<h1>javascript</h1>
<h1>jquery</h1>
<h1>java</h1>
</div>

<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
// 在此完成该函数
var num= content.childNodes.length;
for(var i=num-1; i>=0;i--){
var removenode=content.childNodes[i];
content.removeChild(removenode);
}

}
</script>

<button onclick="clearText()">清除节点内容</button>

</body>
</html>

查看全部

0 采集收起来源：删除节点removeChild()
2021-06-27
fishatom

<!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 php=document.createElement('li');
php.innerHTML=" PHP";
otest.insertBefore(php,otest.childNodes[0]);

</script>

</body>
</html>

查看全部

0 采集收起来源：插入节点insertBefore()
2021-06-27
fishatom

<!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 php=document.createElement('li');
php.innerHTML="PHP";
otest.appendChild(php);

</script>

</body>
</html>

查看全部

0 采集收起来源：插入节点appendChild()
2021-06-27

首页上一页 44 45 46 47 48 49 50 下一页尾页

0/150

提交

取消

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

JavaScript进阶篇