首页 > 其他分享 >JQ 其它的点击事件用法

JQ 其它的点击事件用法

时间:2023-06-26 20:06:16浏览次数:45  
标签:function body bind JQ 用法 点击 div click append


demo.html

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.over {
	color: red;
	background: #888;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("div").bind("mouseover mouseout", function(){
		$(this).toggleClass("over");
	});
})
</script>
</head>
<body>
<div style="width:100px;height:50px;">滑入.</div>
</body>
</html>

效果图:

JQ 其它的点击事件用法_ViewUI


 

demo2.html

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("div").bind("click.plugin",function(){
		$("body").append("<p>click事件</p>");
	});
	$("div").bind("mouseover.plugin", function(){
		$("body").append("<p>mouseover事件</p>");
	});
	$("div").bind("dblclick", function(){
		$("body").append("<p>dblclick事件</p>");
	});
	$("button").click(function() {
		$("div").unbind(".plugin");  
	})
})
</script>
</head>
<body>
<div style="width:100px;height:50px;background:#888;color:white;">test.</div>
<button >根据命名空间,删除事件</button>
</body>
</html>

效果图:

JQ 其它的点击事件用法_javascript_02


 

demo3.html

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("div").bind("click",function(){
		$("body").append("<p>click事件</p>");
	});
	$("div").bind("click.plugin", function(){
		$("body").append("<p>click.plugin事件</p>");
	});
	$("button").click(function() {
		//click! 是不执行点击事件
		$("div").trigger("click!"); // 注意click后面的感叹号
	});
})
</script>
</head>
<body>
<div style="width:100px;height:50px;background:#888;color:white;">test.</div>
<button >根据命名空间,触发事件</button>
</body>
</html>

效果图:

JQ 其它的点击事件用法_html_03


 

 

 

标签:function,body,bind,JQ,用法,点击,div,click,append
From: https://blog.51cto.com/u_16171388/6557263

相关文章

  • JQ 复选框全选反选
    <!DOCTYPE><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><scriptsrc="js/jquery-1.10.1.min.js"type="text/javascript">&......
  • JQ 多行文本框高度变化
    <html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>文本框高度变化</title><styletype="text/css">*{ margin:0; padding:0; font:normal12px/17pxArial......
  • JQ 下拉框左右选择
    <html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><styletype="text/css">*{ margin:0; padding:0;}div.centent{ float:left; text-......
  • JQ 表格展开伸缩
    style.csstable{border:0;border-collapse:collapse;}td{font:normal12px/17pxArial;padding:2px;width:100px;}th{font:bold12px/17pxArial;text-align:left;padding:4px;border-bottom:1pxsolid#333;width:100px;}.parent{background:#FFF38F;cursor:point......
  • Nginx 6个例子理解proxy_pass和rewrite的用法
    Nginx6个例子理解proxy_pass和rewrite的用法一、rewrite描述rewrite可以重写path,也可以重写整个url(如果存在协议,默认返回302临时跳转,即使加了last和break也无效)。rewrite共有4种flag:last、break、redirect(302)、permanent(301)。当location中存在flag时,不会再执行之后的......
  • JQ 瀑布流
    demo.css*{ padding:0; margin:0;}.wrap{ position:relative;}.box{ position:absolute; left:0; top:0; width:250px;}.boximg{ width:250px;} demo.js$(function(){ $('img').load(function(){ varbox=$('.box'); var......
  • JQ 可展开折叠的导航
    <!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>*{padding:0;margin:0;}li{list-style-type:none;}body{margin:50px;font-family:\5FAE\8F6......
  • JQ 拖拽
    <!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>拖拽</title><style>*{ padding:0; margin:0;}div{ width:100px; height:100px; background:#f00; cursor:pointer; ......
  • JQ 放大镜
    zoom.css*{ padding:0; margin:0;}li{ list-style-type:none;}.zoom{ margin:50px; position:relative;}.zoomMiddle{ border:1pxsolid#ccc; width:300px; height:300px; margin-bottom:3px; position:relative;}.zoomMiddleimg{ width:300p......
  • JQ 表格内容过滤
    <html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><linkrel="stylesheet"type="text/css"href="css/style.css"/><sc......