前端筆記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動(dòng)畫

代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery動(dòng)畫</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(){
        /*
        參數(shù)：
        1、什么屬性做動(dòng)畫，屬性設(shè)置{param1: value1, param2: value2}
        2、動(dòng)畫執(zhí)行的時(shí)間，單位毫秒
        3、動(dòng)畫曲線：
            swing（默認(rèn)值）開始和結(jié)束慢，中間快
            linear勻速
            可省略不寫
        4、回調(diào)函數(shù)，動(dòng)畫完成之后要做的事情，可無限嵌套
        */
        $('#div1').animate({
            width: 200,
            height: 200},
            1000,
            function(){
                // alert('動(dòng)畫完了！');
                $(this).animate(
                    {marginLeft: 500},
                    1000,
                    function(){
                        $(this).animate(
                            {marginTop: 500},
                            1000
                        )
                    }
                )
            }
        );
    })
</script>
</head>
<body>
<div id="div1" class="box"></div>
</body>
</html>

jQuery循環(huán)

代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery循環(huán)</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設(shè)置內(nèi)容和樣式
        // $('.list li').html('111');
        // $('.list li').css({background:'gold'});
        //第一個(gè)參數(shù)index是索引值
        $('.list li').each(function(index) {
            // alert(index);//彈出索引值
            
            //$(this)是每一個(gè)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>

鼠標(biāo)的移入和移出

代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠標(biāo)移入移出</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(){
        /*進(jìn)入子元素也觸發(fā)*/
        /*$('#div1').mouseover(function() {
            $(this).animate({marginTop: 50});//.stop()
        });
        $('#div1').mouseout(function() {
            $(this).animate({marginTop: 100});//.stop()
        });*/
        /*進(jìn)入子元素不觸發(fā)*/
        /*$('#div1').mouseenter(function() {
            $(this).stop().animate({marginTop: 50});//
        });
        $('#div1').mouseleave(function() {
            $(this).stop().animate({marginTop: 100});//
        });*/
        /*通過hover（mouseenter+mouseleave）實(shí)現(xiàn)簡寫*/
        $('#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(){
        // //一開始就獲取焦點(diǎn)，相當(dāng)于設(shè)置了autofocus自動(dòng)獲取焦點(diǎn)了（HTML5 新增表單控件）
        // $('#txt01').focus();
        // //文本框獲取焦點(diǎn)的時(shí)候（有光標(biāo)閃爍的時(shí)候）
        // $('#txt01').focus(function() {
        //  alert('focus');
        // });
        // //失去焦點(diǎn)的時(shí)候（光標(biāo)離開的時(shí)候）
        // $('#txt01').blur(function() {
        //  alert('blur');
        // });
        // //輸入框內(nèi)容發(fā)生變化的時(shí)候，失去觸點(diǎn)后觸發(fā)，可用于注冊時(shí)驗(yàn)證用戶名是否已存在
        // $('#txt01').change(function() {
        //  alert('change');
        // });
        //松開按鈕就觸發(fā)
        $('#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(){
    // })
    // 窗口改變尺寸的時(shí)候，會(huì)高頻觸發(fā)
    $(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方式可綁定多個(gè)事件
        $('#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方式綁定，第一個(gè)參數(shù)是事件的名字，第二個(gè)參數(shù)是事件發(fā)生時(shí)執(zhí)行的函數(shù)
        $('#btn1').bind('hello', function(){
            alert('hello');
        })
        $('#btn1').bind('click', function(){
            alert('click');
        })
        $('#btn2').click(function() {
            // trigger即可以觸發(fā)自定義事件，也可以觸發(fā)原始的事件
            $('#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代表當(dāng)前事件
            alert(1);
            // console.log(event);//顯示很多屬性，其中clientX、clientY就是點(diǎn)擊的坐標(biāo)
            // alert("X軸坐標(biāo)：" + event.clientX);
            // //阻止事件冒泡
            // event.stopPropagation();
            //合并阻止操作：把阻止冒泡和阻止默認(rèn)行為合并
            return false;
        });
        //阻止右鍵菜單
        $(document).contextmenu(function(event){
            // //阻止默認(rèn)行為
            // event.preventDefault();
            //合并阻止
            return false;
        })
    })
</script>
</head>
<body>
<div class="grandfather">
    <div class="father">
        <div class="son"></div>
    </div>
</div>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • (續(xù)jQuery基礎(chǔ)(1)) 第5章 DOM節(jié)點(diǎn)的復(fù)制與替換 （1）DOM拷貝clone() 克隆節(jié)點(diǎn)是DOM的常...
    凜0_0閱讀 1,513評論 0贊 8
  • 總結(jié)： 鼠標(biāo)事件 1.click與dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r閱讀 1,721評論 2贊 10
  • 第1章 鼠標(biāo)事件 1-1 jQuery鼠標(biāo)事件之click與dbclick事件 用交互操作中，最簡單直接的操作就是...
    mo默22閱讀 1,346評論 0贊 6
  • ??JavaScript 與 HTML 之間的交互是通過事件實(shí)現(xiàn)的。 ??事件，就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,700評論 1贊 11
  • 一：認(rèn)識(shí)jquery jquery是javascript的類庫，具有輕量級，完善的文檔，豐富的插件支持，完善的Aj...
    xuguibin閱讀 1,766評論 1贊 7

友情鏈接更多精彩內(nèi)容