七个不允许错过的jQuery小技巧

前端技术 2023/09/06 JavaScript

jQuery是一款轻量级的JavaScript库，是最流行的客户端HTML脚本之一，它在WEB设计师和开发者中非常的有名，并且有非常多有用的插件和技术。

本文我们将为大家分享一些jQuery小技巧：

一、在新窗口打开链接

用下面的代码，你点击链接即可在新窗口打开：

$(document).ready(function() {
  //select all anchor tags that have http in the href
  //and apply the target=_blank
  $(\"a[href^=\'http\']\").attr(\'target\',\'_blank\');
});

二、设置等高的列

应用下面的代码，可以使得你的WEB应用每一列高度都想等：

<div class=\"equalHeight\" style=\"border:1px solid\">
  <p>First Line</p>
  <p>Second Line</p>
  <p>Third Line</p>
</div>
<div class=\"equalHeight\" style=\"border:1px solid\">
  <p>Column Two</p>
</div>
<script src=\"http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js\"></script>
<script>
$(document).ready(function() {
  equalHeight(\'.equalHeight\');
});
//global variable, this will store the highest height value
var maxHeight = 0;

function equalHeight(col) {
  //Get all the element with class = col
  col = $(col);
  //Loop all the col
  col.each(function() {
    //Store the highest value
    if ($(this).height() > maxHeight) {
      maxHeight = $(this).height();
    }
  });
  //Set the height
  col.height(maxHeight);
}
</script>

三、jQuery预加载图像

这个小技巧可以提升页面加载图片的速度：

jQuery.preloadImagesInWebPage = function() {
  for (var ctr = 0; ctr & lt; arguments.length; ctr++) {
    jQuery(\"\").attr(\"src\", arguments[ctr]);
  }
}

// 使用方法：
$.preloadImages(\"image1.gif\", \"image2.gif\", \"image3.gif\");

// 检查图片是否被加载
$(\'#imageObject\').attr(\'src\', \'image1.gif\').load(function() {
  alert(\'The image has been loaded…\');
});

四、禁用鼠标右键

$(document).ready(function() {
  //catch the right-click context menu
  $(document).bind(\"contextmenu\", function(e) {
    //warning prompt - optional
    alert(\"No right-clicking!\");

    //delete the default context menu
    return false;
  });
});

五、设定计时器

$(document).ready(function() {
  window.setTimeout(function() {
    // some code
  }, 500);
});

六、计算子元素的个数

<div id=\"foo\">
  <div id=\"bar\"></div>
  <div id=\"baz\">
    <div id=\"biz\"></div>
    <span><span></span></span>
  </div>
</div>
<script src=\"http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js\"></script>
<script type=\"text/javascript\">
  //jQuery code to count child elements $(\"#foo > div\").size()
alert($(\"#foo > div\").size())
</script>

七、把元素定位到页面中间

<div id=\"foo\" style=\"width:200px;height: 200px;background: #ccc;\"></div>
<script src=\"http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js\"></script>
<script type=\"text/javascript\">
jQuery.fn.center = function() {
  this.css(\"position\", \"absolute\");
  this.css(\"top\", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + \"px\");
  this.css(\"left\", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + \"px\");
  return this;
}
//Use the above function as:
$(\'#foo\').center();
</script>

读到这里的朋友就知道你没有错过学习的机会，把这些小技巧积累起来，一定会帮助大家设计出有创意和精美的Web页面。

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

转载请注明出处。

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

我的博客

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

我的标签

随笔档案