JQuery-学习笔记06【高级——JQuery事件绑定和切换】

我会带着你远行 2022-10-30 11:25 110阅读 0赞

>  *  **[Java后端 学习路线 笔记汇总表【黑马程序员】][Java_ _]**
> 
> 1.  [JQuery-学习笔记01【基础——JQuery基础】][JQuery-_01_JQuery]——【day01】
> 2.  [JQuery-学习笔记02【基础——JQuery选择器】][JQuery-_02_JQuery]
> 3.  [JQuery-学习笔记03【基础——DOM操作】][JQuery-_03_DOM]
> 4.  [JQuery-学习笔记04【基础——JQuery基础案例】][JQuery-_04_JQuery]
> 5.  [JQuery-学习笔记05【][JQuery-_05][高级][JQuery-_05]——[JQuery动画和遍历】][JQuery-_05]——【day02】
> 6.  [JQuery-学习笔记06【高级——JQuery事件绑定和切换】][JQuery-_06_JQuery]
> 7.  [JQuery-学习笔记07【高级——JQuery高级案例】][JQuery-_07_JQuery]

**目录**

第5节 JQuery事件绑定和切换

JQuery\_事件绑定1\_标准方式

JQuery\_事件绑定2\_on&off

JQuery\_事件绑定3\_事件切换

--------------------

# 第5节 JQuery事件绑定和切换 #

## JQuery\_事件绑定1\_标准方式 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]
> 
> ![20210219123824840.png][]

> ![20210219123807276.png][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>01-绑定事件.html</title>
    		<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			$(function() {
    				//1.获取name对象，绑定click事件
    				$("#name").click(function() {
    					alert("我被点击了...")
    				});
    
    				//给name绑定鼠标移动到元素之上事件
    				$("#name").mouseover(function() { // 绑定鼠标移出事件
    					alert("鼠标来了...")
    				});
    				$("#name").mouseout(function() {
    					alert("鼠标走了...")
    				});
    
    				//给name绑定鼠标移动到元素之上事件，简化操作，链式编程
    				$("#name").mouseover(function() {
    					alert("鼠标来了...")
    				}).mouseout(function() {
    					alert("鼠标走了...")
    				});
    
    				alert("我要获得焦点了...");
    				$("#name").focus(); // 让文本输入框获得焦点
    
    				//表单对象.submit();//让表单提交
    			});
    		</script>
    	</head>
    	<body>
    		<input id="name" type="text" value="绑定点击事件">
    	</body>
    </html>

## JQuery\_事件绑定2\_on&off ##

> ![20210219124338712.png][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>02-on绑定事件.html</title>
        <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                //1.使用on给按钮绑定单击事件  click
                $("#btn").on("click", function () {
                    alert("我被点击了。。。")
                });
                //2. 使用off解除btn按钮的单击事件
                $("#btn2").click(function () {
                    //解除btn按钮的单击事件
                    //$("#btn").off("click");
                    $("#btn").off();//将组件上的所有事件全部解绑
                });
            });
        </script>
    </head>
    <body>
        <input id="btn" type="button" value="使用on绑定点击事件">
        <input id="btn2" type="button" value="使用off解绑点击事件">
    </body>
    </html>

## JQuery\_事件绑定3\_事件切换 ##

> **JQuery 高级**  
> 1. 动画  
> 2. 遍历  
> 3. 事件绑定  
>     1. jquery标准的绑定方式  
>         \* jq对象.事件方法(回调函数)；  
>         \* 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。  
>             \* 表单对象.submit();//让表单提交  
>     2. on绑定事件/off解除绑定  
>         \* jq对象.on("事件名称",回调函数)  
>         \* jq对象.off("事件名称")  
>             \* 如果off方法不传递任何参数，则将组件上的所有事件全部解绑  
>     3. 事件切换：toggle  
>         \* jq对象.toggle(fn1,fn2...)  
>             \* 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....  
>         \* 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。  
>              <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>  
> 4. 案例  
> 5. 插件

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]

> ![20210219124747771.png][]
> 
> ![2021021912481049.png][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>03-事件切换.html</title>
    		<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			$(function() {
    				//获取按钮，调用toggle方法
    				$("#btn").toggle(function() {
    					//改变div背景色backgroundColor 颜色为 green
    					$("#myDiv").css("backgroundColor", "green");
    				}, function() {
    					//改变div背景色backgroundColor 颜色为 pink
    					$("#myDiv").css("backgroundColor", "pink");
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<input id="btn" type="button" value="事件切换">
    		<div id="myDiv" style="width:300px;height:300px;background:pink">
    			点击按钮变成绿色，再次点击红色
    		</div>
    	</body>
    </html>

> 我们人生的道路上也要有这种心态，永远是心态归零，要谦虚，要能听进去不同的意见，永远是处于少火生气的状态。一旦觉得自己很厉害了，很牛了，别人的话都听不进去了，这个时候呢叫做壮火食气，你自己火气挺壮的，但是这个时候身体开始衰弱，（请关注微信：pengxinboshi）也就是说状态就开始衰了，所以这个时候往往人就容易飘，就容易骄傲，就容易听不进别人的话，这个时候就开始走向衰落。所以这就是我们看到这《易经》里边的离卦、乾卦当中的，就是最顶上那个叫做“亢龙有悔”的状态，到了最顶点的时候就亢龙有悔了，开始走向衰弱了，对我们的人生是有伤害。—— 微信公众号：pengxinboshi（彭鑫博士）

[Java_ _]: https://blog.csdn.net/weixin_44949135/article/details/113773297
[JQuery-_01_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113846421
[JQuery-_02_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113850915
[JQuery-_03_DOM]: https://blog.csdn.net/weixin_44949135/article/details/113852198
[JQuery-_04_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113857383
[JQuery-_05]: https://blog.csdn.net/weixin_44949135/article/details/113857980
[JQuery-_06_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113860817
[JQuery-_07_JQuery]: https://blog.csdn.net/weixin_44949135/article/details/113861878
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221024/36805193be7f4465bddb63e8b9098f7c.png
[20210219123824840.png]: /images/20221024/c7415767ea894547a11fb12ae4484066.png
[20210219123807276.png]: /images/20221024/36fe40b9adf64e818c7eec737f00e438.png
[20210219124338712.png]: /images/20221024/d45bc62dd89e404b918822a538ce6fcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/85d458b92f9f4519b4af11040d099759.png
[20210219124747771.png]: /images/20221024/4b0b3ca407f04bc18ab14bc1aa3862d5.png
[2021021912481049.png]: /images/20221024/b84128d9d65342ae9538787b40a86845.png