JQuery 技巧（转）

让子元素都是同样的高度

view plaincopy to clipboardprint?
$.fn.equalHeights = function() {  
    $(this).each(function(){  
        var currentTallest = 0;  
        $(this).children().each(function(i){  
            if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }  
        });  
        // for ie6, set height since min-height isn't supported  
        if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }  
        $(this).children().css({'min-height': currentTallest});  
    });  
    return this;  
}; 
$.fn.equalHeights = function() {
 $(this).each(function(){
  var currentTallest = 0;
  $(this).children().each(function(i){
   if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
  });
  // for ie6, set height since min-height isn't supported
  if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
  $(this).children().css({'min-height': currentTallest});
 });
 return this;
};
 

使用方法

view plaincopy to clipboardprint?
$(function(){  
    $('#container').equalHeights();  
}) 
$(function(){
 $('#container').equalHeights();
})
 

via setting equal heights with jquery

避免css hack

通常我们为了兼容IE，会专门为它写一个CSS，如何通过jQuery来避免呢，可以尝试一下这段代码

view plaincopy to clipboardprint?
$(document).ready(function(){  
    $('html').addClass($.browser);  
}); 
$(document).ready(function(){
    $('html').addClass($.browser);
});
 

使用方法

view plaincopy to clipboardprint?
.msie .example {  
    background-color: red;  
}  
.mozilla .example {  
    background-color: green;  
}  
.opera .example {  
    background-color: cyan;  
}  
.safari .example {  
    background-color: black;  
}  
.js .example {  
    border: 10px solid black;  
}  
.example {  
    width: 100px;  
    height: 100px;  
    background-color: yellow;  
} 
.msie .example {
 background-color: red;
}
.mozilla .example {
 background-color: green;
}
.opera .example {
 background-color: cyan;
}
.safari .example {
 background-color: black;
}
.js .example {
 border: 10px solid black;
}
.example {
 width: 100px;
 height: 100px;
 background-color: yellow;
}
 

可以指定默认样式，还可以针对各个浏览器单独指定样式
via avoiding css hacks using javascript

输入框提示文字，点击消失

view plaincopy to clipboardprint?
jQuery.fn.hint = function (blurClass) {  
  if (!blurClass) {  
    blurClass = 'blur';  
  }  
 
  return this.each(function () {  
    // get jQuery version of 'this'  
    var $input = jQuery(this),  
 
    // capture the rest of the variable to allow for reuse  
      title = $input.attr('title'),  
      $form = jQuery(this.form),  
      $win = jQuery(window);  
 
    function remove() {  
      if ($input.val() === title && $input.hasClass(blurClass)) {  
        $input.val('').removeClass(blurClass);  
      }  
    }  
 
    // only apply logic if the element has the attribute  
    if (title) {  
      // on blur, set value to title attr if text is blank  
      $input.blur(function () {  
        if (this.value === '') {  
          $input.val(title).addClass(blurClass);  
        }  
      }).focus(remove).blur(); // now change all inputs to title  
 
      // clear the pre-defined text when form is submitted  
      $form.submit(remove);  
      $win.unload(remove); // handles Firefox's autocomplete  
    }  
  });  
};  
 
$(function(){  
// find all the input elements with title attributes  
$('input[title!=""]').hint();  
}); 
jQuery.fn.hint = function (blurClass) {
  if (!blurClass) {
    blurClass = 'blur';
  }

  return this.each(function () {
    // get jQuery version of 'this'
    var $input = jQuery(this),

    // capture the rest of the variable to allow for reuse
      title = $input.attr('title'),
      $form = jQuery(this.form),
      $win = jQuery(window);

    function remove() {
      if ($input.val() === title && $input.hasClass(blurClass)) {
        $input.val('').removeClass(blurClass);
      }
    }

    // only apply logic if the element has the attribute
    if (title) {
      // on blur, set value to title attr if text is blank
      $input.blur(function () {
        if (this.value === '') {
          $input.val(title).addClass(blurClass);
        }
      }).focus(remove).blur(); // now change all inputs to title

      // clear the pre-defined text when form is submitted
      $form.submit(remove);
      $win.unload(remove); // handles Firefox's autocomplete
    }
  });
};

$(function(){
// find all the input elements with title attributes
$('input[title!=""]').hint();
});
 

使用方法

view plaincopy to clipboardprint?
<!-- 可以先定义一个class，比如blur -->  
<form action="">  
    <div><label for="search">Search:</label>  
    <input type="text" name="seach" value="" id="search" title="Company name or ticker" />  
    <input type="submit" value="Go" />  
    </div>  
</form> 
<!-- 可以先定义一个class，比如blur -->
<form action="">
    <div><label for="search">Search:</label>
    <input type="text" name="seach" value="" id="search" title="Company name or ticker" />
    <input type="submit" value="Go" />
    </div>
</form>
 

当前页弹出层
via Simple jQuery

