你应该知道的jQuery技巧【收藏】

jQuery的存在,让学习前端开发的人感到前端越来越容易入门了,用简单的几行代码就可以实现需求,但是,你真的会用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[type="submit"]').prop('disabled',true);

你需要做的只是需要在输入框上再次运行prop方法,但设置的被禁用值是false:

$('input[type="submit"]').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技术分享平台

阅读原文

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/272774.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LINQ表达式用法整理

收集一些Linq表达式中的一些比较常用的写法,希望能给大家工作当中带来一些便利。1. Where子句条件过滤结果集型(集合数据使用这种,譬如数组、列表数据,同样适用于Datatable等多列数据集)类SQL语句的写法,对…

Eclipse is running in a JRE, but a JDK is required 解决方法(转)

转自:http://comeonbabye.iteye.com/blog/1186239 安装Maven后每次启动出现警告信息: Eclipse is running in a JRE, but a JDK is requiredSome Maven plugins may not work when importing projects or updating source folders. 分两步解决问题: 1. 检查Eclipse正…

java线程归并排序_Java-归并排序 - FeanLau的个人空间 - OSCHINA - 中文开源技术交流社区...

public class MergeSort {static int number0;public static void main(String[] args) {int[] a {26, 5, 98, 108, 28, 99, 100, 56, 34, 1 };printArray("排序前:",a);MergeSort(a);printArray("排序后:",a);}private static voi…

收集一些优秀的DoNet开源项目

Paste_Image.pngJson.NEThttp://json.codeplex.com/ Json.Net是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单。通过Linq To JSON可以快速的读写Json,通过JsonSerializer可以序列化你的.Net对象。让你轻松实现.Net中所有类型(对象,基…

git初探

1 Linux下Git和GitHub环境的搭建 第一步: 安装Git,使用命令 “sudo apt-get install git” 第二步: 到GitHub上创建GitHub帐号 第三步: 生成ssh key,使用命令 “ssh-keygen -t rsa -C "your_emailyouremail.com&q…

java编程思想 初始化_《java编程思想》_第五章_初始化与清理

初始化和清理是涉及安全的两个问题,java中采用了构造器,并额外提供了“垃圾回收器”,对于不再使用的内存资源,垃圾回收器能自动将其释放。一、用构造器确保初始化java中,通过提供构造器,类的设计者可以确保…

OkHttp 上手

OkHttp 上手 优点 快、节省带宽。支持 HTTP/2 和 SPDY。HTTP/2 和 SPDY 允许对同一个主机的所有请求,使用一个 socket。如果不支持 SPDY 的话,可以用连接池减少请求等待时间。GZIP 缩小传输大小。缓存响应(response ca…

关于Net开发中一些SQLServer性能优化的建议

一、 ExecuteNonQuery和ExecuteScalar 对数据的更新不需要返回结果集,建议使用ExecuteNonQuery。由于不返回结果集可省掉网络数据传输。它仅仅返回受影响的行数。如果只需更新数据用ExecuteNonQuery性能的开销比较小。 ExecuteScalar它只返回结果集中第一行的第一列…

jstl mysql_java – jsp jstl sql与mysql中的奇怪行为

在mysql中我有一个存储过程,其中包含一个sql:select firstname as i_firstname , lastname as i_lastname from roleuserwhere user_id uid ;我使用jstl代码来获取值: –call sp_select_username(?);${rows.i_firstname} ${rows.i_lastname}但是这个代…

C# 哈希表(Hashtable)用法笔记

一、什么是Hashtable?Hashtable 类代表了一系列基于键的哈希代码组织起来的键/值对。它使用键来访问集合中的元素。当您使用键访问元素时,则使用哈希表,而且您可以识别一个有用的键值。哈希表中的每一项都有一个键/值对。键用于访问集合中的项…

转: Div与table的区别

1&#xff1a;速度和加载方式方面的区别 div 和 table 的差异不是速度&#xff0c;而是加载方式&#xff0c;速度只能是指网络速度&#xff0c;如果速度足够快&#xff0c;是没有差异的&#xff1a; div 的加载方式是即读即加载&#xff0c;遇到 <div> 没有遇到 </div…

你的工作是为了你自己!

1、无论为谁打工&#xff0c;要为自己学东西&#xff0c;客观为公司创造价值。我自己当年&#xff0c;无论我在方正给国内企业工作&#xff0c;还是我在雅虎给外国人工作&#xff0c;我都跟别人最大的不一样&#xff0c;我从来不觉得我在给他们打工&#xff0c;我真的可能是很有…

java 无法注入service_SpringBoot集成shiro,MyRealm中无法@Autowired注入Service的问题

网上说了很多诸如是Spring加载顺序&#xff0c;shiroFilter在Spring自动装配bean之前的问题&#xff0c;其实也有可能忽略如下低级错误。在ShiroConfiguration中要使用Bean在ApplicationContext注入MyRealm&#xff0c;不能直接new对象。道理和Controller中调用Service一样&…

python之函数用法startswith()

# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法startswith() #http://www.runoob.com/python/att-string-startswith.html#startswith() #说明&#xff1a;返回布尔值,用于检查字符串是否是以指定子字符串开头&#xff0c;如果是则返回 True&#xff0c;否则…

别去取悦,心里没你的人

鞋子不合适不必硬塞&#xff0c;否则磨了自己的脚&#xff1b;不必讨好心里没你的人&#xff0c;不在乎你的人&#xff0c;你付出再多&#xff0c;也打动不了他。讨好心里没你的人&#xff0c;会让自己很累很累&#xff1b;总是迁就他&#xff0c;总是围着他转&#xff0c;最后…

tensorflow java 加速_Tensorflow使用GPU加速

测试faster-rcnn时&#xff0c;cpu计算速度较慢&#xff0c;调整代码改为gpu加速运算将 with tf.Session() as sess: 替换为1 gpu_options tf.GPUOptions(per_process_gpu_memory_fraction0.9)2 with tf.Session(configtf.ConfigProto(gpu_optionsgpu_options,log_device_plac…

Install OpenStack Kilo Dashboard wiht Nginx + uWSGI On RHEL7.1

一、安装Horizon、Nginx、uWSGI yum install -y uwsgi-plugin-python openstack-dashboard uwsgi nginx 二、配置uWSGI cat >/etc/uwsgi.ini <<EOF [uwsgi] plugins python master true processes 10 threads 2 chmod-socket 666socket 127.0.0.1:9000 pidfile …

C#枚举类型的笔记

一、枚举类型的概念枚举类型声明为一组相关的符号常数定义了一个类型名称。枚举用于"多项选择"场合&#xff0c;就是程序运行时从编译时已经设定的固定数目的“选择”中做出决定。枚举类型&#xff08;也称为枚举&#xff09;为定义一组可以赋给变量的命名整数常量提…

java动态打印_JFreeChart学习(三)——动态打印java内存使用情况

JFreeChart动态打印java内存使用情况import java.awt.BasicStroke;import java.awt.BorderLayout;import java.awt.Color;import java.awt.Font;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt.event.WindowAdapter;import java.awt…

WPF中StringToImage和BoolToImage简单用法

在WPF的绑定控件操作中&#xff0c;经常会通过bool值或者某些特定的string值做出相应动作。但UI层控件的很多属性对应的都不是Bool值或者对应的只是固定的String值。 这个时候有两方法解决该问题。 1.是在后台cs中做出比较判断&#xff0c;然后根据相应结果传达UI层做出相应动作…