收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发.
1. 禁止右键点击
?
$(document).ready(function(){
$(document).bind("contextmenu",function(e){ return false; });});
2. 隐藏搜索文本框文字
?
Hide when clicked in the search field, the value.(example can be found below in the comment fields)
$(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. 在新窗口中打开链接
?
XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.
$(document).ready(function() { //Example 1: Every link will open in a new window $('a[href^=""]').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="" rel=external>open link</a>
4. 检测浏览器
注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量
?
$(document).ready(function() {
// Target Firefox 2 and aboveif ($.browser.mozilla && $.browser.version >= "1.8" ){ // do something}// Target Safariif( $.browser.safari ){ // do something}// Target Chromeif( $.browser.chrome){ // do something}// Target Caminoif( $.browser.camino){ // do something}// Target Operaif( $.browser.opera){ // do something}// Target IE6 and belowif ($.browser.msie && $.browser.version <= 6 ){ // do something}// Target anything above IE6if ($.browser.msie && $.browser.version > 6){ // do something}});
5. 预加载图片
This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.
?
$(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.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 type=text/css href="default.css">// 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>});
7. 列高度相同
如果使用了两个CSS列,使用此种方式可以是两列的高度相同。
?