JAVASCRIPT

m0_56735463

已于 2022-04-26 10:33:41 修改

阅读量566

点赞数

分类专栏： Js 文章标签： javascript

于 2022-04-20 20:58:46 首次发布

本文链接：https://blog.csdn.net/m0_56735463/article/details/124297785

版权

Js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

数组的遍历

<!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>
        let arr = ['red', 'green', 'blue'];
        // 因为数组是从索引号0开始，所以i必须从0 开始 i <arr.length
        //i是计数器 arr[i]是元素个数
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }

        // 案例
        //求数组【2，6，1，7，4】所有元素的和以及平均值
        var arr1 = [2, 6, 1, 7, 4];
        var sum = 0;
        var average = 0;
        for (let j = 0; j < arr1.length; j++) {
            sum += arr1[j];
        }
        console.log("和 = " + sum, "平均值 = " + sum / arr1.length);

        //求数组中的最大值
        var arr2 = [2, 4, 6, 8, 3, 98, 32, 45];
        var max = arr2[0];
        for (var bgNum = 0; bgNum < arr2.length; bgNum++) {
            if (arr2[bgNum] > max) {
                max = arr2[bgNum];
            }
        }
        console.log(max);

        //将数组转换成字符串，并用|--|分割
        var newStr = '';
        var sep = '|--|'
        var arr3 = ['red', 'green', 'blue', 'yellow'];
        for (var oldStr = 0; oldStr < arr3.length; oldStr++) {
            newStr += arr3[oldStr] + sep;
        }
        console.log(newStr);
    </script>
</body>

</html>

数组的改值

<!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>数组中新增元素</title>
</head>

<body>
    <script>
        var arr = [1, 3, 5, 7, 9];
        console.log(arr.length);
        // 将长度修改成10后 -- 有5个空值
        arr.length = 10;
        console.log(arr);
        //通过修改数组索引号的方式追加数组元素
        arr[11] = 'hh';
        console.log(arr);
        //改变数组原来的值
        arr[0] = 'orange';
        console.log(arr);
        //将所有数据替换掉
        arr = '替换了嘛';
        console.log(arr);

        // 案例:
        // 新建一个数组，里面存放10个整数（1-10）
        var arr1 = [];
        //数组是从0开始
        for (var num = 0; num < 10; num++) {
            arr1[num] = num + 1;
        }
        console.log(arr1);


        //删选数组[2，4，6，7，43，72，5，2324，745]大于10的数存进新数组
        //方法一
        var oldArr = [2, 4, 6, 7, 43, 72, 5, 232, 745];
        var newArr = [];
        var k = 0;
        for (var i = 0; i < oldArr.length; i++) {
            if (oldArr[i] >= 10) {
                //新数组从0开始依次递增
                newArr[k] = oldArr[i];
                k++;
            }
        }
        console.log(newArr);
        // 方法二
        var old = [2, 4, 6, 7, 43, 72, 5, 232, 745];
        var news = [];
        for (var i = 0; i < old.length; i++) {
            if (old[i] >= 10) {
                //新数组从0开始依次递增
                news[news.length] = old[i];
            }
        }
        console.log(news);
    </script>
</body>

</html>

数组案例：

<!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>数组中新增元素</title>
</head>

<body>
    <script>
        //将数组[2,3,5,0,43,6422,235,1]中的零去掉
        // 方法一
        var arr = [2, 3, 5, 0, 43, 6422, 235, 1];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != 0) {
                console.log(arr[i]);
            }
        }
        // 方法二
        var arr1 = [2, 3, 5, 0, 43, 6422, 235, 1];
        var newarr = []
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != 0) {
                newarr[newarr.length] = arr1[i]
            }
        }
        console.log("newarr" + newarr);
    </script>

</body>

</html>

反转数组

<!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>数组中新增元素</title>
</head>

<body>
    <script>
        //反转数组
        var arr = [2, 3, 5, 0, 43, 6422, 235, 1];
        var newarr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            newarr[newarr.length] = arr[i];
        }
        console.log(newarr);
    </script>

</body>

</html>

冒泡函数

<!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>数组中新增元素</title>
</head>

<body>
    <script>
        //冒泡排序（从小到大or从大到小）
        // 内外两层循环
        // 外：趟数 看需要遍历多少遍 如果时5个元素那么需要4次
        // 54321 把5放在后面要经历4次交换次数

        // 43215
        // 32145
        // 21345
        // 12345
        // 内：每层循环有多少列
        var arr = [3, 4, 7, 2, 6, 1];
        for (var i = 0; i <= arr.length - 1; i++) {
            
            for (var j = 0; j <= arr.length - i - 1; j++) {
                if (arr[j] > arr[j + 1]) {
                    var temp;
                    temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp
                }
            }
        }
        console.log(arr);
    </script>

</body>

</html>

函数

