JavaScript入门

最新推荐文章于 2024-04-29 17:01:02 发布
最新推荐文章于 2024-04-29 17:01:02 发布
阅读量500 收藏 2
点赞数
文章标签： javascript css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43716830/article/details/124630247
版权

文章目录

初识JS

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

JS的引入

1.行内式的js 直接写到元素的内部

<body>
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>

2.内嵌式的js

    <script>
        alert('zyj');
    </script>

3.外部js

<script src="my.js"></script>

JS输入输出语句

在这里插入图片描述

变量的命名规范

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

运算符的优先级

在这里插入图片描述

断点调试

在这里插入图片描述

arguments的使用

在这里插入图片描述
在这里插入图片描述

JS预解析

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

对象

在这里插入图片描述
创建对象的第一种方法
在这里插入图片描述
创建对象的第二种方法
在这里插入图片描述
创建对象的第三种方法
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

new关键字的执行过程
在这里插入图片描述
对象的遍历
在这里插入图片描述

Web APIs

在这里插入图片描述

DOM
在这里插入图片描述

获取元素

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
querySelector获取
在这里插入图片描述
在这里插入图片描述

事件

事件三要素：
1.事件源：事件被触发的对象
2.事件类型：如何触发 什么事件
3.事件处理程序：通过一个函数赋值的方式完成
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

例：在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

排它思想

在这里插入图片描述

例：百度换肤

在这里插入图片描述

getAttribute和setAttribute

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

tab栏切换

在这里插入图片描述


<!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>
        .tab{
          margin: 100px auto;
          width: 800px;
          height: 100px;
        }
        .tab_list{
            width: 800px;
            height: 40px;
            background-color: #ccc;
        }
        .tab_list ul li{
            display: block;
            height: 40px;
            line-height: 40px;
            float: left;
            margin-left: 50px;
            list-style: none;
        }
        .current{
            background-color: red;
            color: #fff;
        }
        .tab_con div{
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(50000)</li>
                <li>手机社区</li>
            </ul>
        </div>

        <div class="tab_con">
            <div class="item" style="display:block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        var tab_list=document.querySelector('.tab_list');
        var lis =tab_list.querySelectorAll('li');
        var items=document.querySelectorAll('.item')
        for(var i=0;i<lis.length;i++){
            lis[i].setAttribute('index',i)
            lis[i].onclick=function(){
                for(var i=0;i<lis.length;i++){
                    lis[i].className='';
                }
                this.className='current';
                var index=this.getAttribute('index');
                for(var i=0;i<items.length;i++)
                {
                    items[i].style.display='none'
                }
                items[index].style.display='block'
            }
        }
    </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>
        .nav{
            margin: 100px auto;
            height: 100px;
            background-color: pink;
        }
        .nav>li{
            float: left;
            margin-left: 30px;
        }
        .nav li ul{
            display: none;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
        <ul>
            <li>
                <a href="#">私信</a>
            </li>
            <li>
                <a href="#">评论</a>
            </li>
            <li>
                <a href="#">@我</a>
            </li>
        </ul>
        </li>
        <li>
            <a href="#">微博</a>
        <ul>
            <li>
                <a href="#">私信</a>
            </li>
            <li>
                <a href="#">评论</a>
            </li>
            <li>
                <a href="#">@我</a>
            </li>
        </ul>
        </li>
        <li>
            <a href="#">微博</a>
        <ul>
            <li>
                <a href="#">私信</a>
            </li>
            <li>
                <a href="#">评论</a>
            </li>
            <li>
                <a href="#">@我</a>
            </li>
        </ul>
        </li>
        <li>
            <a href="#">微博</a>
        <ul>
            <li>
                <a href="#">私信</a>
            </li>
            <li>
                <a href="#">评论</a>
            </li>
            <li>
                <a href="#">@我</a>
            </li>
        </ul>
        </li>
    </ul>
    <script>
        var nav=document.querySelector('.nav');
        var lis=nav.children;
        for(var i=0;i<lis.length;i++){
            lis[i].onmouseover=function(){
                this.children[1].style.display='block';
            }
            lis[i].onmouseout=function(){
                this.children[1].style.display='none';
            }
        }
    </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>
        ul li{
            width: 200px;
        }
        ul li a{
            float: right;
        }
    </style>
</head>
<body>
        <textarea name="" id=""cols="30" rows="10">请输入评论内容</textarea>
        <button>发布</button>
        <ul>
        </ul>
        <script>
            //1.获取元素
            var btn=document.querySelector('button');
            var text=document.querySelector('textarea');
            var ul=document.querySelector('ul');
            //2.注册事件
            text.onfocus=function(){
                text.value='';
            }
            btn.onclick=function(){
                if(text.value==''){
                    alert('您没有输入内容');
                    return false;
                }
                //1.创建元素
                var li=document.createElement('li');
                //先有li 才能赋值
                li.innerHTML=text.value+"<a href='javascript:;'>删除</a>";
                //2.添加元素
                ul.insertBefore(li,ul.children[0]);
                var del=document.querySelectorAll('a');
                //3.删除元素 删除的是当前链接的li 它的父亲
                for(var i=0;i<del.length;i++){
                del[i].onclick=function(){
                    //node.removeChild(child);删除的是li 当前a所在的li this.parentNode
                    ul.removeChild(this.parentNode);
                }
            }
        }
        </script>
</body>
</html>

动态生成表格案例

在这里插入图片描述

        var tbody=document.querySelector('tbody');
        for(var i=0;i<datas.length;i++){
            var tr=document.createElement('tr');
            tbody.appendChild(tr);
            for(var k in datas[i]){
                var td=document.createElement('td');
                td.innerHTML=datas[i][k];
                tr.appendChild(td);
            }
            var td=document.createElement('td');
            td.innerHTML='<a href="javascript:;">删除</a>';
            tr.appendChild(td);
        }
        var as=document.querySelectorAll('a');
        for(var i=0;i<as.length;i++){
            as[i].οnclick=function(){
                tbody.removeChild(this.parentNode.parentNode);
            }
        }

方法监听注册事件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

事件的删除

在这里插入图片描述

在这里插入图片描述

DOM事件流

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

事件对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

事件委托

在这里插入图片描述
在这里插入图片描述

其他常用的鼠标事件

在这里插入图片描述
在这里插入图片描述

跟随鼠标移动的图片

在这里插入图片描述

<!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>
        img{
            position: absolute;
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <img src="resourse/background.jpg" alt="">
    <script>
        var pic=document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            var x=e.pageX;
            var y=e.pageY;
            pic.style.left=x-150+'px';
            pic.style.top=y-100+'px';
        });
    </script>
</body>
</html>

常见的键盘事件

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

模拟京东快递单号查询

在这里插入图片描述
在这里插入图片描述

BOM基本概念

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

窗口加载事件

在这里插入图片描述
在这里插入图片描述

<!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>
        window.onload=function(){
        var btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            alert('点击我');
        })
    }
    </script>
        <button>点击</button>
