2021-10-20

最新推荐文章于 2024-10-15 09:57:04 发布

我现在很乖

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量67

点赞数

文章标签： css3 javascript html5

本文链接：https://blog.csdn.net/m0_62022299/article/details/120873240

版权

一、事件

1.1 鼠标事件

语法：事件对象(dom元素).事件名称(function(){})

1. 鼠标单击事件 click()

<style>
    .clk{
        width: 200px;
        height: 180px;
        background-color: red;
    }
    .active{
        background-color: blue;
    }
</style>
<div class="clk"></div>
<script>
    $(function(){
        $('.clk').click(function(){
            $('.clk').toggleClass('active')
        })
    })
</script>

2. 鼠标移出事件 mouseout()

3. 鼠标滑过事件 mouseover()

1.2 表单事件

1. 聚焦事件(获得焦点事件) focus()

2. 失去焦点事件 blur()

3. 内容改变事件 change()

4. 表单提交事件 submit()

注意: 对象是form标签

1.3 键盘事件

1. 键盘按下事件 keydown()

2. 键盘弹起事件 keyup()

3. 键盘按压事件 keypress()

1.4 jq中独有的事件方法

1. 事件绑定方法 bind()

2. 事件解绑方法 unbind()

3. 只触发一次事件方法 one()

4. on() 需要事件委托的元素的事件绑定一般都是动态创建的dom元素需要事件委托

二、动画效果

2.1 显示和隐藏

show() 显示

    <button>显示</button>
    <button>隐藏</button>
    <div class="show">显示</div>
    <script>
        $(function(){
        // 单击显示按钮 div显现
        $('button:eq(0)').click(function(){
            $('.show').show(2000)
        })
        })
    </script>

hide() 隐藏

    <button>显示</button>
    <button>隐藏</button>
    <div class="show">显示</div>
    <script>
        $(function(){
        // 单击隐藏按钮 div消失
        $('button:eq(1)').click(function(){
            $('.show').hide(2000,function(){
                $(this).show(1000)
            })
        })
        })
    </script>

2.2 上拉和下拉

slideUp() 上拉

slideDown() 下拉

slideToggle() 如果元素未显示下拉显示的就是上拉

    <button>上拉</button>
    <button>下拉</button>
    <button>toggle</button>
    <div class="show">div标签</div>
    <script>
        $(function(){
            $("button:eq(0)").click(function(){
                $(".show").slideUp(2000)
            })
            $("button:eq(1)").click(function(){
                $(".show").slideDown(2000)
            })
            $("button:eq(2)").click(function(){
                $(".show").slideToggle(2000)
            })
        })
    </script>

2.3 淡入和淡出

fadeIn() 淡入

fadeOut 淡出

fadeToggle()

    <button>淡入</button>
    <button>淡出</button>
    <button>toggle</button>
    <div class="show">div标签</div>
    <script>
        $(function(){
            $("button:eq(0)").click(function(){
                $(".show").fadeIn(2000)
            })
            $("button:eq(1)").click(function(){
                $(".show").fadeOut(2000)
            })
            $("button:eq(2)").click(function(){
                $(".show").fadeToggle(2000)
            })
        })
    </script>

2.4 自定义动画

animate()

<style>
      .show{
          width: 240px;
          height: 180px;
          background-color: red;
      }
</style>
<body>
    <div class="show">div标签</div>
    <script>
        $(function(){
            $(".show").animate({
                "margin-top":'200px',
                "margin-left":'300px'
            },2000)
        })
    </script>