JS基础学习。

最新推荐文章于 2024-04-30 20:32:35 发布
最新推荐文章于 2024-04-30 20:32:35 发布
阅读量547 收藏
点赞数
文章标签： JS基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JinYF1992/article/details/51589185
版权
开始学习JS的一些基础知识。
跟着教程尝试做一些小的东西。
在这里进行记载。

1.for语句的使用。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for语句</title>
    <style>
        div{width: 200px;height: 200px;float: left;border: 1px solid black;margin: 10px;}
    </style>
    <script>
        window.οnlοad=function () {
            var aDiv=document.getElementsByTagName('div');

            for(var i=0;i<aDiv.length;i++){
                aDiv[i].style.background='red';
            }

        };
    </script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

这部分主要运用了for语句的循环。以及一些最基础的JS标签代码的使用。


2.全选，反选，全不选按钮。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选，反选</title>
    <script>
        window.οnlοad=function () {
            var oBtn1=document.getElementById('btn1');
            var oDiv=document.getElementById('div1');
            var aCh=oDiv.getElementsByTagName('input');

            var oBtn2=document.getElementById('btn2');
            var oDiv=document.getElementById('div1');
            var aCh=oDiv.getElementsByTagName('input');

            var oBtn3=document.getElementById('btn3');
            var oDiv=document.getElementById('div1');
            var aCh=oDiv.getElementsByTagName('input');

            //全选
            oBtn1.οnclick=function () {
                for(var i=0;i<aCh.length;i++){
                    aCh[i].checked=true;
                }
            };

            //全不选
            oBtn2.οnclick=function () {
                for(var i=0;i<aCh.length;i++){
                    aCh[i].checked=false;
                }
            };

            //反选
            oBtn3.οnclick=function () {
                for(var i=0;i<aCh.length;i++){
                    if(aCh[i].checked==true)
                    {
                        aCh[i].checked=false;
                    }
                    else
                    {
                        aCh[i].checked=true;
                    }
                }
            };
        };
    </script>
</head>
<body>
<input id="btn1" type="button" value="全选"/><br/>
<input id="btn2" type="button" value="全不选"/><br/>
<input id="btn3" type="button" value="反选"/><br/>
<div id="div1">
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
</div>
</body>
</html>

这一部分用到了true和false的应用。还有IF语句的出现。


3.选项卡。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        #div1 .active{background: yellow;}
        #div1 div{width: 200px;height: 200px;background: #ccc;border: 1px solid #999;display: none;}
    </style>
    <script>
        window.οnlοad=function () {
            var oDiv=document.getElementById('div1');
            var aBtn=oDiv.getElementsByTagName('input');
            var aDiv=oDiv.getElementsByTagName('div');

            for(var i=0;i<aBtn.length;i++){
                aBtn[i].index=i;//Div显示块的切换
                aBtn[i].οnclick=function () {
                    for(var i=0;i<aBtn.length;i++){
                        aBtn[i].className="";//当class为空的时候，无颜色。
                        aDiv[i].style.display='none';
                    }
                    this.className='active';//当class为active的时候，显示黄色。
                    aDiv[this.index].style.display='block';
                };
            }
        };
    </script>
</head>
<body>
<div id="div1">
    <input class="active" type="button" value="教育"/>
    <input type="button" value="培训"/>
    <input type="button" value="招生"/>
    <input type="button" value="出国"/>
    <div style="display: block;">11</div>
    <div>22</div>
    <div>33</div>
    <div>44</div>
</div>
</body>
</html>

这一部分对标签 className和index使用，其中index这个自定义标签应加入到JS代码中，如果加入到结构层中会被自动忽略。





4.简易日历的制作。 


了解了（innerHTML ） 即  获取对象的内容 或 向对象插入内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易日历</title>
    <style>
        body,ul,li,h2,p
        {
            margin:0px;
            padding:0px;
        }
        #tab{
            width: 226px;
            height: 400px;
            border: 1px solid black;
            margin: 80px auto;
            background-color: #eee;
        }

        #tab .active{
            background-color: #eee;
            color: red;
        }

        #tab ul li{
            width: 60px;
            height:60px;
            float: left;
            margin-top:10px;
            margin-left: 10px;
            border: 1px solid black;
            background-color: #0E1418;
            color: #eee;
            list-style-type:none;
            text-align: center;
        }


        #tab .text{
            width: 205px;
            height:90px;
            float: left;
            margin-top:10px;
            margin-left: 10px;
            border: 1px solid black;
        }
        #tab .text h2{
            font-size: 30px;
        }

        #tab .text p{
            line-height: 40px;
        }
    </style>
    <script>
        window.οnlοad=function () {
            var arr=[
                '新年春节假期来了!',
                '二月',
                '三月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月'
            ];

            var oDiv=document.getElementById('tab');
            var aLi=oDiv.getElementsByTagName('li');
            var oTxt=oDiv.getElementsByTagName('div')[0];

            for(var i=0;i<aLi.length;i++){
                aLi[i].index=i;
                aLi[i].οnmοuseοver=function () {
                    for(var i=0;i<aLi.length;i++){
                        aLi[i].className='';
                    }
                    this.className='active';

                    //innerHTML  即  获取对象的内容 或 向对象插入内容
                    oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
                }
            }
        }
    </script>
