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 ...
随机推荐
- 转:android 自定义RadioButton样式
http://gundumw100.iteye.com/blog/1146527 上面这种3选1的效果如何做呢?用代码写? 其实有更简单的办法,忘了RadioButton有什么特性了吗? 我就用Ra ...
- CSS实现背景透明而背景上的文字不透明完美解决
在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...
- "SOAP WebService " 和 "RESTful WebService" 的定义分别是什么？？？
一个个来,要知道区别,首先得知道各自的意义及用途web service采用Xml传输结构化的数据,轻量级跨平台而soap则是一种基于http的应用层通讯协议,同样采用xml编码,只不过soap又更进了 ...
- LINQ to SQL 基础
取得数据库Gateway 要操作数据库,我们首先要获得一个DataContext对象,这个对象相当于一个数据 库的Gateway,所有的操作都是通过它进行的.这个对象的名字是“Linq to SQL ...
- Android打开系统的Document文档图片选择
打开Document UI 过滤图片 private void startAcitivty() { Intent intent = new Intent(); intent.setAction(&qu ...
- Solr配置集群
1.主机SolrConfig.xml <requestHandler name="/replication" class="solr.ReplicationHand ...
- Objective-C学习篇04—多态
多态 多态的概念 有这样一个例子.早上我和同事说口渴了.结果:A同事拿着我的水杯去给我接了一杯水.B同事顺手在饮水机上拿了一次性纸杯给我接了杯水.C同事给了我一瓶他早上刚买的饮料.同事们得到的是同样的 ...
- MYSQL一对多，两表查询合并数据
select a.askid,a.title,GROUP_CONCAT(b.message SEPARATOR '----') as content from gg_ask as a join gg_ ...
- gdb调试memcached
1.memcached安装前,要安装libevent 2.memcached在configure中 加上 CPPFLAGS='-ggdb3'选项 例如 本机 ./configure -prefix ...
- wamp虚拟机配置
1.找到httpd.conf 里面:找到 # Virtual hosts 开启虚拟机Include conf/extra/httpd-vhosts.conf 2 编辑httpd-vhosts.con ...