</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>
        div{
            margin: 100px 300px;
        }
        div span{
            display: block;
            float: left;
            width: 50px;
            height: 50px;
            margin-left: 5px;
            line-height: 50px;
            text-align: center;
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
    <script>
        //1.获取元素
        var hour=document.querySelector('.hour')
        var minute=document.querySelector('.minute')
        var second=document.querySelector('.second')
        var inputTime=+new Date('2022-5-12 00:00:00');//返回的是用户输入时间总的毫秒数
        conutDown();//我们先调用一次这个函数，防止第一次刷新页面有空白
        //2.开启定时器
        setInterval(conutDown,1000);

        function conutDown(){
            var nowTime=+new Date(); //返回当前时间总的毫秒数
            var times=(inputTime-nowTime)/1000;//times是剩余时间总的秒数
            var h=parseInt(times/60/60%24);//时
            h=h<10?'0'+h:h;
            hour.innerHTML=h;//把剩余的小时给小时盒子
            var m=parseInt(times/60%60);//分
            m=m<10?'0'+m:m;
            minute.innerHTML=m;//把剩余的分钟给分钟盒子
            var s=parseInt(times%60);//当前的秒
            s=s<10?'0'+s:s;
            second.innerHTML=s;//把剩余的秒数给秒数盒子
        }
    </script>
</body>
</html>

JS执行机制

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

location对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5s之后自动跳转页面案例

<!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>
    <button>点击</button>
    <div></div>
    <script>
        var btn=document.querySelector('button');
        var div=document.querySelector('div');
        btn.addEventListener('click',function(){
            location.href='http://www.baidu.com'
        })
        var timer=5;
        setInterval(function(){
            if(timer==0){
                location.href='http://www.baidu.com';
            }else{
            div.innerHTML='您将在'+timer+'秒钟之后跳转百度';
            timer--;
            }
        },1000)
    </script>
</body>
</html>

获取url参数

在这里插入图片描述

<!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>
    <form action="index.html">
        用户名：<input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</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>
    <div></div>
    <script>
        console.log(location.search);//?uname=andy
        //1.先去掉？ substr('起始位置'，截取几个字符)
        var params=location.search.substr(1);
        console.log(params);
        //2.利用=把字符串分割成数组 split('=');
        var arr=params.split('=');
        //3.把数据写入div中
        var div=document.querySelector('div');
        div.innerHtml=arr[1]+'欢迎您';
    </script>
</body>
</html>

navigator对象

在这里插入图片描述

history对象

在这里插入图片描述

元素偏移量offset系列

在这里插入图片描述
在这里插入图片描述

拖动模块框

在这里插入图片描述

 <script>
        //1.获取元素
        var login=document.querySelector('.login');
        var mask=document.querySelector('.login-bg');
        var link=document.querySelector('#link');
        var closeBtn=document.querySelector('#closeBtn');
        var title=document.querySelector('#title');
        //2.点击弹出层这个链接 link 让mask和login显示出来
        link.addEventListener('click',function(){
            mask.style.display='block';
            login.style.display='block';
        })
        //3.点击closeBtn就隐藏mask和login
        closeBtn.addEventListener('click',function(){
            mask.style.display='none';
            login.style.display='none';
        })
        //4.开始拖拽
        //(1)当我们鼠标按下，就获得鼠标在盒子内的坐标
        title.addEventListener('mousedown',function(e){
            var x=e.pageX-login.offsetLeft;
            var y=e.pageY-login.offsetTop;
            //(2)鼠标移动的时候，把鼠标在页面中的坐标，减去鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove',move)

            function move(e){
                login.style.left=e.pageX-x+'px';
                login.style.top=e.pageY-y+'px';
            }
            //(3)鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup',function(){
                document.removeEventListener('mousemove',move);
            })
        })
    </script>

