JS(4)

最新推荐文章于 2021-07-07 16:01:54 发布
最新推荐文章于 2021-07-07 16:01:54 发布
阅读量659 收藏
点赞数
分类专栏： Javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/John_boom/article/details/78021335
版权

复习

  1. 函数 function
    函数的声明 函数的调用 函数的传参
  2. 函数返回值
    Return 返回结果 返回给函数
    Id 函数 function $id(id) { return document.getElementById(id);}
  3. 获得焦点 onfocus 失去焦点 onblur
  4. this 这个 自己的 指向的是 事件调用者
  5. InnerHTML 属于盒子的内容 表单的内容 value
  6. 表单自动获得焦点 focus() 选择表单内容 select();
  7. for(var i = 0; i<100;i++) { } 遍历
  8. for(;;){ } 死循环
  9. getElementById() id元素 一个
  10. getElementsByTagName() 很多个

判断用户输入事件

正常浏览器 : oninput
Ie 678 支持的 ： onpropertychange

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .search {
            width:300px;
            height: 30px;
            margin: 100px auto;
            position: relative;
        }
        .search input {
            width:200px;
            height:25px;

        }
        .search label {
            font-size: 12px;
            color:#ccc;
            position: absolute;
            top:8px;
            left:20px;
            cursor: text;
        }
    </style>
    <script>
        window.onload = function(){
            function $(id){return document.getElementById(id);}
            //oninput 大部分浏览器支持  检测用户表单输入内容
            //onpropertychange  ie678  检测用户表单输入内容
            $("txt").oninput = $("txt").onpropertychange = function(){
                if(this.value == " ")
                {
                    $("message").style.display = "block";
                }
                else
                {
                    $("message").style.display = "none";

                }
            }
        }
    </script>
</head>
<body>
<div class="search">
    <input type="text" id="txt"/>
    <label for="txt" id="message">必败的国际大牌</label>
</div>
</body>
</html>

数组 array

声明数组

var arr = [1,3,5,7,9];
var arr = new Array(1,3,5);

使用数组

使用的方法: 数组名[索引值]; 函数名();
索引号是从0开始的。 0 1 2 3 4 5 …
var textArr = ["刘备","诸葛亮","赵云","关羽"];
console.log(textArr[3]);

数组的长度

数组名.length;

遍历数组

想到了for 遍历 数组
getElementsByTagName() 得到一个伪数组

案例 隔行变色

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 300px;
        }
        li {
            line-height: 30px;
            list-style-type: none;
        }
        li span {
            margin:5px;
        }
        .current{
            background-color: #aaa!important;
        }
    </style>
    <script>
        window.onload = function(){
            var lis = document.getElementsByTagName("li");
            for(var i=0;i<lis.length;i++)
            {
                if(i % 2 == 0)
                {
                    lis[i].style.backgroundColor = "#eee";
                }
                else
                {
                    lis[i].style.backgroundColor = "#ddd";
                }

                lis[i].onmouseover = function(){

                    this.className = "current";
                }
                lis[i].onmouseout = function(){

                    this.className = "";
                }
            }

          /*  var lis = document.getElementsByTagName("li");  // 得到所有的li
//alert(lis.length);
            for(var i = 0; i<lis.length; i++)
            {
                if(i%2 == 0)  // 只有偶数能被2整除
                {
                    lis[i].style.backgroundColor = "#eee";
                }
                //鼠标经过li 的时候， 当前的底色变亮
                lis[i].onmouseover = function(){
                    this.className = "current";
                }
                lis[i].onmouseout = function(){
                    this.className = "";
                }
            }*/
        }
    </script>
</head>
<body>
<div class="box">
    <ul>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
        <li>
            <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>
        </li>
    </ul>
</div>
</body>
</html>

补充：h5-placeholder

<input type="text" placeholder="必败的国际大牌"/>
可以起到搜索栏输入，value值消失的效果。

求平均值

