你应该掌握的前端知识

1.检测IE游览器

$(document).ready(function() {
if (navigator.userAgent.match(/msie/i) ){
alert('I am an old fashioned Internet Explorer');
}
});

2.平滑滚动到页面顶部

1.第一种
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
2.第二种
$(document).ready(function() {
//when the id="top" link is clicked
$('#top').click(function() {
//scoll the page back to the top
$(document).scrollTo(0,500);
}
});

3.保持始终处于顶部

$(function(){

var $win = $(window)

var $nav = $('.mytoolbar');

var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top;

var isFixed=0;

processScroll()

$win.on('scroll', processScroll)

function processScroll() {

var i, scrollTop = $win.scrollTop()

if (scrollTop >= navTop && !isFixed) {

isFixed = 1

$nav.addClass('subnav-fixed')

} else if (scrollTop <= navTop && isFixed) {

isFixed = 0

$nav.removeClass('subnav-fixed')

}

}

4.检测屏幕宽度

var responsive_viewport = $(window).width();

/* if is below 481px */

if (responsive_viewport < 481) {

alert('Viewport is smaller than 481px.');

} /* end smallest screen */

5.自动修复损坏照片

$('img').error(function(){

$(this).attr('src', 'img/broken.png');

});

6.检测复制、粘贴与剪切操作

$("#textA").bind('copy', function() {

$('span').text('copy behaviour detected!')

});

$("#textA").bind('paste', function() {

$('span').text('paste behaviour detected!')

});

$("#textA").bind('cut', function() {

$('span').text('cut behaviour detected!')

});

7.防止下载

<noscript><iframe src=""></iframe></noscript>

8.自动为外部链接添加target=“blank”属性

var root = location.protocol + '//' + location.host;

$('a').not(':contains(root)').click(function(){

this.target = "_blank";

});

9.悬停时淡入/淡出

$(document).ready(function(){

$(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

$(".thumbs img").hover(function(){

$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover

},function(){

$(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout

});

});

10.禁用文本/密码输入中的空格

$('input.nospace').keydown(function(e) {

if (e.keyCode == 32) {

return false;

}

});

11.如何验证某个元素是否为空

if ($(‘#keks').html().trim()) { }

12.如何把函数绑定到事件上

$('#foo').bind('click', function () {
alert('User clicked on "foo."');
});

13.何追加或是添加html到元素中

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

14.如何使用jQuery来预加载图像

jQuery.preloadImages = function () {
for (var i = 0; i < arguments.length; i++)
{
$("<img />").attr('src', arguments[i]);
}
};
//用法 $.preloadImages(‘image1.gif', ‘/path/to/image2.png','some/image3.jpg');

15.如何找到一个已经被选中的option元素

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

16.如何隐藏一个包含了某个值文本的元素

$(“p.value:contains(‘thetextvalue')”).hide();

17.如果自动滚动到页面中的某区域

jQuery.fn.autoscroll = function (selector) {
$(‘html,body').animate(
c6dd
{ scrollTop: $(this ).offset().top },
500
);
}
//然后像这样来滚动到你希望去到的class/area上。
$(‘.area_name').autoscroll();

18.如何禁用右键单击上下文菜单

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

19.如何在一段时间之后自动隐藏或关闭元素（支持1.4版本）

setTimeout(function () { $('.mydiv').hide('blind', {}, 500) }, 5000);
//而这是在1.4中可以使用delay()这一功能来实现的方式（这很像是休眠）
$(".mydiv").delay(5000).hide('blind', {}, 500);

20.如何把一个元素放在屏幕的中心位置

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();

21.如何使用一个可点击的链接来替换页面中任何的URL

$.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();

22.在新窗口打开链接

$(document).ready(function() {
//select all anchor tags that have http in the href
//and apply the target=_blank
$("a[href^='http']").attr('target','_blank');
});

23.样式表切换

$(document).ready(function() {
$("a.cssSwap").click(function() {
//swap the link rel attribute with the value in the rel
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
});
});

24.jQuery测试密码强度

$('#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;
});

25.jQuery实现的DIv高度保持一致

var maxHeight = 0;

$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

26.jQuery实现让整个div可以被点击

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

27.在窗口滚动时自动加载内容

var loading = false;
$(window).scroll(function(){
if((($(window).scrollTop()+$(window).height())+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);
});

28.隔行换色

$('div:odd').css("background-color", "#F4F4F8");
$('div:even').css("background-color", "#EFF1F1");

29.切换可见性

$("a.register").on("click", function(e){
$("#signup").fadeToggle(750, "linear");
});