分享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 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
prettify 代码高亮着色器google出品
Dec 28 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
详解node中创建服务进程
May 09 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 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
第十二节--类的自动加载
2006/11/16 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
JavaScript格式化数字的函数代码
2010/11/30 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
python梯度下降法的简单示例
2018/08/31 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
pandas 空数据处理方法详解
2019/11/02 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
python脚本定时发送邮件
2020/12/22 Python
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
金讯Java笔试题目
2013/06/18 面试题
中学生爱国演讲稿
2013/12/31 职场文书
民主评议党员总结
2014/10/20 职场文书
营销经理工作检讨书
2014/11/03 职场文书
公司庆典欢迎词
2015/01/26 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android