对象，函数，定时器

h54211

已于 2022-12-04 20:30:25 修改

阅读量123

点赞数

文章标签： java javascript 开发语言

于 2022-12-04 20:28:27 首次发布

本文链接：https://blog.csdn.net/h54211/article/details/128176458

版权

1、对象

var obj = {

name:'..',

age:18,

hobby:'唱歌'

}

获取对象的值 var 变量名 = 对象.属性点操作符拿属性的时候，不能加引号，不能是变量 []操作符可以放变量或者引号的写法

获取对象 obj.name obj["name"]

设置对象的值对象.属性 = 值对象[属性] = 值

遍历对象

for..in循环

对象没有长度

for(var key in obj) {

console.log(obj[key])

}
<script>
         var obj = {
            'name': 'hjl',
            'age': 22,
            'hobby': '唱歌'
        }

        for(var k in obj) {
            console.log(k);
            console.log(obj[k]);
        }
     </script>

2.this

事件处理函数中的this指的就是发生事件的这个元素（点谁this就是谁）

 <script>
         var btn = document.getElementsByTagName('button')

         btn[0].onclick = function() {
            console.log(this);
         }
         btn[1].onclick = function() {
            console.log(this);
         }
    </script>

3、自定义属性 ---多组开关（多个元素，每个元素都对应两种状态的切换）

元素的属性：元素.属性

固有的属性： id class title href

自定义属性: 程序员为了方便操作，自己给元素设置的属性 (自定义属性在元素身上我们看不到，但是我们可以通过元素.属性来拿到)

<!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" id="box1"></div>
    <button>获取元素的属性</button>
    <button>设置元素的属性</button>
    <!-- 
        元素的属性：  元素.属性
            固有的属性： id  class  title   href
            自定义属性: 程序员为了方便操作，自己给元素设置的属性  (自定义属性在元素身上我们看不到，但是我们可以通过元素.属性来拿到)
     -->
     <script>
        var btn = document.getElementsByTagName('button')
        var box = document.getElementsByClassName('box')[0]

        btn[0].onclick = function() {
            console.log(box.id);
            console.log(box.className);
            console.log(box.a);
        }
        btn[1].onclick = function() {
            box.a = '111'
        }
     </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>
    <style>
        * {
            margin: 0;
        }
        .wrap {
            width: 300px;
        }
        .top {
            height: 30px;
            background-color: aqua;
        }
        .con {
            display: none;
        }

    </style>
</head>
<body>
    <div class="wrap">
        <div class="top">我的好友</div>
        <div class="con">
            <p>张三</p>
            <p>李四</p>
            <p>王二麻子</p>
        </div>
    </div>
    <div class="wrap">
        <div class="top">我的好友</div>
        <div class="con">
            <p>张三</p>
            <p>李四</p>
            <p>王二麻子</p>
        </div>
    </div>
    <div class="wrap">
        <div class="top">我的好友</div>
        <div class="con">
            <p>张三</p>
            <p>李四</p>
            <p>王二麻子</p>
        </div>
    </div>
    <div class="wrap">
        <div class="top">我的好友</div>
        <div class="con">
            <p>张三</p>
            <p>李四</p>
            <p>王二麻子</p>
        </div>
    </div>

    <script>
        var wrap = document.getElementsByClassName('wrap');
        // var tag = true
        // wrap[0].onclick = function() {
        //     var con = this.getElementsByClassName('con')[0]
        //     // console.log(con);
        //     if(tag) {
        //         con.style.display = 'block'
        //         tag = false
        //     } else {
        //         con.style.display = 'none'
        //         tag = true
        //     }
        // }
        // wrap[1].onclick = function() {
        //     var con = this.getElementsByClassName('con')[0]
        //     // console.log(con);
        //     if(tag) {
        //         con.style.display = 'block'
        //         tag = false
        //     } else {
        //         con.style.display = 'none'
        //         tag = true
        //     }
        // }
        // wrap[2].onclick = function() {
        //     var con = this.getElementsByClassName('con')[0]
        //     // console.log(con);
        //     if(tag) {
        //         con.style.display = 'block'
        //         tag = false
        //     } else {
        //         con.style.display = 'none'
        //         tag = true
        //     }
        // }
        // wrap[3].onclick = function() {
        //     var con = this.getElementsByClassName('con')[0]
        //     // console.log(con);
        //     if(tag) {
        //         con.style.display = 'block'
        //         tag = false
        //     } else {
        //         con.style.display = 'none'
        //         tag = true
        //     }
        // }


        for(var i = 0;i<wrap.length;i++) {
            wrap[i].tag = true
            wrap[i].onclick = function() {
                var con = this.getElementsByClassName('con')[0]
                // console.log(con);
                if(this.tag) {
                    con.style.display = 'block'
                    this.tag = false
                } else {
                    con.style.display = 'none'
                    this.tag = true
                }
            }
        }
    </script>
</body>
</html>

4、自定义索引---（小圆点切图、选项卡等）

