美文网首页
前端笔记15

前端笔记15

作者: 明日计划 | 来源:发表于2018-06-26 07:57 被阅读0次

    jQuery特殊效果

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery特殊效果</title>
<style type="text/css">
    .box{
        width: 200px;
        height: 200px;
        background-color: gold;
        display: none;
    }
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#btn').click(function(){
            // $('.box').fadeOut();//淡出
            // $('.box').fadeIn();//淡入
            // $('.box').fadeToggle();//切换淡入淡出
            // $('.box').toggle();//切换显示隐藏
            $('.box').slideToggle();//切换上收和下展
        })
    })
</script>
</head>
<body>
<input type="button" name="" value="效果" id="btn">
<div class="box"></div>
</body>
</html>

    jQuery动画

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery动画</title>
<style type="text/css">
    .box{
        width: 100px;
        height: 100px;
        background-color: gold;
    }
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(function(){
        /*
        参数：
        1、什么属性做动画，属性设置{param1: value1, param2: value2}
        2、动画执行的时间，单位毫秒
        3、动画曲线：
            swing（默认值）开始和结束慢，中间快
            linear匀速
            可省略不写
        4、回调函数，动画完成之后要做的事情，可无限嵌套
        */
        $('#div1').animate({
            width: 200,
            height: 200},
            1000,
            function(){
                // alert('动画完了！');
                $(this).animate(
                    {marginLeft: 500},
                    1000,
                    function(){
                        $(this).animate(
                            {marginTop: 500},
                            1000
                        )
                    }
                )
            }
        );
    })
</script>
</head>
<body>
<div id="div1" class="box"></div>
</body>
</html>

    jQuery循环

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery循环</title>
<style type="text/css">
    
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(function(){
        // //给全部的li设置内容和样式
        // $('.list li').html('111');
        // $('.list li').css({background:'gold'});
        //第一个参数index是索引值
        $('.list li').each(function(index) {
            // alert(index);//弹出索引值
            
            //$(this)是每一个li
            $(this).html(index);
        });
    })
</script>
</head>
<body>
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

    元素的绝对位置

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素绝对位置</title>
<style type="text/css">
    .con{
        width: 600px;
        height: 600px;
        margin: 50px auto 0;
    }
    .box{
        width: 100px;
        height: 100px;
        background-color: gold;
        margin-bottom: 10px;
    }
    .pos{
        margin-left: 500px;
    }
    .pop{
        width: 100px;
        height: 100px;
        background-color: red;
        position: fixed;
        left:0;
        top: 0;
        display: none;
    }
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(function(){
        var $pos = $('.pos');
        //offset()是获取相对于页面左上角的绝对位置，即使外面再包一层con居中层，也不影响效果
        var pos = $pos.offset();
        // console.log(pos);
        // alert(pos.left + "," + pos.top);
        var w = $pos.outerWidth();
        var h = $pos.outerHeight();
        // alert(w);
        $('.pop').css({left:pos.left + w,top:pos.top});
        $pos.mouseover(function() {
            $('.pop').show();
        });
        $pos.mouseout(function() {
            $('.pop').hide();
        });
    })
</script>
</head>
<body>
<div class="con">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box pos"></div>
    <div class="box"></div>
</div>

<div class="pop">提示信息！</div>
</body>
</html>

    鼠标的移入和移出

    代码：
<!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>

    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>

    jQuery其他事件

    代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery其他事件</title>
<style type="text/css">
    
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    // //JS原生写法
    // window.onload = function(){
    // }
    // //jQuery写法，等同于上面写法
    // $(window).load(function(){
    // })
    // //ready的写法
    // $(document).ready(function(){
    // })
    // //ready的简写
    // $(function(){
    // })
    // 窗口改变尺寸的时候，会高频触发
    $(window).resize(function() {
        console.log('3');
    });
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

    绑定事件

    代码：
<!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>

    自定义事件

    代码：
<!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');
        });
    })
</script>
</head>
<body>
<input type="button" value="按钮" id="btn1">
<input type="button" value="按钮2" id="btn2">
</body>
</html>

    事件冒泡

    代码：
<!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>

    相关文章

      网友评论

          本文标题：前端笔记15

          本文链接：https://www.haomeiwen.com/subject/aoduyftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|前端笔记15|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！