jQuery实用技巧必备(中)


Posted in Javascript onNovember 03, 2015

本文实例总结了经典且实用的jQuery代码开发技巧。分享给大家供大家参考。具体如下:

12.预加载图片
如果你的页面中使用了很多不可见的图片(如:hover 显示),你可能需要预加载它们:

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
 $('<img>').attr('src', arguments[i]);
 }
};
$.preloadImages('img/hover1.png', 'img/hover2.png');

13.检查图片是否加载完成
有时候你需要确保图片完成加载完成以便执行后面的操作:

$('img').load(function () {
 console.log('image load successful');
});

你可以把 img 替换为其他的 ID 或者 class 来检查指定图片是否加载完成。
14.自动修改破损图像
如果你碰巧在你的网站上发现了破碎的图像链接,你可以用一个不易被替换的图像来代替它们。添加这个简单的代码可以节省很多麻烦:

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

即使你的网站没有破碎的图像链接,添加这段代码也没有任何害处。
15.鼠标悬停(hover)切换 class 属性
假如当用户鼠标悬停在一个可点击的元素上时,你希望改变其效果,下面这段代码可以在其悬停在元素上时添加 class 属性,当用户鼠标离开时,则自动取消该 class 属性:

$('.btn').hover(function () {
 $(this).addClass('hover');
 }, function () {
 $(this).removeClass('hover');
 });

你只需要添加必要的CSS代码即可。如果你想要更简洁的代码,可以使用 toggleClass 方法:

$('.btn').hover(function () { 
 $(this).toggleClass('hover'); 
});

注:直接使用CSS实现该效果可能是更好的解决方案,但你仍然有必要知道该方法。
16.禁用input 字段
有时你可能需要禁用表单的 submit 按钮或者某个 input 字段,直到用户执行了某些操作(例如,检查“已阅读条款”复选框)。可以添加 disabled 属性,直到你想启用它时:

$('input[type="submit"]').prop('disabled', true);

你要做的就是执行 removeAttr 方法,并把要移除的属性作为参数传入:
$('input[type="submit"]').removeAttr('disabled');

17.阻止链接加载
有时你不希望链接到某个页面或者重新加载它,你可能希望它来做一些其他事情或者触发一些其他脚本,你可以这么做:
$('a.no-link').click(function (e) {
 e.preventDefault();
});

18.切换 fade/slide
fade 和 slide 是我们在 jQuery 中经常使用的动画效果,它们可以使元素显示效果更好。但是如果你希望元素显示时使用第一种效果,而消失时使用第二种效果,则可以这么做:
// Fade

$('.btn').click(function () {
 $('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
 $('.element').slideToggle('slow');
});

19.简单的手风琴效果
这是一个实现手风琴效果快速简单的方法:
// Close all panels

$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function () {
 var next = $(this).next();
 next.slideToggle('fast');
 $('.content').not(next).slideUp('fast');
 return false;
});

20.让两个DIV 高度相同
有时你需要让两个 div 高度相同,而不管它们里面的内容多少。可以使用下面的代码片段:

var $columns = $('.column');
var height = 0;
$columns.each(function () {
 if ($(this).height() > height) {
 height = $(this).height();
 }
});
$columns.height(height);

这段代码会循环一组元素,并设置它们的高度为元素中的最大高。
21. 验证元素是否为空
This will allow you to check if an element is empty.

$(document).ready(function() {
 if ($('#id').html()) {
 // do something
 }
});

22. 替换元素
Want to replace a div, or something else?

$(document).ready(function() {
 $('#id').replaceWith('
<DIV>I have been replaced</DIV>

');
});

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
页面版文本框智能提示JS代码
Nov 20 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
手机号码,密码正则验证
Sep 04 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
Angular实现的简单定时器功能示例
Dec 28 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
jQuery实用技巧必备(上)
Nov 02 #Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 #Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 #Javascript
jquery实现简洁文件上传表单样式
Nov 02 #Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 #Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 #Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 #Javascript
You might like
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
python快速排序代码实例
2013/11/21 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
Python中正则表达式的用法总结
2019/02/22 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
python中count函数简单的实例讲解
2020/02/06 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
致短跑运动员广播稿
2014/01/09 职场文书
装饰活动策划方案
2014/02/11 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
终止劳动合同协议书
2014/04/14 职场文书
教师考核材料
2014/05/21 职场文书
教室标语大全
2014/06/21 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
oracle数据库去除重复数据
2022/05/20 Oracle