分享jQuery封装好的一些常用操作

 更新时间:2016年07月28日 17:58:04   投稿:daisy  
本文是一些jquery进行封装实现的常用的操作,对平常学习工作很实用,有需要的朋友可以参考下。

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
<a href="http://www.opensourcehunter.com" rel=external>open link</a>

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<ARGUMENTS.LENGTH; jQuery(?<img { 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
<A name=top></A>
// the link
<A href="#top">go to top</A>
});

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
<DIV id=XY></DIV>
});

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

以上就是小编为大家整理的jQuery封装好的一些常用的操作内容,本文很实用建议大家可以收藏起来,方便在日后使用,希望本文对大家学习jQuery有很好的帮助。

相关文章

  • jQuery Mobile开发中日期插件Mobiscroll使用说明

    jQuery Mobile开发中日期插件Mobiscroll使用说明

    这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下
    2016-03-03
  • 使用jQuery制作基础的Web图片轮播效果

    使用jQuery制作基础的Web图片轮播效果

    这篇文章主要介绍了使用jQuery制作基础的Web图片轮播效果的实例,鼠标悬停时可停止而离开时可自动轮播,文中还介绍了一种使用zslider插件来实现的方法,比较犀利,需要的朋友可以参考下
    2016-04-04
  • jQuery实现平滑滚动的标签分栏切换效果

    jQuery实现平滑滚动的标签分栏切换效果

    这篇文章主要介绍了jQuery实现平滑滚动的标签分栏切换效果,涉及jquery鼠标事件及页面元素样式的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery实现单击按钮遮罩弹出对话框效果(1)

    jQuery实现单击按钮遮罩弹出对话框效果(1)

    这篇文章主要为大家详细介绍了jQuery实现单击按钮遮罩弹出对话框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JQuery 封装 Ajax 常用方法(推荐)

    JQuery 封装 Ajax 常用方法(推荐)

    easy-ajax是为了治理前端乱写Ajax方法而生。接下来通过本文给大家介绍JQuery 封装 Ajax 常用方法,需要的朋友参考下
    2017-05-05
  • jQuery.holdReady()方法用法实例

    jQuery.holdReady()方法用法实例

    这篇文章主要介绍了jQuery.holdReady()方法用法,以实例形式分析了holdReady()方法在暂停或者恢复jQuery.ready()事件的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • 查看源码的工具 学习jQuery源码不错的工具

    查看源码的工具 学习jQuery源码不错的工具

    jQuery是一个非常好用的javascript框架,我尤其喜欢它强大的选择器和链式表达式,使得我们能通过简单的语句实现复杂的功能。它还有一个重要的特点就是它的可扩展性,使得很多人都可以开发他们的插件并且分享出来
    2011-12-12
  • jQuery 查找元素操作实例小结

    jQuery 查找元素操作实例小结

    这篇文章主要介绍了jQuery 查找元素操作,结合实例形式总结分析了jQuery针对页面元素的各种常见查找操作实现方法,需要的朋友可以参考下
    2019-10-10
  • jquery提升性能最佳实践小结

    jquery提升性能最佳实践小结

    因为jquery的易用性,很多朋友使用jquery,但仍然需要注意的是性能的问题,下面是曾祥展特为大家整理的一些技巧。
    2010-12-12
  • html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】

    html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】

    这篇文章主要介绍了html+jQuery实现拖动滑块图片拼图验证码插件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09

最新评论