直接拿来用的15个jQuery代码片段

前端技术 2023/09/07 JavaScript

发表过的一篇《10个超级有用的PHP代码片段果断收藏》吗？本文笔者将继续为你奉上15个超级有用的jQuery代码片段。

jQuery里提供了许多创建交互式网站的方法，在开发Web项目时，开发人员应该好好利用jQuery代码，它们不仅能给网站带来各种动画、特效，还会提高网站的用户体验。

下面就让我们一起来享受jQuery代码的魅力之处吧。

1.预加载图片

(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\");

2. 让页面中的每个元素都适合在移动设备上展示

var scr = document.createElement(\'script\'); 
scr.setAttribute(\'src\', \'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js\'); 
document.body.appendChild(scr); 
scr.onload = function(){ 
  $(\'div\').attr(\'class\', \'\').attr(\'id\', \'\').css({ 
    \'margin\' : 0, 
    \'padding\' : 0, 
    \'width\': \'100%\', 
    \'clear\':\'both\' 
  }); 
};

3.图像等比例缩放

$(window).bind(\"load\", function() { 
  // IMAGE RESIZE 
  $(\'#product_cat_list img\').each(function() { 
    var maxWidth = 120; 
    var maxHeight = 120; 
    var ratio = 0; 
    var width = $(this).width(); 
    var height = $(this).height(); 
    if(width > maxWidth){ 
      ratio = maxWidth / width; 
      $(this).css(\"width\", maxWidth); 
      $(this).css(\"height\", height * ratio); 
      height = height * ratio; 
    } 
    var width = $(this).width(); 
    var height = $(this).height(); 
    if(height > maxHeight){ 
      ratio = maxHeight / height; 
      $(this).css(\"height\", maxHeight); 
      $(this).css(\"width\", width * ratio); 
      width = width * ratio; 
    } 
  }); 
  //$(\"#contentpage img\").show(); 
  // IMAGE RESIZE 
});

4.返回页面顶部

// Back To Top 
$(document).ready(function(){  
 $(\'.top\').click(function() {  
   $(document).scrollTo(0,500);  
 }); 
});  
//Create a link defined with the class .top 
<a href=\"#\" class=\"top\">Back To Top</a>

5.使用jQuery打造手风琴式的折叠效果

var accordion = { 
   init: function(){ 
      var $container = $(\'#accordion\'); 
      $container.find(\'li:not(:first) .details\').hide(); 
      $container.find(\'li:first\').addClass(\'active\'); 
      $container.on(\'click\',\'li a\',function(e){ 
         e.preventDefault(); 
         var $this = $(this).parents(\'li\'); 
         if($this.hasClass(\'active\')){ 
             if($(\'.details\').is(\':visible\')) { 
                $this.find(\'.details\').slideUp(); 
             } else { 
                $this.find(\'.details\').slideDown(); 
             } 
         } else { 
             $container.find(\'li.active .details\').slideUp(); 
             $container.find(\'li\').removeClass(\'active\'); 
             $this.addClass(\'active\'); 
             $this.find(\'.details\').slideDown(); 
         } 
      }); 
   } 
};

6.通过预加载图片廊中的上一幅下一幅图片来模仿Facebook的图片展示方式

var nextimage = \"/images/some-image.jpg\"; 
$(document).ready(function(){ 
window.setTimeout(function(){ 
var img = $(\"\").attr(\"src\", nextimage).load(function(){ 
//all done 
}); 
}, 100); 
});

7.使用jQuery和Ajax自动填充选择框

$(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 += \' 
\' + j[i].optionDisplay + \' 
\'; 
} 
$(\"select#ctlPerson\").html(options); 
}) 
}) 
})

8.自动替换丢失的图片

// Safe Snippet 
$(\"img\").error(function () { 
  $(this).unbind(\"error\").attr(\"src\", \"missing_image.gif\"); 
}); 
// Persistent Snipper 
$(\"img\").error(function () { 
  $(this).attr(\"src\", \"missing_image.gif\"); 
});

9.在鼠标悬停时显示淡入/淡出特效

$(document).ready(function(){ 
  $(\".thumbs img\").fadeTo(\"slow\", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads 
  $(\".thumbs img\").hover(function(){ 
    $(this).fadeTo(\"slow\", 1.0); // This should set the opacity to 100% on hover 
  },function(){ 
    $(this).fadeTo(\"slow\", 0.6); // This should set the opacity back to 60% on mouseout 
  }); 
});

10.清空表单数据

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; 
 }); 
};

11.预防对表单进行多次提交

$(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; 
  } 
 }); 
});

12.动态添加表单元素

//change event on password1 field to prompt new input 
$(\'#password1\').change(function() { 
    //dynamically create new input and insert after password1 
    $(\"#password1\").append(\"\"); 
});

 

13.让整个Div可点击

blah blah blah. link 
The following lines of jQuery will make the entire div clickable: $(\".myBox\").click(function(){ window.location=$(this).find(\"a\").attr(\"href\"); return false; });

14.平衡高度或Div元素

var maxHeight = 0; 
$(\"div\").each(function(){ 
  if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } 
}); 
$(\"div\").height(maxHeight);

15. 在窗口滚动时自动加载内容

var loading = false; 
$(window).scroll(function(){ 
  if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ 
    if(loading == false){ 
      loading = true; 
      $(\'#loadingbar\').css(\"display\",\"block\"); 
      $.get(\"load.php?start=\"+$(\'#loaded_max\').val(), function(loaded){ 
        $(\'body\').append(loaded); 
        $(\'#loaded_max\').val(parseInt($(\'#loaded_max\').val())+50); 
        $(\'#loadingbar\').css(\"display\",\"none\"); 
        loading = false; 
      }); 
    } 
  } 
}); 
$(document).ready(function() { 
  $(\'#loaded_max\').val(50); 
});

本文收集的这15段非常实用的jQuery代码片段，你可以直接复制黏贴到代码里，但请开发者注意了，要理解代码再使用哦。

本文地址：https://www.stayed.cn/item/20397

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案