给计划师的jQuery教程（第一部门）
|
这篇文章包括10个形象的例子，目标是给web计划师可能是入门的新人先容怎样行使jQuery实现javascript结果。jquery是一个“写得少，做的多”的很是优越的一个javascript类库。它包括了许多Ajax以及javascript的特征，语义化编程，进步用户体验。由于这是一篇关于jQuery行使的教程，以是CSS从简。 jQuery是怎样事变的？ 先下载jQuery.js文件的一份拷贝，将它插入你的html源码中(最好插在中)。然后你就可以写代码挪用jQuery了。下图表现了jQuery怎样事变的:
jQuery选择器 写jQuery代码相比拟力轻易(多亏其优越的文档)。要害点在于学会怎样运用jQuery选择器得到你想要添加结果的元素。 1.简朴的滑动面板 从一个简朴的滑动面板开始，你应该看到许多这样的例子吧，当点击一个链接的时辰一个面板滑动下来(Demo)。
 引用的内容：[www.veryhuo.com]
$(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); }); }); 当被点击的话， 就会上下滑动，外加添加可能删除CSS class：active。.active是用来开关改变箭头图片位置的CSS，到达箭头上下转化的结果。 2.简朴的消散结果 点击图片按钮，文本块就消散了(Demo)。
引用的内容：[www.veryhuo.com]
$(document).ready(function(){ $(".pane .delete").click(function(){ $(this).parents(".pane").animate({ opacity: "hide" }, "slow"); }); }); 当<img class=”delete”>被单击，jQuery找到<div class=”pane”>并修改其opacity值，慢速（slow）渐变到消散（hide）。 3.链式持续的转换结果 来看看jQuery链式结果的魅力。简简朴单几行代码，就可以让蓝色的盒子淡入淡出放大可能缩小的飞来飞去（Demo）。 3.链式持续的转换结果 来看看jQuery链式结果的魅力。简简朴单几行代码，就可以让蓝色的盒子淡入淡出放大可能缩小的飞来飞去(Demo)。
引用的内容：[www.veryhuo.com]
$(document).ready(function(){ $(".run").click(function(){ $("#box").animate({opacity: "0.1", left: "+=400"}, 1200) .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow") .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow") .animate({top: "0"}, "fast") .slideUp() .slideDown("slow") return false; }); }); 每一行实现如下 翻译自：web designer wall 翻译：http://www.cnblogs.com/island205/ （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