<!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>
    <style>
        .box {
            float: left;
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        var box = document.getElementsByClassName('box')
        for(var i = 0;i<box.length;i++) {
            // console.log(i);  //0....9
            box[i].index = i;   // 记录下标
            box[i].onclick = function() {
                //console.log(i);  //10 
                console.log(this.index)
            }
        }
    </script>
</body>
</html>

5、函数

函数：指的就是将大量重复的代码整合在一起，给它起个名字，需要的时候我们去调用它

具体的使用场景：

1、封装

function changeImg() {

img.src = arr[num]

}

2、对象的方法其实可以看成是 对象所拥有的函数 。也就是说这个方法，是属于这个对象的函数。调用对象的方法，和调用函数差不多，只要在前面加上所属对象和一个点对象的方法

var obj = {

name:'hjl',

age:22,

hobby:'唱歌',

skill: function() {

console.log('请假')

console.log('唱歌')

console.log('敲代码')

console.log('跳舞')

}

}

3、事件处理函数来使用

box.onclick = function() {

}

函数的声明:

1、普通声明

function 函数名字() {

大量重复的代码块 | 函数体

}

2、表达式声明

var 变量 = function() {

大量重复的代码块 | 函数体

}

函数的封装：

先实现功能

将类似的代码整合在一起，给它放在函数中，起个名字

将可能发生变化的值用参数代替

验证功能是否正常

函数实现代码的复用：

先实现只有一个的功能

将类似的代码整合在一起，给它放在函数中，起个名字

将父元素当作参数代替

验证功能

函数的调用：

函数名()

// 函数只声明是不会执行的，只有在调用的时候才会被执行

// 函数调用可以重复调用

1、什么时候用函数的参数

函数中出现了不确定的值的时候，我们就需要用到参数

2、形参

形式参数：

function 函数名(形参) { }

3、实参

实际参数

函数调用的时候我们传递的参数就是实参

4、多个参数

多个参数中间用多个隔开

5、arguments 实参集合,相当于是一个数组（伪数组）

函数的注意点

1、普通函数中的this指的是window

2、参数个数问题

实参和形参个数一样：一一对应

实参比形参少：对应不上的这个形参就是undefined

实参比形参多：多余的实参忽略不计

3、函数重名问题:

后面会覆盖前面的

4、函数的参数类型 : 除了null和undefined作为参数没有意义，那么其他的数据类型都可以

函数本身就相当于一个表达式，如果我们需要一个函数有结果输出出来，我们需要return\

return：函数的返回值，还会阻断函数中代码的运行

6、作用域

作用域：一个变量起作用的范围

分为全局作用域、局部作用域

1、全局作用域：全局变量可以在任何地方都能被访问

2、局部作用域：函数内部就是一个局部作用域，局部变量，局部变量只能

在函数内部使用，函数外访问不了

7、作用域链-----变量查找的机制

// 会先在自己的作用域范围内寻找，如果有就直接拿来用，没有就往上寻找，如果在全局作用域下也没有，就会报错（变量 id not defined）

<script>
        // var a = 10
        // function fn() {
        //     var a = 20
        //     console.log(a); 
        // }
        // fn()

        var a = 20
        function fun1() {
            var a = 30
            console.log(a);  //30, 自己作业域里面有a，就拿来直接用 30
            var b = 10
            console.log(b);  //10 同上
            function fun2() {
                console.log(a);  //30 自己作用域里面没有a，往上找，上一级作用域里面有个a-30
                console.log(b);  //undefined
                var b = 50
                console.log(b);  //50
            }
            fun2()
        }
        fun1()
        // console.log(m);
        // var m = 30
        // console.log(m);
    </script>

8、预解析

预解析：

js是一个解释型语言

js运行代码的过程：解释代码（预解析|变量提升）、执行代码

预解析（变量提升）的过程：

1、找var关键字 undefined

2、找普通函数将整个函数体存起来 function fn() {}

9、获取元素的样式

<!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>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById('box')
        // 获取行间样式
        // console.log(box.style.width);
        // 宽度没有写在行间样式中，我们写在了内部样式中通过刚才的方法我们无法拿到
        // 获取非行间样式   
        // 标准浏览器(除ie8-)： getComputedStyle(元素).css属性
        // ie浏览器：    元素.currentStyle.css属性
        // console.log(window);
        // var w = getComputedStyle(box).width
        // var h = getComputedStyle(box).height
        // var bg = getComputedStyle(box).backgroundColor
        // var fs = getComputedStyle(box).fontSize
        // console.log(w,h,bg,fs);
        // var w = box.currentStyle.width
        // console.log(w);
        if(window.getComputedStyle) {
            //标准浏览器
            var w = getComputedStyle(box).width
        }else {
            // ie浏览器
            var w = box.currentStyle.width
        }
        console.log(w);

        // 不管是哪个元素,不管拿哪个属性，不管通过什么浏览器来访问都可以得到结果
    </script>
</body>
</html>

9、定时器

1、开启定时器：

延时定时器：延迟一段时间执行的定时器，只执行一次

setTimeout(函数,间隔时间) 间隔时间的单位是ms，1s = 1000ms

间歇定时器：每隔一段时间就要执行一次的定时器

setInterval(函数，间隔时间)

2、关闭定时器

clearTimeout(定时器的id)

clearInterval(定时器的id)

<script>
        setTimeout(function() {
            console.log('我被打印了');
        },2000)
    </script>

 <script>
        setInterval(function(){
            console.log('111');
        },2000)
    </script>

h54211

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