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(二)的更多相关文章

  1. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  2. jquery二维码生成插件_二维码生成器

    jquery二维码生成插件_二维码生成器 下载地址:jquery生成二维码.rar

  3. JQuery(二)——简单动画效果

    上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...

  4. jQuery(二) jQuery对Ajax的使用

    学习使我快乐!嘿 --WH 一.jQuery使用Ajax 想要了解jQuery如何使用Ajax,并且体会到它所带来的方便性,那么就得了解原始的Ajax是如何编写的,是怎样的繁琐,然后和Jquery的代 ...

  5. 基于jquery二维码生成插件qrcode

    1.首先在页面中加入jquery库文件和qrcode插件. ? 1 2 <script type="text/javascript" src="jquery.js& ...

  6. jQuery二维码

    现在二维码很火,因为他可以很方便的贴到任何地方,只要扫一扫就可以看到二维码的内容 ok 废话少说,上代码 这个二维码基于jquery和jquery.qrcode插件 所以使用前先引入 <scri ...

  7. jquery二维码生成插件jquery.qrcode.js

    插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...

  8. jQuery二——属性操作、文档操作、位置属性

    一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...

  9. JavaScript类库---JQuery(二)

    接上: 6.Ajax:  一个基础底层函数:jQuery.ajax();  //高级工具函数都会调用此函数:  一个高级工具方法:load() ;  四个高级工具函数:jQuery.getScript ...

  10. 你不需要jQuery(二)

    完全没有否定jQuery的意思,jQuery是一个神奇的.非常有用的工具,可以节省我们大量的时间. 但是,有些时候,我们只需要jQuery的一个小功能,来完成一个小任务,完全没有必要加载整个jQuer ...

随机推荐

  1. text-overflow:ellipsis的巧妙运用

    关键字: text-overflow:ellipsis 语法:text-overflow : clip | ellipsis 取值: clip :默认值 .不显示省略标记(...),而是简单的裁切. ...

  2. Oracle的卸载与安装

    今天在做一个CURD的web小应用,为后面使用ExtJS搭建一个后台.因为还没有使用过Oracle数据库,因此今天也特的地的使用oracle数据库作为后台的数据库,也当练习使用oracle. 但是今天 ...

  3. Object Storage(Swift)安装过程——Havana

    自从看了Havana安装文档有关Swift的安装一节,发现H版的安装过程与以前还是有些差别的.不过大致过程还是那些.下面简单介绍下我们安装的过程吧,具体请参考官方文档http://docs.opens ...

  4. window 7 C盘整理

    发现两篇不错的文章可以参考一下: http://blog.renren.com/blog/200083873/467545630 http://www.uedbox.com/win7-c-disk-s ...

  5. Java学习----对象的构造

    public class Teacher { private String teacherName; private String gendar; // 构造方法:初始化属性值,没有返回类型 publ ...

  6. Java学习----运算符与表达式

    一.运算符 1.算术运算符 +   -   *   /  %  ++  -- public class Test7 { public static void main(String[] args) { ...

  7. yum 搭建lnmp环境详细步骤

    1.关闭防火墙[root@CentOS ~]# chkconfig iptables off 2.关闭selinuxvi /etc/sysconfig/selinux//将SELINUX=enforc ...

  8. js join()函数将数组转换成字符串

    join() 方法用于把数组中的所有元素放入一个字符串.作用是将数组转换为字符串,其作用和toString()相同. 元素是通过指定的分隔符进行分隔的. 例如: var asp=['H','ell', ...

  9. 浅谈MIPS地址对齐问题

    1.什么叫地址对齐? RISC 下使用访存指令读取或写入数据单元时,目标地址必须是所访问之数据单元字节数的整数倍,这个叫做地址对齐. 2.计算机主要的架构分哪两类?及其地址对齐在两者的区别? 计算机主 ...

  10. C语言基础学习基本数据类型-字符专属的输入输出函数

    可以使用%c说明符以及scanf()和printf()函数来输入输出字符.现在我们将学习专门为面向字符而设计的一对函数:getchar()和putchar().getchar()函数没有参数,它返回来 ...