`
18633917479
  • 浏览: 12018 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery事件方法(1)

 
阅读更多

1 .bind()

为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数

$("button").bind("click",function(){
  $("p").slideToggle();
});//运行结果为当点击<button>按钮时,隐藏<p>元素,再点击时,出现<p>元素

 替代语法:

$(selector).bind({event:function, event:function, ...})

 2.blur()

 

当元素失去焦点时发生 blur 事件。

$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});//点击<input>,又点击之外区域,则失去焦点,改变颜色

 3.change()

 

当元素的值发生改变时,会发生 change 事件

 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".field").change(function(){
    $(this).css("background-color","#FFFFCC");
  });
});
</script>
</head>
<body>
<p>在某个域被使用或改变时,它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
</html>//当下拉框的选项发生变化时,<input>改变颜色

 4.click()点击事件.

 

5.dbclick(),双击触发事件

6.delegate()

 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

 为<button>添加了一个click事件,点击<p>隐藏或消失,再新建<button>也会存在绑定的click事件

 

 

7.live()

为当前或未来的匹配元素添加一个或多个事件处理器

$("button").live("click",function(){
  $("p").slideToggle();
});//像<button>元素添加了个点击事件,复制后或新建的<button>仍存在点击事件

 8.die()

 

移除所有通过 live() 函数添加的事件处理程序。

$("p").die();

 9.error()

 

当元素遇到错误(没有正确载入)时,发生 error 事件

$("img").error(function(){
  $("img").replaceWith("
Missing image!
");
});//图片未加载,显示MIssing image

 10.focus()

当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。当元素获得焦点时,发生 focus 事件。

$("input").focus(function(){
  $("input").css("background-color","#FFFFCC");
});

 11.keydown()

当按下按键时,发生绑定事件

$("input").keydown(function(){
  $("span").text(i+=1);
});//在<inputs>中输入一个字符就会触发一次.keydown事件 

12.keypree()

keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。

不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。

$("input").keydown(function(){
  $("span").text(i+=1);
});//在<inputs>中输入完成一次并按下回车后会执行一次keydown事件

 

 

 

 

分享到:
评论

相关推荐

    jQuery为动态生成的select元素添加事件的方法

    4. jQuery的`.on()`方法:在jQuery 1.7及更高版本中,推荐使用`.on()`方法来进行事件委托。这个方法可以将一个或多个事件处理器绑定到指定的选择器匹配的元素上。当事件发生时,它会在选定的元素内查找事件委托的...

    jquery鼠标滚轮事件

    在jQuery中,通常我们使用`.on()`方法来绑定这些事件。 ```javascript $(document).on('mousewheel', function(event) { // 在这里处理滚轮事件 }); ``` 或者针对特定元素: ```javascript $('#myElement').on('...

    jQuery事件及绑定.pptx

    1、jQuery事件概述 jQuery对JavaScript操作DOM事件进行了封装,形成了更好的事件处理机制; 包括常用事件、事件绑定与解绑等。jQuery事件处理方法是jQuery的核心函数。 常用事件方法(教材P263表A-4): 分类 事件...

    jquery效果事件

    三、jQuery事件 1. 基本事件绑定:jQuery提供了`.on()`方法来绑定事件。例如,`$("#myButton").on("click", function() { ... })`表示当id为"myButton"的元素被点击时,执行匿名函数内的代码。 2. 鼠标事件:常见...

    jquery监听鼠标滚轮事件+js监听滚轮事件

    这个例子和jQuery版本相似,只是使用了原生的事件监听方法。注意,对于不支持`event.preventDefault()`的老版本IE,还需要设置`event.returnValue = false`来阻止默认行为。 总结,无论使用jQuery还是原生...

    jquery快速学三(事件与动画)

    通过以上对jQuery事件处理和动画效果的讲解,相信你已经对这两个主题有了全面的理解。结合实际的HTML文档,不断练习和探索,你将能熟练运用jQuery,提升网页交互体验。在实践中,不断学习,持续进步,是成为优秀的...

    JQuery绑定事件

    1. **`.on()`**:这是jQuery中最通用的事件绑定方法,可以用于绑定任何类型的事件。例如: ```javascript $('#myElement').on('click', function() { console.log('点击事件触发'); }); ``` 这段代码会为ID为`...

    JQuery事件Demo

    **jQuery事件Demo详解** 在Web开发中,JavaScript的事件处理是构建交互式用户界面的关键技术。jQuery库大大简化了这一过程,提供了丰富的API和方法来处理DOM(文档对象模型)中的事件。本篇文章将深入探讨jQuery...

    jquery的几种使用方法

    在网页开发领域,jQuery是一个非常重要的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本篇文章将详细探讨jQuery的几种使用方法,帮助你更好地理解和运用这一强大的工具来提升...

    为jQuery添加自定义事件机制

    为了实现更复杂的事件机制,可以利用jQuery的`proxy`方法来改变事件处理函数的上下文(`this`关键字指向的对象)。同时,可以使用`off`方法移除已绑定的事件,以避免内存泄漏。 ```javascript var handler = ...

    jquery监听DIV的事件

    在jQuery中,我们可以使用`.on()`方法来监听DOM元素的事件。例如,如果我们想要监听一个ID为"myDiv"的DIV元素的点击事件,我们可以这样写: ```javascript $("#myDiv").on("click", function() { // 当用户点击这...

    jquery鼠标滚轮事件支持插件

    开发者只需在项目中引入插件的JavaScript文件,然后就可以通过jQuery选择器和事件绑定方法来监听和处理滚轮事件。 “jquery-mousewheel-master”是这个插件的源代码仓库,其中包含了插件的主文件和其他相关资源。...

    jQuery 事件

    jQuery 事件 jQuery 是为事件处理特别设计的。 什么是事件? 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 实例: 在元素上移动鼠标。 选取单选按钮 点击元素 ...

    jQuery带事件记录的多功能日历

    在这款日历插件中,jQuery扮演了核心的角色,为事件记录、日历展示等功能提供了便利的API和方法。 日历插件的事件记录功能是其核心亮点。用户可以方便地在任何日期上添加事件,无论是会议、约会还是简单的待办事项...

    jquery.common通用方法

    1. DOM操作:jQuery.common往往包含了一些便捷的DOM元素选择、创建和操作的方法,例如选取页面上的特定元素、获取或设置元素的属性、插入或删除DOM节点等。 2. 事件处理:通用方法中通常会包含对常见事件的处理,如...

    jQuery实现给input绑定回车事件的方法

    接下来,我们详细讲解如何利用jQuery给input元素绑定回车事件的两种方法,以及相关的知识点。 ### 知识点一:jQuery基础 在了解如何使用jQuery给input元素绑定回车事件之前,需要对jQuery有一个基本的认识。jQuery...

    jquery例子大全 jquery demo

    jQuery 改进了JavaScript的事件处理方式,如 `.on()` 方法用于绑定事件监听器,`.off()` 移除事件监听器,`.trigger()` 触发事件。`.delegate()` 和 `.live()`(在jQuery 1.7后被 `.on()` 替代)则支持事件代理,...

    jQuery1.12.4+jQuery中文手册.rar

    在这些API文档中,你可以找到jQuery的函数、方法、选择器和事件等方面的详细说明。例如: 1. **选择器**:jQuery提供了丰富的CSS选择器,如`$("#id")`用于选取ID为指定值的元素,`$(".class")`用于选取具有特定类的...

    jquery1.4.2 jquery1.4.2

    1. 选择器:jQuery的核心之一是其强大的CSS选择器支持,包括ID选择器 (#id)、类选择器 (.class)、元素选择器 (element) 等,甚至支持组合选择器和伪类,如 $(“div.special”).find(“p:first”),可以高效地定位到...

Global site tag (gtag.js) - Google Analytics