哪个公司制作企业网站,网络推广活动策划方案范文,内蒙网络_网站建设,制作网站需要哪些工具2019独角兽企业重金招聘Python工程师标准 JQuery常用的代码片段 JQuery在当前众多网站开发中都有用到。他简易的操作以及对各个浏览器的兼容性#xff0c;被广大的开发者一致看好。 下面是一些常用实用的 JQuery 代码片段。看看有没有需要收藏的吧#xff1a; … 2019独角兽企业重金招聘Python工程师标准 JQuery常用的代码片段 JQuery在当前众多网站开发中都有用到。他简易的操作以及对各个浏览器的兼容性被广大的开发者一致看好。 下面是一些常用实用的 JQuery 代码片段。看看有没有需要收藏的吧 1. 阻止链接点击 $(a).on(click, function(e){e.preventDefault();
}); 2. 幻灯片切入 // Fade
$( “.btn ).click(function() {
$( “.element ).fadeToggle(slow);
});// Toggle
$( “.btn ).click(function() {
$( “.element ).slideToggle(slow);
}); 当我们需要在当前一面加载一个div或其他标签的时候十分有效。 3.加载鼠标悬停样式 class $(.btn).hover(function(){$(this).addClass(‘hover’);
}, function(){$(this).removeClass(‘hover’);
}); 4.模块点击。 $(.myBox).click(function(){window.location$(this).find(a).attr(href); return false;
}); 5. 检查图像是否加载完成 $(‘img’).load(function() {
console.log(‘image load successful’);
}); 6.回到顶部 // Back To Top
$(a.top).click(function(){$(document.body).animate({scrollTop : 0},800);return false;
});//Create an anchor tag
a classtop href#Back to top/a 7.加载外部页面 $(#content).load(somefile.html, function(response, status, xhr) {// error handlingif(status error) {$(#content).html(An error occured: xhr.status xhr.statusText);}
}); 8. 弹窗 jQuery(a.popup).live(click, function() {/prenewwindowwindow.open($(this).attr(href),,height100,width100);if(window.focus) {newwindow.focus()}return false;}); 9. 未成功加载图片显示默认 $(img).error(function(){$(this).attr(src, ‘img/broken.png’);
}); 10.刷新内置页面 $(iframe).attr(src, $(iframe).attr(src)); 11. 键盘事件监听 $(input).keydown(function(e) {// variable e contains keystroke data// only accessible with .keydown()if(e.which 11) {e.preventDefault();}
});$(input).keyup(function(event) {// run other event codes here
}); 12.密码强度验证 $(#pass).keyup(function(e) {var strongRegex new RegExp(^(?.{8,})(?.*[A-Z])(?.*[a-z])(?.*[0-9])(?.*\\W).*$, g);var mediumRegex new RegExp(^(?.{7,})(((?.*[A-Z])(?.*[a-z]))|((?.*[A-Z])(?.*[0-9]))|((?.*[a-z])(?.*[0-9]))).*$, g);var enoughRegex new RegExp((?.{6,}).*, g);if (false enoughRegex.test($(this).val())) {$(#passstrength).html(More Characters);} else if (strongRegex.test($(this).val())) {$(#passstrength).className ok;$(#passstrength).html(Strong!);} else if (mediumRegex.test($(this).val())) {$(#passstrength).className alert;$(#passstrength).html(Medium!);} else {$(#passstrength).className error;$(#passstrength).html(Weak!);}return true;
}); 13.禁止/允许输入 $(input[typesubmit]).attr(disabled, true);
$(input[typesubmit]).removeAttr(disabled); 14.遍历 DOM $(div#home).prev(div); //取得包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
$(div#home).next(ul); // 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
$(div#home).parent(); // 取得匹配元素集合中每个元素的父元素。
$(div#home).children(p); //获得匹配元素集合中每个元素的子元素 15.刷新部分页面内容 setInterval(function() {
$(#class-id).load(location.href #class-id*,);
}, 2000); // seconds to wait 16.增加元素 var sometext Say something awesome;
$(p#sample1).append(sometext); // added after
$(p#tsample1).prepend(sometext); // added before 17.新窗口打开外部链接 $(a).each(function() {var a new RegExp(/ [removed].host /);
if(!a.test(this.href)) {$(this).click(function(event) {event.preventDefault();event.stopPropagation();window.open(this.href, _blank);});}
}); 18.检查输入框开启按钮可用 $(#username).keyup(function() {$(#submit).attr(disabled, !$(#username).val());
}); 19.jQuery Cookies set/get/delete //get cookie
function getCookie( name ) { var start document.cookie.indexOf( name );var len start name.length 1;if ( ( !start ) ( name ! document.cookie.substring( 0, name.length ) ) ) {return null;}if ( start -1 ) return null;var end document.cookie.indexOf( ;, len );if ( end -1 ) end document.cookie.length;return unescape( document.cookie.substring( len, end ) );
}//set cookie
function setCookie( name, value, expires, path, domain, secure ) {var today new Date();today.setTime( today.getTime() );if ( expires ) {expires expires * 1000 * 60 * 60 * 24;}var expires_date new Date( today.getTime() (expires) );document.cookie nameescape( value ) ( ( expires ) ? ;expiresexpires_date.toGMTString() : ) //expires.toGMTString()( ( path ) ? ;path path : ) ( ( domain ) ? ;domain domain : ) ( ( secure ) ? ;secure : );
}//delete cookie
function deleteCookie( name, path, domain ) {if ( getCookie( name ) ) document.cookie name ( ( path ) ? ;path path : ) ( ( domain ) ? ;domain domain : ) ;expiresThu, 01-Jan-1970 00:00:01 GMT;
} 20.全部选中/不选 !-- jQuery --
$(.SelectAll).live(click, function(){
$(this).closest(.divAll).find(input[typecheckbox]).attr(checked, true);
return false; });
$(.DeselectAll).live(click, function(){
$(this).closest(.divAll).find(input[typecheckbox]).attr(checked, false);
return false; });
!-- HTML --
div classdivAll a href# classSelectAllSelect All/a
a href# classDeselectAllDeselect All/a br / \
input typecheckbox /label forLahoreLahore/label
input typecheckbox /label forKarachiKarachi/label
input typecheckbox /label forIslamabadIslamabad/label /div 21.TextArea长度限制 !-- jQuery --var MaxLength 500;$(#txtDescription).keypress(function(e){if ($(this).val().length MaxLength) {e.preventDefault();}});
!-- HTML --
asp:TextBox runatserver TextModeMultiLine Columns50 Rows5/asp:TextBox 22.调整图片大小 (function($) {$.fn.imageResize function(options) {var that this;var settings {width: 150,height: 150};options $.extend(settings, options);if (!that.is(img)) {return;}return that.each(function() {var maxWidth options.width;var maxHeight options.height;var ratio 0;var width $(that).width();var height $(that).height();if (width maxWidth) {ratio maxWidth / width;$(that).css(width, maxWidth);$(that).css(height, height * ratio);}if (height maxHeight) {ratio maxHeight / height;$(that).css(height, maxHeight);$(that).css(width, width * ratio);}});};
})(jQuery); 23.验证的电子邮件地址 !-- jQuery --
$(#txtEmail).blur(function(e) {var sEmail $(#txtEmail).val();if ($.trim(sEmail).length 0) {alert(Please enter valid email address);e.preventDefault();} var filter /^([\w-\.])((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]\.)))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; if (filter.test(sEmail)) {alert(Valid Email);}else {alert(Invalid Email);e.preventDefault();}});
!-- HTML --
asp:TextBox runatserver / 24.文本输入框临时信息 !-- jQuery --
$(input[typetext]).focus(function(){ var $this $(this);var title $this.attr(title);if($this.val() title){$this.val();}
}).blur(function() {var $this $(this);var title $this.attr(title);if($this.val() ){$this.val(title);}
});
!-- HTML --
divinput typetext namesearchCompanyName valueCompany NametitleCompany Name /
/div 结束 以上就是一些经常用到的代码片段了。由于经常使用。不妨收藏一下 转载于:https://my.oschina.net/u/265943/blog/292873
