`

Jquery 事件

阅读更多
// 按不同的按钮,文字改变样式
$(document).ready(function() {
  $('#switcher .button').click(function(event) {
    // 取消之前样式
    $('body').removeClass();
    // 根据点击按钮的ID,判断要添加什么属性
    if (this.id == 'switcher-narrow') {
      $('body').addClass('narrow');
    }
    else if (this.id == 'switcher-large') {
      $('body').addClass('large');
    }
    // 所有按钮取消样式
    $('#switcher .button').removeClass('selected');
    // 被点击的按钮,加上选中特效
    $(this).addClass('selected');
    // 停止事件传播
    event.stopPropagation();
  });
});

// 鼠标移动到按钮上时,改变效果
$(document).ready(function() {
  $('#switcher .button').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });
});

// 普通样式时,点击switcher,隐藏/显示switcher,
// 其他样式时,始终显示switcher
$(document).ready(function() {
  var toggleStyleSwitcher = function() {
    $('#switcher .button').toggleClass('hidden');
  };
  $('#switcher').click(toggleStyleSwitcher);

  $('#switcher-normal').click(function() {
    $('#switcher').click(toggleStyleSwitcher);
  });
  // 移除事件处理程序
  $('#switcher-narrow, #switcher-large').click(function() {
    $('#switcher').unbind('click', toggleStyleSwitcher);
  });
});

// 模拟用户点击,可以不用考虑事件传播
$(document).ready(function() {
  $('#switcher').click();
});


$(document).ready(function(){
  
  var buttons = $('input[@id^="button"]');
  buttons.click(function(){
	  var id = this.id;
	  id = id.split('_'); 
      alert(id[id.length-1]);
  });
});
分享到:
评论

相关推荐

    jQuery事件函数共4页.pdf.zip

    《jQuery事件函数共4页.pdf》是一份详细探讨jQuery事件处理的资料,它涵盖了JavaScript库jQuery中的关键事件处理概念和函数。jQuery简化了DOM(文档对象模型)事件处理,使得在网页交互中添加、移除和触发事件变得...

    jQuery事件及绑定.pptx

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

    jQuery 事件

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

    jQuery事件和动画.ppt

    jQuery事件和动画.,对刚学习的同学帮助很大

    JQuery事件Demo

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

    WEB开发 之 jQuery 事件.docx

    总的来说,jQuery事件处理是Web开发中增强用户体验的关键工具,通过合理利用这些功能,开发者可以创建出响应迅速、交互丰富的网站和应用程序。了解并熟练掌握jQuery的事件处理机制,对于提升Web开发效率和代码质量...

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

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

    triggerTracker, 用于跟踪jQuery事件的jQuery调试工具.zip

    triggerTracker, 用于跟踪jQuery事件的jQuery调试工具 triggerTrackerTriggerTracker是跟踪jQuery事件的工具。 它是一个单独的JavaScript文件,当加载时,它向与jQuery事件触发和事件处理程序相关的浏览器的控制台...

    jQuery学习5 jQuery事件模型

    jQuery事件模型是JavaScript库jQuery中的核心功能之一,它简化了事件处理程序的创建和管理,使得跨浏览器的事件处理变得更加简单。以下是对jQuery事件模型的详细说明: 1. **统一事件处理程序方法**:jQuery提供了...

    jQuery事件和动画.md

    jQuery事件和动画.md

    a1392558812#myShare#21.jquery事件处理1

    jquery事件处理。

    jquery-事件冒泡

    jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡...

    jquery事件与动画资料

    jquery事件与动画,初学者不明白怎么用看看pdf吧,这是老师发的

    理解jquery事件冒泡

    一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念,老手来说这当然是最基本的概念,但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...

    第17周-第17章节-JQuery事件之组织事件的发生.avi

    第17周-第17章节-JQuery事件之组织事件的发生.avi

    jQuery事件对象的属性和方法详解

    jQuery事件对象的属性和方法,供大家参考,具体内容如下 事件对象的属于与方法有很多,但是我们经常用的只有那么几个,这里我主要说下作用与区别 event.type:获取事件的类型 触发元素的事件类型 $("a").click...

    jquery效果事件

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

    自己收集的26个一些少见的jquery事件事例

    jquery事件种类繁多,有些事件的实用性在我们工作过程中都常用到,但实用性不强的,工作过程用不到的事件很多被遗忘,等真用时,有可能都不知道有这功能。我这里针对不常用的一些事件进行梳理整理一下,共26个。喜欢...

    可制作炫酷页面滚动效果的jQuery事件插件

    插件描述:该插件可制作炫酷页面滚动效果,包含有一组预置的jQuery事件,通过这些事件,可以在页面滚动时为指定元素制作相应的动画效果。 参考示例:http://www.jq22.com/jquery-info6220

Global site tag (gtag.js) - Google Analytics