网站首页导航代码,知页wordpress,获取免费域名,龙游网站建设的公司jQuery的存在#xff0c;让学习前端开发的人感到前端越来越容易入门了#xff0c;用简单的几行代码就可以实现需求#xff0c;但是#xff0c;你真的会用jQuery么#xff0c;当代码运行 后无法看到自己预期的效果#xff0c;是不是觉得jQuery出了问题#xff0c;其实让学习前端开发的人感到前端越来越容易入门了用简单的几行代码就可以实现需求但是你真的会用jQuery么当代码运行 后无法看到自己预期的效果是不是觉得jQuery出了问题其实问题还是出在了自己会不会用上面。下面列举一些开发中经常遇到的应用实例发现一下另 一个不同的jQuery世界。回到顶部按钮利用jQuery里的animate和scrollTop方法你便不需要使用插件创建简单的滚动到顶部动画。$(.top).click(function(e){ e.preventDefault(); $(html, body).animate({scrollTop:0},800);});通过scrollTop的值来改变你想要滚动到的位置。其实你就是做了在接下来的800毫秒中让页面滚动直到它滚动到文档的顶部。图片预加载如果你的网页使用了很多隐藏图片文件例如鼠标悬停展示的图片那么图片的预加载是有意义的$.preloadImages function(){for(vari 0; i ).attr(src,arguments[i]); }};$.preloadImages(img/hover-on.png,img/hover-off.png);判断图片是否加载完有时候你可能需要检查图像是否已经加载完成以便于可以继续执行相应的js代码$(img).load(function(){console.log(image load successful);});曾经遇到过的使用场景有些元素需要按图片的实际尺寸来设置其大小以绝对布置方式放置。元素的大小设置可以在图片加载完成后计算。自动修补破损图像如果你碰巧发现在你的网站上发现破损的图像链接一个个去替代他们是痛苦的。这个简单的代码可以节省很多的麻烦$(img).on(error,function(){if(!$(this).hasClass(broken-image)) { $(this).prop(src,img/broken.png).addClass(broken-image); }});即使你没有任何断开的链接加入这代码也不会有任何影响。禁用输入有时你可能需要用表单的提交按钮或者某个输入框直到用户执行了某个动作比如检查“我已阅读条款”复选框。在你的输入框上设置disabled属性然后当你需要的时候启用该属性$(input[typesubmit]).prop(disabled,true);你需要做的只是需要在输入框上再次运行prop方法但设置的被禁用值是false$(input[typesubmit]).prop(disabled,false);对地不了解prop函数的jQuery开发者来说最常使用的是attr函数可能开发很多程序都没有发现什么问题但是在开发例如 checkbox、radio、select时会发现使用attr无法让属性生效以为是jQuery的bug下面来说说attr和prop的使用建 议:在遇到要获取或设置checked,selected,readonly和disabled等属性时用prop方法显然更好使两个DIV同等高度有时你会想要两个DIV有相同的高度无论他们都有什么内容$(.div).css(min-height, $(.main-div).height());这个例子设置了DIV的最小高度这意味着它的高度只可以比这个设置的高度大而不能小。然而一个更灵活的方法是循环的一组元素并设置将最高元素的高度作为高度var$columns $(.column);varheight 0;$columns.each(function(){if($(this).height() height) { height $(this).height(); }});$columns.height(height);如果你想要所有的列有相同的高度var$rows $(.same-height-columns);$rows.each(function(){ $(this).find(.column).height($(this).height());});根据文本获取元素通过jQuery中的contains()选择器你能找到一个元素内的文本内容。如果文本不存在则这个元素将被隐藏varsearch $(#search).val();$(div:not(:contains( search ))).hide();可见变化的触发当用户不再聚焦或者重新聚焦一个标签时触发javascript脚本$(document).on(visibilitychange,function(e){if(e.target.visibilityState visible) {console.log(Tab is now in view!); }elseif(e.target.visibilityState hidden) {console.log(Tab is now hidden!); }});欢迎关注我的公众号同步更新文章DoNet技术分享平台阅读原文
