日韩一二三区免费,欧美亚洲国产人妻

事件委托

事件委托：方法delegate，只綁定一次事件，冒泡觸發(fā)
參數(shù)：
selector選擇器：寫(xiě)入ul下面的所有要發(fā)生事件的元素，多個(gè)元素用空格隔開(kāi)，例如‘li a span’
eventType事件
function要執(zhí)行的操作

jQuery特殊效果

fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 依次展示或隱藏某個(gè)元素
slideDown() 向下展開(kāi)
slideUp() 向上卷起
slideToggle() 依次展開(kāi)或卷起某個(gè)元素

jQuery鏈?zhǔn)秸{(diào)用

$('#div1') // id為div1的元素
.children('ul') //該元素下面的ul子元素
.slideDown('fast') //高度從零變到實(shí)際高度來(lái)顯示ul元素
.parent() //跳到ul的父元素，也就是id為div1的元素
.siblings() //跳到div1元素平級(jí)的所有兄弟元素
.children('ul') //這些兄弟元素中的ul子元素
.slideUp('fast'); //高度實(shí)際高度變換到零來(lái)隱藏ul元素

jQuery動(dòng)畫(huà)

$(".box").animate({
    width:'500px',
    height:'500px'
},1000,'swing')//第二個(gè)參數(shù)是運(yùn)行時(shí)間，第三個(gè)是樣式，默認(rèn)是swing,兩邊慢，linear(勻速)

滾動(dòng)事件

$(window).scroll(function(){  
$(document).scrollTop();  
$(document).scrollLeft();
})

jQuery事件

blur() 元素失去焦點(diǎn)
focus() 元素獲得焦點(diǎn)
change() 表單元素的值發(fā)生變化
click() 鼠標(biāo)單擊
dblclick() 鼠標(biāo)雙擊
mouseover() 鼠標(biāo)進(jìn)入（進(jìn)入子元素也觸發(fā)）
mouseout() 鼠標(biāo)離開(kāi)（離開(kāi)子元素也觸發(fā)）
mouseenter() 鼠標(biāo)進(jìn)入（進(jìn)入子元素不觸發(fā)）
mouseleave() 鼠標(biāo)離開(kāi)（離開(kāi)子元素不觸發(fā)）
hover() 同時(shí)為mouseenter和mouseleave事件指定處理函數(shù)
mouseup() 松開(kāi)鼠標(biāo)
mousedown() 按下鼠標(biāo)
mousemove() 鼠標(biāo)在元素內(nèi)部移動(dòng)
keydown() 按下鍵盤(pán)
keypress() 按下鍵盤(pán)
keyup() 松開(kāi)鍵盤(pán)
load() 元素加載完畢
ready() DOM加載完成
resize() 瀏覽器窗口的大小發(fā)生改變
scroll() 滾動(dòng)條的位置發(fā)生變化
select() 用戶(hù)選中文本框中的內(nèi)容
submit() 用戶(hù)遞交表單
toggle() 根據(jù)鼠標(biāo)點(diǎn)擊的次數(shù)，依次運(yùn)行多個(gè)函數(shù)
unload() 用戶(hù)離開(kāi)頁(yè)面

節(jié)點(diǎn)操作

創(chuàng)建節(jié)點(diǎn)

var $div =$ ('<div>');
var $div2 =$ ('<div>這是一個(gè)div元素</div>');

插入節(jié)點(diǎn)

append()和appendTo()：在現(xiàn)存元素的內(nèi)部，從后面插入元素
prepend()和prependTo()：在現(xiàn)存元素的內(nèi)部，從前面插入元素
after()和insertAfter()：在現(xiàn)存元素的外部，從后面插入元素
before()和insertBefore()：在現(xiàn)存元素的外部，從前面插入元素

刪除節(jié)點(diǎn)

$('#div1').remove();

計(jì)劃列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.js"></script>
    <style type="text/css">
        .list_con {
            width: 400px;
            margin: 50px auto 0;
        }

        .inputtxt {
            width: 350px;
            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: 30px;
            line-height: 30px;
            border-bottom: 1px solid #ccc;
        }

        .list li span {
            float: left;
        }

        .list li a {
            float: right;
            text-decoration: none;
            margin: 0 10px;
        }
    </style>
</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>學(xué)習(xí)html</span>
            <a href="javascript:;" class="up"> ↑ </a>
            <a href="javascript:;" class="down"> ↓ </a>
            <a href="javascript:;" class="del">刪除</a></li>
        <li><span>學(xué)習(xí)css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a
                href="javascript:;" class="del">刪除</a></li>
        <li><span>學(xué)習(xí)javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down">
            ↓ </a><a href="javascript:;" class="del">刪除</a></li>

    </ul>

</div>
<script>
    $("#btn1").click(function () {
        var value = $("#txt1").val();
        if (value == "") {
            alert("不能為空")
            return
        }
        var li = $('<li><span>' + value + '</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">刪除</a></li>')
        li.appendTo("#list")
        $("#txt1").val("");
    })


    $('#list').delegate("a", "click", function () {
        var c=$(this).attr('class')
        if(c=="del"){
            $(this).parent().remove()
        }else if(c=="up"){
            if($(this).parent().prev().length==0){
                alert('到頂')
                return
            }
            $(this).parent().insertBefore($(this).parent().prev())
        }else{
            if($(this).parent().next().length==0){
                alert('到底部了')
                return
            }
             $(this).parent().insertAfter($(this).parent().next())
        }


            })



</script>

</body>
</html>

層級(jí)菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.js"></script>

    <style type="text/css">
        body{
            font-family:'Microsoft Yahei';
        }
        body,ul{
            margin:0px;
            padding:0px;
        }
        ul{list-style:none;}
        .menu{
            width:200px;
            margin:20px auto 0;
        }
        .menu .level1,.menu li ul a{
            display:block;
            width:200px;
            height:30px;
            line-height:30px;
            text-decoration:none;
            background-color:#3366cc;
            color:#fff;
            font-size:16px;
            text-indent:10px;
        }
        .menu .level1{
            border-bottom:1px solid #afc6f6;

        }
        .menu li ul a{
            font-size:14px;
            text-indent:20px;
            background-color:#7aa1ef;

        }
        .menu li ul li{
            border-bottom:1px solid #afc6f6;
        }
        .menu li ul{
            display:none;
        }
        .menu li ul.current{
            display:block;
        }
        .menu li ul li a:hover{
            background-color:#f6b544;
        }
    </style>


    <script>
        $(function () {
            // $(".level1").click(function () {
            //     $(this).next().addClass('current')//添加樣式
            // })

            // $(".level1").click(function () {
            //     $(this).next().toggleClass('current')//切換樣式
            // })

            //  $(".level1").click(function () {
            //     $(this).next().slideDown('current')//慢慢展開(kāi)
            // })
            //  $(".level1").click(function () {
            //     $(this).next().slideUp('current')//慢慢收起
            // })
            //   $(".level1").click(function () {
            //     $(this).next().slideToggle('current')//慢慢切換
            // })

              $(".level1").click(function () {
                $(this).next().slideDown('current').parent().siblings().children('ul').slideUp('current')
            })

        })

    </script>

</head>
<body>
<ul class="menu">
        <li>
            <a href="#" class="level1">水果</a>
            <ul class="current">
                <li><a href="#">蘋(píng)果</a></li>
                <li><a href="#">梨子</a></li>
                <li><a href="#">葡萄</a></li>
                <li><a href="#">火龍果</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">海鮮</a>
            <ul>
                <li><a href="#">蟶子</a></li>
                <li><a href="#">扇貝</a></li>
                <li><a href="#">龍蝦</a></li>
                <li><a href="#">象拔蚌</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">肉類(lèi)</a>
            <ul>
                <li><a href="#">內(nèi)蒙古羊肉</a></li>
                <li><a href="#">進(jìn)口牛肉</a></li>
                <li><a href="#">野豬肉</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">蔬菜</a>
            <ul>
                <li><a href="#">娃娃菜</a></li>
                <li><a href="#">西紅柿</a></li>
                <li><a href="#">西芹</a></li>
                <li><a href="#">胡蘿卜</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">速凍</a>
            <ul>
                <li><a href="#">冰淇淋</a></li>
                <li><a href="#">灣仔碼頭</a></li>
                <li><a href="#">海參</a></li>
                <li><a href="#">牛肉丸</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

手風(fēng)琴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 12px;
        }

        #accordion {
            width: 727px;
            height: 350px;
            margin: 100px auto 0 auto;
            position: relative;
            overflow: hidden;
            border: 1px solid #CCC;
        }

        #accordion ul {
            list-style: none;
        }

        #accordion ul li {
            width: 643px;
            height: 350px;
            position: absolute;
            background: #FFF;
        }

        #accordion ul li span {
            display: block;
            width: 20px;
            height: 350px;
            float: left;
            text-align: center;
            color: #FFF;
            padding-top: 5px;
            cursor: pointer;
        }

        #accordion ul li img {
            display: block;
            float: right;
        }

        .bar01 {
            left: 0px;
        }

        .bar02 {
            left: 643px;
        }

        .bar03 {
            left: 664px;
        }

        .bar04 {
            left: 685px;
        }

        .bar05 {
            left: 706px;
        }

        .bar01 span {
            background: #09E0B5;
        }

        .bar02 span {
            background: #3D7FBB;
        }

        .bar03 span {
            background: #5CA716;
        }

        .bar04 span {
            background: #F28B24;
        }

        .bar05 span {
            background: #7C0070;
        }
    </style>
    <script src="js/jquery-1.11.0.js"></script>