函数名命名动词为了实现某个功能 function必须小写

函数不调用自己不执行

//形参如果不传值那么默认为undefined

<!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>函数</title>
</head>

<body>
    <script>
        // 形参，实参
        // function getFun(形参1,形参2....){形参是用来接收实参的 想当与一个变量
        //     函数体
        // }
        // getFun(实参1 ， 实参2....)


        // 求两个数之间的累计和
        function getSum(num1, num2) {
            var sum = 0;
            for (var i = num1; i <= num2; i++) {
                sum += i;
            }
            console.log(sum);
        }
        getSum(1, 3);
        getSum(234, 432);

        //任意两个数的和
        function getAdd(Num1, Num2) {
            // var Sum = 0;
            // Sum = Num1 + Num2;
            // console.log(Sum);
            console.log(Num1 + Num2);
        }
        getAdd(4, 78);
        getAdd(3244, 7234);

        // 正确格式是不应该把输出语句放在函数内部 应该用return
        //无参
        function getCook() {
            return "hello";
        }
        console.log("函数：" + getCook());
        //有参
        function getcook(aug) {
            return aug;
        }
        console.log(getcook("嗯呢"));
    </script>

</body>

</html>

函数返回值练习

<!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>函数</title>
</head>

<body>
    <script>
        //求任意两个数比较最大值
        function getNum(num1, num2) {
            // if (num1 > num2) {
            //     return num1
            // } else {
            //     return num2;
            // }

            return num1 > num2 ? num1 : num2

        }
        console.log(getNum(1, 5));
        console.log(getNum(14, 2));


        //求出最大值
        function GotNum(arr) {
            var j = arr[0];
            for (var i = 1; i <= arr.length; i++) {

                if (arr[i] > j) {
                    j = arr[i];
                }
            }
            return j;
        }
        console.log(GotNum([3, 45, 73, 6, 2, 62]));
    </script>

</body>

</html>

return 之后的代码是不会被执行的

return只能返回一个值，如果出现两个值或者多个，并且用逗号隔开，则以最后一个为准

怎么同时计算加减乘除

<!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>函数</title>
</head>

<body>
    <script>
        function getResult(num1, num2) {
            return [num1 * num2, num1 + num2, num1 / num2, num1 - num2]
        }
        re = getResult(6, 2)
        console.log(re); // 返回一个数组
    </script>

</body>

</html>

break，continue，return的区别

break，continue 争对于循环

return 不仅循环而且返回函数值

arguments的使用

当我们不确定函数中有多少个参数传递时，可以用argument获取，在js当中，arguments实际上是一个当前函数的内置对象。所有函数都内置了一个arguments对象，此对象中存储了传递所有实参

其展示形式是一个伪数组

伪数组的特点：只具有数组的一些特性

1.具有length属性

2.按索引方式存储数组

3.不具有数组的push，pop等方法

<!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>函数</title>
</head>