view plaincopy to clipboardprint?
$(document).ready(function() {       
 
    //select all the a tag with name equal to modal  
    $('a[name=modal]').click(function(e) {  
        //Cancel the link behavior  
        e.preventDefault();  
        //Get the A tag  
        var id = $(this).attr('href');   
 
        //Get the screen height and width  
        var maskHeight = $(document).height();  
        var maskWidth = $(window).width();   
 
        //Set heigth and width to mask to fill up the whole screen  
        $('#mask').css({'width':maskWidth,'height':maskHeight});   
 
        //transition effect  
        $('#mask').fadeIn(1000);  
        $('#mask').fadeTo("slow",0.8);       
 
        //Get the window height and width  
        var winH = $(window).height();  
        var winW = $(window).width();   
 
        //Set the popup window to center  
        $(id).css('top',  winH/2-$(id).height()/2);  
        $(id).css('left', winW/2-$(id).width()/2);   
 
        //transition effect  
        $(id).fadeIn(2000);    
 
    });   
 
    //if close button is clicked  
    $('.window .close').click(function (e) {  
        //Cancel the link behavior  
        e.preventDefault();  
        $('#mask, .window').hide();  
    });           
 
    //if mask is clicked  
    $('#mask').click(function () {  
        $(this).hide();  
        $('.window').hide();  
    });               
 
}); 
$(document).ready(function() {    

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow",0.8);    

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 

    });

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
    });        

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });            

});
 

使用方法

view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
<mce:script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></mce:script>  
<title>Sandbox</title>  
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />  
<mce:style type="text/css" media="screen"><!--  
body { background-color: #fff; font: 16px Helvetica, Arial; color: #fff; } 
#mask {  
  left:0;  
  top:0;  
  position:absolute;  
  z-index:9000;  
  background-color:#000;  
  display:none;  
}  
 
#boxes .window {  
  position:fixed;  
  width:440px;  
  height:200px;  
  display:none;  
  z-index:9999;  
  padding:20px;  
}   
 
/* Customize your modal window here, you can add background image too */
#boxes #dialog {  
  width:375px;  
  height:203px;  
}  
--></mce:style><style type="text/css" media="screen" mce_bogus="1">body { background-color: #fff; font: 16px Helvetica, Arial; color: #fff; } 
#mask {  
  left:0;  
  top:0;  
  position:absolute;  
  z-index:9000;  
  background-color:#000;  
  display:none;  
}  
 
#boxes .window {  
  position:fixed;  
  width:440px;  
  height:200px;  
  display:none;  
  z-index:9999;  
  padding:20px;  
}   
 
/* Customize your modal window here, you can add background image too */
#boxes #dialog {  
  width:375px;  
  height:203px;  
}</style>  
</head>  
<body>  
<p><a href="#dialog" mce_href="#dialog" name="modal">Simple Window Modal</a></p>  
<div id="boxes">  
    <!-- #customize your modal window here -->  
    <div id="dialog" class="window">  
        <b>Testing of Modal Window</b> |  
        <!-- close button is defined as close class -->  
        <a href="#" mce_href="#" class="close">Close it</a>  
    </div>  
    <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->  
     <div id="mask"></div>  
</div>  
</body>  
</html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<mce:script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></mce:script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<mce:style type="text/css" media="screen"><!--
body { background-color: #fff; font: 16px Helvetica, Arial; color: #fff; }
#mask {
  left:0;
  top:0;
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
}

#boxes .window {
  position:fixed;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

/* Customize your modal window here, you can add background image too */
#boxes #dialog {
  width:375px;
  height:203px;
}
--></mce:style><style type="text/css" media="screen" mce_bogus="1">body { background-color: #fff; font: 16px Helvetica, Arial; color: #fff; }
#mask {
  left:0;
  top:0;
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
}

#boxes .window {
  position:fixed;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

/* Customize your modal window here, you can add background image too */
#boxes #dialog {
  width:375px;
  height:203px;
}</style>
</head>
<body>
<p><a href="#dialog" mce_href="#dialog" name="modal">Simple Window Modal</a></p>
<div id="boxes">
    <!-- #customize your modal window here -->
    <div id="dialog" class="window">
        <b>Testing of Modal Window</b> |
        <!-- close button is defined as close class -->
        <a href="#" mce_href="#" class="close">Close it</a>
    </div>
    <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
     <div id="mask"></div>
</div>
</body>
</html>
 

解决IE6″闪”的问题

view plaincopy to clipboardprint?
$("a").click(function(event){  
  event.preventDefault();  
  // do something  
}); 
$("a").click(function(event){
  event.preventDefault();
  // do something
});
 

图片载入完毕时，触发函数

view plaincopy to clipboardprint?
$(function()  
{  
    $('img').load(function(){alert($(this).height())});  
}); 
$(function()
{
 $('img').load(function(){alert($(this).height())});
});
 

判断元素是否存在

view plaincopy to clipboardprint?
if ($('#myDiv').length) {  
    // your code  
} 
if ($('#myDiv').length) {
    // your code
}
 

给选择器指定一个容器(范围)

view plaincopy to clipboardprint?
var selectedItem = $('#listItem' + i);  
var selectedItem = $('#listItem' + i, $('.myList')); 
var selectedItem = $('#listItem' + i);
var selectedItem = $('#listItem' + i, $('.myList'));
 

删除一条记录时，闪一下再消失

view plaincopy to clipboardprint?
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")  
.animate({ opacity: "hide" }, "slow"); 
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");