几个简单常用的jQuery实例

　　一、点赞效果：

　　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实例的更多相关文章

PHP+jQuery开发简单的翻牌抽奖实例
PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: <ul ...
值得 Web 开发人员学习的20个 jQuery 实例教程
这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
十五个常用的jquery代码段【转】
好的文章顶一个回到顶部按钮通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.t ...
十五个常用的jquery代码段
十五个常用的jquery代码段回到顶部按钮通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top ...
经验分享：10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
jquery】常用的jquery获取表单对象的属性与值
[jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...
分享10款常用的jQuery焦点图插件
爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件之前我们已经分享过很多非常实用的jQuery焦点图 ...
Linux下简单的socket通信实例
Linux下简单的socket通信实例 If you spend too much time thinking about a thing, you’ll never get it done. —Br ...
10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库. 今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 1.平滑滚动到 ...

随机推荐

draw graph
http://www.icl.pku.edu.cn/member/yujs/bsdfiles/html/mpost.htmlUNIX下绘图面面观 http://www.tug.org/metapost ...
【mybatis源码学习】mybtias基础组件-占位符解析器
一.占位符解析器源码 1.占位符解析器实现的目标通过解析字符串中指定前后缀中的字符,并完成相应的功能. 在mybtias中的应用,主要是为了解析Mapper的xml中的sql语句#{}中的内容,识别 ...
POJ1417 True Liars
题意 Language:Default True Liars Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 6392 Accep ...
Collection接口中方法的使用
Collection:集合的接口 1.Collection和ArrayList和List的关系 ArrayList implement(实现) List List ...
Understanding how uid and gid work in Docker containers
转自:https://medium.com/@mccode/understanding-how-uid-and-gid-work-in-docker-containers-c37a01d01cf Un ...
The Guardian’s Migration from MongoDB to PostgreSQL on Amazon RDS
转载一片mongodb 迁移pg 数据库的文章原文:https://www.infoq.com/news/2019/01/guardian-mongodb-postgresql The Guardi ...
Android学习--------实现增删改查数据库操作以及实现相似微信好友对话管理操作
版权声明:本文为博主原创文章,转载请注明原文地址.谢谢~ https://blog.csdn.net/u011250851/article/details/26169409 近期的一个实验用到东西挺多 ...
Redis&MongoDB&Zookeeper&Kafka
目录 Redis MongoDB Zookeeper Kafka Redis 概念 Redis是NoSQL中比较常典型的一个非关系型数据库,在日常工作中也是最为常见的.Redis是一个由C语言编写的开 ...
e生保plus
e生保plus https://m.health.pingan.com/share/products/esb_plus.html?re_from=qdlmMSDbxtj&order_from= ...
redis设计与实现-数据结构
1,redis存储有5种数据对象,有7种数据结构底层实现 2,sds简单字符串不直接使用字符数组或是string 封装了长度变量,加快获得字符串长度杜绝缓冲区溢出(拼接字符串的时候不会因为内存里连 ...

几个简单常用的jQuery实例

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

随机推荐

热门专题