前端（十六）

作者: 要你何用杀了算了 | 来源:发表于2018-08-30 19:47 被阅读0次

前端（十六）
web前端入门到实战：HTML颜色控制属性2&标签选择器
前端开源项目周报0412
前端基础（JS 语法）十六
免费开源」基于Vue和Quasar的前端SPA项目crudapi
前端学习笔记三十六-Vuex
笔记十六-前端基础之Vue
前端周刊第十六期
【CSS】特殊符号content编码及作为字体图标使用方法
前后端RSA+AES加解密

1.鼠标移入移出


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移入移出</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            margin: 100px auto 0;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*进入子元素也触发*/
            /*$('#div1').mouseover(function() {
                $(this).animate({marginTop: 50});//.stop()
            });
            $('#div1').mouseout(function() {
                $(this).animate({marginTop: 100});//.stop()
            });*/

            /*进入子元素不触发*/
            /*$('#div1').mouseenter(function() {
                $(this).stop().animate({marginTop: 50});//
            });
            $('#div1').mouseleave(function() {
                $(this).stop().animate({marginTop: 100});//
            });*/

            /*通过hover（mouseenter+mouseleave）实现简写*/
            $('#div1').hover(function() {
                $(this).stop().animate({marginTop: 50});
            }, function() {
                $(this).stop().animate({marginTop: 100});
            });
        })
    </script>
</head>
<body>
    <div id="div1" class="box">
        <div class="son"></div>
    </div>
</body>
</html>

2.input框事件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input框事件</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // //一开始就获取焦点，相当于设置了autofocus自动获取焦点了（HTML5 新增表单控件属性）
            // $('#txt01').focus();

            // //文本框获取焦点的时候（有光标闪烁的时候）
            // $('#txt01').focus(function() {
            //  alert('focus');
            // });

            // //失去焦点的时候（光标离开的时候）
            // $('#txt01').blur(function() {
            //  alert('blur');
            // });

            // //输入框内容发生变化的时候，失去焦点后触发，可用于注册时验证用户名是否已存在
            // $('#txt01').change(function() {
            //  alert('change');
            // });

            //松开键盘按键就触发
            $('#txt01').keyup(function() {
                alert('keyup');
            });
        })
    </script>
</head>
<body>
    <input type="text" id="txt01">
</body>
</html>

3.绑定事件bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件bind</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // //只能绑定click事件，不能绑定其他的了
            // $('#btn').click(function() {
            //  /* Act on the event */
            // });

            //bind方式可绑定多个事件
            $('#btn').bind('click mouseover', function() {
                alert('hello!');

                //取消绑定事件
                $(this).unbind('mouseover');
            });
        })
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn">
</body>
</html>

4.自定义事件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义事件</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //自定义事件只能用bind方式绑定，第一个参数是事件的名字，第二个参数是事件发生时执行的函数
            $('#btn1').bind('hello', function(){
                alert('hello');
            })
            $('#btn1').bind('click', function(){
                alert('click');
            })
            $('#btn2').click(function() {
                // trigger即可以触发自定义事件，也可以触发原始的事件
                $('#btn1').trigger('hello');
                $('#btn1').trigger('click');
            });
            
            //不一定点击按钮触发，也可页面加载时触发，也可在满足某种if条件时触发
            // $('#btn1').trigger('hello');
        })
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn1">
    <input type="button" value="按钮2" id="btn2">
</body>
</html>

5.事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style type="text/css">
        .grandfather{
            width: 300px;
            height: 300px;
            background-color: green;
            position: relative;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 400px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('body').click(function() {
                alert(4);
            });
            $('.grandfather').click(function() {
                alert(3);
            });
            $('.father').click(function() {
                alert(2);
            });
            $('.son').click(function(event) {//event代表当前事件
                alert(1);
                // console.log(event);//显示很多属性，其中clientX、clientY就是点击的坐标
                // alert("X轴坐标：" + event.clientX);

                // //阻止事件冒泡
                // event.stopPropagation();

                //合并阻止操作：把阻止冒泡和阻止默认行为合并
                return false;
            });

            //阻止右键菜单
            $(document).contextmenu(function(event){
                // //阻止默认行为（原来右键能弹出菜单，阻止后无法弹出）
                // event.preventDefault();

                //合并阻止
                return false;
            })
        })
    </script>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

