Jquery常用技巧收集整理篇


Posted in Javascript onNovember 14, 2010

比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片等等。具体如下:
禁止右键点击

$(document).ready(function(){ 
$(document).bind("contextmenu",function(e){ 
return false; 
}); 
});

隐藏搜索文本框文字
$(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); } 
}); 
}

在新窗口中打开链接
$(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>

检测浏览器
注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量。
$(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 
} 
});

预加载图片
$(document).ready(function() { 
jQuery.preloadImages = function() 
{ 
for(var i = 0; i").attr("src", arguments[i]); 
} 
}; 
// how to use 
$.preloadImages("image1.jpg"); 
});

页面样式切换
$(document).ready(function() { 
$("a.Styleswitcher").click(function() { 
//swicth the LINK REL attribute with the value in A REL attribute 
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
}); 
// how to use 
// place this in your header 
<LINK href="default.css" type=text/css rel=stylesheet> 
// the links 
<A class=Styleswitcher href="#" rel=default.css>Default Theme</A> 
<A class=Styleswitcher href="#" rel=red.css>Red Theme</A> 
<A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A> 
});

列高度相同
如果使用了两个CSS列,使用此种方式可以是两列的高度相同。
$(document).ready(function() { 
function equalHeight(group) { 
tallest = 0; 
group.each(function() { 
thisHeight = $(this).height(); 
if(thisHeight > tallest) { 
tallest = thisHeight; 
} 
}); 
group.height(tallest); 
} 
// how to use 
$(document).ready(function() { 
equalHeight($(".left")); 
equalHeight($(".right")); 
}); 
});

动态控制页面字体大小
$(document).ready(function() { 
// Reset the font size(back to default) 
var originalFontSize = $('html').css('font-size'); 
$(".resetFont").click(function(){ 
$('html').css('font-size', originalFontSize); 
}); 
// Increase the font size(bigger font0 
$(".increaseFont").click(function(){ 
var currentFontSize = $('html').css('font-size'); 
var currentFontSizeNum = parseFloat(currentFontSize, 10); 
var newFontSize = currentFontSizeNum*1.2; 
$('html').css('font-size', newFontSize); 
return false; 
}); 
// Decrease the font size(smaller font) 
$(".decreaseFont").click(function(){ 
var currentFontSize = $('html').css('font-size'); 
var currentFontSizeNum = parseFloat(currentFontSize, 10); 
var newFontSize = currentFontSizeNum*0.8; 
$('html').css('font-size', newFontSize); 
return false; 
}); 
});

返回页面顶部功能
$(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> 
});

获得鼠标指针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> 
});

验证元素是否为空
$(document).ready(function() { 
if ($('#id').html()) { 
// do something 
} 
});

替换元素
$(document).ready(function() { 
$('#id').replaceWith(' 
<DIV>I have been replaced</DIV> 
); 
});

jQuery延时加载功能
$(document).ready(function() { 
window.setTimeout(function() { 
// do something 
}, 1000); 
});

移除单词功能
$(document).ready(function() { 
var el = $('#id'); 
el.html(el.html().replace(/word/ig, "")); 
});

验证元素是否存在于jQuery对象集合中
$(document).ready(function() { 
if ($('#id').length) { 
// do something 
} 
});

使整个DIV可点击
$(document).ready(function() { 
$("div").click(function(){ 
//get the url from href attribute and launch the url 
window.location=$(this).find("a").attr("href"); return false; 
}); 
// how to use 
<DIV><A href="index.html">home</A></DIV> 
});

ID与Class之间转换当改变Window大小时,在ID与Class之间切换
$(document).ready(function() { 
function checkWindowSize() { 
if ( $(window).width() > 1200 ) { 
$('body').addClass('large'); 
} 
else { 
$('body').removeClass('large'); 
} 
} 
$(window).resize(checkWindowSize); 
});

克隆对象
$(document).ready(function() { 
var cloned = $('#id').clone(); 
// how to use 
<DIV idid=id></DIV> 
});

使元素居屏幕中间位置
$(document).ready(function() { 
jQuery.fn.center = function () { 
this.css("position","absolute"); 
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); 
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); 
return this; 
} 
$("#id").center(); 
});

写自己的选择器
$(document).ready(function() { 
$.extend($.expr[':'], { 
moreThen1000px: function(a) { 
return $(a).width() > 1000; 
} 
}); 
$('.box:moreThen1000px').click(function() { 
// creating a simple js alert box 
alert('The element that you have clicked is over 1000 pixels wide'); 
}); 
});

统计元素个数
$(document).ready(function() { 
$("p").size(); 
});

使用自己的Bullets
$(document).ready(function() { 
$("ul").addClass("Replaced"); 
$("ul > li").prepend("‒ "); 
// how to use 
ul.Replaced { list-style : none; } 
});

引用Google主机上的jQuery类库
//Example 1 
<SCRIPT src="http://www.google.com/jsapi"></SCRIPT> 
<SCRIPT type=text/javascript> 
google.load("jquery", "1.2.6"); 
google.setOnLoadCallback(function() { 
// do something 
}); 
</SCRIPT><SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT> 
// Example 2:(the best and fastest way) 
<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>

禁用jQuery(动画)效果
$(document).ready(function() { 
jQuery.fx.off = true; 
});

与其他JavaScript类库冲突解决方案
$(document).ready(function() { 
var $jq = jQuery.noConflict(); 
$jq('#id').show(); 
});
Javascript 相关文章推荐
jquery属性过滤选择器使用示例
Jun 18 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 #Javascript
有关DOM元素与事件的3个谜题
Nov 11 #Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 #Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 #Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 #Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 #Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 #Javascript
You might like
用PHP4访问Oracle815
2006/10/09 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python动态加载模块的3种方法
2014/11/22 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python实现事件驱动
2018/11/21 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
中科创达面试题
2016/12/28 面试题
党校培训思想汇报
2013/12/30 职场文书
安全目标责任书
2014/07/22 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书