client

在这里插入图片描述

scroll

在这里插入图片描述

立即执行函数

立即执行函数的写法：

1.(function(){})();
2.(function(){}());

立即执行函数最大的作用就是 独立创建了一个作用域，里面的所有变量都是局部变量 不会有命名冲突的情况

仿淘宝侧边栏

在这里插入图片描述


<!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>
        .w{
            height: 5000px;
            width: 1300px;
        }
        .banner{
            height: 1000px;
            background-color: red;
        }
        .header{
            height: 172px;
            background-color: green;
        }
        .main{
            height: 1000px;
            background-color: yellowgreen;
        }
        .slider_bar{
            width:45px;
            height:130px;
            position:absolute;
            left:1310px;
            top:300px;
            background-color: pink;
        }
        span{
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="slider_bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体区域</div>
    <script>
        //1.获取元素
        var slider_bar=document.querySelector('.slider_bar');
        var banner=document.querySelector('.banner');
        var bannerTop=banner.offsetTop;
        //当我们的侧边栏固定定位之后应该变化的数值
        var slider_barTop=slider_bar.offsetTop-bannerTop;
        var main=document.querySelector('.main');
        var goBack=document.querySelector('.goBack');
        var mainTop=main.offsetTop;
        //2.页面滚动事件 scroll
        document.addEventListener('scroll',function(){
            //3.当我们页面被卷进去的头部大于等于了172此时 侧边栏就要改为固定定位
            if(window.pageYOffset>=bannerTop){
                slider_bar.style.position ='fixed';
                slider_bar.style.top=slider_barTop+'px';

            }else{
                slider_bar.style.position='absolute';
            }
            //4.当我们页面滚动到main盒子 就显示goback模块
            if(window.pageYOffset>=mainTop){
                goBack.style.display='block'

            }else{
                goBack.style.display='none';
            }
        })
        //3.当我们点击了返回顶部模块，就让窗口滚动到页面的最上方
        goBack.addEventListener('click',function(){
            window.scroll(0,0);
        })
    </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>
        div{
            position:absolute;
            height: 200px;
            width: 300px;
            background-color: pink;
        }
        span{
            position: absolute;
            top: 200px;
            left: 0;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div></div>
    <span></span>
    <script>
        //动画函数的封装
        function animate(obj,target){
            clearInterval(obj.timer)
            obj.timer= setInterval(function(){
            if(obj.offsetLeft>=target){
                //停止动画 本质是停止定时器
                clearInterval(obj.timer);
            }
            obj.style.left=target+'px';
        },10);
        }

        var div=document.querySelector('div');
        var span=document.querySelector('span');
        //调用函数
        animate(div,400,function(){})
        animate(span,400,function(){})
    </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;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    }
    .w{
        width: 720px;
        height: 455px;
        margin: 0 auto;
    }
    .main{
        width: 720px;
        height: 455px;
    }
    .focus{
        overflow: hidden;
        position: relative;
        width: 720px;
        height: 500px;
    }
    img{
        width: 720px;
        height: 455px;
    }
    .focus ul{
        position: absolute;
        top: 0;
        left: 0;
        width: 500%;
    }
    .focus ul li{
        float: left;
    }
    .arrow-l,.arrow-r{
        display: none;
        position: absolute;
        top: 50%;
        margin-top: -20px;
        width: 24px;
        height: 40px;
        background: rgba(0,0,0,0.3);
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 18px;
        z-index: 2;
    }
    .arrow-r{
        right: 0;
    }
    .circle li{
        z-index: 2;
        float: left;
        width: 8px;
        height: 8px;
        border: 2px solid rgba(22, 21, 21, 0.5);
        margin: 460px 50px;
        border-radius: 50%;
        cursor: pointer;
    }
    .current{
        background-color: red;
    }
    </style>
    <script>
         function animate(obj,target){
            clearInterval(obj.timer)
            obj.timer= setInterval(function(){
            if(obj.offsetLeft>=target){
                //停止动画 本质是停止定时器
                clearInterval(obj.timer);
            }
            obj.style.left=target+'px';
        },10);
        }
        window.addEventListener('load',function(){
            var arrow_l=document.querySelector('.arrow-l');
            var arrow_r=document.querySelector('.arrow-r');
            var focus=document.querySelector('.focus');
            var focusWidth=focus.offsetWidth;
            var circle=0;
            var num=0;
            //鼠标经过就显示左右按钮
            focus.addEventListener('mouseenter',function(){
                arrow_l.style.display='block';
                arrow_r.style.display='block';
                clearInterval(timer);
                timer=null;//停止自动播放
            })
            focus.addEventListener('mouseleave',function(){
                arrow_l.style.display='none';
                arrow_r.style.display='none';
                timer=setInterval(function(){
                    arrow_r.click();
                },5000)
            })
            //动态生成小圆圈 有几张图片，我就生成几个小圆圈
            var ul=focus.querySelector('ul');
            var ol=focus.querySelector('.circle');
            for(var i=0;i<ul.children.length;i++){
                //创建li 然后将li插入到ol中
                var li=document.createElement('li');
                //记录当前小圆圈的索引号 通过自定义属性来做
                li.setAttribute('index',i);
                ol.appendChild(li);
                li.addEventListener('click',function(){
                    for(var i=0;i<ol.children.length;i++){
                        ol.children[i].className='';
                    }
                    this.className='current';
                    //点击小圆圈，移动图片 当然移动的是ul
                    //ul的移动距离就是小圆圈的索引号乘图片的宽度的负值
                    //当我们点击了某个li 就拿到当前li的索引号
                    circle=this.getAttribute('index');
                    circle=parseInt(circle);
                    num=circle;
                    animate(ul,-circle*focusWidth);
                })
            }
            //把ol里面的第一个li设置类名为current
            ol.children[0].className='current';
            //点击左右按钮，图片滚动一张
            arrow_r.addEventListener('click',function(){
                num=(num+1)%5;
                animate(ul,-num*focusWidth);
                circle=(circle+1)%5;
                for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className='';
                }
                ol.children[circle].className='current';
            })
            arrow_l.addEventListener('click',function(){
                num=(num+4)%5;
                console.log(num);
                animate(ul,-num*focusWidth);
                circle=(circle+4)%5;
                console.log(circle);
                for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className='';
                }
                ol.children[circle].className='current';
            })
            // 自动播放轮播图
            var timer=setInterval(function(){
                //手动调动点击事件
                arrow_r.click();
            },5000);
        })
    </script>
