Tujuh petua jQuery yang anda tidak boleh ketinggalan_jquery

jQuery ialah perpustakaan JavaScript yang ringan dan salah satu skrip HTML pihak pelanggan yang paling popular Ia sangat terkenal dalam kalangan pereka dan pembangun WEB serta mempunyai banyak pemalam dan teknologi yang berguna.

Dalam artikel ini kami akan berkongsi beberapa petua jQuery dengan anda:

1 Buka pautan dalam tetingkap baharu

Gunakan kod berikut, anda boleh klik pautan untuk membukanya dalam tetingkap baharu:

$(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. Tetapkan lajur dengan ketinggian yang sama

Gunakan kod berikut untuk membuat ketinggian setiap lajur dalam aplikasi WEB anda menunggu:

<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. imej pramuat jQuery

Helah kecil ini boleh meningkatkan kelajuan memuatkan imej pada halaman:

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. Lumpuhkan butang kanan tetikus

$(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. Tetapkan pemasa

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

6. Kira bilangan sub-elemen

<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 Letakkan elemen di tengah-tengah halaman

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

Rakan-rakan yang telah membaca ini akan tahu bahawa anda tidak melepaskan peluang untuk belajar dengan mengumpulkan petua ini pasti akan membantu semua orang mereka bentuk halaman web yang kreatif dan cantik.