web第六天-CSDN博客

本文链接：https://blog.csdn.net/sjsyg/article/details/131708789

函数

//函数必须进行调用，才会执行
sayHi()
let age = 21

//函数要有返回值，一定要添加return关键字，否则返回值为undefined
function getSum(){
	
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kHvrHbVS-1689243141493)(C:\Users\86189\AppData\Roaming\Typora\typora-user-images\image-20230712093750334.png)]

匿名函数

<script>
    function sayHi(fn){
        fn()
        console.log('nihao')
    }
    function sayHello(){
        console.log('lala')
    }
    sayHi(sayHello)
</script>

匿名表达式

<script>
    let a = function getSum(){
        console.log('dada')
        a()
    }
    立即执行函数
    (function(){console.log('laoli')})()
    //(function(){console.log('ll')}())
</script>

值传递、引用传递

值传递
<script>
    let a = 10
    let b = 20
    function change(x , y){
        x = 30
        y = 50
    }
    change(a , b);
    alert(a + "--" + b)
</script>
<script>
引用传递
	let arr = [1,3,4,5]
	function change2(a){
		a.push(1000)
	}
    change2(arr)
    alert(arr)
</script>

默认值参数

<script>
    function getCir(r,PI=3.14){
        return PI*r*r
    }
    let a = getCir(3)
    getCir()
</script>

箭头函数

<script>
    //setInterval(function(){
    //	console.log('i love u')
    //},100)
    setInterval(a => console,log('i hate u'),100)
</script>

递归函数

<script>
    function jiecheng(n){
        if a === 1{
            return a = 1
        }
        else{
            return n*jiecheng(n - 1)
        }
    }
    let a = jiecheng(9)
    alert(a)
</script>

数组遍历

<script>
    let arr = ['a',2,3,4,5,6]
    for(let i = 0;i < arr;i++){
        console.log(arr[i])
	}
</script>

字符串的常见方法

<script>
    let str = '你是mmm'
    console.log(str.split('w'))
    console.log(str.substring(2,4))
    console.log(str.starsWith('你'))
    console.log(str.endsWith('你'))
    console.log(str.includs('w'))
</script>

对象

<script>
    //let arr=[160,160]
    let obj = {
        uname:'zhangfei',
        age:21,
        gender:'nan'
	}
    //console.log(obj)
    //查找对象元素
    console.log(obj.uname)
    console.log(obj['age'])
    
    //let obj2 = new Object()
    
    let obj2={
        uname:'liudehua',
        age:60,
        sing:fuction(){
        	console.log('ladfel')
    	}
    }
    obj2.sing
</script>

对象的增删改查

<script>
    //let arr=[160,160]
    let obj = {
        uname:'zhangfei',
        age:21,
        gender:'nan'
	}
   //改
    obj2.uname = 'GGBond'
    console.log(obj)
    //增
    obj.sing = function(){
        console.log('xing~')
    }
    //删
    delete obj.gender
    console.log(obj)
</script>

对象的遍历

<script>
    //let arr=[160,160]
    let obj = {
        uname:'zhangfei',
        age:21,
        gender:'nan'
	}
   for (let k in obj){
       console.log(k)
       console.log(obj[k])
   }
</script>

数组对象

<script>
    let arrObj =
        [
            {
                uname:'zs',
                age:21
            }
            {
            	uname:'jj'
            	age:52
            }
            {
            	uname:'ls'
            	age:11
            }
        ]
    console.log(arrObj)
    
    for(let i = 0;i < arrObj.length;i++){
        for(let k in arrObj[i]){
            console.log(arrObj[i][k])
        }
    }
</script>

math内置对象

<script>
    console.log(Math.E)
    console.log(Math.PI)
    //Math.ceil向上取整
    
    console.log(Math.ceil(3.1415))
    //Math.floor向下取整
    console.log(Math.floor(3.1415))
    //Math.abs 绝对值
    console.log(Math.abs(-3.12))
    //pow
    console.log(Math.pow(3.12,10))
    //开平方根
    console.log(Math.sqrt(9))
    //随机数
    console.log(Math.random())
</script>

