JQuery事件与应用(一)

来源:http://www.imooc.com/learn/11     jQuery基础课程

一、使用bind()方法绑定元素的事件

功能:

ready()事件中绑定一个按钮的单击事件,使用bind()方法绑定单击(click)和鼠标移出(mouseout)这两个事件,触发这两个事件中,按钮将变为不可用。

<script type="text/javascript">
            $(function () {
                $("#btntest").bind("click mouseout", function () {
                    $(this).attr("disabled", "true");
                })
            });
</script>

结果:

二、使用hover()方法切换事件

说明:使用hover()方法执行两个函数,当鼠标移在元素上时调用addClass()方法增加一个样式,移出时,调用removeClass()方法移除该样式。

<script type="text/javascript">
            $(function () {
                $("div").hover(
                function () {
                    $(this).addClass("orange");
                },
                function () {
                    $(this).removeClass("orange")
                })
            });
</script>

三、使用toggle()方法绑定多个函数

        <script type="text/javascript">
            $(function () {
                $("#btntest").bind("click", function () {
                    $("div").toggle()
                })
            });
        </script>

时间: 2024-10-18 07:53:44

JQuery事件与应用(一)的相关文章

jQuery事件对象的属性和方法

jQuery事件对象的属性和方法 事件对象的属于与方法有很多,但是我们经常用的只有那么几个,这里我主要说下作用与区别 event.type:获取事件的类型 触发元素的事件类型 $("a").click(function(event) { alert(event.type); // "click"事件 }); event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标 通过这2个属性,可以确定元素在当前页面的坐标值,鼠标相对于文档的左边缘的位置(

jQuery事件对象的作用

jQuery事件对象的作用 事件中的Event对象容易被初学者忽略掉,可能大多时候初学者不知道怎么去用它,但有些时候它还是非常有用的 一个标准的"click"点击事件 $(elem).on("click",function(event){ event //事件对象 }) 在不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异.jQuery根据 W3C 标准规范了事件对象,所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象

jQuery 事件用法详解

jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jquery中文文档 简介 jquery 之所以成为最受欢迎的前端库,很大一部分是得益于它的事件具有良好的语义,优秀的兼容性,并且便于管理和扩展. 在这里我会介绍 jquery 事件的一些比较基础的用法. 实现原理 jquery 事件脱胎于浏览器的 addEventListener (W3) 和 attac

jQuery源代码学习之九—jQuery事件模块

jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 jQuery.event={ global:{}, add:function(elem,types,handle,data,selector){}, remove:function(elem,types,handler,selector,mapppedTypes){}, trigger:functio

jQuery事件

<锋利的jQuery> jQuery事件 加载DOM jQuery: $(document).ready(function(){})    简写 $(function(){}) JS: window.onload(function(){}) 差别:1.执行时机 $()在dom加载完成后. Window.onload()在所有元素完全加载(包括所有图片等) 问题:例如,$()设置图片宽高无效.解决:load()方法,$元素或者$(window) 2.多次使用 js后面定义方法会覆盖前面. $()

javascript事件之:jQuery事件中实例对象和拓展对象之间的通信

我们总结过jQery事件中的实例原型对象对外接口和拓展对象,现在我们看看他们是如何进行通信联系的. 先来看便捷方法: 1 //调用的还是实例对象下的on()和trigger() 2 jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + 3 "mousedown mouseup mousemove mouseover mouseout mouseenter

前端编程提高之旅(十五)----jquery事件

HTML与js交互主要通过用户与浏览器操作页面时引发事件.文档或某些元素发生某些变化或操作时,浏览器会生成事件.jquery增加了事件处理能力.    jquery事件部分可以从以下五部分理解:    一.加载DOM函数    这里指的如下方法: $(document).ready(function(){ }) 相比于传统的window.onload方法,前者在执行时机与可否多次使用上区别于后者.    前者是在DOM完全就绪回调就会被调用,后者则是网页所有元素(包含关联文件)完全加载到浏览器后

jQuery事件篇---高级事件

内容提纲: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one 发文不易,转载请注明出处! 一.模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕后自行点击一个按钮触发一个事件,而不是用户去点击. //点击按钮事件 $('input').click(function () { alert('我的第一次点击来自模拟!'); }); //模拟用户点击行为 $('input').trigger('click'); //可以合并两个方法 $('inp

【jquery基础教程】jquery事件及操作大汇总

在学习Javascript语言中,有一个优秀的Javascript库是大家都会遇到的--jquery,今天小编汇总了jquery事件及操作,现在一起来看看jquery基础教程吧! 事件 bind()        向匹配元素附加一个或更多事件处理器 blur( )        触发.或将函数绑定到指定元素的 blur 事件 change()        触发.或将函数绑定到指定元素的 change 事件 click()        触发.或将函数绑定到指定元素的 click 事件 dblc

jQuery事件对象

1.event.currentTarget 事件的监听者2.event.target 事件的目标3.event.delegateTarget 绑定了当前正在调用jQuery事件处理器的(当前事件的委托者)4.event.pageX 鼠标相对于文档左边缘的位置5.event.pageY 鼠标相对于文档上边缘的位置6.event.type 获取当前的事件类型7.event.preventDefault() 阻止默认事件8.event.stopPropagation() 阻止冒泡事件