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>

  

原文地址:https://www.cnblogs.com/Scorpicat/p/12259446.html

时间: 2024-10-29 11:08:25

30 jQuery——操作事件的相关文章

Jquery操作事件

1.文档加载事件 2.DOM单击双击事件 3.DOM获得焦点,失去焦点问题 4.DOM鼠标移入,移出事件 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Jquery操作DOM节点</title> 6 <script type="text/javascript" src="../js/jq

jQuery操作Dom、jQuery事件机制、jQuery补充部分

jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要修改的属性,就会进行修改,如果没有,直接添加 例:$("a").attr("href","http://www.baidu.com"); 修改多个属性值: //attr(obj) $(“img”).attr({ “title”: ”文件名称”, “s

jquery和js操作,【包含jquery挂事件】

JS根据ID取元素,取到的是具体的元素  var a = document.getElementById("p1");根据CLASS取  var a = document.getElementsByClassName("aa");根据标签名取  var a = document.getElementsByTagName("div");根据name取  var a = document.getElementsByName("cc"

jQuery操作dom事件

参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQuery实现点击式选项卡jQuery实现select三级联动 //1.绑定事件bind() bind('event name', eventData, function(event) { /* Act on the event */ }); //event name事件名称:可接收事件列表 blur,f

Jquery之事件绑定(bind(),live(),delegate(),on())

1..bind() 描述: 为一个元素绑定一个事件处理程序. .bind()一个基本的用法: $(selector).bind('click', function() { alert('User clicked on "foo."'); }); 可以直接用原生js替代为: $(selector).click( function() { alert('User clicked on "foo."'); }); 在jQuery1.4.3,您现在可以通过传递false代替

jQuery绑定事件的四种方式:bind、live、delegate、on

1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off. 2.必备的基础知识: DOM树 示例,这是在browser环境下的一棵模拟DOM树: 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素),如果我们没有人为的设置stopPropagation(Moder Browser), cancel

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基础作出了一些说明,建议在阅读本文前首先阅读前文,这里 Kayo 再引用前文的重要内容. “jQuery Mobile 在基于本地事件上,创建了一系列的自定义事件,大部分事件是基于触摸设备的使用情况开发的,当然这些事件对于桌面环境也会有适当的处理,开发者可以使用 bind() 函数绑定到需要的页面对象中. 值得

使用jQuery让事件动起来

目录: 三步实现jQuery方式处理事件 $(document).ready()与window.onload this和$(this) 常用的hover()和toggle() 通过点击文章标题展开.隐藏新闻内容 三步实现jQuery方式处理事件 发生在Web页面的每一件事情都可以称为事件,为了使Web页面具有交互性,我们采用的方法是通过编写程序来响应事件. 例如,鼠标移动到导航栏时显示帅气的下拉菜单:鼠标点击标题时展开段落内容:用键盘来控制JavaScript动画等.我们在文末会给一个简单又酷炫

JQuery操作标签

JQuery操作标签 一.样式操作 1 添加指定的CSS类名 addClass(); 2 移除指定的CSS类名 removeClass(); // 与addClass一起连用实现开关 3 判断样式存不存在 hasClass(); // true //false 4 切换CSS类名,如果有就移除,如果没有就添加 toggleClass(); // 实现删除和动态添加 5 CSS操作 $("选择器").css(样式) 二.位置操作 1 获取匹配元素在当前窗口的相对偏移或设置元素位置 off