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 options属性集合操作代码
Dec 28 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
js实现无限瀑布流实例方法
Sep 16 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
模仿OSO的论坛(一)
2006/10/09 PHP
php开发工具之vs2005图解
2008/01/12 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Python过滤列表用法实例分析
2016/04/29 Python
Python画图学习入门教程
2016/07/01 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
python实现感知器算法(批处理)
2019/01/18 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
python tqdm库的使用
2020/11/30 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
机械制造专业个人的自我评价
2013/12/28 职场文书
优秀员工演讲稿
2014/05/19 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
先进事迹演讲稿
2014/09/01 职场文书
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
python入门学习关于for else的特殊特性讲解
2021/11/20 Python
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL