jquery点击事件案例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="jquery.1.11.1.min.js"></script>

</head>

<body>

<select id="s1" size="2" style="width: 400px;height: 200px;">

      <option>1</option>

      <option>2</option>

      <option>3</option>

   </select>

   <select id="s2" size="2" style="width: 400px;height: 200px;"></select>

   <button id="add">添加</button>

   <button id="del">删去</button>

<script type="text/javascript">

   $("#add").click(function(){              //将事件绑定在按钮身上

  var opt = $("#s1 option:selected").clone(true);  // 克隆选中option

opt.appendTo($("#s2"));            //把 opt 添加到 s2

});

$("#del").click(function(){          //删除按钮点击的时候,事件在点击时触发

var opt = $("#s2 option:selected");

  opt.remove();                 // opt 被移除

   })

</script>

</body>

</html>

网页效果如下

  

原文地址:https://www.cnblogs.com/binghuaZhang/p/10841100.html

时间: 2024-10-12 17:14:52

jquery点击事件案例的相关文章

Jquery点击事件隐藏显示菜单

显示的效果就是这样,点击菜单,显示自己菜单下的内容,其他菜单下的都隐藏 html代码如下 1 <div> 2 <ul class="menu"> 3 <li class="leav"> 4 <a href="#">衬衫</a> 5 <ul class="leave"> 6 <li> 7 <a href="javascript:v

jquery点击事件捕获

最近做个小功能仿ECSHOP,动态改变某个dom内容,然后ajax提交保存.不用像平常那样修改个表还需要进入到修改页面然后点击保存. 整体思路不难,假如原来是span或h3,a等标签,点击之后获取内容,然后新增一个input标签,并把value值赋给input.修改完内容之后,input标签blur事件出发之后做正则判断,然后ajax提交后台.成功则把新value值赋给原先的标签,去掉input标签. 1.获取原来内容val 2.新增input标签,并赋值val 3.改变input值,blur之

Jquery点击事件出发顺序

鼠标点击触发事件执行顺序: mouse down -> mouse up -> click 键盘点击出发事件执行顺序: 点击后马上抬起:key down -> key press -> key up 点击后不抬起:key down -> key press -> key down -> key down ->....key up

jquery点击事件后增加克隆的标签,并改变克隆的属性加入

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-3.2.1.js"></script> 7 </head> 8 <body> 9 <div

jquery 点击事件

bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 click() 触发.或将函数绑定到指定元素的 click 事件 dblclick() 触发.或将函数绑定到指定元素的 double click 事件 delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 die() 移除所有通过 live() 函数添加的事件处理程序. error() 触发.

jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> </body> 对应的jQuery代码如下: <script type="text/

关于jQuery中动态生成的点击事件触发两次的讨论

由于是动态生成的  点击事件运用了jQuery里面的on()方法,绑定在body上面,结果在程序里面运行了两次.参考了博客 利用on和off方法编写高效的js代码知道了很多在dom对象删除以后,其声明的绑定在window上的事件还一直存在,导致相同的功能代码执行了几次.故使用之前要清理掉body上绑定的click事件,利用了jQuery里面off()方法. $('body').off('click').on('click','selector',function(){});

jQuery触发a标签点击事件-为什么不跳转

今天开发发现 使用jQuery触发a标签的点击事件,当前的样式发生了变化,可是没有跳转,为什么? 百度后找到的解决方案: <a onclick="hanle()" href="test.jsp" target="main" ><span id="hand">处理</span></a> 在a标签中加上span标签,触发span标签的点击事件. 直接在a标签上触发点击,当前链接onc

jQuery模拟鼠标点击事件失效的问题

最近使用jQuery操作浏览器获取数据,需要对分页的信息进行处理,发现直接使用$('div#pager a.next').click();的这种写法无法触发点击事件. 使用trigger('click')的写法也是无济于事. 在网上一顿扒拉后,发现使用$('div#pager a.next')[0].click();就OK了. $('div#pager a.next')[0]这种写法其实就相当于把jQuery对象转换为Dom对象了. 模拟点击不生效的原因 如果使用jQuery的写法:$('a#t