jquery常用的12个小功能

前端技术 2023/09/06 JavaScript

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();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/15089

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案