前端笔记15

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>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,634评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,951评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,427评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,770评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,835评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,799评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,768评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,544评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,979评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,121评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,756评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2赞 352

推荐阅读更多精彩内容

  • jQuery基础(2)
    (续jQuery基础(1)) 第5章 DOM节点的复制与替换 （1）DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,334评论 0赞 8
  • jQuery事件篇
    总结： 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,603评论 2赞 10
  • jQuery基础——事件篇
    第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中，最简单直接的操作就是...
    mo默22阅读 1,274评论 0赞 6
  • 十二、事件
      JavaScript 与 HTML 之间的交互是通过事件实现的。   事件，就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,486评论 1赞 11
  • Jquery知识点总结
    一：认识jquery jquery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Aj...
    xuguibin阅读 1,708评论 1赞 7