jQuery常用的一些技巧汇总


Posted in Javascript onMarch 26, 2016

引子

jQuery的存在,让学习前端开发的人感到前端越来越容易入门了,用简单的几行代码就可以实现需求,但是,你真的会用jQuery么,当代码运行后无法看到自己预期的效果,是不是觉得jQuery出了问题,其实,问题还是出在了自己会不会用上面。下面列举一些开发中经常遇到的应用实例,发现一下另一个不同的jQuery世界。

回到顶部按钮

利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画。

$('.top').click(function (e) {
 e.preventDefault();
 $('html, body').animate({scrollTop: 0}, 800);
});

通过scrollTop的值来改变你想要滚动到的位置。其实你就是做了:在接下来的800毫秒中让页面滚动,直到它滚动到文档的顶部。

图片预加载

如果你的网页使用了很多隐藏图片文件(例如:鼠标悬停展示的图片),那么图片的预加载是有意义的:

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
 $('<img>').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');
var height = 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()选择器,你能找到一个元素内的文本内容。如果文本不存在,则这个元素将被隐藏:

var search = $('#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!');
 } else if (e.target.visibilityState === "hidden") {
 console.log('Tab is now hidden!');
 }
});
Javascript 相关文章推荐
关于jquery性能最佳实践的讨论,与求教
Mar 30 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
javascript拖拽应用实例(二)
Mar 25 #Javascript
几种经典排序算法的JS实现方法
Mar 25 #Javascript
javascript拖拽应用实例
Mar 25 #Javascript
JavaScript学习笔记之创建对象
Mar 25 #Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 #Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 #Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 #Javascript
You might like
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
python操作ie登陆土豆网的方法
2015/05/09 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
竞选班干部演讲稿100字
2014/08/20 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js
nginx lua 操作 mysql
2022/05/15 Servers
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS