jQuery事件

2024-01-14 12:04:28

1.基础事件（重点）

1.1鼠标事件（重点）

A.click( )

触发每一个匹配元素的click事件。

<!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 type="text/javascript" src="js/jquery-1.8.3.min.js">、
</script>
    <script type="text/javascript">
    //如果是相同的标签，可以用this
        $(function(){
            $("p").click(function(){
                $(this).css("background","yellow")
            });
        });
    </script>
</head>
<body>
    <p>快来点我</p>
</body>
</html>

jQuery事件
jQuery事件
B.mouseover( )和mouseout( )

mouseover( ) ：mouseover事件会在鼠标移入对象时触发

mouseout( ) ：mouseout事件在鼠标从元素上离开后会触发

</script>
    <script type="text/javascript">
        $(function(){
            $("p").mouseover(function(){
                $(this).css("background","yellow")
            });
            $("p").mouseout(function(){
                $(this).css("background","orange")
            });
        });
    </script>


<body>
    <p>快来点我</p>
</body>

jQuery事件
触碰上去就是黄色，松开就是橘色，
然后一直是橘色，但mouseout一般不设置
jQuery事件
C.mouseenter( )和mouseleave( )

mouseenter( )
与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

mouseleave( )
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave事件。
如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

    <script type="text/javascript">
        $(function () {
            $("p").mouseenter(function () {
                $("p").css("background-color", "yellow");
            });
            $("p").mouseleave(function () {
                $("p").css("background-color", "lightgray");
            });
        });
    </script>


<body>
    <p>快来点我</p>
</body>

jQuery事件
触碰上去就是黄色，松开就是灰色，然后一直是灰色
jQuery事件

D.拓展：mouseover( )系列和mouseenter( )系列的区别

    <script type="text/javascript">
        x = 0;
        y = 0;
        $(document).ready(function () {
            $("div.over").mouseover(function () {
                $(".over span").text(x += 1);
            });
            $("div.enter").mouseenter(function () {
                $(".enter span").text(y += 1);
            });
        });
    </script>


<body>
    <p>mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。</p>
    <p>mouseenter 事件只在鼠标移动到选取的元素上时触发。 </p>
    <div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
        <h3 style="background-color:white;">Mouseover 事件触发: <span></span></h3>
    </div>
    <div class="enter" style="background-color:lightgray;padding:20px;width:250px;float:right">
        <h3 style="background-color:white;">Mouseenter 事件触发: <span></span></h3>
    </div>
</body>

jQuery事件
左边的不管你触碰灰色还是白色的，Mouseenter 事件触发的数字都会变。
右边的只有你触碰灰色的，Mouseenter 事件触发的数字才会变。

1.2键盘事件（重点）

A.keydown( )和keyup( )

keydown事件会在键盘按下时触发。

keyup事件会在按键释放时触发。

    <script type="text/javascript">
        $(document).ready(function () {
            $("input").keydown(function () {
                $("input").css("background-color", "yellow");
            });
            $("input").keyup(function () {
                $("input").css("background-color", "pink");
            });
        });
    </script>


<body>
    输入你的名字: <input type="text">
    <p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>
</body>

jQuery事件
jQuery事件
当点击空格时，不松手就是黄色，松手就是粉色，默认就变成粉色了。

题外话：
当keydown里面换成$("p").append("1");
keyup里面换成$("p").append("2");的时候，
点空格就变成在p段落后面加1，松开变成2。

B.keypress( )（不支持功能键）

keydown事件会在键盘按下时触发

keypress( )和keydown( )\keyup()的区别：

keydown和keyup是键盘按下任何键（功能键，编辑键和定位键）

keypress是键盘按下任何数字键和任何字母键，
backspace键 tab键和enter键也可以。

    <script type="text/javascript">
        i = 0;
        $(document).ready(function () {
            $("input").keypress(function () {
                $("span").text(i += 1);
            });
        });
    </script>


<body>
    输入你的名字: <input type="text">
    <p>按键的次数: <span>0</span></p>
</body>

jQuery事件
按空格时，数字会增加
在这边，按tab键不可以

1.3表单事件（重点）

A.bind()

为每个匹配元素的特定事件绑定事件处理函数。

