zoukankan      html  css  js  c++  java
  • 30 jQuery——操作事件

    jquery动态事件

    添加事件

    元素对象.bind("事件名",fn);//动态的给指定的元素追加指定的事件,多次点击将追加多个重复函数

    移除事件

    元素对象.unBind("事件名");

    添加一次性事件:

    添加的函数执行一次后失效

    元素对象.one("事件名",fn)

    页面载入事件:

    注意不要写在函数里
    $(document).ready(fn);fn表示函数对象function
    页面载入成功后会调用函数对象。而且这个方式写多个,不会覆盖。

    测试代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>操作事件</title>
    		<!-- 
    		 jquery动态事件
    			添加事件
    				元素对象.bind("事件名",fn);//动态的给指定的元素追加指定的事件,多次点击将追加多个重复函数
    			移除事件
    				元素对象.unBind("事件名");
    			添加一次事件:添加的函数执行一次后失效
    				元素对象.one("事件名",fn)
    			页面载入事件:注意不要写在函数里
    				$(document).ready(fn);fn表示函数对象function
    				页面载入成功后会调用函数对象。而且这个方式写多个,不会覆盖。
    		 -->
    		<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			//js动态添加事件
    			function testThing(){
    				var btn = document.getElementById("btn")
    				btn.onclick=function(){
    					alert("我是js方式")
    				}
    			}
    			//jQuery添加事件:以点击事件为例(click)
    			function testBind(){
    				$("#btn2").bind("click",function(){alert('我是bind绑定事件')})
    			}
    			//jQuery解绑事件
    			function testUnbind(){
    				$("#btn2").unbind("click");
    			}
    			//jQuery一次性事件
    			function testOne(){
    				$("#btn3").one("click",function(){alert("我是一次性事件")})
    			}
    			//页面加载事件:注意不要写在函数里
    			$(document).ready(function(){alert("我是页面加载事件")})
    			$(document).ready(function(){alert("我是页面加载事件2")})
    		</script>
    	</head>
    	<body>
    		<h3>操作事件</h3>
    		<input type="button" name="" id="" value="js动态添加事件" onclick="testThing()"/>
    		←连续点击也只添加一个函数(一个事件)
    		<input type="button" name="" id="" value="jquery动态添加事件" onclick="testBind()"/>
    		←连续点击添加多个函数(一个事件)
    		<input type="button" name="" id="" value="jquery解绑事件" onclick="testUnbind()" />
    		<input type="button" name="" id="" value="添加一次性事件jQuery-one()" onclick="testOne()"/>
    		←再次单击无效
    		<hr>
    		<input type="button" name="" id="btn" value="测试js" />
    		<input type="button" name="btn2" id="btn2" value="测试jquery-bind()" />
    		<input type="button" name="btn3" id="btn3" value="测试jQuery-one()" />
    	</body>
    </html>
    

      

  • 相关阅读:
    Java-数组
    排序-冒泡排序
    排序-选择排序
    Java-基础
    Java-Html-session
    Java-API
    Tomcat-常用设置
    Tomcat目录结构
    TOMCAT-安装配置
    Java-public
  • 原文地址:https://www.cnblogs.com/Scorpicat/p/12259446.html
Copyright © 2011-2022 走看看