<script>
var arr = [10,20,30,34,67];
    function avg(array){  // 封装求平均值函数
        var len = array.length;  // 数组的长度
        var sum = 0;
        for(var i=0; i<len; i++)
        {
            sum += array[i];   //     sum = sum +array[i];
        }
        return sum / len;
    }
    //a*=3   a= a*3
    console.log(avg(arr));
</script>

input 字符型

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var txt = document.getElementById("txt");
            var btn = document.getElementsByTagName("button")[0];
            btn.onclick = function(){
                //alert(typeof txt.value);
                var num = Number(txt.value);
                alert(num + num);


            }
        }
    </script>
</head>
<body>
<input type="text" id="txt"/>
<button>点击</button>
</body>
</html>

排他思想

排他思想:
首先干掉所有元素， 剩下一个元素

  <script>
    window.onload = function(){
        var btns = document.getElementsByTagName("button");
        for(var i=0;i<btns.length;i++)
        {
            btns[i].onclick = function(){
                //清除所有人的 类名   只能用 for 遍历
                for(var j=0;j<btns.length;j++)
                {
                    btns[j].className = "";
                }
                //就剩下自己 就是一个 而且是点击那个
                this.className = "damao";
            }
        }
    }
</script>

案例：全选与反选

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("button"); // 得到了所有的button
            var inputs = document.getElementById("bottom").getElementsByTagName("input");
            // bottom 里面的input
       /*     btns[0].onclick = function(){

                for(var i=0; i<inputs.length;i++)
                {
                    inputs[i].checked = true;  // 选中表单
                }
            }

            btns[1].onclick = function(){

                for(var i=0;i<inputs.length;i++)
                {
                    inputs[i].checked = false;
                }
            }

            btns[2].onclick = function(){

                for(var i=0;i<inputs.length;i++)
                {
                    if(inputs[i].checked == true)
                    {
                        inputs[i].checked = false;
                    }
                    else
                    {
                        inputs[i].checked = true;
                    }
                }
            }*/

            /*全选和取消 函数*/
             function all(flag){
                 for(var i=0;i<inputs.length;i++)
                 {
                     inputs[i].checked = flag;
                 }
             }
             btns[0].onclick = function(){
                  all(true);
             };
             btns[1].onclick = function(){
                  all(false);
             };
             btns[2].onclick = function(){

                 for(var i=0;i<inputs.length;i++)
                 {
                     inputs[i].checked == true ?  inputs[i].checked = false : inputs[i].checked = true;
                 }
             }
        }
    </script>
</head>
<body>
<div id="top">
    <button>全选</button>
    <button>取消</button>
    <button>反选</button>
</div>
<div id="bottom">
    <ul>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
    </ul>
</div>
</body>
</html>

变量和属性

变量
是独立存在的 自由自在的
miss 小姐 女士
属性和方法
属于某个对象的 属性和 方法
mrs

var index = 10; //变量 谁都可以使用
var arr = []; // 数组
arr.index = 20; // 自定义属性 他只能在arr 才能使用
alert(arr.index);

