几个简单常用的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.平滑滚动到 ...

随机推荐

WCF- 契约Contract(ServiceContract、OperationContract、DataContract、ServiceKnownType和DataMember)（转）
示例 1.服务 IPersonManager.cs using System; using System.Collections.Generic; using System.Linq; using S ...
mysqldump-1045
mysqldump: [Warning] Using a password on the command line interface can be insecure.mysqldump: Got e ...
如何对oracle数据库进行监控检查
sqlplus '/as sysdba' 手动生成一个oracle数据库的快照 execute dbbms_workload_repository.create_snapshot(); 执行自动工作负 ...
mysql再探
select子句及其顺序 select from where group by having order by limit 创建表 create table student(id int not nu ...
hive array、map、struct使用
hive提供了复合数据类型:Structs: structs内部的数据可以通过DOT(.)来存取,例如,表中一列c的类型为STRUCT{a INT; b INT},我们可以通过c.a来访问域aMaps ...
goreplay 镜像nginx web app流量
goreplay 是一个很不错的流量拷贝,复制工具,小巧,支持一些扩展,当然也提供了企业版,企业版功能更强大,支持二进制协议的分析备注: 演示使用docker-compose 运行,测试镜像流量到 ...
java BIO/NIO
一.BIO Blocking IO(即阻塞IO); 1. 特点: a) Socket服务端在监听过程中每次accept到一个客户端的Socket连接,就要处理这个请求,而此时其他连接过来 ...
[转]JDK动态代理
代理模式代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类之间 ...
web 前端安全问题
转载自:https://segmentfault.com/a/1190000006672214?utm_source=weekly&utm_medium=email&utm_campa ...
react-router v4.0 知识点
react-router 提供了一个withRouter组件 withRouter可以包装任何自定义组件,将react-router 的 history,location,match 三个对象传入. ...

几个简单常用的jQuery实例

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

随机推荐

热门专题