zoukankan      html  css  js  c++  java
  • jQuery 常用代码集锦

    1. 选择或者不选页面上全部复选框

    var tog = false; // or true if they are checked on load
    $('a').click(function() {
        $("input[type=checkbox]").attr("checked",!tog);
        tog = !tog;
    });

    2. 取得鼠标的X和Y坐标

    $(document).mousemove(function(e){
    $(document).ready(function() {
    $().mousemove(function(e){
    $('#XY').html("Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY);
    });
    });

    3. 判断一个图片是否加载完全

    $('#theGBin1Image').attr('src', 'image.jpg').load(function() {
    alert('This Image Has Been Loaded');
    });

    4. 判断cookie是否激活或者关闭

    var dt = new Date();
    dt.setSeconds(dt.getSeconds() + 60);
    document.cookie = "cookietest=1; expires=" + dt.toGMTString();
    var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
    if(!cookiesEnabled)
    {
      //cookies have not been enabled
    }

    5. 强制过期cookie

    var date = new Date();
    date.setTime(date.getTime() + (x * 60 * 1000));
    $.cookie('example', 'foo', { expires: date });

    6. 在表单中禁用“回车键”,表单的操作中需要防止用户意外的提交表单

    $("#form").keypress(function(e) {
      if (e.which == 13) {
        return false;
      }
    });

    7. 清除所有的表单数据

    function clearForm(form) {
      // iterate over all of the inputs for the form
      // element that was passed in
      $(':input', form).each(function() {
        var type = this.type;
        var tag = this.tagName.toLowerCase(); // normalize case
        // it's ok to reset the value attr of text inputs,
        // password inputs, and textareas
        if (type == 'text' || type == 'password' || tag == 'textarea')
          this.value = "";
        // checkboxes and radios need to have their checked state cleared
        // but should *not* have their 'value' changed
        else if (type == 'checkbox' || type == 'radio')
          this.checked = false;
        // select elements need to have their 'selectedIndex' property set to -1
        // (this works for both single and multiple select elements)
        else if (tag == 'select')
          this.selectedIndex = -1;
      });
    };

    8.禁止多次递交表单

    $(document).ready(function() {
      $('form').submit(function() {
        if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
          jQuery.data(this, "disabledOnSubmit", { submited: true });
          $('input[type=submit], input[type=button]', this).each(function() {
            $(this).attr("disabled", "disabled");
          });
          return true;
        }
        else
        {
          return false;
        }
      });
    });

    9. 自动将数据导入selectbox中

    $(function(){
      $("select#ctlJob").change(function(){
        $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
          var options = '';
          for (var i = 0; i < j.length; i++) {
            options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
          }
          $("select#ctlPerson").html(options);
        })
      })
    })

    10. 创建一个嵌套的过滤器

    .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素

    11. 使用has()来判断一个元素是否包含特定的class或者元素

    //jQuery 1.4.* includes support for the has method. This method will find  
    //if a an element contains a certain other element class or whatever it is  
    //you are looking for and do anything you want to them. 
    $("input").has(".email").addClass("email_icon");

    12. 使用jQuery切换样式

    //Look for the media-type you wish to switch then set the href to your new style sheet  
    $('link[media='screen']').attr('href', 'Alternative.css');  

    13. 如何正确使用ToggleClass

    //Toggle class allows you to add or remove a class  
    //from an element depending on the presence of that  
    //class. Where some developers would use:  
    a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');  
    //toggleClass allows you to easily do this using  
    a.toggleClass('blueButton'); 

    14. 使用jQuery来替换一个元素

    $('#thatdiv').replaceWith('fnuh');

    15.绑定一个函数到一个事件

    $('#foo').bind('click', function() {  
      alert('User clicked on "foo."');  
    }); 

    16. 使用jQuery预加载图片

    jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } };  
    // Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg'); 

    17. 设置任何匹配一个选择器的事件处理程序

    $('button.someClass').live('click', someFunction);
      //Note that in jQuery 1.4.2, the delegate and undelegate options have been
      //introduced to replace live as they offer better support for context
        //For example, in terms of a table where before you would use..
      // .live()
      $("table").each(function(){
        $("td", this).live("hover", function(){
        $(this).toggleClass("hover");
        });
      });
      //Now use..
      $("table").delegate("td", "hover", function(){
      $(this).toggleClass("hover");
    });

    18. 自动的滚动到页面特定区域

    jQuery.fn.autoscroll = function(selector) {
      $('html,body').animate(
        {scrollTop: $(selector).offset().top},
        500
      );
    }
    //Then to scroll to the class/area you wish to get to like this:
    $('.area_name').autoscroll();

    19.检测各种浏览器

    Detect Safari (if( $.browser.safari)),
    Detect IE6 and over (if ($.browser.msie && $.browser.version > 6 )),
    Detect IE6 and below (if ($.browser.msie && $.browser.version <= 6 )),
    Detect FireFox 2 and above (if ($.browser.mozilla && $.browser.version >= '1.8' )

    20.限制textarea的字符数量

    jQuery.fn.maxLength = function(max){
      this.each(function(){
        var type = this.tagName.toLowerCase();
        var inputType = this.type? this.type.toLowerCase() : null;
        if(type == "input" && inputType == "text" || inputType == "password"){
          //Apply the standard maxLength
          this.maxLength = max;
        }
        else if(type == "textarea"){
          this.onkeypress = function(e){
            var ob = e || event;
            var keyCode = ob.keyCode;
            var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
            return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
          };
          this.onkeyup = function(){
            if(this.value.length > max){
              this.value = this.value.substring(0,max);
            }
          };
        }
      });
    };
    //Usage:
    $('#gbin1textarea').maxLength(500);

    21.使用jQuery克隆元素

    var cloned = $('#gbin1div').clone();

    22. 元素屏幕居中

    jQuery.fn.center = function () {
      this.css('position','absolute');
      this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
      this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;
    }
    //Use the above function as: $('#gbin1div').center();

    23 .简单的tab标签切换

    jQuery('#meeting_tabs ul li').click(function(){
            jQuery(this).addClass('tabulous_active').siblings().removeClass('tabulous_active');
            jQuery('#tabs_container>.pane:eq('+jQuery(this).index()+')').show().siblings().hide();   
     })
    
    <div id="meeting_tabs">
                    <ul>
                         <li class="tabulous_active"><a href="#" title="">进行中</a></li>
                          <li><a href="#" title="">未开始</a></li>
                          <li><a href="#" title="">已结束</a></li>
                           <li><a href="#" title="">全部</a></li>
                     </ul>
       <div id="tabs_container">
                <div  class="pane"     >1</div>
                <div  class="pane"     >2</div>
                <div  class="pane"     >3</div>
               <div  class="pane"     >4</div>
      </div>
    </div>
  • 相关阅读:
    windows系统-web渗透工具-AWVS
    PHP.9-HTML+CSS(三)-CSS样式
    PHP.10-PHP实例(一)-简单的计算器
    PHP.8-HTML+CSS(二)-HTML详解
    PHP.7-HTML+CSS(一)-HTML语法、常用字符实体、颜色代码
    noip2018 铺设道路
    noip2018游记
    luogu题解P1967货车运输--树链剖分
    ZROI-Day2比赛解题报告
    ZROI Day1 比赛解题报告
  • 原文地址:https://www.cnblogs.com/peterwong666/p/5477215.html
Copyright © 2011-2022 走看看