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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
ie和firefox中img对象区别的困惑
Dec 27 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
vue实现tab栏点击高亮效果
Aug 19 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
JavaScript静态的动态
2006/09/18 Javascript
学习YUI.Ext 第三天
2007/03/10 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
Python批量修改文本文件内容的方法
2016/04/29 Python
python实现黑客字幕雨效果
2018/06/21 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
css3选择器基本介绍
2014/12/15 HTML / CSS
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
农村产权制度改革实施方案
2014/03/21 职场文书
文明演讲稿范文
2014/05/12 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
南京导游词
2015/02/03 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
义卖募捐活动总结
2015/05/09 职场文书
会议新闻稿
2015/07/17 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书