和click事件和设置方法一样。

    <script type="text/javascript">
        $(function() {//第一种
            $("p").click(function () {
                $(this).css("background","green");
            });
        });
        $(function() {//第二种
            $("p").bind("click",function () {
                $("p").css("background","yellow");
            });
        });
        
        // function a(){//第三种
        //     $("p").css("background","white");
        // }
    </script>


<body>
    <p>触发</p>
    <!-- <p οnclick="a()">触发</p> -->
</body>

jQuery事件
jQuery事件
B.unbind()

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

slideToggle() 效果
里面可以写 (“slow”,“normal”, or “fast”) 或 数字（不用加双引号）
这动画效果只调整元素的高度，可使匹配的元素以“滑动”的方式隐藏或显示。

    <script type="text/javascript">
        $(function () {
            $("p").click(function () {
                $(this).slideToggle();
            });
            $("button").click(function () {
                $("p").unbind();
            });
        });
    </script>


<body>
    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <p>点击任意段落(p 元素)，该段落就会消失。</p>
    <button>移除所有段落(p 元素)的事件句柄</button>
</body>

jQuery事件
点p段落的会慢慢滑动
但如果点那个按钮，那么效果就会消失

2.复合事件
2.1鼠标光标悬停（不是重点）

hover()

    <script type="text/javascript">
        $(function () {//第一种
            $("p").hover(function () {
                $("p").css("background-color", "yellow");
            }, function () {
                $("p").css("background-color", "pink");
            });
        });
        // $(function () {// 第二种 链式操作 也很重要
        // $("p").mouseover(function(){
        //     $("p").css("background-color","yellow");})
        //     .mouseout(function(){
        //         $("p").css("background-color","pink");
        //     })
        // });
    </script>


<body>
    <p>鼠标移动到该段落。</p>
</body>

jQuery事件
jQuery事件
鼠标点击该段落就会变成黄色，
松开就是粉色，然后一直是粉色。

附注：
hover()等价于mouseover和 mouseout事件的组合

2.2鼠标连续点击

toggle()

    <script type="text/javascript">
        $(document).ready(function () {
//第一种
        $("button").click(function () {$("p").toggle();});
        //第二种
        $("button.one").bind("click",function(){$("p").show()});
        $("button.two").bind("click",function(){$("p").hide()});
        });
    </script>


<body>
    <p>这是一个段落。</p>
    <button>切换 hide() 和 show()</button>

    <button class="one">显示</button>
    <button class="two">隐藏</button>
</body>

jQuery事件
切换 hide() 和 show()==》可只点这个进行 隐藏 和 显示

3.动画事件

3.1显示与隐藏show()和hide()

$(document).ready(function(){
	$(".two").click(function(){$("p").hide();});
	$(".one").click(function(){$("p").show();});
});

<body>
<p>这是一个段落。</p>
<button class="one">显示</button>
<button class="two">隐藏</button>
</body>

在上面案例中。

3.2透明度fadeIn()和fadeOut()（不是重点）

fadeIn()通过不透明度的变化来实现所有匹配元素的淡入效果

fadeOut()通过不透明度的变化来实现所有匹配元素的淡出效果

(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

    <script type="text/javascript">
        $(document).ready(function () {
            $(".btn1").click(function () {
                $("p").fadeOut()
            });
            $(".btn2").click(function () {
                $("p").fadeIn();
            });
        });
    </script>


<body>
    <p>这是一个段落。</p>
    <button class="btn1">淡出</button>
    <button class="btn2">淡入</button>
</body>

jQuery事件
点击淡出，上面一句话就会慢慢消失，
淡入，就会慢慢出现。

3.3高度slideDown()和slideUp()

    <script type="text/javascript">
        $(document).ready(function () {
            $(".btn1").click(function () {
                $("p").slideUp();
            });
            $(".btn2").click(function () {
                $("p").slideDown();
            });
        });
    </script>


<body>
    <p>这是一个段落。</p>
    <button class="btn1">上滑</button>
    <button class="btn2">下滑</button>    
</body>

jQuery事件
点击上滑，以上内容就慢慢向上消失，
下滑，就慢慢出现。

----2021.10.08&10.09

上一篇：msf smb/psexec_command模块无法回显非ASCII编码问题


下一篇：【 jQuery】$(document).on('click','要选择的元素',function(){})和$().click()的不同