有用的JQuery片段

1，导航菜单背景切换效果

为激活的导航菜单设置不同的背景

<ul id="nav">
<li>导航</li>
<li>导航</li>
<li>导航</li>
<li>导航</li>
</ul>

Jquery代码如下所示

$("#nav").click(function(e){
$(e.target).addClass('tclass').siblings('.tclass').removeClass('tclass');
});

siblings() 方法返回被选元素的所有同级元素。

2，反序访问JQuery对象里的元素

var arr = $('#nav').find('li').get().reverse();
$.each(arr, function(index, ele){
// 你的操作代码
});

reverse() 方法用于颠倒数组中元素的顺序。

3，访问IFrame里的元素

在大多数情况下IFrame并不是好的解决方案，但是由于各种原因，项目中确实用到了Ifram

var  IFrameDOM = $("iframe#someID").contents();
//然后就可以通过find方法来遍历获取IFrame中的元素
IFrameDOM.find(".message").slideUp();

4，管理搜索框的值

$("#searchbox").focus(function(){
$(this).val('');
}).blur(function(){
$this = $(this);
($this.val() === '') ? $this.val('请搜索……') : null;
});

5，部分页面加载更新

为了提高web性能，有更新时我们通常不会加载整个页面，而是仅仅更新部分页面内容，如图片的延迟加载等；

setInterval(function(){
//获取的内容讲增加到ID为content的元素后
$('#content').load(url);
});

6，采用data方法缓存数据

在项目中，为了避免多次重复的向服务器请求数据，通常会将获取的数据缓存起来以便后续使用，通过JQuery可以很优雅的实现该功能；

var cache = {};
$.data(cache, 'key', 'value');//缓存数据
$.data(cache, 'key);//获取数据

7，配置JQuery与其他库的兼容性

如果在项目中使用JQuery，$是最常用的变量名，但JQuery并不是唯一一个使用$作为变量名的库，为了避免名冲突，可以按照以下方式来组织你的代码：

//一、为JQuery重新命名为$j
var $j = jQuery.noConflict();
$j('#id')……
//二、推荐使用的方式
(function($){
$(document).ready(function(){
//在这里可以正常的使用JQuery的语法
});
})(jQuery);

8，克隆table header到表格的最下面

为了让table具有更好的可读性，我们可以将表格的header信息克隆一份到表格的底部，

var $tfoot = $('<tfoot></tfoot>');
$($('thead').clone(true, true).children().get().reverse()).each(function(){
$tfoot.append($(this));
});
$tfoot.insertAfter('table thead');

9，根据视窗(viewport)创建一个全屏宽度和高度的div

下面的代码完全可以让你根据vewport创建一个全屏的div，这对在不同窗口大小下展示modal或对话框时非常有效

$('#content).css({
"width":$(window).width(),
"height":$(window).height(),
});
//make sure div stays full width/height on resize
$(window).resize(function(){
$w = $(window);
$('#content).css({
"width":$w .width(),
"height":$w .height(),
});
});

10，测试密码的强度

在某些网站注册时常常会要求设置密码，网站也会根据输入密码的字符特点给出相应的提示，如密码过短、强度中等、强度强等。

<input type="password" name="pass" id="pass"/>
<span id='passstrength'></span>

$('#pass').keyup(function(e){
//密码为八位以上并且字母数字特殊字符三项都包括
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
//密码为气味级以上并且字母、数字、特殊字符三项中有两项，强度是中等
var meduiumRegex = new RegExp("^(?=.{7,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");

if(enougthRegex.test($(this).val()) == false){
$("#passstrenlength").html("More characters");
}else if(strongRegex.test($(this).val())){
$("#passstrenlength").className = "OK";
$("#passstrenlength").html("Strong！");
}else if(meduiumRegex .test($(this).val())){
$("#passstrenlength").className = "alert";
$("#passstrenlength").html("Medium！");
}else{
$("#passstrenlength").className = "error";
$("#passstrenlength").html("Weak！");
}
return true
});

11，使用JQuery重绘图片的大小

关于图片大小的冲回，可以在服务端来实现，也可以通过JQuery在客户端实现

$(window).bind("load", function(){
//Image resize
$('#product_cat_list_img').each(function(){
var maxWidth = 120;
var maxHeight = 120;
var ratio   = 0 ;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth/width;
$(this).css('width', maxWidth);
$(this).css('height', height*ratio);
height = height*ratio;
}

var width = $(this).width();
var height = $(this).height();
if(height> maxHeight){
ratio = maxHeight/height;
$(this).css('height', maxHeight);
$(this).css('width', width*ratio);
width= width*ratio;
}
});
//$("#contentpage img").show();
});

12，滚动时动态加载页面内容

有些网站的页面内容不是一次性加载完毕的，而是鼠标向下滑动式动态加载的

var loading = false;
$(window).scroll(function(){
// 垂直滚动条的位置
var scrollPosition  = $(window).scrollTop();
// 窗口的高度
var windowHeight 	= $(window).height();
if(scrollPosition + windowHeight + 250 >= $(document).height())
{
if(loading == false)
{
loading == true;
}
$('#loadingbar').css('display', 'block');
$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
$('body').append(loaded);
});
$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
$('#loadingbar').css('display', 'none');
loading = false;
}
});
$(document).ready(function(){
$('#loaded_max').val(50);
});