分享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 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
js倒计时抢购实例
Dec 20 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
cmd下运行php脚本
2008/11/25 PHP
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
php实现文章评论系统
2019/02/18 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
javascript prototype 原型链
2009/03/12 Javascript
javascript定义函数的方法
2010/12/06 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
实践Vim配置python开发环境
2018/07/02 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
python实现词法分析器
2019/01/31 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
生日寿宴答谢词
2014/01/19 职场文书
三年级音乐教学反思
2014/01/28 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
华清池导游词
2015/02/02 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书