JQuery 技巧
一、让子元素都是同样的高度
$.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;
};
使用方法
$(function(){ $('#container').equalHeights(); })
解决IE6″闪”的问题
$("a").click(function(event){
event.preventDefault(); });
判断元素是否存在
if ($('#myDiv').length)
删除一条记录时，闪一下再消失
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
字符串替换
用 JQuery 能对文本内容中的特定字符串进行替换操作：
var el = $('#id');
el.html(el.html().replace(/word/ig, ""));禁用右键菜单
有许多 JavaScript 代码段可禁用右键菜单，但 JQuery 使操作变得更容易：$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
$(document).ready(function() {
$("#orderedlist > li:last").addClass("blue");//first last取得第一个或者最后一个元素
$("li").css("background","red").css("color","gray");//一次设定两个css属性
$("a[@name]").background("#eee");//选择所有的带有name属性的链接
$("li[@name*='tu']").css("background","red");//部分匹配("*=")的方式来代替完全匹配("=")
$("li").not("[ul]").css("background", "red");//选择所有的没有ul子元素的li元素
$("a").hover(function() {$(this).parent("p").css("background","yellow");});//选择父级的元素
$("a").addClass("test").show().html("foo");//方法允许链接使用
$("p").filter([".selected", ":first"]);保留类名是selected的段落元素，同时保留第一个
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});//移到文章某段的链接时，它所在的段全用上highlight样式，移走之后又恢复原样
jquery 技巧: 图片大小自适应
图片撑破页面，相信大家会有被困扰的时候，或许是以前，或许是现在，但不要紧了，jquery帮你两行代码就解决问题，让图片被受控制。
代码如下：
$(document).ready(function(){
var ywidth = 500;//初始最大宽度
$(”img”).each(function(){
if($(this).width() > ywidth) {
$(this).width(ywidth);
}
});
});
把它加到网页上立杆见影，让图片不在头痛。有的朋友可能会想查看大图，那没问题，再加几行代码，加个点击查看大图的效果。
代码如下：
$(document).ready(function(){
var ywidth = 450;//初始最大宽度
$(”img”).each(function(){
if($(this).width() > ywidth) {
$(this).width(ywidth);
$(this).mouseover(function(){
$(this).css(”cursor”,”hand”);
});
$(this).click(function(){
window.location.href = $(this).attr(”src”);
});
}
});
});
图片撑破容器是很煞风景的事情，不牵扯到后台生成缩略图的解决方法是在前端对于撑破容器的图片，指定width="100%"，则图片会自动适应父容器的宽度。虽然难看了一点，但不失为一个经济且花费小的方法。
用JS简单的实现思路就是遍历所有页面图片，对于宽度大于父元素的，添加width属性，当然根据需要还可以加上Lightbox之类的特效。
---code start---
$("img").each(function(){
if($(this).width() > $(this).parent().width()) {
$(this).width("100%");
}
});
---code end---
说了这么多代码只有3行而已。其实对于REST理论，貌似在目前的Web应用中最受惠的可能就是图片这一块了，试想同一个url，如果能对带有不同的 header请求返回缩略图，图片描述，图片本身，作者和版权信息，那么图片相关的应用将简洁到一个令人心旷神怡的境界。可惜现在的REST都只是框架级 别的应用，对比传统MVC也没有太明显的优势，或许等服务器端进行一定程度的改善之后，REST才能大行其道吧。
话说俺人生的第二个本命年真是多灾多难的一年啊……
1、$('div').eq(i) 这样才能取到 jquery 对象
2、$("p").click(function(){alert($(this).html())})
//为每个p元素增加了click事件，单击某个p元素则弹出其内容
注意那个$(this)
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) //为三个不同的p元素单击事件分别设定不同的处理
注意那个function(i)
3、$(document).ready(function(){alert("Load Success")})
//页面加载完毕提示“Load Success”,不同于onload事件，onload需要页面内容加载完毕（图片等），而ready只要页面html代码下载完毕即触发。与$(fn)等价
4、//每次点击时轮换添加和删除名为selected的class。
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
5、 $("p").trigger("click"); //触发所有p元素的click事件
6、$("p").bind("click", function(){alert($(this).text());});
//为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件
7、$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于：
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
alert("Item #"+i+": "+tempArr[i]);
}
也可以用来处理json
$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
