Web开发的10个jQuery代码片段

jQuery-bottom-to-top

// 平稳滑动返回到页面顶部

//html
<a id="toTop" href="#">to top</a>


//jQuery
<script>
		$("#toTop").click(function() {
		  $("html, body").animate({ scrollTop: 0 }, "slow");
		  return false;
		});
</script>

jQuery-check-ie-version

// 检测Internet Explorer版本
$(document).ready(function() {
      if (navigator.userAgent.match(/msie/i) ){
        console.log('很老版本的IE');
      }
});

jQuery-check-viewport

// 检测视窗宽度

function function_name(argument) {
		var responsive_viewport = $(window).width();

		/* if is below 481px */
		if (responsive_viewport < 481) {
		    console.log('Viewport is smaller than 481px.');
		}/* end smallest screen */
		else{
			console.log('Viewport is bigger than 481px.');
		}
}

jQuery-detected-copy(cut,(paste))

// 检测复制、粘贴和剪切的操作


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

jQuery-fixed-element

// 允许一个元素固定在顶部。导航、工具栏等等可以使用。

//css
<style type="text/css">
		.subnav-fixed{
			color: red;
			position: fixed;
		}
</style>

//html
<a id="fixed" class='mytoolbar' href="#">滚动条往下，我将被固定在顶部</a>

//jQuery
$(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;
				// 返回匹配元素的滚动条的垂直位置
				var scrollTop = $win.scrollTop();

				if (scrollTop >= navTop && !isFixed) { 
					isFixed = 1;
					$nav.addClass('subnav-fixed');
				} else if (scrollTop <= navTop && isFixed) {
					isFixed = 0;
			 		$nav.removeClass('subnav-fixed');
				}
		}
})

jQuery-img-error

// 自动定位并修复损坏图片
// 能够帮助检测损坏图片并用你中意的图片替换它，并会将此问题通知给访客

$('img').error(function(){
	$(this).attr('src', 'img/broken.png');
});

jQuery-link-add-blank

// 遇到外部链接自动添加target=”blank”的属性
// target=”blank”属性不是W3C有效的属性，使用jQuery可以补救，下面这段代码将会检测是否链接是外链，如果是，会自动添加一个target=”blank”属性。

var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
    this.target = "_blank";
});

jQuery-nospace

// 在文本或密码输入时禁止空格键

$('#input').keydown(function(e) {
	if (e.keyCode == 32) {
		return false;
	}
});

jQuery-replaceWith

// 用其他内容取代html标志

//html
<ul>
		<li>内容</li>
		<li>内容</li>
		<li>内容</li>
		<li>内容</li>
		<li>内容</li>
</ul>

//jQuery
$('li').replaceWith(function(){
		return $("<div />").append($(this).contents());
});

在图片上停留时逐渐增强或减弱的透明效果

$(document).ready(function(){
	    $("#img").fadeTo("slow", 0.3); // 页面加载，图片不透明率降低70%

	    $("#img").hover(function(){
	        $(this).fadeTo("slow", 1.0); // 鼠标移入，恢复透明率到100%
	    },function(){
	        $(this).fadeTo("slow", 0.3); // 鼠标移出，图片不透明率降低70%
	    });
});