首页 > PHP资讯 > HTML5培训技术 > 18个实用的jQuery代码片段

18个实用的jQuery代码片段

HTML5培训技术

  jQuery是当今最流行Web开发必备javascript库。本文收集了18个很棒的jQuery代码片段,希望这些代码片段能对大家有帮助。

  jQuery实现的内链接平滑滚动

  不需要使用太复杂的插件,只要使用下载这段代码即可实现基于内部链接的平滑滚动

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var anchor = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 500, 'swing', function () {
window.location.hash = anchor;
});
});
  使用jQuery获取所有节点
var $element = $('#gbtags');
    var $nodes = $element.contents();
    $nodes.each(function() {
        if(this.nodeType === 3 && $.trim($(this).text())) {
        $(this).wrap('');
    }
});
  限制选择框选择个数
$("#categories option").click(function(e){
    if ($(this).parent().val().length < 2) {
        $(this).removeAttr("selected");
    }
});
  jQuery使用通配符来删除class
var _c = 'your-icon-class'
$('.currency').removeClass (function (index, css) {
    return (css.match (/bicon-S+/g) || []).join(' ');
}).addClass('icon-'+_c);
  切换启用和禁用
/* HTML
|
|

|
|
*/
// Plugin
(function ($) {
    $.fn.toggleDisabled = function () {
        return this.each(function () {
            var $this = $(this);
            if ($this.attr('disabled')) $this.removeAttr('disabled');
            else $this.attr('disabled', 'disabled');
        });
    };
})(jQuery);
// TEST
$(function () {
    $('input:button').click(function () {
        $('input:text').toggleDisabled();
    });
});
  平滑滚动返回顶端
admin10000.com

*/
  制作等高的列 
var max_height = 0;
$("div.col").each(function(){
    if ($(this).height() > max_height) { max_height = $(this).height(); }
});
$("div.col").height(max_height);
  图片预加载
(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
jQuery.preLoadImages("image1.gif", "/path/to/image2.png");
  获取 URL 中传递的参数
$.urlParam = function(name){
        var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
        if (!results) { return 0; }
        return results[1] || 0;
}
  禁用表单的回车键提交
$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持23不支持0