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. asp.net中Request.ServerVariables的用法

    在asp.net中可以通过HttpRequest.ServerVariables 属性来获取“ Web 服务器变量的集合” HttpRequest.ServerVariables 的用法: HttpR ...

  2. （转）浅谈dedecms模板引擎工作原理及自定义标签

    理解织梦模板引擎有什么意义?一方面可以更好地自定义标签.更多在于了解织梦系统,理解模板引擎是理解织梦工作原理的第一步.理解织梦会使我们写php代码时更顺手,同时能学习一些php代码的组织方式. 这似乎 ...

  3. tableView代理方法的调用时间，（主要是heightForRowAtIndexPath和cellForRowAtIndexPath调用时间）

    最近做一个demo,涉及按照数据分类然后依照分类在 cellForRowAtIndexPath形成不同类型的cell,就是有判断(在viewdidload里面做)和形成(在 cellForRowAtI ...

  4. CSS 布局Float 【3】

    float 属性定义元素在哪个方向浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可 ...

  5. cer, pfx 创建，并且读取公钥/密钥，加解密 （C#程序实现）

    PKI技术(public key infrastructure)里面,cer文件和pfx文件是很常见的.通常cer文件里面保存着公钥以及用户的一些信息,pfx里面则含有私钥和公钥. 用makecert ...

  6. 你好，C++（10）这次的C++考试你过了没有？C++中表示逻辑判断的布尔数据类型

    3.4  布尔类型 在日常生活中,我们除了需要使用int类型的变量表示216路公交车:需要使用float类型的变量表示西红柿3.5元一斤,有时候还需要表示一种数据,那就是逻辑状态: “这次的C++考试 ...

  7. C语言的printf输出格式控制

    C语言的printf输出格式控制 printf大家都耳熟能详,但是能真正将其用法弄透的估计很少见. 转一篇,改天整理. 1．转换说明符 %a(%A)     浮点数.十六进制数字和p-(P-)记数法( ...

  8. Redis学习 - 入门

    业精于勤,荒于嬉:行成于思,毁于随 -- 韩愈·<进学解>   因为工作中需要用到Redis,所以最近抽点时间看了一下,现在将学习的内容整理一下.   一.简介 1.Redis是什么? R ...

  9. js学习笔记之：时间（二）

    今天来了解一下js中定时器的两种用法.js中包括2种定时器,分别是:           间隔型定时器:setInterval(开)    clearInterval (关)            延 ...

  10. hibernate的get、load的方法的区别，IllegalArgument异常

    关于hibernate中的load,get,以及延迟加载问题 今天在使用hibernate时,发现一异常: could not initialize proxy - no Session 查询资料之后 ...