jQuery应用技巧

Posted 2021-11-26 huihuihero

点击多次每次实现不一样的的效果

$(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("这是第三个事件");
            }
      })
  })