jQuery 常用代码片段[转载收藏]

前几天去 Kayo 那，看到他翻译的《50 jQuery Snippets That Will Help You Become A Better JavaScript Developer》很有收藏价值，故转载过来。好久没转载文章了，撒花~

jQuery 常用代码片段

转载自：《jQuery 常用代码片段》

PS：代码木有全部验证，不敢保证 100% 正常工作

---

jQuery 嵌套的过滤器

过滤器可以有效对结果集就行过滤，最终得到我们想要的结果。例如下面代码就把结果集中包含有类 .selected 的元素给过滤掉了：

.filter(":not(:has(.selected))");

jQuery 缓存选择器结果集

把结果集保存在变量中缓存下来，重用时就无需再次用选择器去选择了。

var allItems = $("div.item");
var keepList = $("div#container1 div.item");

#12楼 小邪 注: 使用 “jQuery 缓存选择器结果集” 的时候如果一次选择了很多元素，要循环这些元素的时候要注意在不同浏览器下这个集数组是不同的，必须用 for in 循环，用 for count(elements) 循环到奇怪的东西
流年 反驳：不能用 for in 来遍历数组，因为不保证顺序；只能显式循环，或使用 jq 封装的 .each 函数

jQuery 检测某元素上是否包含某个类

jQuery 1.4.* 起新加的这个 has 方法：

$("input").has(".email").addClass("email_icon");

使用 jQuery 切换样式表

用选择器选择出样式表标签元素，然后改变其 href 属性的值即可。

$('link[media='screen']').attr('href', 'Alternative.css');

jQuery 限制选择器选择范围（性能优化）

尽可能地在类名前面指明标签名，这样能大大减少选择器的执行时间，如果能用 ID 之类的选择器缩小查询范围则效果更佳。

var in_stock = $('#shopping_cart_items input.is_in_stock');

假如 HTML 代码如下的话：

<ul id="shopping_cart_items">
	<li>
		<input value="Item-X" name="item" class="is_in_stock" type="radio"> Item X
	</li>
	<li>
		<input value="Item-Y" name="item" class="3-5_days" type="radio"> Item Y
	</li>
	<li>
		<input value="Item-Z" name="item" class="unknown" type="radio"> Item Z
	</li>
</ul>

jQuery ToggleClass 的正确用法

ToggleClass 用来在某元素上添加或移除某个类。

// No
a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');

// Yes
a.toggleClass('blueButton');

jQuery 判断浏览器是否为 IE

if($.browser.msie) {
	// 此浏览器为 IE
} else {
	// 非 IE
}

用 jQuery 把某元素替换掉

$('#thatdiv').replaceWith('fnuh');

jQuery 判断某元素中内容是否为空

if( !$('#keks').html() ) {
	// 空空如也
}

jQuery 判断无序列表元素的索引

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

jQuery 给元素绑定事件执行函数

$('#foo').bind('click', function() {
	alert('用户点击了 "foo"');
});

jQuery 在某元素上追加内容

$('#lal').append('sometext');

jQuery 创建元素时，用一个对象为其添加属性及属性的值

var $e = $("<div>", {
	href: "#nav",
	"class": "a-class another-class",
	title: "..."
});

注意：class 是 JavaScript 的保留字，最好加上引号。

jQuery 用元素的属性作为过滤条件

而且可以用多个属性作为条件：

var elements = $('.someclass input[type=sometype][value=somevalue]').get();

jQuery 使用 delegate 为元素添加事件

自 jQuery 1.4.2 起，建议用 delegate 和 undelegate 来替代 live 和 die，因为 delegate 对上下文有更好的支持。

// 使用 live()
$("table").each(function() {
	$("td", this).live("hover", function() {
		$(this).toggleClass("hover");
	});
});

// 使用 delegate()
$("table").delegate("td", "hover", function(){
	$(this).toggleClass("hover");
});

#15楼 流年 注：delegate 和 live 的对比，觉得举例不是很好，因为 live 也可以很简洁的 $('table td').live(/*..*/)，更重要的是 delegate 不用冒泡到根节点上。字符串替换不应该归入到 jq 常用代码中，因为这是 js 的基本功能。

用 jQuery 找到下拉框中被选定的那个元素

$('#someElement').find('option:selected');

jQuery 将包含有某文字的段落隐藏

$("p.value:contains('thetextvalue')").hide();

jQuery 将滚动条滚动到页面上某位置

jQuery.fn.autoscroll = function() {
	$('html,body').animate({
			scrollTop: this.offset().top
		},
		500
	);
};

// 执行如下代码开始滚动，其实 autoscroll 就是一个 jQuery 插件。
$('#footer').autoscroll();

jQuery 检测浏览器版本

if( $.browser.safari ) {
	// afari
}

if( $.browser.msie && $.browser.version > 6 ) {
	// IE6 以上
}

if( $.browser.msie && $.browser.version <= 6 ) {
	// IE6 及以下
}

if( $.browser.mozilla && $.browser.version >= '1.8' ) {
	// FireFox 2 以上
}

jQuery 字符串替换

var el = $('#id');
el.html(el.html().replace(/word/ig, ''));

jQuery 禁用鼠标右键菜单

$(document).bind('contextmenu', function(e) {
	return false;
});

