7 nützliche jQuery-Codefragmente für share_jquery

jQuery ist eine leichte JavaScript-Bibliothek und eines der beliebtesten clientseitigen HTML-Skripte. Sie ist unter WEB-Designern und -Entwicklern sehr bekannt und verfügt über viele nützliche Plug-Ins und Technologien, die Menschen bei der kreativen und schönen Entwicklung unterstützen WEB-Seiten.

Heute geben wir einige Tipps für jQuery-Benutzer, die Ihnen helfen werden, das Layout und die Anwendung Ihrer Website kreativer und funktionaler zu gestalten.

1. Öffnen Sie den Link in einem neuen Fenster

Verwenden Sie den folgenden Code. Sie können auf den Link klicken, um ihn in einem neuen Fenster zu öffnen:

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

2. Spalten mit gleichen Höhen festlegen

Wenden Sie den folgenden Code an, um die Höhe jeder Spalte in Ihrer WEB-Anwendung warten zu lassen:

<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>

3. jQuery vorinstallierte Bilder

Dieser kleine Trick kann die Geschwindigkeit beim Laden von Bildern auf der Seite verbessern:

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

4. Deaktivieren Sie die rechte Maustaste

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

5. Timer einstellen

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

6. Berechnen Sie die Anzahl der Unterelemente

<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>

7. Positionieren Sie das Element in der Mitte der Seite

<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>