</head>
<body>
<div id="accordion">
    <ul>
        <li class="bar01"><span>非洲景色01</span><img src="image/001.jpg"/></li>
        <li class="bar02"><span>非洲景色02</span><img src="image/002.jpg"/></li>
        <li class="bar03"><span>非洲景色03</span><img src="image/003.jpg"/></li>
        <li class="bar04"><span>非洲景色04</span><img src="image/004.jpg"/></li>
        <li class="bar05"><span>非洲景色05</span><img src="image/005.jpg"/></li>
    </ul>
</div>
<script>
    $("#accordion li").click(function () {
        $(this).animate({
            left: $(this).index() * 21
        })

        $(this).prevAll().each(function () {
            $(this).animate({
                left: $(this).index() * 21
            })
        })

        $(this).nextAll().each(function () {
            $(this).animate({
                left: 706-(4-$(this).index())*21
            })
        })


    })

</script>
</body>
</html>

無(wú)縫滾動(dòng)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.js"></script>
    <style type="text/css">
        body,ul,li{margin:0;padding:0}
        ul{list-style:none;}
        .slide{
            width:500px;
            height:100px;
            border:1px solid #ddd;
            margin:20px auto 0;
            position:relative;
            overflow:hidden;
        }
        .slide ul{
            position:absolute;/*相對(duì)于slide進(jìn)行絕對(duì)定位*/
            width:1000px;/*比slide寬度大一倍，做這種連續(xù)滾動(dòng)效果的時(shí)候，要在后面把內(nèi)容復(fù)制一份*/
            height:100px;
            left:0;/*可以改變?cè)撝底屍鋭?dòng)起來(lái)*/
            top:0;
        }
        .slide ul li{
            width:90px;
            height:90px;
            margin:5px;
            background-color:#ccc;
            line-height:90px;
            text-align: center;
            font-size:30px;
            float:left;
        }
        .btns{
            width:500px;
            height:50px;
            margin:10px auto 0;
        }
    </style>
