天天看點

比較實用的jQuery代碼段

1. 如何檢測各種浏覽器:

(1)navigator.userAgent傳回一個浏覽器資訊字元串。

(2)用到indexOf()方法,查找字元串中是否有指定的浏覽器類型。

if(navigator.userAgent.indexOf("MSIE")>0) {
    return "MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
    return "Firefox";
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
	return "Safari";
} 
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
	return "Camino";
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
	return "Gecko";
}
           

2. 如何驗證某個元素是否為空:

if ($('#keks').html()) {
<span style="white-space:pre">	</span>//非空
}
           

3. 如何從一個未排序的集合中找出某個元素的索引号

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

4. 如何使用多個屬性來進行過濾

//在使用許多相類似的有着不同類型的input元素時,這種基于精确度的方法很有用
var elements = $('#someid input[type=sometype][value=somevalue]').get();
           

5. 如何使用jQuery來預加載圖像:

jQuery.preloadImages = function() {
	$("img[alt=1]").attr('src', arguments[0]);
	$("img[alt=2]").attr('src', arguments[1]);
	$("img[alt=3]").attr('src', arguments[2]);
};
jQuery(document).ready(function() {
	$.preloadImages('1.JPG', '2.JPG', '3.JPG');
})
           
<img src="" alt="1"/>
<img src="" alt="2"/>
<img src="" alt="3"/>
           

6. 如何為任何與選擇器相比對的元素設定事件處理程式:

$('button.someClass').live('click', someFunction);
//注意,在jQuery 1.4.2中,delegate和undelegate選項被引入代替live,因為它們提供了更好的上下文支援
//例如,就table來說,以前你會用.live()
$("table").each(function(){
	$("td", this).live("hover", function(){
		$(this).toggleClass("hover");
	});
});
//現在用
$("table").delegate("td", "hover", function(){
<span style="white-space:pre">	</span>$(this).toggleClass("hover");
});
           

7. 如何找到一個已經被選中的option元素:

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

8. 如何隐藏一個包含了某個值文本的元素:

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

9. 如何自動滾動到頁面中的某區域

jQuery.fn.autoscroll = function(selector) {
	$('html,body').animate({scrollTop:$(this.selector).offset().top},500);
}
<span style="font-size:14px;">//然後像這樣來滾動到你希望去到的class/area上
<span style="font-size:14px;">$('.area_name').autoscroll();</span></span>
           

10. 如何替換串中的詞

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

"abacacf".replace('a','9') //第一個運作的結果 9bacaf 這個隻是替換了第一個
"abacacf".replace(/a/g,'9') //第二個運作的結果 9b9c9f  這個能實作js的全部替換功能
           

11. 如何禁用右鍵單擊上下文菜單:

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

12. 如何使用jQuery來檢測右鍵和左鍵的滑鼠單擊兩種情況:

$("#someelement").bind('mousedown', function(e) {
	if( (navigator.userAgent.indexOf("MSIE")==-1 && e.button == 0) || (navigator.userAgent.indexOf("MSIE")>0 && e.button == 1) ) {
		alert("Left Mouse Button Clicked");
	} else if(e.button == 2) {
		alert("Right Mouse Button Clicked");
	}
});
           

13. 如何在一段時間之後自動隐藏或關閉元素(支援1.4版本):

//這是1.3.2中我們使用setTimeout來實作的方式
setTimeout(function() {
	$('.mydiv').hide('blind', {}, 500)
}, 5000);
//而這是在1.4中可以使用delay()這一功能來實作的方式(這很像是休眠)
$(".mydiv").delay(5000).hide('blind', {}, 500);
           

14. 如何限制"Text-Area"域中的字元的個數:

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"){
			//Apply the standard maxLength
			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);
				}
			};
		}
	});
};
//用法
$('#mytextarea').maxLength(500);
           

15. 在jQuery中如何測試某個元素是否可見

if($(element).is(':visible') == 'true') {
//該元素是可見的
}
           

16. 如何把一個元素放在螢幕的中心位置:

jQuery.fn.center = function() {
	this.css('position','absolute');
	this.css('top', ($(window).height() - this.height())/2 + $(window).scrollTop() + 'px');
	this.css('left', ($(window).width() - this.width())/2 + $(window).scrollLeft() + 'px');
	return this;
};
//這樣來使用上面的函數:
$(element).center();
           

17. 如何從元素中除去HTML

(function($) {
	$.fn.stripHtml = function() {
		var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
		this.each(function() {
			$(this).html( $(this).html().replace(regexp,"") );
		});
		return $(this);
	}
})(jQuery);
//用法:
<p value="123"><b>123</b></p>
<p>456</p>
$('p').stripHtml();
//結果:
<p value="123">123</p>
<p>456</p>
           

18. 如何使用closest來取得父元素:

closest() 方法獲得比對選擇器的第一個祖先元素,從目前元素開始沿 DOM 樹向上。

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

19. 如何強制在彈出視窗中打開連結:

jQuery('a.popup').live('click', function(){
	newwindow=window.open($(this).attr('href'),",'height=200,width=150′);
	if (window.focus) {
		newwindow.focus();
	}
	return false;
});
           

20. 如何強制在新的頁籤中打開連結:

jQuery('a.newTab').live('click', function(){
	newwindow=window.open($(this).href);
	jQuery(this).target = "_blank";
	return false;
});
           

21. 在jQuery中如何使用.siblings()來選擇同輩元素

// 不這樣做
$('#nav li').click(function(){
$('#nav li').removeClass('active');
$(this).addClass('active');
});
//替代做法是
$('#nav li').click(function(){
	$(this).addClass('active').siblings().removeClass('active');
});
           

22. 如何獲得滑鼠墊光标位置x和y

$(document).ready(function() {
	$(document).mousemove(function(e){
		$('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
	});
});
           

23. 如何把整個的清單元素(List Element,LI)變成可點選的

$("ul li").click(function(){
	window.location=$(this).find("a").attr("href");
	return false;
});
           
<ul>
<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link 1</a></li>
<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link 2</a></li>
<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link 3</a></li>
<li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link 4</a></li>
</ul>
           

24. 如何檢查圖像是否已經被完全加載進來

$('#theImage').attr('src', 'image.jpg').load(function() {
	alert('This Image Has Been Loaded');
});
           

25. 如何檢查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) {
	//沒有啟用cookie
}
           

26. 如何讓cookie過期:

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