网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jQuery 常用代码集锦(必看篇)
内容
    下面小编就为大家带来一篇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},
     );
    }
    //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><a href="#">进行中</a></li>
          <li><a href="#">未开始</a></li>
          <li><a href="#">已结束</a></li>
          <li><a href="#">全部</a></li>
         </ul>
     <div id="tabs_container">
       <div  >1</div>
       <div  >2</div>
       <div  >3</div>
       <div  >4</div>
     </div>
    </div>
    以上这篇jQuery 常用代码集锦(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/20 22:19:23