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 ...
随机推荐
- 64位Window操作系统下，Orcal数据访问服务器端和客户端版本对应与通讯问题
最近做一个小系统,需要在客户现场搭建数据库环境.之前我们一直访问的是公司的一个测试库,现在需要在现场开发,现场的Orcal服务器是12C ,我们本不打算重装服务器端orcal,故将我们自己电脑的orc ...
- Swift - 07 - 布尔类型
//: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...
- jQuery banner 滑动
jQuery(document).ready(function() { var abovePos = 50; var customMax = 1600; var zIdx = 100; var $bn ...
- 挂载NTFS
1.安装ntfs-3g wget https://tuxera.com/opensource/ntfs-3g_ntfsprogs-2015.3.14.tgz --no-check-certificat ...
- 理解O/R Mapping
本文的目的是以最精炼的语言,理解什么是O/R Mapping,为什么要O/R Mapping,和如何进行O/R Mapping. 什么是O/R Mapping? 广义上,ORM指的是面向对象的对象模型 ...
- 关于$_SERVER 常量 HTTP_X_FORWARDED_HOST与 HTTP_HOST的问题
今天在看ecshop的源码,发现了用$_SERVER['HTTP_X_FORWARDED_HOST']来判断主机的地址,就目前来说很多人都是直接通过$_SERVER['HTTP_HOST']来判断的, ...
- 个人Python常用Package及其安装
为了避免每次重装系统时又要东翻西找,现在此记录一下目前常用的Python包安装过程. 1) Python: 2.7.11, 下载地址:www.python.org.由于个人喜欢使用PyQt4(其实是不 ...
- Linux shell （一）
echo -e "Hello World! \a \n" # -e 解析反斜杠 read -p "Please input your first name: &q ...
- eclipse 重构功能。
1. Rename Rename重构的功能就是重命名Java元素.虽然可以通过手动修改文件的文件名或其它Java元素的名称,但这种方式不会更新与此Java元素相关联的引用,用户必须手动查找和此Java ...
- 转：如何查看linux版本 如何查看LINUX是多少位
原文来自于:http://blog.csdn.net/hongweigg/article/details/7192471 一.如何得知自己正在使用的linux是什么版本呢,下面的几种方法将给你带来答案 ...