本文总结了jQuery代码的经典和实用开发技术,供大家
参考:
12。预加载的
图片 如果您在页面中使用了许多不可见的图片(例如:悬停
显示),您可能需要对它们进行预加载:
(美元。preloadimages =
功能){
对于(var i = 0;i < arguments.length;i++){
$()。Attr('src,论点{我});
}
};
美元。preloadimages('img / hover1。png,'img / hover2。png);
13。
检查图片是否加载。
有时需要确保完成图片完成以下
操作:
$('img)。负荷(
函数(){)
console.log(图像加载成功);
});
你可以取代IMG与其他ID或类检查是否指定的图片加载。
14。自动
修改受损图像
如果你碰巧在你的
网站上
发现了坏的图片链接,你可以用一个不易被
替换的图像替换它们:
$('img '),(
错误,函数()){
$(这)。道具('src ','img /破碎。png);
});
即使你的站点没有坏的图像链接,添加这个代码也无妨。
15。
鼠标悬停(悬停)开关类
属性 如果你想改变的
影响当
用户悬停在一个可点击的元素,下面的代码可以添加类属性,当它盘旋在元。当用户鼠标离开时,它会自动
取消类属性。
$('按钮')。Hover(function(){)
$(这)AddClass('hover);
}函数(){()
$(这)RemoveClass('hover);
});
你只需要添加必要的CSS代码。如果你想要更简洁的代码,你可以使用toggleclass
方法:
$('按钮')。Hover(function(){)
$(这)ToggleClass('hover);
});
注意:用CSS直接实现这个效果可能是一个更好的
解决方案,但是你仍然需要知道这个方法。
16。禁用
输入字段
有时您可能需要禁用表单的提交按钮或输入字段,直到用户
执行某些操作(例如,检查读取子句复选框):
复制代码如下:$(输入{
类型=提交。道具)(
禁止的,真的);
你要做的是执行的方法和通过把你要
删除的一个
参数的属性。
复制代码如下:$(输入{类型=提交。把)(禁止的);
17。块链接加载
有时您不想链接到页面或重新加载它。您可能希望它做其他事情或触发一些其他
脚本,您可以这样做。
$('a.no-link)。Click(function(e){
E.preventDefault();
});
18。开关淡入/幻灯片
淡入淡出和幻灯片是我们在jQuery中
经常使用的
动画效果,它可以使元素显示得更好,但是如果你想在元素消失时使用第一个效果,在消失时使用第二个效果,你可以这样做:
淡入淡出
$('按钮')。Click(function(){)
$('元')FadeToggle(慢的);
});
切换
$('按钮')。Click(function(){)
$('元')SlideToggle(慢的);
});
19。简单的手风琴效果
这是一种快速而简单的方法来达到手风琴的效果。
所有
面板 /
关闭 $(#手风琴)。发现(的内容)。隐藏();
手风琴
$(#手风琴)。找到('。手风琴头)。Click(function(){(){)
var = $(this);
Next.slideToggle('fast);
$(内容),(下),SlideUp('fast);
返回false;
});
20。让两个div的高度相等
有时您需要使两个div相同,而不管它们的内容:
var = $(列);
var高度= 0;
columns.each美元(函数(){()
如果($(.)Height()>高度){
高度= $(这个)。Height();
}
});
columns.height美元(高度);
此代码将循环一组元素,并将其高度
设置为元素中的最大值。
21。验证元素是否为空
这将允许你清空。检查元素是否为
$(
文档)Ready(函数(){)
如果($(' # ID)。Html()){
做某事
}
});
22。更换元件
要替换div或其他什么
$(文档)Ready(函数(){)
$(# ID)。ReplaceWith(
我被替换了
');
});
以上是本文的全部内容,希望能对大家有所帮助。