每一个网页设计师都应该了解的jQuery片段

2014-04-07 分类：网站建设

jQuery是用成百上千个网页。这是插入到页面最常见的图书馆之一，它使DOM操作单元。
当然，jQuery的受欢迎的原因之一是它的简单性。我们似乎可以这样做几乎任何强大的图书馆。
所有我们的选择，有一些片段我们会回来一次又一次。今天我想给你10个片段，每个人，新手们，将用一次又一次。
每一个网页设计师都应该了解的jQuery片段
1）回到顶部按钮
回到顶部
$（'a.top”）。单击（function() {
$（文档。体）。动画（{ 0 }，scrollTop：800）；
返回false；
}）；
//创建一个锚标签
< class=“顶”href =“#”>返回顶部
你可以看到使用动画和scrollTop功能jQuery中我们不需要一个插件来创建一个简单的滚动到顶部动画。
通过改变scrollTop值我们可以改变，我们希望滚动条的土地，在我的情况下，我使用了一个价值0因为我想让它去的顶端，我们的网页，但是如果我想我可以抵消100px 100px的功能类型。
所以我们真的做的是动画文件的身体在800ms课程直到卷轴一直到顶层文件。

2）检查是否加载图像
$（'img”）。负荷（function() {
控制台日志（图像加载成功”）；
}）；
有时你需要检查你的图像是满载为了继续你的脚本，这三条线的jQuery代码可以帮你轻松。
你也可以检查是否一个特定的形象与身份或阶级取代img标签加载。
每一个网页设计师都应该了解的jQuery片段
3）修复损坏的图像自动
（'img美元的误差（function() {）。
$（这）.attr（'src '、' IMG /破碎。png”）；
}）；
偶尔我们的时候，我们已经打破了图像链接在我们的网站和替换他们一个个并不容易，所以加入这段简单的代码可以为你节省很多的麻烦。
即使你没有任何断开的链接将不会做任何伤害。
每一个网页设计师都应该了解的jQuery片段
4）切换类在盘旋
$（'按钮'）。悬停（function() {
$（这）.addClass（'hover”）；
function() { }，
$（这）。removeClass（'hover”）；
}
）；
成都网站制作通常想改变在我们的页面的点击元素视觉当用户将鼠标悬停在这个jQuery代码段只是说，它增加了一个类元素当用户悬停和在用户停止它消除了阶级，所以你要做的就是在你的CSS文件，添加必要的风格。
每一个网页设计师都应该了解的jQuery片段
5）禁用输入字段
$（输入[类型=“提交”]”）.attr（“残疾”，真的）；
有时你可能想提交按钮的形式甚至它的一个文本输入被禁用，直到用户执行某个动作（检查“我已经阅读条款”复选框为例），这行代码实现；添加禁用属性输入的所以你可以使它想你的时候。
做你需要做的是对残疾人的输入作为参数运行把功能：
$（输入[类型=“提交”]”）把（“禁用”）；

6）停止链接的加载
$（'a.no-link”）。单击（function（e）{
E. preventdefault()；
}）；
有时我们不希望链接到某个页面或者加载它，我们想让他们做的东西像引发其他一些脚本，在这种情况下，这段代码会阻止默认动作技巧。
每一个网页设计师都应该了解的jQuery片段
7）切换淡入/幻灯片
/ /褪色
$（“-”），单击（function() {
$（“元素”）。fadetoggle（“慢”）；
}）；
/ /切换
$（“-”），单击（function() {
$（“元素”）。slidetoggle（“慢”）；
}）；
我们使用大量的幻灯片和消失在我们的动画使用jQuery的东西，有时我们只是想表明一个元素时，我们点击的东西，显露和slideDown方法是好的，但如果我们想要的元素出现在第一次点击，然后在第二个这段代码消失会工作得很好。

8）简单的手风琴
/ /关闭所有面板
$（“#手风琴”）。发现（的内容）。hide()；
/ /手风琴
$（“#手风琴”）。找到（'。手风琴头”），点击（function() {
VaR下=（这next()美元）；
接下来slidetoggle（'fast”）；
$（“内容”），不（下）。slideup（'fast”）；
返回false；
}）；
通过添加这个脚本的所有你真的需要在您的网页是必要的HTML去得到这个工作。
你可以看到这段我首先关闭所有面板在我国手风琴然后单击事件我做的，是联系在一起的，标题幻灯片切换的内容，和其他所有的幻灯片。这是一个简单的方法快速的手风琴。

9）使两个div高度相同
$（“div”。）.css（'min-height，$（“div”。主要）。height()）；
有时候你想一下有相同的高度，无论什么内容都在其中，这一点使刚刚；在这种情况下设置最小高度，意味着它可以大于主div不小。这是伟大的砖石类网站。

10）斑剥的无序列表
$（李：奇”）.css（背景”、“# e8e8e8”）；
这一点你可以很容易地创建斑马条纹的无序列表，这个地方的背景你定义每一个奇怪的列表项，这样你可以将默认为在CSS文件中的偶数。你可以把这段代码到任何类型的标记，从表到平原的DIV，你想成为斑马剥离。

结论
这是jQuery的代码我发现自己一次又一次在我的项目中使用。我希望你将本页加入书签，回来时你需要一个这样的片段。