web前端6

WEB前端

DAY6

• 函数

//函数必须进行调用才会执行
function sayHi(){
    consloe.log('hello')
}
sayHi()

//函数要有返回值，一定要添加return关键字，否则返回值为undefined
function getSum(a,b){
    //consloe.log(a+b)
    //return a+b
    console.log(arguments)
    //argument 接收所有实参，并保存到argument数组
    let sum = 0
    for(let i in argument){
        sum + =arguments[i]
    }
    return sum
}
let e = getSum(a=2,b=3)
getSum(3,4)
console.log(e)

• 匿名函数

//function sayHi(fn{
//	fu()
//	console .log('nihao')
//}
//function (){
//    console.log('jiangjia')
//}
//sayHi(sayhello)
setInterval(function(){
    console.log('')
}

• 函数表达式

//let a = function getSum(){
//    console.log('')
//}
//a()

//立即执行函数
(function(){console.log('123')})

• 值传递，引用传递

//值传递
let a = 10
let b = 20
function change(x,y){
	x=30;
	y=50;
}
change(a,b);
alert(a + "--" + b)

//引用传递 传地址，发生改变
let arr = [1,3,4,5]
function change2(a){
    a.push(1000)
}
change2(arr)
alert(arr)

• 默认值参数

function getCir(r,PI = 3.14){
    return PI * r * r
}
let a = getCir(3)
console.log(a)

• 箭头函数

setInterval(()=> console.log('111'),1000)
    

• 递归

//求9！
//9*8!
function jiecheng(n){
    if(n === 1){
        return 1
    }else{
        return n* jiecheng(n-1)
    }
}
let a = jiecheng(2)
alert(9)

• 数组遍历

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

• 字符串的常见方法

let str = new String()
        // let str = '你是who'
        console.log(str.split('w'))
        console.log(str.substring(2, 4))
        console.log(str.startsWith('你'))
        console.log(str.endsWith('你'))
        console.log(str.includes('w'))

• 对象

 // 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: '刘德华',
            age: 60,
            sing: function () {
                console.log('我要唱歌了')
            }
        }
        obj2.sing()

• 对象的增删查改

let obj = {
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }
        // obj.uname
        // obj['age']

        // 改：对象.属性名
        obj.uname = 'GGBond'

        // 增加  对象.新属性名
        obj.sing = function () {
            console.log('sing~')
        }
        // delete 对象.属性名
        delete obj.gender
        console.log(obj)

• 对象的遍历

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

• 数组对象

 let arrObj =
            [
                {
                    uname: 'zs',
                    age: 21
                },
                {
                    uname: 'jiangjia',
                    age: 33
                },
                {
                    uname: 'lisi',
                    age: 12
                }
            ]
        console.log(arrObj)
        // arrObj[1]['uname']
        for (let i = 0; i < arrObj.length; i++) {
            for (let k in arrObj[i]) {
                console.log(arrObj[i][k])
            }
        }

• Math内置对象

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.floor(Math.random() * 11) + 2)
        let random = Math.floor(Math.random() * (10 - 2 + 1)) + 2
        console.log(random)

• 日期内置对象

//let date = new Date()
//alert(date)

let year = date.getFullyear()
//alert(year)

let month = date.getMonth() + 1
//alert(month)

let day = date.getDate()
//alert(day)

let hh = date.getHours()
let mm = date.getMinutes()
let ss = date.getSeconds()

let gg= date.getDay()
alert(gg)

let a = 3.323245
laert(a.toFixed(4))//保留小数位

ducument.write(`${year}年-${month}月-${day}日-${hh}时-${mm}分-${ss}秒`)

• dom

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

• 获取元素的方法

 // 1、通过css选择器获取             ('字符串')    :狂（嘎嘎）推荐
        const li2 = 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.querySelector('ul li:nth-child(3)')
        console.log(li3)


        // 其他
        console.log(document.getElementsByTagName('div'))
        console.log(document.getElementById('four'))
        console.log(document.getElementsByClassName('two'))

• 修改元素内容

<div class="one">我是一个即将被更改的盒子</div>
    <div class="two">我是一个即将被更改的盒子</div>
    <script>
        // 1、获取元素
        const box1 = document.querySelector('.one')
        const box2 = document.querySelector('.two')
        console.log(box1)
        console.log(box2)
        // 2、操作
        box1.innerText = `<h1>jiangjia</h1>`
        box2.innerHTML = `<h1>chensongjie</h1>`

• 修改元素属性

<img src="../images/1.webp" alt="刘德华" title="刘德华">
    <input type="text" placeholder="wedjed" readonly>
    <button disabled>同意该协议</button>
    <script>
        // 1、获取元素
        const img = document.querySelector('img')
        const ipt = document.querySelector('input')
        const btn = document.querySelector('button')
        // 改元素属性   对象.属性=值
        img.src = "../images/2.webp"
        img.title = "我是个大帅哥"

        ipt.type = "password"
        ipt.placeholder = "请输入用户名"
        ipt.readOnly = false
        btn.disabled = false

• 修改元素样式

<img src="../images/1.webp" alt="刘德华" title="刘德华">
    <input type="text" placeholder="wedjed" readonly>
    <button disabled>同意该协议</button>
    <script>
        // 1、获取元素
        const img = document.querySelector('img')
        const ipt = document.querySelector('input')
        const btn = document.querySelector('button')
        // 改元素属性   对象.属性=值
        img.src = "../images/2.webp"
        img.title = "我是个大帅哥"

        ipt.type = "password"
        ipt.placeholder = "请输入用户名"
        ipt.readOnly = false
        btn.disabled = false

• 修改元素样式属性

<div class="box1">1111</div>
    <div class="box2 box1"></div>
    <script>
        // 1、获取元素
        const box2 = document.querySelector('.box2')
        const div = document.querySelector('.box1')
        // 2、通过style修改样式
        div.style.width = '500px'
        div.style.fontSize = '16px'
        div.style.backgroundColor = 'pink'
        // 3、通过添加类名 calssName会将原来的类名删除掉，不建议使用

        // box2.className = 'box1'

        // classlist.add（'类名'）追加
        box2.classList.add('box1')
        // box2.classList.remove('box1')    移除
        box2.classList.toggle('box1')        //切换：有则删除，没有则添加

• 定时器

//setTime\setInterval  定时器
//setTimeout：某段代码或函数在多久后执行
//setTimeout(code|function,time(单位是毫秒))
//返回值是一个整数，代表定时器编码
let timer = setTimeout('console.log("我是一秒之后执行的代码")'，2000)
// console.log(timer)

//传的是参数
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不再指向对象，指向全局环境