jQuery基础知识点(中)

2023-10-08 09:09:34

一、事件

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>

码农公寓