6.定时器弹框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器弹框</title>
    <style type="text/css">
        .pop_con{
            display: none;/*默认不显示，用定时器显示*/
        }
        .pop{
            width: 400px;
            height: 300px;
            background-color: #fff;
            border: 1px solid #000;
            position: fixed;/*使用固定定位*/
            left: 50%;/*左上角位于页面中心*/
            top: 50%;
            margin-left: -200px;/*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/
            margin-top: -150px;
            z-index: 9999;/*弹窗在最前面*/
        }
        /*遮罩样式*/
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #000;
            left: 0;
            top: 0;
            /*设置透明度30%，兼容IE6、7、8*/
            opacity: 0.3;
            filter: alpha(opacity=30);
            z-index: 9990;/*遮罩在弹窗后面*/
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function() {
                $('#pop').show();
                return false;
            });
            $('#shutoff').click(function() {
                $('#pop').hide();
            });
            //点弹框以外的地方，也能让弹框消失
            $(document).click(function(){
                // setTimeout(function(){
                //  $('#pop').hide();
                // },2000);

                $('#pop').hide();
            });
            $('.pop').click(function() {
                return false;
            });
            
            //阻止默认行为（原来超链接可跳转到百度，阻止后无法跳转）
            $('#link1').click(function() {
                return false;
            });
        })
    </script>
</head>
<body>
    <h1>首页标题</h1>
    <p>页面内容</p>
    <a href="http://www.baidu.com" id="link1">百度网</a>
    <input type="button" name="" value="弹出" id="btn">

    <div class="pop_con" id="pop">
        <div class="pop">
            <h3>提示信息！</h3>
            <a href="#" id="shutoff">关闭</a>
            <input type="text" name="">
        </div>
        <!-- 遮罩层 -->
        <div class="mask"></div>
    </div>
</body>
</html>

7.节点操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点操作</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $span = $('<span>span元素</span>');
            var $p = $('<p>p段落元素</p>');
            var $h = $('<h1>页面标题</h1>');

            /*插入子元素*/
            //div中插入span和p（末尾追加）
            // $('#div1').append($span);
            // $('#div1').append($p);

            // 把span和p插入div中
            $span.appendTo('#div1');
            $p.appendTo('#div1');

            //把子元素插入到父元素（前面追加）
            // $('#div1').prepend($span);
            // $('#div1').prepend($p);
            // $span.prependTo('#div1');
            // $p.prependTo('#div1');

            //在div前边插入兄弟h1标题
            // $('#div1').before($h);
            $h.insertBefore('#div1');

            //在后边插入兄弟元素
            //after()
            //insertAfter()

            //删除p标签
            $p.remove();    
        })
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

前端（十六）
1.鼠标移入移出 2.input框事件 3.绑定事件bind 4.自定义事件 5.事件冒泡 6.定时器弹框 7.节点操作
web前端入门到实战：HTML颜色控制属性2&标签选择器
一、颜色控制属性（上接连载15）（4）十六进制在前端开发中通过十六进制来表示颜色，其实本质就是RGB，十六进制...
前端开源项目周报0412
由OpenDigg 出品的前端开源项目周报第十六期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质...
前端基础（JS 语法）十六
问答 1. CSS和JS在网页中的放置顺序是怎样的？ CSS一般放置在head标签里面，样式先行的话在加载HTML...
免费开源」基于Vue和Quasar的前端SPA项目crudapi
基于Vue和Quasar的前端SPA项目实战之拖拽表单定制（十六）回顾通过前一篇文章基于Vue和Quasar...
前端学习笔记三十六-Vuex
一、Vuex概述 Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。使用Vue...
笔记十六-前端基础之Vue
1. MVVM思想 2. Vue Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式...
前端周刊第十六期
前端周刊发表每周前端技术相关的大事件、文章教程、一些框架的版本更新、以及代码和工具。每周定期发表，欢迎大家关注、转...
【CSS】特殊符号content编码及作为字体图标使用方法
【CSS】特殊符号content编码及作为字体图标使用方法使用方法前端最常用符号图标形状十进制十六进制形状图...
前后端RSA+AES加解密
点击登录。前端调用后端rsa接口，先获取初始化的秘钥对，将公钥转为HexMap(value为16十六进制的map，...