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. 各种开发语言示例调用HTTP接口(示例中默认HTTP接口编码为gb2312)

    asp示例: function getHTTPPage(strurl,data)   on error resume next   set http = Server.CreateObject(&qu ...

  2. htm5 user-scalable 的意思

    <meta name="viewport" content="width=device-width,user-scalable=yes,minimum-scale= ...

  3. Message,MessageQueue,Looper,Handler ——由view.post(runnable想到的)

    近日看到代码有view.post(runable),发现对handler机制又有些模糊,故做些复习. 这里就不再对具体的源码原理做深入复习了,就抄一些基本的结论吧. 1.基本概念 Message:基本 ...

  4. c - 向一个排序好的数组插入一个数,插入后数组依然是排序好的

    概述 因为这里只是演示插入1个数,这里我不用malloc再重新分配,而是将原先数组的腾出一个占位符. 完整代码如下: #include <stdio.h> #define LEN 6 // ...

  5. [转] 详细整理：UITableView优化技巧

      原文:http://www.cocoachina.com/ios/20150602/11968.html   最近在微博上看到一个很好的开源项目VVeboTableViewDemo,是关于如何优化 ...

  6. java_annotation_01

    一,Annotation简介 J2SE5.0提供了很多新的我,其中一个很重要的我就是对元数据的支持,在J2SE5.0中,这种元数据被称为注释,通过使用注释,程序开发人员可以在不改变原有逻辑的情况下,在 ...

  7. 【USACO 1.5.3】特殊的质数肋骨

    [题目描述]农民约翰的母牛总是生产出最好的肋骨.你能通过农民约翰和美国农业部标记在每根肋骨上的数字认出它们. 农民约翰确定他卖给买方的是真正的质数肋骨,是因为从右边开始切下肋骨,每次还剩下的肋骨上的数 ...

  8. HDU 4632 CF 245H 区间DP（回文）

    先说HDU 4632这道题,因为比较简单,题意就是给你一个字符串,然后给你一个区间,叫你输出区间内所有的回文子序列,注意是回文子序列,不是回文字串. 用dp[i][j]表示区间[i,j]内的回文子序列 ...

  9. Tomcat部署多个项目及相关配置

    1.配置多个项目 在tomcat的conf目录下,找到server.xml,在其中添加<Host>节点即可进行多个项目的部署 <Host name="localhost&q ...

  10. Oracle Pl/SQL编程基础

    Pl/SQL简介 提高应用程序的运行性能, 提供模块化的程序设计, 自定义标示符, 具有过程语言控制结构, 良好的兼容性, 处理运行错误. Pl/SQL语言基础 sql是关系数据库的基本操作语言. s ...