</head>
<body>
<div class="btns">
        <input type="button" name="" value="向左" id="btn1">
        <input type="button" name="" value="向右" id="btn2">
    </div>
    <div class="slide" id="slide">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
<script>

        var $ul=$("#slide ul")
        // alert($ul.length)
        // $("#slide ul").html($("#slide ul").html()+$("#slide ul").html())
        $ul.html($ul.html() + $ul.html());
        left=0;
        count=2
        var time=setInterval(function () {
            if(left<-500){
                left=0
            }
            if(left>0){
                left=-500
            }
            left-=count;
            $ul.css({
                left:left
            })
        },30)
    $('#btn1').click(function () {
        count=2
    })

     $('#btn2').click(function () {
        count=-2
    })
    $("#slide").mouseover(function () {
        clearInterval(time)
    })
    $("#slide").mouseleave(function () {
        time=setInterval(function () {
            if(left<-500){
                left=0
            }
            if(left>0){
                left=-500
            }
            left-=count;
            $ul.css({
                left:left
            })
        },30)
    })

    
</script>
</body>
</html>

置頂菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{margin:0px;}
        .logo_bar{
            width:960px;
            height:200px;
            background-color:#f0f0f0;
            margin:0 auto;
        }
        .menu,.menu_pos{
            width:960px;
            height:50px;
            margin:0 auto;
            background-color:gold;
            text-align:center;
            line-height:50px;
        }
        .menu_pos{
            display:none;
        }
        .down_con{
            width:960px;
            height:1800px;
            margin:0 auto;
        }

        .down_con p{
            margin-top:100px;
            text-align:center;
        }
        .totop{
            width:50px;
            height:50px;
            background:url(image/up.png) center center no-repeat #000;
            border-radius:50%;
            position:fixed;
            right:50px;
            bottom:50px;
            display: none;
        }
    </style>
    <script src="js/jquery-1.11.0.js"></script>
