一、点赞效果：

　　1.1 效果：

　　1.2 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            cursor: pointer;
        }

        .item{
            border: 1px red solid;
            height:555px;
            width:555px;
            position: fixed;
            left:33%;
            top:10%;
        }

        .content{
            width:36px;
            //background-color: yellowgreen;
            /*position必须是relative*/
            position: relative;
            top:123px;
            left:123px;
        }

    </style>
</head>
<body>
    <div class="item">
        <div class="content">
            <span>赞</span>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.content').click(function () {
            var span = document.createElement('span');
            var top = 0;
            var fontSize = 15;
            var right = 0;
            var opacity = 1;

            $(span).text('+1');
            $(span).css('color','green');
            $(span).css('position','absolute');
            $(span).css('top',top + 'px');
            $(span).css('right',right + 'px');
            $(span).css('fontSize',fontSize + 'px');
            $(span).css('opacity',opacity);

            var f = setInterval(function () {
                top -= 5;
                fontSize += 5;
                right -= 5;
                opacity -= 0.1;

                $(span).css('top',top + 'px');
                $(span).css('right',right + 'px');
                $(span).css('fontSize',fontSize + 'px');
                $(span).css('opacity',opacity);

                if(opacity < 0){
                    //清除定时器
                    clearInterval(f);
                    //清除新建的span标签
                    $(span).remove();
                }

            },50);

            $(this).append(span);

        })

    </script>

</body>
</html>

　　二、选项卡功能

　　2.1 效果：

　　2.2 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            margin:0 auto;
            border: 1px red solid;
            height:555px;
            width:555px;
            position: fixed;
            left:30%;
        }

        .item{
            height:50px;
        }

        .item .item-c{
            float: left;
            width:30%;
            border:1px greenyellow solid;
            height:45px;
            text-align: center;
            line-height:45px;
            cursor: pointer;
        }

        .content .cc{
            height:300px;
            text-align: center;
            line-height:300px;
            border: 1px blue solid;
        }

        .hide{
            display:none;
        }

        .active{
            background-color: #2b84da;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="item">
            <div class="item-c active">标题1</div>
            <div class="item-c">标题2</div>
            <div class="item-c">标题3</div>
        </div>
        <div class="content">
        <div class="cc">内容1</div>
        <div class="cc hide">内容2</div>
        <div class="cc hide">内容3</div>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.item-c').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            //索引方式实现 index获取索引！
            var v = $(this).index();
            $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide');
        })

    </script>

</body>
</html>

　　三、拖动框体

　　3.1 效果：

　　3.2 代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 400px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;"></div>
        <div style="height: 100px;"></div>
    </div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
    $(function(){
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        });
        $("#title").mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $('#title').on('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        });
        $("#title").mouseup(function(){
            $("#title").off('mousemove');
        });
    })
</script>
</body>
</html>

　　四、登陆验证(规定用户名及密码必须只能是字母跟数字的组合)

　　4.1 效果如下：

　　4.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>

    <form id="f1" action="jq1.html" method="POST">
        <div><input name="n1" tex = "用户名" type="text" /></div>
        <div><input name="n2" tex = "密码" type="password" /></div>
        <!--<div><input name="n3" tex = "邮箱" type="text" /></div>-->
        <!--<div><input name="n4" tex = "端口" type="text" /></div>-->
        <!--<div><input name="n5" tex = "IP" type="text" /></div>-->

        <input type="submit" value="提交" />
        <img src="...">
    </form>

    <script src="jquery-1.12.4.js"></script>
    <script>
        // 当页面“框架”加载完毕后，自动执行
        $(function(){
             //找到所有input的type=submit的input标签
            // 当页面“元素”加载完毕后，才执行
            $(':submit').click(function () {
                $('.error').remove();
                //注意这里flag的位置
                var flag = true;
                //##遍历每一个input输入框
                $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                    var v = $(this).val();
                    var n = $(this).attr('tex');
                    //规定只能是字母跟数字的组合
                    var reg = /^\w+$/;
                    if(v.length <= 0 || !(reg.test(v))){
                        flag = false;
                        //在相应的input后面添加一个span标签用于提示
                        var tag = document.createElement('span');
                        tag.className = "error";
                        tag.innerHTML = n + "为空或者格式错误";
                        $(this).after(tag);
                    }
                });
                //如果把return false放到循环里，只让当前的循环终止，要让整个click终止得在外面加return false
                return flag;
        });

    });

    </script>
</body>
</html>

几个简单常用的jQuery实例的更多相关文章

  1. PHP+jQuery开发简单的翻牌抽奖实例

    PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: <ul ...

  2. 值得 Web 开发人员学习的20个 jQuery 实例教程

    这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...

  3. 十五个常用的jquery代码段【转】

    好的文章顶一个 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.t ...

  4. 十五个常用的jquery代码段

    十五个常用的jquery代码段 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top ...

  5. 经验分享：10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  6. jquery】常用的jquery获取表单对象的属性与值

    [jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...

  7. 分享10款常用的jQuery焦点图插件

    爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...

  8. Linux下简单的socket通信实例

    Linux下简单的socket通信实例 If you spend too much time thinking about a thing, you’ll never get it done. —Br ...

  9. 10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...

随机推荐

  1. 调试 shell script 方法

    wade@V1088:~$ cat b.sh#!/bin/bash dir=`pwd` dir=$dir'/' for f in `ls *.png` do echo $dir$f done 看每一行 ...

  2. MySQL--字符集基础

    ========================================================================= 字符集和编码规则 字符集:特定类型或用途的字符集合, ...

  3. nginx unit nodejs 模块试用(续)

      最新(应该是18 年了)nginx unit 发布了新的版本,对于nodejs 的支持有很大的改进,上次测试过,问题还是 比较多,这次使用新版本在测试下对于nodejs 的支持,以及以前block ...

  4. Java Runnable与Callable区别

    接口定义 #Callable接口 public interface Callable<V> { V call() throws Exception; } #Runnable接口 publi ...

  5. 通过LoadGenerator将Linux作为负载机进行压力测试

    前提说明: 测试架构:controller部署在windows操作系统下(windows下安装loadrunner的过程,可以去网上搜下,这里不做解释),loadgenerator部署在linux下. ...

  6. Spring5 新特性

    Spring Framework 5.0是在Spring Framework 4.0之后将近四年内一次重大的升级. 最大特点之一是响应式编程(Reactive Programming). 响应式编程核 ...

  7. parcel (另一个打包工具)知识点

    ParcelJS 本身是 0 配置的,但 HTML.JS 和 CSS 分别是通过 posthtml.babel 和 postcss 处理的,所以我们得分别配 .posthtmlrc..babelrc ...

  8. 手动制作openstack windows镜像

    https://docs.openstack.org/image-guide/windows-image.html 这里以 windows 2008为例: 准备工作: 1准备好windows 2008 ...

  9. 1、Zookeeper安装及问题与集群

    1.下载zookeeper.tat.gz压缩包 2.解压 tar –xvf file.tar //解压 tar包 tar -xzvf file.tar.gz //解压tar.gz tar -xjvf ...

  10. jmeter分布式测试的坑

    转 : jmeter分布式测试的坑 有关jmeter分布式测试的环境配置,大概就是那样,但是每次想要进行jmeter分布式测试的时候,总是会有各种奇怪的问题,下面整理了一些可能遇到的坑. 只要错误中出 ...