</head>
<body>
    <div class="w">
        <div class="main">
            <div class="focus f1">
                <!--左侧按钮-->
                <a href="#" class="arrow-l">
                    &lt;
                </a>
                <!--右侧按钮-->
                <a href="#" class="arrow-r">
                    >
                </a>
                <!-- 核心的滚动区域 -->
                <ul>
                    <li>
                        <a href="#"><img src="resourse/background.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="resourse/bg.png" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="resourse/bg2.png" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="resourse/background.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="resourse/bg.png" alt=""></a>
                    </li>
                </ul>
                <!-- 小圆圈 -->
                <ol class="circle"> </ol>
            </div>
            <div class="newsflash fr">

            </div>
        </div>
    </div>
</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>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var input=document.querySelector('input');
        var set=document.querySelector('.set');
        var get=document.querySelector('.get');
        var remove=document.querySelector('.remove');
        var clear=document.querySelector('.del');
        set.addEventListener('click',function(){
            var value=input.value;
            sessionStorage.setItem('uname',value);
        });
        get.addEventListener('click',function(){
            var val=input.value;
            sessionStorage.getItem('uname');
        });
        remove.addEventListener('click',function(){
            var val=input.value;
            sessionStorage.removeItem('uname');
        });
        clear.addEventListener('click',function(){
            sessionStorage.clear();
        })
    </script>
