jQuery封装好的一些常用的操作
admin
2023-08-02 15:43:17
0

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

相关内容

热门资讯

Mobi、epub格式电子书如... 在wps里全局设置里有一个文件关联,打开,勾选电子书文件选项就可以了。
定时清理删除C:\Progra... C:\Program Files (x86)下面很多scoped_dir开头的文件夹 写个批处理 定...
500 行 Python 代码... 语法分析器描述了一个句子的语法结构,用来帮助其他的应用进行推理。自然语言引入了很多意外的歧义,以我们...
scoped_dir32_70... 一台虚拟机C盘总是莫名奇妙的空间用完,导致很多软件没法再运行。经过仔细检查发现是C:\Program...
65536是2的几次方 计算2... 65536是2的16次方:65536=2⁶ 65536是256的2次方:65536=256 6553...
小程序支付时提示:appid和... [Q]小程序支付时提示:appid和mch_id不匹配 [A]小程序和微信支付没有进行关联,访问“小...
pycparser 是一个用... `pycparser` 是一个用 Python 编写的 C 语言解析器。它可以用来解析 C 代码并构...
微信小程序使用slider实现... 众所周知哈,微信小程序里面的音频播放是没有进度条的,但最近有个项目呢,客户要求音频要有进度条控制,所...
Apache Doris 2.... 亲爱的社区小伙伴们,我们很高兴地向大家宣布,Apache Doris 2.0.0 版本已于...
python清除字符串里非数字... 本文实例讲述了python清除字符串里非数字字符的方法。分享给大家供大家参考。具体如下: impor...