25个实用的jQuery技巧和解决方案
浏览数：18 /
时间：2015年06月09日
1. 去除页面的右键菜单
$(document).ready(function(){
$(document).bind(“contextmenu”,function(e){returnfalse;});});
2、搜索输入框文字的消失
当鼠标获得焦点、失去焦点的时候，input输入框文字处理：
$(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、判断浏览器类型
注意： 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 }});
5、预加载图片
$(document).ready(function(){ jQuery.preloadImages=function(){for(var i =0;
i<arguments.length; i++)=”"{=”" jquery(“=”"><img>”).attr(“src”,
arguments[i]);}}// how to use
$.preloadImages(“image1.jpg”);});</arguments.length;>
6、轻松切换css样式
$(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 rel=”stylesheet” href=”default.css” type=”text/css”> // the
links <a href=”#” rel=”default.css”>Default Theme</a> <a href=”#”
class=”Styleswitcher” rel=”red.css”>Red Theme</a> <a href=”#”
class=”Styleswitcher” rel=”blue.css”>Blue Theme</a> });
7、高度相等的列
如果您使用两个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”));});});
8、简单字体变大缩小
$(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);returnfalse;});// 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);returnfalse;});});
9、返回头部滑动动画
$(‘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);returnfalse;}}});
// how to use
// place this where you want to scroll to
<a name=”top”></a> // the link <a href=”#top”>go to
top</a>
10、获取鼠标位置
$().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);});
11、判断一个元素是否为空
if($(‘#id’).html()){// do something }
12、替换元素
$(‘#id’).replaceWith(‘ <div>I have been replaced</div>
‘);
13、jquery timer 返回函数
$(document).ready(function(){ window.setTimeout(function(){// do something
},1000);});
14、jquery也玩替换
$(document).ready(function(){var el = $(‘#id’);
el.html(el.html().replace(/word/ig,”"));});
15、判断元素是否存在
$(document).ready(function(){if($(‘#id’).length){// do something
}});
16、让div也可以click
$(“div”).click(function(){//get the url from href attribute and launch the
url window.location=$(this).find(“a”).attr(“href”);returnfalse;});
// how to use
<div><a
href=”index.html”>home</a></div>
17、使用jquery来判断浏览器大小添加不同的class
$(document).ready(function(){function checkWindowSize(){if(
$(window).width()>1200){ $(‘body’).addClass(‘large’);}else{
$(‘body’).removeClass(‘large’);}}
$(window).resize(checkWindowSize);});
18、几个字符就clone！
var cloned = $(‘#id’).clone()
19、设置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”);returnthis;}
$(“#id”).center();});
20、创建自己的选择器
$(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’);});});
21、计算元素的数目
$(document).ready(function(){ $(“p”).size();});
22、设置自己的li样式
$(document).ready(function(){ $(“ul”).addClass(“Replaced”); $(“ul >
li”).prepend(“? “);// how to use ul.Replaced{ list-style : none;}});
23、使用google的主机来加载jquery库
<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 type=”text/javascript”
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></script>
24、关闭jquery动画效果
$(document).ready(function(){ jQuery.fx.off=true;});
25、使用自己的jquery标识
$(document).ready(function(){var $jq = jQuery.noConflict();
$jq(‘#id’).show();});
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
