18个非常棒的jQuery代码片段

前端技术 2023/09/01 JavaScript

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

2、使用jQuery获取所有节点

var $element = $(\'#gbtags\');
 var $nodes = $element.contents();
 $nodes.each(function() {
  if(this.nodeType === 3 && $.trim($(this).text())) {
  $(this).wrap(\'\');
 }
});

3、限制选择框选择个数

$(\"#categories option\").click(function(e){
 if ($(this).parent().val().length < 2) {
  $(this).removeAttr(\"selected\");
 }
});

4、jQuery使用通配符来删除class

var _c = \'your-icon-class\'
 
$(\'.currency\').removeClass (function (index, css) {
 return (css.match (/\\bicon-\\S+/g) || []).join(\' \');
}).addClass(\'icon-\'+_c);

5、切换启用和禁用

/* HTML
|
|
<input type=\"text\" value=\"欢迎访问www.admin10000.com\" /><input type=\"button\" value=\"禁用按钮\" />
|
|
*/
 
// 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();
 });
});

6、平滑滚动返回顶端

<h1 id=\"anchor\">admin10000.com</h1>
<a class=\"topLink\" href=\"#anchor\">返回顶端</a>
 
$(document).ready(function () {
 
 $(\"a.topLink\").click(function () {
  $(\"html, body\").animate({
   scrollTop: $($(this).attr(\"href\")).offset().top + \"px\"
  }, {
   duration: 500,
   easing: \"swing\"
  });
  return false;
 });
 
});

7、使用jQuery和Google Analytics来跟踪表单

var array1 = [];
$(document).ready(function () {
 $(\'input\').change(function () {
  var formbox = $(this).attr(\'id\');
  array1.push(formbox);
  console.log(\"you filled out box \" + array1);
 });
 $(\'#submit\').click(function () {
  console.log(\'tracked \' + array1);
  //alert(\'this is the order of boxes you filled out: \' + array1);
  _gaq.push([\'_trackEvent\', \'Form\', \'completed\', \'\"\' + array1 + \'\"\']);
 });
});

8、超简单的密码强度提示

$(\'#pass\').keyup(function (e) {
 var strongRegex = new RegExp(\"^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$\", \"g\");
 var mediumRegex = new RegExp(\"^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$\", \"g\");
 var enoughRegex = new RegExp(\"(?=.{6,}).*\", \"g\");
 if (false == enoughRegex.test($(this).val())) {
  $(\'#passstrength\').html(\'More Characters\');
 } else if (strongRegex.test($(this).val())) {
  $(\'#passstrength\').className = \'ok\';
  $(\'#passstrength\').html(\'Strong!\');
 } else if (mediumRegex.test($(this).val())) {
  $(\'#passstrength\').className = \'alert\';
  $(\'#passstrength\').html(\'Medium!\');
 } else {
  $(\'#passstrength\').className = \'error\';
  $(\'#passstrength\').html(\'Weak!\');
 }
 return true;
});

9、jQuery生成一个自动停靠页尾效果

// Window load event used just in case window height is dependant upon images
$(window).bind(\"load\", function () {
 var footerHeight = 0,
  footerTop = 0,
  $footer = $(\"#footer\");
 positionFooter();
 
 function positionFooter() {
  footerHeight = $footer.height();
  footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + \"px\";
  /* DEBUGGING
console.log(\"Document height: \", $(document.body).height());
console.log(\"Window height: \", $(window).height());
console.log(\"Window scroll: \", $(window).scrollTop());
console.log(\"Footer height: \", footerHeight);
console.log(\"Footer top: \", footerTop);
*/
  if (($(document.body).height() + footerHeight) < $(window).height()) {
   $footer.css({
    position: \"absolute\"
   }).stop().animate({
    top: footerTop
   });
  } else {
   $footer.css({
    position: \"static\"
   });
  }
 }
 
 $(window)
  .scroll(positionFooter)
  .resize(positionFooter);
});

10、预防对表单进行多次提交

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

11、图像等比例缩放

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

12、鼠标滑动时的渐入和渐出

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

13、制作等高的列 

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

14、图片预加载

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

15、获取 URL 中传递的参数

$.urlParam = function(name){
 var results = new RegExp(\'[\\\\?&]\' + name + \'=([^&#]*)\').exec(window.location.href);
 if (!results) { return 0; }
 return results[1] || 0;
}

16、禁用表单的回车键提交

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

17、让整个DIV可以被点击

<div class = \"myBox\" > 
 < a href = \"http://www.phpstudy.net\" > www.phpstudy.net < /a>
</div > 
 
$(\".myBox\").click(function(){
 window.location=$(this).find(\"a\").attr(\"href\");
 return false;
});

18、在新窗口打开链接 (target=”blank”)    

$(\'a[@rel$=\'external\']\').click(function(){
   this.target = \"_blank\";
});

 大家可以结合之前小编整理的文章进行学习，把实用的jQuery代码片段进行汇总，以便日后学习使用。

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

转载请注明出处。

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

我的博客

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

我的标签

随笔档案