Jquery使用小技巧

发布于:
分类: Script
/* 禁止右键点击
view plaincopy to clipboardprint? */
$(document).ready(function(){
		$(document).bind("contextmenu",function(e){return false;});
});

 /*隐藏搜索文本框文字view plaincopy to clipboardprint?*/
$(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); }
		});
});
		 /*在新窗口中打开链接view plaincopy to clipboardprint?*/ 
		 $(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 变量。  
		    view plaincopy to clipboardprint?*/ 
		 $(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   
		 }     
		 });   
		/*预加载图片  
		view plaincopy to clipboardprint?*/ 
		 $(document).ready(function() {     
		    jQuery.preloadImages = function()     
		   {     
		 for(var i = 0; i").attr("src", arguments[i]);   
		   }   
		 };   
		 // how to use   
		 $.preloadImages("image1.jpg");     
		 });   
		/*页面样式切换*/ 
		view plaincopy to clipboardprint?  
		 $(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列,使用此种方式可以是两列的高度相同。  
		view plaincopy to clipboardprint?*/ 
		 $(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"));     
		 });     
		 });   
		/*动态控制页面字体大小  
		用户可以改变页面字体大小  
		view plaincopy to clipboardprint?*/ 
		 $(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;     
		   });     
		 });   
		/*返回页面顶部功能  
		view plaincopy to clipboardprint?*/ 
		 $(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值  
		view plaincopy to clipboardprint?*/ 
		 $(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>     
		 });    
		/*验证元素是否为空  
		    view plaincopy to clipboardprint?*/ 
		 $(document).ready(function() {     
		 if ($('#id').html()) {     
		 // do something   
		    }     
		 });    
		/*替换元素  
		view plaincopy to clipboardprint?*/ 
		 $(document).ready(function() {     
		    $('#id').replaceWith('   
		 <DIV>I have been replaced</DIV>   
		 ');     
		 });    
		 jQuery延时加载功能view plaincopy to clipboardprint?  
		 $(document).ready(function() {     
		    window.setTimeout(function() {     
		 // do something   
		    }, 1000);     
		 });    
		/*移除单词功能view plaincopy to clipboardprint?*/ 
		 $(document).ready(function() {     
		 var el = $('#id');     
		    el.html(el.html().replace(/word/ig, ""));     
		 });  
		/*  验证元素是否存在于Jquery对象集合中  
		        view plaincopy to clipboardprint?*/ 
		 $(document).ready(function() {     
		 if ($('#id').length) {     
		 // do something   
		   }     
		 });    
		/*使整个div可点击view plaincopy to clipboardprint?*/ 
		 $(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之间切换  
		    view plaincopy to clipboardprint?*/ 
		 $(document).ready(function() {     
		 function checkWindowSize() {     
		 if ( $(window).width() > 1200 ) {     
		         $('body').addClass('large');     
		     }     
		 else {     
		         $('body').removeClass('large');     
		     }     
		    }     
		 $(window).resize(checkWindowSize);     
		 });    
		 /*克隆对象view plaincopy to clipboardprint?*/ 
		 $(document).ready(function() {     
		 var cloned = $('#id').clone();     
		 // how to use   
		 <DIV id=id></DIV>     
		 });   
		/*使元素居屏幕中间位置view plaincopy to clipboardprint?*/ 
		 $(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();     
		 });    
		/*写自己的选择器view plaincopy to clipboardprint?*/ 
		 $(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');     
		   });     
		 });    
		 /* 统计元素个数view plaincopy to clipboardprint?*/ 
		 $(document).ready(function() {     
		    $("p").size();     
		 });    
		 /* 使用自己的 Bulletsview plaincopy to clipboardprint?*/ 
		 $(document).ready(function() {     
		    $("ul").addClass("Replaced");     
		    $("ul > li").prepend("? ");     
		 // how to use   
		  ul.Replaced { list-style : none; }     
		 });   
		 /* 引用Google主机上的Jquery类库Let Google host the jQuery script for you. This can be done in 2 ways.  
		    view plaincopy to clipboardprint?*/ 
		 //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(动画)效果  
		view plaincopy to clipboardprint?*/ 
		 $(document).ready(function() {     
		     jQuery.fx.off = true;     
		 });    
		 与其他Javascript类库冲突解决方案view plaincopy to clipboardprint?  
		 $(document).ready(function() {     
		 var $jq = jQuery.noConflict();     
		    $jq('#id').show();     
		 });   

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注