jquery常用的12个小功能


Posted in Javascript onJuly 22, 2016

jquery12个常用功能极好的,快来围观!

返回顶部
使用JQuery的animate和scrollTop方法可以创建简单地返回顶部的动画:

// Back to top
$('a.top').click(function (e) {
 e.preventDefault();
 $(document.body).animate({scrollTop: 0}, 800);
});

HTML中得有一个按钮:

<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>

可以改变scrollTop的值来定位滚动条的位置。

图片预加载
如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载:

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
 $('img').attr('src', arguments[i]);
 }
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');

判断图片是否完全加载
有时需要图片完全加载才能进行后面的操作,下面的这段脚本可以实现:

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

你也可以通过带id或者class的img标签来判断某张特定的图片是否完全加载

自动修复损坏图片
如果图片损坏,可以用另外一张进行替换:

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

Hover状态的类切换
当用户的鼠标指针悬浮在一个可以点击的元素上时,你可以通过添加一个class改变它的视觉效果,鼠标指针离开该元素时,就移开刚刚添加的class:

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

一个更简单的方式是使用toggleClass:

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

Note: CSS may be a faster solution in this case but it's still worthwhile to know this.输入框的不可编辑
有时,你想要表单的提交按钮或者文本框变的不可编辑,直到用户完成某个特定的动作,通过修改input元素的disabled属性来实现:
$('input[type="submit"]').prop('disabled', true);
再次调用prop方法将disabled值改为false,就可以更改元素状态:
$('input[type="submit"]').prop('disabled', false);

停止链接加载
若你不想点击链接跳转到另一个页面或者重新加载页面,仅仅只想让它做点别的事情,如触发其它脚本,则需要阻止链接的默认行为:

$('a.no-link').click(function (e) {
 e.preventDefault();
});

Fade/Slide切换
Slideing 和 fading 是很常用的 JQuery 动画。如果你想要在用户产生点击事件时显示一个元素,可以用fadeIn或者slideDown,若要实现第一次点击显示元素而第二次点击隐藏元素的效果,可以参考下面的脚本:

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

简单地手风琴
下面的这段脚本可以简单实现手风琴效果:

// 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;
});

让两个Div等高
有时,需要让两个Div保持等高,而不管两个Div的内容如何:

$('.div').css('min-height', $(.main-div).height());
var $columns = $('.column');
var height = 0;
$columns.each(function () {
 if ($(this).height() > height) {
 height = $(this).height();
 }
});
$columns.height(height);

在上述的示例中,会循环一个元素集合,并将元素的高度设置成元素集合中高度最高的。若要所有 column 保持同样地高度,则可以这样:

var $rows = $('.same-height-columns');
$rows.each(function () {
 $(this).find('.column').height($(this).height());
});

在新的Tab/Window打开外链
在浏览器的新Tab/Window打开外链,并且在同一个Tab/Window打开同源的链接:

$('a[href^="http"]').attr('target','_blank');
$('a[href^="//"]').attr('target','_blank');
$('a[href^="'+window.location.origin+'"]').attr('target','_self');

Note: window.location.origin doesn't work in IE10. This fix takes care of the issue.
通过文本查找元素
利用 JQuery 的contains()选择器可以查找一个包含特定文本的元素,如果文本不存在,元素则隐藏:

var search = $('#search').val();
$('div:not(:contains("'+search+'"))').hide();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
BootStrap 附加导航组件
Jul 22 #Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 #Javascript
Select下拉框模糊查询功能实现代码
Jul 22 #Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 #Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 #Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 #Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 #Javascript
You might like
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
使用PHP开发留言板功能
2019/11/19 PHP
js表数据排序 sort table data
2009/02/18 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
10款最好的Web开发的 Python 框架
2015/03/18 Python
详解django三种文件下载方式
2018/04/06 Python
利用python开发app实战的方法
2019/07/09 Python
Python高级property属性用法实例分析
2019/11/19 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
求职信格式范本
2013/11/15 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
群众路线对照检查材料
2014/09/22 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android