jQuery 检测某元素是否存在

if($('#someDiv').length) {
	// 存在
}

jQuery 侦测鼠标左击和右击事件

$("#someelement").live('click', function(e) {
	if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
		alert("左击了");
	} else if(e.button == 2) {
		alert("右击了");
	}
});

jQuery 自动显示、隐藏文本框的默认值

swap_val = [];
$("#s").each(function(i) {
	swap_val[i] = $(this).val();
	$(this).focusin(function() {
		if($(this).val() == swap_val[i]) {
			$(this).val("");
		}
	}).focusout(function() {
		if ($.trim($(this).val()) == "") {
			$(this).val(swap_val[i]);
		}
	});
});

假如文本框 HTML 代码如下的话

<input value="Enter the keyword to search..." id="s" type="text">

jQuery 延时执行 JavaScript 代码

// 1.4 之前版本
setTimeout(function() {
	$('.mydiv').hide('blind', {}, 500);
}, 5000);

// 1.4 及之后版本
$(".mydiv").delay(5000).hide('blind', {}, 500);

jQuery 创建新元素并添加到页面中

var $newDiv = $('<div>');
$newDiv.attr('id','myNewDiv').appendTo('body');

jQuery 限制文本框中字符数

// 插件代码
jQuery.fn.maxLength = function(max) {
	this.each(function() {
		var type = this.tagName.toLowerCase();
		var inputType = this.type ? this.type.toLowerCase() : null;
		if(type == "input" && inputType == "text" || inputType == "password") {
			// 最大字符数
			this.maxLength = max;
		} else if(type == "textarea") {
			this.onkeypress = function(e) {
				var ob = e || event;
				var keyCode = ob.keyCode;
				var hasSelection = document.selection ? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
				return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
			};
			this.onkeyup = function(){
				if(this.value.length > max) {
					this.value = this.value.substring(0,max);
				}
			};
		}
	});
};

// 使用方法
$('#comment').maxLength(20);

jQuery 如何克隆一个元素

var $cloned = $('#somediv').clone();

jQuery 检测某元素是否处于可见状态

if($(element).is(':visible') == 'true') {
	// 可见
}

#15楼 流年 注：检测可见不用多作判断，直接 .is(':visible')

jQuery 让某元素居中显示

jQuery.fn.center = function() {
	this.css('position','absolute');
	this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
	this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
	return this;
};

// 使用方法
$(element).center();

jQuery 将一批元素的值存到一个数组中

var arrInputValues = new Array();

$("input.someclass").each(function() {
     arrInputValues.push($(this).val());
});

jQuery 剥离 HTML 代码

(function($) {
    $.fn.stripHtml = function() {
        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,"")
            );
        });
        return $(this);
    }
})(jQuery);

//用法
$('p').stripHtml();

jQuery 使用 closest 获取父元素

$('#searchBox').closest('div');

#4楼 牧风 注：closest 不只是获取父元素, 是获取离此元素最近的(xxoo)元素

jQuery 在新窗口中打开超链接

jQuery(document).delegate('a', 'click', function() {
	var root = location.href.replace(location.pathname + location.search + location.hash, '');

	if ( !this.href ) return;

	if ( this.href.indexOf(root) != 0 ) {
		window.open(this.href);
		return false;
	}
});

jQuery 使用 .siblings() 获取姊妹元素

// 这样可以
$('#nav li').click(function() {
	$('#nav li').removeClass('active');
	$(this).addClass('active');
});

// 这样更好
$('#nav li').click(function() {
	$(this).addClass('active')
		.siblings().removeClass('active');
});

jQuery 让页面中所有复选框选中或者非选中

var tog = false;
$('a').click(function() {
	$("input[type=checkbox]").attr("checked", !tog);
	tog = !tog;
});

jQuery 根据特定元素值过滤的过滤器

$('.someClass').filter(function() {
	return $(this).attr('value') == $('input#someId').val();
});

jQuery 获取鼠标指针的坐标

$(document).ready(function() {
	$(document).mousemove(function(e) {
		$('#XY').html('X 坐标 ： ' + e.pageX + ' | Y 坐标 ： ' + e.pageY);
	});
});

jQuery 让整个 List 元素可点击

$("ul li").click(function() {
	window.location=$(this).find("a").attr("href");
	return false;
});

示例 HTML 代码

<ul>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
</ul>

jQuery 解析 XML 的简单示例

function parseXml(xml) {
	$(xml).find("Tutorial").each(function() {
		$("#output").append($(this).attr("author") + " ");
	});
}

jQuery 检测图片是否加载完毕

$('#theImage').attr('src', 'image.jpg').load(function() {
	alert('图片加载完毕！');
});

jQuery 事件及方法的命名空间

// 事件
$('input').bind('blur.validation', function(e) {
	// ...
});

// 方法
$('input').data('validation.isValid', true);

jQuery 检测浏览器是否启用了 cookie

var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
if(!cookiesEnabled) {
        // 未启用
}

jQuery 让 cookie 过期

var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });

jQuery 自动为网址加上超链接

$.fn.replaceUrl = function() {
        var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,'<a href="$1">$1</a>')
            );
        });
        return $(this);
};

// 用法
$('p').replaceUrl();

声明: 除非注明，ZWWoOoOo文章均为原创，转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25647