前端jQuery炫酷效果

案例一:聊天窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .talk_con{
            width:600px;
            height:500px;
            border:1px solid #666;
            margin:50px auto 0;
            background:#f9f9f9;
        }
        .talk_show{
            width:580px;
            height:420px;
            border:1px solid #666;
            background:#fff;
            margin:10px auto 0;
            overflow:auto;
        }
        .talk_input{
            width:580px;
            margin:10px auto 0;
        }
        .whotalk{
            width:80px;
            height:30px;
            float:left;
            outline:none;
        }
        .talk_word{
            width:420px;
            height:26px;
            padding:0px;
            float:left;
            margin-left:10px;
            outline:none;
            text-indent:10px;
        }        
        .talk_sub{
            width:56px;
            height:30px;
            float:left;
            margin-left:10px;
        }
        .atalk{
           margin:10px; 
        }
        .atalk span{
            display:inline-block;
            background:#0181cc;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
        .btalk{
            margin:10px;
            text-align:right;
        }
        .btalk span{
            display:inline-block;
            background:#ef8201;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">      
    // 写出对应功能代码  
    $(function(){
        // 发送按钮单击:1. 获取用户输入的数据 -- value属性值访问 2、看下拉菜单的选项 如果是a -- 获取下拉菜单的vlaue == 0,把用户的数据按照a的模板展示;如果是b --获取下拉菜单的vlaue == 1,把数据按照b的模板展示 -- if
        $('#talksub').click(function(){
            var vals = $('#talkwords').val()

            // 如果是空报错提示
            if(vals =='')
            {
                alert('请输入内容')
                return
            }

            // alert(vals)

            // 获取下拉菜单的value
            var str = ''

            var whoVal = $('#who').prop('value')
            if(whoVal == 0)
            {
                // A
                str = '<div class="atalk"><span>A说:'+vals+'</span></div>'
            }
            else
            {
                str = '<div class="btalk"><span>B说:'+vals+'</span></div>'
            }
            // 放内容 -- 设置words 的内容是  原来的内容$('#words').html() + str
            $('#words').html( $('#words').html() + str )

            // 设置vlaue属性为空
            $('#talkwords').val('')


        })
    })
    </script>
</head>
<body>
    <div class="talk_con">
        <div class="talk_show" id="words">
            <div class="atalk"><span>A说:吃饭了吗?</span></div>
            <div class="btalk"><span>B说:还没呢,你呢?</span></div>
        </div>
        <div class="talk_input">
            <select class="whotalk" id="who">
                <option value="0">A说:</option>
                <option value="1">B说:</option>
            </select>
            <input type="text" class="talk_word" id="talkwords">
            <input type="button" value="发送" class="talk_sub" id="talksub">
        </div>
    </div>
</body>
</html>

案例二:to do list

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css">
        .list_con{
            width:600px;
            margin:50px auto 0;
        }
        .inputtxt{
            width:550px;
            height:30px;
            border:1px solid #ccc;
            padding:0px;
            text-indent:10px;           
        }
        .inputbtn{
            width:40px;
            height:32px;
            padding:0px;
            border:1px solid #ccc;
        }
        .list{
            margin:0;
            padding:0;
            list-style:none;
            margin-top:20px;
        }
        .list li{
            height:40px;
            line-height:40px;
            border-bottom:1px solid #ccc;
        }

        .list li span{
            float:left;
        }

        .list li a{
            float:right;
            text-decoration:none;
            margin:0 10px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
    $(function(){
        // 1、新增li节点 2、删除节点  3、上下箭头移动节点
        // 1:增加按钮单击:获取用户输入的数据,数据放到li节点里面,追加li节点到页面
        $('#btn1').click(function(){
            var vals = $('#txt1').val()
            if(vals == '')
            {
                alert('请输入内容')
                return
            }
            var $li = $('<li><span>'+vals+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
            $('#list').append( $li );
            $('#txt1').val('')
        })


        // $('a').click(function(){
        //  alert(1)
        // })
        // 父
        $('#list').delegate('a', 'click', function(){
            // alert(2)
            // 如果删除的a -- class == 'del',执行节点remove;如果向上的a,执行向上移动一个位置
            var classVal = $(this).prop('class')
            // alert(classVal)
            if(classVal == 'del')
            {
                // 删除这个a的父级
                $(this).parent().remove()
            }
            else if(classVal == 'up')
            {
                // 如果是第一个提示
                if($(this).parent().index() == 0)
                {
                    alert('已经是第一个了')
                    return
                }
                // 向上移动:例如:单击js的up, 选中js这个li, 移动到  cssli 的前面
                $(this).parent().insertBefore( $(this).parent().prev() )
                // $(this).parent() -- js li
                // $(this).parent().prev() -- js这个li的前一个li css
            }
            else if(classVal == 'down')
            {
                // 如果是最后一个提示  index == 长度(ul的子级)-1
                if($(this).parent().index() ==  $('#list').children().length - 1 )
                {
                    alert('已经是最后一个了')
                    return
                }
                // 向下移动:例如,单击html的down,选中html这个li, 移动到 css li的后面
                $(this).parent().insertAfter( $(this).parent().next() )
            }
        })

    })

    </script>   
</head>
<body>

    <div class="list_con">
    <h2>To do list</h2>
        <input type="text" name="" id="txt1" class="inputtxt">
        <input type="button" name="" value="增加" id="btn1" class="inputbtn">

        <ul id="list" class="list">

            <li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>

        </ul>

    </div>
</body>
</html>
</html>

案例三:网站注册页面

由于此处代码实现过于复杂,css和js功能实现代码量较多,公众号文章字数有所限制,所以此处将两个重要的功能实现即可,有了这两个例子,其他的都可以做出来了,至于网页的美化这些到是简单许多。

$(function(){
    var flag_user = false
    var flag_allow = true  // 默认是勾选状态
    // alert(1)
    // 验证发生在用户输入完成的时候 -- 失去焦点blur

    // 框架:用户名密码。。同意协议都要做验证,当所有验证通过写submit提交
    // 用户名:blur事件里面验证:获取用户输入的数据;列正则 ; if正则test用户输入的数据:合法true  不合法false -- 报错提示
    // $('#user_name').blur()
    // oBox.onclick = function(){}


    // 验证用户名
    var $user_name = $('#user_name')
    $user_name.blur(function(){
        fn_check_user()
    })

    function fn_check_user(){
        var vals = $user_name.val()
        var re = /^\w{6,20}$/;
        if(vals == '')
        {
            $user_name.next().show().html('用户名不能为空')
            flag_user = false
            return
        }

        if(re.test(vals))
        {
            // 合法 -- 隐藏错误信息
            $user_name.next().hide()
            // flag_user = false
            flag_user = true
        }
        else
        {
            // 不合法 -- 报错
            $user_name.next().show().html('用户名是6-20位数字、字母和下划线!')
            flag_user = false
        }
    }


    // 验证同意协议的复选框
    //  单击的时候改变勾选的状态 -- 验证click:if(勾选){合法}else{不合法}
    var $allow = $('#allow')
    // alert($allow.prop('checked') == 'checked')
    // alert($allow.prop('checked'))
    $allow.click(function(){
        fn_check_allow()
    })

    function fn_check_allow(){
        if($allow.prop('checked'))
        {
            // 合法
            $allow.next().next().hide()
            flag_allow = true
        }
        else
        {
            // 不合法 -- 报错
            $allow.next().next().show().html('请同意协议')
            flag_allow = false
        }
    }

    // 验证注册
    // 考虑的人:页面一刷新,没有执行失去焦点,正则没有生效 -- 不能注册不能提交
    // 方法: 页面定义开关,默认不能提交,让开关关闭表示不能提交;正则验证通过打开开关表示可以提交 -- submit事件里面加条件判断:if(开关打开){提交}else{不能提交}
    // 开关到底是什么? 就是全局变量  -- 几个全局变量?
    var $register = $('#register')
    $register.submit(function(){
        // return true
        if(flag_user && flag_allow)
        {

            alert('提交')
            return true
        }
        else
        {
            alert('不能提交')
            return false
        }
    })


})

案例四:弹窗

要求:单击弹窗外部,弹窗消失;点击x弹窗消失;点击弹窗内部,弹窗不消失。

此处为js文件,由于字数限制,此处只提供重要功能的代码。

        $(function(){
            $('#btn01').click(function(){
                $('#pop').show()
                return false
            })


            $('#shutoff').click(function(){
                $('#pop').hide()
            })


            $(document).click(function(){
                $('#pop').hide()
            })

            $('.pop_con').click(function(){
                // 不需要执行显示,也不能隐藏 -- 不能冒泡到document
                return false
            })
        })

本文分享自微信公众号 - 全栈技术精选(Pythonnote)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏国产程序员

Vue学习(五)todoList功能

其中,el是vue实例化的选项,提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement...

8830
来自专栏达达前端

(1)前端框架uni-app

uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势。

50350
来自专栏达达前端

(21)打鸡儿教你Vue.js

8630
来自专栏达达前端

(22)打鸡儿教你Vue.js

13340
来自专栏崔庆才的专栏

200 行代码实现一个滑动验证码

做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动、点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大致说明下这些验证码的...

27180
来自专栏达达前端

(20)打鸡儿教你Vue.js

36050
来自专栏达达前端

(17)打鸡儿教你Vue.js

router.start(App, '#app') 表示router会创建一个App实例

6530
来自专栏达达前端

(19)打鸡儿教你Vue.js

模板语法 计算属性 Class,Style绑定 条件渲染 列表渲染 事件处理 表单输入绑定

10430
来自专栏达达前端

(23)打鸡儿教你Vue.js

Webpack 目前无论在求职还是工作中,使用越来越普及。而想要学懂,学会Webpack更绝非易事。

9130
来自专栏达达前端

(18)打鸡儿教你Vue.js

Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。

11120

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励