Last active
April 18, 2016 07:00
-
-
Save luokailuo/799ed8c2cec994b0cbb9ccc878bf7cce to your computer and use it in GitHub Desktop.
Web开发的10个jQuery代码片段
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 平稳滑动返回到页面顶部 | |
| //html | |
| <a id="toTop" href="#">to top</a> | |
| //jQuery | |
| <script> | |
| $("#toTop").click(function() { | |
| $("html, body").animate({ scrollTop: 0 }, "slow"); | |
| return false; | |
| }); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 检测Internet Explorer版本 | |
| $(document).ready(function() { | |
| if (navigator.userAgent.match(/msie/i) ){ | |
| console.log('很老版本的IE'); | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 检测视窗宽度 | |
| 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.'); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 检测复制、粘贴和剪切的操作 | |
| $("#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!') | |
| }); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 允许一个元素固定在顶部。导航、工具栏等等可以使用。 | |
| //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'); | |
| } | |
| } | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 自动定位并修复损坏图片 | |
| // 能够帮助检测损坏图片并用你中意的图片替换它，并会将此问题通知给访客 | |
| $('img').error(function(){ | |
| $(this).attr('src', 'img/broken.png'); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 遇到外部链接自动添加target=”blank”的属性 | |
| // target=”blank”属性不是W3C有效的属性，使用jQuery可以补救，下面这段代码将会检测是否链接是外链，如果是，会自动添加一个target=”blank”属性。 | |
| var root = location.protocol + '//' + location.host; | |
| $('a').not(':contains(root)').click(function(){ | |
| this.target = "_blank"; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 在文本或密码输入时禁止空格键 | |
| $('#input').keydown(function(e) { | |
| if (e.keyCode == 32) { | |
| return false; | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 用其他内容取代html标志 | |
| //html | |
| <ul> | |
| <li>内容</li> | |
| <li>内容</li> | |
| <li>内容</li> | |
| <li>内容</li> | |
| <li>内容</li> | |
| </ul> | |
| //jQuery | |
| $('li').replaceWith(function(){ | |
| return $("<div />").append($(this).contents()); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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% | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment