点击多次每次实现不一样的的效果
$(function(){ ?????var count=1; ?????$(".btn").click(function(){ ?????????count++; ?????????if(count%2==0){ ????????????????alert("第一个点击"); ??????????} else{ ?????????????????alert("第二个点击"); ???????????????} ???????}) ???})toggle()方法绑定多个 点击事件 ：当指定元素被点击时，在两个或多个函数之间轮流切换。
如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。
$("button").toggle( ???function(){ ??//事件1：第一次点击 ???????$("body").css("background-color","green"); ???}, ?function(){ ????//事件2：第二次点击 ???????$("body").css("background-color","red"); ???}, ?function(){ ????//事件3：第三次点击 ???????$("body").css("background-color","yellow"); ???});点击一次实现多个不同的效果
on()方法绑定多个事件(这个事件不一定是点击事件与toggle()的用法还是有区别的)
$('.wrap').on({ ??????click:function(){ //事件1：点击事件 ????????????...... ????????}, ?????keydown:function() { //事件2：鼠标按下 ????????????...... ???????}, ?????keyup:function(){ //事件3：鼠标抬起 ????????????...... ???????}通过添加属性来操作元素
<table> ???<thead> ?????????<tr> ?????????????<td>订单</td> ?????????????<td>操作</td> ?????????</tr> ???</thead> ???<tbody id="name-tbody"> ??????????<tr> ?????????????<td>1号订单</td> ?????????????<td> ???????????????????<span>编辑</span> ???????????????????<span ?class="deleteelement" data-toggle="modal" data-target="#sure-cancel">删除</span> ?????????????</td> ??????????</tr> ??????????<tr> ?????????????<td>2号订单</td> ?????????????<td> ???????????????????<span>编辑</span> ???????????????????<span ?class="deleteelement" data-toggle="modal" data-target="#sure-cancel">删除</span> ?????????????</td> ??????????</tr> ???????????<tr> ?????????????<td>3号订单</td> ?????????????<td> ???????????????????<span>编辑</span> ???????????????????<span ?class="deleteelement" data-toggle="modal" data-target="#sure-cancel">删除</span> ?????????????</td> ??????????</tr> ???</tbody></table>//模态框 ???<div id="sure-cancel" class="modal fade" tabindex="-1" style="display: none"> ????????<div class="modal-dialog modal-dialog-centered"> ?????????????<div class="modal-content"> ????????????????????<div class="modal-body text-center"> ?????????????????????????<div><span class="zfs-16">您确定要删除吗?</span></div> ????????????????????</div> ???????????????????<div class="modal-footer justify-content-center"> ?????????????????????????<button data-dismiss="modal" id="delete-sure">确定</button> ?????????????????????????<button data-dismiss="modal" id="delete-cancel">取消</button> ???????????????????</div> ?????????????</div> ?????????</div> ?????</div>//jQuery方法<script> ???$(function(){ ???$("#name-tbody").on("click",".deleteelement",function(){ ???????$(this).parent().parent().addClass("willdelete"); ???????$("#delete-sure").on("click",function(){ ???????????$(".willdelete").remove(); ???????}); ???????$(this).parent().parent().siblings().removeClass("willdelete"); ???})});</script>点击select >中的option切换对应事件(用change而不用click)
?<select class="form-control" id="selectthing"> ???????<option value="thing-1"></option> ???????<option value="thing-2"></option> ???????<option value="thing-3"></option> ?</select> ?jQuery方法 ?方法一 ?$(function(){ ?????$("#selectthing").on("change",function(){ ???????????if($("option:selected",this).val()=="thing-1"){ ?????????????????alert("这是第一个事件"); ???????????}else if($("option:selected",this).val()=="thing-2"){ ?????????????????alert("这是第二个事件"); ???????????}else if($("option:selected",this).val()=="thing-3"){ ?????????????????alert("这是第三个事件"); ???????????} ?????}) ?}) ?方法二 ?$(function(){ ?????$("#selectthing").on("change",function(){ ???????????if($("option:selected",this).index()==0){ ?????????????????alert("这是第一个事件"); ???????????}else if($("option:selected",this).index()==2){ ?????????????????alert("这是第二个事件"); ???????????}else if($("option:selected",this).index()==3){ ?????????????????alert("这是第三个事件"); ???????????} ?????}) ?})jQuery应用技巧
原文地址：https://www.cnblogs.com/huihuihero/p/jquery.html