</head>
<body>
<div id="tab" class="calendar">
    <ul>
        <li class="active"><h2>1</h2><p>JAN</p></li>
        <li><h2>2</h2><p>FER</p></li>
        <li><h2>3</h2><p>MAR</p></li>
        <li><h2>4</h2><p>APR</p></li>
        <li><h2>5</h2><p>MAY</p></li>
        <li><h2>6</h2><p>JUN</p></li>
        <li><h2>7</h2><p>JUL</p></li>
        <li><h2>8</h2><p>AUG</p></li>
        <li><h2>9</h2><p>SEP</p></li>
        <li><h2>10</h2><p>OCT</p></li>
        <li><h2>11</h2><p>NOV</p></li>
        <li><h2>12</h2><p>DEC</p></li>
    </ul>

    <div class="text">

    </div>
</div>
</body>
</html>


JinYF1992
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript js基础学习 示例代码
07-03
JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础...
JavaScript基础学习
最新发布
07-10
JavaScript基础学习
JS入门到精通完整版
qq_46362763的博客
08-08 1万+
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。.....................
Javascript学习
守灯者的博客
03-04 1342
Javascript 学习记录
JS从入门到精通
p6448777的博客
04-30 408
/在其他浏览器中可以使用getComputedStyle()这个方法来获取当前的样式，这个方法是window方法可以直接使用需要有两个参数第一个，需获取样式的元素。如果两个对象一样，但是地址不同，也是会返回false的。值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。//常用节点:文档节点(HTML文档)、元素节点(HTML标签)、属性节点(元素的属性)、文本节点(HTML中的文本内容)
Javascript 基础知识学习
岳来的博客
11-23 6970
javascript 基础学习
JS如何学习
weixin_35755562的博客
01-05 362
JavaScript 是一种流行的编程语言，可以用来开发网站和网络应用。它可以运行在浏览器中，也可以运行在服务器端。 要学习 JavaScript，你可以从以下几个方面入手： 了解 JavaScript 的基本语法。JavaScript 的语法和其他编程语言很像，你可以先了解变量、数据类型、运算符、流程控制语句、函数等基础概念。 在浏览器中练习 JavaScript。JavaScript 可以直...
JavaScript的学习
m0_66030479的博客
07-09 1623
js的学习
js基础学习.txt
03-30
学习基础，切不可盲目，一定要从基础的学起。javascript是web开发必须要学会的语言，这个资料可以让你找到一些适合的方法，有简单的正则表达式，js的简单用法等。欢迎收藏
javascript基础学习代码总结
01-18
还有写对于javascript对应的知识点案例。每个文件里都会有很多的注释信息，方面阅读和学习。 ...2.每个模块代码都有注释可用来...4.适合于没有javascript基础或javascript基础不扎实想要学习js知识点的人群参考和学习。
Javascript基础学习笔记
09-28
基础的js笔记
JS入门必备基础知识（适合新人学习）
qq_57162921的博客
09-21 2115
js基础学习
js基础学习
qq_52701502的博客
04-22 396
javascript_day01 学习目标 1.掌握js的组成 2.掌握数据类型 3.掌握运算符 4.掌握流程控制 5.掌握数组 6.掌握函数 7.掌握作用域 8.掌握js对象 一、javascript 概述 1.1 javascript 介绍 JavaScript在1995年由Netscape（网景）公司设计的脚本语言。 js是一个什么样的语言呢？ 是一门脚本语言：不需要编译,直接执行 是一门解释性语言：相对于编译语言java不同，没有编译成机器语言class文件过程；源代码不能直接翻译成机器语言，而
JavaScript 教程 （详细 全面）
热门推荐
梁辰兴的博客
10-31 7万+
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。HTML 用来定义网页的内容，例如标题、正文、图像等；CSS 用来控制网页的外观，例如颜色、字体、背景等；JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。JavaScript 诞生于 1995 年，几乎是和互联网同时出现；
JavaWeb系列三: JavaScript学习 上
你好, 我在学java的博客
03-10 3954
前端js学习
JavaScript 基础（超详细）
TKOP_的博客
03-02 9320
这篇笔记大概囊括了 JavaScript 基础的所有知识点。适合 js 初学者去查看特定知识点或者已经自学完 js 的伙伴去完成查漏补缺的过程。知识点的梳理参照了《JavaScript 高级程序设计》的内容，所以这算是一篇读书笔记。知识点的具体介绍主要有书中重要讲述、代码示例、思维图表、重难点解析、个人思考总结和他人的启发。虽不敢说这是最详细的笔记，但对于每个知识我都会尽力将自己的所思所想清楚地记录下来并分享。
JS看这一篇就够啦，JS基础大全，可用于快速回顾知识，面试首选
a2868221132的博客
03-26 1489
JS看这一篇就够啦，JS基础大全，可用于快速回顾知识，面试首选
JavaScript基础（超详细全文约一万字）
bguihiub的博客
02-10 8293
回顾整个JavaScript的发展历程, 实际上就是Web发展的历程从最开始的拨号上网方式到现在的100M光纤, 4G/5G移动Web的发展在近20年, 上网的方式发生了翻天复地的变化, 可以说是科技大爆炸.人们在享受越来越便捷的上网的同时, 对Web产品的需求越来越高从单纯的对访问速度的需求, 越来越多的转移到视觉美感, 智能操作交互, 沉浸式虚拟现实, 这些需求又反过来推动了技术的不断创新与进步.
"轻松入门JavaScript基础学习及用法
学习 JavaScript 的教材是非常重要的，因为它可以帮助你快速掌握基础知识并建立强大的基础。在学习 JavaScript 的过程中，你将会了解到什么是 JavaScript，如何在 HTML 页面中添加 JavaScript 代码，以及如何使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值