• 技术文章 >web前端 >前端问答

    jquery on()有几个参数

    青灯夜游青灯夜游2022-04-21 11:29:40原创352

    on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

    大前端零基础入门到就业:进入学习

    本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

    jquery on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

    自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

    注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

    jquery on() 方法可接受4个参数

    $(selector).on(event,childSelector,data,function)
    参数描述
    event必需。规定要从被选元素添加的一个或多个事件或命名空间。

    由空格分隔多个事件值,也可以是数组。必须是有效的事件。
    childSelector可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
    data可选。规定传递到函数的额外数据。
    function可选。规定当事件发生时运行的函数。

    示例1:向 <p> 元素添加 click 事件处理程序

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(document).ready(function() {
    				$("p").on("click", function() {
    					alert("段落被点击了。");
    				});
    			});
    		</script>
    	</head>
    	<body>
    
    		<p>点击这个段落。</p>
    
    	</body>
    </html>

    1.gif

    示例2:添加多个事件处理程序

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(document).ready(function(){
    		  $("p").on("mouseover mouseout",function(){
    		    $("p").toggleClass("intro");
    		  });
    		});
    		</script>
    		<style type="text/css">
    			.intro {
    				font-size: 150%;
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    
    		<p>将鼠标指针移到这段文字上。</p>
    
    	</body>
    </html>

    2.gif

    示例3:向未来的元素添加事件处理程序

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(document).ready(function() {
    				$("div").on("click", "p", function() {
    					$(this).slideToggle();
    				});
    				$("button").click(function() {
    					$("<p>这是一个新段落。</p>").insertAfter("button");
    				});
    			});
    		</script>
    	</head>
    	<body>
    
    		<div style="background-color:yellow">
    			<p>这是一段。</p>
    			<p>单击任意p元素使其消失。包括本段。</p>
    			<button>在此按钮后插入一个新的p元素</button>
    		</div>
    
    	</body>
    </html>

    3.gif

    【推荐学习:jQuery视频教程web前端视频

    以上就是jquery on()有几个参数的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:React是双向数据流吗 下一篇:react的key有什么用
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• jquery实现多少秒后隐藏图片• jquery只能用id选择器吗• jquery怎么增加一个li元素• jquery怎么根据id改变元素值• axios与jquery的区别是什么• jquery怎么修改元素的title属性
    1/1

    PHP中文网