<6/2 周五>jQuery中的事件

本文介绍了JavaScript中各种事件的基础知识,包括窗口事件、鼠标事件、键盘事件及表单事件等,并详细讲解了如何通过bind和unbind方法绑定和移除事件监听器,同时探讨了hover和toggle等复合事件的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基础时间

事件名=“函数名()”;或DOM  对象.事件名=函数;

1)window事件

当用户会执行某些影响浏览器的操作时,触发的时间。

2)鼠标事件

用户在文档上单击或移动鼠标时产生的事件。

3)键盘事件

当键盘聚焦到Web浏览器时,用户每次按下或释放键盘上的按键时都会产生事件。

4)表单事件

是所有事件类型中最稳定、且支持最稳定的事件之一。


绑定事件与移除事件

绑定事件

语法:bind(type,[date],fn)

移除事件

语法:unbind([type],[fn])


复合事件

hover()方法

模拟鼠标指针悬停事件

语法:hover(enter,leave);

toggle()方法

模拟鼠标连续click事件

语法:toggle(fn1,fn2,······,fnN);


<div class="container-fluid" id="print_div" style="padding-bottom: 30px;width: 80%;margin-top: 40px;"> <div class='responsive-table'> <div class='scrollable-area' style=""> <div id="print_title1"> <h2 style="text-align:center;">营养改善计划食堂供餐食材配送情况一览表</h2> </div> <table id="mydatatables" class="table table-striped table-bordered" border="0" bordercolor="#000000"> <thead> <tr> <th style="text-align:center;"><input type="checkbox" id="checkAll" class="check-all"></th> <th style="text-align:center;">学校名称</th> <th style="text-align:center;">物品名称</th> <th style="text-align:center;">周一</th> <th style="text-align:center;">周二</th> <th style="text-align:center;">周三</th> <th style="text-align:center;">周四</th> <th style="text-align:center;">周五</th> <th style="text-align:center;">合计1</th> <th style="text-align:center;">合计2</th> <!-- 新增合计列 --> <th style="text-align:center;">配送时间</th> <th style="text-align:center;display:none;">操作</th> <!-- 新增操作列 --> </tr> </thead> <tbody> <c:forEach var="list" items="${list}" varStatus="i"> <tr class="tr_${i.index+1}" data-gid="${list.GID}" data-wpbh="${list.wpbh}" data-dwmc="${list.dwmc}"data-wpmc="${list.wpmc}" data-MONDAY="${list.MONDAY}" data-TUESDAY="${list.TUESDAY}" data-WEDNESDAY="${list.WEDNESDAY}"data-THURSDAY="${list.THURSDAY}" data-FRIDAY="${list.FRIDAY}" data-HJ="${list.HJ}" data-HJ2="${list.HJ2}"data-KSSJ="${list.KSSJ}" data-JSSJ="${list.JSSJ}" data-saasdm="${list.saasdm}"> <td style="text-align:center;"> <input type="checkbox" class="check-item"> </td> <td class="num " style="text-align:center;"> ${list.DWMC} </td> <td class="num " style="text-align:center;"> ${list.WPMC} </td> <td class="num" style="text-align:right;"> <%-- ${list.MONDAY} --%> ${list.MONDAY}${list.WPMC == '鸡肉' || list.WPMC == '猪肉' ? 'kg' : ''} </td> <td class="num" style="text-align:right;"> ${list.TUESDAY}${list.WPMC == '鸡肉' || list.WPMC == '猪肉' ? 'kg' : ''} <%-- ${list.TUESDAY} --%> </td> <td class="num" style="text-align:right;"> ${list.WEDNESDAY}${list.WPMC == '鸡肉' || list.WPMC == '猪肉' ? 'kg' : ''} <%-- ${list.WEDNESDAY} --%> </td> <td class="num" style="text-align:right;"> ${list.THURSDAY}${list.WPMC == '鸡肉' || list.WPMC == '猪肉' ? 'kg' : ''} <%-- ${list.THURSDAY} --%> </td> <td class="num" style="text-align:right;"> ${list.FRIDAY}${list.WPMC == '鸡肉' || list.WPMC == '猪肉' ? 'kg' : ''} <%-- ${list.FRIDAY} --%> </td> <td class="num" style="text-align:right;"> ${list.WPMC == '鸡肉' || list.WPMC == '猪肉' ? list.HJ2 : list.HJ} </td> <!-- <td class="num" style="text-align:right;"> --> <%-- ${list.HJ} --%> <!-- </td> --> <!-- <td class="num" style="text-align:right;"> --> <%-- ${list.HJ2} --%> <!-- </td> --> <td class="num" style="text-align:right;"> ${list.HJ2} ${list.WPMC == '大米(g)' ? '袋' : ''} ${list.WPMC == '面粉(g)' ? '袋' : ''} ${list.WPMC == '食用油(g)' ? '桶' : ''} ${list.WPMC == '鸡蛋(个)' ? '个' : ''} ${list.WPMC == '牛奶(盒)' ? '盒' : ''} ${list.WPMC == '鸡肉' || list.WPMC == '猪肉' ? 'kg' : ''} </td> <!-- <td class="num" style="text-align:right;"> --> <%-- <input type="text" id="txt_PSSJ" class="form-control input-radius date" name="PSSJ" value="${list.PSSJ}"> --%> <!-- </td> --> <!-- 配送时间输入框使用类选择器 --> <td class="num" style="text-align:right;" onclick="handleClick()"> <input type="text" class="txt-pssj form-control input-radius date" name="PSSJ" value="${list.PSSJ}"> </td> <td style="text-align:center;display:none;" > <button type="button" class="btn btn-primary btn-xs btn-save" >保存</button> <input type="hidden" id="txt_kssj" class="form-control input-radius date" name="kssj" value="${list.kssj}"> <input type="hidden" id="txt_jssj" class="form-control input-radius date" name="jssj" value="${list.jssj}"> <input type="hidden" id="txt_wpbh" class="form-control input-radius wpbh" name="wpbh" value="${list.wpbh}"> <input type="hidden" class="saasdm" value="${list.saasdm}"> <!-- 统一为小写 --> </td> </tr> </c:forEach> </tbody> </table> </div> </div> </div>前台html是这样的
05-21
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值