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(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 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中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
php反射应用示例
2014/02/25 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
图片自动更新(说明)
2006/10/02 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python实现高效求解素数代码实例
2015/06/30 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
C++:局部变量能否和全局变量重名
2014/03/03 面试题
监理资料员岗位职责
2014/01/03 职场文书
学年自我鉴定
2014/01/16 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
党支部先进事迹材料
2014/12/24 职场文书
公司开业致辞
2015/07/29 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
angular4实现带搜索的下拉框
2022/03/25 Javascript
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis