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

jQuery监听事件经典例子

    博客分类:
  • JS
 
阅读更多


关键字:jQuery监听事件经典例子


js代码:
============================================================

$(function(){
   $("#s1 option:first,#s2 option:first").attr("selected",true);
 
   $("#s1").dblclick(function(){
     var alloptions = $("#s1 option");
     var so = $("#s1 option:selected");

     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
   
     $("#s2").append(so);
   });
 
   $("#s2").dblclick(function(){
     var alloptions = $("#s2 option");
     var so = $("#s2 option:selected");
   
     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
   
     $("#s1").append(so);
   });
 
   $("#add").click(function(){
     var alloptions = $("#s1 option");
     var so = $("#s1 option:selected");

     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
   
     $("#s2").append(so);
   });
 
   $("#remove").click(function(){
     var alloptions = $("#s2 option");
     var so = $("#s2 option:selected");
   
     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
   
     $("#s1").append(so);
   });
 
   $("#addall").click(function(){
     $("#s2").append($("#s1 option").attr("selected",true));
   });
 
   $("#removeall").click(function(){
     $("#s1").append($("#s2 option").attr("selected",true));
   });
 
   $("#s1up").click(function(){
     var so = $("#s1 option:selected");
     if(so.get(0).index!=0){
       so.each(function(){
           $(this).prev().before($(this));
       });
     }
   });
 
   $("#s1down").click(function(){
     var alloptions = $("#s1 option");
     var so = $("#s1 option:selected");
   
     if(so.get(so.length-1).index!=alloptions.length-1){
       for(i=so.length-1;i>=0;i--)
       {
         var item = $(so.get(i));
         item.insertAfter(item.next());
       }
     }
   });
 
   $("#s2up").click(function(){
     var so = $("#s2 option:selected");
     if(so.get(0).index!=0){
       so.each(function(){
           $(this).prev().before($(this));
       });
     }
   });
 
   $("#s2down").click(function(){
     var alloptions = $("#s2 option");
     var so = $("#s2 option:selected");
   
     if(so.get(so.length-1).index!=alloptions.length-1){
       for(i=so.length-1;i>=0;i--)
       {
         var item = $(so.get(i));
         item.insertAfter(item.next());
       }
     }
   });
});


===========================================================
分享到:
评论

