引用的<script src="http://code.jquery.com/jquery-latest.js"></script>
例子<一>:实现字体变大或变小
1、主体部分:
<body>
<a href="#" id="larger">Larger</a></br>
<a href="#" id="smaller">Smaller</a>
<p>when click Larger font change Big and click Smaller font change small;when click Larger font change Big and click Smaller font change small;</p>
</body>
2、jQ代码:
<script type="text/javascript">
$(function(){
$('a').click(function(){
var os = $('p').css('font-size'); //获取的是16px
var num = parseFloat(os,10); //通过parseFloat 解析得到数字部分
var uom = os.slice(-2); //得到单位 px
$('p').css('font-size',num/1.4+uom);
if(this.id=='larger'){
$('p').css('font-size',num*1.4+uom);
}
});
});
</script>
3、效果图:
例子<二>:实现图片切换的效果
1、主体部分:
<body>
<div class="wrap">
<img src="back.jpg" alt="image" />
<img src="front.jpg" class="front" alt="image" />
</div>
<div class="wrap">
<img src="back.jpg" alt="image" />
<img src="front.jpg" class="front" alt="image" />
</div>
<div class="wrap">
<img src="back.jpg" alt="image" />
<img src="front.jpg" class="front" alt="image" />
</div>
</body>
2、jQ代码:
<script type="text/javascript">
$(function(){
$('.wrap').hover(function(){
$('.front',this).stop().animate({top:"300px"},700); //top 也可以修改为left,right等等
},function(){
$(this).children('.front').stop().animate({top:"0px"},400);
});
});
</script>
3、CSS代码
<style type="text/css">
#container{
width:850px;
text-align:center;
margin:auto;
}
.wrap{
width: 250px;
height: 140px;
position: relative;
overflow: hidden;
float: left;
}
img{
position:absolute;
top:0;
left:0;
}
</style>
4、效果图
例子<三>:实现添加与移出数据效果
1、主体部分:
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<a href="#" id="add">Add List Item</a><br>
<a href="#" id="remove">Remove List Item</a>
</body>
2、jQ代码:
<script type="text/javascript">
$(function(){
var i = $('li').size()+1;
$('a#add').click(function(){
$('<li>'+i+'</li>').appendTo('ul');
i++;
});
$('a#remove').click(function(){
$('li:last').remove();
if (i != 0){
i--;
}
});
});
</script>
3、效果图:
例子<四>:实现图片或文字变化的效果
1、主体部分:
<body>
<div id="box">CHANGE</div>
</body>
2、jQ代码:
<script type="text/javascript">$(function(){
$('#box').click(function(){
$(this).animate({"left":"300px"},4000);// first effect
$(this).animate({"width":"50px"},4000);//and so second effect
});
});
</script>
相关推荐
JQuery菜鸟学习实战, JQuery初探最int实例材料, 0基础学习JQuery最实际最直接的例子
JQuery novice to ninja(JQuery菜鸟到忍者) 此资源包含pdf电子书及配套的源代码. by Earle Castledine Craig Sharkie JQuery经典,英文版的,不过不用担心看不懂英文;因为书中有大量的实例代码供学习,只在看代码就OK....
实用的jQuery学习资料,用于学习交流。里面有非常使用的例子 不适合菜鸟
该资源描述了教你怎么样学习jQuery 里面包含了大量的实例 让你更加清晰的认识了jQuery 作用
jsPlumb+jquery 流程图设计实例,可以直接只用,业务代码还需自己添加修改
菜鸟的jQuery笔记 JavaScript实例 经典论坛JavaScript学习总结 菜鸟的Python笔记 《High Performance Web Sites》读书笔记 单片机笔记 C51笔记 51单片机实验 51单片机的Proteus实验 单片机小工具 ARM的...
asp.net调用 jquery ajax 后台使用一般处理程序或者当前页方法
精心整理的手册集合 包含html5+javascript+jQuery+php5+smarty完全中文手册+ThinkPHP快速入门手册 需要的可以下载
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。下面给大家分享一段jquery validate 设置onkeyup验证的代码,具体代码如下所示: ...
本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果。分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,...
Ajax拖动,jQuery 方法实现,使用ajax方式读取userinfo.htm的内容,userinfo.htm是读取users表中的usertitle,css,page,传递用户名,这里是模拟,...做这个教程是为了帮助比我更菜的菜鸟,也为了把我的问题暴露出来。
本文实例讲述了jQuery实现左右两个列表框的内容相互移动功能。分享给大家供大家参考,具体如下: 在jQuery中将左右两个列表框的内容相互移动,移动的同时进行删除,这里只是给大家写一个入门的小案例,今后写相同的...
JQuery JSON实例 - 通过JSON对象设置元素属性 3. JSON对象定义 本实例中,页面显示的文本内容和跳转的链接地址都以JSON对象的方式进行定义,以下代码定义了一个JSON对象数组。 var JSONObject...
本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法。分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就...
几天,遇到了json格式在JS和Jquey的环境中,需要相互转换,在网上查了一下,大多为缺胳膊少腿,也许咱是菜鸟吧,终于测试成功后,还是给初学者们一个实例吧
W3CSchool菜鸟教程是一个提供了最全的的web技术基础教程网站。网站包含了HTML教程、CSS教程、JavaScript教程、jQuery教程、Ajax教程、PHP教程等...同时也提供了大量的在线实例,通过实例,您可以更好地学习如何建站。
在学习javascript过程中,菜鸟教程有一个javascript实例—css日历,感觉挺有趣的,在它的基础上增加了一些简单的功能(差点哭辽)。 功能 按照传统日历方式显示该月的每一天。 可以突出显示今天的日期 可以翻阅...
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧。 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了网上的资料...
对于JS以及一些JS框架如JQuery等JS框架,自己也只是处在简单应用的阶段,当然自己也在不断的学习当中,希望将来能跟大家分享更多JS方面的心得。今天先来点开胃的,说一下如何设置一个默认按钮,就是不管焦点在不在...
与其他前端工具箱不同,Bootstrap优先设计了一个样式化的使用指南,不仅用来介绍特性,更用以展示最佳实践,应用以及代码实例。 不断完善的库 尽管只有10kb(gzip压缩后),Bootstrap却仍是最完备的前端工具箱...