JS简单学习

关于JS

js的运用在body中进行，<script></script>(也可不要body直接运行)
js基本运用

首先定义一个容器名字 var。函数使用function
将需要的数据放如容器当中
将这个容器已一定的方式进行展示
容器名字和数据可以同时进行

 // 首先定义一个容器名字
        var money//该容器名字为name
        // 将需要的数据放入容器中
        money = 100000
        // 将这个容器已弹窗的方式进行展示
        alert(money)
        // // 容器和数据可以同时进行
        var money = '1000'
        alert(money)
        // 在控制台中展示数据
        console .log('金钱',money)

数字类型（可为整数，可有小数，无需添加符号）

var num1 = 100 //整数数字类型
        var num2 = 330.33 //小数数字类型
        console .log('整数数字和小数数字在控制台显示',num1,num2)

字符串类型

// 字符串类型(用一定的符号将字符串包裹，以下三种皆可以使用)
        var str1 = '风耳' //使用单引号包裹 
        var str2 = "我宁愿什么都不做"//使用双引号包裹
        var str3 = `也不愿意犯错`//使用反引号包裹
        console .log('单引号，双引号，反引号的使用',str1,str2,str3)

布尔类型

// 布尔类型（描述一种是否状态，赋值有一定的要求，不能随意填写）
        var isopen = true;
        isopen =  false 
        console .log('是',true)

null类型（声明一个变量，将来打算用来存放对象）

var obj = null;

对象类型(使用{ }进行包裹)

 var person ={
            name: '风耳',//给对象中的name赋值为风耳
            age: 22,//给对象中的age赋值22
            hobby:"睡觉"
        }
        console .log(person)//这是把整个对象展示出来
        console .log('姓名：',person.name)//这是只展示对象中的姓名

数组类型（使用[ ]进行包裹）

var arr = [1,12,12,12,14]
        console .log('数字型数组',arr)
        var arr1 = ['我的','名字','是']
        console .log('字符串数组',arr1)
        var arr2 = [
            {
                name: '风耳',
                age: 23
            },
            {
                name: '风耳',
                age: 23
            },
            {
                name: '风耳',
                age: 23
            }
        ]
        console .log('对象型数组',arr2)
        如需只提取其中一个成员,第一个从0开始计算的
        console .log('对象型数组中的第一个',arr2[0])
        数组长度
        console .log('数组的长度',arr2.length)
        数组中最后一个成员可为数组长度减一
        console .log('数组arr中最后一个',arr[arr.length-1])

函数类型(内容完整之后调用一次即可运行一次)

<!DOCTYPE html>
<html lang="en">
<body>
<script>
// function是声明函数用的词
// compute函数的名称, {}里面放我们要封装起来的代码
function compute() {
var num1 = 20;
var num2 = 3;
var result1 = num1 + num2;
console.log('相加结果:', result1); // 23
var result2 = num1 - num2;
console.log('相减结果:', result2); // 17
var result3 = num1 * num2;
console.log('相乘结果:', result3); // 60
var result4 = num1 / num2; // 6.66666666666.......
console.log('相除结果:', result4);
var result5 = num1 % num2; // 2
console.log('取余结果:', result5);
}
// 调用函数, 也就是运行函数: 函数名+()
compute();
compute();
compute();
compute();
compute();
</script>
</body>
</html>

函数传数据

<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="aaa(1111)">btn1</button>  //111为存储数据
<button onclick="aaa(2222)">btn2</button>
<button onclick="aaa(3333)">btn3</button>
<script>
 function aaa(str) {  // str为上面存储数据的名称（可随意进行设置）
 alert(str);
 }
 </script>
</body>
</html>

简单运算规则

  var num1 = 30
        var num2 = 20
        var result = num1 + num2
        console .log('相加结果',result)

        var result1 = num1 - num2
        console .log('相减结果',result1)

        var result2 = num1 * num2
        console .log('相乘结果',result2)

        var result3 = num1 / num2
        console .log('相除结果',result3)

        var result4 = num1 % num2
        console .log('余数结果',result2)

        // 相加时，如果有一个为字符串数字，结果不会相加，只会相连
        var num3 = "20"
        var result5 = num1+num3
        console .log('一个数字为字符串',result5)  //结果为3020