相关推荐

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

    以下是一个简单的jQuery监听滚轮事件的例子: ```javascript $(document).ready(function() { $('body').on('mousewheel DOMMouseScroll', function(event) { var delta = event.originalEvent.wheelDelta || (-...

    jquery 监听 键盘 事件

    在JavaScript的世界里,...总结,jQuery监听键盘事件是提升网页交互体验的重要手段,通过灵活运用`.on()`方法和事件处理函数,可以实现各种复杂的用户交互逻辑。了解并掌握这些技巧,将有助于提升你的前端开发能力。

    jquery监听DIV的事件

    本篇文章将深入探讨如何使用jQuery来监听一个DIV元素的事件,以便于我们在其状态变化时执行相应的代码。 首先,理解jQuery中的事件处理是非常重要的。jQuery提供了丰富的API来绑定和触发DOM元素上的事件。在jQuery...

    经典jquery案例 经典jquery

    "经典jquery案例 经典jquery"这个主题涵盖了几个实用且常见的jQuery应用,通过这些案例,我们可以深入理解jQuery的强大功能和便捷性。 首先,"可编辑表格"是网页交互中常见的一种功能,jQuery可以轻松实现这一需求...

    jquery几个经典例子

    - **级联下拉框**:当一个下拉框的选择影响另一个下拉框的内容时,可以使用jQuery监听第一个下拉框的`change`事件,然后根据选择的值动态更新第二个下拉框的选项。 6. **JQuery实战第六讲:窗口效果** - **窗口...

    jquery50个经典案例

    《jQuery 50个经典案例》是一份涵盖了广泛jQuery实用技巧和应用场景的资源集合,旨在帮助开发者深入理解和熟练运用jQuery库。jQuery是一个高效、简洁且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、...

    JQuery 15种经典案例

    在"JQuery 15种经典案例"中,我们将会探讨一系列实用且富有创意的JQuery应用,旨在提升网页的用户体验和视觉吸引力。 1. **导航菜单**:JQuery可以创建响应式的导航菜单,当用户滚动页面时,菜单可以自动吸附或固定...

    为jQuery添加自定义事件机制

    当调用`$(selector).customEvent()`时,就会为这些元素添加事件监听器。触发事件可以使用`$(selector).trigger('customEvent')`。 除了简单的触发事件,我们还可以传递参数。例如,当我们触发事件时,可能需要传递...

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

    在处理动态生成的元素时,jQuery提供了强大的选择器和方法,这使得开发者能够以简洁的方式操作这些元素,包括为它们添加事件监听器。 2. 动态生成元素的事件处理难题:在Web开发中,经常遇到需要动态生成页面元素的...

    jquery经典例子

    利用jQuery,我们可以监听鼠标移动事件,计算出鼠标相对于图片的位置,然后改变放大镜内小图的位置和大小,以反映鼠标下方的图像细节。这个过程中,关键在于准确计算比例和位置,以及调整放大镜的透明度和大小,以...

    jQuery实现的监听回车按键代码

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本主题聚焦于如何使用jQuery来实现监听回车按键的功能。这在各种交互式表单或搜索输入框中非常常见,用户按下回车...

    JQuery经典案例源码

    这个“JQuery经典案例源码”压缩包文件显然包含了一些使用jQuery实现的示例代码,旨在帮助开发者理解并学习jQuery的核心功能和常见应用场景。 一、jQuery基础 jQuery库通过一个简洁的API提供了对DOM(文档对象模型...

    jquery鼠标滚轮事件

    "jQuery鼠标滚轮事件"是一个非常实用的功能,它允许我们监听并响应用户使用鼠标滚轮时的操作,以此来实现诸如页面滚动、图片缩放等丰富的交互效果。在本文中,我们将深入探讨jQuery中关于鼠标滚轮事件的知识点。 ...

    50个Jquery经典实例 50个Jquery经典实例

    《50个jQuery经典实例》是一份集合了众多实用且高效jQuery代码的资源,它旨在帮助开发者提升在网页开发中的动态效果实现能力。jQuery作为一款强大的JavaScript库,简化了HTML文档遍历、事件处理、动画设计和Ajax交互...

    jquery.hotkeys插件键盘按键监听事件代码.zip

    《jQuery.hotkeys插件:深入理解键盘按键监听事件代码》 在Web开发中,与用户交互是必不可少的一环,而键盘事件的监听则是提升用户体验的关键因素之一。jQuery.hotkeys插件正是为此目的而设计,它扩展了jQuery库,...

    jquery事件绑定例子

    这里,`selector`是用于选择要绑定事件的元素的jQuery选择器,`event`是想要监听的事件名称(如`click`、`mouseover`等),而`handler`则是当事件发生时要执行的函数。 例如,如果我们想要在点击按钮时显示一条消息...

    jQuery事件的绑定、触发、及监听方法简单说明

    在本文中,我们将探讨jQuery中的事件处理,包括事件的绑定、触发和监听。 ### 1. 事件绑定 在jQuery中,绑定事件通常使用`.on()`方法。这个方法不仅适用于基本的事件绑定,还能支持事件代理。`on()`方法的基本语法...

    50个jquery经典例子

    "50个jQuery经典例子"集合了一系列实用的代码示例,可以帮助开发者快速掌握jQuery的核心功能和常见应用,提升网页交互体验。 1. **选择器**:jQuery的选择器类似于CSS,如`$("#id")`选择ID为指定值的元素,`$("....

    jquery.hotkeys插件键盘按键监听事件代码

    `jquery.hotkeys`是jQuery的一个插件,由John Resig开发,它扩展了jQuery的功能,允许开发者监听和处理键盘上的任意按键组合,而不仅仅是浏览器默认处理的那些按键事件。这个插件对于创建响应用户键盘输入的富交互...

    弹出框 jquery 真实案例

    本篇文章将深入探讨如何使用jQuery实现弹出框的真实案例,并分享一些关键知识点。 首先,我们来理解弹出框的基本概念。弹出框是一种阻断用户与页面其余部分交互的窗口,直到用户对弹出框进行操作或关闭它。常见的弹...

Global site tag (gtag.js) - Google Analytics