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. Log4net 配置注意事项

    1. 首先引入Log4net程序集 2.修改webconfig配置文件 在 configuration 节点下面添加如下节点 <configSections> <section na ...

  2. Linux 网络配置(固定IP)

    通常linux作为服务器系统时,是不推荐安装图形界面的,因此我们需要掌握非图形界面下如何配置网络,主要两种方式,如下: 一.使用SETUP工具(redhat系列才可以,推荐此修改方式) 1.在命令行直 ...

  3. Ubuntu下管理员界面的切换

    不同于redhat的Linux系统可以通过命令su root 简单地切换到管理员状态,ubuntn 默认是没有超级用户的,因此如需使用管理员权限可以使用以下2种方法: 1.sudo -i 此命令不需要 ...

  4. Delphi ComboBox的属性和事件、及几个鼠标事件的触发

    临时做了两个小的测试程序,为了彻底弄清楚combobox的OnClick.OnChange.OnDropDown.OnCloseUp.OnSelect事件的触发及其先后顺序. 另附常用鼠标事件的触发情 ...

  5. POJ 2010 Moo University - Financial Aid( 优先队列+二分查找)

    POJ 2010 Moo University - Financial Aid 题目大意,从C头申请读书的牛中选出N头,这N头牛的需要的额外学费之和不能超过F,并且要使得这N头牛的中位数最大.若不存在 ...

  6. MySQL 缓存 Query Cache

    QueryCache(下面简称QC)是根据SQL语句来cache的.一个SQL查询如果以select开头,那么MySQL服务器将尝试对其使 用QC.每个Cache都是以SQL文本作为key来存的.在应 ...

  7. jquery mobile展开项collapsible

    代码演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

  8. js删除选中的复选框中的父辈。

    function scsx(){ var cb=document.getElementsByName('checkbox') if(confirm('删除?')){ for (var i=0;i< ...

  9. 去掉所有的html标签

    去掉所有的HTML标签:$text=preg_replace('/<[^>]+>/','',$text); 去掉<img>标签:$text=preg_replace('/ ...

  10. PHP自定义错误处理

    自定义错误报告的处理方式,可以完全绕过标准的PHP错误处理函数,这样就可以按照自己定义的格式打印错误报告,或改变错误报告打印的位置(标准PHP的错误报告是哪里发生错误就在发生位置处显示).以下几种情况 ...