</head>
<body>
<div class="logo_bar">頂部logo</div>
    <div class="menu">置頂菜單</div>
    <!-- 占位層，如果菜單顯示，它就隱藏，菜單浮動(dòng)，它就顯示，頂替菜單的位置，避免頁(yè)面跳動(dòng) -->
    <div class="menu_pos"></div>
    <div class="down_con">
        <p style="color: red">網(wǎng)站主內(nèi)容</p>
        <p>網(wǎng)站主內(nèi)容</p>
        <p>網(wǎng)站主內(nèi)容</p>
        <p>網(wǎng)站主內(nèi)容</p>
        <p>網(wǎng)站主內(nèi)容</p>
    </div>
    <!-- 點(diǎn)擊超鏈接時(shí)，不想跳轉(zhuǎn)頁(yè)面的href寫(xiě)法 -->
    <a href="javascript:;" class="totop"></a>
</body>
<script>
    $(window).scroll(function() {
        var nowTop = $(document).scrollTop();
        // console.log(nowTop)
        if(nowTop>200){
            $(".menu").css({
                position:'fixed',
                top:0,
                left:'50%',
                marginLeft:-480
            })
             $(".menu_pos").show()
        }else{
           $(".menu").css({
                position:'static',
               marginLeft:'auto'
            })
            $(".menu_pos").css({
                 display:'none'
             })
        }
        if(nowTop>400){
            // $(".totop").fadeToggle()
             $(".totop").fadeIn()
            // $(".totop").show()
        }else{
              $(".totop").fadeOut()
        }




    })
    $('.totop').click(function() {
                $('html,body').animate({scrollTop: 0});
            });
</script>
</html>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

jQuery屬性動(dòng)畫(huà)循環(huán)

jQuery屬性動(dòng)畫(huà)循環(huán)

事件委托

jQuery特殊效果

jQuery鏈?zhǔn)秸{(diào)用

jQuery動(dòng)畫(huà)

滾動(dòng)事件

jQuery事件

節(jié)點(diǎn)操作

創(chuàng)建節(jié)點(diǎn)

插入節(jié)點(diǎn)

刪除節(jié)點(diǎn)

計(jì)劃列表

層級(jí)菜單

手風(fēng)琴

無(wú)縫滾動(dòng)

置頂菜單

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

jQuery屬性動(dòng)畫(huà)循環(huán)

事件委托

jQuery特殊效果

jQuery鏈?zhǔn)秸{(diào)用

jQuery動(dòng)畫(huà)

滾動(dòng)事件

jQuery事件

節(jié)點(diǎn)操作

創(chuàng)建節(jié)點(diǎn)

插入節(jié)點(diǎn)

刪除節(jié)點(diǎn)

計(jì)劃列表

層級(jí)菜單

手風(fēng)琴

無(wú)縫滾動(dòng)

置頂菜單

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av