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


Posted in Javascript onJuly 28, 2016

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有很好的帮助。

Javascript 相关文章推荐
js查错流程归纳
May 04 Javascript
javascript基本类型详解
Nov 28 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
js实现多图左右切换功能
Aug 04 Javascript
H5上传本地图片并预览功能
May 08 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 #Javascript
利用JS实现数字增长
Jul 28 #Javascript
灵活使用数组制作图片切换js实现
Jul 28 #Javascript
AngularJS 中文API参考手册
Jul 28 #Javascript
AngularJS 简单应用实例
Jul 28 #Javascript
AngularJS 路由详解和简单实例
Jul 28 #Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 #Javascript
You might like
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
Django框架安装方法图文详解
2019/11/04 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
如何写python的配置文件
2020/06/07 Python
python如何修改文件时间属性
2021/02/05 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
机电一体化专业推荐信
2013/12/03 职场文书
诚信承诺书范文
2014/03/27 职场文书
家长通知书家长评语
2014/04/17 职场文书
安全施工标语
2014/06/07 职场文书
单位租房协议书范本
2014/12/04 职场文书
今日说法观后感
2015/06/08 职场文书
创业计划书之面包店
2019/09/12 职场文书