练习

提取name

方法一

<script>
        var obj = {
            "code": 666,
            "msg": "success",
            "result": [{
                "id": "rKa7zQAmkx",
                "address": "深圳,大鹏新区",
                "desc": "连海岸线都不愿意离开的民宿村",
                "displayPrice": "456",
                "imageUrl": "https://img.villaday.com/images/village/vg_213/213-15326755495680.jpg",
                "name": "深圳·较场尾/大鹏古城"
            }, {
                "id": "QXd5OQP7D2",
                "address": "三亚,三亚市",
                "desc": "七千米长的银白色海滩，沙质细腻，海水洁净透明，珊瑚种类丰富，多样的水上活动让人乐不思蜀",
                "displayPrice": "110",
                "imageUrl": "https://img.villaday.com/images/village/vg_106/106-15264558722030.jpg",
                "name": "亚龙湾度假区"
            }, {
                "id": "xX4760J53Q",
                "address": "桂林,阳朔县",
                "desc": "状如狮，东岭岩层裸露，色白如雪；依江而立，称雪狮岭。",
                "displayPrice": "396",
                "imageUrl": "https://img.villaday.com/images/village/vg_301/301-14899852965440.jpg",
                "name": "雪狮岭风景区"
            }, {
                "id": "bqZyBQ7BKO",
                "address": "广州,从化市",
                "desc": "都市中的“世外桃源”，核心度假区的“度假核心”",
                "displayPrice": "706",
                "imageUrl": "https://img.villaday.com/images/village/vg_18/18-5d720cf4-a80d-4f2e-9963-f107bc6db066.jpg",
                "name": "广州·从化温泉明月山溪"
            }]
        }
        console .log('名称',obj.result[0].name+'\n',obj.result[1].name+'\n',obj.result[2].name+'\n',obj.result[3].name+'\n')

    </script>

+'\n'为换行符，这样就能够不让最后一个覆盖掉前面的

方法二

        console .log('名称',obj.result[0].name);
        console .log('名称',obj.result[1].name);
        console .log('名称',obj.result[2].name);
        console .log('名称',obj.result[3].name);

选中标签

如果是一个div中包含好几个标签，要选中div中的全部，只需要用document.querySelector和document.querySelectorAll

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">训练使用js选择</div>

    <ul class="list">
        <li class="item">111</li>
        <li class="item">111</li>
        <li class="item">111</li>
    </ul>

    <script>
        var _aa = document.querySelector('.box');
        console .log('选择box',_aa)

        var _bb = document.querySelector('.list .item');  //单个选择，只会选择搜索到的第一个
        console .log('选中列表item',_bb)

        var _cc = document.querySelectorAll('.list .item');  //会选中所有的.list .item(此时会得到一个伪类数组)
        console .log('选中全部的item',_cc)
//querySelector（.list .item）表示选中.list .item中的第一个
//querySlelctorAll（.list .item）表示选中所有的.list .item。及为list中的所有item。
    </script>
</body>
</html>

选中标签中的内容及修改内容

对文本进行提取和修改

 // 获取box中的内容
        var box = document.querySelector('.box');//首先先把这个box提取出来
        var content1 = box.innerText;//再从box中提取出内容来
        console .log('提取box中的内容',content1)

        // 对盒子内容进行修改
        box.innerText = '这个可以进行修改';  //innerText为提取内容（只有文本，数值之类）

对整个盒子进行提取和修改

 // 对盒子整体进行提取
        var box1 = document.querySelector('.box1')
        var content1 = box1.innerText
        console .log('大盒子内容',content1)
box1.innerHTML = "";  //box1为空，innerHTML提取的整个内容（包括标签）

对内部样式进行提取和修改

 // 提取box中的样式
        var box = document.querySelector('.box');
        var color = box.style.color
        console .log('提取颜色',color)
        var fontSize = box.style.fontSize
        console .log('提取字体',fontSize)
        // 修改样式
        box.style.color = '#000000';
        box.style.fontSize = '30px'

