- 爱易网页
-
JavaSript
- 分享50个使您成为高级javascript开发者的jQuery的代码开发技巧 - 第二部分
日期:2014-05-16 浏览次数:20326 次
分享50个使你成为高级javascript开发者的jQuery的代码开发技巧 - 第二部分
转自
http://www.gbin1.com/technology/jquery/50jquerycodesnippetsforbetterjavascript2/index.html
26. 显示或者删除输入框的缺省值
//This snippet will show you how to keep a default value
//in a text input field for when a user hasn't entered in
//a value to replace it
swap_val = [];
$(".swap").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]);
}
});
});
<INPUT class=swap value="Enter Username here.." type=text>
27. 指定时间后自动隐藏或者关闭元素(1.4支持)
//Here's how we used to do it in 1.3.2 using setTimeout
setTimeout(function() {
$('.mydiv').hide('blind', {}, 500)
}, 5000);
//And here's how you can do it with 1.4 using the delay() feature (this is a lot like sleep)
$(".mydiv").delay(5000).hide('blind', {}, 500);
28. 动态创建元素到DOM
var newgbin1Div = $('');
newgbin1Div.attr('id','gbin1.com').appendTo('body');
29. 限制textarea的字符数量
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);
}
};
}
});
};
//Usage:
$('#gbin1textarea').maxLength(500);
30. 为函数创建一个基本测试用例
//Separate tests into modules.
module("Module B");
test("some other gbin1.com test", function() {
//Specify how many assertions are expected to run within a test.
expect(2);
//A comparison assertion, equivalent to JUnit's assertEquals.
equals( true, false, "failing test" );
equals( true, true, "passing test" );
});
31. 使用jQuery克隆元素
var cloned = $('#gbin1div').clone();
32. 测试一个元素在jQuery中是否可见
if($(element).is(':visible') == 'true') { //The element is Visible }
33. 元素屏幕居中
jQuery.fn.center = function () {
this.css('position','absolute');