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 ...
随机推荐
- 2015 Multi-University Training Contest 1 题解 BY FZUw
题目链接:5288-5299 HDU5288 题解原文链接:我是链接
- jquer “$” 扩展(笔记)
/** * Created by shanruo on 16-03-10. */ (function ( $ ){ $.extend ({ /* * 根据参数名获取参数 @name String 参数 ...
- bootstrap新闻模块样式模板
<!-- news beginning --> <div class="container mp30"> <div class="row&q ...
- sql - 面试
一,关于 group by 表内容: 2005-05-09 胜 2005-05-09 胜 2005-05-09 负 2005-05-09 负 2005-05-10 胜 2005-05-10 负 200 ...
- L-value 和 R-value.
An L-value is something that can appear on the left side of an equal sign, An R-value is something t ...
- 使用WebUploader使用，及使用后测试横拍或竖拍图片图片方向不对等解决方案
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...
- 【转】 UITableView 的indexPath
原文:http://blog.csdn.net/mengtnt/article/details/6733691 前面说过了viewController的一些基本注意事项.这里针对不同的viewCont ...
- shareSDK微博分享出现: 分享失败: 错误描述:Insufficient app permissions! 错误码:10014
这个错误是由于appKey所在账号没有微博高级写入接口权限, 需要申请, 详见: http://www.mamicode.com/info-detail-936938.html
- 自定义UITableViewCell时, 使用autoLayout, 无法很好的做到屏幕适配
解决方法: 重写cell的setFrame方法即可 - (void)setFrame:(CGRect)frame { frame.size.width = self.window.frame.size ...
- statistic学习笔记
1. 假设检验:就是对于符合一定前提条件的数据,先作一个假设H0,还有一个备择假设H1(一般是H0的反面,或者是H0不包含的情况),通过一定的计算公式,算出一个值(比如开方检验就是开方值),这个值的理 ...