对属性进行提取和修改

<!DOCTYPE html>
<html lang="en">

<body>
    <a href="http://www.baidu.com">百度</a>
    <input type="text" value="我是老胡">
    <script>
        var _a = document.querySelector('a');  //提取a标签
        console.log(_a.href); //在控制台进行展示
        _a.href = 'https://www.sina.com.cn/';  //修改a标签中的href属性
        _a.innerText = '新浪';  //修改文本为新浪
        var _input = document.querySelector('input');  //提取input标签
        console.log(_input.value);  //在控制台进行展示
        _input.value = '张三';  // 修改input中的value属性
    </script>
</body>
</html>

绑定点击事件

做点击事件之间先检测按钮是否正常使用，如button=aa

 // 点击事件
<button onclick="aa()">按钮</button>  //点击button按钮会出现弹窗显示1111
    function aa(){
        alert(1111)
    }

按钮正常使用即可对function aa(){}中进行设置

function aa(){
        var num1 = 100
        var num2 = 200
        var result = num1+num2
        alert(result)
    }

练习——计算两个输入框相加的值

思路：首先先确定点击按钮，之后对按钮显示内容进行设置。首先先提取两个输入框，并提取其中的value（数值）值。之后对两个提取出来的值进行计算得到一个答案。最后显示答案。要将答案显示在=后面，需再在=后面设置一个框架（并也得提取出来）。提取出来的的value值为字符串，因此在相加过程中可直接乘以1使之变为数值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <input class="num1" type="text"> + <input class="num2" type="text"> =<span class="result"></span>
    </p>
    <p>
        <button onclick="and()">等于</button>
    </p>

    <script>
        function and(){
            var _num1 = document.querySelector('.num1');
            var _num2 = document.querySelector('.num2');
            var _result = document.querySelector('.result')

            var _content1 = _num1.value;
            var _content2 = _num2.value;


            var result = _content1*1 + _content2*1
            _result.innerText=result  //将计算结果放入span标签里
        }
    </script>
</body>
</html>

练习选中高亮及跳转

<!DOCTYPE html>
<html lang="en">
<style>
    .tab {
        display: flex;
    }

    .tab .active {
        background-color: blue;
        color: #fff;
    }

    .tab span {
        width: 100px;
        border: 1px solid;
        margin-right: 15px;
        text-align: center;
        cursor: pointer;
        padding: 5px 10px;
    }

    .box .item {
        border: 1px solid;
        width: 600px;
        height: 500px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        display: none;
    }

    .box .course1 {
        background-color: red;
        border: 1px solid red;
    }

    .box .course2 {
        background-color: blue;
        border: 1px solid blue;
    }

    .box .course3 {
        background-color: green;
        border: 1px solid green;
    }
</style>

<body>
    <p class="tab">
        <span class="active" onclick="aa(0)">web前端</span>
        <span onclick="aa(1)">c++</span>
        <span onclick="aa(2)">java</span>
    </p>
    <hr>

    <div class="box">
        <div class="item course1" style="display: flex;">
            web前端课程
        </div>
        <div class="item course2">
            c++课程
        </div>
        <div class="item course3">
            java课程
        </div>
    </div>


    <script>
        // 1.先确定点击事件。
        function aa(num){
            // alert(num)  此为获取点击事件
            // 1.提取tab里的span标签
            var _spans = document.querySelectorAll('.tab span')
            // 3.将不选中的span取消style
            _spans[0].className =''; 
            _spans[1].className ='';
            _spans[2].className ='';
            // 2.选中某一个某一个变高亮
            _spans[num].className = 'active';

            // 4.提取box中的item
            var _items = document.querySelectorAll('.box .item');
            // 5.将所有的item进行隐藏
            _items[0].style.display = 'none';
            _items[1].style.display = 'none';
            _items[2].style.display = 'none';
            // 6.选中某一个显示某一个
            _items[num].style.display = 'flex'

        }
    </script>
</body>

</html>

函数进阶

1. 对象里加入函数，调用函数

