分享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 相关文章推荐
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
Javascript模块化编程详解
Dec 01 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python实时获取cmd的输出
2015/12/13 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
Python持续监听文件变化代码实例
2020/07/22 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
一份软件工程师的面试试题
2016/02/01 面试题
员工试用期自我评价
2014/09/18 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
铁路安全反思材料
2014/12/24 职场文书
英语复习计划
2015/01/19 职场文书
2016年教代会开幕词
2016/03/04 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书