jQuery(二)
jQuery学完了!好用!
1.用定时器做的jquery里面的animate效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器实现ANIMATE效果</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color: #f00;
position: absolute;
left:100px;
top:100px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var x = 100;
var timer = setInterval(startMove, 100);
function startMove(){
$("div").attr("style","width:"+x+"px;height:"+x+"px;left:"+x+"px;top:"+x+"px");
x++;
}
$("button").click(function(){
clearInterval(timer);
})
$("input").click(function() {
timer = setInterval(startMove, 100);
});
});
</script>
</head>
<body>
<input type="button" value="变大">
<button>Stop</button>
<div>大! <font size="3">大!</font> <font size="5">大!</font></div>
</body>
</html>
2.全选/反选/取消/删除功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选/反选/取消/删除功能</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
//全选功能
$("#all").click(function(){
$(":checkbox").prop("checked",true);
})
//取消功能
$("#none").bind(
"click",function(){
$(":checkbox").prop("checked",false);
})
//反选功能
$("#opposite").click(function(){
for(var i=0; i<$(":checkbox").length; i++){
$($(":checkbox")[i]).prop("checked",!$($(":checkbox")[i]).prop('checked'));
}
})
//删除功能
$("#del").click(function(){
$(":checked").parents("tr").remove();
})
}); </script>
</head>
<body>
<table width='600' align='center' border='1'>
<tr>
<td>序号</td>
<td>名字</td>
<td>类型</td>
<td>选择</td>
</tr>
<tr>
<td>101</td>
<td>越狱</td>
<td>剧情</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>102</td>
<td>The Vampire Diary</td>
<td>科幻</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>103</td>
<td>冰与火之歌</td>
<td>奇幻</td>
<td><input type="checkbox"></td>
</tr>
<tr align='right'>
<td colspan='4'>
<input type="button" id='all' value='全选'>
<input type="button" id="none" value='取消'>
<input type="button" id="opposite" value='反选'>
<input type="button" id="del" value='删除'>
</td>
</tr>
</table>
</body>
</html>
3.我想我是太无聊了...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我想我是太无聊了...</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var x = 600, y = 200, m = 600, n=200;
$(function(){
$("img").css({
"width":"100px",
"height":"140px",
"position":"absolute",
"left":"600px",
"top":"200px"
})
window.setTimeout(left1, 1)
window.setTimeout(up1, 1)
window.setTimeout(right1, 1)
window.setTimeout(down1, 1)
})
function left1(){
setInterval(startLeft1, 20)
}
function startLeft1(){
$("#left1").css({
"left":--x + "px",
})
if(x<=400){x=600;}
}
function up1(){
setInterval(startUp1, 20)
}
function startUp1(){
$("#up1").css({
"top":--y + "px",
})
if(y<=0){y=200;}
}
function right1(){
setInterval(startRight1, 20)
}
function startRight1(){
$("#right1").css({
"left":++m + "px",
})
if(m>=800){m=600;}
}
function down1(){
setInterval(startDown1, 20)
}
function startDown1(){
$("#down1").css({
"top":++n + "px",
})
if(n>=400){n=200;}
}
</script>
</head>
<body>
<img src="html/images/1.jpg" id="left1">
<img src="html/images/2.jpg" id="up1">
<img src="html/images/3.jpg" id="right1">
<img src="html/images/4.jpg" id="down1">
<img src="html/images/6.jpg">
</body>
</html>
jQuery(二)的更多相关文章
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- jquery二维码生成插件_二维码生成器
jquery二维码生成插件_二维码生成器 下载地址:jquery生成二维码.rar
- JQuery(二)——简单动画效果
上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...
- jQuery(二) jQuery对Ajax的使用
学习使我快乐!嘿 --WH 一.jQuery使用Ajax 想要了解jQuery如何使用Ajax,并且体会到它所带来的方便性,那么就得了解原始的Ajax是如何编写的,是怎样的繁琐,然后和Jquery的代 ...
- 基于jquery二维码生成插件qrcode
1.首先在页面中加入jquery库文件和qrcode插件. ? 1 2 <script type="text/javascript" src="jquery.js& ...
- jQuery二维码
现在二维码很火,因为他可以很方便的贴到任何地方,只要扫一扫就可以看到二维码的内容 ok 废话少说,上代码 这个二维码基于jquery和jquery.qrcode插件 所以使用前先引入 <scri ...
- jquery二维码生成插件jquery.qrcode.js
插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...
- jQuery二——属性操作、文档操作、位置属性
一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...
- JavaScript类库---JQuery(二)
接上: 6.Ajax: 一个基础底层函数:jQuery.ajax(); //高级工具函数都会调用此函数: 一个高级工具方法:load() ; 四个高级工具函数:jQuery.getScript ...
- 你不需要jQuery(二)
完全没有否定jQuery的意思,jQuery是一个神奇的.非常有用的工具,可以节省我们大量的时间. 但是,有些时候,我们只需要jQuery的一个小功能,来完成一个小任务,完全没有必要加载整个jQuer ...
随机推荐
- ThinkPHP学习 volist标签高级应用之多重嵌套循环、隔行变色(转)
Action代码: public function index(){ $prod = I("get.prod_en"); $id = I("get.id", 0 ...
- 二、T4模板
上文带大家见识了下T4,这里呢开始介绍T4模板有关的内容.关于T4模板介绍和使用网上一搜一箩筐,想深入研究的可以自行去找些资料,这里只介绍接下来我们需要使用的一些知识,不会面面俱到的讲T4模板所有的知 ...
- SQL Server 2008创建定期自动备份任务
首先需要启动SQL Server Agent服务,这个服务如果不启动是无法运行新建作业的,点击“开始”–“所有程序”–“Microsoft SQL Server 2008”–“启动SQL Server ...
- 【转】iOS Developer：真机测试
摘要 申请真机调试证书全过程,最新更新:2014-05-19 2014-10-16记:由于现在 itunes 更新变化较大,本文可能不能很好地解决您的问题,而我现在不负责公司的发布调试问题,暂未及时更 ...
- Spring mvc 中有关 Shiro 1.2.3 配置问题
Spring 版本:3.2.x, 4.0.x [问题说明] 首先介绍下配置出错情况: (1)项目中,Spring3 and Spring4 的 applicationContext.xml aop ...
- SublimeText插件Anaconda如何关闭警告框
之前在学习python的时候,使用了代码编辑器Sublime Text 3并安装了强大的Anaconda插件.瞬间让Sublime Text3变身为Python的IDE. 在使用过程中,侧边栏的白点和 ...
- Python自动化运维之12、面向对象进阶
上一篇<面向对象基础>文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公 ...
- jquery如何判断滚动条滚到页面底部并执行事件
首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...
- C语言的算法--------二分法查找
int find(int n,int a[],int l){int low=0;int high=l-1;int middle=0;while(low<high){middle=(low+hig ...
- bind函数
bind函数把一个本地协议地址赋予一个套接字 对于网际协议,协议地址是32位的IPv4地址或128位的IPv6与16位的TCP或UDP端口号的组合 int bind ( int sockfd, con ...