中软首页
●  教育部授予:“软件工程专业大学生实习实训基地”资质
●  商务部授予:“中国服务外包示范培训中心”资质
●  工信部授予:国家信息技术紧缺人才培养工程“521计划”资格
●  获得腾讯授予:中国IT教育十大影响力品牌

≡ 技术知识库
当前位置:网站首页>技术知识库>>文章内容
10个jQuery小技巧
作者:   来源:    时间:2016-05-20 15:59:59    字体:[大] [中] [小]

1. 禁止右键点击
$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

2. 隐藏搜索文本框文字
$(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. 在新窗口中打开链接
$(document).ready(function() {
   //Example 1: Every link will open in a new window
   $('a[href^="http://"]').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. 检测浏览器
$(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. 预加载图片
$(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[href*=#]').click(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
&& location.hostname == this.hostname) {
   var $target = $(this.hash);
   $target = $target.length && $target
   || $('[name=' + this.hash.slice(1) +']');
   if ($target.length) {
  var targetOffset = $target.offset().top;
  $('html,body')
  .animate({scrollTop: targetOffset}, 900);
    return false;
   }
  }
  });
// how to use
// place this where you want to scroll to

// the link
go to top
});

7. 获得鼠标指针XY值
$(document).ready(function() {
   $().mousemove(function(e){
     //display the x and y axis values inside the div with the id XY
    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
  });
// how to use


});

8.检查图片是否加载完成
有时候你需要确保图片完成加载完成以便执行后面的操作:
$('img').load(function () {
  console.log('image load successful');
});
你可以把 img 替换为其他的 ID 或者 class 来检查指定图片是否加载完成。

9.自动修改破损图像
如果你碰巧在你的网站上发现了破碎的图像链接,你可以用一个不易被替换的图像来代替它们。添加这个简单的代码可以节省很多麻烦:
$('img').on('error', function () {
  $(this).prop('src', 'img/broken.png');
});
即使你的网站没有破碎的图像链接,添加这段代码也没有任何害处。

10. jQuery延时加载功能
$(document).ready(function() {
   window.setTimeout(function() {
     // do something
   }, 1000);
});


中软国际教育科技微网页二维码
版权所有 © 2008-2014 北京中软国际教育科技股份有限公司 京ICP备09078625号-2 京公安备11010802014778号 隐私声明 | 联系我们 | 网站地图

华东

华南

华中

华北

西北

西南

东北