日期内置对象

<script>
    let data = new Date()
    //alert(date)
    
    let year = date.getFullYear()
    month从零开始
    let month = date.getMonth() + 1
    let day = date.getDate()
    let hh = date.getHours()
    let mm = date.getMinutes()
    let ss = date.getSeconds()
    获取星期
    let gg = date.getDay()
    
    document.write(`${year}年-${month}月-${day}日  ${hh}时-${mm}分-${ss}秒`)
    
    let number=new Number()
    let a = 3.234334
    alert(a.toFixed)
</script>

d o m

<script>
    const btn = document.querySelector('button')
    console.log(typeof(btn))
</script>

获取元素的方法

<div>
    盒子
</div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    document.querySelector('.two')
	console.log(li2)
    const li = document.querySelector('li')
    console.log(li)
    document.querySelectorAll将所有匹配的元素全部获取到，并存放到伪数组
    const lis = document.querySelectorAll('li')
    console.log(lis)
    for(let i = 0;i<lis.length;i++){
        console.log(lis[i])
	}
    const li3=document.querySelevtor('ul li:nth-cild(3)')
    console.log(li3)
    console.log(document.getElementsByTagName('div'))
    console.log(document.getElementsByID('four'))
    console.log(document.getElementsByClassName('toe'))
</script>

修改元素内容

<div class = 'one'>盒子</div>
<div class = 'two'>盒子</div>
<script>
    1#获取元素
    const box1 = document.querySelector('.one')
    const box1 = document.querySelector('.two')
    console.log(box1)
    console.log(box2)
    2#操作
    box1.innerText='jiantji'
    box2.innerHTML='chengong'
</script>

修改元素属性

<img src="" alt="刘德华" title="刘德华">
<input type='text' placehoder='adf' readonly>
<button disabled>tongyi</button>
<script>
    //获取元素 
    const img = document.querySelector('img')
    const ipt = document.querySelector('input')
    const btn = document.querySelector('button')
    //改元素属性 对象.属性=值
    img.src=""
	ipt.type="password"
    ipt.placehoder = "dada"
    ipt.readOnly = false
    btn.disabled = false
</script>

修改元素样式属性

<style>
    .box1{
        width:300px;
        height:300px;
        background-color:red;
        font-size:50px;
    }
    
</style>
<div class=.box1>
    1111
</div>
<div class=.box2>1111</div>
<script>
    //1、获取元素
    const div = document.querySelector('.box1')
    const box2 = document.querySelector('.box2')
    //2、修改样式
    div.style.width = '500px'
    div.style.fontSize='16px'
    div.style.backgroundColor='pink'
    //3、通过添加类名
    className会覆盖本来的类名
    box2.className = 'box1'
    添加类名
    box2.classList.add('box1')
    删除类名
    box2.classList.remove('box1')
    切换类名（有就删除，没有就添加）
    box2.classList.toggle('box1')
</script>

定时器

<script>
    setTimeout\setInterval 定时器
    setTimeout：某段代码或函数在多久之后执行
    setTimeout(code||function,time(ms))
    返回值是一个整数，代表定时器编码
    let timer = setTimeout('console.log("我是一秒之后执行的代码")',1000);
    console.log(timer)
    
    let timer2 = setTimeout('console.log("我是一秒之后执行的代码")',4000);
    console.log(timer2)
    传的是函数名
   	let timer3 = setTimeout(
        fn,3000
    )
    function fn(){
        console.log('66666')
    }
    setTimeout(函数或一段代码，延迟时间，实参)
    let timer4 = setTimeout(function(a,b)){
    	console.log(a + b)                       
    },2000,1,4)
    let obj={
        uname:'gouxin',
        a:3,
        b:4,
        sum:function(){
            console.log(this.a)
        }
    }
    obj.sum()
    setTimeout(obj.sum,1000)
    定时器的第一个参数如果是对象方法，this不在指向对象，指向全局环境
    setTimeout(function(){obj.sum()},1000)
    setTimeoutobj.sum.bind(obj),1000)
    
    setInterval 间隔一段时间，将代码或者函数执行一次
</script>