tab栏切换案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 400px;
            margin:100px auto;
            border:1px solid #ccc;
        }
        .bottom div{
            width:100%;
            height: 300px;
            background-color: pink;
            display: none;
        }
        .purple {
            background-color: purple;
        }

    </style>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("button");
            var divs = document.getElementById("divs").getElementsByTagName("div");
            for(var i=0;i<btns.length;i++)
            {
                btns[i].index = i;  // 难点
                btns[i].onclick = function(){
                    //让所有的 btn 类名清空
                    //alert(this.index);
                    for(var j=0;j<btns.length;j++)
                    {
                        btns[j].className = "";
                    }
                    // 当前的那个按钮 的添加 类名
                    this.className = "purple";
                    //先隐藏下面所有的 div盒子
                    for(var i=0;i<divs.length;i++)
                    {
                        divs[i].style.display = "none";
                    }
                    //留下中意的那个 跟点击的序号有关系的
                    divs[this.index].style.display ="block";
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div class="top">
        <button>第一个</button>
        <button>第二个</button>
        <button>第三个</button>
        <button>第四个</button>
        <button>第五个</button>
    </div>
    <div class="bottom" id="divs">
        <div style="display: block;">1好盒子</div>
        <div>2好盒子</div>
        <div>3好盒子</div>
        <div>4好盒子</div>
        <div>5好盒子</div>
    </div>
</div>

</body>
</html>

改进版本：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 400px;
            margin:100px auto;
            border:1px solid #ccc;
        }
        .bottom div{
            width:100%;
            height: 300px;
            background-color: pink;
            display: none;
        }
        .purple {
            background-color: purple;
        }
        .bottom .show {
            display: block;
        }

    </style>
    <script>
        window.onload = function(){
            var btns = document.getElementsByTagName("button");
            var divs = document.getElementById("divs").getElementsByTagName("div");
            for(var i= 0;i<btns.length;i++)
            {
                btns[i].index = i;  // 难点
                btns[i].onclick = function(){
                    //让所有的 btn 类名清空
                    //alert(this.index);
                    for(var j=0;j<btns.length;j++)
                    {
                        btns[j].className = "";
                        divs[j].className = "";
                    }
                    // 当前的那个按钮 的添加 类名
                    this.className = "purple";
                    //先隐藏下面所有的 div盒子
                    //留下中意的那个 跟点击的序号有关系的
                    divs[this.index].className = "show";
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div class="top">
        <button>第一个</button>
        <button>第二个</button>
        <button>第三个</button>
        <button>第四个</button>
        <button>第五个</button>
    </div>
    <div class="bottom" id="divs">
        <div class="show">1好盒子</div>
        <div>2好盒子</div>
        <div>3好盒子</div>
        <div>4好盒子</div>
        <div>5好盒子</div>
    </div>
</div>

</body>
</html>
John_boom
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js4kgames:Javascript 4k 游戏
07-14
js4kgames Javascript 4k 游戏
ArcGIS API For JavaScript 4.x 获取地图经纬度坐标（附完整代码）
01-07
ArcGIS API For JavaScript 4.x 获取地图经纬度坐标（附完整代码，即开即用）
js4
weixin_34021089的博客
10-30 77
js数据类型具体分析1.基础类型 string number Boolean null undefined2.引用类型 object复习 点 运算符 xxx.sss xxx数对象 sss是属性和方法任何数据类型都是拥有属性和方法。字符串 string var st="hellow world" 字符串的定义 A.var B. var st=...
数据类型
weixin_34248705的博客
10-18 67
js的本质就是处理数据。数据来自于后台的数据库。 所以变量就起到一个临时存储数据的作用。 ECMAScript制定了js的数据类型。 数据类型有哪些？ 字符串 String 数字 Number 布尔 Boolean Null 空 Undefined Object 对象 Array 数组 json function 函数...
JS 4
dgn64458的博客
07-18 109
1、函数 1、什么是函数 是一段预定义好，并可以被反复使用的代码块 预定义：事先声明好 反复使用：提升代码的可重用性 代码块：允许包含多条可执行语句 2、声明函数 ...
lua2js4cocos:lua将cocos2d-js转换为javascript
05-11
lua2js4cocos lua转换为cocos的javascript cocos2dx-lua到cocos2dx-js 将lua文件放入输入中运行lua2js.py脚本，该js文件将在输出中生成。
js4:使用ES6 JavaScript编写CSS
05-18
js4 使用ES6 JavaScript编写CSS。 安装 npm install -g js4 # may require sudo 用法 用JS在文件中编写CSS，例如css.js ： new Rule ( 'body' , { color : 'red' } ) ; new Rule ( '#id, .class > [attr]' , { '...
arcgis api for javascript 4.x 聚合
01-09
arcgis api for javascript 4.x 聚合。 实现4.x在三维上的点的聚合，可用于sceneview和mapview。 4.x arcgis api 聚合。
JS4
u013573897的专栏
03-24 115
一、事件冒泡 1.介绍 事件冒泡值得是，内层元素和外层元素如果都对某个事件进行监听，那么改事件会一直向上抛出。 这样可以简化开发，比如说一个大的div中有好多小div，可以只对大div的事件进行监听。   2.停止事件冒泡 evt.stopPropagation();//firefox evt.cancelBubble=true; 写法： var evt =window.ev...
js 4
quanshy_的博客
12-02 97
一个for循环 循环的是元素是索引 如果把a换成字典 普通for循环 只支持数组 不支持字典 条件语句 js当中的条件语句 存在=== 以及 !=== js中的and 用 && js中的or 用 || js里的函数 abc 为形式参数 ...
js-4
Hunter_LIFE的博客
03-21 246
*****数组*********** 1 概念引入       数组： 处理一组数据，数组也是一种数据类型 2  定义的两种方式     a  直接量          var arr1 = [10,20,30];     含义： 定义了一个数组，数组名叫arr1,中括号里面的是 数组的元素，元素可以有很多，元素之间用逗号隔开             数组含有元素的个数（元
JavaScript学习资料五
luorongsong_1994的博客
10-29 288
1.正则表达式(RegExp) 1)正则表达式的基本语法规则 语法: 创建正则表达式对象: var reg = new RegExp(pattern,modifiers); 或者 var reg = /pattern/modifiers;  注: pattern   描述了表达式的模式/规则 modifiers 用于指定全局匹配、区分大小写的匹配和多行匹配 对应修饰符m
js(4)
qq_43141894的博客
09-20 145
BOM对象有哪些，列举window对象？ 1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性； 2、document对象，文档对象； 3、location对象，浏览器当前URL信息； 4、navigator对象，浏览器本身信息； 5、screen对象，客户端屏幕信息； 6、history对象，浏览器访问历史信息； 请问代码实现 outerHTML ...
js:4.
weixin_34252686的博客
01-19 182
JS第四周 正则 定义：是一个用来处理字符串的规则 正则只能用来处理字符串 处理一般包含两方面 验证当前字符串是否符合某个规则”正则匹配” 把一个字符串中符合规则的字符获取到”正则捕获” 创建正则的两种方式 1.let reg1=/^\d+$/g;//=&gt;字面量方式 2.let reg2=new RegExp("^\\d+$","g");//=&gt;构造函数方式 元字符和修饰符 正则两个斜...
JS4 - 内置对象
yuan
07-07 123
1、题目 获取2017-06-10格式的日期 获取随机数，要求是长度一致的字符串格式 写一个能遍历对象和数组的forEach函数 2、知识点 ⑴、日期 日期函数最常用的 API 如下： Date.now() // 获取当前时间毫秒数 dt.getTime() // 获取毫秒数 dt.getFullYear() // 年 dt.getMonth() // 月（0 - 11） dt.getDate() // 日（1 - 31） dt.getHours() // 小时（0 - 23） dt.ge
一条Javascript命令玩转EOS, js4eos开源了
区块链斜杠青年(爱踢门)
11-04 4035
其实很早就想做一个简化EOS操作的项目了，因为EOS探索过程遇到太多朋友咨询EOS编译问题，EOS更新导致操作错误问题。这还是那些有一定编程基础的伙伴，对于"小白"用户就更难了。昨天终于有时间实现了，用户只需通过npm一键安装js4eos,后面就可以通过js4eos玩转EOS生态了。且通过切换网络，可以很便捷的玩转其他EOS生态链。 js4eos js4eos is a Command Lin...
AngularJS 4(四)【HTTP 服务】
极客神殿
08-24 614
提供 HTTP 服务 HttpModule并不是 Angular 的核心模块。 它是 Angular 用来进行 Web 访问的一种可选方式，并位于一个名叫 @angular/http 的独立附属模块中，并作为 Angular 的 npm 包之一而发布出来。 注册 HTTP 服务 我们的应用将会依赖于 Angular 的http服务，它本身又依赖于其它支持类服务。 来自@angular/h...
bootstrap4js
最新发布
08-12
在Bootstrap 4中，JavaScript部分的文件被称为"bootstrap.js"，它包含了一些交互和动态效果的功能。 使用Bootstrap 4的JavaScript组件，你可以轻松地添加诸如导航菜单、轮播图、模态框、标签页等等功能到你的网页中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值