<script>
        var comput = {
            name:'风耳',
            age:15,
            begin:function(){
                console .log('我宁愿什么都不做')
            }
        }
        comput.begin()  //调用对象里的函数
    </script>

2. 对象里的函数调用函数

<script>
        var comput = {
            name:'风耳',
            age:15,
            begin:function(){
                console .log('我宁愿什么都不做')
            },
            second:function(){
                this.begin()
            }
        }
        comput.second()  //调用对象里的函数
    </script>

箭头函数

// 箭头函数
        var add = (a,b)=>{
            console .log(a+b)
        }
        add(100,100);

在对象中使用箭头函数

 var comput = {
            add1: ()=>{
                console .log('我将玫瑰藏于身后')
            }
        }
        comput.add1();

if的用法

当输入bb，dd时，会显示这是真。aa，bb时为这是假。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var aa = (false);
        var bb = (true);
        var cc = ('');
        var dd = (123)
        if(dd){
            console.log('这是真')
        }else{
            console.log('这是假')
        }
    </script>
</body>
</html>

使用if进行比较练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <input class="num1" type="text" placeholder="请输入数字">
        <span class="result"></span>
        <input class="num2" type="text" placeholder="请输入数字">
    </p>
    <p>
        <button onclick="but()">按钮</button>  
    </p>

    <script>
        function but(){
            // alert(111)
            var _num1 = document.querySelector('.num1');
            var _num2 = document.querySelector('.num2');
            var _span = document.querySelector('span')
            
            var _content1 = _num1.value*1;
            var _content2 = _num2.value*1;
            
            if(_content1>_content2){
                _span.innerText = '>';
            }
            else if(_content1 = _content2){
                _span.innerText = '='}
            else{
                _span.innerText = '<';
            }
            

            // _span.innerText = _content1>_content2?'>':'<'
        }
    </script>
</body>
</html>

$\color{red}{在此有一个疑问，为何当我运行到第二次的时候两个数值都一样了}$

登录和退出登录简单js练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        display: none;
    }
</style>

<body>
    <p class="box">
        <span>12300000000</span> <button onclick="sigout()">退出登录</button>
    </p>
    <p class="box1">
        <input type="text" placeholder="请输入手机号码"> <button onclick="sign()">立即登录</button>
    </p>


    <script>
        // 第一步还是点击时间
        function sign() {
            // 提取inpout中的数值
            var _inp = document.querySelector('.box1 input')
            var _num1 = _inp.value * 1;
            // 提取box1，box
            var _box1 = document.querySelector('.box1')
            var _box = document.querySelector('.box')
            // 提取span中的数值
            var _span = document.querySelector('span')
            // 展示结果，block为显示，none取消，
            _box.style.display = 'block';
            _box1.style.display = 'none';
            _span.innerText = _num1;

        }
        function sigout(){
            // 提取inpout中的数值
            var _inp = document.querySelector('.box1 input')
            var _num1 = _inp.value * 1;
            // 提取box1，box
            var _box1 = document.querySelector('.box1')
            var _box = document.querySelector('.box')
            // 提取span中的数值
            var _span = document.querySelector('span')
             // 展示结果，block为显示，none取消，
             _box.style.display = 'none';
            _box1.style.display = 'block';
            _inp.value = '';
        }
    </script>
</body>

</html>

思路：首先先明确目的，找准对象，才能正确的将对象提取出来。

for循环的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for(i=1;i<10;i++){    //()里第一个为初始值，第二个为满足条件，第三个为每次加一。（i--为每次减一）
            console .log(i)  // 输出的值为i
        }
    </script>
</body>
</html>

JS简单学习

JS简单学习

关于JS

练习

方法一

方法二

选中标签

选中标签中的内容及修改内容

对文本进行提取和修改

对整个盒子进行提取和修改

对内部样式进行提取和修改

对属性进行提取和修改

绑定点击事件

练习——计算两个输入框相加的值

练习选中高亮及跳转

函数进阶

1. 对象里加入函数，调用函数

2. 对象里的函数调用函数

箭头函数

if的用法

使用if进行比较练习

登录和退出登录简单js练习

for循环的使用

相关阅读更多精彩内容

友情链接更多精彩内容