zoukankan      html  css  js  c++  java
  • jQuery应用技巧

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

    $(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("这是第三个事件");
                }
          })
      })
    
  • 相关阅读:
    WebClient设置Expect: 100-continue
    ActiveX控件注册不起作用的解决办法
    RadioButtonFor值为false.默认选中的问题
    Ueditor插入script标签
    Ueditor上传图片到本地改造到上传图片到七牛云存储
    让网页显示ajax的查询数据
    今天升级win10.vs调试程序各种崩溃
    visual assist x vs2012不智能提示
    几道 javascript 题,你全对了吗?
    Node.js中使用TCP套接字编程
  • 原文地址:https://www.cnblogs.com/huihuihero/p/jquery.html
Copyright © 2011-2022 走看看