7 useful jQuery code snippets to share_jquery-JS Tutorial-php.cn

7 useful jQuery code snippets to share_jquery

WBOY

Release： 2016-05-16 15:58:28

Original

1190 people have browsed it

jQuery is a lightweight JavaScript library and one of the most popular client-side HTML scripts. It is very famous among WEB designers and developers, and has many useful plug-ins and technologies to help WEB development. People develop creative and beautiful WEB pages.

Today we share some tips for jQuery users, which will help you make your website layout and application more creative and functional.

1. Open the link in a new window

Use the following code, you can click the link to open it in a new window:

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

Copy after login

2. Set columns with equal heights

Apply the following code to make the height of each column in your WEB application wait:

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

Copy after login

3. jQuery preloaded images

This little trick can improve the speed of loading images on the page:

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

Copy after login

4. Disable the right mouse button

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

Copy after login

5. Set timer

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

Copy after login

6. Calculate the number of sub-elements

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

Copy after login

7. Position the element in the middle of the page

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

Copy after login