jQuery习题

182 阅读1分钟

三、网页整屏切换效果 首先画出样式

<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .container {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    .container li {
        width: 100vw;
        height: 100vh;
        /* transform:translateY(-100vh); */
        transition: 1s;
    }
</style>
 <ul class="container">
    <li style="background-color:red;"></li>
    <li style="background-color:purple;"></li>
    <li style="background-color:blue;"></li>
    <li style="background-color:green;"></li>
    <li style="background-color:grey;"></li>
</ul>

 window.onmousewheel = function (e) { //适配谷歌
        let isDown = e.wheelDelta < 0 //wheelDelra值小于0 滚轮向下
        change(isDown);
    }
    let endTime = new Date(); //函数节流
    function change(isDown) {
        console.log(isDown ? '下' : '上')
        if (new Date() - endTime < 500) return console.log('i am busy')
        //函数节流 当响应时间小于500ms时 返回i am busy
        if (isDown) {
            i++
            if (i > 3) return //当i的值大于3时 返回
        } else {//的值大于3时 返回
            i--
            if (i < 0) return//当i的值小于0时 返回
        }
        $('.container li').css('transform', `translateY(-${i*100}vh)`)
        //改变li的属性 使其向上移动(i*100)px的距离
    }

四、判断一个字符是否以元音结尾(a、o、e、i、u)

function checkEndsWithYY(str) {
        // let yylist = ['a', 'o', 'e', 'i', 'u']
        // yylist = yylist.concat(yylist.map(r => r.toUpperCase()))
        //map方法 遍历数组 
        // return yylist.some(r => str.endsWith(r.toUpperCase()))
        //some方法 查询str是否以元音结尾(包含大小写)
        // return yylist.includes(str[str.length - 1].toUpperCase())
        //incloudes方法 查询数组的最后一位 是否是元音(包含大小写)
        return /[aoeiu]$/i.test(str)
        //正则表达式 检查str是否以元音结尾(包含大小写)
    }	

    console.log(checkEndsWithYY('simba'));
    console.log(checkEndsWithYY('ace'));
    console.log(checkEndsWithYY('robin'));
    

五、extend()

    let obj={
        sayHi(){
            console.log('hi')
        },
        sayMorning(){
            console.log('morning')
        }
    }
    let zz={
        age:20,
        eat(){
            console.log("吃饭");
        }
    }
    $.extend(obj.sayHi()) //打印“hi”
    
	//将obj里面的所有元素,给$克隆一份
	$.extend(obj) 

	如果是多个参数,则将后面的参数对象里面的元素都给第一个参数克隆一份
    // $.extend(obj, zz)