汇盛国际娱乐:jQuery实用技巧必备(上)

时间: 作者:当九

  

[jquery开发技巧,jquery技巧,jquery常用技巧,jquery操作技巧,如何使用jquery]jQuery实用技巧必备(上)

  

本文实例总结了经典且实用的jQuery代码开发技巧。分享给大家供大家参考。具体如下:  

  

1. 禁止右键点击  
  

  
  
  $(document).ready(function(){  $(document).bind("contextmenu",function(e){  return false;  });  });
  
  

2. 隐藏搜索文本框文字  
  Hide when clicked in the search field, the value.(example can be found below in the comment fields)  

  
  
  $(document).ready(function() {  $("input.text1").val("Enter your search text here");  textFill($('input.text1'));  });  function textFill(input){ //input focus text function  var originalvalue = input.val();  input.focus( function(){  if( $.trim(input.val()) == originalvalue ){ input.val(''); }  });  input.blur( function(){  if( $.trim(input.val()) == '' ){ input.val(originalvalue); }  });  }
  
  

3. 在新窗口中打开链接  
  XHTML 1.0 Strict doesn't allow this attribute in the code, so use this to keep the code valid.

  

  
  
  $(document).ready(function() {  //Example 1: Every link will open in a new window  $('a[href^=""]').attr("target", "_blank");  //Example 2: Links with the rel="external" attribute will only open in a new window  $('a[@rel$='external']').click(function(){  this.target = "_blank";  });  });  // how to use  open link
  
  

4. 检测浏览器  
  
注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量  

  
  
  $(document).ready(function() {  // Target Firefox 2 and above  if ($.browser.mozilla && $.browser.version >= "1.8" ){  // do something  }  // Target Safari  if( $.browser.safari ){  // do something  }  // Target Chrome  if( $.browser.chrome){  // do something  }  // Target Camino  if( $.browser.camino){  // do something  }  // Target Opera  if( $.browser.opera){  // do something  }  // Target IE6 and below  if ($.browser.msie && $.browser.version <= 6 ){  // do something  }  // Target anything above IE6  if ($.browser.msie && $.browser.version > 6){  // do something  }  });  
  
  

5. 预加载图片  
  This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.

  

  
  
  $(document).ready(function() {  jQuery.preloadImages = function()  {  for(var i = 0; i").attr("src", arguments[i]);  }  }  // how to use  $.preloadImages("image1.jpg");  });
  
  

6. 页面样式切换  

  
  
  $(document).ready(function() {  $("a.Styleswitcher").click(function() {  //swicth the LINK REL attribute with the value in A REL attribute  $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));  });  // how to use  // place this in your header    // the links  Default Theme  Red Theme  Blue Theme  });
  
  

7. 列高度相同  
  如果使用了两个CSS列,使用此种方式可以是两列的高度相同。

  

  
  
  $(document).ready(function() {  function equalHeight(group) {  tallest = 0;  group.each(function() {  thisHeight = $(this).height();  if(thisHeight > tallest) {  tallest = thisHeight;  }  });  group.height(tallest);  }  // how to use  $(document).ready(function() {  equalHeight($(".left"));  equalHeight($(".right"));  });  });
  
  

8. 动态控制页面字体大小  
  用户可以改变页面字体大小  

  
  
  $(document).ready(function() {  // Reset the font size(back to default)  var originalFontSize = $('html').css('font-size');  $(".resetFont").click(function(){  $('html').css('font-size', originalFontSize);  });  // Increase the font size(bigger font0  $(".increaseFont").click(function(){  var currentFontSize = $('html').css('font-size');  var currentFontSizeNum = parseFloat(currentFontSize, 10);  var newFontSize = currentFontSizeNum*1.2;  $(汇盛国际注册'html').css('font-size', newFontSize);  return false;  });  // Decrease the font size(smaller font)  $(".decreaseFont").click(function(){  var currentFontSize = $('html').css('font-size');  var currentFontSizeNum = parseFloat(currentFontSize, 10);  var newFontSize = currentFontSizeNum*0.8;  $('html').css('font-size', newFontSize);  return false;  });  });
                    
(责任编辑:admin)
				

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | 特效插件 | 常用代码 | 样式素材 | 脚本代码 | css特效

Copyright © 2017-2018 汇盛国际 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 汇盛国际平台