AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

原声js 笔记

2023-04-14 67
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原声js 笔记 
<!DOCTYPE html>  
<html>  
    <head>  
        <title>设置一个元素是否可见</title>  
        <meta charset="utf-8">  
    </head>  
    <style type="text/css">  
        .tips{width:370px;background:#CCC;display:none;}  
    </style>  
    <script type="text/javascript">  
        //定义一个函数  
        function show_or_hide()  
        {  
            //通过id来获取一个元素  
            var objl =document.getElementById("get_p");  
            // 这种是行内样式的写法,形如：<p style="display:none;"></p>  
            if(objl.style.display == 'block')  
                objl.style.display = 'none';  
            else  
                objl.style.display = 'block';  
        }  
    </script>  
    <body>  
        <!-- 添加点击事件 -->  
        <input type="button" value="隐藏/显示" onclick="show_or_hide()" title="可以点击我一下">  
        <p id="get_p" class="tips" >  
            从前有座山，山上有座庙，庙里有个帅哥写代码  
        </p>  
    </body>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>鼠标移入移出事件</title>  
        <meta charset="utf-8">  
    </head>  
    <style type="text/css">  
        #get_input{background:yellow;}  
    </style>  
    <script type="text/javascript">  
        function over_bg_color()  
        {  
            var obj = document.getElementById('get_input');  
            // 这种是行内样式的写法,形如：<p style="background:red;"></p>  
            obj.style.background='red';  
        }  
        function out_bg_color()  
        {  
            var obj = document.getElementById('get_input');  
            obj.style.background='yellow';  
        }  
    </script>  
    <body>  
        <!-- 添加鼠标移入移出事件 -->  
        <input id="get_input" type="button" value="隐藏/显示"onmouseover="over_bg_color()" onmouseout="out_bg_color()" >  
    </body>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>二级菜单</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            #nav{height:50px;background:red;margin:50px auto 0px;}  
            a  
            {  
                float:left;width:250px;line-height:50px;  
                text-align:center;color:#FFF;text-decoration:none;  
            }  
            #detailed  
            {  
                width:250px;height:200px;background:red;  
                position:relative;border-top:2px solid yellow;  
                display:none;left:0px;  
            }  
        </style>  
        <script type="text/javascript">  
            function show_detailed(index)  
            {  
                var obj = document.getElementById('detailed');  
                // 设置元素可见  
                obj.style.display='block';  
                var move_left = 250*index-250;  
                move_left = move_left+"px";//将结果转换成字符串  
                obj.style.left =move_left;  
            }  
            function hide_detailed()  
            {  
                var obj = document.getElementById('detailed');  
                obj.style.display='none';  
            }  
        </script>  
    </head>  
    <body>  
        <div id="nav">  
            <!-- 这种直接在行内为元素添加事件不美观，可以写在JS里面 -->  
            <a href="#" onmouseover="show_detailed(1)"onmouseout="hide_detailed()"> 首页</a>  
            <a href="#" onmouseover="show_detailed(2)"onmouseout="hide_detailed()">家电</a>  
            <a href="#" onmouseover="show_detailed(3)"onmouseout="hide_detailed()">手机</a>  
            <a href="#" onmouseover="show_detailed(4)"onmouseout="hide_detailed()">付款方式</a>  
            <a href="#" onmouseover="show_detailed(5)"onmouseout="hide_detailed()">客服</a>  
        </div>  
        <div id="detailed">  
            <a href="#">一</a>  
            <a href="#">二</a>  
            <a href="#">三</a>  
            <a href="#">四</a>  
        </div>  
    </body>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>改变物体外观</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            body{padding:200px;}  
            #change_box{width:300px;height:300px;background:#CCC;}  
        </style>  
        <script type="text/javascript">  
            function change_color(want_color)  
            {  
                var obj = document.getElementById('change_box');  
                obj.style.background = want_color;  
            }  
            function change_size(width_size,height_size)  
            {  
                var obj = document.getElementById('change_box');  
                obj.style.width = width_size+'px';  
                obj.style.height = height_size+'px';  
            }  
        </script>  
    </head>  
    <body>  
        <input type="button" value="变黄" onclick="change_color('yellow')">  
        <input type="button" value="变绿" onclick="change_color('green')">  
        <input type="button" value="变红" onclick="change_color('red')">  
        <input type="button" value="变大" onclick="change_size(500,600)">  
        <input type="button" value="变小" onclick="change_size(100,200)">  
        <div id="change_box"></div>  
    </body>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>JS为元素添加事件</title>  
        <meta >  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <input id="btn1" type="button" value="按钮" onclick="abc()" />  
        <script type="text/javascript">  
            // 下面这个获取元素的代码要写在该目标 元素的下面  
            // 因为程序是从上到下执行的，不然的话会报错  
            var obtn = document.getElementById('btn1');  
            function abc()  
            {  
                alert('这是一个弹窗');//可以是单引号，也可以是双引号  
            }  
            //obtn.οnclick=abc;//这种是直接在JS里面为元素添加事件的写法  
            //这里函数不能加括号  
        </script>  
    </body>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>全选反选按钮</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            body{padding:150px;background:#CCC;}  
        </style>  
    </head>  
    <body>  
        <input type="button" id="btn_all" value="全选"></input>  
        <input type="button" id="btn_reversed" value="反选"></input>  
        <input type="button" id="btn_no" value="都不选"></input>  
        <div id="ware">  
            <input type="checkbox" ></input><input type="checkbox" ></input>  
            <input type="checkbox" ></input><input type="checkbox" ></input>  
            <input type="checkbox" ></input><input type="checkbox" ></input>  
        </div>  
    </body>  
    <script type="text/javascript">  
        function choose_all()  
        {  
            var obj = document.getElementById('ware');  
            //从一个目标元素中再获取元素  
            //下面是通过html元素名字来获取，结果是数组  
            var ch_b = obj.getElementsByTagName('input');  
            for(var i=0; i <= ch_b.length; i++)  
                //下面的语句类似于：<input type="checkbox" checked="true"></input>  
                ch_b[i].checked = true;  
        }  
        function choose_no()  
        {  
            var obj = document.getElementById('ware');  
            var ch_b = obj.getElementsByTagName('input');  
            for(var i=0; i <= ch_b.length; i++)  
                ch_b[i].checked = false;  
        }  
        function choose_reversed()  
        {  
            var obj = document.getElementById('ware');  
            var ch_b = obj.getElementsByTagName('input');  
            for(var i=0; i <= ch_b.length; i++)  
                ch_b[i].checked = ( ch_b[i].checked == true )? false:true;  
        }  
        //我并没有直接document.getElementById('');这样获取元素  
        //按理说要先获取元素，再来操作，不然是不行的，  
        //我也不知道为什么我的这段代码却可以  
        btn_all.onclick = choose_all;  
        btn_no.onclick = choose_no;  
        btn_reversed.onclick = choose_reversed;  
    </script>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>选项卡</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            body{padding:150px;}  
            #xuan_xiang_ka{width:208px;height:350px;}  
            .title{height:50px;}  
            .title input{height:50px;width:50px;float:left;border:1px solid #CCC;margin-left:2px;}  
            .active{background:#5CB85C;}  
            #content_box{background:yellow;}  
            #content_box div{display:none;}/*设置子元素不可见*/  
        </style>  
    </head>  
    <body>  
        <div id="xuan_xiang_ka">  
            <div class="title">  
                <input class="active" type="button" value="新闻1"></input>  
                <input type="button" value="新闻2"></input>  
                <input type="button" value="新闻3"></input>  
                <input type="button" value="新闻4"></input>  
            </div>  
            <div id="content_box" >  
                <div style="display:block;">  
                    从前有座山1  
                </div>  
                <div>  
                    从前有座山2  
                </div>  
                <div>  
                    从前有座山3  
                </div>  
                <div>  
                    从前有座山4  
                </div>  
            </div>  
        </div>  
    </body>  
    <script type="text/javascript">  
        var an_niu = document.getElementsByTagName('input');  
        var temp =document.getElementById('content_box');  
        var wen_zhang =temp.getElementsByTagName('div');  
        for(var i=0; i < an_niu.length; i++)  
        {  
            an_niu[i].index = i;//为每个按钮添加序号  
            an_niu[i].onclick = function ()  
            {  
                for(var j=0; j < an_niu.length; j++)  
                {  
                    an_niu[j].className = '';//清除类  
                    wen_zhang[j].style.display = 'none';  
                }  
                this.className = 'active';//当前按钮添加活动类  
                wen_zhang[this.index].style.display ='block';//当前选项卡可见  
                //思路：在点击一个选项卡之前，把其他的选项卡都影藏，并清除类  
                //之后再为当前的选项卡添加属性  
            }  
        }  
    </script>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>innerHTML练习</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            body{padding:50px;}  
            div{border:1px solid red;width:260px;height:200px;padding:20px;}  
        </style>  
    </head>  
    <body>  
        <input id="text1" type="text"></input>  
        <input id="btn1" type="button" value="设置文字"></input>  
        <div id="div1">  
            从前有座山  
        </div>  
    </body>  
    <script type="text/javascript">  
            var btn1 = document.getElementById('btn1');  
            var text1 = document.getElementById('text1');  
            var div1 = document.getElementById('div1');  
            btn1.onclick = function ()  
            {  
                // 让div里面的文字是text里面的文字  
                div1.innerHTML = text1.value;  
            }  
        </script>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>月历选项卡</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            *{margin:0px;padding:0px;}  
            .ware{background:yellow;padding:15px 0px 15px 15px;width:285px;margin:100px auto;overflow:hidden;}  
            .month{overflow:hidden;}  
            span{float:left;width:80px;line-height:80px;text-align:center;font-size:16px;color:#FFF;font-weight:bold; margin-right:15px;margin-bottom:15px; background:#999;}  
            .tips{background:red;clear:both;width:240px;padding:15px;font-weight:bold;color:#FFF;}  
            .active{background:#FFF;color:black;}  
        </style>  
    </head>  
    <body>  
        <div class="ware">  
            <div class="month">  
                <span class="active">1</span><span>2</span><span>3</span>  
                <span>4</span><span>5</span><span>6</span>  
                <span>7</span><span>8</span><span>9</span>  
                <span>10</span><span>11</span><span>12</span>  
            </div>  
            <div id="setText" class="tips">  
            </div>  
        </div>  
    </body>  
    <script type="text/javascript">  
        var obj_month = document.getElementsByTagName('span');  
        var objTips = document.getElementById('setText');  
        var arr =[  
                '这个月有元旦',  
                '我们一起过年吧',  
                '这个月有38妇女节',  
                '4月分有什么节日呢？',  
                '哈哈劳动节快到了',  
                '可惜儿童节不属于我们',  
                '貌似有建党节吧',  
                '这个月有建军节吧么么哒',  
                '教师节到了，给老师一份祝福吧',  
                '一起看阅兵式吧',  
                '光棍节到了，有木有很伤心～',  
                '圣诞节不是中国的～'  
        ];  
        // 默认显示第一个月  
        objTips.innerHTML = '<p>1月活动'+'</p>'+arr[0];  
        for(var i=0; i < obj_month.length; i++)  
        {  
            obj_month[i].index = i;  
            obj_month[i].onmousemove = function ()  
            {  
                for(var j=0; j < obj_month.length; j++)  
                    obj_month[j].className = '';  
                this.className = 'active';  
                objTips.innerHTML = '<p>'+(this.index+1)+'月活动'+'</p>'+arr[this.index];  
            }  
        }  
    </script>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>数组遍历</title>  
        <meta charset="utf-8">  
    </head>  
    <body>  
    </body>  
    <script type="text/javascript">  
        var colorS =['yellow','blue','green','pink','black'];  
        for( var x in colorS)//x 是下标  
        {  
            alert(colorS[x]);  
            //alert(x);  
        }  
    </script>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>属性用变量代替</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            body{padding:400px; padding-top:200px;}  
            #box{width:300px;height:300px;background:yellow;}  
        </style>  
    </head>  
    <body>  
        <div id="box"></div>  
        <input type="button" value="点击我一下下～" id="btn"></input>  
    </body>  
    <script type="text/javascript">  
        var value = 'background';  
        var oBtn = document.getElementById('btn');  
        var oBox = document.getElementById('box');  
        oBtn.onclick = function ()  
        {  
            oBox.style[value] = 'red';  
            //等同于 oBox.style.background = 'red';  
        }  
    </script>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>根据参数个数实现相应功能</title>  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <div id="J_box" style="width:300px;height:240px;background:#CCC;margin:100px;"></div>  
    </body>  
    <script type="text/javascript">  
        var oBox = document.getElementById('J_box');  
        function css ()  
        {  
            if(arguments.length == 2)  
                alert(arguments[0].style[arguments[1]]);  
            if(arguments.length == 3)  
                arguments[0].style[arguments[1]] = arguments[2];  
        }  
        css(oBox,'width','800px');  
    </script>  
</html>  
<!-- *************************************************************************************-->  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>获取非行间样式</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            #J_box{width:300px;height:240px;background:#CCC;margin:100px;}  
        </style>  
    </head>  
    <body>  
        <div id="J_box"></div>  
    </body>   
    <script type="text/javascript">  
        var oBox = document.getElementById('J_box');  
        if(oBox.currentStyle)  
            alert(oBox.currentStyle.width);//IE  
        else  
            alert(getComputedStyle(oBox,false).width);//FF  
        //采用变量的写法 alert(getComputedStyle(oBox , false)['width']);   
    </script>  
</html>  
 <script type="text/javascript">  
// 函数封装  
//     function getStyle(obj,name)  
//     {  
//         if( obj.currentStyle)  
//             return obj.currentStyle[name];//obj.currentStyle.width;  
//         else  
//             return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width;  
//     }  
 </script>


文章标签：
云数据库 ClickHouse
JavaScript
关键词：
JavaScript笔记
小满zs
目录
相关文章
我是夜阑的狗
|
6月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
我是夜阑的狗
104 1
我是夜阑的狗
|
6月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
我是夜阑的狗
102 0
你都不懂
|
30天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
37 0
进步`于辰
|
12天前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记，直摇头，坦言：我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记，总结了`this`指向的各种情况，并分享了最新的理解。文章强调了`this`在不同上下文中的指向，包括对象方法、全局函数、箭头函数等，并提供了改变`this`指向的方法。适合JavaScript开发者参考。
进步`于辰
29 2
杀死一只知更鸟debug
|
2月前
|
JavaScript 前端开发 Java
JavaScript笔记（回顾一，基础知识篇）
JavaScript基础知识点回顾，包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
杀死一只知更鸟debug
37 1
JavaScript笔记（回顾一，基础知识篇）
孙飞i
|
3月前
|
存储 缓存 自然语言处理
深入理解JS | 青训营笔记
深入理解JS | 青训营笔记
孙飞i
39 0
hnrk7epeorhrk
|
5月前
|
JavaScript vr&ar 数据库
技术笔记：Js获取当前日期时间及其它操作
技术笔记：Js获取当前日期时间及其它操作
hnrk7epeorhrk
132 1
游客zn7mvnkypuy76
|
5月前
|
Web App开发 JavaScript iOS开发
技术笔记：js数组定义和方法(包含ES5新增数组方法)
技术笔记：js数组定义和方法(包含ES5新增数组方法)
游客zn7mvnkypuy76
44 0
hnrk7epeorhrk
|
5月前
|
JavaScript BI
技术笔记：JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记：JS获取子节点、父节点和兄弟节点的方法实例总结
hnrk7epeorhrk
73 0
wishCoding
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的笔记记录分享网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的笔记记录分享网站附带文章源码部署视频讲解等
wishCoding
33 0

热门文章

最新文章

  • 1
    实时显示日期、时间、城市天气（HTML+JS）
  • 2
    JavaScript值得注意的小知识点
  • 3
    HTML6 无 JavaScript 的单页应用引起一片哗然
  • 4
    走在JS上的全栈之路(一)
  • 5
    JavaScript 图片切割效果
  • 6
    js: 删除node的所有child
  • 7
    js正则表达式语法
  • 8
    Swift WKWebView JS 和 Native 交互(上)
  • 9
    开发者最容易犯的13个JavaScript错误
  • 10
    高性能Javascript--脚本的无阻塞加载策略
  • 1
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    134
  • 2
    《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
    271
  • 3
    js【详解】arr.reduce() 数组缩减
    47
  • 4
    【vue】 vue2 | js 实现数字滚动效果
    107
  • 5
    【vue】 网站动态背景 | vanta.js的使用
    418
  • 6
    JavaScript进阶-JavaScript库与框架简介
    58
  • 7
    DVWA JavaScript 通关解析
    67
  • 8
    WEB三大主流框架之Vue.js
    45
  • 9
    断网之后的页面，Autox.js是点击还是上下滑动比较好？
    60
  • 10
    autox.js如何监听异常情况，比如网络中断、内存慢、应用死机或者页面无响应
    221

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Node.js 入门教程文档
  • jQuery开发教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • CSS基础教程
  • 搭建Node.js编程环境
    • 下一篇
    阿里云OSS设置跨域访问