</body>
</html>

在这里插入图片描述

记住用户名案例

在这里插入图片描述

jQuery概述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
jQuery与DOM的区别
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

jQuery选择器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

jQuery修改样式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

排它思想

	 $(function(){
           //1.隐式迭代 给所有的按钮都绑定了点击事件
           $("button").click(function(){
               //2.当前的元素变化背景颜色
               $(this).css("background","pink");
               //3.其余的兄弟去掉背景颜色
               $(this).siblings("button").css("background","");
           });
       })

淘宝服饰精品案例

在这里插入图片描述

<!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>
    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            //1.鼠标经过左侧的li
            $("#left li").mouseover(function(){
                //2.得到当前li的索引号
                var index=$(this).index();
                console.log(index);
                //3.让我们右侧的盒子相应索引号的图片显示出来就好了
                $("#content div").eq(index).show();
                //4.让其余的图片隐藏起来
                $("#content div").eq(index).siblings().hide();
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
        </ul>
        <div id="content">
            <div><a href="#"><img src="resourse/background.jpg" width="200" height="250" alt=""></a></div>
            <div><a href="#"><img src="resourse/bg.png" width="200" height="250" alt=""></a></div>
            <div><a href="#"><img src="resourse/background.jpg" width="200" height="250" alt=""></a></div>
            <div><a href="#"><img src="resourse/background.jpg" width="200" height="250" alt=""></a></div>
            <div><a href="#"><img src="resourse/background.jpg" width="200" height="250" alt=""></a></div>
            <div><a href="#"><img src="resourse/background.jpg" width="200" height="250" alt=""></a></div>
            <div><a href="#"><img src="resourse/background.jpg" width="200" height="250" alt=""></a></div>
        </div>
    </div>
</body>
</html>

jQuery效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

滑动效果

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述


<!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>
    <script src="jquery.min.js"></script>
  <style>
      div{
          display: none;
          width: 100px;
          height: 200px;
          background-color: pink;
      }
  </style>
</head>
<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $("button").eq(0).click(function(){
            $("div").slideDown();
        })
        $("button").eq(1).click(function(){
            $("div").slideUp();
        })
        $("button").eq(2).click(function(){
            $("div").slideToggle();
        })
    </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;
            padding: 0;
            box-sizing: border-box;
            list-style:none;
        }
        .wrap{
            width: 800px;
            height: 400px;
        }
        .wrap ul li a img{
            width: 200px;
            height: 200px;
        }
        .wrap ul li{
            float: left;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function(){
        //鼠标进入的时候，其他的li标签透明度：0.5
        $(".wrap li").hover(function(){
            $(this).siblings().stop().fadeTo(400,0.5);
        },function(){
            $(this).siblings().stop().fadeTo(400,1);
        })
        //鼠标离开，其他li的透明度改为1
        })
    </script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li><a href="#"><img src="resourse/background.jpg" alt=""></a></li>
            <li><a href="#"><img src="resourse/background.jpg" alt=""></a></li>
            <li><a href="#"><img src="resourse/background.jpg" alt=""></a></li>
            <li><a href="#"><img src="resourse/background.jpg" alt=""></a></li>
            <li><a href="#"><img src="resourse/background.jpg" alt=""></a></li>
            <li><a href="#"><img src="resourse/background.jpg" alt=""></a></li>
            <li><a href="#"><img src="resourse/background.jpg" alt=""></a></li>
            <li><a href="#"><img src="resourse/background.jpg" alt=""></a></li>
        </ul>
    </div>
</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>
    <script src="jquery.min.js"></script>
    <style>
       * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .king {
            width: 852px;
            margin: 100px auto;
            background: url(resourse/back.png) no-repeat;
            padding: 10px;
            overflow: hidden;
        }

        .king ul{
            overflow: hidden;
        }
        
        .king li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right:10px;
        }
        
        .king li .current{
            width: 224px;
        }
        .king li .current .big{
            display: block;
        }
        .king li .current .small{
            display: none;
        }
        .big{
            width: 224px;
            display: none;
        }
        .small{
            position: absolute;
            top:0;
            left:0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>
    <script>
        $(function(){
            $(".king li").mouseenter(function(){
                //当前li的宽度变为224px，同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
                    width:224
                },200).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                //其余兄弟li宽度变为69px 小图片淡入 大图片淡出
                $(this).stop().siblings("li").animate({
                    width:69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })
        });
    </script>
</head>
<body>
    <div class="king">
        <ul>
            <li><a href="#">
                <img src="resourse/zhaoyun1.jpg" alt="" class="small">
                <img src="resourse/zhangfei2.png"  alt="" class="big">
            </a></li>
            <li><a href="#">
                <img src="resourse/damo1.jpg" alt="" class="small">
                <img src="resourse/damo2.png"  alt="" class="big">
            </a></li>
            <li><a href="#">
                <img src="resourse/diaochan1.jpg" alt="" class="small">
                <img src="resourse/diaochan2.png"  alt="" class="big">
            </a></li>
            <li><a href="#">
                <img src="resourse/chengyaojin1.jpg" alt="" class="small">
                <img src="resourse/chengyaojin2.png"  alt="" class="big">
            </a></li>
            <li><a href="#">
                <img src="resourse/jiangziya1.jpg" alt="" class="small">
                <img src="resourse/jiangziya2.png"  alt="" class="big">
            </a></li>
            <li><a href="#">
                <img src="resourse/zhangfei1.jpg" alt="" class="small">
                <img src="resourse/zhangfei2.png" alt="" class="big">
            </a></li>
            <li><a href="#">
                <img src="resourse/chengjisihan1.jpg" alt="" class="small">
                <img src="resourse/chengjisihan2.png"  alt="" class="big">
            </a></li>
        </ul>
    </div>
</body>
</html>

jQuery属性操作

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
全选按钮
在这里插入图片描述

在这里插入图片描述在这里插入图片描述

jQuery内容文本值

在这里插入图片描述

在这里插入图片描述

增减商品数量案例

在这里插入图片描述

<!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>
    <script src="jquery.min.js"></script>
    <style>
        .box{
           height: 40px;
           float: left;
           background-color: #ccc;
        }
        .increme{
            float: left;
            height: 40px;
            width: 40px;
        }
        .number{
            float: left;
            width: 50px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .decreme{
            float: left;
            height: 40px;
            width: 40px;
        }
    </style>
</head>
<body>
    <div class="box">
        <button class="increme">+</button>
        <input type="text" class="number" value="1">
        <button class="decreme">-</button>
    </div>
    <script>
        $(".increme").click(function(){
            var n=$(this).siblings(".number").val();
            $(this).siblings(".number").val(parseInt(n)+1);
        })
        $(".decreme").click(function(){
            var n=$(this).siblings(".number").val();
            $(this).siblings(".number").val(parseInt(n)-1);
        })
    </script>
</body>
</html>

jQuery元素操作

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

jQuery元素操作

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

jQuery尺寸、位置操作

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

jQuery事件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

jQuery对象拷贝

在这里插入图片描述

jQuery多库共存

在这里插入图片描述

jQuery插件

在这里插入图片描述
在这里插入图片描述

小张同学该努力了
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自定义属性/tab栏切换知识简介
weixin_54259919的博客
10-24 240
自定义属性 规范 用处 保存我的数据，使用这个数据 data-属性名="属性值" 方法集 方法 说明 var div = document.getElementById('data-index') 获取自定义属性所在的标签 div.getAttribute('自定义属性') 获取自定义属性值 div.setAttribute('自定义属性'，'值') 设置修改自定义属性值 div.setAttribute('class'，'新的类名') 修改...
JQ实现手风琴动画效果
大补bu的博客
05-16 658
HTML <div class="king"> <ul> <li class="current"> <a href="#"> <img src="images/m1.jpg" alt="" class="small"> <img src="images/m.png" alt="" class=
JS使用xxx.index=0 和 xxx.setAttribute(‘index’,0) 这两种设置自定义属性的区别？
CherryLee_1210的博客
11-14 1819
在JS中有两种设置自定义属性的的方式：第一种是 xxx.index:是把当前元素当做一个普通对象，为其设置一个属性名（和页面中HTML没有关系）。 第二种是 xxx.setAttribute：是把元素当做特殊元素来处理，设置的自定义属性是和页面结构中的DOM元素映射在一起的。在JS获取DOM的元素对象，我们可以理解为两种角色 与页面中的HTML结构无关的普通对象 与页面HTML结构的存在
web前端学习笔记之JavaScript
m0_49101782的博客
04-09 2509
JavaScript 01 JavaScript简介 JS：解释型语言，不需要编译，代码的执行是从上到下一行行执行的，上一行没执行，下一行就不会执行。 BOM：操作浏览器发生变化的属性和方法 DOM：操作文档流发生变化的属性和方法 ECMScript：书写语法和书写规则 02 JS基础 alert（num），数据出现在浏览器提示框 console.log(num)，数据输出在浏览器控制台 document.write(num)，以文档输出，也就是输出在浏览器的页面（body） 03 JS代码编写位置 1.行
WebAPI(part7)--Tab栏切换案例
小山羊的学习日志
11-11 320
学习笔记，仅供参考，有错必究 Web API Tab栏切换案例 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con
Javascript入门
10-18
Javascript简介 了解JavaScript的基本数据类型。 了解JavaScript的变量和常量。 使用JavaScript语言的一些注意事项 。
javascript入门总结
01-19
总结了javascript的重点内容，以及初学者容易犯错的地方。
JavaScript入门学习书籍推荐
10-30
对于许多想学习 JavaScript 的朋友来说，无疑如何选择入门的书籍是他们最头疼的问题，或许也是他们一直畏惧，甚至放弃学习 JavaScript 的理由。
WebAPI基础
进击的程序猿
04-20 1040
WebAPI学习 查找对象的方式 //document.getElementById()：通过id //document.getElementsByTagName("标签名"):通过标签名 返回一个伪数组，无论有几个元素，返回都是伪数组 //document.getElementsByClassName("类名") 返回值：伪数组 //document.getElementsByName():通过...
js中tab栏切换，点击当前li变色，同时切换内容，默认选中第一个
爬楼梯的前端小白的博客
07-29 2637
js中的tab栏，导航栏制作，点击当前li，显示对应盒子里的内容
tab标签点击切换不同内容js2种实现方式：利用隐藏条件tabs[i] items[i] 一 一对应顺序相同实现、利用setAttribute/getAttribute实现
*
01-01 589
1）优化实现:利用隐藏条件实现 js代码： tab优化版： 找到所有标签:tabs 找到所有内容:items 点击当前标签tabs[i]时: 3.1 先把所有tabs样式类为置空，再把当前tab样式类名置为current 即:所有tabs[i].style.className=’’,再把当前tabs[i].className=‘current’, 3.2 同时:找到对应itemsi： 置item[i].style.display=‘block’,其它置none // 先 找到所有标签元素 va.
js for循环点击事件输出i的值错误的原因
cake_eat的博客
09-29 963
代码： var lis = document.querySelector('.nav').querySelectorAll('li'); for(var i = 0;i<lis.length;i++){ console.log(i); lis[i].onclick = function (){ console.log(i); } } 第一次：for循环嵌套自动函数， i从0-3 执行四次，每次执行，自执行函数也会跟着执行，也就会按照i值的不同，给不同的节点，绑
js封装、简单实例源码记录
weixin_30551947的博客
06-18 72
1、运动封装：doMove ( obj, attr, dir, target, endFn ) 加入回调、&&、||用法注释 <script> var oBtn1 = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn1.onclick ...
DOM 操作元素来改变元素里面的属性（黑马课程总结【侵删】）
qq_42024229的博客
10-08 1101
4. 操作元素 JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性 4.1 改变元素内容 element.innerText 从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉 element.innerHTML 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行 4.2 常用元素的属性操作 1. innerText、inn...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 622
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1063
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 358
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
用Typescript写自动化工作流
最新发布
联蔚盘云的博客
04-29 752
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值