<body>
    <script>
        function fn() {
            console.log(arguments);
            console.log(arguments.length);
            console.log(arguments[2]);
            //可以通过遍历数组的方式遍历数组
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        fn("w", "t", "y", "w", "r", "s", "f", "g", "w")
    </script>

</body>

</html>

结果：

例题：

<!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>函数</title>
</head>

<body>
    <script>
        // 求最大值(任意个数)
        function fn() {
            var max = arguments[0];
            for (var i = 1; i < arguments.length; i++) {
                if (max < arguments[i]) {
                    max = arguments[i];
                }
            }
            return max;
        }
        console.log(fn(3, 5, 2, 6, 12, 63));
        console.log(fn(3, 5, 2));
        console.log(fn(3, 6, 12, 63));

        //利用函数封装的方法，翻转任意一个数组
        //利用函数封装的方法，实现冒泡函数
        //输入一个年份判断是否是闰年（能被四整除并且不能被100整除，或者能被400整除）
        // 第一种
        function leapYear(Year) {
            if (Year % 100 != 0 && Year % 4 == 0 || Year % 400 == 0) {
                return "闰年";
            } else {
                return "平年";
            }
        }
        console.log(leapYear(2000));
        // 第二种
        function isLeapYear(Years) {
            // var flag = false ;
            var flag = "平年"
            if (Years % 100 != 0 && Years % 4 == 0 || Years % 400 == 0) {
                flag = "闰年";
            }
            return flag
        }
        console.log(isLeapYear(2000));
    </script>

</body>

</html>

函数是可以相互调用的

<!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>函数</title>
</head>

<body>
    <script>
        function f1() {
            console.log(1);
            f2();
        }
        f1();

        function f2() {
            console.log(2);

        }
    </script>

</body>

</html>

案例：

<!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>函数</title>
</head>

<body>
    <script>
        //输入年份，输出当前2月份的天数 闰年 = 29 ，平年 = 28 
        function backDay() {
            var year = prompt("请输入你的年份");
            if (LoopYear(year)) {
                alert("29天");
            } else {
                alert("28天");
            }
        }
        backDay();

        function LoopYear(year) {
            var flag = false;
            if (year % 4 == 0 && year != 100 || year % 400 == 0) {
                flag = true;
            }
            return flag;
        }
    </script>

</body>

</html>

函数的两种实现方法

             // 一
        function fn() {}
        fn()
            //    二
        var fn = function() {}
        fn()

作用域

js的作用域就是代码名字再某个范围内起作用和效果，并且是为了提高程序的可靠性更重要是减少命名规范

js发作用（es6）之前：

全局（在整个script标签或者是一个单独的js文件浏览器关闭才会销毁比较占内存

和局部作用域（是在函数内部）--函数的形参也是一个局部变量，当代码快运行结束后，就会被销毁，因此更节省空间

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>js作用域</title>
</head>

<body>
    <script>
        //   var onj = {};
        var obj = {
                name: 'j',
                age: 13,
                sex: '男',
                // 方法
                sayHello: function() {
                    console.log('sayhellohhhh');
                }
            }
            // 调用方法(1)
        console.log(obj.name);
        // 调用方法(2)
        console.log(obj['sex']);
        // /调用函数

        obj.sayHello()
    </script>

</body>

</html>

区别：变量，属性，函数，方法

利用new Object 创建对象

<!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>js作用域</title>
</head>

<body>
    <script>
        var obj = new Object(); // 创建一个空的对象
        obj.name = 'uuuuu';
        obj.sex = '男';
        obj.age = 23;
        obj.sayHello = function() {
                console.log('你好');
            }
            //调用
        console.log(obj.name);
        console.log(obj['name']);
        //调用函数
        obj.sayHello();
    </script>

</body>

</html>

利用构造函数创建对象 - 可以一次性创建多个对象，重复相同的代码

<!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>js作用域</title>
</head>

<body>
    <script>
        //构造函数封装的是对象
        //构造函数不需要return就可以返回结果
        //创建动物 的对象
        // 构造函数 首字母必须大写
        function Animal(name, age, sex) {
            // this指定当前函数，因为构造函数不止一个
            this.names = name;
            this.ages = age;
            this.sexes = sex;
            this.sayMiao = function(sang) {
                console.log(sang);
            }
        }
        var lg = new Animal('汪', 12, '男');
        //把整个对象都获取到了
        console.log(lg);
        // 获取单个值
        console.log(lg.names);
        console.log(lg['ages']);
        // 调用函数
        lg.sayMiao('喵~')
            //创建构造函数必须使用new
        var lglg = new Animal('喵', 3, '幼');
        console.log(lglg.names);
        console.log(lglg['ages']);
    </script>

</body>

</html>

new 关键字

遍历对象 ---构造函数是无序的

for..in 可以遍历数组或者对象

<!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>js作用域</title>
</head>

<body>
    <script>
        function Hero(name, type, blood) {
            this.names = name;
            this.types = type;
            this.bloods = blood;
            this.attacks = function(attack) {
                console.log(attack);
            }
        }
        var hero = new Hero('廉颇', '力量型', '5000ml');
        for (var k in hero) {
            console.log(k); // 得到属性名称 ：names，types…… 
            console.log(hero[k]); // 得到属性值
        }
    </script>

</body>

</html>

案例：简易计算器

内置对象

内置对象：js'自带属性

查阅文档

MDN : MDN

文档只要带了[]就说明可以写也可以不用写

Math对象

不是一个构造函数不需要new 直接使用即可

 <script>
        // 圆周率
        console.log(Math.PI);
        // 求最大值 如果有字符串那么返回值为nan
        console.log(Math.max(1, 5, 4, 74, 43));
        console.log(Math.max(-1, -199));
        console.log(Math.max()); //infinity
    </script>

案例：

<script>
        //利用对象封装自己的数学对象包括pi ， 最大值 ， 求最小值
        var maths = {
            pi: 3.141592653,
            max: function() {
                var maxs = arguments[0];
                for (var i = 0; i < arguments.length; i++) {
                    if (arguments[i] > maxs) {
                        maxs = arguments[i];
                    }
                }
                return maxs;
            },
            min: function() {
                var mins = arguments[0];
                for (var i = 0; i < arguments.length; i++) {
                    if (arguments[i] < mins) {
                        mins = arguments[i];
                    }
                }
                return mins;
            }
        }
        console.log(maths.pi);
        console.log(maths.max(1, 3, 5));
        console.log(maths.min(2, 1, 4));
    </script>

绝对值：反的取正

随机数random()---查阅文档

 <script>
        // 随机返回小数
        console.log(Math.random());
        console.log(Math.random());
        console.log(Math.random());
        console.log(Math.random() + 10);
        // 随机整数两个数之间并且包含两个数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRandom(2, 7));
    </script>

随机点名

 <script>
        // 随机整数两个数之间并且包含两个数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRandom(2, 7));
        //随机点名
        var arr = ['aas', 'adf', 'wrt', 'agsfad'];
        console.log(arr[getRandom(0, arr.length - 1)]);
    </script>

DOM

操作元素--自定义属性的操作

获取属性值：

a.用element.属性 ---获取内置属性值（元素本身自带属性）

 <div id="demo"></div>
    <script>
        // 获取元素
        var div = document.querySelector('div');
        // 打印元素
        //第一个方法
        console.log(demo.id);
        //第二个方法        
        console.log(div.getAttribute('id'));
    </script>

b.用element.getAttribute('属性') ---主要获取自定义的属性but也可以获取内置属性值

H5新增自定义属性：

1.凡是用自定义属性都必须用data-命名-----》element.getAttribute('data-属性')

2.获取自定义属性的第二种方法----》element.dataset.属性 or element.dataset["属性"]; 注释：此方法不需要在属性前添加data //存在兼容性问题 ie11 ↑才兼容

如果自定义属性名称存在如 data-list-name这样格式的，element.dataset.属性 or element.dataset["属性"]中的属性必须采用驼峰命名法，而其余的方法不用：

<div data-list-name="hhhh"></div>
    <script>
        var div = document.querySelector('div'); 
        console.log(div.getAttribute("data-list-name"));
        console.log("----------------------------");
        console.log(div.dataset['listName']);
        console.log(div.dataset.listName);
    </script>

element.dataset.data-属性 or element.dataset["data - 属性"] X 错误的

<div id="demo" index="1"></div>
    <script>
        //获取自定义属性
        var div = document.querySelector('div')
        console.log(”index = “ + div.getAttribute('index'));
    </script>

更改属性值：

a.setAttribute("属性"，"更改的值")

b.element.属性 = "更改的值"

 <div id="demo" index="1" class="nav"></div>
    <script>
        //获取自定义属性
        var div = document.querySelector('div')

        console.log(" 更改前 -- index = " + div.getAttribute('index'));
        
        //第一种方法
        
        div.setAttribute('index', "2");

        //setAtrribute()设置className属性时具有特殊性 应改为class

        div.setAttribute('class', " NAVA")
      
        //第二种方法

      
       div.className = "xixi";
    </script>

移除属性

<div id="demo" index="1" class="nav"></div>
    <script>
        //获取自定义属性
        var div = document.querySelector('div')
            //移除属性 removeAttribute(属性)
        div.removeAttribute("index");
</script>

节点操作

利用节点层级关系获取元素：{

c:页面所有内容都是节点空格也算

a:利用父子兄弟节点关系获取元素

b:逻辑强，兼容性差，更简单噢

}

节点：{

使用：元素.childNodes[1/2/3].nodetype 例如：

元素节点 nodeType 为 1

属性节点 nodeType 为 2

文本节点 nodeType 为 3 （文本节点包括 ”文本空格换行“）

}

父级节点：node.parentNode

<div class="ddiv">
    <div class="box">
        <span class="spans">ddd</span>
    </div>
   </div>
    <script>
        var spans = document.querySelector('.spans');
        //   得到div 查找的时最近的父节点 box 不是 ddiv
        console.log(spans.parentNode);
    </script>

子级节点：

<!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>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        //   得到div 查找的时最近的父节点 box 不是 ddiv
        console.log(ul.childNodes); //获取到的是所有的子节点 包括 元素节点 文本节点......
        console.log(ul.childNodes[0]); //获取到文本节点
        console.log(ul.children); //获取到所有的子元素节点li
    </script>
</body>

</html>

<!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>
    <ol>
        <li>1111111</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>555555555</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        //获取第一个节点
        console.log(ol.firstChild);//获取第一个节点 不管是文本还是元素节点,所以它获取到的是一个文本节点
        console.log(ol.firstElementChild);//获取到第一个子元素节点   <li>1111111</li> 存在兼容性问题
        console.log(ol.children[0]);//获取到第一个子元素节点   <li>1111111</li>  最好的
        //获取最后个节点
        console.log(ol.lastChild);//获取最后一个节点 不管是文本还是元素节点所以它获取到的是一个文本节点
        console.log(ol.lastElementChild); //获取到最后一个元素节点    <li>555555555</li>存在兼容性问题
        console.log(ol.children.length - 1);//获取到最后一个元素节点    <li>555555555</li> 最好的
    </script>
</body>

</html>

m0_56735463

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVASCRIPT

DOM操作元素--自定义属性的操作获取属性值：a.用element.属性 ---获取内置属性值（元素本身自带属性） <div id="demo"></div> <script> // 获取元素 var div = document.querySelector('div'); ...
复制链接

扫一扫

专栏目录