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. 【开源java游戏框架libgdx专题】-12-开发工具-图片合成

    TexturePackerGui工具: 1.工具使用: 首先看到texturepacker的界面 界面介绍: New pack:创建项目按钮,单击后输入文件名称,创建文件. Input directo ...

  2. SQL 插入查询的最大ID 号 进行批量

    INSERT INTO tbl_image_language ( code, docomo_cd, au_cd, softbank_cd ) SELECT DISTINCT((SELECT max(c ...

  3. birt报表中使用多个数据集。

    这个问题困扰了几天,也没搜到答案,由于工作需要,创建了两个数据集和两个表格,第一个数据集和表格之间没有任何问题.但是第二个数据集拖过去就显示不可用,除非拖到表格外面,当然也就没用了.一朋友说拖一个网格 ...

  4. UIToolbar+UIWebView 浏览器

    创建界面 var webView : UIWebView! var toolBar : UIToolbar! let swiftWH = UIScreen.mainScreen().bounds.si ...

  5. entity framework 动态条件

    entity framework 动态条件 问题:在实际编码过程中,根据不同的选择情况,会需要按照不同的条件查询数据集 如:状态confirmStatus ,如果为空的时候,查询全部,如果有具体值的时 ...

  6. 使用Ajax.ActionLink时，点击对应的按钮会重新加载一个页面，而不是在当前页面的指定模块加载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js中typeof的用法

    一. 经常会在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组. if(document.mylist.length != "undefine ...

  8. IDA6.6调试安卓程序配置教程

    1.把ida 目录下android_server传到设备的 /data/local/tmp/ cmd执行adb shell 进入模拟器命令行 su cd /data/local/tmp/ chmod ...

  9. HDU 1005（周期问题）

    HDU 1005 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Descript ...

  10. Solr In Action 笔记(2) 之 评分机制(相似性计算)

    Solr In Action 笔记(2) 之评分机制(相似性计算) 1 简述 我们对搜索引擎进行查询时候,很少会有人进行翻页操作.这就要求我们对索引的内容提取具有高度的匹配性,这就搜索引擎文档的相似性 ...